document.addEventListener("DOMContentLoaded", () => {

    if (serverErrors.length > 0) mostrarErrores(serverErrors);
    if (serverSuccess.length > 0) mostrarSuccess(serverSuccess);

    const form = document.getElementById("form-crear-servicio");
    if (!form) return;

    // Funciones utilitarias

    function isEmpty(value) {
        return !value || value.trim() === '';
    }

    function isValidEmail(value) {
        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
    }

    // Submit

    form.addEventListener("submit", (e) => {

        let errores = [];

        const descripcionEquipo = form.querySelector("input[name='descripcion_equipo']");
        const contraseniaEquipo = form.querySelector("input[name='contrasenia_equipo']");
        const cuenta = form.querySelector("input[name='cuenta']");
        const contraseniaCuenta = form.querySelector("input[name='contrasenia_cuenta']");
        const descripcionProblema = form.querySelector("textarea[name='descripcion_problema']");
        const observacion = form.querySelector("textarea[name='observacion']");

        // Limpiar estados previos

        form.querySelectorAll(".is-invalid").forEach(el =>
            el.classList.remove("is-invalid")
        );

        // DESCRIPCIÓN DEL EQUIPO

        if (descripcionEquipo) {
            if (isEmpty(descripcionEquipo.value)) {
                errores.push("La descripción del equipo es obligatoria.");
                descripcionEquipo.classList.add("is-invalid");
            } else if (descripcionEquipo.value.length > 100) {
                errores.push("La descripción del equipo es demasiado larga.");
                descripcionEquipo.classList.add("is-invalid");
            }
        }

        // DESCRIPCIÓN DEL PROBLEMA

        if (descripcionProblema) {
            if (isEmpty(descripcionProblema.value)) {
                errores.push("Debe describir el problema.");
                descripcionProblema.classList.add("is-invalid");
            } else if (descripcionProblema.value.length > 2000) {
                errores.push("La descripción del problema es demasiado larga.");
                descripcionProblema.classList.add("is-invalid");
            }
        }

        // CONTRASENIA EQUIPO

        if (contraseniaEquipo) {
            if (contraseniaEquipo.value.length > 100) {
                errores.push("Contraseña demasiado larga.");
                contraseniaEquipo.classList.add("is-invalid");
            }

            if (!isEmpty(contraseniaEquipo.value) && isEmpty(descripcionEquipo.value)) {
                errores.push("Debe indicar el equipo si ingresa contraseña.");
                descripcionEquipo.classList.add("is-invalid");
            }
        }

        // CUENTA

        if (cuenta) {
            if (cuenta.value.length > 100) {
                errores.push("Cuenta demasiado larga.");
                cuenta.classList.add("is-invalid");
            }

            if (!isEmpty(cuenta.value) && !isValidEmail(cuenta.value)) {
                errores.push("El email de la cuenta no es válido.");
                cuenta.classList.add("is-invalid");
            }
        }

        // CONTRASENIA CUENTA

        if (contraseniaCuenta) {
            if (contraseniaCuenta.value.length > 100) {
                errores.push("Contraseña de cuenta demasiado larga.");
                contraseniaCuenta.classList.add("is-invalid");
            }

            if (!isEmpty(contraseniaCuenta.value) && isEmpty(cuenta.value)) {
                errores.push("Debe indicar la cuenta si ingresa contraseña.");
                cuenta.classList.add("is-invalid");
            }
        }

        // OBSERVACIÓN

        if (observacion) {
            if (observacion.value.length > 500) {
                errores.push("La descripción de la observación es demasiada larga.");
                observacion.classList.add("is-invalid");
            }
        }

        // Resultado

        if (errores.length > 0) {
            e.preventDefault();
            mostrarErrores(errores);
        }
    });

        // FUNCIÓN PARA MOSTRAR ERRORES

    function mostrarErrores(errores) {

        // Buscar si hay un toast previo

        const viejo = document.getElementById("toastErrores");

        // Si existe, se elimina (evita duplicados)

        if (viejo) viejo.remove();

        // Crea el contenedor del toast

        const toast = document.createElement("div");

        // Se le asigna ID para identificarlo

        toast.id = "toastErrores";

        // Clases de estilo (Bootstrap + CSS)

        toast.className = "toast-flotante alert alert-danger";

        // Inserta el contenido dinámico (lista de errores)

        toast.innerHTML = `
            <strong>Se encontraron errores:</strong>
            <ul class="mb-0 mt-2">
                ${errores.map(e => `<li>${e}</li>`).join("")} <!-- convierte array a <li> -->
            </ul>
        `;

        // Agrega el toast al body (lo hace visible)

        document.body.appendChild(toast);

        // Auto-cierre
        
        setTimeout(() => {

            // Agrega clase para animación de salida (CSS)

            toast.classList.add("toast-out");

            // Elimina el elemento después de la animación

            setTimeout(() => {
                toast.remove(); // Elimina el DOM
            }, 350);

        }, 5000); // Visible durante 5 segundos
    }
    });

    // FUNCIÓN PARA MOSTRAR SUCCESS

    function mostrarSuccess(mensajes) {

        // Elimina toast previo de éxito si existe

        const viejo = document.getElementById("toastSuccess");
        if (viejo) viejo.remove();

        // Crea el contenedor del toast

        const toast = document.createElement("div");

        // Se le asigna ID único

        toast.id = "toastSuccess";

        // Estilo

        toast.className = "toast-flotante alert alert-success";

        // Inserta mensajes dinámicos

        toast.innerHTML = `
            <strong>Mensajes de éxito:</strong>
            <ul class="mb-0 mt-2">
                ${mensajes.map(m => `<li>${m}</li>`).join("")}
            </ul>
        `;

        // Agrega al DOM

        document.body.appendChild(toast);

        // Auto-cierre a los 5 segundos

        setTimeout(() => {

            // Animación de salida

            toast.classList.add("toast-out");

            // Eliminación final

            setTimeout(() => {
                toast.remove();
            }, 350);

        }, 5000);
    }