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

    const [image, setImage] = useState(null);
    const [preview, setPreview] = useState(null);
    const [format, setFormat] = useState('image/webp');
    const [quality, setQuality] = useState(0.8);
    const [toast, setToast] = useState({ visible: false, msg: "" });
    const canvasRef = useRef(null);

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

    const handleFile = (e) => { 
        const file = e.target.files[0]; 
        if(file) { 
            setImage(file); 
            const reader = new FileReader(); 
            reader.onload = (ev) => setPreview(ev.target.result); 
            reader.readAsDataURL(file); 
        } 
    };

    const convertAndDownload = () => { 
        const canvas = canvasRef.current; 
        const ctx = canvas.getContext('2d'); 
        const img = new Image(); 
        img.src = preview; 
        
        img.onload = () => { 
            canvas.width = img.width; 
            canvas.height = img.height; 
            ctx.drawImage(img, 0, 0); 
            const dataUrl = canvas.toDataURL(format, quality); 
            const link = document.createElement('a'); 
            link.download = `orbity-optimized.${format.split('/')[1]}`; 
            link.href = dataUrl; 
            link.click(); 
            showToast("Conversión completada con éxito"); 
        }; 
    };

    return (
        <div className="animate-fade-in max-w-4xl mx-auto px-6 text-inherit text-left">
            {toast.visible && (
                <div className="fixed bottom-10 left-1/2 transform -translate-x-1/2 z-[300] bg-cyan-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">Image Converter</h2>
                <p className="opacity-60 max-w-2xl font-light text-xl leading-relaxed">Optimización local de imágenes a formatos de nueva generación (WebP) sin perder calidad ni comprometer privacidad.</p>
            </div>

            <div className={`p-12 border-2 border-dashed rounded-3xl text-center transition-all duration-300 ${theme==='dark'?'border-white/10 hover:border-cyan-400/50 bg-white/5':'border-slate-300 hover:border-cyan-500 bg-slate-50'}`}>
                {!preview ? (
                    <label className="cursor-pointer block py-10">
                        <window.Icon name="image" className="w-16 h-16 mx-auto mb-6 opacity-30" />
                        <span className="text-xl font-bold mb-2 block">Arrastra o selecciona tu imagen</span>
                        <span className="text-xs opacity-50 uppercase tracking-widest">JPG, PNG, GIF</span>
                        <input type="file" className="hidden" accept="image/*" onChange={handleFile}/>
                    </label>
                ) : (
                    <div className="space-y-8">
                        <div className="relative inline-block">
                            <img src={preview} className="max-h-80 mx-auto rounded-xl shadow-2xl object-contain"/>
                            <button onClick={()=>{setPreview(null); setImage(null)}} className="absolute -top-4 -right-4 p-2 bg-red-500 text-white rounded-full hover:scale-110 shadow-lg transition-transform">
                                <window.Icon name="x" className="w-4 h-4" />
                            </button>
                        </div>
                        
                        <div className="grid grid-cols-2 gap-4 max-w-md mx-auto">
                            <select value={format} onChange={e=>setFormat(e.target.value)} className={`px-4 py-4 rounded-xl border font-bold uppercase tracking-widest text-xs outline-none cursor-pointer ${theme === 'dark' ? 'bg-[#16181d] text-inherit border-white/10' : 'bg-white border-slate-200 text-slate-900'}`}>
                                <option value="image/webp">WebP (Recomendado)</option>
                                <option value="image/jpeg">JPEG Estándar</option>
                                <option value="image/png">PNG Transparente</option>
                            </select>
                            <button onClick={convertAndDownload} className="px-4 py-4 bg-cyan-500 hover:bg-cyan-400 text-white font-black rounded-xl uppercase tracking-widest text-xs shadow-lg flex items-center justify-center gap-2 transition-transform hover:-translate-y-1">
                                <window.Icon name="download" className="w-4 h-4" /> Convertir
                            </button>
                        </div>
                    </div>
                )}
            </div>
            <canvas ref={canvasRef} className="hidden"></canvas>
        </div>
    );
};