<?php

require_once(dirname(__DIR__) . '/config/db.php');
require_once __DIR__ . '/home_service.php';

$pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, true);

$dados = obterDadosDashboard($pdo);
if (!($dados['ok'] ?? false)) {
    $mensagem = htmlspecialchars((string)($dados['msg'] ?? 'Falha ao calcular Dashboard.'), ENT_QUOTES, 'UTF-8');
    echo "<div class='alert alert-danger'>" . $mensagem . "</div>";
    return;
}

$cdempresa  = (int)$dados['empresa'];
$anoref     = (int)$dados['anoref'];
$mesAtual   = (int)$dados['mesAtual'];
$moeda      = $dados['moeda'];
$dashboards = $dados['dashboards'];
$serieYtd   = $dados['serieYtd'] ?? null;

// Dados auxiliares para gráficos (um por variável de dashboard)
$chartData = [];
foreach ($dashboards as $dash) {
    $labels        = [];
    $anoOrcado     = [];
    $anoReal       = [];
    $anoRealAnt    = [];
    $mesOrcado     = [];
    $mesReal       = [];
    $mesRealAnt    = [];

    foreach ($dash['secoes'] as $sec) {
        $labels[]     = $sec['titulo'];
        $anoOrcado[]  = (float)$sec['ano']['orcado'];
        $anoReal[]    = (float)$sec['ano']['realizado'];
        $anoRealAnt[] = (float)$sec['ano']['realizadoAnterior'];
        $mesOrcado[]  = (float)$sec['mes']['orcado'];
        $mesReal[]    = (float)$sec['mes']['realizado'];
        $mesRealAnt[] = (float)$sec['mes']['realizadoAnterior'];
    }

    $chartData[] = [
        'id'     => (int)$dash['cdvariavel'],
        'nome'   => $dash['nome'],
        'labels' => $labels,
        'ano'    => [
            'orcado'            => $anoOrcado,
            'realizado'         => $anoReal,
            'realizadoAnterior' => $anoRealAnt,
        ],
        'mes'    => [
            'orcado'            => $mesOrcado,
            'realizado'         => $mesReal,
            'realizadoAnterior' => $mesRealAnt,
        ],
    ];
}

function formatarValorDashboard(float $v, string $mascara, array $moeda): string {
    if ($mascara === 'percentual') {
        return number_format($v * 100, 2, ',', '.') . ' %';
    }

    $simbolo = $moeda['simbolo'] ?? 'R$';
    $formato = $moeda['formato'] ?? 'decimal';
    $casas   = ($formato === 'inteiro') ? 0 : 2;

    return $simbolo . ' ' . number_format($v, $casas, ',', '.');
}

function formatarPercentDashboard(float $v): string {
    return number_format($v * 100, 1, ',', '.') . ' %';
}

/**
 * Retorna dicionário de linguagem baseado no modelo da variável
 * @param string $modelo 'meta' ou 'orcamento'
 * @return array Dicionário com labels de linguagem
 */
function obterLinguagem(string $modelo): array {
    $modeloNorm = strtolower(trim($modelo));
    
    if ($modeloNorm === 'meta') {
        return [
            'planejado'        => 'Meta Anual',
            'realizado'        => 'Realizado',
            'percentual_label' => 'Progresso da Meta',
            'restante'         => 'Falta para a Meta',
            'percentual_desc'  => '% da meta realizada',
            'restante_desc'    => '% faltante para atingir',
            'vs_anterior'      => 'Vs Período Anterior',
            'projecao'         => 'Projeção de Alcance',
            'descricao'        => 'Acompanhamento de desempenho da meta',
        ];
    }
    
    // Padrão para 'orcamento'
    return [
        'planejado'        => 'Orçamento Anual',
        'realizado'        => 'Gasto Realizado',
        'percentual_label' => 'Consumo do Orçamento',
        'restante'         => 'Saldo Disponível',
        'percentual_desc'  => '% do orçamento consumido',
        'restante_desc'    => '% de saldo disponível',
        'vs_anterior'      => 'Vs Período Anterior',
        'projecao'         => 'Projeção de Gasto',
        'descricao'        => 'Acompanhamento de execução orçamentária',
    ];
}

$nomesMes      = ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'];
$nomeMesAtual  = $nomesMes[$mesAtual-1] ?? '';
// KPIs por variável (cada dashboard como âncora)
$kpisVariaveis      = [];
$mascaraPorVariavel = [];
$modeloPorVariavel  = [];
foreach ($dashboards as $dash) {
    if (empty($dash['secoes'])) {
        continue;
    }

    $vid = (int)$dash['cdvariavel'];
    $modelo = $dash['modelo'] ?? 'orcamento';
    $modeloPorVariavel[$vid] = $modelo;

    $orcAnoTotal     = 0.0;
    $realAnoTotal    = 0.0;
    $realAnoAntTotal = 0.0;
    $projAnoTotal    = 0.0;

    foreach ($dash['secoes'] as $secResumo) {
        $anoResumo = $secResumo['ano'];
        $orcAnoTotal     += (float)$anoResumo['orcado'];
        $realAnoTotal    += (float)$anoResumo['realizado'];
        $realAnoAntTotal += (float)$anoResumo['realizadoAnterior'];
        $projAnoTotal    += (float)$anoResumo['projValor'];
    }

    $atingidoPerc   = ($orcAnoTotal != 0.0) ? ($realAnoTotal / $orcAnoTotal) : 0.0;
    $restantePerc   = max(0.0, 1.0 - $atingidoPerc);
    $varAnoAnterior = ($realAnoAntTotal != 0.0) ? (($realAnoTotal - $realAnoAntTotal) / abs($realAnoAntTotal)) : null;
    $projAnoPerc    = ($orcAnoTotal != 0.0) ? ($projAnoTotal / $orcAnoTotal) : 0.0;

    $kpisVariaveis[] = [
        'id'            => (int)$dash['cdvariavel'],
        'nome'          => $dash['nome'],
        'modelo'        => $modelo,
        'orcAno'        => $orcAnoTotal,
        'realAno'       => $realAnoTotal,
        'realAnoAnt'    => $realAnoAntTotal,
        'atingPerc'     => $atingidoPerc,
        'restantePerc'  => $restantePerc,
        'varAno'        => $varAnoAnterior,
        'projAnoValor'  => $projAnoTotal,
        'projAnoPerc'   => $projAnoPerc,
    ];

    $mascaraPorVariavel[(int)$dash['cdvariavel']] = $dash['secoes'][0]['mascara'] ?? 'moeda';
}

// Resumo BI usa a primeira variável como principal
$kpiResumo = $kpisVariaveis[0] ?? null;
$mascaraPrincipal = null;
$modeloPrincipal = 'orcamento';
if ($kpiResumo) {
    $mascaraPrincipal = $mascaraPorVariavel[$kpiResumo['id']] ?? 'moeda';
    $modeloPrincipal = $modeloPorVariavel[$kpiResumo['id']] ?? 'orcamento';
}
?>

<div class="d-flex align-items-center justify-content-between mb-3 gap-2 flex-wrap">
    <h4 class="mb-0 d-flex align-items-center gap-2">
        <i class="bi bi-speedometer2"></i>
        <span>Dashboard</span>
        <small class="text-muted ms-2">Empresa <?= (int)$cdempresa ?> · Ano <?= htmlspecialchars((string)$anoref) ?></small>
    </h4>
    <div class="btn-group" role="group" aria-label="Visualização do dashboard">
        <button type="button" id="btnViewCharts" class="btn btn-sm btn-primary" title="Ver visão gráfica/BI">
            <i class="bi bi-bar-chart-fill"></i>
        </button>
        <button type="button" id="btnViewCards" class="btn btn-sm btn-outline-secondary" title="Ver visão em cards/planilha">
            <i class="bi bi-grid-3x3-gap"></i>
        </button>
    </div>
</div>
<hr>



<?php if (!empty($kpisVariaveis)): ?>
<div class="mb-4 d-flex flex-column gap-3">
    <?php foreach ($kpisVariaveis as $kpiVar): 
        $mascaraVar   = $mascaraPorVariavel[$kpiVar['id']] ?? 'moeda';
        $modelo       = $modeloPorVariavel[$kpiVar['id']] ?? 'orcamento';
        $lang         = obterLinguagem($modelo);
        $classeVarAnoVar = 'text-muted';
        if ($kpiVar['varAno'] !== null) {
            $classeVarAnoVar = ($kpiVar['varAno'] >= 0) ? 'text-success' : 'text-danger';
        }
    ?>
    <div class="card border-0 shadow-sm kpi-variable-card">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                <div>
                    <h5 class="mb-0"><?= htmlspecialchars($kpiVar['nome']) ?></h5>
                    <small class="text-muted"><?= htmlspecialchars($lang['descricao']) ?></small>
                </div>
                <span class="badge bg-light text-secondary border"><?= ucfirst($modelo) ?></span>
            </div>
            <div class="row g-3">
                <div class="col-6 col-md-4 col-xl-2">
                    <div class="small text-muted"><?= $lang['planejado'] ?> (Ano)</div>
                    <div class="h5 mb-0">
                        <?= formatarValorDashboard($kpiVar['orcAno'], $mascaraVar, $moeda) ?>
                    </div>
                    <div class="small text-muted"><?= $lang['planejado'] ?> do ano</div>
                </div>
                <div class="col-6 col-md-4 col-xl-2">
                    <div class="small text-muted"><?= $lang['realizado'] ?> (Ano)</div>
                    <div class="h5 mb-0">
                        <?= formatarValorDashboard($kpiVar['realAno'], $mascaraVar, $moeda) ?>
                    </div>
                    <div class="small text-muted">Valor já <?= strtolower($lang['realizado']) ?></div>
                </div>
                <div class="col-6 col-md-4 col-xl-2">
                    <div class="small text-muted"><?= $lang['percentual_label'] ?></div>
                    <div class="h5 mb-0 text-success">
                        <?= formatarPercentDashboard($kpiVar['atingPerc']) ?>
                    </div>
                    <div class="small text-muted"><?= $lang['percentual_desc'] ?></div>
                </div>
                <div class="col-6 col-md-4 col-xl-2">
                    <div class="small text-muted"><?= $lang['restante'] ?></div>
                    <div class="h5 mb-0 text-warning">
                        <?= formatarPercentDashboard($kpiVar['restantePerc']) ?>
                    </div>
                    <div class="small text-muted"><?= $lang['restante_desc'] ?></div>
                </div>
                <div class="col-6 col-md-4 col-xl-2">
                    <div class="small text-muted"><?= $lang['vs_anterior'] ?></div>
                    <div class="h5 mb-0 <?= $classeVarAnoVar ?>">
                        <?= $kpiVar['varAno'] === null ? '-' : formatarPercentDashboard($kpiVar['varAno']) ?>
                    </div>
                    <div class="small text-muted">Variação do realizado</div>
                </div>
                <div class="col-6 col-md-4 col-xl-2">
                    <div class="small text-muted"><?= $lang['projecao'] ?></div>
                    <div class="h5 mb-0">
                        <?= formatarValorDashboard($kpiVar['projAnoValor'], $mascaraVar, $moeda) ?>
                    </div>
                    <div class="small text-muted">Fechamento (<?= formatarPercentDashboard($kpiVar['projAnoPerc']) ?>)</div>
                </div>
            </div>
        </div>
    </div>
    <?php endforeach; ?>
</div>
<?php endif; ?>
</div>

<!-- Container dos cartões detalhados (tabela atual) -->
<div id="dashboardCardsContainer" class="d-flex flex-column gap-4 d-none">
<?php if (empty($dashboards)): ?>
    <div class="alert alert-light border text-muted">
        Nenhum dashboard configurado para esta empresa/ano.
    </div>
<?php else: ?>
<?php foreach ($dashboards as $dash): ?>
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-transparent border-0 pb-0">
            <h5 class="mb-1"><?= htmlspecialchars($dash['nome']) ?></h5>
            <small class="text-muted">Indicadores calculados dinamicamente a partir do orçamento e realizado do ano.</small>
        </div>
        <div class="card-body">
            <div class="row g-3">
                <?php foreach ($dash['secoes'] as $sec): 
                    $modeloDash = $dash['modelo'] ?? 'orcamento';
                    $langDash = obterLinguagem($modeloDash);
                    
                    $anoDados = $sec['ano'];
                    $mesDados = $sec['mes'];

                    $orcAno      = (float)$anoDados['orcado'];
                    $realAno     = (float)$anoDados['realizado'];
                    $atingAno    = (float)$anoDados['atingidoPerc'];
                    $restAno     = (float)$anoDados['restanteValor'];
                    $realAnoAnt  = (float)$anoDados['realizadoAnterior'];
                    $varAnoVsAnt = $anoDados['varAnteriorPerc'];
                    $projAnoValor= (float)$anoDados['projValor'];
                    $projAnoPerc = (float)$anoDados['projPerc'];

                    $orcMes      = (float)$mesDados['orcado'];
                    $realMes     = (float)$mesDados['realizado'];
                    $atingMes    = (float)$mesDados['atingidoPerc'];
                    $restMes     = (float)$mesDados['restanteValor'];
                    $realMesAnt  = (float)$mesDados['realizadoAnterior'];
                    $varMesVsAnt = $mesDados['varAnteriorPerc'];
                    $projMesValor= (float)$mesDados['projValor'];
                    $projMesPerc = (float)$mesDados['projPerc'];

                    $fmtOrcAno     = formatarValorDashboard($orcAno,   $sec['mascara'], $moeda);
                    $fmtRealAno    = formatarValorDashboard($realAno,  $sec['mascara'], $moeda);
                    $fmtRestAno    = formatarValorDashboard($restAno,  $sec['mascara'], $moeda);
                    $fmtOrcMes     = formatarValorDashboard($orcMes,   $sec['mascara'], $moeda);
                    $fmtRealMes    = formatarValorDashboard($realMes,  $sec['mascara'], $moeda);
                    $fmtRestMes    = formatarValorDashboard($restMes,  $sec['mascara'], $moeda);
                    $fmtRealAnoAnt = formatarValorDashboard($realAnoAnt, $sec['mascara'], $moeda);
                    $fmtRealMesAnt = formatarValorDashboard($realMesAnt, $sec['mascara'], $moeda);
                    $fmtProjAno    = formatarValorDashboard($projAnoValor, $sec['mascara'], $moeda);
                    $fmtProjMes    = formatarValorDashboard($projMesValor, $sec['mascara'], $moeda);
                ?>
                <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                    <div class="card h-100 border-0 shadow-sm dashboard-card">
                        <div class="card-body d-flex flex-column justify-content-between">
                            <div>
                                <div class="text-muted small mb-1"><?= htmlspecialchars($sec['titulo']) ?></div>
                                <div class="small text-uppercase text-secondary mb-1">Ano <?= htmlspecialchars((string)$anoref) ?></div>
                                <div class="mb-2">
                                    <div class="d-flex justify-content-between small"><span><?= $langDash['planejado'] ?></span><span class="fw-semibold"><?= $fmtOrcAno ?></span></div>
                                    <div class="d-flex justify-content-between small"><span><?= $langDash['realizado'] ?></span><span class="fw-semibold text-primary"><?= $fmtRealAno ?></span></div>
                                    <div class="d-flex justify-content-between small"><span><?= $langDash['percentual_label'] ?></span><span><?= formatarPercentDashboard($atingAno) ?></span></div>
                                    <div class="d-flex justify-content-between small"><span><?= $langDash['restante'] ?></span><span><?= $fmtRestAno ?> (<?= formatarPercentDashboard(max(0.0, 1.0 - $atingAno)) ?>)</span></div>
                                    <div class="d-flex justify-content-between small"><span><?= $langDash['realizado'] ?> ano ant.</span><span class="fw-semibold text-muted"><?= $fmtRealAnoAnt ?></span></div>
                                    <div class="d-flex justify-content_between small"><span>Vs ano ant.</span><span><?= $varAnoVsAnt === null ? '-' : formatarPercentDashboard($varAnoVsAnt) ?></span></div>
                                    <div class="d-flex justify-content-between small"><span>Projeção ano</span><span><?= $fmtProjAno ?> (<?= formatarPercentDashboard($projAnoPerc) ?>)</span></div>
                                </div>
                                <hr class="my-2">
                                <div class="small text-uppercase text-secondary mb-1">Mês <?= htmlspecialchars($nomeMesAtual) ?></div>
                                <div>
                                    <div class="d-flex justify-content-between small"><span><?= $langDash['planejado'] ?></span><span class="fw-semibold"><?= $fmtOrcMes ?></span></div>
                                    <div class="d-flex justify-content-between small"><span><?= $langDash['realizado'] ?></span><span class="fw-semibold text-primary"><?= $fmtRealMes ?></span></div>
                                    <div class="d-flex justify-content-between small"><span><?= $langDash['percentual_label'] ?></span><span><?= formatarPercentDashboard($atingMes) ?></span></div>
                                    <div class="d-flex justify-content-between small"><span><?= $langDash['restante'] ?></span><span><?= $fmtRestMes ?> (<?= formatarPercentDashboard(max(0.0, 1.0 - $atingMes)) ?>)</span></div>
                                    <div class="d-flex justify-content-between small"><span><?= $langDash['realizado'] ?> ano ant. (mês)</span><span class="fw-semibold text-muted"><?= $fmtRealMesAnt ?></span></div>
                                    <div class="d-flex justify-content-between small"><span>Vs ano ant. (mês)</span><span><?= $varMesVsAnt === null ? '-' : formatarPercentDashboard($varMesVsAnt) ?></span></div>
                                    <div class="d-flex justify-content-between small"><span>Proj. média mês</span><span><?= $fmtProjMes ?> (<?= formatarPercentDashboard($projMesPerc) ?>)</span></div>
                                </div>
                            </div>
                            <div class="mt-2 d-flex justify-content-between align-items-center small text-muted">
                                <span class="badge bg-<?= $sec['mascara']==='percentual' ? 'info' : 'primary' ?>">Fórmula</span>
                                <span><?= htmlspecialchars($sec['formula']) ?></span>
                            </div>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
<?php endforeach; ?>
<?php endif; ?>
</div>

<style>
.dashboard-card {
    background: linear-gradient(145deg, #f8f9fa, #ffffff);
    border-radius: 14px;
}
.dashboard-card .h4 {
    font-weight: 700;
}
.kpi-card {
    background: linear-gradient(135deg, #f8fafc, #ffffff);
    border-radius: 14px;
}
.dashboard-chart-wrapper-line {
    position: relative;
    height: 280px;
}
.kpi-label {
    letter-spacing: 0.03em;
}
.kpi-icon {
    font-size: 1.4rem;
}
.dashboard-chart-wrapper {
    position: relative;
    height: 260px;
}
@media (min-width: 1400px) {
    .dashboard-chart-wrapper {
        height: 320px;
    }
}
@media (max-width: 768px) {
    .dashboard-card {
        border-radius: 10px;
    }
    .kpi-card {
        border-radius: 10px;
    }
    .dashboard-chart-wrapper-line {
        height: 220px;
    }
    .dashboard-chart-wrapper {
        height: 220px;
    }
    .dashboard-chart-wrapper-donut {
        height: 200px;
    }
    .kpi-icon {
        font-size: 1.2rem;
    }
}
.dashboard-chart-wrapper-donut {
    position: relative;
    height: 220px;
}
.kpi-variable-card {
    background: #ffffff;
    border-radius: 14px;
}

/* Toggle visibility */
</style>

<!-- Chart.js e inicialização dos gráficos do dashboard -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
    const dashboardChartData = <?= json_encode($chartData, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>; // atualmente não usado, mantido para futuras evoluções
    const dashboardMoeda     = <?= json_encode($moeda, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
    const dashboardAnoRef    = <?= (int)$anoref ?>;
    const dashboardMesNome   = <?= json_encode($nomeMesAtual, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
    const dashboardKpiResumo = <?= json_encode($kpiResumo, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
    const dashboardSerieYtd  = <?= json_encode($serieYtd, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
    const dashboardModelo    = <?= json_encode($modeloPrincipal, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
    
    // Função de linguagem dinâmica
    function getLinguagem(modelo) {
        if (modelo === 'meta') {
            return {
                realizado: 'Realizado',
                restante: 'Falta para a Meta'
            };
        }
        return {
            realizado: 'Gasto Realizado',
            restante: 'Saldo Disponível'
        };
    }
    
    const dashboardLinguagem = getLinguagem(dashboardModelo);

    document.addEventListener('DOMContentLoaded', function () {
        function formatValor(v) {
            if (!dashboardMoeda) return v.toFixed(2);
            const simbolo = dashboardMoeda.simbolo || 'R$';
            const formato = dashboardMoeda.formato || 'decimal';
            const casas   = (formato === 'inteiro') ? 0 : 2;
            return simbolo + ' ' + v.toLocaleString('pt-BR', { minimumFractionDigits: casas, maximumFractionDigits: casas });
        }

        function buildKpiDonut() {
            if (!window.Chart || !dashboardKpiResumo) return;
            const ctx = document.getElementById('chart-kpi-donut');
            if (!ctx) return;

            const orc = Number(dashboardKpiResumo.orcAno || 0);
            const real = Number(dashboardKpiResumo.realAno || 0);
            const restante = Math.max(0, orc - real);

            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: [dashboardLinguagem.realizado, dashboardLinguagem.restante],
                    datasets: [{
                        data: [real, restante],
                        backgroundColor: [
                            'rgba(40, 167, 69, 0.85)',
                            'rgba(223, 230, 237, 0.9)'
                        ],
                        borderWidth: 0,
                        hoverOffset: 4,
                    }]
                },
                options: {
                    cutout: '70%',
                    plugins: {
                        legend: { position: 'bottom' },
                        tooltip: {
                            callbacks: {
                                label: function(ctx) {
                                    const label = ctx.label || '';
                                    const v = Number(ctx.raw || 0);
                                    const perc = orc !== 0 ? (v / orc) : 0;
                                    const percTxt = (perc * 100).toFixed(1).replace('.', ',') + '%';
                                    return label + ': ' + formatValor(v) + ' (' + percTxt + ')';
                                }
                            }
                        }
                    }
                }
            });
        }

        function buildYtdLine() {
            if (!window.Chart || !dashboardSerieYtd) return;
            const ctx = document.getElementById('chart-ytd');
            if (!ctx) return;

            const labels = dashboardSerieYtd.labels || [];
            const anoAtual = (dashboardSerieYtd.anoAtual || []).map(Number);
            const anoAnterior = (dashboardSerieYtd.anoAnterior || []).map(Number);

            const diff = anoAtual.map((v, i) => v - (anoAnterior[i] || 0));
            const pointRadiusAtual = diff.map((d, i) => {
                if (i === 0) return 3;
                const prev = diff[i-1];
                return (prev === 0 || d === 0 || (prev > 0 && d < 0) || (prev < 0 && d > 0)) ? 5 : 3;
            });
            const pointBackgroundAtual = diff.map((d, i) => pointRadiusAtual[i] > 3 ? 'rgba(255, 193, 7, 1)' : 'rgba(13, 110, 253, 1)');

            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: 'Ano atual',
                            data: anoAtual,
                            borderColor: 'rgba(13, 110, 253, 1)',
                            backgroundColor: 'rgba(13, 110, 253, 0.1)',
                            borderWidth: 2,
                            tension: 0.25,
                            pointRadius: pointRadiusAtual,
                            pointBackgroundColor: pointBackgroundAtual,
                            pointBorderWidth: 1,
                        },
                        {
                            label: 'Ano anterior',
                            data: anoAnterior,
                            borderColor: 'rgba(108, 117, 125, 1)',
                            backgroundColor: 'rgba(108, 117, 125, 0.05)',
                            borderWidth: 2,
                            tension: 0.25,
                            borderDash: [6, 4],
                            pointRadius: 3,
                            pointBackgroundColor: 'rgba(108, 117, 125, 1)',
                        },
                    ],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: {
                        mode: 'index',
                        intersect: false,
                    },
                    scales: {
                        y: {
                            ticks: {
                                callback: function(value) { return formatValor(value); }
                            }
                        }
                    },
                    plugins: {
                        legend: { position: 'bottom' },
                        tooltip: {
                            callbacks: {
                                label: function(ctx) {
                                    const v = Number(ctx.parsed.y || 0);
                                    const idx = ctx.dataIndex;
                                    const isAtual = ctx.datasetIndex === 0;
                                    let base = 0;
                                    if (isAtual) {
                                        base = Number(anoAnterior[idx] || 0);
                                    } else {
                                        base = Number(anoAtual[idx] || 0);
                                    }
                                    let varTxt = '';
                                    if (base !== 0) {
                                        const perc = (v - base) / Math.abs(base);
                                        varTxt = ' · ' + (perc * 100).toFixed(1).replace('.', ',') + '% vs ano ' + (isAtual ? 'ant.' : 'atual');
                                    }
                                    return ctx.dataset.label + ': ' + formatValor(v) + varTxt;
                                }
                            }
                        }
                    }
                }
            });
        }

        const btnCharts = document.getElementById('btnViewCharts');
        const btnCards  = document.getElementById('btnViewCards');
        const contCharts= document.getElementById('dashboardChartsContainer');
        const contCards = document.getElementById('dashboardCardsContainer');

        if (btnCharts && btnCards && contCharts && contCards) {
            function mostrarGraficos() {
                contCharts.classList.remove('d-none');
                contCharts.style.display = 'block';
                contCards.classList.add('d-none');
                contCards.style.display = 'none';
                btnCharts.classList.add('btn-primary');
                btnCharts.classList.remove('btn-outline-secondary');
                btnCards.classList.remove('btn-primary');
                btnCards.classList.add('btn-outline-secondary');
            }

            function mostrarPlanilha() {
                contCharts.classList.add('d-none');
                contCharts.style.display = 'none';
                contCards.classList.remove('d-none');
                contCards.style.display = 'flex';
                btnCards.classList.add('btn-primary');
                btnCards.classList.remove('btn-outline-secondary');
                btnCharts.classList.remove('btn-primary');
                btnCharts.classList.add('btn-outline-secondary');
            }

            mostrarGraficos();

            btnCharts.addEventListener('click', function (e) {
                e.preventDefault();
                mostrarGraficos();
            });

            btnCards.addEventListener('click', function (e) {
                e.preventDefault();
                mostrarPlanilha();
            });
        }

        buildKpiDonut();
        buildYtdLine();
    });
</script>