/**
 * =========================================================================
 * PLATEFORME ECO-PANNEAU.FR - VERSION 1.0.0
 * Composants : Modales pour la vue Riverains (SPA Layer)
 * =========================================================================
 */

window.pano_RiverainPdfModal = ({ targetId, panneau, onClose, onOpenArretes }) => {
    const { ArrowLeftIcon, DownloadIcon } = window.pano_getIcons();
    const Button = window.pano_Button || (() => null);

    return (
        <div className="absolute inset-0 z-[999999] bg-slate-900/95 backdrop-blur-sm flex flex-col animate-in fade-in duration-200" onClick={onClose}>
            <div className="flex justify-between items-center p-4 bg-slate-900/50 text-white shrink-0 border-b border-white/10" onClick={e => e.stopPropagation()}>
                <Button 
                    variant="ghost" 
                    onClick={() => { 
                        onClose(); 
                        if (panneau.modificatifs?.length > 0) setTimeout(onOpenArretes, 50); 
                    }} 
                    className="text-white hover:bg-white/10 border-none shadow-none px-4 py-2"
                    icon={ArrowLeftIcon}
                >
                    Retour
                </Button>
                <a href={`${window.pano_CONFIG.apiBaseUrl}file/download&type=pdf&id=${targetId}`} download className="flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 rounded-xl transition text-sm font-bold shadow-lg cursor-pointer text-white">
                    <DownloadIcon size={18}/> <span className="hidden sm:inline">Télécharger</span>
                </a>
            </div>
            <div className="flex-1 flex flex-col items-center justify-start p-2 sm:p-4 min-h-0 relative w-full overflow-y-auto custom-scrollbar">
                <img src={`${window.pano_CONFIG.apiBaseUrl}file/preview&type=pdf&id=${targetId}`} alt="Aperçu de l'arrêté" className="w-full max-w-3xl rounded-xl shadow-2xl" onClick={e => e.stopPropagation()} />
            </div>
        </div>
    );
};

window.pano_RiverainImageModal = ({ displayImageUrl, onClose }) => {
    const { ArrowLeftIcon } = window.pano_getIcons();
    const Button = window.pano_Button || (() => null);

    return (
        <div className="absolute inset-0 z-[999999] bg-slate-900/95 backdrop-blur-sm flex flex-col animate-in fade-in duration-200" onClick={onClose}>
            <div className="flex justify-between items-center p-4 bg-slate-900/50 text-white shrink-0 border-b border-white/10" onClick={e => e.stopPropagation()}>
                <Button 
                    variant="ghost" 
                    onClick={onClose} 
                    className="text-white hover:bg-white/10 border-none shadow-none px-4 py-2"
                    icon={ArrowLeftIcon}
                >
                    Retour
                </Button>
            </div>
            <div className="flex-1 flex flex-col items-center justify-center p-2 sm:p-4 min-h-0 relative w-full overflow-hidden">
                <img src={displayImageUrl} alt="Vue du projet" className="max-w-full max-h-full object-contain rounded-xl shadow-2xl" onClick={e => e.stopPropagation()} />
            </div>
        </div>
    );
};

window.pano_RiverainArretesModal = ({ panneau, onClose, onOpenPdf }) => {
    const { XIcon, FileDigitIcon, ArrowRightIcon } = window.pano_getIcons();
    const Button = window.pano_Button || (() => null);

    return (
        <div className="absolute inset-0 z-[999998] bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4 animate-in fade-in duration-200" onClick={onClose}>
            <div className="bg-white rounded-[2rem] w-full max-w-[320px] shadow-2xl flex flex-col overflow-hidden animate-in slide-in-from-bottom-4" onClick={e => e.stopPropagation()}>
                <div className="p-5 border-b border-slate-100 bg-slate-50 flex justify-between items-center">
                    <h3 className="font-black text-slate-800 text-sm uppercase tracking-wider">Documents d'urbanisme</h3>
                    <Button variant="ghost" shape="square" onClick={onClose} className="p-1 hover:bg-slate-200 border-none shadow-none text-slate-400" icon={XIcon} />
                </div>
                <div className="p-4 space-y-2 overflow-y-auto max-h-[60vh] custom-scrollbar">
                    <div role="button" tabIndex={0} onClick={() => { onClose(); setTimeout(() => onOpenPdf(panneau.pdfId), 50); }} className="w-full p-3 bg-slate-50 hover:bg-emerald-50 border border-slate-200 rounded-2xl flex items-center justify-between group transition text-left cursor-pointer">
                        <div className="flex items-center gap-3 min-w-0">
                            <div className="w-10 h-10 rounded-xl bg-emerald-100 text-emerald-600 flex items-center justify-center shrink-0"><FileDigitIcon size={20}/></div>
                            <div className="min-w-0"><p className="font-black text-slate-800 text-xs break-words leading-tight">Arrêté initial</p><p className="text-[9px] text-slate-500 font-bold uppercase">Document principal</p></div>
                        </div>
                        <ArrowRightIcon size={16} className="text-slate-300 group-hover:text-emerald-500 transition-transform group-hover:translate-x-1" />
                    </div>
                    {panneau.modificatifs?.map((mod, idx) => (
                        <div role="button" tabIndex={0} key={idx} onClick={() => { onClose(); setTimeout(() => onOpenPdf(mod.id), 50); }} className="w-full p-3 bg-slate-50 hover:bg-blue-50 border border-slate-200 rounded-2xl flex items-center justify-between group transition text-left cursor-pointer">
                            <div className="flex items-center gap-3 min-w-0">
                                <div className="w-10 h-10 rounded-xl bg-blue-100 text-blue-600 flex items-center justify-center shrink-0"><FileDigitIcon size={20}/></div>
                                <div className="min-w-0"><p className="font-black text-slate-800 text-xs break-words leading-tight">{mod.label}</p><p className="text-[9px] text-slate-500 font-bold uppercase">Ajouté le {new Date(mod.date).toLocaleDateString('fr-FR')}</p></div>
                            </div>
                            <ArrowRightIcon size={16} className="text-slate-300 group-hover:text-blue-500 transition-transform group-hover:translate-x-1" />
                        </div>
                    ))}
                </div>
                <div className="p-4 bg-slate-50 border-t border-slate-100">
                    <Button variant="dark" onClick={onClose} className="w-full py-3 uppercase tracking-widest text-[10px] justify-center">Fermer</Button>
                </div>
            </div>
        </div>
    );
};

window.pano_RiverainDemoWarningModal = ({ targetId, onClose }) => {
    const { XIcon, InfoIcon } = window.pano_getIcons();
    const Button = window.pano_Button || (() => null);

    return (
        <div className="absolute inset-0 z-[999999] bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4 animate-in fade-in duration-200" onClick={onClose}>
            <div className="bg-white rounded-3xl w-full max-w-[320px] shadow-2xl flex flex-col overflow-hidden animate-in zoom-in-95 duration-200" onClick={e => e.stopPropagation()}>
                <div className="p-5 border-b border-slate-100 bg-slate-50 flex justify-between items-center">
                    <h3 className="font-black text-slate-800 text-sm uppercase tracking-wider">Mode aperçu</h3>
                    <Button variant="ghost" shape="square" onClick={onClose} className="p-1 hover:bg-slate-200 border-none shadow-none text-slate-400" icon={XIcon} />
                </div>
                <div className="space-y-4 text-center p-6">
                    <InfoIcon size={32} className="text-blue-600 mx-auto" />
                    <p className="text-xs text-slate-600 font-medium">
                        {targetId === 'chat' 
                            ? "La messagerie (messages et pièces jointes) est désactivée en mode aperçu ou démo." 
                            : "Les liens sortants sont désactivés en mode aperçu ou démo."}
                    </p>
                    <Button variant="dark" onClick={onClose} className="w-full py-3 mt-2 justify-center text-sm">OK</Button>
                </div>
            </div>
        </div>
    );
};

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