// Theme toggle functionality
function setupThemeToggle() {
    const themeToggle = document.querySelector('.theme-toggle');
    const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
    const currentTheme = localStorage.getItem('theme');

    if (currentTheme === 'dark' || (!currentTheme && prefersDarkScheme.matches)) {
        document.body.classList.add('dark-theme');
        themeToggle.innerHTML = '<i data-feather="sun"></i> Modo Claro';
    }

    themeToggle.addEventListener('click', () => {
        if (document.body.classList.contains('dark-theme')) {
            document.body.classList.remove('dark-theme');
            localStorage.setItem('theme', 'light');
            themeToggle.innerHTML = '<i data-feather="moon"></i> Modo Escuro';
        } else {
            document.body.classList.add('dark-theme');
            localStorage.setItem('theme', 'dark');
            themeToggle.innerHTML = '<i data-feather="sun"></i> Modo Claro';
        }
        feather.replace();
    });
}

document.addEventListener('DOMContentLoaded', () => {
    setupThemeToggle();
// Mock data for solar projects and financing
const mockData = {
        projects: [
            {
                projectCategory: "XPP",
                projectTier: "ACELERADO",
                systemSizeKw: 10.5,
                annualEnergyGeneration: 15000,
                electricityTariff: 0.85,
                bestFinancingOption: {
                    institution: "Banco Solar",
                    product: "Financiamento Verde",
                    interestRate: 8.5,
                    maxTerm: 120,
                    ltvMax: 80
                },
                kpis: {
                    roi: 25.8,
                    paybackYears: 4.2,
                    cet: 12.3,
                    npv: 45000,
                    irr: 18.7,
                    lcoe: 0.32
                },
                financingDetails: {
                    monthlyPayment: 850,
                    totalFinancingCost: 102000,
                    breakEvenYears: 5.1
                }
            },
            {
                projectCategory: "PP",
                projectTier: "MODERADO",
                systemSizeKw: 7.2,
                annualEnergyGeneration: 10500,
                electricityTariff: 0.75,
                bestFinancingOption: {
                    institution: "Banco Verde",
                    product: "Crédito Sustentável",
                    interestRate: 9.2,
                    maxTerm: 96,
                    ltvMax: 75
                },
                kpis: {
                    roi: 21.3,
                    paybackYears: 5.1,
                    cet: 13.5,
                    npv: 32000,
                    irr: 15.2,
                    lcoe: 0.38
                },
                financingDetails: {
                    monthlyPayment: 620,
                    totalFinancingCost: 59520,
                    breakEvenYears: 6.3
                }
            },
            {
                projectCategory: "P",
                projectTier: "CONSCIENTE",
                systemSizeKw: 5.0,
                annualEnergyGeneration: 7200,
                electricityTariff: 0.68,
                bestFinancingOption: {
                    institution: "Banco Eco",
                    product: "Linha Solar",
                    interestRate: 10.5,
                    maxTerm: 84,
                    ltvMax: 70
                },
                kpis: {
                    roi: 18.7,
                    paybackYears: 6.8,
                    cet: 14.8,
                    npv: 21000,
                    irr: 12.5,
                    lcoe: 0.42
                },
                financingDetails: {
                    monthlyPayment: 480,
                    totalFinancingCost: 40320,
                    breakEvenYears: 7.5
                }
            }
        ],
        panels: {
topPower: [
                { rank: 1, brand: "SunPower", model: "X22-370", value: 370, unit: "Wp", series: "X-Series", price: 899, efficiency: 22.8, warranty: 25 },
                { rank: 2, brand: "LG", model: "LG370Q1C-A5", value: 370, unit: "Wp", series: "NeON R", price: 799, efficiency: 21.7, warranty: 25 },
                { rank: 3, brand: "Panasonic", model: "VBHN330SA16", value: 330, unit: "Wp", series: "HIT", price: 699, efficiency: 19.7, warranty: 25 },
            ],
            bestPricePerWatt: [
                { rank: 1, brand: "Canadian Solar", model: "CS3K-395MS", value: 2.15, unit: "R$/W", series: "HiKu", price: 850, efficiency: 19.9, warranty: 12 },
                { rank: 2, brand: "Trina Solar", model: "TSM-395DE15", value: 2.20, unit: "R$/W", series: "Vertex S", price: 869, efficiency: 20.3, warranty: 15 },
                { rank: 3, brand: "Jinko Solar", model: "JKM395M-72HL4", value: 2.25, unit: "R$/W", series: "Tiger Pro", price: 889, efficiency: 20.4, warranty: 15 },
            ],
            topEfficiency: [
                { rank: 1, brand: "SunPower", model: "Maxeon 3", value: 22.6, unit: "%", series: "Maxeon", price: 999, efficiency: 22.6, warranty: 25 },
                { rank: 2, brand: "LG", model: "LG380Q1C-A5", value: 21.7, unit: "%", series: "NeON R", price: 849, efficiency: 21.7, warranty: 25 },
                { rank: 3, brand: "REC", model: "REC370AA", value: 21.3, unit: "%", series: "Alpha Pure", price: 799, efficiency: 21.3, warranty: 25 },
            ]
        },
        inverters: {
            longestWarranty: [
                { rank: 1, brand: "Fronius", model: "Symo 10.0-3-M", value: 10, unit: "anos", series: "Symo", price: 12500, efficiency: 98.1 },
                { rank: 2, brand: "SMA", model: "Sunny Tripower 10.0", value: 10, unit: "anos", series: "Tripower", price: 11900, efficiency: 98.3 },
                { rank: 3, brand: "Huawei", model: "SUN2000-10KTL-M1", value: 10, unit: "anos", series: "SUN2000", price: 10900, efficiency: 98.4 },
            ],
            bestPricePerKw: [
                { rank: 1, brand: "Growatt", model: "MIN 10000TL-X", value: 850, unit: "R$/kW", series: "MIN", price: 8500, efficiency: 97.8 },
                { rank: 2, brand: "Solis", model: "S6-GR1P10K", value: 900, unit: "R$/kW", series: "S6", price: 9000, efficiency: 98.0 },
                { rank: 3, brand: "GoodWe", model: "GW10KN-DT", value: 950, unit: "R$/kW", series: "DNS", price: 9500, efficiency: 98.2 },
            ],
            topEfficiency: [
                { rank: 1, brand: "Huawei", model: "SUN2000-10KTL-M1", value: 98.4, unit: "%", series: "SUN2000", price: 10900, warranty: 10 },
                { rank: 2, brand: "SMA", model: "Sunny Tripower 10.0", value: 98.3, unit: "%", series: "Tripower", price: 11900, warranty: 10 },
                { rank: 3, brand: "Fronius", model: "Symo 10.0-3-M", value: 98.1, unit: "%", series: "Symo", price: 12500, warranty: 10 },
            ]
        }
    };
    // Render the equipment ranking and KPI tables
    const app = document.getElementById('app');
    app.innerHTML = `
        <div class="space-y-12">
<div class="tabs">
                <div class="tabs-list grid w-full grid-cols-2 gap-2 mb-6">
                    <button class="tab-trigger active flex items-center gap-2 py-3 px-4 rounded-lg bg-primary-500 text-white" data-tab="panels">
                        <i data-feather="zap"></i>
                        Painéis Solares
                    </button>
                    <button class="tab-trigger flex items-center gap-2 py-3 px-4 rounded-lg bg-gray-200 text-gray-700" data-tab="inverters">
                        <i data-feather="trending-up"></i>
                        Inversores
                    </button>
                </div>

                <div class="tab-content active" data-tab="panels">
                    ${renderRankingTable("Maior Potência - Painéis Solares", mockData.panels.topPower, "zap", "Potência (Wp)")}
                    ${renderRankingTable("Melhor Preço por Watt - Painéis Solares", mockData.panels.bestPricePerWatt, "dollar-sign", "Preço/W (R$/W)")}
                    ${renderRankingTable("Top Eficiência - Painéis Solares", mockData.panels.topEfficiency, "trending-up", "Eficiência (%)")}
                </div>

                <div class="tab-content hidden" data-tab="inverters">
                    ${renderRankingTable("Maior Garantia - Inversores", mockData.inverters.longestWarranty, "shield", "Garantia (anos)")}
                    ${renderRankingTable("Melhor Preço por kW - Inversores", mockData.inverters.bestPricePerKw, "dollar-sign", "Preço/kW (R$/kW)")}
                    ${renderRankingTable("Top Eficiência - Inversores", mockData.inverters.topEfficiency, "trending-up", "Eficiência (%)")}
                </div>
            </div>
            <div class="space-y-6">
                <div class="tabs">
                    <div class="tabs-list grid w-full grid-cols-2 gap-2 mb-6">
                        <button class="tab-trigger active flex items-center gap-2 py-3 px-4 rounded-lg bg-primary-500 text-white" data-tab="panels">
                            <i data-feather="zap"></i>
                            Painéis Solares
                        </button>
                        <button class="tab-trigger flex items-center gap-2 py-3 px-4 rounded-lg bg-gray-200 text-gray-700" data-tab="inverters">
                            <i data-feather="trending-up"></i>
                            Inversores
                        </button>
                    </div>

                    <div class="tab-content active" data-tab="panels">
                        ${renderRankingTable("Maior Potência - Painéis Solares", mockData.panels.topPower, "zap", "Potência (Wp)")}
                        ${renderRankingTable("Melhor Preço por Watt - Painéis Solares", mockData.panels.bestPricePerWatt, "dollar-sign", "Preço/W (R$/W)")}
                        ${renderRankingTable("Top Eficiência - Painéis Solares", mockData.panels.topEfficiency, "trending-up", "Eficiência (%)")}
                    </div>

                    <div class="tab-content hidden" data-tab="inverters">
                        ${renderRankingTable("Maior Garantia - Inversores", mockData.inverters.longestWarranty, "shield", "Garantia (anos)")}
                        ${renderRankingTable("Melhor Preço por kW - Inversores", mockData.inverters.bestPricePerKw, "dollar-sign", "Preço/kW (R$/kW)")}
                        ${renderRankingTable("Top Eficiência - Inversores", mockData.inverters.topEfficiency, "trending-up", "Eficiência (%)")}
                    </div>
                </div>
            </div>

            <div class="border-gradient">
                <div class="card-header p-6">
                    <h3 class="text-xl font-bold flex items-center gap-2">
                        <i data-feather="trending-up" class="text-primary-500"></i>
                        Leaderboard KPI - Projetos Solares vs Financiamento
                    </h3>
                    <p class="text-gray-600 mt-1">Comparação de indicadores financeiros por categoria e tier de projeto</p>
                </div>
                <div class="card-content px-6 pb-6">
                    <div class="flex gap-4 mb-4">
                        <select class="w-48 p-2 rounded border border-gray-300">
                            <option value="roi">ROI (%)</option>
                            <option value="paybackYears">Payback (anos)</option>
                            <option value="cet">CET (%)</option>
                            <option value="npv">NPV (R$)</option>
                            <option value="irr">IRR (%)</option>
                            <option value="lcoe">LCOE (R$/kWh)</option>
                        </select>
                        <button class="flex items-center gap-2 px-4 py-2 bg-gray-100 rounded hover:bg-gray-200">
                            <i data-feather="arrow-up-down" class="h-4 w-4"></i>
                            Ordenar
                        </button>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead>
                                <tr class="text-left border-b">
                                    <th class="pb-3">Projeto</th>
                                    <th class="pb-3">Tamanho</th>
                                    <th class="pb-3">Geração Anual</th>
                                    <th class="pb-3">Tarifa</th>
                                    <th class="pb-3">Instituição</th>
                                    <th class="pb-3">Produto</th>
                                    <th class="pb-3">Taxa (%)</th>
                                    <th class="pb-3">Prazo (meses)</th>
                                    <th class="pb-3">Parcela Mensal</th>
                                    <th class="pb-3 cursor-pointer">ROI</th>
                                    <th class="pb-3 cursor-pointer">Payback</th>
                                    <th class="pb-3 cursor-pointer">CET</th>
                                    <th class="pb-3 cursor-pointer">NPV</th>
                                    <th class="pb-3 cursor-pointer">LCOE</th>
                                    <th class="pb-3">Break-even</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${mockData.projects.map(project => `
                                    <tr class="border-b hover:bg-primary-50 transition-colors cursor-pointer">
                                        <td class="py-4">
                                            <div class="flex gap-2">
                                                <span class="px-2 py-1 rounded text-xs ${getCategoryColor(project.projectCategory)}">
                                                    ${project.projectCategory}
                                                </span>
                                                <span class="px-2 py-1 rounded text-xs ${getTierColor(project.projectTier)}">
                                                    ${project.projectTier}
                                                </span>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="flex items-center gap-1">
                                                <i data-feather="zap" class="h-4 w-4 text-yellow-500"></i>
                                                ${formatNumber(project.systemSizeKw)} kWp
                                            </div>
                                        </td>
                                        <td>${formatNumber(project.annualEnergyGeneration)} kWh/ano</td>
                                        <td>${formatCurrency(project.electricityTariff)}</td>
                                        <td class="font-medium">${project.bestFinancingOption.institution}</td>
                                        <td>${project.bestFinancingOption.product}</td>
                                        <td>${formatPercent(project.bestFinancingOption.interestRate)}</td>
                                        <td>${project.bestFinancingOption.maxTerm} meses</td>
                                        <td>
                                            <div class="flex items-center gap-1">
                                                <i data-feather="dollar-sign" class="h-4 w-4 text-green-500"></i>
                                                ${formatCurrency(project.financingDetails.monthlyPayment)}
                                            </div>
                                        </td>
                                        <td class="font-semibold text-green-600">${formatPercent(project.kpis.roi)}</td>
                                        <td>
                                            <div class="flex items-center gap-1">
                                                <i data-feather="calendar" class="h-4 w-4 text-blue-500"></i>
                                                ${formatNumber(project.kpis.paybackYears)} anos
                                            </div>
                                        </td>
                                        <td>${formatPercent(project.kpis.cet)}</td>
                                        <td>${formatCurrency(project.kpis.npv)}</td>
                                        <td>${formatCurrency(project.kpis.lcoe)}</td>
                                        <td>${formatNumber(project.financingDetails.breakEvenYears)} anos</td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    `;

    // Add event listeners for sorting
    document.querySelectorAll('th.cursor-pointer').forEach(th => {
        th.addEventListener('click', () => {
            const column = th.textContent.trim().toLowerCase();
            console.log(`Sorting by ${column}`);
            // Implement sorting logic here
        });
    });

    document.querySelector('select').addEventListener('change', (e) => {
        const sortBy = e.target.value;
        console.log(`Sorting by ${sortBy}`);
        // Implement sorting logic here
    });

    document.querySelector('button').addEventListener('click', () => {
        console.log('Toggling sort order');
        // Implement sort order toggle here
    });
// Tab functionality
    document.querySelectorAll('.tab-trigger').forEach(trigger => {
        trigger.addEventListener('click', () => {
            const tabId = trigger.dataset.tab;
            
            // Update active tab button
            document.querySelectorAll('.tab-trigger').forEach(t => {
                t.classList.remove('active', 'bg-primary-500', 'text-white');
                t.classList.add('bg-gray-200', 'text-gray-700');
            });
            trigger.classList.add('active', 'bg-primary-500', 'text-white');
            trigger.classList.remove('bg-gray-200', 'text-gray-700');
            
            // Show active tab content
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.add('hidden');
                content.classList.remove('active');
            });
            document.querySelector(`.tab-content[data-tab="${tabId}"]`).classList.remove('hidden');
            document.querySelector(`.tab-content[data-tab="${tabId}"]`).classList.add('active');
            
            feather.replace();
        });
    });

    feather.replace();
});

function renderRankingTable(title, data, icon, valueLabel) {
    return `
        <div class="border-gradient hover-scale mb-6">
            <div class="card-header p-6">
                <h3 class="text-xl font-bold flex items-center gap-2">
                    <i data-feather="${icon}" class="text-primary-500"></i>
                    ${title}
                </h3>
                <p class="text-gray-600 mt-1">Top 10 equipamentos ordenados por ${valueLabel.toLowerCase()}</p>
            </div>
            <div class="card-content px-6 pb-6 overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="text-left border-b">
                            <th class="pb-3">Posição</th>
                            <th class="pb-3">Marca</th>
                            <th class="pb-3">Modelo</th>
                            <th class="pb-3">Série</th>
                            <th class="pb-3">${valueLabel}</th>
                            <th class="pb-3">Preço Médio</th>
                            <th class="pb-3">Eficiência</th>
                            <th class="pb-3">Garantia</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${data.map(item => `
                            <tr class="border-b hover:bg-primary-50 transition-colors cursor-pointer" data-id="${item.brand}-${item.model}">
                                <td class="py-4">
                                    <span class="rank-badge ${getRankColor(item.rank)}">
                                        ${getRankIcon(item.rank)}
                                    </span>
                                </td>
                                <td class="font-medium">${item.brand}</td>
                                <td class="font-mono text-sm">${item.model}</td>
                                <td class="text-sm text-gray-600">${item.series}</td>
                                <td class="font-semibold text-primary-600">
                                    ${item.unit.includes('R$') ? formatCurrency(item.value) : `${formatNumber(item.value)} ${item.unit}`}
                                </td>
                                <td>${item.price ? formatCurrency(item.price) : '-'}</td>
                                <td>${item.efficiency ? `${formatNumber(item.efficiency)}%` : '-'}</td>
                                <td>${item.warranty ? `${item.warranty} anos` : '-'}</td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            </div>
        </div>
    `;
}

function formatCurrency(value) {
    return new Intl.NumberFormat('pt-BR', {
        style: 'currency',
        currency: 'BRL'
    }).format(value);
}

function formatNumber(value, decimals = 2) {
    return value.toFixed(decimals);
}

function getRankColor(rank) {
    if (rank === 1) return 'bg-yellow-100 text-yellow-800 border-yellow-300';
    if (rank === 2) return 'bg-gray-100 text-gray-800 border-gray-300';
    if (rank === 3) return 'bg-orange-100 text-orange-800 border-orange-300';
    return 'bg-blue-50 text-blue-800 border-blue-200';
}

function getRankIcon(rank) {
    if (rank === 1) return '<i data-feather="award" class="text-yellow-600"></i>';
    if (rank === 2) return '<i data-feather="award" class="text-gray-600"></i>';
    if (rank === 3) return '<i data-feather="award" class="text-orange-600"></i>';
    return `<span class="text-sm font-bold text-blue-600">#${rank}</span>`;
}