// Carga las parroquias disponibles al iniciar la página
async function cargarParroquias() {
    try {
        const response = await fetch(`${API_BASE}/parroquias`);
        if (!response.ok) return;
        const parroquias = await response.json();

        const selectParroquia = document.getElementById("parroquia");
        parroquias.forEach(p => {
            const option = document.createElement("option");
            option.value = p.id;
            option.textContent = p.nombre;
            selectParroquia.appendChild(option);
        });
    } catch (e) {
        // Si no hay conexión, el selector queda vacío pero el formulario sigue funcional
    }
}

// Carga los grupos de la parroquia seleccionada
async function cargarGrupos(parroquiaId) {
    const selectGrupo = document.getElementById("grupo");
    selectGrupo.innerHTML = '<option value="">-- Selecciona un grupo --</option>';

    if (!parroquiaId) return;

    try {
        const response = await fetch(`${API_BASE}/parroquias/${parroquiaId}/grupos`);
        if (!response.ok) return;
        const grupos = await response.json();

        grupos.forEach(g => {
            const option = document.createElement("option");
            option.value = g.id;
            option.textContent = g.nombre;
            selectGrupo.appendChild(option);
        });
    } catch (e) {
        // Sin conexión: el selector queda vacío
    }
}

// Muestra u oculta los campos de parroquia/grupo según el tipo de usuario
function actualizarFormularioPorTipo() {
    const tipo = document.getElementById("tipo-usuario").value;
    const bloqueParroquia = document.getElementById("bloque-parroquia");
    const bloqueGrupo = document.getElementById("bloque-grupo");

    if (tipo === "individual") {
        bloqueParroquia.style.display = "none";
        bloqueGrupo.style.display = "none";
    } else if (tipo === "parroquia") {
        bloqueParroquia.style.display = "block";
        bloqueGrupo.style.display = "none";
    } else if (tipo === "grupo") {
        bloqueParroquia.style.display = "block";
        bloqueGrupo.style.display = "block";
    }
}

async function registrar() {
    const nombre = document.getElementById("nombre").value.trim();
    const email = document.getElementById("email").value.trim();
    const password = document.getElementById("password").value.trim();
    const tipo = document.getElementById("tipo-usuario").value;
    const msg = document.getElementById("mensaje");

    msg.textContent = "";
    msg.className = "msg";

    if (!nombre || !email || !password || !tipo) {
        msg.textContent = "Por favor, completa todos los campos obligatorios.";
        msg.classList.add("error");
        return;
    }

    const parroquiaId = document.getElementById("parroquia")?.value || null;
    const grupoId = document.getElementById("grupo")?.value || null;

    if (tipo === "parroquia" && !parroquiaId) {
        msg.textContent = "Selecciona una parroquia.";
        msg.classList.add("error");
        return;
    }
    if (tipo === "grupo" && (!parroquiaId || !grupoId)) {
        msg.textContent = "Selecciona parroquia y grupo.";
        msg.classList.add("error");
        return;
    }

    const body = { nombre, email, password, tipoUsuario: tipo };
    if (parroquiaId) body.parroquiaId = parseInt(parroquiaId);
    if (grupoId) body.grupoId = parseInt(grupoId);

    try {
        const response = await fetch(`${API_BASE}/auth/register`, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(body)
        });

        if (response.ok) {
            msg.textContent = "Cuenta creada correctamente. Ya puedes iniciar sesión.";
            msg.classList.add("success");
            setTimeout(() => { window.location.href = "login.html"; }, 2000);
        } else {
            const error = await response.text();
            msg.textContent = "Error: " + error;
            msg.classList.add("error");
        }

    } catch (e) {
        msg.textContent = "No se pudo conectar con el servidor.";
        msg.classList.add("error");
    }
}

// Inicialización
document.getElementById("tipo-usuario").addEventListener("change", actualizarFormularioPorTipo);
document.getElementById("parroquia").addEventListener("change", e => cargarGrupos(e.target.value));

cargarParroquias();
actualizarFormularioPorTipo();