/**
 * =========================================================================
 * PLATEFORME ECO-PANNEAU.FR - VERSION 1.0.0
 * Composant : Modale d'aperçu interactif (Mobile et A1)
 * =========================================================================
 */

const { useState } = React;

window.PreviewModal = ({ panneau, interactions = [], onClose, showToast, refreshData, isAdmin = false, onValidate, onContactClient, onSuspend }) => {
    const [previewMode, setPreviewMode] = useState('mobile');
    const [showAdminMenu, setShowAdminMenu] = useState(false);
    
    const XIcon = window.XIcon || (() => null);
    const CheckCircleIcon = window.CheckCircleIcon || (() => null);
    const MessageSquareIcon = window.MessageSquareIcon || (() => null);
    const PowerIcon = window.PowerIcon || (() => null);
    const Button = window.Button || (() => null);

    const ModalOverlay = window.ModalOverlay || (({ children }) => <div>{children}</div>);

    return (
        <ModalOverlay zIndex="z-[9999]" onClose={onClose} className="flex-col animate-in fade-in duration-200 p-4 sm:p-8">
            
            <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>

                <div role="button" tabIndex={0} onClick={onClose} onMouseDown={(e) => e.stopPropagation()} className="pointer-events-auto bg-white/10 hover:bg-white/20 text-white rounded-full p-3 transition backdrop-blur-md border border-white/10 shadow-2xl shrink-0 cursor-pointer">
                    <XIcon size={24} />
                </div>
            </div>

            <div 
                className="w-full flex-1 flex items-center justify-center min-h-0 mt-20 sm:mt-16" 
                onMouseDown={(e) => { 
                    if (e.target === e.currentTarget) {
                        onClose(); 
                    }
                }}
            >
                {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" onMouseDown={e => e.stopPropagation()}>
                        <div className="w-full h-full bg-slate-900 rounded-[3rem] p-2 shadow-2xl relative border-[6px] border-slate-800 overflow-hidden flex flex-col ring-4 ring-black/50">
                            
                            {/* ENCOCHE DU SMARTPHONE (STATIQUE) */}
                            <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 && panneau.status === 'Actif') 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 && previewMode === 'mobile' && panneau.status === 'Actif' && (
                                    <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] overflow-hidden relative bg-white flex flex-col">
                                {/* MODALE DE MODÉRATION INTERNE AU TÉLÉPHONE */}
                                {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>
                                                <div role="button" onClick={() => setShowAdminMenu(false)} className="text-slate-400 hover:text-slate-600 cursor-pointer bg-slate-100 hover:bg-slate-200 transition rounded-full p-1.5 shrink-0"><XIcon size={14}/></div>
                                            </div>
                                            
                                            {!panneau.admin_seen && (
                                                <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>
                                            <Button variant="warning" onClick={() => { setShowAdminMenu(false); if(onSuspend) onSuspend(); }} className="w-full justify-start py-3 text-sm" icon={PowerIcon}>
                                                Désactiver le panneau
                                            </Button>
                                        </div>
                                    </div>
                                )}

                                {window.RiverainView ? (
                                    <window.RiverainView 
                                        panneau={panneau} 
                                        interactions={interactions} 
                                        showToast={showToast} 
                                        refreshData={refreshData}
                                        isPreview={true} 
                                    />
                                ) : (
                                    <div className="p-8 text-center text-slate-500 mt-20">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 rounded-sm overflow-hidden bg-white ring-8 ring-white/10" onMouseDown={e => e.stopPropagation()}>
                        {window.PrintA1View ? (
                            <window.PrintA1View panneau={panneau} />
                        ) : (
                            <div className="p-8 text-center text-slate-500 flex flex-col items-center justify-center h-full">
                                Le module de rendu A1 n'a pas pu être chargé.
                            </div>
                        )}
                    </div>
                )}
            </div>
        </ModalOverlay>
    );
};

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