/**
 * CARREGADOR DE PERFIS - Usando Data Manager
 * 
 * Funções específicas para carregar e exibir dados dos perfis
 * usando o sistema de cache inteligente.
 */

// ========================================
// CANTONEIRAS
// ========================================

/**
 * Carrega dados das cantoneiras usando o Data Manager
 */
async function carregarCantoneirasV2() {
    console.log('🔧 carregarCantoneirasV2() - Nova versão com Data Manager');
    
    try {
        // Verificar se o elemento existe
        const tbody = document.getElementById('cantoneiras-tbody');
        if (!tbody) {
            console.error('❌ Elemento cantoneiras-tbody não encontrado!');
            return;
        }
        
        console.log('✅ Elemento tbody encontrado');
        
        // Mostrar loading
        tbody.innerHTML = `
            <tr>
                <td colspan="9" style="text-align: center; padding: 20px;">
                    <div style="display: flex; align-items: center; justify-content: center; gap: 10px;">
                        <div class="spinner"></div>
                        📊 Carregando cantoneiras do banco de dados...
                    </div>
                </td>
            </tr>
        `;
        
        // Carregar dados via Data Manager
        const dados = await window.dataManager.getData('cantoneiras');
        
        if (!dados || dados.length === 0) {
            tbody.innerHTML = `
                <tr>
                    <td colspan="9" style="text-align: center; padding: 20px; color: var(--color-error);">
                        ❌ Nenhuma cantoneira encontrada no banco de dados.
                        <br><br>
                        <button class="btn btn-primary" onclick="atualizarDadosCantoneiras()">
                            🔄 Atualizar Dados
                        </button>
                    </td>
                </tr>
            `;
            return;
        }
        
        console.log(`✅ ${dados.length} cantoneiras carregadas do Data Manager`);
        console.log('🔍 Primeiro item:', dados[0]);
        
        // Armazenar globalmente para filtros
        window.cantoneirasData = dados;
        console.log('💾 Dados armazenados em window.cantoneirasData');
        
        // Exibir na tabela
        console.log('🎨 Chamando exibirCantoneirasV2...');
        console.log('🔍 Tipo de exibirCantoneirasV2:', typeof exibirCantoneirasV2);
        
        if (typeof exibirCantoneirasV2 === 'function') {
            exibirCantoneirasV2(dados);
        } else {
            console.error('❌ exibirCantoneirasV2 não é uma função!');
            // Fallback: exibir diretamente
            console.log('🔄 Usando fallback para exibir dados...');
            const tbody = document.getElementById('cantoneiras-tbody');
            if (tbody) {
                tbody.innerHTML = dados.map(item => `
                    <tr>
                        <td><strong>${item.nome}</strong></td>
                        <td>${item.lado_mm}</td>
                        <td>${item.espessura_mm}</td>
                        <td>${item.peso_kg_m.toFixed(2)}</td>
                        <td>${item.area_cm2.toFixed(2)}</td>
                        <td>${item.momento_inercia_cm4.toFixed(2)}</td>
                        <td>${item.raio_giracao_cm.toFixed(2)}</td>
                        <td><span class="badge">${item.tipo}</span></td>
                        <td><button class="btn btn-sm">Ver</button></td>
                    </tr>
                `).join('');
                console.log('✅ Tabela preenchida via fallback!');
            } else {
                console.error('❌ Elemento tbody não encontrado no fallback!');
            }
        }
        
        // Atualizar contador
        const totalEl = document.getElementById('cant-total');
        if (totalEl) {
            totalEl.textContent = dados.length;
        }
        
    } catch (error) {
        console.error('❌ Erro ao carregar cantoneiras:', error);
        
        const tbody = document.getElementById('cantoneiras-tbody');
        if (tbody) {
            tbody.innerHTML = `
                <tr>
                    <td colspan="9" style="text-align: center; padding: 20px; color: var(--color-error);">
                        ❌ Erro ao carregar dados: ${error.message}
                        <br><br>
                        <button class="btn btn-primary" onclick="atualizarDadosCantoneiras()">
                            🔄 Tentar Novamente
                        </button>
                    </td>
                </tr>
            `;
        }
    }
}

/**
 * Exibe cantoneiras na tabela (versão otimizada)
 */
function exibirCantoneirasV2(dados) {
    console.log(`📋 Exibindo ${dados.length} cantoneiras na tabela`);
    
    const tbody = document.getElementById('cantoneiras-tbody');
    if (!tbody) {
        console.error('❌ Elemento tbody não encontrado');
        return;
    }
    
    if (!dados || dados.length === 0) {
        tbody.innerHTML = `
            <tr>
                <td colspan="9" style="text-align: center; padding: 20px;">
                    Nenhuma cantoneira encontrada
                </td>
            </tr>
        `;
        return;
    }
    
    // Gerar HTML otimizado
    const html = dados.map(item => {
        const badgeColor = getBadgeColorV2(item.tipo);
        return `
            <tr>
                <td><strong>${item.nome}</strong></td>
                <td>${item.lado_mm}</td>
                <td>${item.espessura_mm}</td>
                <td>${item.peso_kg_m.toFixed(2)}</td>
                <td>${item.area_cm2.toFixed(2)}</td>
                <td>${item.momento_inercia_cm4.toFixed(2)}</td>
                <td>${item.raio_giracao_cm.toFixed(2)}</td>
                <td><span class="badge badge-${badgeColor}">${item.tipo}</span></td>
                <td>
                    <button class="btn btn-sm btn-primary" onclick="verDetalhesCantoneira('${item.id}')">
                        👁️ Ver
                    </button>
                </td>
            </tr>
        `;
    }).join('');
    
    tbody.innerHTML = html;
    console.log('✅ Tabela atualizada com sucesso');
}

/**
 * Filtra cantoneiras usando Data Manager
 */
function filtrarCantoneirasV2() {
    if (!window.cantoneirasData) {
        console.warn('⚠️ Dados não carregados ainda');
        return;
    }
    
    // Obter filtros
    const tamanho = document.getElementById('cant-tamanho')?.value || '';
    const pesoMax = parseFloat(document.getElementById('cant-peso-max')?.value) || Infinity;
    const busca = document.getElementById('cant-busca')?.value || '';
    
    console.log('🔍 Aplicando filtros:', { tamanho, pesoMax, busca });
    
    // Aplicar filtros usando Data Manager
    let filtrados = window.cantoneirasData;
    
    // Filtro por tipo/tamanho
    if (tamanho) {
        filtrados = window.dataManager.filterData(filtrados, { tipo: tamanho });
    }
    
    // Filtro por peso máximo
    if (pesoMax < Infinity) {
        filtrados = window.dataManager.filterData(filtrados, { peso_kg_m: { max: pesoMax } });
    }
    
    // Busca por nome
    if (busca) {
        filtrados = window.dataManager.searchData(filtrados, busca, ['nome', 'id']);
    }
    
    console.log(`🎯 Filtrados: ${filtrados.length} de ${window.cantoneirasData.length}`);
    
    // Exibir resultados
    exibirCantoneirasV2(filtrados);
    
    // Atualizar contador
    const totalEl = document.getElementById('cant-total');
    if (totalEl) {
        totalEl.textContent = filtrados.length;
    }
}

/**
 * Limpa filtros das cantoneiras
 */
function limparFiltrosCantoneirasV2() {
    console.log('🧹 Limpando filtros');
    
    // Limpar campos
    const tamanhoEl = document.getElementById('cant-tamanho');
    const pesoEl = document.getElementById('cant-peso-max');
    const buscaEl = document.getElementById('cant-busca');
    
    if (tamanhoEl) tamanhoEl.value = '';
    if (pesoEl) pesoEl.value = '';
    if (buscaEl) buscaEl.value = '';
    
    // Exibir todos os dados
    if (window.cantoneirasData) {
        exibirCantoneirasV2(window.cantoneirasData);
        
        const totalEl = document.getElementById('cant-total');
        if (totalEl) {
            totalEl.textContent = window.cantoneirasData.length;
        }
    }
}

/**
 * Força atualização dos dados das cantoneiras
 */
async function atualizarDadosCantoneiras() {
    console.log('🔄 Forçando atualização dos dados das cantoneiras...');
    
    try {
        // Limpar cache específico
        localStorage.removeItem('acoCalcPro_cache_cantoneiras');
        
        // Recarregar
        await carregarCantoneirasV2();
        
        // Notificar sucesso
        alert('✅ Dados das cantoneiras atualizados com sucesso!');
        
    } catch (error) {
        console.error('❌ Erro ao atualizar dados:', error);
        alert('❌ Erro ao atualizar dados: ' + error.message);
    }
}

/**
 * Retorna cor do badge (versão otimizada)
 */
function getBadgeColorV2(tipo) {
    const cores = {
        'Pequena': 'info',
        'Média': 'success', 
        'Grande': 'warning',
        'Muito Grande': 'warning',
        'Extra-Grande': 'error',
        'Massiva': 'error'
    };
    return cores[tipo] || 'info';
}

/**
 * Ver detalhes de uma cantoneira específica
 */
function verDetalhesCantoneira(id) {
    if (!window.cantoneirasData) {
        alert('❌ Dados não carregados');
        return;
    }
    
    const item = window.cantoneirasData.find(c => c.id === id);
    if (!item) {
        alert('❌ Cantoneira não encontrada');
        return;
    }
    
    alert(`
📐 ${item.nome}

Lado: ${item.lado_mm} mm
Espessura: ${item.espessura_mm} mm
Peso: ${item.peso_kg_m.toFixed(2)} kg/m
Área: ${item.area_cm2.toFixed(2)} cm²
Momento de Inércia: ${item.momento_inercia_cm4.toFixed(2)} cm⁴
Raio de Giração: ${item.raio_giracao_cm.toFixed(2)} cm
Tipo: ${item.tipo}
    `);
}

// Adicionar CSS para spinner
if (!document.getElementById('spinner-styles')) {
    const style = document.createElement('style');
    style.id = 'spinner-styles';
    style.textContent = `
        .spinner {
            width: 20px;
            height: 20px;
            border: 2px solid var(--color-border);
            border-top: 2px solid var(--color-primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    `;
    document.head.appendChild(style);
}

console.log('✅ Perfis Loader V2 carregado com Data Manager');