// Add Profile Modal Component
const { useState } = React;

const AddProfileModal = ({ onClose, onAdded }) => {
    const toast = useToast();
    const providers = useProviders();
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [provider, setProvider] = useState('virgilio');
    const [loading, setLoading] = useState(false);

    const handleSubmit = async (e) => {
        e.preventDefault();
        if (!email || !password) { 
            toast('Email e password obbligatori', 'error'); 
            return; 
        }
        setLoading(true);
        try {
            const r = await fetch('/profiles/add', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ email_address: email, password, provider })
            });
            const data = await r.json();
            if (r.ok && data.status === 'success') { 
                toast('Profilo aggiunto', 'success'); 
                onAdded(); 
            }
            else toast(data.detail || 'Errore', 'error');
        } catch (e) { 
            toast(`Errore: ${e.message}`, 'error'); 
        }
        finally { 
            setLoading(false); 
        }
    };

    return (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={onClose}>
            <Card className="w-full max-w-md m-4" onClick={e => e.stopPropagation()}>
                <div className="p-4 border-b border-slate-200 flex items-center justify-between">
                    <h3 className="font-semibold text-slate-900">📧 Aggiungi Profilo</h3>
                    <button className="text-slate-400 hover:text-slate-600 text-2xl" onClick={onClose}>×</button>
                </div>
                <form onSubmit={handleSubmit} className="p-6 space-y-4">
                    <div>
                        <label className="block text-sm font-medium text-slate-700 mb-1">Provider</label>
                        <select
                            className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
                            value={provider}
                            onChange={e => setProvider(e.target.value)}
                        >
                            {providers.map(p => <option key={p.id} value={p.id}>{p.name} ({p.domain})</option>)}
                        </select>
                    </div>
                    <Input label="Email" type="email" value={email} onChange={e => setEmail(e.target.value)} required />
                    <Input label="Password" type="password" value={password} onChange={e => setPassword(e.target.value)} required />
                    <div className="flex justify-end gap-3 pt-2">
                        <Button variant="secondary" type="button" onClick={onClose}>Annulla</Button>
                        <Button variant="primary" type="submit" disabled={loading}>
                            {loading ? <><Spinner /> Connessione...</> : 'Aggiungi'}
                        </Button>
                    </div>
                </form>
            </Card>
        </div>
    );
};

window.AddProfileModal = AddProfileModal;