// =============================================================
// auth.js — Login y Registro
// Archivo: js/auth.js  (enlázalo en index.html antes de </body>)
// =============================================================

//const API_URL = 'http://localhost:8081/contratandogt-api/public/api';

const API_URL = 'http://localhost:8081/api';

// =============================================================
// REGISTRO
// =============================================================
document.addEventListener('DOMContentLoaded', () => {

    // ── Formulario de REGISTRO ────────────────────────────────
    const formRegistro = document.querySelector('#registroModal form');

    formRegistro.addEventListener('submit', async (e) => {
        e.preventDefault(); // evitar que recargue la página

        // Leer los campos del formulario
        const nombre    = formRegistro.querySelector('input[placeholder="Nombre completo"]').value.trim();
        const apellidos = formRegistro.querySelector('input[placeholder="Apellidos completos"]').value.trim();
        const email     = formRegistro.querySelector('input[type="email"]').value.trim();
        const password  = formRegistro.querySelector('input[type="password"]').value;
        const profesion = formRegistro.querySelector('select[aria-label="Puesto deseado"]').value;
        const direccion = formRegistro.querySelector('select[aria-label="Selecciona tu departamento"]').value;

        // Validación básica en el frontend
        if (!nombre || !apellidos || !email || !password) {
            mostrarAlerta(formRegistro, 'Por favor completa todos los campos.', 'danger');
            return;
        }

        // Unir nombre y apellidos en un solo campo
        const nombreCompleto = `${nombre} ${apellidos}`;

        try {
            const respuesta = await fetch(`${API_URL}/usuarios/registro`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    nombre:   nombreCompleto,
                    email:    email,
                    password: password,
                    profesion: profesion,
                    direccion: direccion
                })
            });

            const data = await respuesta.json();

            if (respuesta.ok) {
                mostrarAlerta(formRegistro, '¡Cuenta creada correctamente! Ya puedes iniciar sesión.', 'success');
                formRegistro.reset();

                // Cerrar el modal de registro y abrir el de login después de 1.5s
                setTimeout(() => {
                    bootstrap.Modal.getInstance(document.getElementById('registroModal')).hide();
                    new bootstrap.Modal(document.getElementById('loginModal')).show();
                }, 1500);

            } else {
                mostrarAlerta(formRegistro, data.messages?.error || 'Error al crear la cuenta.', 'danger');
            }

        } catch (error) {
            mostrarAlerta(formRegistro, 'No se pudo conectar con el servidor.', 'danger');
            console.error(error);
        }
    });


    // ── Formulario de LOGIN ───────────────────────────────────
    const formLogin = document.querySelector('#loginModal form');

    formLogin.addEventListener('submit', async (e) => {
        e.preventDefault();

        const email    = formLogin.querySelector('input[type="email"]').value.trim();
        const password = formLogin.querySelector('input[type="password"]').value;

        if (!email || !password) {
            mostrarAlerta(formLogin, 'Ingresa tu correo y contraseña.', 'danger');
            return;
        }

        try {
            const respuesta = await fetch(`${API_URL}/usuarios/login`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ email, password })
            });

            const data = await respuesta.json();

            if (respuesta.ok) {
                // Guardar datos del usuario en localStorage para usarlos en toda la app
                localStorage.setItem('usuario', JSON.stringify(data.usuario));

                mostrarAlerta(formLogin, `¡Bienvenido, ${data.usuario.nombre}!`, 'success');

                // Cerrar modal y actualizar navbar después de 1s
                setTimeout(() => {
                    bootstrap.Modal.getInstance(document.getElementById('loginModal')).hide();
                    actualizarNavbar(data.usuario);
                }, 1000);

            } else {
                mostrarAlerta(formLogin, 'Correo o contraseña incorrectos.', 'danger');
            }

        } catch (error) {
            mostrarAlerta(formLogin, 'No se pudo conectar con el servidor.', 'danger');
            console.error(error);
        }
    });


    // ── Al cargar la página, verificar si ya hay sesión ──────
    const usuarioGuardado = localStorage.getItem('usuario');
    if (usuarioGuardado) {
        actualizarNavbar(JSON.parse(usuarioGuardado));
    }

});


// =============================================================
// FUNCIONES DE APOYO
// =============================================================

// Muestra una alerta dentro del formulario
function mostrarAlerta(formulario, mensaje, tipo) {
    // Eliminar alerta anterior si existe
    const alertaAnterior = formulario.querySelector('.alert');
    if (alertaAnterior) alertaAnterior.remove();

    const alerta = document.createElement('div');
    alerta.className = `alert alert-${tipo} mt-3`;
    alerta.textContent = mensaje;
    formulario.appendChild(alerta);

    // Auto-desaparecer después de 4 segundos
    setTimeout(() => alerta.remove(), 4000);
}

// Actualiza el navbar cuando el usuario inicia sesión
function actualizarNavbar(usuario) {
    const btnLogin     = document.querySelector('[data-bs-target="#loginModal"]');
    const btnRegistro  = document.querySelector('[data-bs-target="#registroModal"]');

    if (btnLogin && btnRegistro) {
        // Reemplazar los botones por el nombre del usuario y un botón de cerrar sesión
        btnLogin.replaceWith(crearBotonUsuario(usuario));
        btnRegistro.remove();
    }
}

// Crea el botón de usuario logueado en el navbar
function crearBotonUsuario(usuario) {
    const contenedor = document.createElement('div');
    contenedor.className = 'd-flex align-items-center gap-2';
    contenedor.innerHTML = `
        <span class="fw-bold text-primary">
            <i class="bi bi-person-circle me-1"></i>${usuario.nombre.split(' ')[0]}
        </span>
        <button class="btn btn-outline-danger btn-sm" id="btnCerrarSesion">
            Cerrar sesión
        </button>
    `;

    // Evento para cerrar sesión
    contenedor.querySelector('#btnCerrarSesion').addEventListener('click', () => {
        localStorage.removeItem('usuario');
        location.reload();
    });

    return contenedor;
}
