// Registration Settings Component
const RegistrationSettings = ({ settings, onChange, disabled }) => {
    const { useState } = React;
    const providers = useProviders();
    const [isGenerating, setIsGenerating] = useState(false);

    const generateContact = async (field) => {
        setIsGenerating(true);
        try {
            const response = await fetch('/samples/random-contact');
            const data = await response.json();
            if (response.ok && data.status === 'success') {
                if (field === 'phone') {
                    onChange({ ...settings, phone_number: data.phone_number });
                } else if (field === 'email') {
                    onChange({ ...settings, email: data.email });
                }
            }
        } catch (error) {
            console.error('Error generating contact:', error);
        } finally {
            setIsGenerating(false);
        }
    };

    return (
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">
                    Provider Email<span className="text-red-500 ml-1">*</span>
                </label>
                <select
                    className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
                    value={settings.mail_provider}
                    onChange={e => onChange({ ...settings, mail_provider: e.target.value })}
                    disabled={disabled}
                >
                    {providers.map(p => (
                        <option key={p.id} value={p.id}>{p.name} ({p.domain})</option>
                    ))}
                </select>
            </div>
            <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">
                    Numero di Telefono<span className="text-red-500 ml-1">*</span>
                </label>
                <div className="flex gap-2">
                    <input
                        type="tel"
                        placeholder="+39 123 456 7890"
                        value={settings.phone_number}
                        onChange={e => onChange({ ...settings, phone_number: e.target.value })}
                        disabled={disabled}
                        className="flex-1 px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
                    />
                    <button
                        type="button"
                        onClick={() => generateContact('phone')}
                        disabled={disabled || isGenerating}
                        className="px-3 py-2 bg-brand-500 text-white rounded-lg text-sm hover:bg-brand-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1"
                        title="Genera numero casuale"
                    >
                        🎲
                    </button>
                </div>
            </div>
            <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">
                    Email di Recupero<span className="text-red-500 ml-1">*</span>
                </label>
                <div className="flex gap-2">
                    <input
                        type="email"
                        placeholder="recupero@esempio.com"
                        value={settings.email}
                        onChange={e => onChange({ ...settings, email: e.target.value })}
                        disabled={disabled}
                        className="flex-1 px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
                    />
                    <button
                        type="button"
                        onClick={() => generateContact('email')}
                        disabled={disabled || isGenerating}
                        className="px-3 py-2 bg-brand-500 text-white rounded-lg text-sm hover:bg-brand-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1"
                        title="Genera email casuale"
                    >
                        🎲
                    </button>
                </div>
            </div>
        </div>
    );
};

window.RegistrationSettings = RegistrationSettings;