// Admin panel functionality

function showTab(tabName) {
    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
    
    event.target.classList.add('active');
    document.getElementById(`tab-${tabName}`).classList.add('active');
    
    if (tabName === 'albaranes') {
        loadAlbaranes();
    } else if (tabName === 'clasificacion') {
        loadClasificacion();
    }
}

async function loadAlbaranes() {
    try {
        const data = await apiRequest('/albaranes/');
        const albaranes = Array.isArray(data) ? data : (data.results || []);
        renderAlbaranes(albaranes);
    } catch (error) {
        console.error('Error al cargar albaranes:', error);
    }
}

async function loadClasificacion() {
    try {
        const data = await apiRequest('/albaranes/?estado_procesado=clasificacion');
        const albaranes = Array.isArray(data) ? data : (data.results || []);
        renderClasificacion(albaranes);
    } catch (error) {
        console.error('Error al cargar clasificación:', error);
    }
}

function renderAlbaranes(albaranes) {
    const container = document.getElementById('albaranes-container');
    if (!container) return;
    
    container.innerHTML = '';
    
    albaranes.forEach(albaran => {
        const card = document.createElement('div');
        card.className = 'albaran-card';
        
        const estadoClass = albaran.estado_procesado === 'procesado' ? 'procesado' :
                           albaran.estado_procesado === 'clasificacion' ? 'clasificacion' : 'pendiente';
        
        card.innerHTML = `
            <div class="albaran-header">
                <div>
                    <h3>Albarán ${albaran.numero_albaran || albaran.id}</h3>
                    <p>Proveedor: ${albaran.proveedor ? albaran.proveedor.nombre : 'Sin asignar'}</p>
                    <p>Fecha: ${albaran.fecha_albaran || 'N/A'}</p>
                </div>
                <span class="badge ${estadoClass}">${albaran.estado_procesado}</span>
            </div>
            
            <img src="${API_CONFIG.BASE_URL.replace('/api', '')}/media/${albaran.archivo_path}" class="albaran-image" alt="Albarán" onerror="this.style.display='none'">
            
            <div class="ocr-data">${JSON.stringify(albaran.datos_ocr || {}, null, 2)}</div>
            
            ${albaran.referencias && albaran.referencias.length > 0 ? `
                <table class="referencias-table">
                    <thead>
                        <tr>
                            <th>Referencia</th>
                            <th>Descripción</th>
                            <th>Unidades</th>
                            <th>Precio</th>
                            <th>IVA</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${albaran.referencias.map(ref => `
                            <tr>
                                <td>${ref.referencia}</td>
                                <td>${ref.denominacion}</td>
                                <td>${ref.unidades}</td>
                                <td>${ref.precio_unitario}€</td>
                                <td>${ref.impuesto_tipo}%</td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            ` : ''}
        `;
        
        container.appendChild(card);
    });
}

async function renderClasificacion(albaranes) {
    const container = document.getElementById('clasificacion-container');
    if (!container) return;
    
    container.innerHTML = '';
    
    // Cargar proveedores primero
    let proveedores = [];
    try {
        proveedores = await apiRequest('/proveedores/');
    } catch (error) {
        console.error('Error al cargar proveedores:', error);
    }
    
    albaranes.forEach(albaran => {
        const card = document.createElement('div');
        card.className = 'albaran-card';
        
        card.innerHTML = `
            <div class="albaran-header">
                <h3>Albarán ${albaran.numero_albaran || albaran.id}</h3>
            </div>
            
            <img src="${API_CONFIG.BASE_URL.replace('/api', '')}/media/${albaran.archivo_path}" class="albaran-image" alt="Albarán" onerror="this.style.display='none'">
            
            <div style="margin-top: 1rem;">
                <label>Asignar Proveedor:</label>
                <select id="proveedor-${albaran.id}" style="padding: 0.5rem; margin: 0.5rem 0; width: 100%;">
                    <option value="">Seleccionar proveedor...</option>
                    ${proveedores.map(prov => `
                        <option value="${prov.id}">${prov.nombre}</option>
                    `).join('')}
                </select>
                <button class="btn btn-primary" onclick="vincularProveedor(${albaran.id})" style="margin-top: 0.5rem;">
                    Vincular Proveedor
                </button>
            </div>
        `;
        
        container.appendChild(card);
    });
}

async function vincularProveedor(albaranId) {
    const select = document.getElementById(`proveedor-${albaranId}`);
    if (!select) return;
    
    const proveedorId = select.value;
    
    if (!proveedorId) {
        alert('Selecciona un proveedor');
        return;
    }
    
    try {
        await apiRequest(`/albaranes/${albaranId}/vincular-proveedor?proveedor_id=${proveedorId}`, {
            method: 'POST'
        });
        alert('Proveedor vinculado correctamente');
        loadClasificacion();
    } catch (error) {
        alert('Error al vincular proveedor: ' + error.message);
    }
}

// Cargar inicial
document.addEventListener('DOMContentLoaded', () => {
    loadAlbaranes();
});