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

    const [base, setBase] = useState(16);
    const [ratio, setRatio] = useState(1.250);
    const [steps, setSteps] = useState(5);
    const [font, setFont] = useState('Inter');
    const [toast, setToast] = useState({ visible: false, msg: "" });

    const fonts = ['Inter', 'Roboto', 'Montserrat', 'Poppins', 'Playfair Display', 'Lora', 'Raleway', 'Syne', 'Nunito', 'Oswald'];
    const ratios = { "1.067": "Minor Second", "1.125": "Major Second", "1.200": "Minor Third", "1.250": "Major Third", "1.333": "Perfect Fourth", "1.414": "Augmented Fourth", "1.500": "Perfect Fifth", "1.618": "Golden Ratio" };
    
    useEffect(() => { 
        const linkId = `font-scale-${font.replace(/\s+/g, '')}`;
        if (!document.getElementById(linkId)) {
            const link = document.createElement('link'); link.id = linkId;
            link.href = `https://fonts.googleapis.com/css2?family=${font.replace(/ /g, '+')}:wght@400;700;900&display=swap`; 
            link.rel = 'stylesheet'; 
            document.head.appendChild(link); 
        }
    }, [font]);
    
    const scales = useMemo(() => { 
        let arr = []; 
        for(let i = 2; i > 0; i--) { 
            const size = base / Math.pow(ratio, i); 
            arr.push({ step: -i, px: size.toFixed(2), rem: (size/16).toFixed(3), label: `sm-${i}` }); 
        } 
        arr.push({ step: 0, px: base.toFixed(2), rem: (base/16).toFixed(3), label: 'base' }); 
        for(let i = 1; i <= steps; i++) { 
            const size = base * Math.pow(ratio, i); 
            arr.push({ step: i, px: size.toFixed(2), rem: (size/16).toFixed(3), label: `h${7-i > 0 ? 7-i : 'xl'}` }); 
        } 
        return arr.reverse(); 
    }, [base, ratio, steps]);
    
    const copyCSS = () => { 
        const css = `:root {\n  font-family: '${font}', sans-serif;\n` + scales.map(s => `  --text-${s.label}: ${s.rem}rem; /* ${s.px}px */`).join('\n') + `\n}`; 
        navigator.clipboard.writeText(css);
        setToast({ visible: true, msg: "Variables CSS copiadas" });
        setTimeout(() => setToast({ visible: false, msg: "" }), 3000);
    };

    return (
        <div className="animate-fade-in max-w-5xl mx-auto px-6 space-y-12 text-inherit text-left">
            {toast.visible && (
                <div className="fixed bottom-10 left-1/2 transform -translate-x-1/2 z-[300] bg-blue-600 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="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" /> Dashboard
            </button>

            <div className="grid md:grid-cols-3 gap-12 items-start">
                {/* Panel de Configuración Lateral */}
                <div className={`p-8 rounded-3xl border md:sticky md:top-32 ${theme==='dark'?'bg-white/5 border-white/10 shadow-2xl':'bg-white border-slate-200 shadow-sm'}`}>
                    <h3 className="font-bold mb-6 flex items-center gap-2 uppercase tracking-widest text-xs font-black"><window.Icon name="type" className="w-4 h-4 text-blue-500" /> Settings</h3>
                    
                    <div className="space-y-6">
                        <div>
                            <label className="text-[10px] font-black uppercase block mb-2 opacity-50 tracking-widest">Tipografía Base</label>
                            <select value={font} onChange={e=>setFont(e.target.value)} className={`w-full border rounded-xl px-4 py-3 text-sm outline-none font-bold uppercase tracking-widest cursor-pointer ${theme === 'dark' ? 'bg-[#16181d] border-white/10' : 'bg-slate-50 border-slate-200'}`}>
                                {fonts.map(f=><option key={f} value={f}>{f}</option>)}
                            </select>
                        </div>
                        <div>
                            <label className="text-[10px] font-black uppercase block mb-2 opacity-50 tracking-widest">Tamaño Raíz (px)</label>
                            <input type="number" value={base} onChange={e=>setBase(Number(e.target.value))} className={`w-full border rounded-xl px-4 py-3 outline-none font-mono font-bold ${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">Proporción Áurea</label>
                            <select value={ratio} onChange={e=>setRatio(Number(e.target.value))} className={`w-full border rounded-xl px-4 py-3 outline-none font-bold uppercase tracking-widest text-xs cursor-pointer ${theme === 'dark' ? 'bg-[#16181d] border-white/10' : 'bg-slate-50 border-slate-200'}`}>
                                {Object.entries(ratios).map(([val, name]) => (<option key={val} value={val}>{val} - {name}</option>))}
                            </select>
                        </div>
                        
                        <button onClick={copyCSS} className="w-full mt-6 py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-black text-[10px] uppercase tracking-widest shadow-xl flex items-center justify-center gap-2 transition-all hover:-translate-y-1">
                            <window.Icon name="code" className="w-4 h-4" /> Extraer CSS
                        </button>
                    </div>

                    {/* Conexión con WCAG */}
                    <div onClick={() => navigate('tool-wcag', '/wcag')} className={`mt-6 cursor-pointer p-5 rounded-2xl border transition-all flex items-center gap-4 ${theme==='dark'?'bg-emerald-500/10 border-emerald-500/30 hover:bg-emerald-500/20':'bg-emerald-50 border-emerald-200 hover:bg-emerald-100'}`}>
                        <div className="p-3 bg-emerald-500 text-white rounded-xl"><window.Icon name="eye" className="w-4 h-4" /></div>
                        <div>
                            <h4 className={`font-bold text-xs uppercase tracking-widest ${theme==='dark'?'text-emerald-400':'text-emerald-700'}`}>Auditar Lectura</h4>
                            <p className="text-[10px] opacity-60 mt-1">Verificar contraste WCAG.</p>
                        </div>
                    </div>
                </div>

                {/* Área de Visualización */}
                <div className="md:col-span-2 space-y-6">
                    <div className="mb-8">
                        <h2 className="text-4xl md:text-5xl font-extrabold tracking-tight mb-4 leading-none uppercase">Type Scale</h2>
                        <p className="opacity-60 text-lg">Jerarquía visual fluida construida sobre proporciones matemáticas perfectas.</p>
                    </div>

                    <div className="space-y-4">
                        {scales.map((s, i) => (
                            <div key={i} className={`flex items-center gap-6 p-6 rounded-2xl border transition-all group ${theme==='dark'?'border-white/5 hover:bg-white/5':'border-slate-100 hover:bg-slate-50 shadow-sm'}`}>
                                <div className="w-24 opacity-40 text-[10px] font-mono shrink-0 font-bold">
                                    {s.rem}rem<br/>{s.px}px
                                </div>
                                <div className="flex-1 truncate font-black tracking-tighter leading-none" style={{ fontSize: `${s.px}px`, fontFamily: font }}>
                                    Orbitylab
                                </div>
                                <div className="text-[10px] font-black uppercase tracking-widest opacity-30 group-hover:opacity-100 text-blue-500 transition-opacity">
                                    {s.label}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
};