document.addEventListener("DOMContentLoaded", () => {
    let productosEnCarrito = JSON.parse(localStorage.getItem("productos-en-carrito")) || [];

    const BASE_URL = `${window.location.origin}${window.location.pathname.split('/pedidos2/')[0]}`;
    const API_EMPRESA = `${BASE_URL}/pedidos2/RESTAURANTE/Database/DataEmpresa.php`;
    const LOGO_URL_BASE = `${BASE_URL}/facturacion/public/images/`;
    const Img_URL = `${BASE_URL}/facturacion/public/images/productos/`;
    const DEFAULT_LOGO_URL = `${LOGO_URL_BASE}logoprint.png`;
    const DEFAULT_PRODUCTO_IMG = `${BASE_URL}/pedidos2/RESTAURANTE/img/imagen2.jpg`;

    const logoNav = document.getElementById("logo-nav-carrito");
    const nombreNav = document.getElementById("nombre-nav-carrito");

    const contCarritoVacio = document.querySelector("#carrito-vacio");
    const contCarritoProductos = document.querySelector("#carrito-productos");
    const contCarritoAcciones = document.querySelector("#carrito-acciones");
    const contCarritoComprado = document.querySelector("#carrito-comprado");
    const botonVaciar = document.querySelector("#carrito-acciones-vaciar");
    const contTotal = document.querySelector("#total");
    const botonComprar = document.querySelector("#carrito-acciones-comprar");

    function aplicarLogoEmpresa(imgElement, textElement, logoUrl, nombreComercial) {
        if (!imgElement) return;
        imgElement.onerror = () => {
            if (imgElement.src !== DEFAULT_LOGO_URL) {
                imgElement.src = DEFAULT_LOGO_URL;
                return;
            }
            imgElement.style.display = "none";
            if (textElement) {
                textElement.innerText = nombreComercial;
                textElement.style.display = "";
            }
        };
        imgElement.onload = () => {
            imgElement.style.display = "inline-block";
            if (textElement) textElement.style.display = "none";
        };
        imgElement.src = logoUrl;
    }

    async function cargarDatosEmpresa() {
        try {
            const response = await fetch(API_EMPRESA);
            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);

            const data = await response.json();
            if (data && data.length > 0) {
                const empresa = data[0];
                const nombreComercial = empresa.nombre_comercial || "Mi Tienda";
                document.title = `Carrito de Compras - ${nombreComercial}`;

                const logoUrl = empresa.logo ? `${LOGO_URL_BASE}${empresa.logo}` : DEFAULT_LOGO_URL;
                aplicarLogoEmpresa(logoNav, nombreNav, logoUrl, nombreComercial);
            }
        } catch (error) {
            console.error("Error al cargar datos de empresa en carrito:", error);
            if (nombreNav) nombreNav.innerText = "Mi Tienda";
        }
    }

    function cargarProductosCarrito() {
        if (productosEnCarrito && productosEnCarrito.length > 0) {
            contCarritoVacio.classList.add("disabled");
            contCarritoProductos.classList.remove("disabled");
            contCarritoAcciones.classList.remove("disabled");
            contCarritoComprado.classList.add("disabled");

            contCarritoProductos.innerHTML = "";

            productosEnCarrito.forEach((producto) => {
                const productoId = producto.id_pres ?? producto.id;
                const div = document.createElement("div");
                div.classList.add("carrito-producto");
                div.innerHTML = `
                    <img class="carrito-producto-imagen" src="${Img_URL + producto.archivo_imagen}" alt="${producto.presentacion}" onerror="this.onerror=null;this.src='${DEFAULT_PRODUCTO_IMG}'">
                    <div class="carrito-producto-titulo">
                        <small>Producto</small>
                        <h5 class="mb-0">${producto.presentacion}</h5>
                    </div>
                    <div class="carrito-producto-cantidad">
                        <small>Cantidad</small>
                        <p class="mb-0">${producto.cantidad}</p>
                    </div>
                    <div class="carrito-producto-precio">
                        <small>Precio</small>
                        <p class="mb-0">S/ ${parseFloat(producto.precio).toFixed(2)}</p>
                    </div>
                    <div class="carrito-producto-subtotal">
                        <small>Subtotal</small>
                        <p class="mb-0 fw-bold">S/ ${(producto.precio * producto.cantidad).toFixed(2)}</p>
                    </div>
                    <button class="carrito-producto-eliminar btn btn-sm btn-outline-danger" data-id="${productoId}"><i class="bi bi-trash-fill"></i></button>
                `;
                contCarritoProductos.append(div);
            });
        } else {
            contCarritoVacio.classList.remove("disabled");
            contCarritoProductos.classList.add("disabled");
            contCarritoAcciones.classList.add("disabled");
            contCarritoComprado.classList.add("disabled");
        }

        actualizarBotonesEliminar();
        actualizarTotal();
    }

    function actualizarBotonesEliminar() {
        const botonesEliminar = document.querySelectorAll(".carrito-producto-eliminar");
        botonesEliminar.forEach((boton) => {
            boton.addEventListener("click", eliminarDelCarrito);
        });
    }

    function eliminarDelCarrito(e) {
        Toastify({ text: "Producto eliminado", duration: 2000, style: { background: "red" } }).showToast();
        const idBoton = e.currentTarget.dataset.id;
        const index = productosEnCarrito.findIndex((producto) => String(producto.id_pres ?? producto.id) === String(idBoton));

        if (index > -1) {
            productosEnCarrito.splice(index, 1);
            guardarYRecargar();
        }
    }

    function vaciarCarrito() {
        Swal.fire({
            title: "Estas seguro?",
            text: `Se van a borrar ${productosEnCarrito.reduce((acc, p) => acc + p.cantidad, 0)} productos.`,
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Si, vaciar",
            cancelButtonText: "No",
        }).then((result) => {
            if (result.isConfirmed) {
                productosEnCarrito = [];
                guardarYRecargar();
                Swal.fire("Vaciado", "Tu carrito ha sido vaciado.", "success");
            }
        });
    }

    function actualizarTotal() {
        const totalCalculado = productosEnCarrito.reduce((acc, p) => acc + (p.precio * p.cantidad), 0);
        contTotal.innerText = `S/ ${totalCalculado.toFixed(2)}`;
    }

    function comprarCarrito() {
        productosEnCarrito = [];
        guardarYRecargar();
        contCarritoComprado.classList.remove("disabled");
        contCarritoVacio.classList.add("disabled");
        contCarritoProductos.classList.add("disabled");
        contCarritoAcciones.classList.add("disabled");
    }

    function guardarYRecargar() {
        localStorage.setItem("productos-en-carrito", JSON.stringify(productosEnCarrito));
        cargarProductosCarrito();
    }

    botonVaciar?.addEventListener("click", vaciarCarrito);
    botonComprar?.addEventListener("click", comprarCarrito);

    cargarDatosEmpresa();
    cargarProductosCarrito();
});
