import { useState } from 'react';
import { ShieldCheck, FileText, CheckCircle2, Download, Bot, FileCheck } from 'lucide-react';
import { Card, CardContent, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogClose } from '@/components/ui/dialog';

const rawLaudos = import.meta.glob('/public/laudos/*.pdf', { eager: true, query: '?url', import: 'default' });
const availableLaudos = Object.keys(rawLaudos).map(key => {
  const filename = key.split('/').pop() || '';
  const url = (rawLaudos as Record<string, string>)[key];
  return { filename, url };
});

export default function CertificatePage() {
  const [laudosOpen, setLaudosOpen] = useState(false);

  return (
    <div className="p-4 md:p-8 max-w-4xl mx-auto space-y-8 animate-in fade-in duration-500">
      <div className="flex flex-col md:flex-row items-center gap-6 pb-6 border-b">
        <div className="bg-emerald-500/10 p-4 rounded-full border border-emerald-500/20">
          <ShieldCheck className="w-16 h-16 text-emerald-600" />
        </div>
        <div className="space-y-2 text-center md:text-left">
          <h1 className="text-3xl font-bold tracking-tight">Certificado de Fidelidade Matemática</h1>
          <p className="text-muted-foreground text-lg">
            Garantia <strong className="text-foreground">incontestável</strong> de conformidade com a NBR 6123:2023, validada por Duplo Fator de Checagem Neural.
          </p>
        </div>
      </div>

      <section className="space-y-4">
        <h2 className="text-2xl font-semibold flex items-center gap-2">
          <CheckCircle2 className="w-6 h-6 text-emerald-600" />
          Metodologia de Validação Incontestável
        </h2>
        <Card className="border-emerald-500/20 shadow-sm">
          <CardContent className="pt-6 text-muted-foreground space-y-4">
            <p>
              A segurança estrutural não admite falhas. Por isso, o motor matemático do BrainWind opera sob um protocolo estrito de <strong>Duplo Fator de Checagem</strong>. Ele não depende apenas de algoritmos tradicionais, mas é submetido à validação contínua por um <strong>Conselho de Inteligências Artificiais de Raciocínio Profundo</strong> (Deep Reasoning LLMs).
            </p>
            <p>
              Durante a auditoria, centenas de cenários físicos complexos são calculados pelo nosso motor determinístico. Simultaneamente, as IAs atuam como <strong>Auditoras Independentes ("Blind Audit")</strong>. Elas recebem apenas o problema físico e as tabelas normativas, deduzindo toda a matemática vetorial passo a passo, aplicando ábacos e impondo limites normativos de forma isolada.
            </p>
            <p>
              O atestado de conformidade só é emitido quando o cruzamento entre o motor do aplicativo e o raciocínio vetorial da IA atinge <strong>100% de convergência (Desvio Zero)</strong>. Este método elimina qualquer sombra de dúvida técnica, garantindo cálculos de ação do vento blindados e incontestáveis.
            </p>
          </CardContent>
        </Card>
      </section>

      <section className="space-y-4">
        <h2 className="text-2xl font-semibold flex items-center gap-2">
          <Bot className="w-6 h-6 text-blue-600" />
          Conselho de IAs Avaliadoras
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {[
            { name: 'MiniMax-M3', desc: 'Matemática e Raciocínio Lógico (MiniMax)' },
            { name: 'DeepSeek Reasoner (R1)', desc: 'Inferência Algorítmica (DeepSeek)' },
            { name: 'Qwen-Plus / Max', desc: 'Validação Numérica Avançada (Alibaba)' },
            { name: 'Gemini 2.0 Thinking', desc: 'Análise Científica e Normativa (Google)' },
            { name: 'OpenAI o3-mini', desc: 'Auditoria Cognitiva de Alta Precisão (OpenAI)' }
          ].map(ai => (
            <Card key={ai.name} className="flex flex-row items-center p-4 gap-4 bg-muted/10 border-border/50">
              <Bot className="w-8 h-8 text-muted-foreground" />
              <div>
                <CardTitle className="text-base">{ai.name}</CardTitle>
                <CardDescription>{ai.desc}</CardDescription>
              </div>
            </Card>
          ))}
        </div>
      </section>

      <section className="space-y-4">
        <h2 className="text-2xl font-semibold flex items-center gap-2">
          <FileText className="w-6 h-6 text-purple-600" />
          Transparência Total e Laudos Comprobatórios
        </h2>
        <Card className="bg-muted/30 border-border/50">
          <CardContent className="pt-6">
            <p className="text-muted-foreground mb-4">
              Nós repudiamos sistemas "caixa preta". A confiança plena exige rastreabilidade total. Os laudos técnicos de cada auditoria estão disponíveis publicamente, demonstrando a montagem física do cenário, a consulta exata das tabelas da NBR 6123 (Ex: Tabela 3, 6, 13) e a demonstração dedutiva completa (Chain of Thought) atestando a exatidão dos resultados.
            </p>
            <Button className="w-full sm:w-auto bg-emerald-600 hover:bg-emerald-700 text-white" onClick={() => setLaudosOpen(true)}>
              <Download className="w-4 h-4 mr-2" />
              Acessar Repositório de Auditoria (Laudos PDF)
            </Button>
          </CardContent>
        </Card>
      </section>

      <Dialog open={laudosOpen} onOpenChange={setLaudosOpen}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <FileCheck className="w-5 h-5 text-emerald-600" />
              Repositório Oficial de Laudos
            </DialogTitle>
            <DialogDescription>
              Abaixo estão listados os laudos comprobatórios gerados pelo Conselho de IAs. Clique para baixar ou visualizar.
            </DialogDescription>
          </DialogHeader>

          <div className="py-4 space-y-3 max-h-[60vh] overflow-y-auto pr-2">
            {availableLaudos.length === 0 ? (
              <div className="text-center p-8 bg-muted/20 border border-dashed rounded-lg">
                <FileText className="w-8 h-8 text-muted-foreground/50 mx-auto mb-3" />
                <p className="text-sm text-muted-foreground">
                  Nenhum laudo encontrado no servidor no momento.
                </p>
                <p className="text-xs text-muted-foreground mt-1">
                  Os administradores podem adicionar laudos na pasta <code>/public/laudos/</code> da VPS.
                </p>
              </div>
            ) : (
              availableLaudos.map((laudo, i) => (
                <div key={i} className="flex items-center justify-between p-3 rounded-md border bg-card hover:bg-muted/30 transition-colors">
                  <div className="flex items-center gap-3 overflow-hidden">
                    <div className="p-2 bg-emerald-100 dark:bg-emerald-900/30 rounded-md shrink-0">
                      <FileText className="w-4 h-4 text-emerald-700 dark:text-emerald-400" />
                    </div>
                    <span className="text-sm font-medium truncate" title={laudo.filename}>
                      {laudo.filename}
                    </span>
                  </div>
                  <Button variant="ghost" size="sm" asChild className="shrink-0 ml-2">
                    <a href={laudo.url} download={laudo.filename} target="_blank" rel="noreferrer">
                      <Download className="w-4 h-4 mr-1.5" />
                      Baixar
                    </a>
                  </Button>
                </div>
              ))
            )}
          </div>
          
          <div className="flex justify-end pt-2 border-t mt-2">
            <DialogClose asChild>
              <Button variant="outline">Fechar</Button>
            </DialogClose>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}
