window.AdminDashboard = ({ theme, navigate }) => {
    const { useState, useEffect } = React;

    // Estado para la Paleta de la Semana (5 colores)
    const [weeklyColors, setWeeklyColors] = useState(() => {
        const saved = localStorage.getItem('orbity_weekly_palette');
        return saved ? JSON.parse(saved) : ['#0F172A', '#334155', '#94A3B8', '#38BDF8', '#818CF8'];
    });

    // Estado para un nuevo artículo de blog (Mock)
    const [newPost, setNewPost] = useState({ title: '', cat: 'Teoría', excerpt: '' });
    const [toast, setToast] = useState({ visible: false, msg: "" });

    const showToast = (msg) => {
        setToast({ visible: true, msg });
        setTimeout(() => setToast({ visible: false, msg: "" }), 3000);
    };

    // Guardar la nueva paleta en el ecosistema
    const saveWeeklyPalette = () => {
        localStorage.setItem('orbity_weekly_palette', JSON.stringify(weeklyColors));
        showToast("Paleta Semanal Actualizada");
    };

    // Actualizar un color específico de la paleta
    const updateColor = (index, color) => {
        const newColors = [...weeklyColors];
        newColors[index] = color.toUpperCase();
        setWeeklyColors(newColors);
    };

    // Simular guardado de Blog
    const saveBlogPost = (e) => {
        e.preventDefault();
        // Aquí en el futuro enviaremos esto a una base de datos real (Supabase/Firebase)
        showToast("Artículo publicado en el Journal");
        setNewPost({ title: '', cat: 'Teoría', excerpt: '' });
    };

    return (
        <div className="max-w-5xl mx-auto px-6 text-inherit animate-fade-in text-left">
            {toast.visible && (
                <div className="fixed bottom-10 left-1/2 transform -translate-x-1/2 z-[300] bg-green-500 text-white px-6 py-3 rounded-full shadow-2xl animate-slide-up">
                    <span className="text-xs font-bold uppercase tracking-widest">{toast.msg}</span>
                </div>
            )}

            <button onClick={() => navigate('home', '/')} className="mb-10 flex items-center gap-2 text-[10px] font-black opacity-50 hover:opacity-100 uppercase tracking-widest transition-all">
                <window.Icon name="arrow-left" className="w-4 h-4" /> Volver al sitio
            </button>

            <div className="mb-12 border-b border-white/10 pb-8">
                <h2 className="text-4xl font-extrabold tracking-tight mb-2 uppercase text-purple-500">Centro de Comando Pro</h2>
                <p className="opacity-60 text-lg">Bienvenido, AdminOrbity. Gestiona el contenido dinámico del ecosistema.</p>
            </div>

            <div className="grid md:grid-cols-2 gap-12">
                
                {/* MODULO 1: PALETA DE LA SEMANA */}
                <div className={`p-8 rounded-3xl border ${theme === 'dark' ? 'bg-white/5 border-white/10' : 'bg-white border-slate-200 shadow-sm'}`}>
                    <h3 className="text-xl font-black uppercase mb-6 flex items-center gap-2">
                        <window.Icon name="palette" className="text-blue-500" /> Weekly Drop
                    </h3>
                    <p className="text-xs opacity-50 uppercase tracking-widest mb-6">Modifica los 5 colores que aparecen en la Landing Page.</p>
                    
                    <div className="space-y-4 mb-8">
                        {weeklyColors.map((hex, i) => (
                            <div key={i} className="flex items-center gap-4">
                                <div className="relative w-10 h-10 rounded-lg overflow-hidden shrink-0 border border-white/20 shadow-sm">
                                    <input type="color" value={hex.substring(0,7)} onChange={(e) => updateColor(i, e.target.value)} className="absolute -top-2 -left-2 w-16 h-16 cursor-pointer" />
                                </div>
                                <input type="text" value={hex} onChange={(e) => updateColor(i, e.target.value)} className={`w-full font-mono text-sm px-4 py-2 rounded-lg border outline-none ${theme === 'dark' ? 'bg-[#16181d] border-white/10' : 'bg-slate-50 border-slate-200'}`} />
                            </div>
                        ))}
                    </div>
                    
                    <button onClick={saveWeeklyPalette} className="w-full py-4 bg-blue-600 hover:bg-blue-500 text-white font-black rounded-xl text-[10px] uppercase tracking-widest shadow-xl transition-all">
                        Publicar Paleta en la Web
                    </button>
                </div>

                {/* MODULO 2: GESTOR DEL JOURNAL (BLOG) */}
                <div className={`p-8 rounded-3xl border h-fit ${theme === 'dark' ? 'bg-white/5 border-white/10' : 'bg-white border-slate-200 shadow-sm'}`}>
                    <h3 className="text-xl font-black uppercase mb-6 flex items-center gap-2">
                        <window.Icon name="pen-tool" className="text-pink-500" /> Redactar Post
                    </h3>
                    
                    <form onSubmit={saveBlogPost} className="space-y-6">
                        <div>
                            <label className="text-[10px] font-black uppercase block mb-2 opacity-50 tracking-widest">Título del Artículo</label>
                            <input required type="text" value={newPost.title} onChange={e=>setNewPost({...newPost, title: e.target.value})} className={`w-full border rounded-xl px-4 py-3 outline-none ${theme === 'dark' ? 'bg-[#16181d] border-white/10' : 'bg-slate-50 border-slate-200'}`}/>
                        </div>
                        
                        <div>
                            <label className="text-[10px] font-black uppercase block mb-2 opacity-50 tracking-widest">Categoría</label>
                            <select value={newPost.cat} onChange={e=>setNewPost({...newPost, cat: e.target.value})} className={`w-full border rounded-xl px-4 py-3 outline-none uppercase font-bold text-xs ${theme === 'dark' ? 'bg-[#16181d] border-white/10' : 'bg-slate-50 border-slate-200'}`}>
                                <option>Teoría</option><option>Sistemas</option><option>Ética</option>
                            </select>
                        </div>

                        <div>
                            <label className="text-[10px] font-black uppercase block mb-2 opacity-50 tracking-widest">Extracto Breve</label>
                            <textarea required rows="3" value={newPost.excerpt} onChange={e=>setNewPost({...newPost, excerpt: e.target.value})} className={`w-full border rounded-xl px-4 py-3 outline-none resize-none ${theme === 'dark' ? 'bg-[#16181d] border-white/10' : 'bg-slate-50 border-slate-200'}`}></textarea>
                        </div>

                        <button type="submit" className="w-full py-4 bg-pink-600 hover:bg-pink-500 text-white font-black rounded-xl text-[10px] uppercase tracking-widest shadow-xl transition-all">
                            Publicar Artículo
                        </button>
                    </form>
                </div>

            </div>
        </div>
    );
};