/**
 * =========================================================================
 * PLATEFORME ECO-PANNEAU.FR - VERSION 1.0.0
 * Socle UI (3/4) - Design System et Layout Principal
 * =========================================================================
 */

// =========================================================================
// 1. DESIGN SYSTEM : COMPOSANTS UI UNIFIÉS (FACTORISÉS)
// =========================================================================

window.Button = ({ children, onClick, disabled, variant = 'primary', icon: Icon, className = '', type = 'button', title = '', ...props }) => {
    const baseClass = "px-4 py-2 rounded-xl text-xs font-bold transition flex items-center justify-center gap-2 shadow-sm border border-transparent";
    
    const variants = {
        primary: "bg-emerald-600 text-white hover:bg-emerald-700 shadow-md",
        success: "bg-emerald-50 text-emerald-600 hover:bg-emerald-100", 
        successSolid: "bg-emerald-600 text-white hover:bg-emerald-700 shadow-md",
        danger: "bg-red-50 text-red-600 hover:bg-red-100",
        dangerSolid: "bg-red-600 text-white hover:bg-red-700 shadow-md",
        warning: "bg-orange-50 text-orange-600 hover:bg-orange-100",
        warningSolid: "bg-orange-500 text-white hover:bg-orange-600 shadow-md",
        info: "bg-blue-50 text-blue-700 hover:bg-blue-100",
        infoSolid: "bg-blue-600 text-white hover:bg-blue-700 shadow-md",
        secondary: "bg-slate-100 text-slate-700 hover:bg-slate-200 border-slate-200",
        outline: "bg-white border-slate-200 text-slate-600 hover:bg-slate-50",
        purple: "bg-purple-50 text-purple-700 hover:bg-purple-100",
        dark: "bg-slate-900 text-white hover:bg-slate-800 shadow-md",
        ghost: "bg-transparent text-slate-500 hover:text-slate-800 hover:bg-slate-100 shadow-none border-transparent"
    };
    
    const handleAction = (e) => {
        if (disabled) return;
        if (onClick) onClick(e);
        
        if (type === 'submit') {
            const form = e.currentTarget.closest('form');
            if (form && typeof form.requestSubmit === 'function') {
                form.requestSubmit();
            }
        }
    };

    return (
        <div 
            role="button" 
            tabIndex={disabled ? -1 : 0} 
            onClick={handleAction}
            onKeyDown={(e) => { 
                if (e.key === 'Enter' || e.key === ' ') { 
                    e.preventDefault(); 
                    handleAction(e); 
                } 
            }}
            title={title} 
            className={`${baseClass} ${variants[variant] || variants.primary} ${className} ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`} 
            {...props}
        >
            {Icon && <Icon size={16} className="shrink-0" />}
            {children}
            {type === 'submit' && <input type="submit" className="hidden" disabled={disabled} tabIndex="-1" />}
        </div>
    );
};

window.IconBadge = ({ icon: Icon, variant = 'info', size = 'md', className = '' }) => {
    const variants = {
        primary: "bg-emerald-100 text-emerald-600",
        success: "bg-emerald-100 text-emerald-600",
        danger: "bg-red-100 text-red-600",
        warning: "bg-orange-100 text-orange-600",
        info: "bg-blue-100 text-blue-600",
        secondary: "bg-slate-100 text-slate-500",
        purple: "bg-purple-100 text-purple-600",
        dark: "bg-slate-800 text-slate-300"
    };
    const sizes = {
        sm: "w-8 h-8 rounded-lg",
        md: "w-10 h-10 rounded-xl",
        lg: "w-12 h-12 rounded-2xl",
        xl: "w-14 h-14 rounded-2xl"
    };
    const iconSizes = { sm: 14, md: 18, lg: 24, xl: 28 };
    return (
        <div className={`flex items-center justify-center shrink-0 ${variants[variant] || variants.info} ${sizes[size] || sizes.md} ${className}`}>
            {Icon && <Icon size={iconSizes[size] || 18} />}
        </div>
    );
};

window.Toggle = ({ checked, onChange, variant = 'success', disabled = false }) => {
    const variants = {
        success: 'bg-emerald-500',
        info: 'bg-blue-500',
        warning: 'bg-orange-500',
        danger: 'bg-red-500',
        purple: 'bg-purple-500'
    };
    const colorClass = variants[variant] || variants.success;
    return (
        <div 
            className={`w-10 h-5 rounded-full transition-colors flex items-center px-0.5 shrink-0 ${disabled ? 'opacity-50 cursor-not-allowed' : (onChange ? 'cursor-pointer' : '')} ${checked ? colorClass : 'bg-slate-300'}`}
            onClick={(e) => { if(onChange && !disabled) { e.stopPropagation(); onChange(!checked); } }}
        >
            <div className={`bg-white w-4 h-4 rounded-full transition-transform shadow-sm ${checked ? 'translate-x-5' : 'translate-x-0'}`}></div>
        </div>
    );
};

window.EmptyState = ({ icon: Icon, text, subtext, className = "" }) => (
    <div className={`text-center p-8 bg-slate-50 border border-slate-200 border-dashed rounded-2xl ${className}`}>
        {Icon && <Icon size={32} className="mx-auto text-slate-300 mb-3" />}
        <h3 className="text-sm font-black text-slate-700">{text}</h3>
        {subtext && <p className="text-xs text-slate-500 mt-1">{subtext}</p>}
    </div>
);

window.AlertBox = ({ type = 'info', icon: Icon, title, children, className = "" }) => {
    const styles = {
        info: 'bg-blue-50 text-blue-800 border-blue-200',
        warning: 'bg-orange-50 text-orange-800 border-orange-200',
        error: 'bg-red-50 text-red-800 border-red-200',
        success: 'bg-emerald-50 text-emerald-800 border-emerald-200'
    };
    const iconColors = {
        info: 'text-blue-500',
        warning: 'text-orange-500',
        error: 'text-red-500',
        success: 'text-emerald-500'
    };
    return (
        <div className={`p-4 rounded-xl border flex gap-3 items-start shadow-sm ${styles[type] || styles.info} ${className}`}>
            {Icon && <Icon size={20} className={`shrink-0 ${title ? ('mt-0.5 ' + iconColors[type]) : ''}`} />}
            <div className="flex-1 text-sm leading-relaxed">
                {title && <p className="font-bold mb-1">{title}</p>}
                {children}
            </div>
        </div>
    );
};

window.StatCard = ({ title, value, icon, variant = 'info', onClick }) => {
    const variants = {
        success: { bg: 'bg-emerald-100', text: 'text-emerald-600' },
        info: { bg: 'bg-blue-100', text: 'text-blue-600' },
        warning: { bg: 'bg-amber-100', text: 'text-amber-600' },
        danger: { bg: 'bg-red-100', text: 'text-red-600' },
        secondary: { bg: 'bg-slate-200', text: 'text-slate-600' },
        purple: { bg: 'bg-purple-100', text: 'text-purple-600' },
        indigo: { bg: 'bg-indigo-100', text: 'text-indigo-600' }
    };
    const v = variants[variant] || variants.info;
    return (
        <div onClick={onClick} className={`bg-white rounded-3xl p-6 shadow-sm border border-slate-100 flex items-center gap-4 ${onClick ? 'cursor-pointer hover:shadow-md transition hover:border-slate-300' : ''}`}>
            <div className={`w-14 h-14 rounded-2xl flex items-center justify-center shrink-0 ${v.bg} ${v.text}`}>{icon}</div>
            <div className="min-w-0">
                <p className="text-sm font-bold text-slate-500 uppercase tracking-widest truncate">{title}</p>
                <p className="text-2xl font-black text-slate-800 mt-1">{value}</p>
            </div>
        </div>
    );
};

window.PriceInput = ({ label, value, onChange, ...props }) => (
    <div className="p-4 bg-slate-50 border border-slate-100 rounded-xl">
        <label className="text-xs font-bold text-slate-700 uppercase block mb-2">{label}</label>
        <div className="relative">
            <input type="number" step="1" min="0" value={value} onChange={e => onChange(parseInt(e.target.value) || 0)} className="w-full border-2 border-slate-200 rounded-xl p-2.5 pr-8 text-sm focus:border-emerald-500 outline-none transition font-bold text-slate-800" {...props} />
            <span className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 font-bold">€</span>
        </div>
    </div>
);

window.StatusBadge = ({ status, variant, className = '' }) => {
    let colorClass = 'bg-slate-100 text-slate-600 border-slate-200';
    
    if (variant) {
        const variants = {
            success: 'bg-emerald-100 text-emerald-700 border-emerald-200',
            danger: 'bg-red-100 text-red-700 border-red-200',
            warning: 'bg-amber-100 text-amber-700 border-amber-200',
            info: 'bg-blue-100 text-blue-700 border-blue-200',
            secondary: 'bg-slate-100 text-slate-600 border-slate-200'
        };
        colorClass = variants[variant] || colorClass;
    } else {
        const s = (status || '').toLowerCase();
        if (s.includes('actif') || s.includes('livré') || s.includes('activé') || s.includes('accept')) {
            colorClass = 'bg-emerald-100 text-emerald-700 border-emerald-200';
        } else if (s.includes('suspendu') || s.includes('erreur') || s.includes('hors ligne') || s.includes('refus') || s.includes('désactivé')) {
            colorClass = 'bg-red-100 text-red-700 border-red-200';
        } else if (s.includes('brouillon') || s.includes('attente') || s.includes('validation') || s.includes('programmé')) {
            colorClass = 'bg-amber-100 text-amber-700 border-amber-200';
        } else if (s.includes('expédié')) {
            colorClass = 'bg-blue-100 text-blue-700 border-blue-200';
        }
    }
    
    return (
        <span className={`px-2 py-0.5 rounded-md text-[10px] font-black uppercase tracking-widest text-center border ${colorClass} ${className}`}>
            {status}
        </span>
    );
};

window.FormInput = ({ label, value, onChange, type = 'text', required = false, disabled = false, placeholder = '', className = '', hint = '', error = false, errorText = '', ...props }) => (
    <div className={`space-y-1 ${className}`}>
        <label className="text-xs font-bold text-slate-500 uppercase block">
            {label} {required && <span className="text-red-500 font-black">*</span>}
        </label>
        <input 
            type={type} 
            value={value} 
            onChange={onChange} 
            required={required}
            disabled={disabled}
            placeholder={placeholder}
            className={`w-full border-2 rounded-xl p-3 text-sm outline-none transition font-bold disabled:bg-slate-50 disabled:text-slate-500 disabled:cursor-not-allowed ${error ? 'border-red-400 focus:border-red-500 bg-red-50 text-red-900' : 'border-slate-200 focus:border-emerald-500 bg-white text-slate-800'}`} 
            {...props}
        />
        {hint && !errorText && <p className="text-xs text-slate-400 mt-1">{hint}</p>}
        {errorText && <p className="text-xs text-red-500 font-bold mt-1">{errorText}</p>}
    </div>
);

window.FormTextarea = ({ label, value, onChange, rows = 3, required = false, disabled = false, placeholder = '', className = '', hint = '', error = false, errorText = '', ...props }) => (
    <div className={`space-y-1 ${className}`}>
        <label className="text-xs font-bold text-slate-500 uppercase block">
            {label} {required && <span className="text-red-500 font-black">*</span>}
        </label>
        <textarea 
            rows={rows}
            value={value} 
            onChange={onChange} 
            required={required}
            disabled={disabled}
            placeholder={placeholder}
            className={`w-full border-2 rounded-xl p-3 text-sm outline-none transition font-bold disabled:bg-slate-50 disabled:text-slate-500 disabled:cursor-not-allowed resize-none custom-scrollbar ${error ? 'border-red-400 focus:border-red-500 bg-red-50 text-red-900' : 'border-slate-200 focus:border-emerald-500 bg-white text-slate-800'}`} 
            {...props}
        />
        {hint && !errorText && <p className="text-xs text-slate-400 mt-1">{hint}</p>}
        {errorText && <p className="text-xs text-red-500 font-bold mt-1">{errorText}</p>}
    </div>
);

// =========================================================================
// 2. LAYOUT PRINCIPAL (SHELL)
// =========================================================================

window.DashboardLayout = ({ role, user, theme = 'emerald', navItems, activeTab, setActiveTab, onLogout, customLogout, children, sidebarFooter }) => {
    const LogOutIcon = window.LogOutIcon || (() => null);
    const XIcon = window.XIcon || (() => null);
    const MenuIcon = window.MenuIcon || (() => null);
    const LogoSVG = window.LogoSVG || (() => null);
    
    const [isMobileMenuOpen, ReactSetIsMobileMenuOpen] = React.useState(false);
    
    const themeConfig = {
        emerald: { bg: 'bg-emerald-900', hover: 'hover:bg-emerald-800', active: 'bg-emerald-800 text-white border-emerald-400', text: 'text-emerald-100', border: 'border-emerald-800' },
        purple: { bg: 'bg-slate-900', hover: 'hover:bg-slate-800', active: 'bg-purple-600 text-white border-purple-400', text: 'text-slate-300', border: 'border-slate-800' },
        blue: { bg: 'bg-blue-900', hover: 'hover:bg-blue-800', active: 'bg-blue-800 text-white border-blue-400', text: 'text-blue-100', border: 'border-blue-800' }
    }[theme];

    return (
        <div className="absolute inset-0 flex bg-slate-50 overflow-hidden" style={{ '--sidebar-width': '18rem' }}>
            <aside className={`hidden lg:flex w-[var(--sidebar-width)] shrink-0 flex-col ${themeConfig.bg} text-white shadow-2xl z-20`}>
                <div className={`p-6 border-b ${themeConfig.border} flex items-center gap-4 shrink-0`}>
                    <LogoSVG size={40} className="shrink-0 drop-shadow-md" />
                    <div className="min-w-0">
                        <h2 className="font-black text-lg truncate uppercase tracking-widest">{role}</h2>
                        <p className={`text-xs ${themeConfig.text} truncate`}>{user}</p>
                    </div>
                </div>
                
                <nav className="flex-1 min-h-0 p-4 space-y-2 overflow-y-auto custom-scrollbar">
                    {navItems.map(item => (
                        <div 
                            role="button"
                            tabIndex={0}
                            key={item.id} 
                            onClick={() => setActiveTab(item.id)} 
                            className={`w-full flex items-center gap-3 px-4 py-3.5 rounded-2xl transition font-bold border cursor-pointer ${activeTab === item.id ? themeConfig.active : `border-transparent ${themeConfig.text} ${themeConfig.hover}`}`}
                        >
                            <span className={activeTab === item.id ? 'scale-110 transition-transform' : ''}>{item.icon}</span>
                            <span>{item.label}</span>
                            {item.badge > 0 && (
                                <span className={`ml-auto text-[10px] px-2 py-0.5 rounded-full ${activeTab === item.id ? 'bg-white text-slate-900' : 'bg-red-500 text-white'}`}>
                                    {item.badge}
                                </span>
                            )}
                        </div>
                    ))}
                </nav>
                
                <div className={`p-4 border-t ${themeConfig.border} shrink-0 bg-black/10`}>
                    {sidebarFooter}
                    {customLogout ? (
                        <div role="button" tabIndex={0} onClick={customLogout.action} className={`w-full flex items-center gap-3 px-4 py-3 rounded-2xl transition font-bold cursor-pointer ${customLogout.className}`}>
                            {customLogout.icon} {customLogout.label}
                        </div>
                    ) : (
                        <div role="button" tabIndex={0} onClick={onLogout} className={`w-full flex items-center gap-3 px-4 py-3 rounded-2xl ${themeConfig.text} ${themeConfig.hover} transition font-bold cursor-pointer`}>
                            <LogOutIcon size={18} /> Déconnexion
                        </div>
                    )}
                </div>
            </aside>

            <div className="flex-1 flex flex-col min-h-0 relative">
                <header className="lg:hidden bg-white h-16 border-b border-slate-200 flex items-center justify-between px-4 shrink-0 z-30 shadow-sm">
                    <div className="flex items-center gap-3">
                        <LogoSVG size={32} />
                        <div>
                            <p className="font-black text-slate-800 text-sm uppercase tracking-widest">{role}</p>
                            <p className="text-[10px] font-bold text-slate-500 truncate max-w-[150px]">{user}</p>
                        </div>
                    </div>
                    <div role="button" tabIndex={0} onClick={() => ReactSetIsMobileMenuOpen(!isMobileMenuOpen)} className="p-2 text-slate-600 bg-slate-100 rounded-xl cursor-pointer">
                        {isMobileMenuOpen ? <XIcon size={24} /> : <MenuIcon size={24} />}
                    </div>
                </header>

                {isMobileMenuOpen && (
                    <div className="lg:hidden absolute inset-0 top-16 z-30 bg-slate-900/95 backdrop-blur-sm animate-in fade-in flex flex-col">
                        <nav className="flex-1 min-h-0 p-4 space-y-2 overflow-y-auto">
                            {navItems.map(item => (
                                <div 
                                    role="button"
                                    tabIndex={0}
                                    key={item.id} 
                                    onClick={() => { setActiveTab(item.id); ReactSetIsMobileMenuOpen(false); }} 
                                    className={`w-full flex items-center gap-3 px-4 py-4 rounded-2xl transition font-bold text-left cursor-pointer ${activeTab === item.id ? 'bg-emerald-500 text-white' : 'text-slate-300 hover:bg-slate-800'}`}
                                >
                                    {item.icon} <span>{item.label}</span>
                                    {item.badge > 0 && <span className="ml-auto bg-red-500 text-white text-[10px] px-2 py-0.5 rounded-full">{item.badge}</span>}
                                </div>
                            ))}
                        </nav>
                        <div className="p-6 border-t border-slate-800 shrink-0 bg-slate-900">
                            {sidebarFooter}
                            {customLogout ? (
                                <div role="button" tabIndex={0} onClick={customLogout.action} className={`w-full flex items-center justify-center gap-2 px-4 py-4 rounded-2xl font-bold mt-2 cursor-pointer ${customLogout.className}`}>
                                    {customLogout.icon} {customLogout.label}
                                </div>
                            ) : (
                                <div role="button" tabIndex={0} onClick={onLogout} className="w-full flex items-center justify-center gap-2 px-4 py-4 rounded-2xl text-red-400 bg-red-500/10 font-bold mt-2 cursor-pointer">
                                    <LogOutIcon size={20} /> Déconnexion
                                </div>
                            )}
                        </div>
                    </div>
                )}

                <main className="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8 custom-scrollbar scroll-smooth">
                    {children}
                </main>
            </div>
        </div>
    );
};

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