import React, { useState } from 'react';
import { Truck, FileCheck, CircleAlert, FolderOpen, History, Info, Activity, Search } from 'lucide-react';
import { toast } from 'sonner';

const GrCteView = () => {
  const [selectedFolder, setSelectedFolder] = useState(null);
  const [isAnalyzing, setIsAnalyzing] = useState(false);
  const [logs, setLogs] = useState([]);

  const handleAnalyze = async () => {
    setIsAnalyzing(true);
    setLogs(prev => [...prev, "[SYSTEM] Iniciando conferência de CTEs e MDF-e..."]);
    setLogs(prev => [...prev, "[IO] Lendo diretório de XMLs..."]);

    // Simulated logic 
    setTimeout(() => {
        setLogs(prev => [...prev, "[PROCESS] Validando sequencial de CTEs..."]);
    }, 1000);

    setTimeout(() => {
        setLogs(prev => [...prev, "[DATA] CTE #44562 - OK\nCTE #44563 - ERRO: Valor divergente\nCTE #44564 - OK"]);
    }, 2500);

    setTimeout(() => {
        setIsAnalyzing(false);
        setLogs(prev => [...prev, "[SUCCESS] Conferência finalizada. 1 divergência encontrada."]);
        toast.info("Conferência de CTe finalizada!");
    }, 4500);
  };

  return (
    <div className="flex flex-col gap-8 p-6 md:p-10 animate-in fade-in slide-in-from-bottom-4 duration-700">
      <header className="space-y-4">
        <h1 className="text-4xl md:text-6xl font-bold text-slate-800 dark:text-white tracking-tighter leading-none">
          Revisão de <span className="text-[var(--gr-primary)]">Cargas</span>
        </h1>
        <p className="text-slate-400 dark:text-slate-500 text-base md:text-lg font-medium italic opacity-80">
          Validação de Conhecimentos de Transporte e Manifesto de Documentos Fiscais
        </p>
      </header>

      <div className="max-w-4xl mx-auto w-full">
        <div className="bg-white dark:bg-[#1b1b1b] p-8 md:p-12 rounded-[40px] border border-slate-200 dark:border-white/5 shadow-sm space-y-8 text-center">
           <div className="flex flex-col items-center space-y-6 py-12 border-2 border-dashed border-slate-200 dark:border-white/10 rounded-[32px] bg-slate-50/50 dark:bg-white/[0.02]">
              <div className="p-6 bg-white dark:bg-[#141414] rounded-full text-[var(--gr-primary)] shadow-xl shadow-[var(--gr-primary)]/10">
                <FolderOpen size={64} />
              </div>
              <div className="space-y-2 px-8 max-w-md">
                <h4 className="text-2xl font-bold text-slate-800 dark:text-white uppercase tracking-tighter">Diretório de XMLs</h4>
                <p className="text-sm text-slate-500 font-medium leading-relaxed">Selecione a pasta contendo os arquivos CTE e MDF-e para verificação automática de divergências.</p>
              </div>
              <button 
                 className="px-8 py-4 bg-slate-800 hover:bg-slate-900 text-white rounded-[20px] font-bold text-xs uppercase tracking-[0.2em] transition-all shadow-lg"
              >
                 Selecionar Pasta Local
              </button>
           </div>

           <div className="grid md:grid-cols-2 gap-6 items-center">
             <div className="bg-emerald-50/50 dark:bg-emerald-900/10 p-6 rounded-[24px] border border-emerald-100 dark:border-emerald-900/20 flex gap-4 text-left">
               <Info className="text-emerald-500 shrink-0" size={24} />
               <p className="text-xs text-emerald-800 dark:text-emerald-300 font-medium leading-relaxed">
                  O sistema valida sequenciais, valores líquidos e vínculos entre documentos fiscais em segundos.
               </p>
             </div>

             <button
               onClick={handleAnalyze}
               disabled={isAnalyzing}
               className="w-full flex items-center justify-center gap-3 px-8 py-6 bg-[var(--gr-primary)] hover:bg-[var(--gr-primary-dark)] text-white rounded-[24px] font-bold text-xs uppercase tracking-[0.2em] transition-all shadow-xl shadow-[var(--gr-primary)]/20 hover:scale-[1.02] active:scale-95 disabled:opacity-50"
             >
               {isAnalyzing ? (
                 <Activity className="animate-spin" size={20} />
               ) : (
                 <>
                   <FileCheck size={20} />
                   Processar Lote Fiscal
                 </>
               )}
             </button>
           </div>
        </div>
      </div>
    </div>
  );
};

export default GrCteView;