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

    const [text, setText] = useState("https://orbitylab.com");
    const [logo, setLogo] = useState(null);
    const [qrRounding, setQrRounding] = useState(12);
    const [logoRounding, setLogoRounding] = useState(8);
    const [color, setColor] = useState("#11FFC9");
    const [bgColor, setBgColor] = useState("#0a0c10");
    const canvasRef = useRef(null);

    // URL dinámica de la API del QR
    const qrUrl = useMemo(() => 
        `https://api.qrserver.com/v1/create-qr-code/?size=400x400&data=${encodeURIComponent(text)}&color=${color.replace('#','')}&bgcolor=${bgColor.replace('#','')}&margin=10`, 
    [text, color, bgColor]);

    const handleLogoUpload = (e) => { 
        const file = e.target.files[0]; 
        if (file) { 
            const reader = new FileReader(); 
            reader.onload = (re) => setLogo(re.target.result); 
            reader.readAsDataURL(file); 
        } 
    };

    const downloadQR = () => { 
        const canvas = canvasRef.current; 
        const ctx = canvas.getContext('2d'); 
        const img = new Image(); 
        img.crossOrigin = "anonymous"; 
        img.src = qrUrl; 
        
        img.onload = () => { 
            ctx.fillStyle = bgColor; 
            ctx.fillRect(0, 0, 400, 400); 
            ctx.drawImage(img, 0, 0, 400, 400); 
            
            if (logo) { 
                const logoImg = new Image(); 
                logoImg.src = logo; 
                logoImg.onload = () => { 
                    const size = 80; const x = (400 - size) / 2; const y = (400 - size) / 2; 
                    ctx.fillStyle = bgColor; 
                    ctx.beginPath(); 
                    ctx.roundRect(x - 5, y - 5, size + 10, size + 10, logoRounding); 
                    ctx.fill(); 
                    ctx.drawImage(logoImg, x, y, size, size); 
                    triggerDownload(canvas); 
                }; 
            } else { 
                triggerDownload(canvas); 
            } 
        }; 
    };

    const triggerDownload = (canvas) => { 
        const link = document.createElement('a'); 
        link.download = `orbity-qr-${Date.now()}.png`; 
        link.href = canvas.toDataURL(); 
        link.click(); 
    };

    return (
        <div className="animate-fade-in max-w-5xl mx-auto px-6 text-inherit text-left">
            <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">QR Generator</h2>
                <p className="opacity-60 max-w-2xl font-light text-xl leading-relaxed">Códigos QR personalizados para identidad de marca con incrustación de logotipos.</p>
            </div>

            <div className="grid md:grid-cols-2 gap-12">
                {/* Panel de Configuración */}
                <div className={`p-8 rounded-3xl border h-fit ${theme==='dark'?'bg-white/5 border-white/10 text-white 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="sliders" className="w-4 h-4 text-pink-500" /> Parámetros</h3>
                    
                    <div className="space-y-6">
                        <div>
                            <label className="text-[10px] font-black uppercase block mb-2 opacity-50 tracking-widest">Enlace / Contenido</label>
                            <input type="text" value={text} onChange={e=>setText(e.target.value)} className={`w-full border rounded-xl px-4 py-3 outline-none font-medium ${theme==='dark'?'bg-[#16181d] border-white/10':'bg-slate-50 border-slate-200'}`}/>
                        </div>
                        <div className="grid grid-cols-2 gap-4">
                            <div>
                                <label className="text-[10px] font-black uppercase block mb-2 opacity-50 tracking-widest">Color QR</label>
                                <input type="color" value={color} onChange={e=>setColor(e.target.value)} className="w-full h-12 rounded-xl bg-transparent cursor-pointer border border-white/10 shadow-sm"/>
                            </div>
                            <div>
                                <label className="text-[10px] font-black uppercase block mb-2 opacity-50 tracking-widest">Fondo</label>
                                <input type="color" value={bgColor} onChange={e=>setBgColor(e.target.value)} className="w-full h-12 rounded-xl bg-transparent cursor-pointer border border-white/10 shadow-sm"/>
                            </div>
                        </div>
                        <div>
                            <label className="text-[10px] font-black uppercase block mb-2 opacity-50 tracking-widest">Logotipo Central</label>
                            <input type="file" accept="image/*" onChange={handleLogoUpload} className="w-full text-xs opacity-60 cursor-pointer file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-[10px] file:font-black file:bg-blue-500/20 file:text-blue-500 hover:file:bg-blue-500/30 transition-all"/>
                        </div>
                        <div>
                            <label className="text-[10px] font-black uppercase block mb-2 opacity-50 tracking-widest">Geometría QR: {qrRounding}px</label>
                            <input type="range" min="0" max="60" value={qrRounding} onChange={e=>setQrRounding(e.target.value)} className="w-full accent-pink-500"/>
                        </div>
                        {logo && (
                            <div>
                                <label className="text-[10px] font-black uppercase block mb-2 opacity-50 tracking-widest">Redondeo Logo: {logoRounding}px</label>
                                <input type="range" min="0" max="40" value={logoRounding} onChange={e=>setLogoRounding(e.target.value)} className="w-full accent-pink-500"/>
                            </div>
                        )}
                    </div>
                </div>

                {/* Previsualización y Exportación */}
                <div className={`flex flex-col items-center justify-center p-12 rounded-3xl border shadow-2xl ${theme==='dark'?'bg-white/5 border-white/10':'bg-slate-50 border-slate-200'}`}>
                    <div className="relative p-6 transition-all duration-500 overflow-hidden shadow-2xl border border-white/10" style={{ borderRadius: `${qrRounding}px`, backgroundColor: bgColor }}>
                        <img src={qrUrl} alt="QR" className="w-64 h-64 transition-all" style={{ borderRadius: `${qrRounding * 0.8}px` }} />
                        {logo && (
                            <div className="absolute inset-0 flex items-center justify-center">
                                <div className="p-1 shadow-2xl" style={{ backgroundColor: bgColor, borderRadius: `${logoRounding}px` }}>
                                    <img src={logo} className="w-12 h-12 object-cover" style={{borderRadius: `${logoRounding*0.8}px`}} alt="Logo" />
                                </div>
                            </div>
                        )}
                    </div>
                    <canvas ref={canvasRef} width="400" height="400" className="hidden"></canvas>
                    
                    <button onClick={downloadQR} className="w-full max-w-xs mt-12 py-4 bg-pink-600 hover:bg-pink-500 text-white rounded-xl font-black text-[10px] uppercase tracking-widest flex items-center justify-center gap-2 shadow-xl transition-all hover:-translate-y-1">
                        <window.Icon name="download" className="w-4 h-4" /> Exportar QR
                    </button>
                </div>
            </div>
        </div>
    );
};