<?php
$fmt        = fn($v) => $v > 0 ? number_format((float)$v, 2, ',', '.') : '';
$nomeMeses  = ['','Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'];
$abrevMeses = ['','Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'];
$metasAno   = $metas[$anoSel] ?? array_fill_keys(range(1,12), 0);
$totalMeta  = array_sum($metasAno);
$mesAtual   = (int)date('m');
$anoAtual   = (int)date('Y');
$mesesPreenchidos = count(array_filter($metasAno, fn($v) => $v > 0));
$diasAno    = (date('L', mktime(0, 0, 0, 1, 1, $anoSel))) ? 366 : 365;
$mediaDia   = $totalMeta > 0 ? $totalMeta / $diasAno : 0;
$mediaMes   = $mesesPreenchidos > 0 ? $totalMeta / $mesesPreenchidos : 0;
?>
<div class="pbi-page-header">
    <h1 class="pbi-page-title"><i class="bi bi-bullseye me-2 text-accent"></i>Metas Mensais</h1>
</div>

<?php if (\App\Core\Lojas::multi()):
    $lojaId  = \App\Core\Lojas::idAtiva();
    $lojaNom = $lojaId ? (\App\Core\Lojas::get($lojaId)['nome'] ?? $lojaId) : '';
?>
<div class="pbi-hint mb-3" style="margin-top:0">
    <i class="bi bi-shop me-1"></i>Estas metas são <strong>só da loja
    <span style="color:#b45309">«<?= \App\Core\View::e($lojaNom) ?>»</span></strong>.
    Cada loja tem as suas — pra editar outra, troque a loja no seletor lá em cima e volte aqui.
</div>
<?php endif; ?>

<?php if($salvo): ?>
<div class="alert alert-success d-flex align-items-center gap-2 mb-3" id="metas-salvo-alert">
    <i class="bi bi-check-circle-fill"></i> Metas de <?= $anoSel ?> salvas com sucesso.
</div>
<script>setTimeout(function(){var a=document.getElementById('metas-salvo-alert');if(a)a.style.display='none';},4000);</script>
<?php endif; ?>

<!-- Seletor de ANO (horizontal, limpo) -->
<div class="pbi-card mb-3">
    <div class="pbi-card-header"><i class="bi bi-calendar3 me-2 text-accent"></i>Ano</div>
    <div class="p-3 d-flex flex-wrap gap-2">
        <?php foreach($anos as $a): ?>
        <a href="/metas?ano=<?= $a ?>" class="pbi-ano-btn <?= $a===$anoSel?'active':'' ?>"
           style="font-size:.95rem;padding:.45rem 1.1rem"><?= $a ?></a>
        <?php endforeach; ?>
    </div>
</div>

<!-- KPIs resumo do ano selecionado -->
<div class="row g-3 mb-3">
    <div class="col-12 col-md-4">
        <div class="pbi-kpi-card">
            <div class="pbi-kpi-label"><i class="bi bi-bullseye me-1"></i>Total Anual <?= $anoSel ?></div>
            <div class="pbi-kpi-valor text-accent">R$ <?= number_format($totalMeta,2,',','.') ?></div>
            <div class="pbi-kpi-extra small text-muted">soma das 12 metas mensais</div>
        </div>
    </div>
    <div class="col-12 col-md-4">
        <div class="pbi-kpi-card">
            <div class="pbi-kpi-label"><i class="bi bi-calendar-month me-1"></i>Média por Mês</div>
            <div class="pbi-kpi-valor">R$ <?= number_format($mediaMes,2,',','.') ?></div>
            <div class="pbi-kpi-extra small text-muted">
                <?= $mesesPreenchidos ?> de 12 meses preenchidos
            </div>
        </div>
    </div>
    <div class="col-12 col-md-4">
        <div class="pbi-kpi-card">
            <div class="pbi-kpi-label"><i class="bi bi-calendar-day me-1"></i>Média por Dia</div>
            <div class="pbi-kpi-valor">R$ <?= number_format($mediaDia,2,',','.') ?></div>
            <div class="pbi-kpi-extra small text-muted">
                total ÷ <?= $diasAno ?> dias do ano
            </div>
        </div>
    </div>
</div>

<form method="post" action="/metas/salvar" id="form-metas">
    <input type="hidden" name="ano" value="<?= $anoSel ?>">

    <!-- BARRA DE ACOES RAPIDAS -->
    <div class="pbi-card mb-3">
        <div class="pbi-card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
            <span><i class="bi bi-lightning-charge me-2 text-accent"></i>Ações rápidas</span>
            <small class="text-muted">atalhos pra não digitar mês por mês</small>
        </div>
        <div class="p-3 d-flex flex-wrap gap-2 align-items-center">
            <div class="input-group input-group-sm" style="max-width:260px">
                <span class="input-group-text">R$</span>
                <input type="text" id="metaTodosInput" class="form-control" placeholder="ex: 150.000,00">
                <button type="button" class="btn btn-outline-primary btn-sm" id="btnReplicarTodos">
                    <i class="bi bi-arrows-fullscreen me-1"></i>Aplicar a TODOS os meses
                </button>
            </div>
            <span class="text-muted small">ou</span>
            <div class="input-group input-group-sm" style="max-width:260px">
                <input type="number" id="pctAumento" class="form-control" placeholder="ex: 10" min="-100" max="500" step="1">
                <span class="input-group-text">%</span>
                <button type="button" class="btn btn-outline-success btn-sm" id="btnAumentar">
                    <i class="bi bi-arrow-up-right me-1"></i>Aumentar todos
                </button>
            </div>
            <button type="button" class="btn btn-outline-secondary btn-sm" id="btnLimpar">
                <i class="bi bi-eraser me-1"></i>Limpar tudo
            </button>
        </div>
    </div>

    <!-- TABELA DE METAS -->
    <div class="pbi-card mb-3">
        <div class="pbi-card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
            <span><i class="bi bi-table me-2 text-accent"></i>Metas de <?= $anoSel ?></span>
            <span class="badge" style="background:rgba(79,142,247,.12);color:var(--pbi-accent,#3b82f6);font-weight:600;padding:.4rem .7rem">
                Total: R$ <span id="metas-total-vivo"><?= number_format($totalMeta,2,',','.') ?></span>
            </span>
        </div>
        <div class="table-responsive">
            <table class="pbi-table" id="tabela-metas">
                <thead>
                    <tr>
                        <th style="width:60px">#</th>
                        <th>Mês</th>
                        <th>Status</th>
                        <th>Meta de Faturamento (R$)</th>
                        <th class="text-end">Meta/dia</th>
                    </tr>
                </thead>
                <tbody>
                <?php for($m = 1; $m <= 12; $m++):
                    $diasMes    = cal_days_in_month(CAL_GREGORIAN, $m, $anoSel);
                    $valMeta    = (float)($metasAno[$m] ?? 0);
                    $metaDia    = $valMeta > 0 ? $valMeta / $diasMes : 0;
                    $isMesAtual = ($m === $mesAtual && $anoSel === $anoAtual);
                    $isPassado  = ($anoSel < $anoAtual) || ($anoSel === $anoAtual && $m < $mesAtual);
                    $isFuturo   = !$isMesAtual && !$isPassado;
                    if ($isMesAtual)      { $statusBg='#fef3c7'; $statusFg='#92400e'; $statusIc='bi-arrow-right-circle-fill'; $statusTx='Mês atual'; }
                    elseif ($isPassado)   { $statusBg='#e5e7eb'; $statusFg='#4b5563'; $statusIc='bi-check2-circle'; $statusTx='Encerrado'; }
                    else                  { $statusBg='#dbeafe'; $statusFg='#1e3a8a'; $statusIc='bi-clock';        $statusTx='Próximo'; }
                    $rowBg = $isMesAtual ? 'background:rgba(245,158,11,.05)' : '';
                ?>
                <tr style="<?= $rowBg ?>" data-mes="<?= $m ?>" data-dias="<?= $diasMes ?>">
                    <td class="text-muted small"><?= $m ?></td>
                    <td class="fw-bold <?= $isMesAtual ? 'text-accent' : '' ?>">
                        <?= $nomeMeses[$m] ?>
                        <span class="text-muted small d-block d-md-inline"> · <?= $diasMes ?> dias</span>
                    </td>
                    <td>
                        <span class="badge" style="background:<?= $statusBg ?>;color:<?= $statusFg ?>;font-weight:600;padding:.35rem .65rem;font-size:.75rem">
                            <i class="bi <?= $statusIc ?> me-1"></i><?= $statusTx ?>
                        </span>
                    </td>
                    <td style="min-width:240px;max-width:340px">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text" style="background:var(--pbi-surface-2);border-color:var(--pbi-border);color:var(--pbi-text-muted)">R$</span>
                            <input type="text"
                                   name="meta_<?= $m ?>"
                                   value="<?= $fmt($valMeta) ?>"
                                   class="form-control pbi-meta-input meta-input"
                                   placeholder="0,00"
                                   inputmode="decimal"
                                   data-mes="<?= $m ?>"
                                   style="border-color:var(--pbi-border);background:var(--pbi-surface);color:var(--pbi-text);font-weight:600">
                            <button type="button" class="btn btn-outline-secondary btn-sm btn-replicar-acima"
                                    title="Copiar deste mês pros próximos"
                                    style="border-color:var(--pbi-border)">
                                <i class="bi bi-arrow-down"></i>
                            </button>
                        </div>
                    </td>
                    <td class="text-end text-muted small meta-dia">
                        <?= $metaDia > 0 ? 'R$ ' . number_format($metaDia, 0, ',', '.') . '/dia' : '—' ?>
                    </td>
                </tr>
                <?php endfor; ?>
                </tbody>
            </table>
        </div>

        <!-- AÇÕES SALVAR — FIXO E VISÍVEL -->
        <div class="p-3 d-flex justify-content-between align-items-center flex-wrap gap-2"
             style="background:var(--pbi-surface-2,#f8fafc);border-top:1px solid var(--pbi-border)">
            <div>
                <strong>Total anual:</strong>
                <span class="text-accent fw-bold" style="font-size:1.1rem">
                    R$ <span id="metas-total-rodape"><?= number_format($totalMeta,2,',','.') ?></span>
                </span>
                <span class="text-muted small ms-2">· R$ <span id="metas-mediadia-rodape"><?= number_format($mediaDia,0,',','.') ?></span>/dia médio</span>
            </div>
            <div class="d-flex gap-2">
                <a href="/dashboard" class="btn btn-outline-secondary btn-sm">
                    <i class="bi bi-speedometer2 me-1"></i>Ver Dashboard
                </a>
                <button type="submit" class="pbi-btn-filtrar btn">
                    <i class="bi bi-save me-1"></i>Salvar Metas <?= $anoSel ?>
                </button>
            </div>
        </div>
    </div>
</form>

<div class="pbi-card">
    <div class="pbi-card-header"><i class="bi bi-info-circle me-2"></i>Como usar</div>
    <div class="p-3 text-muted small">
        <ul class="mb-0" style="padding-left:1.2rem">
            <li>Digite a meta de cada mês (vírgula como decimal: <strong>150.000,00</strong>) — ou use as <strong>ações rápidas</strong> em cima.</li>
            <li>O botão <i class="bi bi-arrow-down"></i> ao lado de cada mês <strong>replica o valor pros meses seguintes</strong> (útil pra meta constante ou base).</li>
            <li>Após salvar, o Dashboard Executivo mostra automaticamente o <strong>progresso da meta</strong> e a <strong>projeção do mês</strong>.</li>
            <?php if(\App\Core\Lojas::multi()): ?>
            <li><strong>Multi-loja:</strong> cada loja tem as suas metas próprias.</li>
            <?php endif; ?>
        </ul>
    </div>
</div>

<script>
(function(){
    'use strict';
    // utilitarios de moeda BR
    function parseBR(s){ if(!s)return 0; s=String(s).replace(/\./g,'').replace(',', '.').replace(/[^0-9.\-]/g,''); var n=parseFloat(s); return isNaN(n)?0:n; }
    function fmtBR(n){ return n.toLocaleString('pt-BR',{minimumFractionDigits:2, maximumFractionDigits:2}); }
    function fmtBR0(n){ return n.toLocaleString('pt-BR',{minimumFractionDigits:0, maximumFractionDigits:0}); }

    var inputs = document.querySelectorAll('.meta-input');
    var diasAno = <?= $diasAno ?>;

    function recalcular(){
        var total = 0;
        inputs.forEach(function(inp){
            var v = parseBR(inp.value);
            total += v;
            // atualiza meta/dia da linha
            var tr = inp.closest('tr');
            if(!tr) return;
            var dias = parseInt(tr.getAttribute('data-dias'),10) || 30;
            var celDia = tr.querySelector('.meta-dia');
            if(celDia){
                celDia.textContent = v > 0 ? ('R$ ' + fmtBR0(v / dias) + '/dia') : '—';
            }
        });
        var elT = document.getElementById('metas-total-vivo');     if(elT) elT.textContent = fmtBR(total);
        var elR = document.getElementById('metas-total-rodape');   if(elR) elR.textContent = fmtBR(total);
        var elM = document.getElementById('metas-mediadia-rodape');if(elM) elM.textContent = fmtBR0(total/diasAno);
    }

    // formata o input pro padrao BR ao SAIR do campo
    function formatarInput(inp){
        var v = parseBR(inp.value);
        inp.value = v > 0 ? fmtBR(v) : '';
    }

    inputs.forEach(function(inp){
        inp.addEventListener('input', recalcular);
        inp.addEventListener('blur', function(){ formatarInput(inp); recalcular(); });
        // seleciona tudo ao focar (mais facil sobrescrever)
        inp.addEventListener('focus', function(){ inp.select(); });
    });

    // botao de replicar (seta pra baixo) — copia este valor pros meses SEGUINTES
    document.querySelectorAll('.btn-replicar-acima').forEach(function(btn){
        btn.addEventListener('click', function(){
            var tr = btn.closest('tr');
            var mes = parseInt(tr.getAttribute('data-mes'),10);
            var v = parseBR(tr.querySelector('.meta-input').value);
            if(v <= 0){ alert('Digite um valor neste mês primeiro.'); return; }
            inputs.forEach(function(inp){
                var im = parseInt(inp.getAttribute('data-mes'),10);
                if(im > mes){ inp.value = fmtBR(v); }
            });
            recalcular();
        });
    });

    // aplicar a TODOS
    document.getElementById('btnReplicarTodos').addEventListener('click', function(){
        var v = parseBR(document.getElementById('metaTodosInput').value);
        if(v <= 0){ alert('Digite um valor para aplicar a todos os meses.'); return; }
        inputs.forEach(function(inp){ inp.value = fmtBR(v); });
        recalcular();
    });

    // aumentar %
    document.getElementById('btnAumentar').addEventListener('click', function(){
        var pct = parseFloat(document.getElementById('pctAumento').value);
        if(isNaN(pct)){ alert('Digite uma porcentagem (ex: 10).'); return; }
        var fator = 1 + (pct/100);
        var algum = false;
        inputs.forEach(function(inp){
            var v = parseBR(inp.value);
            if(v > 0){ inp.value = fmtBR(v * fator); algum = true; }
        });
        if(!algum){ alert('Não há metas preenchidas para aumentar. Use "Aplicar a todos" primeiro.'); return; }
        recalcular();
    });

    // limpar
    document.getElementById('btnLimpar').addEventListener('click', function(){
        if(!confirm('Limpar todas as metas digitadas neste ano?')) return;
        inputs.forEach(function(inp){ inp.value = ''; });
        recalcular();
    });
})();
</script>
