/**
 * Recent Sales - Sistema Sufarma
 * Gestión de últimas ventas con opciones de imprimir y facturar
 */

class RecentSales {
    constructor() {
        this.init();
    }

    init() {
        this.loadRecentSales();
        // Recargar cada 30 segundos
        setInterval(() => this.loadRecentSales(), 30000);
    }

    async loadRecentSales() {
        const container = document.getElementById('recentSalesList');
        if (!container) return;

        try {
            const response = await fetch('api/ventas/ultimas.php');
            const data = await response.json();

            if (data.success && data.ventas.length > 0) {
                this.renderSales(data.ventas);
            } else {
                container.innerHTML = `
                    <div style="text-align: center; padding: 1rem; color: var(--text-secondary); font-size: 0.85rem;">
                        No hay ventas recientes
                    </div>
                `;
            }
        } catch (error) {
            console.error('Error loading recent sales:', error);
            container.innerHTML = `
                <div style="text-align: center; padding: 1rem; color: #dc2626; font-size: 0.85rem;">
                    Error al cargar ventas
                </div>
            `;
        }
    }

    renderSales(ventas) {
        const container = document.getElementById('recentSalesList');
        let html = '';

        ventas.forEach(venta => {
            const fecha = new Date(venta.fecha);
            const horaFormateada = fecha.toLocaleTimeString('es-GT', {
                hour: '2-digit',
                minute: '2-digit'
            });

            const puedeFacturar = venta.items_facturados > 0 && !venta.tiene_factura;
            const puedeFacturaCliente = !venta.tiene_factura && venta.total_items > 0;

            html += `
                <div class="recent-sale-item" style="
                    background: var(--surface-elevated);
                    border: 1px solid var(--border-color);
                    border-radius: 12px;
                    padding: 0.75rem;
                    margin-bottom: 0.5rem;
                ">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
                        <div>
                            <span style="font-weight: 700; color: var(--neon-cyan); font-size: 0.9rem;">
                                Venta #${venta.id}
                            </span>
                            <span style="color: var(--text-secondary); font-size: 0.75rem; margin-left: 0.5rem;">
                                ${horaFormateada}
                            </span>
                        </div>
                        <span style="font-weight: 800; color: var(--success-color); font-size: 0.95rem; text-shadow:0 0 8px rgba(34, 197, 94, 0.4);">
                            Q${venta.total.toFixed(2)}
                        </span>
                    </div>
                    
                    <div style="font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 0.5rem;">
                        ${venta.total_items} producto(s)
                        ${venta.items_facturados > 0 ? `• <span style="color:var(--text-primary);">${venta.items_facturados} para facturar</span>` : ''}
                        ${venta.tiene_factura ? '• <span style="color: var(--neon-cyan); text-shadow:var(--shadow-glow-cyan);">✓ Facturado</span>' : ''}
                    </div>
                    
                    <div style="display: flex; gap: 0.5rem;">
                        <button 
                            onclick="recentSales.printSale(${venta.id})"
                            style="
                                flex: 1;
                                padding: 0.4rem 0.75rem;
                                background: var(--card-bg);
                                border: 1px solid var(--border-color);
                                border-radius: 6px;
                                color: var(--text-primary);
                                font-size: 0.75rem;
                                font-weight: 500;
                                cursor: pointer;
                                transition: all 0.2s;
                            "
                            onmouseover="this.style.background='var(--secondary-light)'"
                            onmouseout="this.style.background='var(--card-bg)'"
                        >
                            🖨️ Imprimir
                        </button>
                        
                        ${puedeFacturar ? `
                            <button 
                                onclick="recentSales.invoiceSale(${venta.id})"
                                style="
                                    flex: 1;
                                    padding: 0.4rem 0.75rem;
                                    background: #22c55e;
                                    border: none;
                                    border-radius: 6px;
                                    color: white;
                                    font-size: 0.75rem;
                                    font-weight: 500;
                                    cursor: pointer;
                                    transition: all 0.2s;
                                "
                                onmouseover="this.style.background='#16a34a'"
                                onmouseout="this.style.background='#22c55e'"
                            >
                                📄 Facturar
                            </button>
                        ` : ''}
                        
                        ${puedeFacturaCliente ? `
                            <button 
                                onclick="recentSales.invoiceFullSale(${venta.id})"
                                style="
                                    flex: 1;
                                    padding: 0.4rem 0.75rem;
                                    background: #3b82f6;
                                    border: none;
                                    border-radius: 6px;
                                    color: white;
                                    font-size: 0.75rem;
                                    font-weight: 500;
                                    cursor: pointer;
                                    transition: all 0.2s;
                                "
                                onmouseover="this.style.background='#2563eb'"
                                onmouseout="this.style.background='#3b82f6'"
                            >
                                📋 Factura Cliente
                            </button>
                        ` : ''}
                    </div>
                </div>
            `;
        });

        container.innerHTML = html;
    }

    async printSale(ventaId) {
        try {
            const response = await fetch(`api/ventas/detalle.php?id=${ventaId}`);
            const data = await response.json();

            if (!data.success) {
                alert('Error al obtener detalles de la venta');
                return;
            }

            this.generatePrintWindow(data.venta, data.detalles);
        } catch (error) {
            console.error('Error printing sale:', error);
            alert('Error al imprimir la venta');
        }
    }

    generatePrintWindow(venta, detalles) {
        const printWindow = window.open('', '_blank', 'width=300,height=600');

        const fecha = new Date(venta.fecha);
        const fechaFormateada = fecha.toLocaleString('es-GT');

        let html = `
            <!DOCTYPE html>
            <html>
            <head>
                <meta charset="UTF-8">
                <title>Ticket Venta #${venta.id}</title>
                <style>
                    body {
                        font-family: 'Courier New', monospace;
                        font-size: 12px;
                        margin: 10px;
                        width: 280px;
                    }
                    .header {
                        text-align: center;
                        margin-bottom: 10px;
                        border-bottom: 1px dashed #000;
                        padding-bottom: 10px;
                    }
                    .header h2 {
                        margin: 5px 0;
                        font-size: 16px;
                    }
                    .info {
                        margin-bottom: 10px;
                        font-size: 11px;
                    }
                    .items {
                        border-top: 1px dashed #000;
                        border-bottom: 1px dashed #000;
                        padding: 10px 0;
                        margin: 10px 0;
                    }
                    .item {
                        margin-bottom: 8px;
                    }
                    .item-name {
                        font-weight: bold;
                    }
                    .item-details {
                        display: flex;
                        justify-content: space-between;
                        font-size: 11px;
                    }
                    .totals {
                        margin-top: 10px;
                    }
                    .total-row {
                        display: flex;
                        justify-content: space-between;
                        margin: 5px 0;
                    }
                    .grand-total {
                        font-weight: bold;
                        font-size: 14px;
                        border-top: 1px solid #000;
                        padding-top: 5px;
                        margin-top: 5px;
                    }
                    .footer {
                        text-align: center;
                        margin-top: 15px;
                        font-size: 10px;
                        border-top: 1px dashed #000;
                        padding-top: 10px;
                    }
                    @media print {
                        body { margin: 0; }
                    }
                </style>
            </head>
            <body>
                <div class="header">
                    <h2>FARMACIA SUFARMA</h2>
                    <div>TICKET DE VENTA</div>
                </div>
                
                <div class="info">
                    <div><strong>Venta #:</strong> ${venta.id}</div>
                    <div><strong>Fecha:</strong> ${fechaFormateada}</div>
                    <div><strong>Cliente:</strong> ${venta.cliente_nombre}</div>
                    <div><strong>NIT:</strong> ${venta.cliente_nit}</div>
                    <div><strong>Cajero:</strong> ${venta.usuario_nombre}</div>
                </div>
                
                <div class="items">
        `;

        detalles.forEach(item => {
            html += `
                <div class="item">
                    <div class="item-name">${item.producto_nombre}</div>
                    <div class="item-details">
                        <span>${item.cantidad} x Q${item.precio.toFixed(2)}</span>
                        <span>Q${item.subtotal.toFixed(2)}</span>
                    </div>
                    ${item.facturado ? '<div style="font-size:10px; color:#666;">✓ Para facturar</div>' : ''}
                </div>
            `;
        });

        const subtotal = detalles.reduce((sum, item) => sum + item.subtotal, 0);
        const iva = venta.total - (venta.total / 1.12);

        html += `
                </div>
                
                <div class="totals">
                    <div class="total-row">
                        <span>Subtotal:</span>
                        <span>Q${(venta.total - iva).toFixed(2)}</span>
                    </div>
                    <div class="total-row">
                        <span>IVA (12%):</span>
                        <span>Q${iva.toFixed(2)}</span>
                    </div>
                    <div class="total-row grand-total">
                        <span>TOTAL:</span>
                        <span>Q${venta.total.toFixed(2)}</span>
                    </div>
                </div>
                
                <div class="footer">
                    <div>¡Gracias por su compra!</div>
                    <div>Sistema Sufarma POS</div>
                </div>
                
                <script>
                    window.onload = function() {
                        window.print();
                        // Cerrar ventana después de imprimir o cancelar
                        window.onafterprint = function() {
                            window.close();
                        };
                        // Fallback: cerrar si el usuario cancela
                        setTimeout(function() {
                            window.close();
                        }, 100);
                    }
                </script>
            </body>
            </html>
        `;

        printWindow.document.write(html);
        printWindow.document.close();
    }

    async invoiceSale(ventaId) {
        try {
            const response = await fetch(`api/ventas/detalle.php?id=${ventaId}`);
            const data = await response.json();

            if (!data.success) {
                alert('Error al obtener detalles de la venta');
                return;
            }

            // Filtrar solo los items marcados para facturar
            const itemsToInvoice = data.detalles.filter(item => item.facturado);

            if (itemsToInvoice.length === 0) {
                alert('Esta venta no tiene productos marcados para facturar');
                return;
            }

            // Abrir modal FEL si existe
            if (typeof fel !== 'undefined') {
                fel.openModal(ventaId, itemsToInvoice);
            } else {
                alert('El módulo de facturación no está disponible');
            }
        } catch (error) {
            console.error('Error invoicing sale:', error);
            alert('Error al facturar la venta');
        }
    }

    /**
     * Factura Cliente - Factura TODOS los productos de la venta
     * sin importar si están marcados como facturados o no
     */
    async invoiceFullSale(ventaId) {
        try {
            const response = await fetch(`api/ventas/detalle.php?id=${ventaId}`);
            const data = await response.json();

            if (!data.success) {
                alert('Error al obtener detalles de la venta');
                return;
            }

            // Usar TODOS los items de la venta (sin filtrar por facturado)
            const allItems = data.detalles;

            if (allItems.length === 0) {
                alert('Esta venta no tiene productos');
                return;
            }

            // Abrir modal FEL con todos los items
            if (typeof fel !== 'undefined') {
                fel.openModal(ventaId, allItems);
            } else {
                alert('El módulo de facturación no está disponible');
            }
        } catch (error) {
            console.error('Error invoicing full sale:', error);
            alert('Error al facturar la venta');
        }
    }
}

// Inicializar
const recentSales = new RecentSales();
