window.MeshTool = ({ theme, navigate }) => {
    const { useState } = React;
    const [toast, setToast] = useState({ visible: false, msg: "" });

    // Estado inicial de los puntos del Mesh
    const [points, setPoints] = useState([
        { x: 20, y: 20, c: '#11FFC9' }, 
        { x: 80, y: 80, c: '#6D2D52' },
        { x: 80, y: 20, c: '#38BDF8' }
    ]);

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

    const generateCSS = () => { 
        const bg = points.map(p => `radial-gradient(at ${p.x}% ${p.y}%, ${p.c} 0px, transparent 50%)`).join(', '); 
        return `background-color: #0a0c10; background-image: ${bg};`; 
    };

    const copyCSS = () => {
        navigator.clipboard.writeText(generateCSS());
        showToast("¡Código CSS copiado!");
    };

    // Integración Ecosistema: Enviar color pivote al Color Generator
    const sendToPalette = (colorHex) => {
        localStorage.setItem('orbity_pivot_color', colorHex);
        navigate('tool-palette', '/paletadecolor');
    };

    return (
        <div className="max-w-6xl 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-indigo-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="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" /> Dashboard
            </button>

            <div className="mb-12">
                <h2 className="text-4xl md:text-5xl font-extrabold tracking-tight mb-4 leading-none uppercase">Mesh Editor</h2>
                <p className="opacity-60 max-w-2xl font-light text-xl leading-relaxed">Crea gradientes orgánicos complejos y sombras CSS de forma interactiva.</p>
            </div>

            <div className="grid lg:grid-cols-2 gap-12">
                {/* Controles del Mesh */}
                <div className="space-y-6">
                    <div className={`p-8 rounded-3xl border ${theme==='dark'?'bg-white/5 border-white/10':'bg-white border-slate-200 shadow-sm'}`}>
                        <h3 className="font-bold mb-6 uppercase tracking-widest text-xs font-black opacity-50">Nodos de Color</h3>
                        
                        {points.map((p, i) => (
                            <div key={i} className={`mb-6 pb-6 border-b last:border-0 last:mb-0 last:pb-0 ${theme==='dark'?'border-white/5':'border-slate-100'}`}>
                                <div className="flex justify-between items-center mb-4">
                                    <span className="text-[10px] font-black uppercase tracking-widest">Nodo {i+1}</span>
                                    <div className="flex gap-2">
                                        <input type="color" value={p.c} onChange={e=>{const n=[...points];n[i].c=e.target.value;setPoints(n)}} className="w-8 h-8 rounded cursor-pointer border-0 bg-transparent p-0"/>
                                        <button onClick={() => sendToPalette(p.c)} className="p-2 bg-indigo-500/10 text-indigo-500 hover:bg-indigo-500/20 rounded-lg transition-colors" title="Crear paleta desde este color">
                                            <window.Icon name="palette" className="w-4 h-4" />
                                        </button>
                                        {points.length > 2 && (
                                            <button onClick={() => setPoints(points.filter((_, idx) => idx !== i))} className="p-2 text-red-500 opacity-50 hover:opacity-100">
                                                <window.Icon name="x" className="w-4 h-4" />
                                            </button>
                                        )}
                                    </div>
                                </div>
                                <div className="grid grid-cols-2 gap-6">
                                    <div>
                                        <label className="text-[9px] uppercase opacity-50 block mb-1">Eje X: {p.x}%</label>
                                        <input type="range" min="0" max="100" value={p.x} onChange={e=>{const n=[...points];n[i].x=e.target.value;setPoints(n)}} className="w-full accent-indigo-500"/>
                                    </div>
                                    <div>
                                        <label className="text-[9px] uppercase opacity-50 block mb-1">Eje Y: {p.y}%</label>
                                        <input type="range" min="0" max="100" value={p.y} onChange={e=>{const n=[...points];n[i].y=e.target.value;setPoints(n)}} className="w-full accent-indigo-500"/>
                                    </div>
                                </div>
                            </div>
                        ))}
                        
                        <button onClick={()=>setPoints([...points, {x:50,y:50,c:'#ffffff'}])} className={`w-full py-4 mt-4 rounded-xl text-[10px] font-bold uppercase tracking-widest transition-colors ${theme==='dark'?'bg-white/5 hover:bg-white/10':'bg-slate-100 hover:bg-slate-200'}`}>
                            + Añadir Nodo
                        </button>
                    </div>
                    
                    <button onClick={copyCSS} className="w-full py-4 bg-indigo-600 hover:bg-indigo-500 text-white font-black rounded-xl 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" /> Copiar Código CSS
                    </button>
                </div>

                {/* Previsualización del Mesh */}
                <div className="h-[500px] w-full rounded-3xl shadow-2xl border border-white/10 relative overflow-hidden transition-all duration-300" style={{backgroundColor: '#0a0c10', backgroundImage: points.map(p => `radial-gradient(at ${p.x}% ${p.y}%, ${p.c} 0px, transparent 50%)`).join(', ')}}>
                    {/* Visualizadores de nodos opcionales sobre el lienzo */}
                    {points.map((p, i) => (
                        <div key={i} className="absolute w-4 h-4 border-2 border-white/50 rounded-full shadow-lg transform -translate-x-1/2 -translate-y-1/2 pointer-events-none" style={{ left: `${p.x}%`, top: `${p.y}%` }}></div>
                    ))}
                </div>
            </div>
        </div>
    );
};