import React from 'react';
import { 
  CheckCircle2, 
  Download, 
  Activity, 
  Upload, 
  Globe, 
  Zap, 
  Clock, 
  Presentation, 
  FileText 
} from 'lucide-react';
import { motion } from 'motion/react';

interface StatusOverlayProps {
  status: string;
  progress: number;
  onReset: () => void;
}

export const StatusOverlay: React.FC<StatusOverlayProps> = ({ status, progress, onReset }) => {
  return (
    <div className="max-w-6xl mx-auto">
      <div className="mb-12">
        <span className="accent-pill mb-4 block w-fit italic">Traitement en cours</span>
        <h1 className="text-5xl font-black uppercase tracking-tighter mb-4 leading-none">Analyse IA Active</h1>
        <p className="text-brand-dark/40 font-medium">Votre mise en page est en cours de préservation</p>
      </div>

      <div className="grid lg:grid-cols-12 gap-12">
        <div className="lg:col-span-8">
          <div className="editorial-card p-16 h-full border-none shadow-editorial bg-white">
             {status === 'done' ? (
                <div className="h-full flex flex-col">
                  <div className="p-8 bg-brand-accent/5 border border-brand-accent/10 rounded-[32px] flex items-center justify-between mb-16 shadow-inner">
                    <div className="flex items-center gap-6">
                      <div className="w-14 h-14 bg-brand-accent rounded-full flex items-center justify-center text-white shadow-xl">
                        <CheckCircle2 size={28} />
                      </div>
                      <div>
                        <p className="text-[13px] font-black uppercase tracking-[0.1em] text-brand-dark">Traduction terminée</p>
                        <p className="text-[10px] text-brand-dark/40 font-bold uppercase mt-1 tracking-widest">super_complex_translated.pptx</p>
                      </div>
                    </div>
                    <span className="px-5 py-2 bg-white rounded-full text-[9px] font-black uppercase tracking-widest text-brand-accent border border-brand-accent/20 shadow-sm">✓ Qualité Maître</span>
                  </div>

                  <div className="flex-1 flex flex-col items-center justify-center py-20 bg-brand-muted/20 rounded-[40px] border border-black/5">
                    <button className="premium-button px-24 py-6 text-xl !rounded-full flex items-center gap-6 mb-8 group">
                      <Download size={28} className="group-hover:translate-y-1 transition-transform" />
                      Télécharger
                    </button>
                    <button 
                      onClick={onReset}
                      className="text-[10px] font-black uppercase tracking-[0.3em] text-brand-dark/20 hover:text-brand-dark transition-colors"
                    >
                      + Nouvelle traduction
                    </button>
                  </div>
                </div>
             ) : (
                <>
                  <div className="flex items-center gap-6 mb-20">
                    <div className="w-16 h-16 bg-brand-muted rounded-2xl flex items-center justify-center text-brand-accent border border-brand-accent/10 animate-pulse">
                      <Activity size={32} />
                    </div>
                    <div>
                      <h3 className="text-2xl font-black uppercase tracking-tight mb-2">Moteur contextuel actif</h3>
                      <p className="text-[10px] text-brand-dark/30 font-black uppercase tracking-widest">super_complex_document.docx</p>
                    </div>
                  </div>

                  {/* Progress Line */}
                  <div className="relative h-2 bg-brand-muted rounded-full mb-24">
                    <div className="absolute top-1/2 left-0 w-full -translate-y-1/2 flex justify-between px-2">
                       {[Upload, Activity, Globe, Zap, CheckCircle2].map((Icon, i) => (
                         <div key={i} className={`w-12 h-12 rounded-2xl border-4 border-white shadow-xl flex items-center justify-center z-10 transition-all duration-500 ${progress > (i * 25) ? 'bg-brand-dark text-white scale-110' : 'bg-brand-muted text-brand-dark/20'}`}>
                           <Icon size={18} />
                         </div>
                       ))}
                    </div>
                    <motion.div 
                      className="absolute top-0 left-0 h-full bg-brand-accent shadow-[0_0_20px_rgba(197,161,122,0.4)]"
                      initial={{ width: 0 }}
                      animate={{ width: `${progress}%` }}
                    />
                  </div>

                  <div className="flex justify-between items-end mb-8">
                    <span className="text-[10px] font-black text-brand-dark/30 uppercase tracking-[0.3em]">{status === 'uploading' ? 'Phase 1: Initialisation' : 'Phase 2: Reconstruction Contextuelle'}</span>
                    <span className="text-7xl font-black text-brand-dark">{progress}%</span>
                  </div>

                  <div className="grid grid-cols-4 gap-6 pt-12 border-t border-black/5">
                    {[
                      { label: 'segments', val: progress + '%', icon: <FileText size={18}/> },
                      { label: 'précision', val: '99.9%', icon: <Zap size={18} /> },
                      { label: 'vitesse', val: 'Turbo', icon: <Clock size={18} /> },
                      { label: 'temps', val: '0:01', icon: <Activity size={18} /> }
                    ].map((s, i) => (
                      <div key={i} className="p-6 bg-brand-muted/30 rounded-3xl text-center border border-transparent hover:border-brand-accent/10 transition-all">
                        <div className="text-brand-accent flex justify-center mb-4">{s.icon}</div>
                        <p className="text-[12px] font-black text-brand-dark mb-1 uppercase tracking-tight">{s.val}</p>
                        <p className="text-[8px] font-black text-brand-dark/30 uppercase tracking-[0.2em]">{s.label}</p>
                      </div>
                    ))}
                  </div>
                </>
             )}
          </div>
        </div>

        <div className="lg:col-span-4">
           <div className="editorial-card p-10 bg-white border-none shadow-editorial h-full">
             <h4 className="text-[10px] font-black uppercase tracking-[0.4em] mb-12 flex items-center gap-3 text-brand-dark/30">
               <div className="w-2 h-2 bg-brand-accent rounded-full animate-ping" />
               Moniteur IA
             </h4>

             <div className="p-6 bg-brand-muted rounded-[32px] mb-10 flex items-center gap-5 border border-black/5">
               <div className="w-12 h-12 bg-white rounded-2xl flex items-center justify-center text-brand-accent shadow-sm">
                 <Presentation size={24} />
               </div>
               <div className="overflow-hidden">
                 <p className="text-[11px] font-black uppercase tracking-tight truncate">super_complex_translated.pptx</p>
                 <p className="text-[9px] text-brand-dark/40 font-bold uppercase tracking-widest mt-1">89.1 KB • PowerPoint</p>
               </div>
             </div>

             <div className="space-y-8 mb-16 px-2">
               <div className="flex justify-between items-center text-[10px] font-black uppercase tracking-[0.4em] text-brand-dark/30">
                 <span>Source</span>
                 <span className="text-brand-dark">AUTO</span>
               </div>
               <div className="flex justify-between items-center text-[10px] font-black uppercase tracking-[0.4em] text-brand-dark/30">
                 <span>Cible</span>
                 <span className="text-brand-accent">FRANÇAIS</span>
               </div>
               <div className="flex justify-between items-center text-[10px] font-black uppercase tracking-[0.4em] text-brand-dark/30">
                 <span>Algorithme</span>
                 <span className="text-brand-dark">NEURAL V4</span>
               </div>
             </div>

             <div className="pt-10 border-t border-black/10">
               <div className="flex justify-between text-[10px] font-black uppercase tracking-[0.4em] mb-4">
                 <span className="text-brand-dark/30">Intégrité Layout</span>
                 <span className="text-brand-accent">100% SECURE</span>
               </div>
               <div className="h-2 bg-brand-muted rounded-full overflow-hidden p-0.5">
                 <motion.div animate={{ width: progress + '%' }} className="h-full bg-brand-accent rounded-full" />
               </div>
             </div>

             <button className="w-full mt-16 py-5 border border-red-50 text-red-500 rounded-2xl text-[10px] font-black uppercase tracking-[0.3em] flex items-center justify-center gap-3 hover:bg-red-50 transition-all">
               ⟳ Annuler le processus
             </button>
           </div>
        </div>
      </div>
    </div>
  );
};
