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

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

    const form = document.getElementById("form-crear-producto") || document.getElementById("form-editar-producto");
    if (!form) return;

    // Desactivar campo descuento si el campo tipo es "servicio"

    const selectTipo = form.querySelector("[name='tipo']");
    const inputDescuento = form.querySelector("input[name='descuento']");

    const TIPO_SERVICIO_ID = "2"; // ID de tipo "servicio"

    let descuentoPrevio = '';

    function toggleDescuento() {
        if (!selectTipo || !inputDescuento) return;

        if (selectTipo.value === TIPO_SERVICIO_ID) {

            // Guardar valor actual antes de limpiar
            descuentoPrevio = inputDescuento.value;

            inputDescuento.value = '';
            inputDescuento.readOnly = true;
            inputDescuento.classList.add('campo-readonly');

        } else {

            inputDescuento.readOnly = false;
            inputDescuento.classList.remove('campo-readonly');

            // Restaurar si había algo antes
            if (descuentoPrevio !== '') {
                inputDescuento.value = descuentoPrevio;
            }
        }
    }

    // Evento change

    if (selectTipo) {
        selectTipo.addEventListener("change", toggleDescuento);
    }

    // Ejecutar al cargar

    toggleDescuento();

    // Utilidades

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

    function isValidMarca(value) {
        return /^[A-Za-zÁÉÍÓÚÑáéíóúñ0-9]+(?: [A-Za-zÁÉÍÓÚÑáéíóúñ0-9]+)*$/.test(value);
    }

    function isValidModelo(value) {
        return /^[A-Za-zÁÉÍÓÚÑáéíóúñ0-9.\-]+(?: [A-Za-zÁÉÍÓÚÑáéíóúñ0-9.\-]+)*$/.test(value);
    }

    function isValidNumero(value) {
        return /^\d{1,3}(\.\d{1,2})?$/.test(value);
    }

    // Submit

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

        let errores = [];

        const marca = form.querySelector("input[name='marca']");
        const modelo = form.querySelector("input[name='modelo']");
        const descuento = form.querySelector("input[name='descuento']");
        const categoria = form.querySelector("[name='categoria']");
        const tipo = form.querySelector("[name='tipo']");

        // Limpiar errores previos

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

        // MARCA

        if (marca) {
            if (isEmpty(marca.value)) {
                errores.push("La marca es obligatoria.");
                marca.classList.add("is-invalid");
            } else if (!isValidMarca(marca.value)) {
                errores.push("La marca solo puede contener letras, números y espacios.");
                marca.classList.add("is-invalid");
            } else if (marca.value.length < 2) {
                errores.push("La marca debe tener al menos 2 caracteres.");
                marca.classList.add("is-invalid");
            } else if (marca.value.length > 50) {
                errores.push("La marca no puede superar los 50 caracteres.");
                marca.classList.add("is-invalid");
            }
        }

        // MODELO

        if (modelo) {
            if (isEmpty(modelo.value)) {
                errores.push("El modelo es obligatorio.");
                modelo.classList.add("is-invalid");
            } else if (!isValidModelo(modelo.value)) {
                errores.push("El modelo solo puede contener letras, números, espacios, guiones y puntos.");
                modelo.classList.add("is-invalid");
            } else if (modelo.value.length < 2) {
                errores.push("El modelo debe tener al menos 2 caracteres.");
                modelo.classList.add("is-invalid");
            } else if (modelo.value.length > 50) {
                errores.push("El modelo no puede superar los 50 caracteres.");
                modelo.classList.add("is-invalid");
            }
        }

        // DESCUENTO

        if (descuento && tipo && tipo.value !== TIPO_SERVICIO_ID) {

            const value = descuento.value.trim();

            if (value !== '') {

                if (!isValidNumero(value)) {
                    errores.push("El descuento debe ser un número válido con hasta 2 decimales.");
                    descuento.classList.add("is-invalid");
                } else {
                    const num = Number(value);

                    if (num < 0 || num > 100) {
                        errores.push("El descuento debe estar entre 0 y 100.");
                        descuento.classList.add("is-invalid");
                    }
                }
            }
        }

        // CATEGORIA

        if (categoria) {
            if (isEmpty(categoria.value)) {
                errores.push("La categoría es obligatoria.");
                categoria.classList.add("is-invalid");
            }
        }

        // TIPO

        if (tipo) {
            if (isEmpty(tipo.value)) {
                errores.push("El tipo es obligatorio.");
                tipo.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);
    }