<?php
/**
 * Clientes / Inativos — shell instantâneo.
 */
$opcoesDias = [30 => '30 dias', 60 => '60 dias', 90 => '90 dias', 180 => '180 dias', 365 => '1 ano'];
?>
<div class="pbi-page-header">
    <h1 class="pbi-page-title"><i class="bi bi-person-x-fill me-2 text-accent"></i>Clientes Inativos</h1>
</div>
<?php include __DIR__ . '/_submenu.php' ?>

<!-- Filtro -->
<form method="get" class="pbi-filtro-barra mb-3">
    <div class="pbi-filtro-row">
        <div class="pbi-filtro-field">
            <label class="pbi-filtro-label">Sem compra há mais de</label>
            <select name="dias" class="pbi-filtro-input form-select" onchange="this.form.submit()">
                <?php foreach ($opcoesDias as $v => $l): ?>
                <option value="<?= $v ?>" <?= ($dias??60)==$v?'selected':'' ?>><?= $l ?></option>
                <?php endforeach; ?>
            </select>
        </div>
        <button type="submit" class="pbi-btn-filtrar btn"><i class="bi bi-funnel me-1"></i>Filtrar</button>
    </div>
</form>

<!-- ── KPIs skeleton ─────────────────────────────────────────────────────── -->
<div class="pbi-kpi-grid mb-3" id="kpi-grid">
    <?php for ($i = 0; $i < 4; $i++): ?>
    <div class="pbi-kpi-card">
        <div class="pbi-kpi-label pbi-skeleton" style="width:60%;height:.8rem;border-radius:4px">&nbsp;</div>
        <div class="pbi-kpi-value pbi-skeleton mt-2" style="width:80%;height:1.6rem;border-radius:4px">&nbsp;</div>
    </div>
    <?php endfor; ?>
</div>
<div class="pbi-hint mb-3" style="margin-top:0"><strong>Cliente inativo</strong> = não compra há mais tempo que o prazo escolhido acima. <strong>Volume Histórico</strong> = total que esses clientes já compraram; <strong>Média de Inatividade</strong> = média de dias sem comprar.</div>

<!-- ── Área de gráficos ───────────────────────────────────────────────────── -->
<div id="charts-area" class="row g-3 mb-3" style="display:none!important"></div>

<!-- ── Tabela (async) ────────────────────────────────────────────────────── -->
<div class="pbi-card" id="card-inativos">
    <div class="pbi-card-header d-flex justify-content-between">
        <span><i class="bi bi-person-x me-2"></i>Lista de Inativos</span>
        <small class="text-muted" id="inativos-badge">
            <span class="pbi-skeleton d-inline-block" style="width:120px;height:.75rem;border-radius:3px">&nbsp;</span>
        </small>
        <div class="pbi-hint" style="margin-top:.35rem">Clientes que pararam de comprar. <strong>Dias Inativo</strong> = há quantos dias não compram. Bons candidatos para uma ação de reativação.</div>
    </div>
    <div id="inativos-body">
        <div class="table-responsive">
            <table class="pbi-table">
                <thead><tr>
                    <th>Cliente</th><th>Telefone</th>
                    <th class="text-center">Compras</th>
                    <th class="text-end">Últ. Compra (R$)</th>
                    <th class="text-end">Total Histórico</th>
                    <th class="text-center">Última Compra</th>
                    <th class="text-center">Dias Inativo</th>
                </tr></thead>
                <tbody>
                <?php for ($i = 0; $i < 8; $i++): ?>
                <tr>
                    <?php foreach ([140,80,50,80,90,65,60] as $w): ?>
                    <td><span class="pbi-skeleton d-inline-block" style="width:<?= $w ?>px;height:.75rem;border-radius:3px">&nbsp;</span></td>
                    <?php endforeach; ?>
                </tr>
                <?php endfor; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
window.__CLIENTES_INATIVOS = {
    dias: <?= (int)($dias??60) ?>
};
</script>

<style>
@keyframes pbi-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.pbi-skeleton{background:var(--pbi-border,#e2e8f0);animation:pbi-pulse 1.4s ease-in-out infinite;pointer-events:none;color:transparent!important}
</style>

<script>
(function(){
'use strict';

var dias = window.__CLIENTES_INATIVOS.dias;

function fmtR(v){return 'R$ '+parseFloat(v||0).toLocaleString('pt-BR',{minimumFractionDigits:2,maximumFractionDigits:2});}
function fmtN(v){return parseFloat(v||0).toLocaleString('pt-BR',{minimumFractionDigits:0,maximumFractionDigits:0});}
function fmtData(s){if(!s)return'—';var d=String(s).substring(0,10);return d.substring(8,10)+'/'+d.substring(5,7)+'/'+d.substring(0,4);}
function esc(s){var d=document.createElement('div');d.textContent=s||'';return d.innerHTML;}
function apiFetch(url){
    return fetch(url,{credentials:'same-origin'}).then(function(r){
        if(!r.ok)return r.json().then(function(e){throw new Error(e.erro||'HTTP '+r.status);});
        return r.json();
    });
}

function renderInativos(linhas, diasResp) {
    diasResp = diasResp || dias;
    var total = linhas.length;
    var totalValor = linhas.reduce(function(s,r){return s+parseFloat(r.TOTAL_COMPRA||0);},0);
    var ticketMedio = total > 0 ? totalValor/total : 0;
    var diasMedia   = total > 0 ? linhas.reduce(function(s,r){return s+parseInt(r.DIAS_SEM_COMPRA||0);},0)/total : 0;

    // KPIs
    document.getElementById('kpi-grid').innerHTML =
        '<div class="pbi-kpi-card"><div class="pbi-kpi-label">Clientes Inativos</div>'
        + '<div class="pbi-kpi-value text-danger">'+fmtN(total)+'</div>'
        + '<div class="pbi-kpi-sub">sem compra há '+diasResp+'+ dias</div></div>'
        + '<div class="pbi-kpi-card"><div class="pbi-kpi-label">Volume Histórico</div>'
        + '<div class="pbi-kpi-value text-accent">'+fmtR(totalValor)+'</div>'
        + '<div class="pbi-kpi-sub">total comprado por eles</div></div>'
        + '<div class="pbi-kpi-card"><div class="pbi-kpi-label">Ticket Médio Histórico</div>'
        + '<div class="pbi-kpi-value">'+fmtR(ticketMedio)+'</div></div>'
        + '<div class="pbi-kpi-card"><div class="pbi-kpi-label">Média de Inatividade</div>'
        + '<div class="pbi-kpi-value text-warning">'+fmtN(diasMedia)+' dias</div></div>';

    document.getElementById('inativos-badge').textContent =
        total + ' clientes · sem compra há ' + diasResp + '+ dias';

    if (!linhas.length) {
        document.getElementById('inativos-body').innerHTML =
            '<p class="text-center text-muted py-4">Nenhum cliente inativo encontrado.</p>';
        return;
    }

    var rows = linhas.map(function(r){
        var di   = parseInt(r.DIAS_SEM_COMPRA||0);
        var cor  = di > 365 ? 'text-danger' : (di > 180 ? 'text-warning' : 'text-muted');
        var tel  = (r.CEL_PRINC||r.FONE_PRINC||'—');
        return '<tr>'
            + '<td class="fw-semibold">'+esc((r.NOME||'—').substring(0,40))+'</td>'
            + '<td>'+esc(tel)+'</td>'
            + '<td class="text-center">'+fmtN(r.NUMERO_COMPRAS||0)+'</td>'
            + '<td class="text-end">'+fmtR(r.VLR_ULT_COMPRA||0)+'</td>'
            + '<td class="text-end fw-bold">'+fmtR(r.TOTAL_COMPRA||0)+'</td>'
            + '<td class="text-center">'+fmtData(r.DATA_ULT_COMPRA)+'</td>'
            + '<td class="text-center"><span class="fw-bold '+cor+'">'+fmtN(di)+'</span></td>'
            + '</tr>';
    }).join('');

    document.getElementById('inativos-body').innerHTML =
        '<div class="table-responsive"><table class="pbi-table">'
        + '<thead><tr><th>Cliente</th><th>Telefone</th>'
        + '<th class="text-center">Compras</th><th class="text-end">Últ. Compra (R$)</th>'
        + '<th class="text-end">Total Histórico</th><th class="text-center">Última Compra</th>'
        + '<th class="text-center">Dias Inativo</th></tr></thead>'
        + '<tbody>'+rows+'</tbody></table></div>';

    // Gráficos
    if (linhas.length && typeof echarts !== 'undefined') {
        var faixas = {'60-90':0,'91-180':0,'181-365':0,'365+':0};
        linhas.forEach(function(r){
            var d=parseInt(r.DIAS_SEM_COMPRA||0);
            if(d<=90)faixas['60-90']++;
            else if(d<=180)faixas['91-180']++;
            else if(d<=365)faixas['181-365']++;
            else faixas['365+']++;
        });

        var top10 = linhas.slice().sort(function(a,b){return parseFloat(b.TOTAL_COMPRA||0)-parseFloat(a.TOTAL_COMPRA||0);}).slice(0,10);

        var area = document.getElementById('charts-area');
        area.style.removeProperty('display');
        area.innerHTML =
            '<div class="col-12 col-md-5"><div class="pbi-card h-100">'
            + '<div class="pbi-card-header"><i class="bi bi-pie-chart me-2 text-accent"></i>Distribuição por Inatividade</div>'
            + '<div id="chartFaixas" style="height:220px"></div></div></div>'
            + '<div class="col-12 col-md-7"><div class="pbi-card h-100">'
            + '<div class="pbi-card-header"><i class="bi bi-bar-chart me-2 text-accent"></i>Top 10 — Maior Volume Histórico</div>'
            + '<div id="chartTopClientes" style="height:220px"></div></div></div>';

        var txtClr='#94a3b8';
        var totalFaixasInat = faixas['60-90']+faixas['91-180']+faixas['181-365']+faixas['365+'];
        var c1=echarts.init(document.getElementById('chartFaixas'));
        c1.setOption({backgroundColor:'transparent',
            title: pbiTotalDonut(totalFaixasInat, '50%', '40%', String, 'Clientes'),
            tooltip:{trigger:'item',formatter:'{b}: {c} ({d}%)'},
            legend:{type:'scroll',orient:'horizontal',bottom:0,left:'center',textStyle:{fontSize:10,color:txtClr},itemWidth:11,itemHeight:11,pageIconSize:9},
            series:[{type:'pie',radius:['42%','64%'],center:['50%','40%'],
                label:{show:true,position:'inside',formatter:function(p){return p.percent>=6?Math.round(p.percent)+'%':'';},fontSize:10,fontWeight:700,color:'#fff'},emphasis:{scale:true,scaleSize:6},
                data:[
                    {value:faixas['60-90'],name:'60-90 dias',itemStyle:{color:'#f59e0b'}},
                    {value:faixas['91-180'],name:'91-180 dias',itemStyle:{color:'#ef4444'}},
                    {value:faixas['181-365'],name:'181-365 dias',itemStyle:{color:'#7c3aed'}},
                    {value:faixas['365+'],name:'365+ dias',itemStyle:{color:'#1e293b'}}
                ]}]});

        var nomes = top10.map(function(r){return (r.NOME||'').substring(0,20);});
        var vols  = top10.map(function(r){return Math.round(parseFloat(r.TOTAL_COMPRA||0)*100)/100;});
        var c2=echarts.init(document.getElementById('chartTopClientes'));
        c2.setOption({backgroundColor:'transparent',
            tooltip:{trigger:'axis',formatter:function(p){return p[0].name+'<br/>R$ '+p[0].value.toLocaleString('pt-BR',{minimumFractionDigits:2});}},
            grid:{left:130,right:20,top:10,bottom:30},
            xAxis:{type:'value',axisLabel:{color:txtClr,fontSize:10,formatter:function(v){return 'R$'+v.toLocaleString('pt-BR');}},splitLine:{lineStyle:{color:'#1e293b'}}},
            yAxis:{type:'category',data:nomes.slice().reverse(),axisLabel:{color:txtClr,fontSize:11}},
            series:[{type:'bar',data:vols.slice().reverse(),
                itemStyle:{color:'#8b5cf6',borderRadius:[0,3,3,0]},
                label:{show:true,position:'right',color:'#e2e8f0',fontSize:10,formatter:function(p){return 'R$'+p.value.toLocaleString('pt-BR',{minimumFractionDigits:0});}}}]});

        window.addEventListener('resize',function(){c1.resize();c2.resize();});
    }
}

window.addEventListener('DOMContentLoaded', function(){
    apiFetch('/api/clientes/inativos?dias='+dias)
        .then(function(d){renderInativos(d.linhas||[], d.dias||dias);})
        .catch(function(e){
            document.getElementById('inativos-body').innerHTML=
                '<div class="px-3 py-3 alert alert-warning small">Erro: '+esc(e.message)+'</div>';
        });
});

})();
</script>
