document.addEventListener('DOMContentLoaded', function() {
    let selectedProductId = null;
    let activePresentations = [];
    let baseUnitWacCost = 0.0;
    let searchDebounceTimeout = null;
    let currentHistoryPage = 1;
    let globalPresentations = []; // Global system presentations

    // DOM Elements
    const sucursalSelect = document.getElementById('sucursal_id');
    const usuarioSelect = document.getElementById('usuario_id');
    const productoSearch = document.getElementById('producto_search');
    const productoIdInput = document.getElementById('producto_id');
    const autocompleteResults = document.getElementById('autocompleteResults');
    const presentacionSelect = document.getElementById('presentacion_id');
    const cantidadInput = document.getElementById('cantidad');
    const costoInput = document.getElementById('costo_unitario');
    const tipoStockSelect = document.getElementById('tipo_stock');
    const btnSubmit = document.getElementById('btnSubmit');
    const form = document.getElementById('formConteoFisico');
    const fechaVencimientoInput = document.getElementById('fecha_vencimiento');
    
    const infoCalculoBox = document.getElementById('infoCalculoBox');
    const calcEquivalencia = document.getElementById('calcEquivalencia');
    const calcCostoBase = document.getElementById('calcCostoBase');
    const calcTotalCompra = document.getElementById('calcTotalCompra');
    
    const historialBody = document.getElementById('historialBody');
    const historialSucursalNombre = document.getElementById('historialSucursalNombre');
    const paginationInfoHistorial = document.getElementById('paginationInfoHistorial');
    const paginationControlsHistorial = document.getElementById('paginationControlsHistorial');

    // Load initial metadata
    fetchMetadata();

    function fetchMetadata() {
        fetch('../conteo_fisico/api/get_metadata.php')
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    // Populate sucursales
                    sucursalSelect.innerHTML = '<option value="">-- Seleccione Sucursal --</option>';
                    data.data.sucursales.forEach(suc => {
                        const opt = document.createElement('option');
                        opt.value = suc.id;
                        opt.textContent = suc.nombre;
                        sucursalSelect.appendChild(opt);
                    });

                    // Save global presentations
                    globalPresentations = data.data.presentaciones || [];

                    // Populate users
                    usuarioSelect.innerHTML = '<option value="">-- Seleccione Colaborador --</option>';
                    data.data.usuarios.forEach(u => {
                        const opt = document.createElement('option');
                        opt.value = u.id;
                        opt.textContent = u.nombre || u.usuario;
                        usuarioSelect.appendChild(opt);
                    });

                    // Load saved values from localStorage or global branch filter
                    const activeSuc = typeof getSucursalId === 'function' ? getSucursalId() : 0;
                    const savedUsuario = localStorage.getItem('conteo_usuario_id');
                    
                    if (activeSuc > 0) {
                        sucursalSelect.value = activeSuc;
                        sucursalSelect.disabled = true;
                    } else {
                        sucursalSelect.disabled = false;
                        const savedSucursal = localStorage.getItem('conteo_sucursal_id');
                        if (savedSucursal && sucursalSelect.querySelector(`option[value="${savedSucursal}"]`)) {
                            sucursalSelect.value = savedSucursal;
                        }
                    }
                    if (savedUsuario && usuarioSelect.querySelector(`option[value="${savedUsuario}"]`)) {
                        usuarioSelect.value = savedUsuario;
                    }

                    // Initial validation and history loading
                    actualizarHistorial();
                    validarSucursalYUsuario();
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error de servidor',
                        text: 'No se pudieron cargar los datos de configuración inicial.',
                        background: 'var(--surface)',
                        confirmButtonColor: 'var(--accent-color)'
                    });
                }
            })
            .catch(err => {
                console.error('Error al cargar metadatos:', err);
                Swal.fire({
                    icon: 'error',
                    title: 'Error de Red',
                    text: 'Ocurrió un error al comunicarse con el servidor.',
                    background: 'var(--surface)',
                    confirmButtonColor: 'var(--accent-color)'
                });
            });
    }

    function validarSucursalYUsuario() {
        const sucVal = sucursalSelect.value;
        const userVal = usuarioSelect.value;
        if (sucVal !== "" && userVal !== "") {
            productoSearch.disabled = false;
            tipoStockSelect.disabled = false;
        } else {
            productoSearch.disabled = true;
            tipoStockSelect.disabled = true;
            productoSearch.value = '';
            resetFormProductFields();
        }
    }

    // Events
    sucursalSelect.addEventListener('change', function() {
        localStorage.setItem('conteo_sucursal_id', this.value);
        currentHistoryPage = 1;
        actualizarHistorial();
        validarSucursalYUsuario();
    });

    usuarioSelect.addEventListener('change', function() {
        localStorage.setItem('conteo_usuario_id', this.value);
        validarSucursalYUsuario();
    });

    // Intelligent product search (Autocomplete)
    productoSearch.addEventListener('input', function() {
        clearTimeout(searchDebounceTimeout);
        const query = this.value.trim();
        const sucursalId = sucursalSelect.value;

        if (query.length < 2) {
            ocultarAutocomplete();
            resetFormProductFields();
            return;
        }

        searchDebounceTimeout = setTimeout(() => {
            fetch(`../conteo_fisico/api/buscar_productos.php?query=${encodeURIComponent(query)}&sucursal_id=${sucursalId}`)
                .then(res => res.json())
                .then(data => {
                    if (data.success && data.data && data.data.productos && data.data.productos.length > 0) {
                        mostrarAutocomplete(data.data.productos);
                    } else {
                        mostrarNoResultados();
                    }
                })
                .catch(err => {
                    console.error("Error al buscar productos:", err);
                });
        }, 300);
    });

    // Hide autocomplete when clicking outside
    document.addEventListener('click', function(e) {
        if (!productoSearch.contains(e.target) && !autocompleteResults.contains(e.target)) {
            ocultarAutocomplete();
        }
    });

    // On presentation change
    presentacionSelect.addEventListener('change', function() {
        actualizarValoresCalculados();
    });

    // On quantity input
    cantidadInput.addEventListener('input', actualizarValoresCalculados);

    // Form submission
    form.addEventListener('submit', function(e) {
        e.preventDefault();

        const sucursalId = parseInt(sucursalSelect.value);
        const usuarioId = parseInt(usuarioSelect.value);
        const productoId = parseInt(productoIdInput.value);
        const presentacionId = parseInt(presentacionSelect.value);
        const cantidad = parseFloat(cantidadInput.value);
        const costoUnitario = parseFloat(costoInput.value);
        const tipoStock = tipoStockSelect.value;

        const selectedOption = presentacionSelect.options[presentacionSelect.selectedIndex];
        if (!selectedOption) return;
        const factor = parseInt(selectedOption.getAttribute('data-factor'));

        if (!sucursalId || !usuarioId || !productoId || !presentacionId || isNaN(cantidad) || cantidad <= 0 || isNaN(costoUnitario) || costoUnitario < 0) {
            Swal.fire({
                icon: 'warning',
                title: 'Campos incompletos',
                text: 'Por favor complete todos los datos requeridos con valores válidos.',
                confirmButtonColor: 'var(--accent-color)',
                background: 'var(--surface)'
            });
            return;
        }

        // Confirm insertion
        Swal.fire({
            title: '¿Confirmar registro?',
            text: `Se ingresarán ${cantidad * factor} unidades base en la sucursal seleccionada.`,
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Sí, registrar',
            cancelButtonText: 'Cancelar',
            confirmButtonColor: 'var(--accent-color)',
            cancelButtonColor: 'var(--danger)',
            background: 'var(--surface)'
        }).then((result) => {
            if (result.isConfirmed) {
                // Post to API
                const payload = {
                    sucursal_id: sucursalId,
                    usuario_id: usuarioId,
                    producto_id: productoId,
                    presentacion_id: presentacionId,
                    factor_conversion: factor,
                    cantidad: cantidad,
                    costo_unitario: costoUnitario,
                    tipo_stock: tipoStock,
                    fecha_vencimiento: fechaVencimientoInput.value || null
                };

                fetch('../conteo_fisico/api/registrar_conteo.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload)
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire({
                            icon: 'success',
                            title: '¡Ingreso Exitoso!',
                            text: `Se agregaron correctamente ${data.data.base_qty} unidades base al stock.`,
                            confirmButtonColor: 'var(--accent-color)',
                            background: 'var(--surface)'
                        });
                        
                        // Clear product fields
                        productoSearch.value = '';
                        resetFormProductFields();
                        
                        // Refresh history
                        currentHistoryPage = 1;
                        actualizarHistorial();
                    } else {
                        throw new Error(data.message || 'Error desconocido');
                    }
                })
                .catch(err => {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error de inserción',
                        text: err.message || 'Ocurrió un error al guardar el registro en el servidor.',
                        confirmButtonColor: 'var(--accent-color)',
                        background: 'var(--surface)'
                    });
                });
            }
        });
    });

    // Helper functions
    function mostrarAutocomplete(productos) {
        autocompleteResults.innerHTML = '';
        productos.forEach(p => {
            const div = document.createElement('div');
            div.className = 'autocomplete-item';
            div.innerHTML = `
                <div class="autocomplete-item-title">${escapeHTML(p.nombre)}</div>
                <div class="autocomplete-item-meta">
                    <span><strong>Código:</strong> ${escapeHTML(p.codigo || 'S/C')}</span>
                    <span><strong>Barra:</strong> ${escapeHTML(p.codigo_barra || 'S/B')}</span>
                    <span><strong>Lab:</strong> ${escapeHTML(p.laboratorio)}</span>
                    <span style="color:#22c55e;"><strong>Stock local:</strong> ${parseInt(p.stock)} u.</span>
                </div>
            `;
            div.addEventListener('click', function() {
                seleccionarProducto(p);
            });
            autocompleteResults.appendChild(div);
        });
        autocompleteResults.style.display = 'block';
    }

    function mostrarNoResultados() {
        autocompleteResults.innerHTML = '<div class="no-results">No se encontraron productos coincidentes</div>';
        autocompleteResults.style.display = 'block';
    }

    function ocultarAutocomplete() {
        autocompleteResults.style.display = 'none';
        autocompleteResults.innerHTML = '';
    }

    function seleccionarProducto(producto) {
        productoSearch.value = producto.nombre;
        productoIdInput.value = producto.id;
        selectedProductId = producto.id;
        
        // Base unit cost
        baseUnitWacCost = parseFloat(producto.costos.unidad || 0);

        ocultarAutocomplete();

        // Load presentations
        fetch(`../conteo_fisico/api/buscar_presentaciones.php?producto_id=${producto.id}`)
            .then(res => res.json())
            .then(data => {
                if (data.success && data.data && data.data.presentaciones) {
                    activePresentations = data.data.presentaciones;
                    
                    // Build map of conversion factors for the selected product
                    const productPresentationsMap = {};
                    activePresentations.forEach(pres => {
                        productPresentationsMap[pres.presentacion_id] = {
                            factor: parseInt(pres.factor_conversion) || 1,
                            es_unidad_base: parseInt(pres.es_unidad_base) === 1
                        };
                    });

                    // Fill presentations select with ALL global presentations manually
                    presentacionSelect.innerHTML = '';
                    globalPresentations.forEach(pres => {
                        const opt = document.createElement('option');
                        opt.value = pres.id;
                        
                        const mapping = productPresentationsMap[pres.id];
                        const factor = mapping ? mapping.factor : 1;
                        
                        opt.textContent = `${pres.nombre} (Factor: ${factor})`;
                        opt.setAttribute('data-factor', factor);
                        
                        // Select default if it's marked as es_unidad_base in the mapping
                        if (mapping && mapping.es_unidad_base) {
                            opt.selected = true;
                        } else if (!mapping && parseInt(pres.id) === 1) {
                            // Default to UNIDAD if no match is found
                            opt.selected = true;
                        }
                        presentacionSelect.appendChild(opt);
                    });

                    // Enable form fields
                    presentacionSelect.disabled = false;
                    cantidadInput.disabled = false;
                    fechaVencimientoInput.disabled = false;
                    btnSubmit.disabled = false;

                    // Set default quantity to 1
                    cantidadInput.value = 1;

                    // Auto-calculate suggested values
                    actualizarValoresCalculados();
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error de configuración',
                        text: 'No se pudieron recuperar las especificaciones del producto.',
                        confirmButtonColor: 'var(--accent-color)',
                        background: 'var(--surface)'
                    });
                    resetFormProductFields();
                }
            })
            .catch(err => {
                console.error("Error al cargar presentaciones del producto:", err);
                resetFormProductFields();
            });
    }

    function resetFormProductFields() {
        productoIdInput.value = '';
        selectedProductId = null;
        activePresentations = [];
        baseUnitWacCost = 0.0;

        presentacionSelect.innerHTML = '<option value="">-- Seleccione un producto primero --</option>';
        presentacionSelect.disabled = true;
        cantidadInput.value = '';
        cantidadInput.disabled = true;
        costoInput.value = '';
        fechaVencimientoInput.value = '';
        fechaVencimientoInput.disabled = true;
        btnSubmit.disabled = true;
        if (infoCalculoBox) {
            infoCalculoBox.style.display = 'none';
        }
    }

    function actualizarValoresCalculados() {
        const selectedOption = presentacionSelect.options[presentacionSelect.selectedIndex];
        if (!selectedOption || !selectedProductId) {
            if (infoCalculoBox) {
                infoCalculoBox.style.display = 'none';
            }
            return;
        }

        const factor = parseInt(selectedOption.getAttribute('data-factor')) || 1;
        
        // Suggest presentation WAC cost
        costoInput.value = (baseUnitWacCost * factor).toFixed(2);

        const cantidad = parseFloat(cantidadInput.value) || 0;
        const costoUnitarioPres = parseFloat(costoInput.value) || 0;

        const baseQtyEquivalent = Math.round(cantidad * factor);
        const costBaseUnit = factor > 0 ? (costoUnitarioPres / factor) : 0;
        const totalValue = cantidad * costoUnitarioPres;

        if (infoCalculoBox) {
            if (calcEquivalencia) {
                calcEquivalencia.textContent = `${baseQtyEquivalent} unidad${baseQtyEquivalent !== 1 ? 'es' : ''} base`;
            }
            if (calcCostoBase) {
                calcCostoBase.textContent = `Q ${costBaseUnit.toFixed(4)}`;
            }
            if (calcTotalCompra) {
                calcTotalCompra.textContent = `Q ${totalValue.toFixed(2)}`;
            }
            infoCalculoBox.style.display = 'block';
        }
    }

    function actualizarHistorial() {
        const sucursalId = parseInt(sucursalSelect.value);
        if (!sucursalId) {
            historialSucursalNombre.textContent = '';
            historialBody.innerHTML = `
                <tr>
                    <td colspan="8" style="text-align: center; color: var(--text-muted); padding: 2rem;">
                        <i class="fas fa-info-circle" style="font-size: 1.5rem; margin-bottom: 0.5rem; display: block; color: var(--info);"></i>
                        Seleccione una sucursal para ver su historial.
                    </td>
                </tr>
            `;
            paginationInfoHistorial.textContent = 'Mostrando 0 - 0 de 0 registros';
            paginationControlsHistorial.innerHTML = '';
            return;
        }

        // Update branch header title
        const sucursalNombreText = sucursalSelect.options[sucursalSelect.selectedIndex].text;
        historialSucursalNombre.textContent = `Sucursal: ${sucursalNombreText}`;

        historialBody.innerHTML = `
            <tr>
                <td colspan="8" style="text-align: center; color: var(--text-muted); padding: 2rem;">
                    <i class="fas fa-spinner fa-pulse" style="font-size: 1.5rem; margin-bottom: 0.5rem; display: block;"></i>
                    Cargando historial...
                </td>
            </tr>
        `;

        fetch(`../conteo_fisico/api/historial_conteos.php?sucursal_id=${sucursalId}&page=${currentHistoryPage}&limit=10`)
            .then(res => res.json())
            .then(data => {
                if (data.success && data.data.history && data.data.history.length > 0) {
                    renderizarHistorial(data.data.history);
                    renderizarPaginacionHistorial(data.data);
                } else {
                    historialBody.innerHTML = `
                        <tr>
                            <td colspan="8" style="text-align: center; color: var(--text-muted); padding: 2rem;">
                                <i class="fas fa-info-circle" style="font-size: 1.5rem; margin-bottom: 0.5rem; display: block; color: var(--info);"></i>
                                No hay registros de conteo físico para esta sucursal.
                            </td>
                        </tr>
                    `;
                    paginationInfoHistorial.textContent = 'Mostrando 0 - 0 de 0 registros';
                    paginationControlsHistorial.innerHTML = '';
                }
            })
            .catch(err => {
                console.error("Error al cargar historial:", err);
                historialBody.innerHTML = `
                    <tr>
                        <td colspan="8" style="text-align: center; color: var(--danger); padding: 2rem;">
                            <i class="fas fa-exclamation-triangle" style="font-size: 1.5rem; margin-bottom: 0.5rem; display: block;"></i>
                            Error al conectar con la base de datos de historial.
                        </td>
                    </tr>
                `;
                paginationInfoHistorial.textContent = 'Mostrando 0 - 0 de 0 registros';
                paginationControlsHistorial.innerHTML = '';
            });
    }

    function renderizarHistorial(historyList) {
        historialBody.innerHTML = '';
        historyList.forEach(row => {
            const tr = document.createElement('tr');
            
            // Format date time
            const dateStr = formatDateTime(row.fecha_movimiento);
            
            // Lote type badge
            const badgeClass = row.facturado == 1 ? 'badge-soft-success' : 'badge-soft-danger';
            const badgeText = row.facturado == 1 ? 'Facturado' : 'No Facturado';
            
            let vencStr = '';
            if (row.fecha_vencimiento && row.fecha_vencimiento !== '0000-00-00') {
                const parts = row.fecha_vencimiento.split('-');
                if (parts.length === 3) {
                    vencStr = `<div style="font-size:0.75rem; color:var(--warning); margin-top:0.25rem; font-weight: 500;"><i class="fas fa-calendar-xmark" style="margin-right:4px;"></i>Vence: ${parts[2]}/${parts[1]}/${parts[0]}</div>`;
                }
            }
            
            tr.innerHTML = `
                <td>${escapeHTML(dateStr)}</td>
                <td style="font-family: monospace; font-size: 0.8rem;">${escapeHTML(row.codigo)}</td>
                <td style="font-weight: 600;">
                    ${escapeHTML(row.producto)}
                    ${vencStr}
                </td>
                <td style="text-align: right; font-weight: 600;">${parseFloat(row.cantidad_ingresada).toFixed(2).replace(/\.00$/, '')}</td>
                <td>${escapeHTML(row.presentacion)}</td>
                <td style="text-align: center;">
                    <span class="badge-premium ${badgeClass}">${badgeText}</span>
                </td>
                <td style="text-align: right; font-weight: 700; color: var(--accent-color);">${parseInt(row.cantidad_base)} u.</td>
                <td style="color: var(--text-light); font-size: 0.8rem;">${escapeHTML(row.usuario)}</td>
            `;
            historialBody.appendChild(tr);
        });
    }

    function renderizarPaginacionHistorial(data) {
        const from = data.total === 0 ? 0 : (data.page - 1) * data.limit + 1;
        const to = Math.min(data.page * data.limit, data.total);
        paginationInfoHistorial.textContent = `Mostrando ${from} - ${to} de ${data.total} registros`;

        paginationControlsHistorial.innerHTML = '';
        if (data.pages <= 1) return;

        const btnPrev = document.createElement('button');
        btnPrev.className = `btn btn-secondary ${data.page === 1 ? 'disabled' : ''}`;
        btnPrev.innerHTML = '<i class="fas fa-chevron-left"></i>';
        if (data.page > 1) {
            btnPrev.addEventListener('click', () => {
                currentHistoryPage--;
                actualizarHistorial();
            });
        }
        paginationControlsHistorial.appendChild(btnPrev);

        let startPage = Math.max(1, data.page - 2);
        let endPage = Math.min(data.pages, data.page + 2);

        if (startPage > 1) {
            const btnFirst = document.createElement('button');
            btnFirst.className = 'btn btn-secondary';
            btnFirst.textContent = '1';
            btnFirst.addEventListener('click', () => {
                currentHistoryPage = 1;
                actualizarHistorial();
            });
            paginationControlsHistorial.appendChild(btnFirst);

            if (startPage > 2) {
                const dots = document.createElement('span');
                dots.textContent = '...';
                dots.style.alignSelf = 'center';
                dots.style.margin = '0 0.35rem';
                dots.style.color = 'var(--text-muted)';
                paginationControlsHistorial.appendChild(dots);
            }
        }

        for (let i = startPage; i <= endPage; i++) {
            const btnPage = document.createElement('button');
            btnPage.className = `btn ${data.page === i ? 'btn-primary' : 'btn-secondary'}`;
            btnPage.textContent = i;
            btnPage.addEventListener('click', () => {
                currentHistoryPage = i;
                actualizarHistorial();
            });
            paginationControlsHistorial.appendChild(btnPage);
        }

        if (endPage < data.pages) {
            if (endPage < data.pages - 1) {
                const dots = document.createElement('span');
                dots.textContent = '...';
                dots.style.alignSelf = 'center';
                dots.style.margin = '0 0.35rem';
                dots.style.color = 'var(--text-muted)';
                paginationControlsHistorial.appendChild(dots);
            }

            const btnLast = document.createElement('button');
            btnLast.className = 'btn btn-secondary';
            btnLast.textContent = data.pages;
            btnLast.addEventListener('click', () => {
                currentHistoryPage = data.pages;
                actualizarHistorial();
            });
            paginationControlsHistorial.appendChild(btnLast);
        }

        const btnNext = document.createElement('button');
        btnNext.className = `btn btn-secondary ${data.page === data.pages ? 'disabled' : ''}`;
        btnNext.innerHTML = '<i class="fas fa-chevron-right"></i>';
        if (data.page < data.pages) {
            btnNext.addEventListener('click', () => {
                currentHistoryPage++;
                actualizarHistorial();
            });
        }
        paginationControlsHistorial.appendChild(btnNext);
    }

    function formatDateTime(sqlDateTime) {
        if (!sqlDateTime) return '';
        try {
            const date = new Date(sqlDateTime.replace(' ', 'T'));
            if (isNaN(date.getTime())) return sqlDateTime;
            
            const day = String(date.getDate()).padStart(2, '0');
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const year = date.getFullYear();
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            
            return `${day}/${month}/${year} ${hours}:${minutes}`;
        } catch(e) {
            return sqlDateTime;
        }
    }

    function escapeHTML(str) {
        if (!str) return '';
        return str.replace(/[&<>'"]/g, 
            tag => ({
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                "'": '&#39;',
                '"': '&quot;'
            }[tag] || tag)
        );
    }
});
