// ECO-PANNEAU.FR - __react/socle/_socle_archives.jsx

const { useState, useEffect, useRef } = React;

// 1. - COMPOSANT PRINCIPAL : GÉNÉRATEUR D'ARCHIVES SÉCURISÉES (D.O.E, RGPD, FACTURES)
window.pano_ArchiveGeneratorModal = ({ type, panelId, onClose, showToast, refreshData }) => {
    
    // ZÉRO-DETTE : Utilisation de notre Hook abstrait !
    const { isMounted, safeFetch } = window.pano_useSafeFetch();

    // 1.1 - Composants et Icônes
    const { DownloadIcon, CheckCircleIcon, AlertTriangleIcon, LoaderIcon, CopyIcon, MailIcon } = window.pano_getIcons();
    const { Modal, Button } = window.pano_getComponents();
    
    // 1.2 - États
    const [step, setStep] = useState('generating');
    const [progress, setProgress] = useState(0);
    const [result, setResult] = useState(null);
    const [errorMessage, setErrorMessage] = useState('');
    const [sendingEmail, setSendingEmail] = useState(false);
    const [copied, setCopied] = useState(false);

    const hasFetched = useRef(false);

    // 2. - GÉNÉRATION DE L'ARCHIVE (ON MOUNT)
    useEffect(() => {
        if (hasFetched.current) return;
        hasFetched.current = true;

        let currentProgress = 0;
        
        const interval = setInterval(() => {
            currentProgress += (90 - currentProgress) * 0.1;
            if (isMounted.current) setProgress(currentProgress);
        }, 500);

        const endpoint = type === 'rgpd' ? 'archives/rgpd' : (type === 'factures' ? 'invoices/export_zip' : 'archives/doe');
        const body = (type === 'rgpd' || type === 'factures') ? {} : { id: panelId };

        safeFetch(endpoint, { body })
            .then(d => {
                // SÉCURITÉ : On stoppe tout si le composant a été fermé par l'utilisateur
                if (!isMounted.current) return;
                
                clearInterval(interval);
                setProgress(100);
                
                if (d) {
                    setResult(d.data);
                    setStep('done');
                    if (refreshData) {
                        refreshData();
                    }
                } else {
                    setErrorMessage("Erreur lors de la génération.");
                    setStep('error');
                }
            })
            .catch(e => {
                // SÉCURITÉ : On stoppe tout si le composant a été fermé
                if (!isMounted.current) return;
                
                clearInterval(interval);
                setErrorMessage("Erreur de connexion réseau.");
                setStep('error');
            });

        return () => {
            clearInterval(interval);
        };
    }, [type, panelId, refreshData, safeFetch, isMounted]);

    // 3. - ACTIONS MÉTIER
    const handleCopy = () => {
        if (!result || !result.password) {
            return;
        }
        
        navigator.clipboard.writeText(result.password).then(() => {
            setCopied(true);
            if (showToast) {
                showToast("Mot de passe copié !", "success");
            }
            // SÉCURITÉ : Vérification de isMounted avant le setTimeout
            setTimeout(() => {
                if (isMounted.current) setCopied(false);
            }, 2000);
        });
    };

    const handleSendEmail = async () => {
        if (!result) return;
        
        await safeFetch('archives/send_password', {
            body: { filename: result.filename },
            setLoading: setSendingEmail,
            successMessage: "Mot de passe envoyé par e-mail avec succès."
        });
    };

    // 4. - RENDU UI
    return (
        <Modal 
            title={type === 'rgpd' ? "Export de vos données (RGPD)" : (type === 'factures' ? "Export sécurisé des factures" : "Clôture et archive D.O.E")} 
            onClose={onClose} 
            preventClose={step === 'generating'}
            actions={step === 'error' ? (close) => (
                <Button variant="secondary" onClick={close} className="w-full justify-center py-3">
                    Fermer
                </Button>
            ) : step === 'done' && result ? (close) => (
                <>
                    <Button variant="secondary" onClick={close} className="flex-1 py-3 justify-center">
                        Fermer
                    </Button>
                    <a 
                        href={`${window.pano_CONFIG.apiBaseUrl}archives/download&file=${result.filename.replace('.zip', '')}`} 
                        onClick={() => {
                            setTimeout(close, 2000); 
                        }} 
                        download={`eco-panneau.fr_${result.filename}`}
                        className="flex-[2] py-3 uppercase tracking-widest justify-center shadow-lg bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-bold flex items-center gap-2 transition text-xs"
                    >
                        <DownloadIcon size={16}/> Télécharger l'archive
                    </a>
                </>
            ) : null}
        >
            <div className="space-y-6 text-center">
                {step === 'generating' && (
                    <div className="py-8 space-y-6">
                        <LoaderIcon size={48} className="animate-spin text-emerald-600 mx-auto" />
                        <div>
                            <h3 className="text-lg font-black text-slate-800">Création de l'archive sécurisée...</h3>
                            <p className="text-sm text-slate-500 mt-2 font-medium">Chiffrement AES-256 de vos documents en cours. Veuillez patienter.</p>
                        </div>
                        <div className="w-full bg-slate-100 rounded-full h-3">
                            <div className="bg-emerald-500 h-full rounded-full transition-all duration-300 ease-out" style={{ width: `${progress}%` }}></div>
                        </div>
                    </div>
                )}

                {step === 'error' && (
                    <div className="py-8 space-y-4">
                        <div className="w-16 h-16 bg-red-100 text-red-600 rounded-full flex items-center justify-center mx-auto mb-4">
                            <AlertTriangleIcon size={32} />
                        </div>
                        <h3 className="text-xl font-black text-slate-800">Échec de la génération</h3>
                        <p className="text-sm text-slate-600 font-medium">{errorMessage}</p>
                    </div>
                )}

                {step === 'done' && result && (
                    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4">
                        <div className="bg-emerald-50 text-emerald-800 p-5 rounded-2xl border border-emerald-200 text-sm leading-relaxed">
                            <p className="font-black mb-3 flex items-center justify-center gap-2">
                                <CheckCircleIcon size={20}/> Archive chiffrée avec succès
                            </p>
                            <p>Vos données ont été regroupées dans une archive ZIP protégée par un mot de passe unique.</p>
                            <p className="mt-3 font-bold text-emerald-700">Vous pourrez retrouver ce mot de passe plus tard depuis votre tableau de bord grâce à l'icône en forme d'œil.</p>
                        </div>
                        
                        <div className="bg-slate-100 p-6 rounded-2xl border border-slate-200 shadow-inner relative group">
                            <p className="text-xs text-slate-500 font-bold uppercase tracking-widest mb-3">
                                Nom du fichier : <span className="text-slate-700">eco-panneau.fr_{result.filename}</span>
                            </p>
                            <p className="text-xs text-slate-500 font-bold uppercase tracking-widest mb-1 mt-4">
                                Mot de passe :
                            </p>
                            <div className="flex items-center justify-center gap-3 mb-2">
                                <Button 
                                    variant="ghost"
                                    shape="square"
                                    onClick={handleCopy} 
                                    title="Copier le mot de passe"
                                    className="text-slate-400 hover:text-emerald-600 border-none shadow-none bg-transparent hover:bg-slate-200"
                                >
                                    {copied ? <CheckCircleIcon size={24} className="text-emerald-600" /> : <CopyIcon size={24} />}
                                </Button>
                                <p className="text-3xl font-mono font-black text-slate-800 select-all tracking-wider m-0 leading-none">
                                    {result.password}
                                </p>
                            </div>
                            <div className="mt-6 flex flex-col sm:flex-row items-center justify-center gap-3">
                                <Button 
                                    variant="outline"
                                    icon={sendingEmail ? LoaderIcon : MailIcon}
                                    onClick={handleSendEmail} 
                                    disabled={sendingEmail} 
                                    className="w-full sm:w-auto py-2.5 bg-white shadow-sm justify-center text-xs font-bold"
                                >
                                    <span className="hidden sm:inline">Recevoir le mot de passe par e-mail</span>
                                    <span className="sm:hidden">Recevoir par e-mail</span>
                                </Button>
                            </div>
                        </div>
                    </div>
                )}
            </div>
        </Modal>
    );
};

/* EOF ========== [__react/socle/_socle_archives.jsx] */