// /views/js/historial.js — Admin pedidos con estados separados y actualización async
(() => {
    const POLL_MS = 45000;

    const toggle = document.querySelector('.menu-toggle');
    const menu = document.getElementById('topbarMenu');
    if (toggle && menu) {
        toggle.addEventListener('click', (e) => {
            e.stopPropagation();
            const open = menu.classList.toggle('show');
            toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
        });
        document.addEventListener('click', (e) => {
            if (!menu.classList.contains('show')) return;
            if (!menu.contains(e.target) && e.target !== toggle) {
                menu.classList.remove('show');
                toggle.setAttribute('aria-expanded', 'false');
            }
        });
    }

    const form = document.getElementById('searchForm');
    if (form) {
        ['estado_entrega', 'estado_pago', 'orden', 'mes', 'anio'].forEach((name) => {
            const el = form.querySelector(`[name="${name}"]`);
            if (el) el.addEventListener('change', () => form.submit());
        });
        const busquedaInput = form.querySelector('input[name="busqueda"]');
        let timeout = null;
        if (busquedaInput) {
            busquedaInput.addEventListener('keyup', () => {
                clearTimeout(timeout);
                timeout = setTimeout(() => form.submit(), 500);
            });
        }
    }

    document.querySelectorAll('.modal .close-button').forEach((btn) => {
        btn.addEventListener('click', () => {
            const modal = btn.closest('.modal');
            if (modal) modal.style.display = 'none';
        });
    });
    window.addEventListener('click', (e) => {
        if (e.target?.classList?.contains('modal')) {
            e.target.style.display = 'none';
        }
    });

    const statusModal = document.getElementById('statusModal');
    const updateForm = document.getElementById('updateStatusForm');
    const statusMessage = document.getElementById('statusMessage');

    document.addEventListener('click', (e) => {
        const btn = e.target.closest('.btn-estado');
        if (!btn) return;
        const idPedido = btn.dataset.id;
        const card = btn.closest('.caja-pedido');
        document.getElementById('modalPedidoId').textContent = idPedido;
        document.getElementById('modalInputIdPedido').value = idPedido;
        document.getElementById('nuevo_estado_pago').value = card.dataset.estadoPago || 'PENDIENTE';
        document.getElementById('nuevo_estado_entrega').value = card.dataset.estadoEntrega || 'PENDIENTE';
        if (statusMessage) { statusMessage.textContent = ''; statusMessage.style.color = ''; }
        if (statusModal) statusModal.style.display = 'block';
    });

    if (updateForm) {
        updateForm.addEventListener('submit', async (event) => {
            event.preventDefault();
            const idPedido = document.getElementById('modalInputIdPedido').value;
            const estadoPago = document.getElementById('nuevo_estado_pago').value;
            const estadoEntrega = document.getElementById('nuevo_estado_entrega').value;

            try {
                const body = new URLSearchParams({
                    id_pedido: idPedido,
                    estado_pago: estadoPago,
                    estado_entrega: estadoEntrega,
                });
                const r = await fetch('actualizar_estados_pedido.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
                        'Accept': 'application/json',
                    },
                    body: body.toString(),
                });
                const data = await r.json();
                if (!data.success) throw new Error(data.message || 'Error al actualizar');

                actualizarCardEstados(idPedido, data.pedido.estado_pago, data.pedido.estado_entrega);
                if (statusMessage) {
                    statusMessage.textContent = 'Estados actualizados correctamente.';
                    statusMessage.style.color = 'green';
                }
                setTimeout(() => { if (statusModal) statusModal.style.display = 'none'; }, 800);
            } catch (err) {
                if (statusMessage) {
                    statusMessage.textContent = err.message || 'Error de conexión';
                    statusMessage.style.color = 'red';
                }
            }
        });
    }

    function actualizarCardEstados(idPedido, estadoPago, estadoEntrega) {
        const card = document.querySelector(`.caja-pedido[data-id="${idPedido}"]`);
        if (!card) return;
        card.dataset.estadoPago = estadoPago;
        card.dataset.estadoEntrega = estadoEntrega;
        const row = card.querySelector('.estados-row');
        if (row) {
            row.innerHTML = `
                <span class="estado-badge estado-pago-${estadoPago}">${escapeHtml(estadoPago)}</span>
                <span class="estado-badge estado-entrega-${estadoEntrega}">${escapeHtml(estadoEntrega)}</span>
            `;
        }
    }

    const detalleModal = document.getElementById('detalleModal');
    const tbodyDetalle = document.querySelector('#tablaDetalle tbody');
    const tdTotalPedido = document.getElementById('tdTotalPedido');
    const detalleResumen = document.getElementById('detalleResumen');
    const detalleTitle = document.getElementById('detalleTitle');

    document.addEventListener('click', async (e) => {
        const btn = e.target.closest('[data-detalle]');
        if (!btn) return;
        const idPedido = btn.getAttribute('data-detalle');
        if (tbodyDetalle) tbodyDetalle.innerHTML = '<tr><td colspan="4">Cargando…</td></tr>';
        if (detalleResumen) detalleResumen.innerHTML = '';
        if (detalleTitle) detalleTitle.textContent = `Detalle del pedido #${idPedido}`;
        if (detalleModal) detalleModal.style.display = 'block';

        try {
            const r = await fetch(`obtener_pedido_completo.php?id_pedido=${encodeURIComponent(idPedido)}`, {
                headers: { Accept: 'application/json' },
            });
            const data = await r.json();
            if (!data.success) throw new Error(data.message || 'Error al cargar');
            renderDetalleCompleto(data.pedido, data.lineas || [], data.total_lineas || 0);
        } catch (err) {
            console.error(err);
            if (tbodyDetalle) tbodyDetalle.innerHTML = '<tr><td colspan="4" class="err">No se pudo cargar.</td></tr>';
        }
    });

    function renderDetalleCompleto(p, lineas, totalLineas) {
        if (detalleResumen && p) {
            const maps = (p.latitud && p.longitud)
                ? `<a href="https://maps.google.com/?q=${encodeURIComponent(p.latitud + ',' + p.longitud)}" target="_blank" rel="noopener">Abrir en Google Maps</a>`
                : '—';
            detalleResumen.innerHTML = `
                <p><strong>Cliente:</strong> ${escapeHtml(p.nombre_cliente)} · <a href="tel:${escapeHtml(p.telefono)}">${escapeHtml(p.telefono)}</a></p>
                <p><strong>Entrega:</strong> ${p.envio_dom == 1 ? 'Domicilio' : 'Recoger en local'}</p>
                ${p.envio_dom == 1 ? `<p><strong>Dirección:</strong> ${escapeHtml(p.direccion_texto || '')}</p>
                <p><strong>Referencias:</strong> ${escapeHtml(p.referencia || '—')}</p>
                <p><strong>Ubicación:</strong> ${maps}</p>` : ''}
                <p><strong>Pago:</strong> ${escapeHtml(p.metodo_pago)} · <span class="estado-badge estado-pago-${p.estado_pago}">${escapeHtml(p.estado_pago)}</span></p>
                <p><strong>Entrega:</strong> <span class="estado-badge estado-entrega-${p.estado_entrega}">${escapeHtml(p.estado_entrega)}</span></p>
                <p><strong>WhatsApp cliente:</strong> ${p.whatsapp_enviado == 1 ? 'Enviado ✓' : '<strong style="color:#b91c1c">NO enviado — pedido puede no estar visible para cocina</strong>'}</p>
                ${parseFloat(p.costo_envio_aplicado) > 0 ? `<p><strong>Envío:</strong> $${Number(p.costo_envio_aplicado).toFixed(2)}</p>` : ''}
            `;
        }

        if (!tbodyDetalle) return;
        if (!lineas.length) {
            tbodyDetalle.innerHTML = '<tr><td colspan="4">Sin líneas.</td></tr>';
        } else {
            tbodyDetalle.innerHTML = lineas.map((it) => `
                <tr>
                    <td>${escapeHtml(it.titulo_producto)}</td>
                    <td class="num">${Number(it.cantidad)}</td>
                    <td class="num">$${Number(it.precio_unitario).toFixed(2)}</td>
                    <td class="num">$${Number(it.total_linea).toFixed(2)}</td>
                </tr>
            `).join('');
        }
        if (tdTotalPedido) {
            tdTotalPedido.textContent = `$${Number(p.monto_total || totalLineas).toFixed(2)}`;
        }
    }

    function escapeHtml(s) {
        return String(s || '').replace(/[&<>"']/g, (m) => (
            { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[m]
        ));
    }

    /** Recarga silenciosa de estados visibles (pagos MP vía webhook) */
    async function pollEstadosPedidos() {
        const cards = document.querySelectorAll('.caja-pedido[data-id]');
        if (!cards.length) return;

        await Promise.all([...cards].map(async (card) => {
            const id = card.dataset.id;
            try {
                const r = await fetch(`obtener_pedido_completo.php?id_pedido=${id}`, { headers: { Accept: 'application/json' } });
                const data = await r.json();
                if (data.success && data.pedido) {
                    const p = data.pedido;
                    if (card.dataset.estadoPago !== p.estado_pago || card.dataset.estadoEntrega !== p.estado_entrega) {
                        actualizarCardEstados(id, p.estado_pago, p.estado_entrega);
                    }
                }
            } catch (_) { /* ignore poll errors */ }
        }));
    }

    setInterval(pollEstadosPedidos, POLL_MS);
})();
