// Kanban functionality

function createCard(pedido) {
    const card = document.createElement('div');
    card.className = 'card';
    if (pedido.es_urgente) {
        card.classList.add('urgente');
    }
    
    const fechaCita = pedido.fecha_cita ? new Date(pedido.fecha_cita).toLocaleString('es-ES') : 'Sin fecha';
    
    card.innerHTML = `
        <div class="card-header">
            <div>
                <div class="card-title">Pedido ${pedido.numero_pedido}</div>
                <div class="card-subtitle">${pedido.cliente?.matricula_vehiculo || 'N/A'} - ${pedido.cliente?.nombre || 'N/A'}</div>
            </div>
            ${pedido.es_urgente ? '<span class="urgente-badge">URGENTE</span>' : ''}
        </div>
        <div class="card-subtitle" style="margin-bottom: 0.5rem;">Cita: ${fechaCita}</div>
        <div class="referencias-list">
            ${(pedido.referencias || []).map(ref => {
                const estadoClass = ref.estado === 'completo' ? 'completo' : 
                                   ref.estado === 'parcial' ? 'parcial' : 'pendiente';
                return `
                    <div class="referencia-item ${estadoClass}">
                        <div>
                            <span class="referencia-codigo">${ref.referencia}</span>
                            <div style="font-size: 0.8rem;">${ref.denominacion}</div>
                        </div>
                        <div style="text-align: right;">
                            <div>${ref.unidades_solicitadas} unidades</div>
                            <div style="font-size: 0.8rem;">
                                Stock: ${ref.unidades_en_stock} | Pendiente: ${ref.unidades_pendientes}
                            </div>
                        </div>
                    </div>
                `;
            }).join('')}
        </div>
    `;
    
    return card;
}

function renderKanban(data) {
    const columns = {
        'pendiente_revision': document.getElementById('col-pendiente-revision'),
        'en_revision': document.getElementById('col-en-revision'),
        'pendiente_materiales': document.getElementById('col-pendiente-materiales'),
        'completado': document.getElementById('col-completado'),
    };
    
    // Limpiar columnas
    Object.values(columns).forEach(col => {
        if (col) col.innerHTML = '';
    });
    
    // Renderizar tarjetas
    Object.entries(data).forEach(([estado, pedidos]) => {
        const column = columns[estado];
        if (!column) return;
        
        if (pedidos.length === 0) {
            column.innerHTML = '<div class="empty-column">No hay pedidos</div>';
        } else {
            pedidos.forEach(pedido => {
                column.appendChild(createCard(pedido));
            });
        }
    });
}

async function loadKanban() {
    try {
        const data = await apiRequest('/kanban/');
        renderKanban(data);
    } catch (error) {
        console.error('Error al cargar Kanban:', error);
        alert('Error al cargar los datos: ' + error.message);
    }
}

// Filtros
document.addEventListener('DOMContentLoaded', () => {
    const searchInput = document.getElementById('search-input');
    const estadoFilter = document.getElementById('estado-filter');
    const urgenteOnly = document.getElementById('urgente-only');
    
    if (searchInput) {
        searchInput.addEventListener('input', (e) => {
            const search = e.target.value.toLowerCase();
            document.querySelectorAll('.card').forEach(card => {
                const text = card.textContent.toLowerCase();
                card.style.display = text.includes(search) ? 'block' : 'none';
            });
        });
    }
    
    if (estadoFilter) {
        estadoFilter.addEventListener('change', async (e) => {
            const estado = e.target.value;
            if (!estado) {
                loadKanban();
                return;
            }
            
            try {
                const data = await apiRequest(`/pedidos-cliente/?estado=${estado}`);
                const pedidos = Array.isArray(data) ? data : (data.results || []);
                const grouped = {
                    'pendiente_revision': [],
                    'en_revision': [],
                    'pendiente_materiales': [],
                    'completado': [],
                };
                grouped[estado] = pedidos;
                renderKanban(grouped);
            } catch (error) {
                console.error('Error al filtrar:', error);
            }
        });
    }
    
    // Auto-refresh cada 30 segundos
    setInterval(loadKanban, 30000);
    
    // Cargar inicial
    loadKanban();
});