import { useEffect, useState } from 'react';
import { useParams, Link } from 'react-router-dom';
import { format, isValid } from 'date-fns';
import ptBR from 'date-fns/locale/pt-BR';

interface ProvaVerificacao {
  verified: boolean;
  message: string;
  prova?: {
    fileName: string;
    checksumSha256: string;
    checksumSha512: string;
    checksumMd5: string;
    timestamp: string;
    metadata: any;
    dataCriacao: string;
    dataValida: string;
  };
  timestamp?: any;
}

export function PublicVerificarProva() {
  const { hash } = useParams<{ hash: string }>();
  const [result, setResult] = useState<ProvaVerificacao | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    const fetchProva = async () => {
      try {
        setLoading(true);
        const response = await fetch(`/api/provas/verificar/${hash}`);
        
        if (!response.ok) {
          throw new Error(response.statusText || 'Falha na verificação');
        }
        
        const data = await response.json();
        console.log('Dados recebidos:', data);
        setResult(data);
      } catch (error) {
        console.error('Erro ao verificar:', error);
        setError('Não foi possível verificar a autenticidade do documento.');
      } finally {
        setLoading(false);
      }
    };

    if (hash) {
      fetchProva();
    }
  }, [hash]);

  // Função segura para formatar datas
  const formatDate = (dateString: string | undefined | null) => {
    if (!dateString) return 'Data não disponível';
    
    try {
      const date = new Date(dateString);
      
      if (!isValid(date)) {
        console.warn('Data inválida:', dateString);
        return 'Data inválida';
      }
      
      return format(date, 'dd/MM/yyyy HH:mm:ss', { locale: ptBR });
    } catch (error) {
      console.error('Erro ao formatar data:', error);
      return 'Erro na formatação da data';
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-100 py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-4xl mx-auto">
          <div className="bg-white rounded-lg shadow p-6">
            <div className="animate-pulse">
              <div className="h-4 bg-gray-300 rounded w-3/4 mx-auto mb-4"></div>
              <div className="h-4 bg-gray-300 rounded w-1/2 mx-auto"></div>
            </div>
            <p className="mt-4 text-gray-500 text-center">Carregando informações...</p>
          </div>
        </div>
      </div>
    );
  }

  if (error || !result) {
    return (
      <div className="min-h-screen bg-gray-100 py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-4xl mx-auto">
          <div className="bg-white rounded-lg shadow">
            <div className="p-6 text-center">
              <svg className="w-16 h-16 text-red-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              <h2 className="text-2xl font-bold text-red-600 mb-4">Verificação Falhou</h2>
              <p className="text-gray-600 mb-6">{error || 'Não foi possível verificar este documento.'}</p>
              <Link 
                to="/provas/upload" 
                className="inline-flex items-center px-4 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700"
              >
                Validar Novo Documento
              </Link>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-100 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-4xl mx-auto">
        <div className="bg-white rounded-lg shadow overflow-hidden">
          <div className="p-6">
            <div className="text-center mb-8">
              {result.verified ? (
                <>
                  <svg className="w-20 h-20 text-green-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                  <h2 className="text-3xl font-bold text-green-600 mb-2">Documento Verificado</h2>
                  <p className="text-gray-600 text-lg">
                    Este documento foi validado digitalmente e possui registro de autenticidade.
                  </p>
                </>
              ) : (
                <>
                  <svg className="w-20 h-20 text-red-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                  <h2 className="text-3xl font-bold text-red-600 mb-2">Verificação com Problemas</h2>
                  <p className="text-gray-600 text-lg">{result.message}</p>
                </>
              )}
            </div>

            {result.prova && (
              <div className="space-y-6">
                <div className="border-t border-b border-gray-200 py-6">
                  <h3 className="text-xl font-semibold text-gray-800 mb-4">Informações do Documento</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <DetailItem label="Nome do Arquivo" value={result.prova.fileName} />
                    <DetailItem label="Data de Validação" value={formatDate(result.prova.dataCriacao)} />
                    <DetailItem label="Última Verificação" value={formatDate(result.prova.dataValida)} />
                  </div>
                </div>

                <div className="border-b border-gray-200 py-6">
                  <h3 className="text-xl font-semibold text-gray-800 mb-4">Informações de Segurança</h3>
                  <div className="space-y-3 font-mono text-sm overflow-auto bg-gray-50 p-4 rounded-lg">
                    <DetailItem label="SHA-256" value={result.prova.checksumSha256} />
                    <DetailItem label="SHA-512" value={result.prova.checksumSha512} />
                    <DetailItem label="MD5" value={result.prova.checksumMd5} />
                    <DetailItem 
                      label="Registro Temporal" 
                      value={formatDate(result.prova.timestamp ? 
                        JSON.parse(result.prova.timestamp).timestamp : 
                        result.prova.dataCriacao)}
                    />
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    </div>
                  </div>
                </div>

                {result.prova.metadata && (
                  <div className="py-6">
                    <h3 className="text-xl font-semibold text-gray-800 mb-4">Informações de Contexto</h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 bg-gray-50 p-4 rounded-lg">
                      {result.prova.metadata.userInfo ? (
                        <>
                          <DetailItem 
                            label="Navegador" 
                            value={`${result.prova.metadata.userInfo.browser?.name || 'N/A'} ${result.prova.metadata.userInfo.browser?.version || ''}`} 
                          />
                          <DetailItem 
                            label="Sistema Operacional" 
                            value={`${result.prova.metadata.userInfo.os?.name || 'N/A'} ${result.prova.metadata.userInfo.os?.version || ''}`} 
                          />
                          <DetailItem 
                            label="Dispositivo" 
                            value={result.prova.metadata.userInfo.device?.type || 'desktop'} 
                          />
                        </>
                      ) : (
                        <>
                          {/* Exibir informações do navegador - baseado no user-agent */}
                          <DetailItem 
                            label="User-Agent" 
                            value={result.prova.metadata.userAgent || 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)'}
                          />
                          
                          {/* Exibir informações do sistema */}
                          <DetailItem 
                            label="Sistema" 
                            value={result.prova.metadata.platform || 'Windows 10'} 
                          />
                        </>
                      )}
                      
                      {/* Garantir exibição do IP */}
                      <DetailItem 
                        label="Endereço IP" 
                        value={
                          result.prova.metadata.ipAddress || 
                          result.prova.metadata.connectionInfo?.ip ||
                          result.prova.metadata.connectionInfo?.socketAddress ||
                          '::1'
                        } 
                      />
                      
                      {/* Garantir exibição da porta capturada no JSON da prova */}
                      <DetailItem 
                        label="Porta de Conexão" 
                        value={
                          result.prova.metadata.clientPort || 
                          result.prova.metadata.connectionInfo?.socketPort || 
                          (result.prova.metadata.userInfo?.ipAddress &&
                            (() => {
                              const ip = result.prova.metadata.userInfo.ipAddress;
                              const match = typeof ip === 'string' ? ip.match(/:(\d+)$/) : null;
                              return match ? match[1] : undefined;
                            })()
                          ) ||
                          'Não disponível'
                        }
                      />
                      
                      {/* Adicionar família IP */}
                      <DetailItem 
                        label="Família IP" 
                        value={
                          result.prova.metadata.connectionInfo?.remoteFamily || 
                          ((result.prova.metadata.ipAddress || '::1').includes(':') ? 'IPv6' : 'IPv4')
                        } 
                      />
                      
                      {/* Adicionar idioma */}
                      <DetailItem
                        label="Idioma"
                        value={
                          result.prova.metadata.language ||
                          result.prova.metadata.headers?.['accept-language'] ||
                          'pt-BR'
                        }
                      />
                      
                      {/* Adicionar timezone */}
                      {result.prova.metadata.timezone && (
                        <DetailItem
                          label="Timezone"
                          value={result.prova.metadata.timezone}
                        />
                      )}
                      
                      {/* Garantir exibição de data de modificação */}
                      {(result.prova.metadata.file_specific?.modified || result.prova.metadata.modification_times) && (
                        <DetailItem 
                          label="Data de Modificação Original" 
                          value={formatDate(result.prova.metadata.file_specific?.modified || 
                                 (result.prova.metadata.modification_times ? 
                                  new Date(parseInt(result.prova.metadata.modification_times)) : null))} 
                        />
                      )}
                      
                      {/* Exibir geolocalização capturada na prova */}
                      {(
                        (result.prova.metadata?.latitude !== undefined && result.prova.metadata?.latitude !== null) ||
                        (result.prova.metadata?.longitude !== undefined && result.prova.metadata?.longitude !== null) ||
                        (result.prova.metadata?.locationInfo?.latitude !== undefined && result.prova.metadata?.locationInfo?.latitude !== null) ||
                        (result.prova.metadata?.locationInfo?.longitude !== undefined && result.prova.metadata?.locationInfo?.longitude !== null)
                      ) && (
                        <DetailItem
                          label="Coordenadas"
                          value={`${
                            result.prova.metadata?.latitude !== undefined && result.prova.metadata?.latitude !== null
                              ? result.prova.metadata.latitude
                              : result.prova.metadata?.locationInfo?.latitude !== undefined && result.prova.metadata?.locationInfo?.latitude !== null
                                ? result.prova.metadata.locationInfo.latitude
                                : 'N/A'
                          }, ${
                            result.prova.metadata?.longitude !== undefined && result.prova.metadata?.longitude !== null
                              ? result.prova.metadata.longitude
                              : result.prova.metadata?.locationInfo?.longitude !== undefined && result.prova.metadata?.locationInfo?.longitude !== null
                                ? result.prova.metadata.locationInfo.longitude
                                : 'N/A'
                          }`}
                        />
                      )}
                      
                      <div className="col-span-1 md:col-span-2 mt-1">
                        <div className="text-xs text-gray-500 italic">
                          A data de modificação representa o momento real em que o arquivo foi alterado pela última vez,
                          sendo muito mais confiável que a data de criação para efeitos de validação temporal.
                        </div>
                      </div>
                    </div>
                  </div>
                )}
                
                <div className="pt-4 flex flex-col sm:flex-row gap-3 justify-center">
                  <Link 
                    to="/provas/upload" 
                    className="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
                  >
                    Validar Novo Documento
                  </Link>
                  {result.verified && (
                    <a 
                      href={`/api/provas/relatorio/${result.prova.checksumSha256}`}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="inline-flex items-center justify-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
                    >
                      Baixar Relatório
                    </a>
                  )}
                </div>
              </div>
            )}
          </div>
          
          <div className="bg-gray-50 px-6 py-4 text-center text-sm text-gray-500">
            Documento validado através do sistema AdvX Provas - Integridade e Autenticidade Digital
          </div>
        </div>
      </div>
    </div>
  );
}

function DetailItem({ label, value }: { label: string; value: string }) {
  return (
    <div>
      <dt className="text-sm font-medium text-gray-500">{label}</dt>
      <dd className="mt-1 text-base text-gray-900 break-words">{value}</dd>
    </div>
  );
}