'use client'

import { useState, useEffect } from 'react'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { ArrowUpDown, TrendingUp, DollarSign, Calendar, Zap } from 'lucide-react'

interface KPIMetrics {
roi: number
paybackYears: number
cet: number
npv: number
irr: number
lcoe: number
}

interface FinancingDetails {
monthlyPayment: number
totalFinancingCost: number
breakEvenYears: number
}

interface BestFinancingOption {
institution: string
product: string
interestRate: number
maxTerm: number
ltvMax: number
}

interface LeaderboardEntry {
projectCategory: string
projectTier: string
systemSizeKw: number
annualEnergyGeneration: number
electricityTariff: number
bestFinancingOption: BestFinancingOption
kpis: KPIMetrics
financingDetails: FinancingDetails
}

interface KPITableProps {
data: LeaderboardEntry[]
isLoading?: boolean
onInteraction?: (action: string, data?: any) => void
}

const formatCurrency = (value: number) => {
return new Intl.NumberFormat('pt-BR', {
style: 'currency',
currency: 'BRL'
}).format(value)
}

const formatPercent = (value: number) => {
return `${value.toFixed(2)}%`
}

const formatNumber = (value: number, decimals = 2) => {
return value.toFixed(decimals)
}

const getCategoryColor = (category: string) => {
const colors = {
XPP: 'bg-blue-100 text-blue-800',
PP: 'bg-green-100 text-green-800',
P: 'bg-yellow-100 text-yellow-800',
M: 'bg-orange-100 text-orange-800',
G: 'bg-red-100 text-red-800',
GG: 'bg-purple-100 text-purple-800'
}
return colors[category as keyof typeof colors] || 'bg-gray-100 text-gray-800'
}

const getTierColor = (tier: string) => {
const colors = {
PADRAO: 'bg-gray-100 text-gray-800',
CONSCIENTE: 'bg-emerald-100 text-emerald-800',
MODERADO: 'bg-amber-100 text-amber-800',
ACELERADO: 'bg-rose-100 text-rose-800'
}
return colors[tier as keyof typeof colors] || 'bg-gray-100 text-gray-800'
}

export function KPITable({
data,
isLoading,
onInteraction,
}: Readonly<KPITableProps>) {
const [sortBy, setSortBy] = useState<string>("roi")
const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc")
const [filteredData, setFilteredData] = useState<LeaderboardEntry[]>(data)

useEffect(() => {
const sorted = [...data].sort((a, b) => {
const aValue = a.kpis[sortBy as keyof KPIMetrics] as number
const bValue = b.kpis[sortBy as keyof KPIMetrics] as number
return sortOrder === "desc" ? bValue - aValue : aValue - bValue
})
setFilteredData(sorted)
}, [data, sortBy, sortOrder])

const handleSort = (column: string) => {
if (sortBy === column) {
setSortOrder(sortOrder === "asc" ? "desc" : "asc")
} else {
setSortBy(column)
setSortOrder("desc")
}
onInteraction?.("sort_change", {
column,
sortOrder: sortOrder === "asc" ? "desc" : "asc",
})
}

if (isLoading) {
return (
<Card className="border-gradient">
<CardHeader>
<CardTitle>Carregando Leaderboard KPI...</CardTitle>
</CardHeader>
<CardContent>
<div className="animate-pulse space-y-4">
{[1, 2, 3, 4, 5].map((num) => (
<div
key={`loading-${num}`}
className="h-16 bg-gray-200 rounded"
></div>
))}
</div>
</CardContent>
</Card>
)
}

return (
<Card className="border-gradient">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<TrendingUp className="h-5 w-5" />
Leaderboard KPI - Projetos Solares vs Financiamento
</CardTitle>
<CardDescription>
Comparação de indicadores financeiros por categoria e tier de projeto
</CardDescription>
<div className="flex gap-4">
<Select value={sortBy} onValueChange={setSortBy}>
<SelectTrigger className="w-48">
<SelectValue placeholder="Ordenar por" />
</SelectTrigger>
<SelectContent>
<SelectItem value="roi">ROI (%)</SelectItem>
<SelectItem value="paybackYears">Payback (anos)</SelectItem>
<SelectItem value="cet">CET (%)</SelectItem>
<SelectItem value="npv">NPV (R$)</SelectItem>
<SelectItem value="irr">IRR (%)</SelectItem>
<SelectItem value="lcoe">LCOE (R$/kWh)</SelectItem>
</SelectContent>
</Select>
<Button
variant="outline"
onClick={() => setSortOrder(sortOrder === "asc" ? "desc" : "asc")}
>
<ArrowUpDown className="h-4 w-4 mr-2" />
{sortOrder === "desc" ? "Decrescente" : "Crescente"}
</Button>
</div>
</CardHeader>
<CardContent>
<div className="overflow-x-auto">
<Table>
<TableHeader>
<TableRow>
<TableHead>Projeto</TableHead>
<TableHead>Tamanho</TableHead>
<TableHead>Geração Anual</TableHead>
<TableHead>Tarifa</TableHead>
<TableHead>Instituição</TableHead>
<TableHead>Produto</TableHead>
<TableHead>Taxa (%)</TableHead>
<TableHead>Prazo (meses)</TableHead>
<TableHead>Parcela Mensal</TableHead>
<TableHead
className="cursor-pointer"
onClick={() => handleSort("roi")}
>
ROI{" "}
{sortBy === "roi" && (
<ArrowUpDown className="inline h-4 w-4 ml-1" />
)}
</TableHead>
<TableHead
className="cursor-pointer"
onClick={() => handleSort("paybackYears")}
>
Payback{" "}
{sortBy === "paybackYears" && (
<ArrowUpDown className="inline h-4 w-4 ml-1" />
)}
</TableHead>
<TableHead
className="cursor-pointer"
onClick={() => handleSort("cet")}
>
CET{" "}
{sortBy === "cet" && (
<ArrowUpDown className="inline h-4 w-4 ml-1" />
)}
</TableHead>
<TableHead
className="cursor-pointer"
onClick={() => handleSort("npv")}
>
NPV{" "}
{sortBy === "npv" && (
<ArrowUpDown className="inline h-4 w-4 ml-1" />
)}
</TableHead>
<TableHead
className="cursor-pointer"
onClick={() => handleSort("lcoe")}
>
LCOE{" "}
{sortBy === "lcoe" && (
<ArrowUpDown className="inline h-4 w-4 ml-1" />
)}
</TableHead>
<TableHead>Break-even</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{filteredData.map((entry, index) => (
<TableRow
key={`${entry.projectCategory}-${entry.projectTier}-${index}`}
className="hover:bg-[var(--glass-light)] hover:backdrop-blur-sm transition-all duration-200 cursor-pointer"
onClick={() => onInteraction?.("row_click", { entry, index })}
>
<TableCell>
<div className="flex gap-2">
<Badge
className={getCategoryColor(entry.projectCategory)}
>
{entry.projectCategory}
</Badge>
<Badge className={getTierColor(entry.projectTier)}>
{entry.projectTier}
</Badge>
</div>
</TableCell>
<TableCell>
<div className="flex items-center gap-1">
<Zap className="h-4 w-4 text-yellow-500" />
{formatNumber(entry.systemSizeKw)} kWp
</div>
</TableCell>
<TableCell>
{formatNumber(entry.annualEnergyGeneration)} kWh/ano
</TableCell>
<TableCell>
{formatCurrency(entry.electricityTariff)}
</TableCell>
<TableCell className="font-medium">
{entry.bestFinancingOption.institution}
</TableCell>
<TableCell>{entry.bestFinancingOption.product}</TableCell>
<TableCell>
{formatPercent(entry.bestFinancingOption.interestRate)}
</TableCell>
<TableCell>
{entry.bestFinancingOption.maxTerm} meses
</TableCell>
<TableCell>
<div className="flex items-center gap-1">
<DollarSign className="h-4 w-4 text-green-500" />
{formatCurrency(entry.financingDetails.monthlyPayment)}
</div>
</TableCell>
<TableCell className="font-semibold text-green-600">
{formatPercent(entry.kpis.roi)}
</TableCell>
<TableCell>
<div className="flex items-center gap-1">
<Calendar className="h-4 w-4 text-blue-500" />
{formatNumber(entry.kpis.paybackYears)} anos
</div>
</TableCell>
<TableCell>{formatPercent(entry.kpis.cet)}</Ta

script.js

@@ -26,11 +26,93 @@ function setupThemeToggle() {
 
 document.addEventListener('DOMContentLoaded', () => {
     setupThemeToggle();
-    
-    // Mock data for demonstration
+// 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: [
+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 },
@@ -64,12 +146,11 @@ const mockData = {
             ]
         }
     };
-
-    // Render the equipment ranking table
+    // Render the equipment ranking and KPI tables
     const app = document.getElementById('app');
     app.innerHTML = `
-        <div class="space-y-6">
-            <div class="tabs">
+        <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>
@@ -93,10 +174,149 @@ const mockData = {
                     ${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>
     `;
 
-    // Tab functionality
+    // 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;

style.css

@@ -33,10 +33,105 @@
 .dark-theme table td {
     border-color: #334155;
 }
-
 .dark-theme .hover-scale:hover {
     background-color: #1e293b;
 }
+
+/* KPI Table Styles */
+.kpi-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.kpi-table th {
+    text-align: left;
+    padding: 0.75rem;
+    border-bottom: 1px solid #e5e7eb;
+    font-weight: 600;
+    color: #4b5563;
+}
+
+.kpi-table td {
+    padding: 0.75rem;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.kpi-table tr:hover {
+    background-color: #f9fafb;
+}
+
+.dark-theme .kpi-table th {
+    color: #9ca3af;
+    border-color: #374151;
+}
+
+.dark-theme .kpi-table td {
+    border-color: #374151;
+}
+
+.dark-theme .kpi-table tr:hover {
+    background-color: #1f2937;
+}
+
+/* Badge Styles */
+.badge {
+    display: inline-block;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.badge-blue {
+    background-color: #dbeafe;
+    color: #1e40af;
+}
+
+.badge-green {
+    background-color: #d1fae5;
+    color: #065f46;
+}
+
+.badge-yellow {
+    background-color: #fef3c7;
+    color: #92400e;
+}
+
+.badge-orange {
+    background-color: #ffedd5;
+    color: #9a3412;
+}
+
+.badge-red {
+    background-color: #fee2e2;
+    color: #991b1b;
+}
+
+.badge-purple {
+    background-color: #f3e8ff;
+    color: #6b21a8;
+}
+
+.badge-gray {
+    background-color: #f3f4f6;
+    color: #4b5563;
+}
+
+.badge-emerald {
+    background-color: #d1fae5;
+    color: #047857;
+}
+
+.badge-amber {
+    background-color: #fef3c7;
+    color: #b45309;
+}
+
+.badge-rose {
+    background-color: #ffe4e6;
+    color: #be123c;
+}
 .glass-effect {
     background: rgba(255, 255, 255, 0.7);
     backdrop-filter: blur(10px);