import { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { BookOpen, CheckCircle2, Play } from 'lucide-react';
import { generateAllScenarios } from '@/lib/audit/scenarios';
import type { AuditScenario } from '@/lib/audit/types';
import { useNavigate } from 'react-router-dom';

export default function BibliographicTestPanel() {
  const [scenarios] = useState<AuditScenario[]>(() => 
    generateAllScenarios().filter(s => s.isBibliographic)
  );
  
  const navigate = useNavigate();

  const handleCopyInputs = (scenario: AuditScenario) => {
    // Navega pro módulo
    navigate(`/${scenario.module === 'isolated-roof' ? 'cobertura-isolada' : scenario.module === 'sign' ? 'muros' : scenario.module === 'bar' ? 'barras' : scenario.module === 'bridge' ? 'pontes' : scenario.module === 'dynamics' ? 'dinamica' : scenario.module === 'vault' ? 'abobada' : scenario.module === 'dome' ? 'cupula' : scenario.module}`);
  };

  return (
    <div className="space-y-4">
      <Card>
        <CardHeader>
          <CardTitle className="text-lg flex items-center gap-2">
            <BookOpen className="w-5 h-5 text-primary" />
            Validação Bibliográfica (TesteBib)
          </CardTitle>
          <CardDescription>
            Casos clássicos da literatura brasileira de engenharia estrutural (Blessmann, Pfeil, Rebello) 
            com resolução passo a passo. Os valores calculados localmente pelo aplicativo são comparados 
            ao gabarito da literatura.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          {scenarios.map(s => (
            <Card key={s.id} className="overflow-hidden border-2 border-primary/10">
              <div className="bg-primary/5 px-4 py-2 border-b border-primary/10 flex justify-between items-center">
                <div className="font-semibold text-primary">{s.id}</div>
                <Badge variant="outline" className="bg-background">{s.moduleLabel}</Badge>
              </div>
              <CardContent className="p-4 space-y-4">
                <div className="space-y-1">
                  <h4 className="font-semibold text-sm">Enunciado</h4>
                  <p className="text-sm text-muted-foreground leading-relaxed">{s.enunciadoParafraseado}</p>
                </div>
                
                <div className="space-y-1">
                  <h4 className="font-semibold text-sm">Referência Bibliográfica</h4>
                  <p className="text-sm text-muted-foreground italic border-l-2 border-primary/40 pl-2">
                    {s.bibliografiaReferencia}
                  </p>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="bg-muted/30 p-3 rounded-md">
                    <h5 className="text-xs font-semibold uppercase text-muted-foreground mb-2">Inputs (Geometria / Vento)</h5>
                    <div className="text-sm space-y-1 font-mono text-xs">
                      {Object.entries(s.inputs).map(([k, v]) => (
                        <div key={k} className="flex justify-between">
                          <span>{k}:</span>
                          <span className="font-semibold">{JSON.stringify(v)}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                  
                  <div className="bg-muted/30 p-3 rounded-md">
                    <h5 className="text-xs font-semibold uppercase text-muted-foreground mb-2">Valores Calculados (Kernel Local)</h5>
                    <div className="text-sm space-y-1 font-mono text-xs">
                      {Object.entries(s.outputs).slice(0, 5).map(([k, v]) => (
                        <div key={k} className="flex justify-between items-center">
                          <span>{k}:</span>
                          <span className="font-semibold text-emerald-600 dark:text-emerald-400 truncate ml-2">
                            {typeof v === 'number' ? v.toFixed(3) : JSON.stringify(v)}
                            <CheckCircle2 className="inline w-3 h-3 ml-1" />
                          </span>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>

                <div className="flex justify-end pt-2">
                  <Button variant="outline" size="sm" onClick={() => handleCopyInputs(s)}>
                    <Play className="w-3.5 h-3.5 mr-2" />
                    Simular no Módulo
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}
          {scenarios.length === 0 && (
            <p className="text-center text-muted-foreground py-8">Nenhum cenário bibliográfico encontrado.</p>
          )}
        </CardContent>
      </Card>
    </div>
  );
}