// Proveedores functionality

function renderProveedores(data) {
    const container = document.getElementById('proveedores-container');
    if (!container) return;
    
    container.innerHTML = '';
    
    if (data.length === 0) {
        container.innerHTML = '<p>No hay referencias pendientes</p>';
        return;
    }
    
    data.forEach(proveedorData => {
        const card = document.createElement('div');
        card.className = 'proveedor-card';
        
        const pendientes = proveedorData.referencias_pendientes || [];
        const devoluciones = proveedorData.referencias_devolucion || [];
        
        card.innerHTML = `
            <div class="proveedor-header">
                ${proveedorData.proveedor?.nombre || 'Sin nombre'}
            </div>
            
            ${pendientes.length > 0 ? `
                <div class="section-title">Referencias Pendientes de Recepción</div>
                ${pendientes.map(ref => `
                    <div class="referencia-item pendiente">
                        <div class="referencia-codigo">${ref.referencia}</div>
                        <div>${ref.denominacion}</div>
                        <div class="referencia-info">
                            Pedidas: ${ref.unidades_pedidas} | Recibidas: ${ref.unidades_recibidas} | Pendiente: ${ref.unidades_pedidas - ref.unidades_recibidas}
                        </div>
                    </div>
                `).join('')}
            ` : ''}
            
            ${devoluciones.length > 0 ? `
                <div class="section-title">Referencias Pendientes de Abono</div>
                ${devoluciones.map(dev => `
                    <div class="referencia-item devolucion">
                        <div class="referencia-codigo">${dev.referencia}</div>
                        <div>${dev.denominacion || ''}</div>
                        <div class="referencia-info">
                            Unidades: ${dev.unidades} | Fecha: ${new Date(dev.fecha_devolucion).toLocaleDateString('es-ES')}
                        </div>
                    </div>
                `).join('')}
            ` : ''}
            
            ${pendientes.length === 0 && devoluciones.length === 0 ? 
                '<p style="color: #95a5a6; text-align: center; padding: 2rem;">Sin referencias pendientes</p>' : ''}
        `;
        
        container.appendChild(card);
    });
}

async function loadProveedores() {
    try {
        const data = await apiRequest('/referencias-proveedor/');
        renderProveedores(data);
    } catch (error) {
        console.error('Error al cargar proveedores:', error);
        alert('Error al cargar los datos: ' + error.message);
    }
}

// Auto-refresh cada 30 segundos
setInterval(loadProveedores, 30000);

// Cargar inicial
document.addEventListener('DOMContentLoaded', loadProveedores);