/**
 * Módulo de Compras e Ingresos a Bodega - JS
 */

let cart = [];
let proveedores = [];
let searchTimeout = null;

// Variables de Historial
let historialPage = 1;
let historialSearch = '';
let debounceHistorialTimeout = null;

document.addEventListener('DOMContentLoaded', () => {
    cargarProveedores();
    cargarHistorialCompras(1);
    
    const searchInput = document.getElementById('searchInput');
    if(searchInput) {
        searchInput.addEventListener('input', (e) => {
            clearTimeout(searchTimeout);
            const query = e.target.value.trim();
            if(query.length < 2) {
                document.getElementById('searchResults').style.display = 'none';
                return;
            }
            searchTimeout = setTimeout(() => buscarProductos(query), 300);
        });
        
        // Hide on click outside
        document.addEventListener('click', (e) => {
            if(!e.target.closest('.search-container')) {
                document.getElementById('searchResults').style.display = 'none';
            }
        });
    }
});

function toggleCreditoOptions() {
    const tipo = document.getElementById('tipo_pago').value;
    document.getElementById('div_dias_credito').style.display = (tipo === 'credito' || tipo === 'mixto') ? 'block' : 'none';
    document.getElementById('div_monto_efectivo').style.display = (tipo === 'mixto') ? 'block' : 'none';
}

async function cargarProveedores() {
    try {
        const res = await fetch('api/compras/listar_proveedores.php');
        const data = await res.json();
        if(data.success) {
            proveedores = data.data;
            const select = document.getElementById('proveedor_id');
            let html = '<option value="">Seleccione un proveedor...</option>';
            proveedores.forEach(p => {
                html += `<option value="${p.id}">${p.nombre}</option>`;
            });
            select.innerHTML = html;
        }
    } catch(e) {
        console.error('Error cargando proveedores', e);
    }
}

async function buscarProductos(query) {
    try {
        const res = await fetch(`api/inventario/productos/buscar.php?q=${encodeURIComponent(query)}`);
        const data = await res.json();
        
        const resultsDiv = document.getElementById('searchResults');
        
        if(data.success && data.data.length > 0) {
            let html = '';
            data.data.forEach(p => {
                let presHtml = '';
                if(p.presentaciones) {
                    p.presentaciones.forEach(pres => {
                        const itemData = encodeURIComponent(JSON.stringify({
                            id: p.id,
                            codigo: p.CodigoInterno,
                            nombre: p.NombreComercial,
                            generico: p.NombreGenerico,
                            laboratorio: p.laboratorio,
                            presentacion_id: pres.presentacion_id,
                            presentacion_nombre: pres.presentacion_nombre,
                            factor: pres.factor_conversion,
                            se_factura: p.se_factura || 1
                        }));
                        presHtml += `<button onclick="agregarAlCarrito('${itemData}')" style="font-size:0.75rem; padding:4px 8px; margin:2px; cursor:pointer; background:#e2e8f0; border:1px solid #cbd5e1; border-radius:4px;">${pres.presentacion_nombre} (x${pres.factor_conversion})</button>`;
                    });
                }
                
                html += `
                    <div class="search-result-item">
                        <div>
                            <div style="font-weight:700; color:var(--primary-color);">${p.CodigoInterno}</div>
                        </div>
                        <div>
                            <div style="font-weight:600; font-size:0.95rem;">${p.NombreComercial}</div>
                            <div style="font-size:0.8rem; color:var(--text-secondary);">${p.laboratorio}</div>
                        </div>
                        <div>
                            ${presHtml || '<span style="color:#ef4444;font-size:0.8rem;">Sin presentaciones</span>'}
                        </div>
                    </div>
                `;
            });
            resultsDiv.innerHTML = html;
            resultsDiv.style.display = 'block';
        } else {
            resultsDiv.innerHTML = '<div style="padding:1rem; text-align:center; color:var(--text-secondary);">No se encontraron productos.</div>';
            resultsDiv.style.display = 'block';
        }
    } catch(e) {
        console.error('Error buscando', e);
    }
}

function agregarAlCarrito(encodedData) {
    const data = JSON.parse(decodeURIComponent(encodedData));
    
    const idx = cart.findIndex(i => i.id === data.id && i.presentacion_id === data.presentacion_id);
    if(idx >= 0) {
        cart[idx].cantidad++;
    } else {
        cart.push({
            id: data.id,
            codigo: data.codigo,
            nombre: data.nombre,
            presentacion_id: data.presentacion_id,
            presentacion_nombre: data.presentacion_nombre,
            factor: data.factor,
            cantidad: 1,
            costo_unitario: 0.00,
            fecha_vencimiento: '',
            facturado: data.se_factura == 1
        });
    }
    
    document.getElementById('searchResults').style.display = 'none';
    document.getElementById('searchInput').value = '';
    renderCart();
}

function removerDelCarrito(index) {
    cart.splice(index, 1);
    renderCart();
}

function updateCartItem(index, field, value) {
    if(field === 'cantidad') {
        value = parseInt(value) || 0;
        if(value < 0) value = 0;
    } else if (field === 'costo_unitario') {
        value = parseFloat(value) || 0;
        if(value < 0) value = 0;
    } else if (field === 'facturado') {
        value = value ? true : false;
    }
    cart[index][field] = value;
    renderCart();
}

function renderCart() {
    const tbody = document.getElementById('cartItems');
    if(cart.length === 0) {
        tbody.innerHTML = `<tr><td colspan="8" style="text-align: center; padding: 2rem; color: var(--text-secondary);">El carrito está vacío. Busque productos para agregar.</td></tr>`;
        actualizarResumen();
        return;
    }
    
    let html = '';
    cart.forEach((item, index) => {
        const subtotal = item.cantidad * item.costo_unitario;
        html += `
            <tr>
                <td>
                    <div style="font-weight:600; color:var(--text-primary);">${item.nombre}</div>
                    <div style="font-size:0.75rem; color:var(--text-secondary);">${item.codigo}</div>
                </td>
                <td style="font-size:0.85rem;">
                    <div style="font-weight:600;">${item.presentacion_nombre}</div>
                    <div style="font-size:0.75rem; color:var(--text-secondary);">Factor: ${item.factor}</div>
                </td>
                <td>
                    <input type="number" min="1" class="modern-input qty-input" value="${item.cantidad}" onchange="updateCartItem(${index}, 'cantidad', this.value)">
                </td>
                <td>
                    <input type="number" step="0.01" min="0" class="modern-input price-input" value="${item.costo_unitario}" onchange="updateCartItem(${index}, 'costo_unitario', this.value)">
                </td>
                <td>
                    <input type="date" class="modern-input" value="${item.fecha_vencimiento}" onchange="updateCartItem(${index}, 'fecha_vencimiento', this.value)">
                </td>
                <td style="text-align:center;">
                    <input type="checkbox" ${item.facturado ? 'checked' : ''} onchange="updateCartItem(${index}, 'facturado', this.checked)">
                </td>
                <td style="text-align:right; font-weight:700; color:var(--primary-color);">
                    Q ${subtotal.toFixed(2)}
                </td>
                <td style="text-align:center;">
                    <button class="btn-danger" onclick="removerDelCarrito(${index})">🗑</button>
                </td>
            </tr>
        `;
    });
    tbody.innerHTML = html;
    actualizarResumen();
}

function actualizarResumen() {
    let items = cart.length;
    let qty = 0;
    let baseQty = 0;
    let total = 0;
    
    cart.forEach(item => {
        qty += item.cantidad;
        baseQty += (item.cantidad * item.factor);
        total += (item.cantidad * item.costo_unitario);
    });
    
    document.getElementById('summary-items').innerText = items;
    document.getElementById('summary-qty').innerText = qty;
    document.getElementById('summary-base-qty').innerText = baseQty;
    document.getElementById('summary-total').innerText = 'Q ' + total.toFixed(2);
    
    document.getElementById('btnGuardarCompra').disabled = (cart.length === 0 || total === 0);
}

async function guardarCompra() {
    const proveedor_id = document.getElementById('proveedor_id').value;
    const numero_factura = document.getElementById('numero_factura').value.trim();
    const fecha_compra = document.getElementById('fecha_compra').value;
    const tipo_pago = document.getElementById('tipo_pago').value;
    const dias_credito = document.getElementById('dias_credito').value;
    const monto_efectivo = document.getElementById('monto_efectivo').value;
    
    if(!proveedor_id || !numero_factura || !fecha_compra) {
        alert("Por favor, complete Proveedor, Número de Factura y Fecha.");
        return;
    }
    
    for(let i=0; i<cart.length; i++) {
        if(cart[i].costo_unitario <= 0) {
            alert(`El producto ${cart[i].nombre} debe tener un costo unitario mayor a cero.`);
            return;
        }
    }
    
    const payload = {
        proveedor_id,
        numero_factura,
        fecha_compra,
        tipo_pago,
        dias_credito,
        monto_efectivo,
        items: cart
    };
    
    const btn = document.getElementById('btnGuardarCompra');
    const originalText = btn.innerHTML;
    btn.innerHTML = '⏳ Guardando...';
    btn.disabled = true;
    
    try {
        const res = await fetch('api/compras/registrar.php', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(payload)
        });
        const data = await res.json();
        
        if(data.success) {
            alert("✅ ¡Ingreso a bodega registrado con éxito!\nSe recalculó el CPP e inventario central.");
            // Reset
            cart = [];
            renderCart();
            document.getElementById('numero_factura').value = '';
            document.getElementById('monto_efectivo').value = '';
            document.getElementById('dias_credito').value = '30';
            document.getElementById('tipo_pago').value = 'contado';
            toggleCreditoOptions();
            
            // Redirigir a pestaña historial
            switchComprasTab('historial');
        } else {
            alert("❌ Error: " + data.error);
        }
    } catch(e) {
        console.error(e);
        alert("Error de conexión al guardar.");
    } finally {
        btn.innerHTML = originalText;
        actualizarResumen();
    }
}

// === TABS & HISTORIAL LOGIC ===

function switchComprasTab(tab) {
    const btnHistorial = document.getElementById('btnTabHistorial');
    const btnNueva = document.getElementById('btnTabNueva');
    const panelHistorial = document.getElementById('panelHistorial');
    const panelNueva = document.getElementById('panelNuevaCompra');

    if (tab === 'historial') {
        // Active styles for Historial
        btnHistorial.classList.add('active');
        btnHistorial.style.background = 'var(--primary-color)';
        btnHistorial.style.color = 'white';
        btnHistorial.style.boxShadow = '0 4px 12px rgba(59, 130, 246, 0.3)';
        btnHistorial.style.border = 'none';

        // Inactive styles for Nueva
        btnNueva.classList.remove('active');
        btnNueva.style.background = 'transparent';
        btnNueva.style.color = 'var(--text-secondary)';
        btnNueva.style.boxShadow = 'none';
        btnNueva.style.border = '1px solid transparent';

        panelHistorial.style.display = 'block';
        panelNueva.style.display = 'none';
        cargarHistorialCompras(1);
    } else {
        // Active styles for Nueva
        btnNueva.classList.add('active');
        btnNueva.style.background = 'var(--primary-color)';
        btnNueva.style.color = 'white';
        btnNueva.style.boxShadow = '0 4px 12px rgba(59, 130, 246, 0.3)';
        btnNueva.style.border = 'none';

        // Inactive styles for Historial
        btnHistorial.classList.remove('active');
        btnHistorial.style.background = 'transparent';
        btnHistorial.style.color = 'var(--text-secondary)';
        btnHistorial.style.boxShadow = 'none';
        btnHistorial.style.border = '1px solid transparent';

        panelHistorial.style.display = 'none';
        panelNueva.style.display = 'block';
    }
}

async function cargarHistorialCompras(page = 1) {
    historialPage = page;
    const tbody = document.getElementById('historialTableBody');
    try {
        const url = `api/compras/listar.php?page=${page}&limit=10&q=${encodeURIComponent(historialSearch)}`;
        const res = await fetch(url);
        const result = await res.json();

        if (result.success) {
            const data = result.data;
            const compras = data.compras;
            const pagination = data.pagination;

            document.getElementById('historialCountInfo').innerText = `Mostrando ${compras.length} de ${pagination.total} compras`;

            if (compras.length === 0) {
                tbody.innerHTML = `
                    <tr>
                        <td colspan="8" style="text-align: center; padding: 3rem; color: var(--text-secondary);">
                            No se encontraron registros de compras.
                        </td>
                    </tr>
                `;
                document.getElementById('historialPagination').innerHTML = '';
                return;
            }

            let html = '';
            compras.forEach(c => {
                const badgePago = getPagoBadge(c.tipo_pago);
                const badgeEstado = getEstadoBadge(c.estado_pago);
                const facturaStr = c.numero_factura ? c.numero_factura : 'S/N';
                const fechaStr = formatFecha(c.fecha_compra);

                html += `
                    <tr class="hover-row" onclick="verDetalleCompra(${c.id})" style="border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background 0.2s;" onmouseover="this.style.background='var(--surface-hover)'" onmouseout="this.style.background='transparent'">
                        <td style="padding: 1rem; font-weight: 700; color: var(--primary-color);">#${c.id}</td>
                        <td style="padding: 1rem; font-family: monospace;">${fechaStr}</td>
                        <td style="padding: 1rem; font-weight: 600; text-transform: uppercase;">${c.proveedor_nombre}</td>
                        <td style="padding: 1rem; font-family: monospace;">${facturaStr}</td>
                        <td style="padding: 1rem;">${badgePago}</td>
                        <td style="padding: 1rem;">${badgeEstado}</td>
                        <td style="padding: 1rem; text-align: right; font-weight: 700; color: var(--primary-color); font-family: monospace;">Q ${parseFloat(c.total).toFixed(2)}</td>
                        <td style="padding: 1rem; text-align: center;" onclick="event.stopPropagation()">
                            <button onclick="verDetalleCompra(${c.id})" style="background: var(--primary-color); color: white; padding: 0.4rem 0.8rem; border-radius: 0.375rem; border: none; cursor: pointer; font-size: 0.75rem; font-weight: 700; transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">🔍 Ver Detalle</button>
                        </td>
                    </tr>
                `;
            });
            tbody.innerHTML = html;
            renderPaginacionHistorial(pagination);
        } else {
            tbody.innerHTML = `<tr><td colspan="8" style="text-align: center; padding: 2rem; color: #ef4444;">Error al cargar datos: ${result.error}</td></tr>`;
        }
    } catch (e) {
        console.error(e);
        tbody.innerHTML = `<tr><td colspan="8" style="text-align: center; padding: 2rem; color: #ef4444;">Error de red al cargar historial.</td></tr>`;
    }
}

function debounceHistorialSearch(val) {
    historialSearch = val.trim();
    clearTimeout(debounceHistorialTimeout);
    debounceHistorialTimeout = setTimeout(() => {
        cargarHistorialCompras(1);
    }, 300);
}

function renderPaginacionHistorial(pag) {
    const container = document.getElementById('historialPagination');
    if (!pag || pag.total === 0) {
        container.innerHTML = '';
        return;
    }

    const totalPages = Math.ceil(pag.total / pag.limit);
    const currentPage = pag.page;

    let start = Math.max(1, currentPage - 2);
    let end = Math.min(totalPages, start + 4);
    if (end - start < 4) {
        start = Math.max(1, end - 4);
    }

    let html = `
        <div style="font-size: 0.8rem; color: var(--text-secondary);">
            Página <strong>${currentPage}</strong> de <strong>${totalPages}</strong>
        </div>
        <div style="display: flex; gap: 0.25rem;">
    `;

    // Botón anterior
    if (currentPage > 1) {
        html += `<button onclick="cargarHistorialCompras(${currentPage - 1})" style="padding: 0.35rem 0.75rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 700; border: 1px solid var(--border-color); background: var(--surface-bg); color: var(--text-primary); cursor: pointer;">« Ant</button>`;
    }

    for (let i = start; i <= end; i++) {
        const activeStyle = i === currentPage 
            ? `background: var(--primary-color); color: white; border-color: var(--primary-color);` 
            : `background: var(--surface-bg); color: var(--text-primary); border-color: var(--border-color);`;
        html += `<button onclick="cargarHistorialCompras(${i})" style="padding: 0.35rem 0.75rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 700; border: 1px solid var(--border-color); cursor: pointer; ${activeStyle}">${i}</button>`;
    }

    // Botón siguiente
    if (currentPage < totalPages) {
        html += `<button onclick="cargarHistorialCompras(${currentPage + 1})" style="padding: 0.35rem 0.75rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 700; border: 1px solid var(--border-color); background: var(--surface-bg); color: var(--text-primary); cursor: pointer;">Sig »</button>`;
    }

    html += `</div>`;
    container.innerHTML = html;
}

async function verDetalleCompra(compraId) {
    const modal = document.getElementById('modalDetalle');
    const tbody = document.getElementById('modalTableBody');
    
    // Reset modal content
    document.getElementById('modalCompraId').innerText = `#${compraId}`;
    document.getElementById('modalProveedorNombre').innerText = 'Cargando...';
    document.getElementById('modalFecha').innerText = '';
    document.getElementById('modalTipoPago').innerText = '';
    document.getElementById('modalEstadoPago').innerText = '';
    document.getElementById('modalTotal').innerText = '';
    tbody.innerHTML = `<tr><td colspan="7" style="text-align:center; padding:2rem; color:var(--text-secondary);">Cargando ítems...</td></tr>`;
    
    // Display modal
    modal.style.display = 'flex';

    try {
        const res = await fetch(`api/compras/detalle.php?compra_id=${compraId}`);
        const result = await res.json();

        if (result.success) {
            const data = result.data;
            const c = data.compra;
            const items = data.items;

            document.getElementById('modalProveedorNombre').innerText = c.proveedor_nombre;
            document.getElementById('modalFecha').innerText = formatFecha(c.fecha_compra);
            document.getElementById('modalTipoPago').innerText = c.tipo_pago;
            
            const stateEl = document.getElementById('modalEstadoPago');
            stateEl.innerHTML = getEstadoBadge(c.estado_pago);
            
            document.getElementById('modalTotal').innerText = `Q ${parseFloat(c.total).toFixed(2)}`;

            if (items.length === 0) {
                tbody.innerHTML = `<tr><td colspan="7" style="text-align:center; padding:2rem; color:var(--text-secondary);">Esta compra no contiene ningún artículo.</td></tr>`;
                return;
            }

            let html = '';
            items.forEach(it => {
                const costoTotal = parseFloat(it.costo_total || 0);
                const costoUnit = parseFloat(it.costo_unitario || 0);
                const factor = parseInt(it.factor_conversion_compra || 1);
                const qty = parseInt(it.cantidad || 0);
                const baseQty = parseInt(it.cantidad_unidades_base || (qty * factor));

                html += `
                    <tr style="border-bottom: 1px solid var(--border-color);">
                        <td style="padding: 0.75rem 1rem;">
                            <div style="font-weight:600; color:var(--text-primary);">${it.NombreComercial}</div>
                            <div style="font-size:0.7rem; color:var(--text-secondary);">${it.CodigoInterno || 'S/C'}</div>
                        </td>
                        <td style="padding: 0.75rem 1rem; font-family: monospace;">${it.numero_factura || 'S/N'}</td>
                        <td style="padding: 0.75rem 1rem; text-align: center;">x${factor}</td>
                        <td style="padding: 0.75rem 1rem; text-align: center; font-weight:600;">${qty}</td>
                        <td style="padding: 0.75rem 1rem; text-align: center; font-weight:600; color:var(--primary-color);">${baseQty}</td>
                        <td style="padding: 0.75rem 1rem; text-align: right; font-family: monospace;">Q ${costoUnit.toFixed(4)}</td>
                        <td style="padding: 0.75rem 1rem; text-align: right; font-weight:700; color:var(--text-primary); font-family: monospace;">Q ${costoTotal.toFixed(2)}</td>
                    </tr>
                `;
            });
            tbody.innerHTML = html;
        } else {
            tbody.innerHTML = `<tr><td colspan="7" style="text-align:center; padding:2rem; color:#ef4444;">Error: ${result.error}</td></tr>`;
        }
    } catch (e) {
        console.error(e);
        tbody.innerHTML = `<tr><td colspan="7" style="text-align:center; padding:2rem; color:#ef4444;">Error al cargar detalles de compra.</td></tr>`;
    }
}

function cerrarModalDetalle() {
    document.getElementById('modalDetalle').style.display = 'none';
}

// Badge Helpers

function getPagoBadge(tipo) {
    let background = 'rgba(71, 85, 105, 0.15)';
    let color = '#64748b';
    let text = 'CONTADO';

    if (tipo === 'credito') {
        background = 'rgba(59, 130, 246, 0.15)';
        color = '#3b82f6';
        text = 'CRÉDITO';
    } else if (tipo === 'mixto') {
        background = 'rgba(168, 85, 247, 0.15)';
        color = '#a855f7';
        text = 'MIXTO';
    }

    return `<span style="background: ${background}; color: ${color}; border: 1px solid ${color}40; padding: 0.2rem 0.5rem; border-radius: 0.375rem; font-size: 0.7rem; font-weight: 700; display: inline-block; text-transform: uppercase;">${text}</span>`;
}

function getEstadoBadge(estado) {
    let background = 'rgba(239, 68, 68, 0.15)';
    let color = '#ef4444';
    let text = 'PENDIENTE';

    if (estado === 'pagado' || estado === 'pagada') {
        background = 'rgba(16, 185, 129, 0.15)';
        color = '#10b981';
        text = 'PAGADA';
    } else if (estado === 'parcial') {
        background = 'rgba(245, 158, 11, 0.15)';
        color = '#f59e0b';
        text = 'PARCIAL';
    }

    return `<span style="background: ${background}; color: ${color}; border: 1px solid ${color}40; padding: 0.2rem 0.5rem; border-radius: 0.375rem; font-size: 0.7rem; font-weight: 700; display: inline-block; text-transform: uppercase;">${text}</span>`;
}

function formatFecha(dateStr) {
    if(!dateStr) return 'N/A';
    const parts = dateStr.split(' ')[0].split('-');
    if(parts.length === 3) {
        return `${parts[2]}/${parts[1]}/${parts[0]}`;
    }
    return dateStr;
}
