/**
 * =========================================================================
 * PLATEFORME ECO-PANNEAU.FR - VERSION 1.0.0
 * Interface Administrateur (Super Admin)
 * Gestion globale, Logistique, Tarification et Maintenance Système
 * =========================================================================
 */

const { useState, useEffect } = React;
const { 
    Home, Users, Building, Settings, Activity, ShieldAlert, KeyRound, 
    Database, RefreshCw, Save, LogOut, Package, Eye, MessageSquare, 
    AlertTriangle, CheckCircle, Trash2, Download, Terminal, Loader, 
    Zap, HardDrive, Shield, AlertOctagon, Archive, Power, Edit, FileText, MapPin
} = window;

window.AdminView = ({ data, refreshData, showToast }) => {
    const [activeTab, setActiveTab] = useState('dashboard');
    const [isSaving, setIsSaving] = useState(false);
    
    // Initialisation des données de paramètres
    const [settingsData, setSettingsData] = useState({ 
        ...data.settings, 
        ...data.prices,
        simp_opt_description: data.settings?.simp_opt_description ?? '1',
        simp_opt_image: data.settings?.simp_opt_image ?? '1',
        simp_opt_theme: data.settings?.simp_opt_theme ?? '1',
        simp_opt_link: data.settings?.simp_opt_link ?? '1',
        simp_opt_emergency: data.settings?.simp_opt_emergency ?? '1',
        simp_opt_schedule: data.settings?.simp_opt_schedule ?? '1'
    });
    const [hasTva, setHasTva] = useState(true);
    const [showTvaWarning, setShowTvaWarning] = useState(false);

    const [diagnostics, setDiagnostics] = useState(null);
    const [logs, setLogs] = useState('');
    const [backups, setBackups] = useState([]);
    const [isLoadingBackups, setIsLoadingBackups] = useState(false);
    const [showAllBackups, setShowAllBackups] = useState(false);
    
    const [sysSummary, setSysSummary] = useState({ 
        loaded: false, diagStatus: 'emerald', backupStatus: 'emerald', logStatus: 'emerald', 
        php: '', ram: '', db: '', disk: '', backupsCount: 0, logDesc: '', backupDesc: '' 
    });
    
    const [modalView, setModalView] = useState(null);
    const [pwdRequest, setPwdRequest] = useState(null); 

    const [managingChantier, setManagingChantier] = useState(null);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [editingEntity, setEditingEntity] = useState(null);
    const [draggedItem, setDraggedItem] = useState(null);
    
    // Nouveaux états pour le flux Logistique
    const [shippingModal, setShippingModal] = useState(null);
    const [trackingData, setTrackingData] = useState({ number: '', link: '' });

    useEffect(() => { 
        setSettingsData({ 
            ...data.settings, 
            ...data.prices,
            simp_opt_description: data.settings?.simp_opt_description ?? '1',
            simp_opt_image: data.settings?.simp_opt_image ?? '1',
            simp_opt_theme: data.settings?.simp_opt_theme ?? '1',
            simp_opt_link: data.settings?.simp_opt_link ?? '1',
            simp_opt_emergency: data.settings?.simp_opt_emergency ?? '1',
            simp_opt_schedule: data.settings?.simp_opt_schedule ?? '1'
        }); 
        setHasTva(data.settings?.billing_has_tva !== '0');
    }, [data]);

    const fetchTelemetry = async () => {
        try {
            const cacheBuster = '&_t=' + Date.now();
            const [diagRes, backRes, logRes] = await Promise.all([
                fetch(window.ECO_CONFIG.apiBaseUrl + 'system/diagnostics' + cacheBuster, { cache: 'no-store' }).then(r => r.json()),
                fetch(window.ECO_CONFIG.apiBaseUrl + 'system/backups' + cacheBuster, { cache: 'no-store' }).then(r => r.json()),
                fetch(window.ECO_CONFIG.apiBaseUrl + 'system/logs' + cacheBuster, { cache: 'no-store' }).then(r => r.json())
            ]);
            
            if (diagRes.status === 'success') {
                const dbDetail = diagRes.data.find(d => d.id === 'db')?.detail || '0 ms';
                const diskDetail = diagRes.data.find(d => d.id === 'disk')?.detail || '0 GB';
                const dbVal = parseFloat(dbDetail);
                const diskVal = parseFloat(diskDetail);
                
                let diagStatus = 'emerald';
                if (dbVal > 500 || diskVal < 1) diagStatus = 'red';
                else if (dbVal > 200 || diskVal < 5) diagStatus = 'amber';
                
                const backupsData = backRes.data || [];
                const backupsCount = backupsData.length;
                let backupStatus = 'emerald';
                let backupDesc = `${backupsCount} archive(s)`;

                if (backupsCount === 0) {
                    backupStatus = 'red';
                    backupDesc = "Alerte : Aucune sauvegarde";
                } else {
                    const latestBackup = backupsData.reduce((max, b) => b.date > max.date ? b : max, backupsData[0]);
                    const hoursSinceLast = (Date.now() - latestBackup.date) / (1000 * 60 * 60);

                    if (hoursSinceLast > 48) { backupStatus = 'red'; backupDesc = `Critique : Retard de ${Math.floor(hoursSinceLast/24)} jours`; } 
                    else if (hoursSinceLast > 24) { backupStatus = 'amber'; backupDesc = `Attention : Retard de ${Math.floor(hoursSinceLast)}h`; } 
                    else { backupStatus = 'emerald'; backupDesc = `À jour (${backupsCount} archives)`; }
                }
                
                const logsContent = logRes.data?.logs || '';
                let logStatus = 'emerald';
                let logDesc = 'Journal vierge (Sain)';
                const lowerLogs = logsContent.toLowerCase();
                
                if (lowerLogs.includes('fatal error') || lowerLogs.includes('exception')) { logStatus = 'red'; logDesc = 'Erreurs critiques détectées !'; } 
                else if (logsContent.length > 5) { logStatus = 'amber'; logDesc = 'Avertissements enregistrés'; }
                
                setSysSummary({
                    loaded: true, diagStatus, backupStatus, logStatus,
                    php: diagRes.data.find(d => d.id === 'php')?.detail || 'OK',
                    ram: diagRes.data.find(d => d.id === 'ram')?.detail || 'OK',
                    db: dbDetail, disk: diskDetail, backupsCount, logDesc, backupDesc
                });
            }
        } catch(e) {}
    };

    useEffect(() => { fetchTelemetry(); }, []);

    const clients = data.clients || [];
    const chantiers = data.chantiers || [];
    const activeChantiers = chantiers.filter(c => c.status === 'Actif' && c.id !== 'demo-chantier');
    const mrr = activeChantiers.filter(c => c.offerType === 'rental').reduce((sum, c) => sum + (c.currentRate || 0), 0);
    const interactions = data.interactions || [];
    const totalUnread = interactions.filter(m => m.target === 'Admin' && !m.resolved).length;

    const navItems = [
        { id: 'dashboard', icon: <Home size={18}/>, label: 'Vue globale' },
        { id: 'clients', icon: <Users size={18}/>, label: 'Base clients' },
        { id: 'chantiers', icon: <Building size={18}/>, label: 'Tous les panneaux', badge: activeChantiers.length },
        { id: 'logistique', icon: <Package size={18}/>, label: 'Logistique', badge: chantiers.filter(c => c.physicalPanels > 0 && c.shipping_status !== 'Livré').length },
        { id: 'invoices', icon: <FileText size={18}/>, label: 'Facturation globale' },
        { id: 'messages', icon: <MessageSquare size={18}/>, label: 'Messagerie et support', badge: totalUnread },
        { id: 'settings', icon: <Settings size={18}/>, label: 'Système et tarifs' },
    ];

    const requestAccess = async (uid) => {
        if (!confirm("Voulez-vous vraiment envoyer un e-mail au client pour lui demander l'accès à son compte ?")) return;
        setIsSaving(true);
        try {
            const res = await fetch(window.ECO_CONFIG.apiBaseUrl + 'clients/request_access', { method: 'POST', body: JSON.stringify({ uid }) });
            if ((await res.json()).status === 'success') showToast("E-mail de demande d'accès envoyé au client.", "success");
            else showToast("Erreur lors de la demande", "error");
        } finally { setIsSaving(false); }
    };

    const impersonateClient = async (uid) => {
        setIsSaving(true);
        try {
            const res = await fetch(window.ECO_CONFIG.apiBaseUrl + 'auth/impersonate', { method: 'POST', body: JSON.stringify({ uid }) });
            if ((await res.json()).status === 'success') window.location.href = '?'; 
            else showToast("Erreur d'accès", "error");
        } finally { setIsSaving(false); }
    };

    const deleteClient = (uid, clientName) => {
        setPwdRequest({
            title: `Suppression du compte : ${clientName}`,
            desc: (<span>ATTENTION : Saisissez le mot de passe administrateur pour détruire définitivement le compte de <strong className="text-red-600 font-black text-base">{clientName}</strong> et toutes ses données associées. Cette action est irréversible.</span>),
            onConfirm: async (pwd) => {
                setIsSaving(true);
                try {
                    const res = await fetch(window.ECO_CONFIG.apiBaseUrl + 'clients/admin_delete', { method: 'POST', body: JSON.stringify({ uid, pwd }) });
                    if ((await res.json()).status === 'success') { showToast("Client supprimé avec succès."); refreshData(); } 
                    else showToast("Erreur de suppression (Mot de passe incorrect ?)", 'error');
                } finally { setIsSaving(false); }
            }
        });
    };

    const toggleChantierStatus = async (id, currentStatus) => {
        const newStatus = currentStatus === 'Actif' ? 'Hors ligne' : 'Actif';
        if (!confirm(`Passer ce panneau en statut : ${newStatus} ?`)) return;
        setIsSaving(true);
        try {
            await fetch(window.ECO_CONFIG.apiBaseUrl + 'chantiers/status', { method: 'POST', body: JSON.stringify({ id, status: newStatus }) });
            refreshData();
        } finally { setIsSaving(false); }
    };

    // Fonction de mise à jour logistique acceptant le lien de tracking
    const updateShipping = async (id, status, tracking_number, tracking_link = '') => {
        setIsSaving(true);
        try {
            await fetch(window.ECO_CONFIG.apiBaseUrl + 'chantiers/shipping', { 
                method: 'POST', 
                body: JSON.stringify({ id, shipping_status: status, tracking_number, tracking_link }) 
            });
            showToast(`Statut logistique mis à jour : ${status}`);
            setShippingModal(null);
            refreshData();
        } finally { setIsSaving(false); }
    };

    const handleAutoFill = async () => {
        const num = prompt("Saisissez le SIRET (14 chiffres) ou SIREN (9 chiffres) de l'entreprise qui gère la plateforme (Vous) :");
        if (!num) return;
        
        const cleanNum = num.replace(/\D/g, '');
        if (cleanNum.length !== 9 && cleanNum.length !== 14) {
            return showToast("Le numéro doit contenir exactement 9 ou 14 chiffres.", "error");
        }
        
        setIsSaving(true);
        try {
            const res = await fetch(window.ECO_CONFIG.apiBaseUrl + 'system/sirene', {
                method: 'POST',
                body: JSON.stringify({ q: cleanNum })
            });
            const responseData = await res.json();
            
            if (responseData.status !== 'success') throw new Error(responseData.message);

            const apiData = responseData.data;
            if (apiData.results && apiData.results.length > 0) {
                const company = apiData.results[0];
                const expectedSiren = cleanNum.substring(0, 9);
                
                if (company.siren !== expectedSiren) {
                    setIsSaving(false);
                    return showToast("Numéro invalide : Aucune entreprise correspondante.", "error");
                }

                const siege = company.siege || {};
                let foundSiret = siege.siret || company.siren + "00010";
                
                if (cleanNum.length === 14) {
                    if (siege.siret === cleanNum) foundSiret = cleanNum;
                    else if (company.matching_etablissements) {
                        const exactEtab = company.matching_etablissements.find(e => e.siret === cleanNum);
                        if (exactEtab) foundSiret = cleanNum;
                    }
                }

                const addressParts = [siege.numero_voie, siege.indice_repetition, siege.type_voie, siege.libelle_voie, siege.code_postal, siege.libelle_commune];
                const address = addressParts.filter(Boolean).join(' ').replace(/\s+/g, ' ').trim() || "Adresse non renseignée";
                const tvaKey = (12 + 3 * (parseInt(company.siren, 10) % 97)) % 97;
                const calculatedTva = `FR${tvaKey.toString().padStart(2, '0')}${company.siren}`;

                setSettingsData({ 
                    ...settingsData, 
                    billing_company: company.nom_complet, 
                    billing_address: address, 
                    billing_siret: foundSiret, 
                    billing_tva: calculatedTva 
                });
                
                setHasTva(true);
                showToast("Informations récupérées avec succès !", "success");
            } else {
                showToast("Aucune entreprise trouvée.", "error");
            }
        } catch (err) { 
            console.error("Détail de l'erreur SIRENE :", err);
            showToast("Le service gouvernemental est momentanément indisponible.", "error"); 
        }
        setIsSaving(false);
    };

    const handleToggleTva = () => {
        if (hasTva) { setShowTvaWarning(true); } else { setHasTva(true); }
    };

    const confirmTvaExemption = () => {
        setHasTva(false);
        setSettingsData({ ...settingsData, billing_tva: '' });
        setShowTvaWarning(false);
    };

    const handleSaveSettings = () => {
        setPwdRequest({
            title: "Modification globale",
            desc: "Saisissez le mot de passe administrateur pour confirmer la modification des tarifs et des paramètres de sécurité.",
            onConfirm: async (pwd) => {
                setIsSaving(true);
                try {
                    const payload = { 
                        ...settingsData, pwd, 
                        billing_has_tva: hasTva ? '1' : '0', 
                        price_rentalMo: settingsData.rentalMo, price_purchase: settingsData.purchase, 
                        price_boardFirst: settingsData.boardFirst, price_boardAdd: settingsData.boardAdd, 
                        price_noAds: settingsData.noAds 
                    };
                    const res = await fetch(window.ECO_CONFIG.apiBaseUrl + 'settings/update', { method: 'POST', body: JSON.stringify(payload) });
                    if ((await res.json()).status === 'success') { showToast("Paramètres globaux mis à jour."); refreshData(); } 
                    else showToast("Mot de passe invalide", 'error');
                } finally { setIsSaving(false); }
            }
        });
    };

    // --- ACTIONS DE PANNEAU DÉMO ---
    const handleSaveChantier = async () => {
        setIsSaving(true);
        try {
            const payload = { id: 'demo-chantier', status: 'Actif', offerType: 'demo', currentRate: 0, physicalPanels: 0, details: managingChantier };
            const res = await fetch(window.ECO_CONFIG.apiBaseUrl + 'chantiers', { method: 'POST', body: JSON.stringify(payload) });
            const d = await res.json();
            if(d.status === 'success') { showToast("Panneau de démonstration mis à jour !"); setIsModalOpen(false); refreshData(); }
            else showToast(d.message, 'error');
        } catch(e) { showToast("Erreur de sauvegarde", "error"); }
        setIsSaving(false);
    };

    const saveEditedEntity = () => {
        let newInter = [...(managingChantier.intervenants || [])];
        let newLots = JSON.parse(JSON.stringify(managingChantier.lots || []));
        const loc = editingEntity.location;

        if (loc.type === 'intervenant') {
            if (loc.index !== undefined) newInter[loc.index] = editingEntity.data;
            else newInter.push({...editingEntity.data, id: crypto.randomUUID()});
        } else if (loc.type === 'lot') {
            if (loc.index !== undefined) newLots[loc.index] = {...newLots[loc.index], ...editingEntity.data};
            else newLots.push({...editingEntity.data, id: crypto.randomUUID(), entreprises: []});
        } else if (loc.type === 'entreprise') {
            if (loc.index !== undefined) newLots[loc.lotIndex].entreprises[loc.index] = editingEntity.data;
            else newLots[loc.lotIndex].entreprises.push({...editingEntity.data, id: crypto.randomUUID()});
        }
        setManagingChantier({ ...managingChantier, intervenants: newInter, lots: newLots });
        setEditingEntity(null);
    };

    const deleteEntity = (loc) => {
        if (!confirm("Supprimer cet élément ?")) return;
        let newInter = [...(managingChantier.intervenants || [])];
        let newLots = JSON.parse(JSON.stringify(managingChantier.lots || []));
        if (loc.type === 'intervenant') newInter.splice(loc.index, 1);
        else if (loc.type === 'lot') newLots.splice(loc.index, 1);
        else newLots[loc.lotIndex].entreprises.splice(loc.index, 1);
        setManagingChantier({ ...managingChantier, intervenants: newInter, lots: newLots });
    };

    const handleDragStart = (e, location) => { setDraggedItem(location); e.dataTransfer.effectAllowed = 'move'; };
    const handleDragOver = (e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; };
    const handleDrop = (e, dropLocation) => {
        e.preventDefault();
        if (!draggedItem || draggedItem.type !== dropLocation.type) return;
        if (draggedItem.type === 'entreprise' && draggedItem.lotIndex !== dropLocation.lotIndex) return;
        let newInter = [...(managingChantier.intervenants || [])]; let newLots = JSON.parse(JSON.stringify(managingChantier.lots || []));
        if (draggedItem.type === 'intervenant') { const item = newInter.splice(draggedItem.index, 1)[0]; newInter.splice(dropLocation.index, 0, item); } 
        else if (draggedItem.type === 'lot') { const item = newLots.splice(draggedItem.index, 1)[0]; newLots.splice(dropLocation.index, 0, item); } 
        else if (draggedItem.type === 'entreprise') { const arr = newLots[dropLocation.lotIndex].entreprises; const item = arr.splice(draggedItem.index, 1)[0]; arr.splice(dropLocation.index, 0, item); }
        setManagingChantier({ ...managingChantier, intervenants: newInter, lots: newLots });
        setDraggedItem(null);
    };

    // --- ACTIONS DE MODALES SYSTÈME ---
    const fetchDiagnostics = async () => { setModalView('diagnostics'); setDiagnostics(null); const res = await fetch(window.ECO_CONFIG.apiBaseUrl + 'system/diagnostics&_t=' + Date.now(), { cache: 'no-store' }); const d = await res.json(); if(d.status === 'success') setDiagnostics(d.data); };
    const fetchLogs = async () => { setModalView('logs'); setLogs('Chargement...'); const res = await fetch(window.ECO_CONFIG.apiBaseUrl + 'system/logs&_t=' + Date.now(), { cache: 'no-store' }); const d = await res.json(); setLogs(d.data?.logs || 'Aucun log trouvé.'); };
    const clearLogs = async () => { await fetch(window.ECO_CONFIG.apiBaseUrl + 'system/logs/clear', { method: 'POST' }); fetchLogs(); fetchTelemetry(); };
    const loadBackups = async () => { setModalView('backups'); setShowAllBackups(false); setIsLoadingBackups(true); try { const res = await fetch(window.ECO_CONFIG.apiBaseUrl + 'system/backups&_t=' + Date.now(), { cache: 'no-store' }); const d = await res.json(); if(d.status === 'success') setBackups(d.data); } catch(e) { showToast("Erreur lors du chargement des sauvegardes", "error"); } finally { setIsLoadingBackups(false); } };
    const createBackup = async () => { setIsSaving(true); try { const res = await fetch(window.ECO_CONFIG.apiBaseUrl + 'system/backups/create', { method: 'POST' }); if ((await res.json()).status === 'success') { showToast("Sauvegarde créée."); loadBackups(); fetchTelemetry(); } else showToast("Erreur de sauvegarde", "error"); } finally { setIsSaving(false); } };
    const restoreBackup = (filename) => { setPwdRequest({ title: "Restauration système", desc: "ATTENTION CRITIQUE : La restauration écrasera la base de données actuelle. Saisissez le mot de passe administrateur :", onConfirm: async (pwd) => { setIsSaving(true); try { const res = await fetch(window.ECO_CONFIG.apiBaseUrl + 'system/backups/restore', { method: 'POST', body: JSON.stringify({ filename, pwd }) }); if ((await res.json()).status === 'success') { alert("Restauration réussie. L'application va recharger."); window.location.reload(); } else showToast("Mot de passe incorrect ou erreur.", "error"); } finally { setIsSaving(false); } } }); };
    const deleteBackup = (filename) => { setPwdRequest({ title: "Suppression d'archive", desc: "Saisissez le mot de passe administrateur pour supprimer définitivement cette sauvegarde :", onConfirm: async (pwd) => { const res = await fetch(window.ECO_CONFIG.apiBaseUrl + 'system/backups/delete', { method: 'POST', body: JSON.stringify({ filename, pwd }) }); if ((await res.json()).status === 'success') { loadBackups(); fetchTelemetry(); } else { showToast("Mot de passe incorrect", "error"); } } }); };
    
    const getColorClass = (status) => { 
        if (!sysSummary.loaded) return 'text-slate-500 border-slate-200 bg-slate-50'; 
        if (status === 'red') return 'text-red-700 border-red-200 bg-red-50 hover:border-red-400'; 
        if (status === 'amber') return 'text-amber-700 border-amber-200 bg-amber-50 hover:border-amber-400'; 
        return 'text-emerald-700 border-emerald-200 bg-emerald-50 hover:border-emerald-400'; 
    };

    // --- VUES DES ONGLETS (CARTES FLUIDES) ---
    
    const renderDashboard = () => {
        const recentMessages = interactions.filter(m => m.target === 'Admin').slice(0, 5);
        return (
            <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4">
                <div><h1 className="text-3xl font-black text-slate-800">Supervision</h1><p className="text-slate-500 font-medium">Vue d'ensemble de la plateforme SaaS.</p></div>
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                    <window.StatCard title="MRR (revenus loc.)" value={`${mrr} €`} icon={<Activity size={24}/>} color="text-emerald-600" bg="bg-emerald-100" />
                    <window.StatCard title="Clients inscrits" value={clients.length} icon={<Users size={24}/>} color="text-blue-600" bg="bg-blue-100" onClick={() => setActiveTab('clients')} />
                    <window.StatCard title="Panneaux actifs" value={activeChantiers.length} icon={<Building size={24}/>} color="text-indigo-600" bg="bg-indigo-100" onClick={() => setActiveTab('chantiers')} />
                    <window.StatCard title="Total scans QR" value={data.stats?.totalViews || 0} icon={<Eye size={24}/>} color="text-amber-600" bg="bg-amber-100" />
                </div>
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div className="bg-white rounded-3xl p-6 shadow-sm border border-slate-100">
                        <div className="flex justify-between items-center mb-6"><h3 className="font-black text-slate-800 flex items-center gap-2"><MessageSquare size={18} className="text-emerald-600"/> Derniers messages</h3><button onClick={() => setActiveTab('messages')} className="text-xs font-bold text-emerald-600 hover:underline">Voir tout</button></div>
                        <div className="space-y-4">
                            {recentMessages.map((m, i) => (
                                <div key={i} className="flex flex-col p-4 rounded-xl border border-slate-100 bg-slate-50 cursor-pointer hover:border-emerald-200 transition" onClick={() => setActiveTab('messages')}>
                                    <div className="flex justify-between items-start mb-2"><div className="flex items-center gap-2"><span className={`w-2 h-2 rounded-full ${m.isAlert ? 'bg-red-500' : (m.resolved ? 'bg-slate-300' : 'bg-emerald-500')}`}></span><p className="font-bold text-xs text-slate-700">{m.author}</p></div><span className="text-[10px] font-bold text-slate-400">{new Date(m.created_at).toLocaleDateString('fr-FR')}</span></div>
                                    <p className="text-sm text-slate-600 line-clamp-2">{m.detail}</p><p className="text-[10px] text-slate-400 mt-2 pt-2 border-t border-slate-200 font-bold">{m.chantierId === 'CONTACT_PUBLIC' ? 'ORIGINE : Formulaire d\'accueil' : 'ORIGINE : Espace client (Support)'}</p>
                                </div>
                            ))}
                            {recentMessages.length === 0 && <p className="text-sm text-slate-400 italic text-center py-4">Aucune interaction récente.</p>}
                        </div>
                    </div>
                    <div className="bg-white rounded-3xl p-6 shadow-sm border border-slate-100 flex flex-col">
                        <h3 className="font-black text-slate-800 mb-6 flex items-center gap-2"><Terminal size={18} className="text-emerald-600"/> Serveur et maintenance</h3>
                        <div className="space-y-3 flex-1 flex flex-col justify-start">
                            <button onClick={loadBackups} title="Gérer les sauvegardes du site" className={`w-full flex items-center justify-between p-4 rounded-xl border transition group text-left ${getColorClass(sysSummary.backupStatus)}`}>
                                <div className="flex items-center gap-4"><Archive size={24} className="group-hover:scale-110 transition-transform"/><div><p className="font-bold text-sm">Sauvegardes (7z)</p><p className={`text-xs mt-1 ${sysSummary.loaded ? 'opacity-80' : 'opacity-50 animate-pulse'}`}>{sysSummary.loaded ? sysSummary.backupDesc : 'Vérification...'}</p></div></div>
                            </button>
                            <button onClick={fetchDiagnostics} title="Voir l'état des services" className={`w-full flex items-center justify-between p-4 rounded-xl border transition group text-left ${getColorClass(sysSummary.diagStatus)}`}>
                                <div className="flex items-center gap-4"><Activity size={24} className="group-hover:scale-110 transition-transform"/><div><p className="font-bold text-sm">Diagnostics système</p><p className={`text-xs mt-1 ${sysSummary.loaded ? 'opacity-80' : 'opacity-50 animate-pulse'}`}>{sysSummary.loaded ? `RAM: ${sysSummary.ram} • DB: ${sysSummary.db}` : 'Analyse en cours...'}</p></div></div>
                            </button>
                            <button onClick={fetchLogs} title="Consulter les erreurs backend" className={`w-full flex items-center justify-between p-4 rounded-xl border transition group text-left ${getColorClass(sysSummary.logStatus)}`}>
                                <div className="flex items-center gap-4"><Terminal size={24} className="group-hover:scale-110 transition-transform"/><div><p className="font-bold text-sm">Logs d'erreurs (PHP)</p><p className={`text-xs mt-1 ${sysSummary.loaded ? 'opacity-80' : 'opacity-50 animate-pulse'}`}>{sysSummary.loaded ? sysSummary.logDesc : 'Chargement...'}</p></div></div>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        );
    };

    const renderClients = () => (
        <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4">
            <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                <div><h1 className="text-3xl font-black text-slate-800">Base clients</h1><p className="text-slate-500 font-medium">Gestion des comptes et prise de contrôle.</p></div>
                <button onClick={refreshData} title="Rafraîchir" className="shrink-0 bg-white border border-slate-200 text-slate-700 px-4 py-2.5 rounded-xl font-bold text-sm hover:bg-slate-50 transition shadow-sm flex items-center gap-2"><RefreshCw size={16}/> Actualiser</button>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {clients.map(c => {
                    const isImpersonable = c.admin_access_until && new Date(c.admin_access_until) > new Date();
                    const isSuspended = c.paymentStatus === 'suspended';
                    return (
                        <div key={c.id} className="bg-white rounded-3xl p-5 shadow-sm border border-slate-200 flex flex-col gap-4 transition hover:shadow-md hover:border-blue-200 group">
                            <div className="flex justify-between items-start">
                                <div className="flex gap-3 min-w-0">
                                    <div className="w-12 h-12 rounded-2xl bg-blue-50 text-blue-600 flex items-center justify-center shrink-0">
                                        <Users size={24} />
                                    </div>
                                    <div className="min-w-0">
                                        <p className="font-black text-base text-slate-800 truncate" title={c.name}>{c.name}</p>
                                        <p className="text-xs text-slate-500 truncate" title={c.email}>{c.email}</p>
                                        <p className="text-[10px] text-slate-400 font-mono mt-1">ID : {c.id.substring(0,8)}</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div className="flex items-center gap-2">
                                <span className={`px-2 py-1 inline-flex items-center justify-center text-[10px] font-black uppercase tracking-wider rounded-lg ${isSuspended ? 'bg-red-100 text-red-700' : 'bg-emerald-100 text-emerald-700'}`}>
                                    {isSuspended ? 'Suspendu' : 'Actif'}
                                </span>
                                {c.discount > 0 && <span className="px-2 py-1 bg-purple-100 text-purple-700 text-[10px] font-black tracking-wider uppercase rounded-lg">Remise {c.discount}%</span>}
                            </div>
                            
                            <div className="flex gap-2 pt-4 border-t border-slate-100 mt-auto">
                                {isImpersonable ? (
                                    <button onClick={() => impersonateClient(c.id)} title="Prendre le contrôle du compte client" className="flex-1 py-2 bg-emerald-600 text-white rounded-xl text-xs font-bold hover:bg-emerald-700 transition flex justify-center items-center gap-2 shadow-sm"><KeyRound size={14}/> Contrôler</button>
                                ) : (
                                    <button onClick={() => requestAccess(c.id)} title="Envoyer une demande d'accès au client" className="flex-1 py-2 bg-slate-100 text-slate-600 rounded-xl text-xs font-bold hover:bg-slate-200 transition flex justify-center items-center gap-2"><Shield size={14}/> Accès</button>
                                )}
                                <button onClick={() => deleteClient(c.id, c.name || c.email)} title="Supprimer définitivement ce compte" className="px-4 py-2 bg-red-50 text-red-600 rounded-xl hover:bg-red-100 transition flex justify-center items-center"><Trash2 size={16}/></button>
                            </div>
                        </div>
                    );
                })}
                {clients.length === 0 && (
                    <div className="col-span-full text-center p-12 bg-white rounded-3xl border border-slate-200 border-dashed">
                        <Users size={48} className="mx-auto text-slate-300 mb-4" />
                        <p className="text-slate-500 italic">Aucun client enregistré.</p>
                    </div>
                )}
            </div>
        </div>
    );

    const renderChantiers = () => {
        const demoChantier = chantiers.find(c => c.id === 'demo-chantier') || { id: 'demo-chantier', status: 'Actif', offerType: 'demo', name: 'Panneau de démonstration', location: 'Paris', themeColor: '#059669', hasNoAds: false };
        const regularChantiers = chantiers.filter(c => c.id !== 'demo-chantier');
        return (
            <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4">
                <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                    <div><h1 className="text-3xl font-black text-slate-800">Tous les panneaux</h1><p className="text-slate-500 font-medium">Supervision des affichages légaux.</p></div>
                    <button onClick={refreshData} title="Rafraîchir" className="shrink-0 bg-white border border-slate-200 text-slate-700 px-4 py-2.5 rounded-xl font-bold text-sm hover:bg-slate-50 transition shadow-sm flex items-center gap-2"><RefreshCw size={16}/> Actualiser</button>
                </div>
                
                <div className="bg-purple-50 border border-purple-200 rounded-3xl p-5 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 shadow-sm">
                    <div className="flex gap-4 items-center">
                        <div className="w-12 h-12 bg-purple-200 text-purple-700 rounded-2xl flex items-center justify-center shrink-0"><Eye size={24}/></div>
                        <div>
                            <h3 className="font-black text-purple-900 text-lg leading-tight">Panneau de démonstration</h3>
                            <p className="text-xs text-purple-700 font-medium mt-1">Gérez le contenu du faux panneau affiché sur la page d'accueil publique.</p>
                        </div>
                    </div>
                    <button onClick={() => { setManagingChantier({...demoChantier}); setModalView('config_demo'); setIsModalOpen(true); }} title="Éditer le panneau de démonstration" className="w-full sm:w-auto bg-purple-600 text-white px-6 py-3 rounded-xl text-sm font-bold shadow-lg hover:bg-purple-700 transition flex items-center justify-center gap-2"><Edit size={16}/> Éditer le panneau</button>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {regularChantiers.map(c => {
                        const client = clients.find(cl => cl.id === c.clientName);
                        return (
                            <div key={c.id} className="bg-white rounded-3xl p-5 shadow-sm border border-slate-200 flex flex-col gap-4 transition hover:shadow-md hover:border-emerald-200 group">
                                <div className="flex justify-between items-start gap-2">
                                    <div className="flex gap-3 min-w-0">
                                        <div className={`w-12 h-12 rounded-2xl flex items-center justify-center shrink-0 ${c.status === 'Actif' ? 'bg-emerald-50 text-emerald-600' : 'bg-slate-100 text-slate-400'}`}>
                                            <Building size={24} />
                                        </div>
                                        <div className="min-w-0">
                                            <p className="font-black text-base text-slate-800 truncate" title={c.name}>{c.name}</p>
                                            <p className="text-xs text-slate-500 truncate" title={c.location}>{c.location}</p>
                                            <div className="mt-1.5 flex flex-wrap gap-1">
                                                <span className="text-[9px] font-bold text-emerald-700 bg-emerald-50 border border-emerald-100 px-2 py-0.5 rounded-md truncate max-w-full" title={`Client : ${client ? client.name : c.clientName}`}>Client : {client ? client.name : c.clientName}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div className="grid grid-cols-2 gap-2 mt-auto">
                                    <div className="bg-slate-50 p-2 rounded-xl border border-slate-100 text-center">
                                        <p className="text-[9px] font-bold text-slate-400 uppercase tracking-widest">Abonnement</p>
                                        <p className="text-sm font-black text-slate-800 mt-0.5">{c.offerType === 'rental' ? 'Loc.' : 'Achat'} <span className="text-xs text-slate-500 font-medium">({c.currentRate}€)</span></p>
                                    </div>
                                    <div className="bg-slate-50 p-2 rounded-xl border border-slate-100 text-center">
                                        <p className="text-[9px] font-bold text-slate-400 uppercase tracking-widest">Statut</p>
                                        <p className={`text-sm font-black mt-0.5 ${c.status === 'Actif' ? 'text-emerald-600' : 'text-slate-600'}`}>{c.status}</p>
                                    </div>
                                </div>

                                <div className="pt-4 border-t border-slate-100">
                                    <button onClick={() => toggleChantierStatus(c.id, c.status)} title={c.status === 'Actif' ? 'Désactiver le panneau (coupe abonnement)' : 'Activer le panneau'} className={`w-full py-2 rounded-xl text-xs font-bold transition flex justify-center items-center gap-2 ${c.status === 'Actif' ? 'bg-red-50 text-red-600 hover:bg-red-100' : 'bg-emerald-50 text-emerald-600 hover:bg-emerald-100'}`}>
                                        <Power size={14}/> {c.status === 'Actif' ? 'Désactiver' : 'Activer'}
                                    </button>
                                </div>
                            </div>
                        );
                    })}
                    {regularChantiers.length === 0 && (
                        <div className="col-span-full text-center p-12 bg-white rounded-3xl border border-slate-200 border-dashed">
                            <Building size={48} className="mx-auto text-slate-300 mb-4" />
                            <p className="text-slate-500 italic">Aucun panneau client enregistré.</p>
                        </div>
                    )}
                </div>
            </div>
        );
    };

    const renderLogistique = () => {
        const logiChantiers = chantiers.filter(c => c.physicalPanels > 0 && c.id !== 'demo-chantier');
        return (
            <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4">
                <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                    <div><h1 className="text-3xl font-black text-slate-800">Logistique</h1><p className="text-slate-500 font-medium">Gestion des expéditions de panneaux physiques A1.</p></div>
                    <button onClick={refreshData} title="Rafraîchir" className="shrink-0 bg-white border border-slate-200 text-slate-700 px-4 py-2.5 rounded-xl font-bold text-sm hover:bg-slate-50 transition shadow-sm flex items-center gap-2"><RefreshCw size={16}/> Actualiser</button>
                </div>
                
                <div className="grid grid-cols-1 gap-4">
                    {logiChantiers.map(c => {
                        const client = clients.find(cl => cl.id === c.clientName);
                        
                        const status = c.shipping_status || 'Validation en cours';
                        const isValidation = status === 'Validation en cours';
                        const isPrinting = status === "Attente d'impression";
                        const isShipped = status === 'Expédié';
                        const isDelivered = status === 'Livré';

                        return (
                            <div key={c.id} className="bg-white rounded-3xl p-5 shadow-sm border border-slate-200 flex flex-col md:flex-row gap-4 md:items-center transition hover:shadow-md">
                                {/* Identité */}
                                <div className="flex-1 min-w-0 flex items-start gap-4">
                                    <div className={`w-12 h-12 rounded-2xl flex items-center justify-center shrink-0 ${isDelivered ? 'bg-emerald-50 text-emerald-600' : (isShipped ? 'bg-blue-50 text-blue-600' : 'bg-slate-100 text-slate-500')}`}>
                                        {isDelivered ? <CheckCircle size={24}/> : <Package size={24} />}
                                    </div>
                                    <div className="min-w-0 flex-1">
                                        <p className="font-black text-base text-slate-800 truncate" title={c.name}>{c.name}</p>
                                        <p className="text-xs font-bold text-emerald-600 mt-0.5 truncate" title={client?.name}>Client : {client?.name || 'Inconnu'}</p>
                                        <p className="text-xs text-slate-500 mt-1 flex items-start gap-1">
                                            <MapPin size={14} className="shrink-0 opacity-70" />
                                            <span className="line-clamp-2 leading-tight" title={client?.address}>{client?.address || 'Adresse non renseignée'}</span>
                                        </p>
                                    </div>
                                </div>

                                {/* Quantité */}
                                <div className="md:w-24 shrink-0 flex flex-col items-start md:items-center border-t md:border-t-0 md:border-l border-slate-100 pt-4 md:pt-0 md:px-4">
                                    <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-2">Quantité</p>
                                    <div className="w-12 h-12 flex items-center justify-center bg-emerald-50 text-emerald-600 rounded-xl font-black text-xl">{c.physicalPanels}</div>
                                </div>

                                {/* Statut et Boutons d'Action Logistique */}
                                <div className="md:w-64 shrink-0 flex flex-col gap-2 border-t md:border-t-0 md:border-l border-slate-100 pt-4 md:pt-0 md:px-4">
                                    <div className="flex justify-between items-center mb-1">
                                        <p className="text-[10px] font-bold uppercase tracking-widest text-slate-500">Statut</p>
                                        <span className={`px-2 py-0.5 rounded-md text-[10px] font-black uppercase ${isDelivered ? 'bg-emerald-100 text-emerald-700' : (isShipped ? 'bg-blue-100 text-blue-700' : 'bg-amber-100 text-amber-700')}`}>
                                            {status}
                                        </span>
                                    </div>
                                    
                                    {isValidation && (
                                        <button onClick={() => updateShipping(c.id, "Attente d'impression", '', '')} disabled={isSaving} className="w-full py-2 bg-amber-50 text-amber-700 font-bold rounded-xl hover:bg-amber-100 transition text-xs flex justify-center items-center gap-1 disabled:opacity-50"><RefreshCw size={14}/> Passer en impression</button>
                                    )}
                                    {isPrinting && (
                                        <button onClick={() => { setShippingModal(c); setTrackingData({number: '', link: ''}); }} disabled={isSaving} className="w-full py-2 bg-blue-50 text-blue-700 font-bold rounded-xl hover:bg-blue-100 transition text-xs flex justify-center items-center gap-1 disabled:opacity-50"><Package size={14}/> Déclarer expédié</button>
                                    )}
                                    {isShipped && (
                                        <div className="text-center bg-slate-50 p-3 rounded-xl border border-slate-100 flex flex-col gap-1">
                                            <p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">En cours d'acheminement</p>
                                            <p className="text-sm font-mono text-blue-600 font-bold select-all">{c.tracking_number}</p>
                                            <button 
                                                onClick={() => { setShippingModal(c); setTrackingData({number: c.tracking_number || '', link: c.tracking_link || ''}); }} 
                                                disabled={isSaving} 
                                                className="mt-2 w-full py-1.5 bg-white border border-slate-200 text-slate-600 font-bold rounded-lg hover:bg-slate-50 transition text-[10px] flex justify-center items-center gap-1 shadow-sm"
                                            >
                                                <Edit size={12}/> Modifier le suivi
                                            </button>
                                        </div>
                                    )}
                                    {isDelivered && (
                                        <div className="text-center bg-emerald-50 p-2 rounded-xl border border-emerald-100 flex items-center justify-center gap-1">
                                            <CheckCircle size={14} className="text-emerald-600"/>
                                            <p className="text-xs font-bold text-emerald-700">Réception confirmée</p>
                                        </div>
                                    )}
                                </div>

                                {/* Fichier A1 */}
                                <div className="md:w-24 shrink-0 flex items-center justify-end md:justify-center border-t md:border-t-0 md:border-l border-slate-100 pt-4 md:pt-0 md:pl-4">
                                    {c.a1PdfId ? (
                                        <a href={`?api=file/download&type=pdf&id=${c.a1PdfId}`} target="_blank" className="flex flex-col items-center justify-center p-3 w-full md:w-auto bg-slate-50 text-slate-600 rounded-xl hover:bg-slate-100 transition group" title="Télécharger le fichier A1 imprimable">
                                            <FileText size={20} className="group-hover:scale-110 transition-transform mb-1 text-blue-600" />
                                            <span className="text-[10px] font-black uppercase tracking-wider">PDF A1</span>
                                        </a>
                                    ) : (
                                        <div className="text-[10px] text-slate-400 font-bold uppercase text-center w-full">Manquant</div>
                                    )}
                                </div>
                            </div>
                        );
                    })}
                    {logiChantiers.length === 0 && (
                        <div className="text-center p-12 bg-white rounded-3xl border border-slate-200 border-dashed">
                            <Package size={48} className="mx-auto text-slate-300 mb-4" />
                            <h3 className="text-lg font-black text-slate-700">Aucune commande</h3>
                            <p className="text-slate-500 text-sm mt-1">Les commandes de panneaux physiques apparaîtront ici.</p>
                        </div>
                    )}
                </div>
            </div>
        );
    };

    const renderInvoices = () => (
        <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4">
            <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                <div><h1 className="text-3xl font-black text-slate-800">Facturation globale</h1><p className="text-slate-500 font-medium">Historique des paiements de tous les clients.</p></div>
                <a href="?api=invoices/export_csv" className="shrink-0 bg-white border border-slate-200 text-slate-700 px-4 py-2.5 rounded-xl font-bold text-sm hover:bg-slate-50 transition shadow-sm flex items-center gap-2"><Download size={16}/> Export CSV</a>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {data.invoices?.map((inv, i) => {
                    const client = clients.find(c => c.id === inv.clientName);
                    return (
                        <div key={i} className="bg-white rounded-3xl p-5 shadow-sm border border-slate-200 flex flex-col gap-4 transition hover:shadow-md group">
                            <div className="flex justify-between items-start">
                                <div className="flex gap-3 min-w-0">
                                    <div className="w-12 h-12 rounded-2xl bg-slate-100 text-slate-500 flex items-center justify-center shrink-0">
                                        <FileText size={24} />
                                    </div>
                                    <div className="min-w-0">
                                        <p className="font-black text-base text-slate-800 truncate" title={inv.chantierName}>{inv.chantierName}</p>
                                        <p className="text-xs text-slate-500 truncate" title={client ? client.name : 'Inconnu'}>Client : {client ? client.name : 'Inconnu'}</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div className="grid grid-cols-2 gap-2 bg-slate-50 p-3 rounded-xl border border-slate-100">
                                <div>
                                    <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Date</p>
                                    <p className="text-xs font-bold text-slate-700 mt-0.5">{new Date(inv.created_at).toLocaleDateString('fr-FR')}</p>
                                </div>
                                <div className="text-right">
                                    <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Montant</p>
                                    <p className="text-sm font-black text-slate-800 mt-0.5">{inv.amount} €</p>
                                </div>
                            </div>
                            
                            <div className="flex items-center justify-between pt-2">
                                <span className="text-[10px] text-slate-400 font-mono tracking-wider">{inv.invoiceNumber}</span>
                                <a href={`?api=invoices/download&ref=${inv.invoiceNumber}`} title="Télécharger le PDF" className="flex items-center gap-2 px-3 py-2 bg-blue-50 text-blue-600 rounded-lg text-xs font-bold hover:bg-blue-100 transition">
                                    <Download size={14}/> PDF
                                </a>
                            </div>
                        </div>
                    );
                })}
                {(!data.invoices || data.invoices.length === 0) && (
                    <div className="col-span-full text-center p-12 bg-white rounded-3xl border border-slate-200 border-dashed">
                        <FileText size={48} className="mx-auto text-slate-300 mb-4" />
                        <p className="text-slate-500 italic">Aucune facture émise.</p>
                    </div>
                )}
            </div>
        </div>
    );

    const renderMessages = () => {
        const threadsMap = {};
        interactions.forEach(m => {
            let threadId = null; let title = ''; let targetEmail = '';
            if (m.chantierId === 'CONTACT_PUBLIC') { targetEmail = (m.target === 'Admin') ? m.author : m.target; if (!targetEmail) return; threadId = `CONTACT_PUBLIC_${targetEmail}`; title = `Contact public : ${targetEmail}`; } 
            else if (m.chantierId.startsWith('SUPPORT_')) { threadId = m.chantierId; const cUid = m.chantierId.split('_')[1]; const cName = clients.find(c => c.id === cUid)?.name || 'Client inconnu'; title = `Support : ${cName}`; targetEmail = 'Client'; }
            if (threadId) { if (!threadsMap[threadId]) threadsMap[threadId] = { id: threadId, title, targetEmail, messages: [], unread: 0 }; threadsMap[threadId].messages.push(m); if (m.target === 'Admin' && !m.resolved) threadsMap[threadId].unread++; }
        });
        const threads = Object.values(threadsMap).sort((a,b) => new Date(b.messages[0].created_at) - new Date(a.messages[0].created_at));
        const selectedThreadId = new URLSearchParams(window.location.search).get('chat_id') || (threads[0]?.id);
        const setChatId = (id) => { const u = new URL(window.location); u.searchParams.set('chat_id', id); window.history.replaceState({}, '', u); refreshData(); };
        const selectedThread = threads.find(t => t.id === selectedThreadId);

        const handleSendAdmin = async (text) => {
            if (!selectedThread) return;
            const payload = { chantierId: selectedThread.id.startsWith('CONTACT_PUBLIC_') ? 'CONTACT_PUBLIC' : selectedThread.id, detail: text, author: 'Admin', targetEmail: selectedThread.targetEmail };
            await fetch(window.ECO_CONFIG.apiBaseUrl + 'interactions', { method: 'POST', body: JSON.stringify(payload) }); refreshData();
        };

        return (
            <div className="flex flex-col md:flex-row h-[80vh] bg-white rounded-3xl shadow-sm border border-slate-200 overflow-hidden animate-in fade-in slide-in-from-bottom-4">
                <div className="w-full md:w-1/3 border-r border-slate-200 flex flex-col bg-slate-50/50">
                    <div className="p-4 border-b border-slate-200 bg-white flex justify-between items-center"><h2 className="font-black text-slate-800 text-lg">Messagerie</h2><button onClick={refreshData} className="p-2 bg-slate-100 text-slate-600 rounded-lg hover:bg-slate-200 transition" title="Rafraîchir"><RefreshCw size={14}/></button></div>
                    <div className="flex-1 overflow-y-auto p-2 space-y-1 custom-scrollbar">
                        {threads.map(t => (
                            <button key={t.id} onClick={() => setChatId(t.id)} className={`w-full text-left p-3 rounded-xl flex items-center justify-between transition ${selectedThreadId === t.id ? 'bg-emerald-50 border border-emerald-200' : 'hover:bg-white border border-transparent'}`}>
                                <div className="min-w-0 pr-2"><p className="font-bold text-sm text-slate-800 truncate">{t.title}</p><p className="text-xs text-slate-500 truncate">{t.messages.length} messages</p></div>
                                {t.unread > 0 && <span className="bg-red-500 text-white text-[10px] px-2 py-0.5 rounded-full shrink-0">{t.unread}</span>}
                            </button>
                        ))}
                        {threads.length === 0 && <p className="text-center text-slate-400 text-sm mt-10 italic">Aucune conversation.</p>}
                    </div>
                </div>
                <div className="w-full md:w-2/3 flex flex-col relative bg-slate-50">
                    {selectedThread ? (
                        <><div className="p-4 border-b border-slate-200 bg-white shrink-0"><h3 className="font-black text-slate-800">{selectedThread.title}</h3></div><div className="flex-1 relative"><div className="absolute inset-0"><window.ChatBox messages={selectedThread.messages} currentUserRole="admin" chantierId={selectedThread.id.startsWith('CONTACT_PUBLIC') ? 'CONTACT_PUBLIC' : selectedThread.id} refreshData={refreshData} onSend={handleSendAdmin}/></div></div></>
                    ) : (<div className="flex-1 flex flex-col items-center justify-center text-slate-400"><MessageSquare size={48} className="mb-4 opacity-50"/><p className="font-medium">Sélectionnez une conversation</p></div>)}
                </div>
            </div>
        );
    };

    const renderSettings = () => (
        <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 max-w-4xl mx-auto">
            <div><h1 className="text-3xl font-black text-slate-800">Paramètres système</h1><p className="text-slate-500 font-medium">Tarification globale et mentions légales.</p></div>

            <div className="bg-white rounded-3xl p-6 shadow-sm border border-slate-200">
                <h3 className="font-black text-slate-800 mb-6 flex items-center gap-2"><CreditCard size={18} className="text-emerald-600"/> Tarification (HT)</h3>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
                    <window.PriceInput label="Abonnement mensuel" value={settingsData.rentalMo} onChange={v => setSettingsData({...settingsData, rentalMo: v})} />
                    <window.PriceInput label="Achat définitif" value={settingsData.purchase} onChange={v => setSettingsData({...settingsData, purchase: v})} />
                    <window.PriceInput label="Panneau physique (1er)" value={settingsData.boardFirst} onChange={v => setSettingsData({...settingsData, boardFirst: v})} />
                    <window.PriceInput label="Panneau physique (suivants)" value={settingsData.boardAdd} onChange={v => setSettingsData({...settingsData, boardAdd: v})} />
                    <window.PriceInput label="Option marque blanche" value={settingsData.noAds} onChange={v => setSettingsData({...settingsData, noAds: v})} />
                </div>
                
                <h3 className="font-black text-slate-800 mb-6 flex items-center gap-2 border-t pt-6"><FileText size={18} className="text-emerald-600"/> Mentions légales (CGV et RGPD)</h3>
                <div className="space-y-4 mb-6">
                    <div className="space-y-1"><label className="text-xs font-bold text-slate-500 uppercase block">Conditions générales de vente</label><textarea value={settingsData.cgv || ''} onChange={e=>setSettingsData({...settingsData, cgv: e.target.value})} rows="4" className="w-full border-2 border-slate-200 rounded-xl p-3 text-sm focus:border-emerald-500 outline-none transition custom-scrollbar"></textarea></div>
                    <div className="space-y-1"><label className="text-xs font-bold text-slate-500 uppercase block">Politique de confidentialité (RGPD)</label><textarea value={settingsData.rgpd || ''} onChange={e=>setSettingsData({...settingsData, rgpd: e.target.value})} rows="4" className="w-full border-2 border-slate-200 rounded-xl p-3 text-sm focus:border-emerald-500 outline-none transition custom-scrollbar"></textarea></div>
                </div>

                <div className="bg-slate-50 rounded-2xl p-4 sm:p-6 border border-slate-200">
                    <div className="flex justify-between items-center mb-6">
                        <h3 className="font-black text-slate-800 flex items-center gap-2"><Building size={18} className="text-emerald-600"/> Émetteur (facturation)</h3>
                        <button onClick={handleAutoFill} className="text-xs font-bold text-blue-700 bg-blue-100 hover:bg-blue-200 px-3 py-1.5 rounded-lg flex items-center gap-1 transition shadow-sm"><Zap size={14}/> Saisie automatique</button>
                    </div>
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
                        <div className="space-y-1"><label className="text-xs font-bold text-slate-500 uppercase block">Raison sociale</label><input value={settingsData.billing_company || ''} onChange={e=>setSettingsData({...settingsData, billing_company: e.target.value})} className="w-full border border-slate-200 rounded-lg p-2 text-sm outline-none focus:border-slate-400 bg-white" /></div>
                        <div className="space-y-1"><label className="text-xs font-bold text-slate-500 uppercase block">SIRET</label><input value={settingsData.billing_siret || ''} onChange={e=>setSettingsData({...settingsData, billing_siret: e.target.value})} className="w-full border border-slate-200 rounded-lg p-2 text-sm outline-none focus:border-slate-400 bg-white" /></div>
                        <div className="space-y-1 sm:col-span-2"><label className="text-xs font-bold text-slate-500 uppercase block">Adresse</label><input value={settingsData.billing_address || ''} onChange={e=>setSettingsData({...settingsData, billing_address: e.target.value})} className="w-full border border-slate-200 rounded-lg p-2 text-sm outline-none focus:border-slate-400 bg-white" /></div>
                    </div>

                    <div className="pt-4 border-t border-slate-200">
                        <label className="flex items-center justify-between cursor-pointer group py-2">
                            <div>
                                <p className="text-sm font-bold text-slate-800">Assujetti à la TVA</p>
                                <p className="text-[10px] font-medium text-slate-500">Mon entreprise facture la TVA sur la plateforme.</p>
                            </div>
                            <div className={`w-12 h-6 rounded-full transition-colors relative shrink-0 ${hasTva ? 'bg-emerald-500' : 'bg-slate-300'}`}>
                                <div className={`absolute top-1 bg-white w-4 h-4 rounded-full transition-transform ${hasTva ? 'left-7' : 'left-1'}`}></div>
                            </div>
                            <input type="checkbox" className="hidden" checked={hasTva} onChange={handleToggleTva} />
                        </label>
                        {hasTva && (
                            <div className="space-y-1 mt-3 animate-in fade-in slide-in-from-top-2">
                                <label className="text-xs font-bold text-slate-500 uppercase block">TVA intracommunautaire *</label>
                                <input value={settingsData.billing_tva || ''} onChange={e=>setSettingsData({...settingsData, billing_tva: e.target.value})} placeholder="FR..." className="w-full border border-slate-200 rounded-lg p-2 text-sm outline-none focus:border-slate-400 uppercase bg-white" />
                            </div>
                        )}
                    </div>
                </div>

                <div className="bg-white rounded-3xl mt-6 p-6 shadow-sm border border-slate-200">
                    <h3 className="font-black text-slate-800 mb-2 flex items-center gap-2"><Settings size={18} className="text-emerald-600"/> Options du mode simplifié</h3>
                    <p className="text-xs text-slate-500 mb-6">Sélectionnez les fonctionnalités accessibles aux clients utilisant l'interface "Simplifiée".</p>
                    
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        {[
                            { key: 'simp_opt_description', label: 'Description des travaux' },
                            { key: 'simp_opt_image', label: 'Image du panneau' },
                            { key: 'simp_opt_theme', label: 'Couleur du thème' },
                            { key: 'simp_opt_link', label: 'Lien promoteur' },
                            { key: 'simp_opt_emergency', label: 'N° d\'urgence' },
                            { key: 'simp_opt_schedule', label: 'Horaires des nuisances' }
                        ].map(opt => (
                            <label key={opt.key} className="flex items-center justify-between p-4 border border-slate-200 rounded-xl cursor-pointer hover:bg-slate-50 transition">
                                <span className="text-sm font-bold text-slate-700">{opt.label}</span>
                                <input type="checkbox" checked={settingsData[opt.key] === '1'} onChange={e => setSettingsData({...settingsData, [opt.key]: e.target.checked ? '1' : '0'})} className="w-5 h-5 accent-emerald-600" />
                            </label>
                        ))}
                    </div>
                </div>

                <div className="border-t pt-6 mt-6">
                    <label className="flex items-center gap-3 p-4 bg-red-50 border border-red-200 rounded-xl cursor-pointer">
                        <input type="checkbox" checked={settingsData.maintenance} onChange={e => setSettingsData({...settingsData, maintenance: e.target.checked})} className="w-5 h-5 accent-red-600" />
                        <div><p className="text-sm font-bold text-red-900">Activer le mode maintenance</p><p className="text-xs text-red-700">Déconnecte tous les clients et bloque l'accès public.</p></div>
                    </label>
                </div>
                
                <button onClick={handleSaveSettings} disabled={isSaving} className="mt-6 w-full bg-slate-900 text-white py-4 rounded-xl font-black uppercase tracking-widest hover:bg-slate-800 transition shadow-lg disabled:opacity-50 flex items-center justify-center gap-2"><Save size={18}/> Sauvegarder la configuration globale</button>
            </div>
        </div>
    );

    // --- RENDU GLOBAL ---
    return (
        <window.DashboardLayout role="Super Administrateur" user="System Root" theme="purple" navItems={navItems} activeTab={activeTab} setActiveTab={setActiveTab} onLogout={async () => { await fetch(window.ECO_CONFIG.apiBaseUrl + 'auth/logout'); window.location.href='?'; }}>
            {activeTab === 'dashboard' && renderDashboard()}
            {activeTab === 'clients' && renderClients()}
            {activeTab === 'chantiers' && renderChantiers()}
            {activeTab === 'logistique' && renderLogistique()}
            {activeTab === 'invoices' && renderInvoices()}
            {activeTab === 'messages' && renderMessages()}
            {activeTab === 'settings' && renderSettings()}

            {/* Modale d'expédition logistique (création ou mise à jour) */}
            {shippingModal && (
                <window.Modal title={shippingModal.shipping_status === 'Expédié' ? "Mise à jour du suivi" : "Expédition de la commande"} onClose={() => setShippingModal(null)} preventClose={isSaving}>
                    <div className="space-y-4">
                        <div className="bg-blue-50 p-4 rounded-xl border border-blue-100 mb-4">
                            <p className="text-sm text-blue-800 font-medium">
                                {shippingModal.shipping_status === 'Expédié' 
                                    ? "Corrigez le numéro ou le lien de suivi. Le client recevra un e-mail avec les nouvelles informations."
                                    : "Saisissez les informations de suivi pour notifier le client. Le lien de suivi est obligatoire pour valider l'expédition."}
                            </p>
                        </div>
                        <div className="space-y-1">
                            <label className="text-xs font-bold text-slate-500 uppercase">Numéro de suivi *</label>
                            <input type="text" value={trackingData.number} onChange={e=>setTrackingData({...trackingData, number: e.target.value})} className="w-full border-2 border-slate-200 rounded-xl p-3 text-sm focus:border-blue-500 outline-none transition" placeholder="Ex : 6A123456789" />
                        </div>
                        <div className="space-y-1">
                            <label className="text-xs font-bold text-slate-500 uppercase">Lien de suivi transporteur *</label>
                            <input type="url" value={trackingData.link} onChange={e=>setTrackingData({...trackingData, link: e.target.value})} className="w-full border-2 border-slate-200 rounded-xl p-3 text-sm focus:border-blue-500 outline-none transition" placeholder="Ex : https://www.laposte.fr/outils/suivre-vos-envois?code=..." />
                        </div>
                        <div className="flex gap-3 mt-6">
                            <button onClick={() => setShippingModal(null)} disabled={isSaving} className="flex-1 py-3 bg-slate-100 text-slate-700 font-bold rounded-xl hover:bg-slate-200 transition disabled:opacity-50">Annuler</button>
                            <button onClick={() => updateShipping(shippingModal.id, 'Expédié', trackingData.number, trackingData.link)} disabled={isSaving || !trackingData.number.trim() || !trackingData.link.trim()} className="flex-1 py-3 bg-blue-600 text-white font-black uppercase tracking-widest rounded-xl hover:bg-blue-700 transition shadow-lg disabled:opacity-50">
                                {shippingModal.shipping_status === 'Expédié' ? "Mettre à jour" : "Confirmer l'expédition"}
                            </button>
                        </div>
                    </div>
                </window.Modal>
            )}

            {showTvaWarning && (
                <window.Modal title="Avertissement légal (émetteur)" onClose={() => setShowTvaWarning(false)}>
                    <div className="space-y-4">
                        <div className="bg-orange-50 text-orange-800 p-5 rounded-2xl border border-orange-200 text-sm leading-relaxed">
                            <p className="font-black mb-2 flex items-center gap-2"><AlertTriangle size={18}/> Exonération de TVA</p>
                            <p>En désactivant ce champ, vous indiquez que votre propre société (la plateforme eco-panneau) n'est pas assujettie à la TVA (ex : auto-entrepreneur).</p>
                            <p className="mt-2 font-bold">Conséquence immédiate :</p>
                            <ul className="list-disc pl-5 mt-1 space-y-1">
                                <li>Toutes vos futures factures seront émises <strong>sans TVA</strong> (Prix TTC = Prix HT).</li>
                                <li>La mention légale <em>"TVA non applicable, art. 293 B du CGI"</em> figurera sur les factures clients.</li>
                                <li>Les montants envoyés à Stripe ne seront plus majorés de 20%.</li>
                            </ul>
                        </div>
                        <div className="flex gap-3">
                            <button onClick={() => setShowTvaWarning(false)} className="flex-1 bg-slate-100 text-slate-700 py-3 rounded-xl font-bold hover:bg-slate-200 transition">Annuler</button>
                            <button onClick={confirmTvaExemption} className="flex-1 bg-emerald-600 text-white py-3 rounded-xl font-black uppercase tracking-widest hover:bg-emerald-700 transition shadow-lg">J'ai compris, désactiver la TVA</button>
                        </div>
                    </div>
                </window.Modal>
            )}

            {pwdRequest && (
                <window.Modal title={pwdRequest.title} onClose={() => setPwdRequest(null)}>
                    <div className="text-sm text-slate-600 mb-6 font-medium leading-relaxed">{pwdRequest.desc}</div>
                    <form onSubmit={(e) => {
                        e.preventDefault();
                        const pwd = e.target.pwd.value;
                        if(pwd) { pwdRequest.onConfirm(pwd); setPwdRequest(null); }
                    }}>
                        <input name="pwd" type="password" autoFocus required placeholder="Mot de passe administrateur..." className="w-full border-2 border-slate-200 rounded-xl p-3 text-sm focus:border-emerald-500 outline-none transition mb-4" />
                        <button type="submit" className="w-full bg-slate-900 text-white py-3 rounded-xl font-black uppercase tracking-widest hover:bg-slate-800 transition shadow-lg">Confirmer l'action</button>
                    </form>
                </window.Modal>
            )}

            {/* Autres Modales Système... */}
            {modalView === 'diagnostics' && (
                <window.Modal title="Diagnostics système" onClose={() => setModalView(null)}>
                    {!diagnostics ? <div className="p-10 text-center"><Loader className="animate-spin inline-block text-emerald-600 mb-2" size={32}/><p className="text-slate-500 font-bold">Analyse complète en cours...</p></div> : (
                        <div className="space-y-3">
                            {diagnostics.map(d => (
                                <div key={d.id} className="flex justify-between items-center p-4 bg-slate-50 rounded-xl border border-slate-100">
                                    <div><p className="font-bold text-sm text-slate-800">{d.label}</p><p className="text-xs text-slate-500">{d.status}</p></div>
                                    <span className="font-mono text-sm font-black text-slate-700 bg-white px-3 py-1 rounded shadow-sm">{d.detail}</span>
                                </div>
                            ))}
                        </div>
                    )}
                </window.Modal>
            )}

            {modalView === 'logs' && (
                <window.Modal title="Logs d'erreurs (PHP)" onClose={() => setModalView(null)}>
                    <div className="bg-slate-900 rounded-xl p-4 mb-4 overflow-x-auto">
                        <pre className="text-[10px] text-emerald-400 font-mono whitespace-pre-wrap">{logs}</pre>
                    </div>
                    <button onClick={clearLogs} className="w-full bg-red-50 text-red-600 py-3 rounded-xl font-bold flex justify-center items-center gap-2 hover:bg-red-100 transition"><Trash2 size={16}/> Vider les logs</button>
                </window.Modal>
            )}

            {modalView === 'backups' && (
                <window.Modal title="Gestion des sauvegardes (7z)" onClose={() => setModalView(null)} preventClose={isLoadingBackups}>
                    <div className="space-y-4">
                        {isLoadingBackups ? (
                            <div className="py-12 text-center text-slate-500">
                                <Loader size={32} className="animate-spin inline-block mb-4 text-emerald-600"/>
                                <p className="text-sm font-bold uppercase tracking-widest">Chargement en cours...</p>
                            </div>
                        ) : (
                            <>
                                <button onClick={createBackup} disabled={isSaving} className="w-full bg-slate-900 text-white py-4 rounded-xl font-black uppercase tracking-widest shadow-lg flex items-center justify-center gap-3 hover:bg-slate-800 disabled:opacity-50 transition mb-6">
                                    {(isSaving || isLoadingBackups) ? <Loader size={20} className="animate-spin"/> : <Save size={20} className="text-emerald-400"/>} 
                                    {isSaving ? 'COMPRESSION...' : 'SAUVEGARDER LE SITE'}
                                </button>
                                
                                {backups.slice(0, showAllBackups ? backups.length : 5).map(b => (
                                    <div key={b.id} className="flex flex-col sm:flex-row sm:items-center justify-between p-4 bg-slate-50 border border-slate-200 rounded-xl gap-4">
                                        <div><p className="font-bold text-sm text-slate-800 break-all">{b.name}</p><p className="text-xs text-slate-500">{new Date(b.date).toLocaleString('fr-FR')} • {b.size}</p></div>
                                        <div className="flex gap-2 shrink-0">
                                            <a href={`?api=system/backups/download&file=${b.name}`} title="Télécharger l'archive" className="p-2 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 transition"><Download size={16}/></a>
                                            <button onClick={() => restoreBackup(b.name)} disabled={isSaving} title="Restaurer (Écraser la BDD actuelle)" className="p-2 bg-amber-50 text-amber-600 rounded-lg hover:bg-amber-100 transition disabled:opacity-50"><RefreshCw size={16}/></button>
                                            <button onClick={() => deleteBackup(b.name)} title="Supprimer définitivement" className="p-2 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition"><Trash2 size={16}/></button>
                                        </div>
                                    </div>
                                ))}

                                {backups.length === 0 && <p className="text-center text-sm text-slate-500 py-6 italic">Aucune sauvegarde trouvée.</p>}
                                
                                {!showAllBackups && backups.length > 5 && (
                                    <button onClick={() => setShowAllBackups(true)} className="w-full py-3 bg-slate-100 text-slate-600 font-bold rounded-xl hover:bg-slate-200 transition mt-2 text-sm">
                                        Afficher tout ({backups.length - 5} de plus)
                                    </button>
                                )}
                            </>
                        )}
                    </div>
                </window.Modal>
            )}

            {isModalOpen && modalView === 'config_demo' && (
                <div className="fixed inset-0 bg-slate-900/80 backdrop-blur-md z-[200] animate-in fade-in duration-300 flex items-center justify-center p-0 sm:p-4" onMouseDown={(e) => { if(e.target === e.currentTarget) document.getElementById('editor-cancel-btn')?.click(); }}>
                    <div className="h-full sm:h-[95vh] w-full max-w-5xl mx-auto bg-white sm:rounded-3xl shadow-2xl flex flex-col relative overflow-hidden" onMouseDown={e => e.stopPropagation()}>
                        <div className="p-4 sm:p-6 border-b border-slate-100 flex justify-between items-center bg-purple-50 shrink-0">
                            <div><h2 className="text-xl font-black text-purple-900">Édition du panneau démo</h2><p className="text-xs text-purple-700 font-medium">Panneau public vitrine.</p></div>
                            <button onClick={() => document.getElementById('editor-cancel-btn')?.click()} title="Fermer" className="text-slate-400 hover:bg-white hover:text-slate-700 p-2 rounded-xl border border-transparent hover:border-slate-200 transition"><window.X size={24}/></button>
                        </div>
                        <div className="flex-1 relative overflow-hidden">
                            <window.ChantierEditorForm 
                                chantier={managingChantier} 
                                setChantier={setManagingChantier} 
                                managingChantier={managingChantier} 
                                onCancel={() => setIsModalOpen(false)} 
                                onSaveActive={handleSaveChantier} 
                                onEditEntity={(loc, data) => setEditingEntity({location: loc, data})} 
                                draggedItem={draggedItem} 
                                handleDragStart={handleDragStart} 
                                handleDragOver={handleDragOver} 
                                handleDrop={handleDrop} 
                                deleteEntity={deleteEntity} 
                                isSaving={isSaving} 
                                uiMode="professionnel" 
                            />
                        </div>
                        {editingEntity && <window.EntityEditorModal editingEntity={editingEntity} setEditingEntity={setEditingEntity} saveEditedEntity={saveEditedEntity} />}
                    </div>
                </div>
            )}
        </window.DashboardLayout>
    );
};

/* EOF ===== [_administrateur.jsx] =============== */