/**
 * =========================================================================
 * PLATEFORME ECO-PANNEAU.FR - VERSION 1.0.0
 * Interface Administrateur - Modales : Sauvegardes Système
 * =========================================================================
 */

window.pano_AdminModalsBackups = ({ activeModal, activeDialog, closeCurrentLayer, openLocalDialog, fetchTelemetry, showToast }) => {
    const { useState, useEffect } = React;
    const [isSaving, setIsSaving] = useState(false);
    const [backupsList, setBackupsList] = useState([]);
    const [backupDesc, setBackupDesc] = useState('');
    
    // États pour la restauration
    const [backupToRestore, setBackupToRestore] = useState(null);
    const [restorePwd, setRestorePwd] = useState('');
    const [confirmConfig, setConfirmConfig] = useState(null);

    // Composants et Icônes
    const Modal = window.pano_Modal || (() => null);
    const ConfirmModal = window.pano_ConfirmModal || (() => null);
    const Button = window.pano_Button || (() => null);
    const { ArchiveIcon, Trash2Icon, RefreshCwIcon, DownloadIcon, CheckCircleIcon, ShieldIcon } = window.pano_getIcons();

    // 1. CHARGEMENT INITIAL
    useEffect(() => {
        if (activeModal === 'backups') {
            loadBackups();
        }
    }, [activeModal]);

    const loadBackups = async () => {
        const d = await window.pano_apiFetch('system/backups', { method: 'GET' });
        if (d && d.status === 'success') {
            setBackupsList(d.data || []);
        }
    };

    // 2. CRÉATION DE SAUVEGARDE
    const handleCreateBackup = async () => {
        closeCurrentLayer(); // ferme le prompt
        const d = await window.pano_apiFetch('system/backups/create', {
            body: { label: backupDesc.trim() },
            setLoading: setIsSaving,
            successMessage: "Sauvegarde créée avec succès."
        });
        if (d) {
            setBackupDesc('');
            loadBackups();
            if (fetchTelemetry) fetchTelemetry();
        }
    };

    // 3. RESTAURATION
    const confirmRestore = (b) => {
        setBackupToRestore(b);
        openLocalDialog('restore_prompt');
    };

    const executeRestore = async () => {
        if (!restorePwd) {
            if (showToast) showToast("Mot de passe requis.", "error");
            return;
        }
        closeCurrentLayer();
        const d = await window.pano_apiFetch('system/backups/restore', {
            body: { filename: backupToRestore.name, pwd: restorePwd },
            setLoading: setIsSaving,
            successMessage: "Restauration terminée. Le système a été réinitialisé."
        });
        if (d) {
            setRestorePwd('');
            setBackupToRestore(null);
            setTimeout(() => window.location.reload(), 1500);
        }
    };

    // 4. SUPPRESSION ET NETTOYAGE
    const handleDeleteBackup = (b) => {
        setConfirmConfig({
            title: "Supprimer la sauvegarde",
            message: `Voulez-vous vraiment supprimer la sauvegarde "${b.label}" ?`,
            confirmText: "Oui, supprimer",
            isDestructive: true,
            onConfirm: async () => {
                setConfirmConfig(null);
                const d = await window.pano_apiFetch('system/backups/delete', {
                    body: { file: b.name },
                    setLoading: setIsSaving,
                    successMessage: "Sauvegarde supprimée."
                });
                if (d) {
                    loadBackups();
                    if (fetchTelemetry) fetchTelemetry();
                }
            },
            onCancel: () => setConfirmConfig(null)
        });
        openLocalDialog('confirm');
    };

    const handleCleanupBackups = () => {
        setConfirmConfig({
            title: "Nettoyage des archives",
            message: "Voulez-vous vraiment supprimer toutes les sauvegardes à l'exception des 5 plus récentes ?",
            confirmText: "Oui, nettoyer",
            isDestructive: true,
            onConfirm: async () => {
                setConfirmConfig(null);
                const d = await window.pano_apiFetch('system/backups/cleanup', {
                    method: 'POST',
                    setLoading: setIsSaving,
                    successMessage: "Archives obsolètes purgées avec succès."
                });
                if (d) {
                    loadBackups();
                    if (fetchTelemetry) fetchTelemetry();
                }
            },
            onCancel: () => setConfirmConfig(null)
        });
        openLocalDialog('confirm');
    };

    return (
        <>
            {/* MODALE PRINCIPALE : LISTE DES SAUVEGARDES */}
            {activeModal === 'backups' && (
                <Modal title="Gestion des sauvegardes" onClose={closeCurrentLayer} icon={ArchiveIcon} zIndex="z-[200]">
                    <div className="space-y-6">
                        <div className="flex flex-col sm:flex-row justify-between sm:items-center gap-4">
                            <p className="text-sm text-slate-500">Gérez les archives système (BDD + fichiers de configuration).</p>
                            <div className="flex gap-2">
                                <Button variant="secondary" icon={Trash2Icon} onClick={handleCleanupBackups} disabled={isSaving || backupsList.length <= 5} title="Ne garder que les 5 plus récentes">Purger</Button>
                                <Button variant="primary" icon={ArchiveIcon} onClick={() => openLocalDialog('backup_prompt')} disabled={isSaving}>Nouvelle archive</Button>
                            </div>
                        </div>

                        <div className="bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm">
                            <div className="max-h-[50vh] overflow-y-auto custom-scrollbar divide-y divide-slate-100">
                                {backupsList.sort((a,b) => b.date - a.date).map((b, i) => (
                                    <div key={i} className="p-4 flex flex-col sm:flex-row justify-between sm:items-center gap-4 hover:bg-slate-50 transition">
                                        <div className="flex items-center gap-3">
                                            <div className="w-10 h-10 rounded-xl bg-emerald-100 text-emerald-600 flex items-center justify-center shrink-0">
                                                <ArchiveIcon size={20}/>
                                            </div>
                                            <div>
                                                <p className="font-bold text-slate-800 text-sm flex items-center gap-2">
                                                    {b.label}
                                                    {i === 0 && <span className="text-[9px] bg-emerald-500 text-white px-2 py-0.5 rounded-full uppercase tracking-wider">Actuelle</span>}
                                                </p>
                                                <p className="text-xs text-slate-500 mt-0.5">{new Date(b.date).toLocaleString('fr-FR')} • {b.size}</p>
                                            </div>
                                        </div>
                                        <div className="flex gap-2 shrink-0">
                                            <Button variant="secondary" shape="square" icon={DownloadIcon} onClick={() => window.location.href = `${window.pano_CONFIG.apiBaseUrl}system/backups/download&file=${b.name}`} title="Télécharger (.zip)" className="p-2 border-none bg-slate-100 hover:bg-slate-200"/>
                                            <Button variant="warning" shape="square" icon={RefreshCwIcon} onClick={() => confirmRestore(b)} disabled={isSaving} title="Restaurer" className="p-2 border-none bg-amber-100 hover:bg-amber-200 text-amber-700"/>
                                            <Button variant="danger" shape="square" icon={Trash2Icon} onClick={() => handleDeleteBackup(b)} disabled={isSaving || i === 0} title="Supprimer" className="p-2 border-none bg-red-100 hover:bg-red-200 text-red-600"/>
                                        </div>
                                    </div>
                                ))}
                                {backupsList.length === 0 && (
                                    <div className="p-8 text-center text-slate-500 italic text-sm">Aucune sauvegarde trouvée sur le serveur.</div>
                                )}
                            </div>
                        </div>
                    </div>
                </Modal>
            )}

            {/* PROMPT : NOM DE LA NOUVELLE SAUVEGARDE */}
            {activeDialog === 'backup_prompt' && (
                <Modal title="Nouvelle sauvegarde" onClose={closeCurrentLayer} zIndex="z-[250]">
                    <div className="space-y-4">
                        <p className="text-sm text-slate-600">Donnez une description courte à cette archive (ex: "Avant mise à jour V2"). <span className="italic text-slate-400">Optionnel</span>.</p>
                        <input type="text" value={backupDesc} onChange={e => setBackupDesc(e.target.value)} placeholder="Description de l'archive (Optionnel)..." className="w-full border-2 border-slate-200 rounded-xl p-3 focus:border-emerald-500 outline-none transition font-bold" autoFocus />
                        <div className="pt-4 flex gap-2 justify-end">
                            <Button variant="secondary" onClick={closeCurrentLayer} disabled={isSaving}>Annuler</Button>
                            <Button variant="primary" icon={CheckCircleIcon} onClick={handleCreateBackup} disabled={isSaving}>Créer l'archive</Button>
                        </div>
                    </div>
                </Modal>
            )}

            {/* PROMPT SÉCURISÉ : MOT DE PASSE POUR RESTAURATION */}
            {activeDialog === 'restore_prompt' && backupToRestore && (
                <Modal title="Confirmation de restauration" onClose={closeCurrentLayer} zIndex="z-[250]">
                    <div className="space-y-4">
                        <div className="bg-amber-50 border border-amber-200 p-4 rounded-xl text-amber-800 text-sm font-medium">
                            Vous êtes sur le point d'écraser la base de données actuelle avec l'archive du <strong className="font-bold">{new Date(backupToRestore.date).toLocaleString('fr-FR')}</strong>. 
                            Toutes les données générées depuis cette date seront définitivement perdues.
                        </div>
                        <div className="space-y-2">
                            <label className="text-xs font-bold text-slate-500 uppercase">Mot de passe administrateur requis</label>
                            <div className="relative">
                                <ShieldIcon size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
                                <input type="password" value={restorePwd} onChange={e => setRestorePwd(e.target.value)} placeholder="Saisissez votre mot de passe principal..." className="w-full border-2 border-slate-200 rounded-xl p-3 pl-10 focus:border-amber-500 outline-none transition font-bold" autoFocus />
                            </div>
                        </div>
                        <div className="pt-4 flex gap-2 justify-end">
                            <Button variant="secondary" onClick={closeCurrentLayer} disabled={isSaving}>Annuler</Button>
                            <Button variant="warning" icon={RefreshCwIcon} onClick={executeRestore} disabled={isSaving || !restorePwd}>Confirmer et restaurer</Button>
                        </div>
                    </div>
                </Modal>
            )}

            {/* MODALE DE CONFIRMATION GLOBALE (Suppression / Nettoyage) */}
            {activeDialog === 'confirm' && confirmConfig && ConfirmModal && (
                <ConfirmModal {...confirmConfig} onCancel={closeCurrentLayer} zIndex="z-[300]"/>
            )}
        </>
    );
};

/* EOF ========== [_react/_admin_modals_backups.jsx] */