window.ComposeModal = ({ isOpen, onClose, senderEmail, onSend, isDark }) => {
    const [to, setTo] = React.useState('');
    const [subject, setSubject] = React.useState('');
    const [body, setBody] = React.useState('');
    const [sending, setSending] = React.useState(false);

    if (!isOpen) return null;

    const handleSubmit = async (e) => {
        e.preventDefault();
        setSending(true);
        await onSend(to, subject, body);
        setSending(false);
        setTo(''); setSubject(''); setBody(''); onClose();
    };

    return (
        <div className="fixed inset-0 z-[100] flex items-end md:items-center justify-center p-4">
            <div className="absolute inset-0 bg-black/60 backdrop-blur-md" onClick={onClose}></div>

            <div className={`relative w-full max-w-lg rounded-2xl border shadow-2xl overflow-hidden flex flex-col max-h-[85vh]
                ${isDark ? 'bg-[#0a0a0a] border-white/10' : 'bg-white border-slate-200'}
            `}>
                <div className="h-1 w-full bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600"></div>

                <div className={`flex justify-between items-center p-5 border-b ${isDark ? 'border-white/5 bg-white/5' : 'border-slate-100 bg-slate-50'}`}>
                    <div>
                        <h3 className={`font-bold text-lg flex items-center gap-2 ${isDark ? 'text-white' : 'text-slate-800'}`}>
                            Compose
                        </h3>
                        <p className="text-[10px] text-gray-400 mt-1">From: <span className="text-green-500 font-mono">{senderEmail}</span></p>
                    </div>
                    <button onClick={onClose} className={`w-8 h-8 rounded-full flex items-center justify-center transition ${isDark ? 'bg-white/5 hover:bg-red-500/20 text-gray-400' : 'bg-slate-200 hover:bg-red-100 text-slate-600'}`}>
                        <i className="fa-solid fa-xmark"></i>
                    </button>
                </div>

                <form onSubmit={handleSubmit} className="p-6 space-y-5 overflow-y-auto glass-scroll">
                    {['Recipient Email', 'Subject'].map((ph, i) => (
                        <div key={i} className="group relative">
                            <input 
                                type={i===0?'email':'text'} required placeholder={ph}
                                className={`w-full border text-sm rounded-xl py-3.5 pl-4 pr-4 outline-none transition-all
                                    ${isDark 
                                        ? 'bg-[#111] border-white/10 text-white focus:border-blue-500 placeholder:text-gray-600' 
                                        : 'bg-slate-50 border-slate-200 text-slate-900 focus:border-blue-500 placeholder:text-slate-400'}
                                `}
                                value={i===0?to:subject} onChange={e => i===0?setTo(e.target.value):setSubject(e.target.value)}
                            />
                        </div>
                    ))}

                    <textarea required rows="5" placeholder="Message..." 
                        className={`w-full border text-sm rounded-xl p-4 outline-none resize-none
                            ${isDark ? 'bg-[#111] border-white/10 text-white focus:border-blue-500' : 'bg-slate-50 border-slate-200 text-slate-900 focus:border-blue-500'}
                        `}
                        value={body} onChange={e => setBody(e.target.value)}
                    ></textarea>

                    <button type="submit" disabled={sending} className="w-full py-3 rounded-xl font-bold text-sm text-white shadow-lg bg-gradient-to-r from-blue-600 to-purple-600 hover:shadow-blue-500/30">
                        {sending ? 'Sending...' : 'Send Message'}
                    </button>
                </form>
            </div>
        </div>
    );
};