const { useState, useEffect } = window.React || {};

window.RegisterSpecialist = ({ onComplete, onOpenLegal, onCancel }) => {
    const { Icons } = window;
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');
    const [errors, setErrors] = useState({});
    
    // Invitation data from URL
    const query = new URLSearchParams(window.location.search);
    const invitationData = {
        centerName: query.get('centerName') || 'Centro Clínico',
        centerId: query.get('centerId') || '',
        code: query.get('code') || '---',
        email: query.get('email') || ''
    };

    const [formData, setFormData] = useState({
        name: '',
        phone: '',
        specialty: '',
        password: '',
        confirmPassword: ''
    });

    const validate = () => {
        let e = {};
        if (!formData.name) e.name = true;
        if (!formData.phone) e.phone = true;
        
        // Password validation: 8 chars, 1 upper, 1 lower, 1 number, 1 special (including dot)
        const passRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&.])[A-Za-z\d@$!%*?&.]{8,}$/;
        if (!passRegex.test(formData.password)) e.password = true;
        if (formData.password !== formData.confirmPassword) e.confirmPassword = true;

        setErrors(e);
        return Object.keys(e).length === 0;
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        setError('');
        if (!validate()) {
            return setError("Por favor completa los campos obligatorios (*) y cumple los requisitos de contraseña.");
        }
        
        setLoading(true);
        try {
            // 1. Create User in Auth
            const userCred = await window.firebaseAuth.createUserWithEmailAndPassword(
                window.firebaseAuth.auth, 
                invitationData.email, 
                formData.password
            );
            
            const uid = userCred.user.uid;
            
            // 2. Create User Profile in Firestore
            await window.firestore.setDoc(window.firestore.doc(window.db, "users", uid), {
                id: uid,
                email: invitationData.email,
                nickname: formData.name,
                phone: formData.phone,
                specialty: formData.specialty,
                role: 'doctor',
                centerId: invitationData.centerId,
                centerName: invitationData.centerName,
                specialistCode: invitationData.code,
                status: 'ACTIVE',
                createdAt: new Date().toISOString()
            });

            // 3. Mark invitation as accepted if we have a token/code (Optional based on business logic)
            // ...

            if (onComplete) onComplete(userCred.user);
        } catch (err) {
            console.error("Specialist setup error:", err);
            setError(err.message || "Error al completar el registro.");
        } finally {
            setLoading(false);
        }
    };

    return React.createElement("div", { className: "min-h-screen bg-[#F8FAFC] flex flex-col items-center justify-center p-6" },
        React.createElement("div", { className: "w-full max-w-xl bg-white rounded-[3rem] shadow-2xl overflow-hidden border border-slate-100" },
            // Header
            React.createElement("div", { className: "p-10 pb-6 text-center" },
                React.createElement("div", { className: "w-20 h-20 bg-indigo-600 rounded-[2rem] flex items-center justify-center text-white mx-auto mb-6 shadow-xl shadow-indigo-200" }, React.createElement(Icons.Stethoscope, { size: 40 })),
                React.createElement("h2", { className: "text-3xl font-black text-slate-900 mb-2" }, "Bienvenido a NeuroHUB"),
                React.createElement("p", { className: "text-slate-500 font-medium" }, "Completa tu perfil como experto clínico"),
                
                // Info Box
                React.createElement("div", { className: "mt-8 p-6 bg-slate-50 rounded-2xl border border-slate-100 flex flex-col gap-3 text-left" },
                    React.createElement("div", { className: "flex justify-between items-center" },
                        React.createElement("span", { className: "text-[10px] font-black uppercase tracking-widest text-slate-400" }, "Centro Clínico"),
                        React.createElement("span", { className: "font-bold text-indigo-600" }, invitationData.centerName)
                    ),
                    React.createElement("div", { className: "flex justify-between items-center" },
                        React.createElement("span", { className: "text-[10px] font-black uppercase tracking-widest text-slate-400" }, "Tu Código"),
                        React.createElement("span", { className: "font-mono font-bold bg-white px-2 py-1 rounded border" }, invitationData.code)
                    ),
                    React.createElement("div", { className: "flex justify-between items-center border-t border-slate-200 pt-3" },
                        React.createElement("span", { className: "text-[10px] font-black uppercase tracking-widest text-slate-400" }, "Correo Electrónico"),
                        React.createElement("span", { className: "font-bold text-slate-700" }, invitationData.email)
                    )
                )
            ),

            // Form
            React.createElement("form", { onSubmit: handleSubmit, className: "p-10 pt-0 space-y-6" },
                // Name
                React.createElement("div", null,
                    React.createElement("label", { className: "block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2 ml-2" }, "Nombre Completo *"),
                    React.createElement("input", {
                        type: "text",
                        value: formData.name,
                        onChange: e => setFormData({...formData, name: e.target.value}),
                        className: `w-full p-6 bg-slate-50 border rounded-2xl outline-none focus:ring-8 focus:ring-indigo-600/5 transition-all font-bold ${errors.name ? 'border-red-500 bg-red-50' : 'border-slate-100 focus:border-indigo-600'}`
                    })
                ),

                // Phone
                React.createElement("div", null,
                    React.createElement("label", { className: "block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2 ml-2" }, "Teléfono de Contacto *"),
                    React.createElement("input", {
                        type: "text",
                        value: formData.phone,
                        onChange: e => setFormData({...formData, phone: e.target.value}),
                        className: `w-full p-6 bg-slate-50 border rounded-2xl outline-none focus:ring-8 focus:ring-indigo-600/5 transition-all font-bold ${errors.phone ? 'border-red-500 bg-red-50' : 'border-slate-100 focus:border-indigo-600'}`
                    })
                ),

                // Specialty
                React.createElement("div", null,
                    React.createElement("label", { className: "block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2 ml-2" }, "Especialidad Profesional (Opcional)"),
                    React.createElement("input", {
                        type: "text",
                        value: formData.specialty,
                        onChange: e => setFormData({...formData, specialty: e.target.value}),
                        placeholder: "Ej. Neuropsicología Clínica",
                        className: `w-full p-6 bg-slate-50 border border-slate-100 rounded-2xl outline-none focus:ring-8 focus:ring-indigo-600/5 focus:border-indigo-600 transition-all font-bold`
                    })
                ),

                // Passwords
                React.createElement("div", { className: "grid md:grid-cols-2 gap-6" },
                    React.createElement("div", null,
                        React.createElement("label", { className: "block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2 ml-2" }, "Contraseña *"),
                        React.createElement("input", {
                            type: "password",
                            value: formData.password,
                            onChange: e => setFormData({...formData, password: e.target.value}),
                            className: `w-full p-6 bg-slate-50 border rounded-2xl outline-none focus:ring-8 focus:ring-indigo-600/5 transition-all font-bold ${errors.password ? 'border-red-500 bg-red-50' : 'border-slate-100 focus:border-indigo-600'}`
                        })
                    ),
                    React.createElement("div", null,
                        React.createElement("label", { className: "block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2 ml-2" }, "Confirmar *"),
                        React.createElement("input", {
                            type: "password",
                            value: formData.confirmPassword,
                            onChange: e => setFormData({...formData, confirmPassword: e.target.value}),
                            className: `w-full p-6 bg-slate-50 border rounded-2xl outline-none focus:ring-8 focus:ring-indigo-600/5 transition-all font-bold ${errors.confirmPassword ? 'border-red-500 bg-red-50' : 'border-slate-100 focus:border-indigo-600'}`
                        })
                    )
                ),

                // Requirements
                React.createElement("div", { className: "p-6 bg-indigo-50/50 rounded-2xl border border-indigo-100" },
                    React.createElement("p", { className: "text-[10px] text-indigo-700 font-bold leading-relaxed" }, 
                        "REQUISITOS MÍNIMOS: 8 caracteres, 1 mayúscula, 1 minúscula, 1 símbolo especial (incluido el .) y 1 número."
                    )
                ),

                error ? React.createElement("div", { className: "p-6 bg-red-50 text-red-700 text-sm font-bold rounded-2xl border border-red-100 animate-shake" }, error) : null,

                // Actions
                React.createElement("div", { className: "flex gap-4 pt-4" },
                    React.createElement("button", {
                        type: "button",
                        onClick: onCancel,
                        className: "flex-1 p-6 text-slate-400 font-bold hover:text-slate-600 transition-colors"
                    }, "Cancelar"),
                    React.createElement("button", {
                        type: "submit",
                        disabled: loading,
                        className: `flex-1 p-6 bg-indigo-600 text-white font-black rounded-2xl shadow-xl shadow-indigo-200 hover:bg-slate-900 transition-all transform hover:-translate-y-1 active:scale-95 disabled:opacity-50 flex items-center justify-center gap-3`
                    }, 
                        loading ? React.createElement(Icons.Loader2, { className: "animate-spin" }) : "Completar Registro",
                        !loading && React.createElement(Icons.ArrowRight, { size: 20 })
                    )
                )
            ),

            // Footer
            React.createElement("div", { className: "p-8 bg-slate-50 border-t border-slate-100 text-center" },
                React.createElement("p", { className: "text-[11px] text-slate-400 font-medium" }, 
                    "Al registrarte, aceptas nuestros ",
                    React.createElement("button", { type: "button", onClick: () => onOpenLegal('legal'), className: "text-indigo-600 font-bold hover:underline" }, "Términos y Condiciones"),
                    " y ",
                    React.createElement("button", { type: "button", onClick: () => onOpenLegal('privacy'), className: "text-indigo-600 font-bold hover:underline" }, "Políticas de Privacidad")
                )
            )
        )
    );
};