import { Sparkles, CheckCircle2, X } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';

interface CrmStatsHeaderProps {
    view: 'assistant' | 'inbox';
    setView: (view: 'assistant' | 'inbox') => void;
    uploadedFile: { name: string, listName: string } | null;
    onClearFile: () => void;
}

export default function CrmStatsHeader({ view, setView, uploadedFile, onClearFile }: CrmStatsHeaderProps) {
    return (
        <div className="bg-white border-b border-slate-200 px-8 py-4 flex items-center justify-between shadow-sm z-10">
            <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center text-white shadow-lg shadow-indigo-100">
                    <Sparkles className="w-6 h-6" />
                </div>
                <div>
                    <h1 className="text-lg font-black text-slate-900 tracking-tight">Assistant CRM Intelligent</h1>
                    <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Workspace WhatsApp Business</p>
                </div>
            </div>

            <div className="flex items-center gap-4">
                <div className="flex bg-slate-100 p-1 rounded-2xl">
                    <button 
                        onClick={() => setView('assistant')}
                        className={`px-4 py-2 rounded-xl text-xs font-black transition-all ${view === 'assistant' ? 'bg-white shadow-sm text-indigo-600' : 'text-slate-400'}`}
                    >
                        Assistant IA
                    </button>
                    <button 
                        onClick={() => setView('inbox')}
                        className={`px-4 py-2 rounded-xl text-xs font-black transition-all ${view === 'inbox' ? 'bg-white shadow-sm text-indigo-600' : 'text-slate-400'}`}
                    >
                        Boîte de réception
                    </button>
                </div>

                <AnimatePresence>
                    {uploadedFile && (
                        <motion.div 
                            initial={{ opacity: 0, x: 20 }}
                            animate={{ opacity: 1, x: 0 }}
                            exit={{ opacity: 0, x: 20 }}
                            className="flex items-center gap-3 bg-emerald-50 border border-emerald-100 px-4 py-2 rounded-xl"
                        >
                            <CheckCircle2 className="w-4 h-4 text-emerald-500" />
                            <span className="text-xs font-bold text-emerald-700">Liste active : {uploadedFile.listName}</span>
                            <button onClick={onClearFile} className="p-1 hover:bg-emerald-100 rounded-full transition">
                                <X className="w-3 h-3 text-emerald-400" />
                            </button>
                        </motion.div>
                    )}
                </AnimatePresence>
            </div>
        </div>
    );
}