import React from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from './ui/card';
import { Button } from './ui/button';
import { Badge } from './ui/badge';
import { Separator } from './ui/separator';
import { Box, ChevronRight, FileCode } from 'lucide-react';
import { exportGalpaoToFtool } from '../lib/export-ftool';

const FtoolExportCard: React.FC = () => {
  return (
    <Card className="shadow-sm border-border">
      <CardHeader className="pb-3">
        <CardTitle className="text-lg flex items-center gap-2">
          <Box className="w-5 h-5 text-emerald-600" />
          Exportar para Ftool (M9.4)
        </CardTitle>
        <CardDescription>
          Pórtico 2D com nós, barras e cargas lineares para Ftool (PUC-Rio).
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-3">
        <div className="rounded-md border bg-muted/30 p-3 space-y-2">
          <div className="flex items-center gap-2 text-sm font-medium">
            <FileCode className="w-4 h-4 text-muted-foreground" />
            <span>Conteúdo do arquivo .ftl</span>
          </div>
          <ul className="text-xs text-muted-foreground space-y-1 ml-6 list-disc">
            <li>Unidades (kN, m)</li>
            <li>1 material (Aço, E=2×10⁸ kN/m²)</li>
            <li>3 seções (Coluna, Terça E, Terça D)</li>
            <li>6 nós (base + topo + cumeeira)</li>
            <li>4 barras (2 colunas + 2 águas)</li>
            <li>1 caso de carga (vento) com 4 cargas distribuídas</li>
          </ul>
        </div>

        <div className="flex flex-wrap gap-2 text-xs">
          <Badge variant="outline" className="font-mono">
            <ChevronRight className="w-3 h-3 mr-1" />
            Import no Ftool: File → Import
          </Badge>
        </div>

        <Separator />

        <Button
          onClick={() => exportGalpaoToFtool()}
          className="w-full bg-emerald-600 hover:bg-emerald-700 text-white"
          variant="default"
        >
          <Box className="w-4 h-4 mr-2" />
          Baixar galpao_ftool.ftl
        </Button>

        <p className="text-[11px] text-muted-foreground leading-relaxed">
          <ChevronRight className="w-3 h-3 inline -mt-0.5" /> Sinal de carga: positivo = na direção
          positiva do eixo Y (empuxo). Cargas de coluna em GlobalX (horizontal).
        </p>
      </CardContent>
    </Card>
  );
};

export default FtoolExportCard;