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

const { useState, useEffect } = React;

// 1. - Modale de prévisualisation (Mobile et A1)
window.pano_PreviewModal = ({ panneau, interactions = [], onClose, showToast, refreshData, isAdmin = false, onValidate, onContactClient, onSuspend, onDelete, onReactivate }) => {
    const [previewMode, setPreviewMode] = useState('mobile');
    const [showAdminMenu, setShowAdminMenu] = useState(false);
    
    const { XIcon, CheckCircleIcon, MessageSquareIcon, PowerIcon, Trash2Icon } = window.pano_getIcons();
    const { Button, ModalOverlay } = window.pano_getComponents();

    const needsValidation = panneau.status === 'Attente validation' || (!panneau.admin_seen && panneau.status === 'Actif');

    const handleClose = (e) => {
        if (e) {
            e.preventDefault();
            e.stopPropagation();
        }
        if (onClose) onClose();
    };

    const modalContent = (
        <ModalOverlay onClose={handleClose} className="flex flex-col p-4 sm:p-8 overflow-x-hidden">
            
            <div className="absolute top-4 sm:top-6 inset-x-4 sm:inset-x-8 flex justify-between items-start z-[10000] pointer-events-none">
                <div 
                    className="flex flex-col sm:flex-row bg-slate-800/90 backdrop-blur-md p-1.5 rounded-2xl pointer-events-auto shadow-2xl border border-slate-700/50 gap-1"
                    onMouseDown={(e) => e.stopPropagation()}
                >
                    <div 
                        role="button" tabIndex={0}
                        onClick={() => setPreviewMode('mobile')} 
                        className={`px-4 py-2 sm:py-2.5 rounded-xl text-xs sm:text-sm font-bold transition-all duration-200 cursor-pointer ${previewMode === 'mobile' ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-400 hover:text-white hover:bg-white/10'}`}
                    >
                        Mode Smartphone
                    </div>
                    <div 
                        role="button" tabIndex={0}
                        onClick={() => setPreviewMode('a1')} 
                        className={`px-4 py-2 sm:py-2.5 rounded-xl text-xs sm:text-sm font-bold transition-all duration-200 cursor-pointer ${previewMode === 'a1' ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-400 hover:text-white hover:bg-white/10'}`}
                    >
                        Panneau physique (A1)
                    </div>
                </div>
                <Button 
                    variant="ghost"
                    shape="square"
                    onClick={handleClose}
                    onMouseDown={(e) => e.stopPropagation()}
                    icon={XIcon}
                    className="pointer-events-auto bg-white/10 hover:bg-white/20 text-white border border-white/10 shadow-2xl shrink-0 p-3"
                    title="Fermer l'aperçu"
                />
            </div>

            <div 
                className="w-full flex-1 flex items-center justify-center min-h-0 mt-20 sm:mt-16 pointer-events-none"
            >
                {previewMode === 'mobile' ? (
                    <div 
                        className="relative w-full max-w-[393px] aspect-[393/852] max-h-[80vh] flex flex-col items-center justify-center shrink-0 pointer-events-auto" 
                        onMouseDown={e => e.stopPropagation()}
                        onClick={e => e.stopPropagation()}
                    >
                        <div className="w-full h-full bg-slate-900 rounded-[3rem] p-2 shadow-2xl relative border-[6px] border-slate-800 flex flex-col ring-4 ring-black/50 overflow-hidden">
                            
                            <div 
                                className="absolute top-2.5 left-1/2 -translate-x-1/2 h-7 min-w-[120px] bg-black rounded-full z-[60] flex items-center justify-center gap-3 px-3 shadow-[0_4px_10px_rgba(0,0,0,0.3)] cursor-pointer hover:bg-slate-900 transition-colors"
                                onClick={(e) => { e.stopPropagation(); if (isAdmin) setShowAdminMenu(true); }}
                            >
                                <div className="w-2.5 h-2.5 rounded-full bg-slate-800/80 shadow-[inset_0_1px_2px_rgba(0,0,0,0.5)] border border-white/5 shrink-0"></div>
                                
                                {isAdmin && (
                                    <div className="flex items-center gap-1 border-l border-white/10 pl-2 ml-1">
                                        <span className="text-[9px] font-bold text-white/80 uppercase tracking-widest leading-none mt-[1px]">Admin</span>
                                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-white/50"><path d="m6 9 6 6 6-6"/></svg>
                                    </div>
                                )}
                            </div>

                            <div className="w-full h-full rounded-[2.5rem] relative bg-white flex flex-col overflow-hidden isolate" style={{ WebkitMaskImage: '-webkit-radial-gradient(white, black)' }}>
                                {showAdminMenu && (
                                    <div className="absolute inset-0 z-[70] bg-slate-900/80 backdrop-blur-sm flex items-center justify-center p-4 animate-in fade-in duration-200" onClick={(e) => { e.stopPropagation(); setShowAdminMenu(false); }}>
                                        <div className="bg-white rounded-3xl w-full p-5 shadow-2xl flex flex-col gap-2 animate-in zoom-in-95 duration-200" onClick={e => e.stopPropagation()}>
                                            <div className="flex justify-between items-center mb-2 px-1">
                                                <span className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Actions modérateur</span>
                                                <Button 
                                                    variant="ghost" 
                                                    shape="square"
                                                    onClick={() => setShowAdminMenu(false)} 
                                                    icon={XIcon} 
                                                    className="text-slate-400 hover:text-slate-600 bg-slate-100 hover:bg-slate-200 p-1.5 shrink-0 border-none shadow-none" 
                                                    title="Fermer le menu"
                                                />
                                            </div>
                                            
                                            {needsValidation && (
                                                <Button variant="success" onClick={() => { setShowAdminMenu(false); if(onValidate) onValidate(); }} className="w-full justify-start py-3 text-sm" icon={CheckCircleIcon}>
                                                    Valider le panneau
                                                </Button>
                                            )}
                                            <Button variant="info" onClick={() => { setShowAdminMenu(false); if(onContactClient) onContactClient(); }} className="w-full justify-start py-3 text-sm" icon={MessageSquareIcon}>
                                                Contacter le client
                                            </Button>
                                            {(panneau.status === 'Actif' || panneau.status === 'Attente validation') && (
                                                <Button variant="warning" onClick={() => { setShowAdminMenu(false); if(onSuspend) onSuspend(); }} className="w-full justify-start py-3 text-sm" icon={PowerIcon}>
                                                    Suspendre le panneau
                                                </Button>
                                            )}
                                            {panneau.status === 'Suspendu' && (
                                                <Button variant="success" onClick={() => { setShowAdminMenu(false); if(onReactivate) onReactivate(); }} className="w-full justify-start py-3 text-sm" icon={PowerIcon}>
                                                    Réactiver le panneau
                                                </Button>
                                            )}
                                            <div className="mt-2 pt-3 border-t border-slate-100">
                                                <Button variant="danger" onClick={() => { setShowAdminMenu(false); if(onDelete) onDelete(); }} className="w-full justify-start py-3 text-sm" icon={Trash2Icon}>
                                                    Supprimer définitivement
                                                </Button>
                                            </div>
                                        </div>
                                    </div>
                                )}
                                {window.pano_RiverainView ? (
                                    <div className="w-full h-full flex flex-col">
                                        <window.pano_RiverainView 
                                            panneau={panneau} 
                                            interactions={interactions} 
                                            showToast={showToast} 
                                            refreshData={refreshData}
                                            isPreview={true} 
                                        />
                                    </div>
                                ) : (
                                    <div className="p-8 text-center text-slate-500 mt-20 break-words">Le module d'aperçu n'a pas pu être chargé.</div>
                                )}
                            </div>
                        </div>
                    </div>
                ) : (
                    <div 
                        className="relative w-full max-w-5xl aspect-[845/598] max-h-[80vh] flex flex-col items-center justify-center shrink-0 shadow-2xl bg-white ring-8 ring-white/10 pointer-events-auto" 
                        onMouseDown={e => e.stopPropagation()}
                        onClick={e => e.stopPropagation()}
                    >
                        {window.pano_PrintA1View ? (
                            <window.pano_PrintA1View panneau={panneau} />
                        ) : (
                            <div className="p-8 text-center text-slate-500 flex flex-col items-center justify-center h-full break-words">
                                Le module de rendu A1 n'a pas pu être chargé.
                            </div>
                        )}
                    </div>
                )}
            </div>
        </ModalOverlay>
    );

    return window.ReactDOM ? window.ReactDOM.createPortal(modalContent, document.body) : modalContent;
};

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