<?php
/**
 * Clientes / Inadimplentes — shell instantâneo.
 */
?>
<div class="pbi-page-header">
    <h1 class="pbi-page-title"><i class="bi bi-exclamation-circle me-2 text-danger"></i>Clientes</h1>
</div>
<?php include __DIR__ . '/_submenu.php' ?>

<!-- ── KPIs skeleton ─────────────────────────────────────────────────────── -->
<div class="pbi-kpi-grid mb-4" id="kpi-grid">
    <?php for ($i = 0; $i < 2; $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>Inadimplente</strong> = cliente com conta vencida e ainda não paga. <strong>Total em Aberto</strong> = soma de tudo que está vencido e não foi pago.</div>

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

<!-- ── Tabela (async) ────────────────────────────────────────────────────── -->
<div class="pbi-card" id="card-inadimplentes">
    <div class="pbi-card-header d-flex justify-content-between">
        <span><i class="bi bi-exclamation-circle me-2 text-danger"></i>Clientes Inadimplentes</span>
        <small class="text-muted" id="inadimpl-badge">
            <span class="pbi-skeleton d-inline-block" style="width:80px;height:.75rem;border-radius:3px">&nbsp;</span>
        </small>
        <div class="pbi-hint" style="margin-top:.35rem"><strong>Títulos</strong> = quantidade de contas vencidas do cliente; <strong>Saldo Devedor</strong> = quanto ele ainda deve; <strong>Dias Atraso</strong> = dias desde o vencimento mais antigo.</div>
    </div>
    <div id="inadimpl-body">
        <div class="table-responsive">
            <table class="pbi-table">
                <thead><tr>
                    <th>#</th><th>Cliente</th><th>Telefone</th>
                    <th class="text-end">Títulos</th>
                    <th class="text-end">Saldo Devedor</th>
                    <th>1º Vencto</th>
                    <th class="text-end">Dias Atraso</th>
                </tr></thead>
                <tbody>
                <?php for ($i = 0; $i < 8; $i++): ?>
                <tr>
                    <?php foreach ([30,130,80,50,80,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>

<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';

function fmtR(v){return 'R$ '+parseFloat(v||0).toLocaleString('pt-BR',{minimumFractionDigits:2,maximumFractionDigits:2});}
function fmtData(s){if(!s)return'—';return s.substring(8,10)+'/'+s.substring(5,7)+'/'+s.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 renderInadimplentes(linhas) {
    var totalDevido = linhas.reduce(function(s,r){return s+parseFloat(r.SALDO_TOTAL||0);},0);

    // KPIs
    document.getElementById('kpi-grid').innerHTML =
        '<a href="/clientes/inadimplentes" class="pbi-kpi-card border-danger">'
        + '<div class="pbi-kpi-label">Total Inadimplentes</div>'
        + '<div class="pbi-kpi-value text-danger">'+linhas.length+'</div>'
        + '<div class="pbi-kpi-sub">clientes</div></a>'
        + '<a href="/clientes/frequencia" class="pbi-kpi-card border-danger">'
        + '<div class="pbi-kpi-label">Total em Aberto</div>'
        + '<div class="pbi-kpi-value text-danger">'+fmtR(totalDevido)+'</div>'
        + '<div class="pbi-kpi-sub">ver frequência →</div></a>';

    document.getElementById('inadimpl-badge').textContent = linhas.length + ' clientes';

    if (!linhas.length) {
        document.getElementById('inadimpl-body').innerHTML =
            '<p class="text-center text-success py-4"><i class="bi bi-check-circle me-2"></i>Nenhum inadimplente encontrado!</p>';
        return;
    }

    var rows = linhas.map(function(r, i){
        var dias = parseInt(r.DIAS_ATRASO||0);
        var cls  = dias > 90 ? 'text-danger fw-bold' : (dias > 30 ? 'text-warning' : '');
        var tel  = (r.CEL_PRINC||r.FONE_PRINC||'—').trim();
        return '<tr>'
            + '<td class="text-muted">'+(i+1)+'</td>'
            + '<td>'+esc(r.NOME||'—')+'</td>'
            + '<td class="text-muted small">'+esc(tel)+'</td>'
            + '<td class="text-end">'+parseInt(r.QTD_TITULOS||0)+'</td>'
            + '<td class="text-end fw-bold text-danger">'+fmtR(r.SALDO_TOTAL||0)+'</td>'
            + '<td>'+fmtData(r.VENC_MAIS_ANTIGO)+'</td>'
            + '<td class="text-end '+cls+'">'+dias+' dias</td>'
            + '</tr>';
    }).join('');

    document.getElementById('inadimpl-body').innerHTML =
        '<div class="table-responsive"><table class="pbi-table">'
        + '<thead><tr><th>#</th><th>Cliente</th><th>Telefone</th>'
        + '<th class="text-end">Títulos</th><th class="text-end">Saldo Devedor</th>'
        + '<th>1º Vencto</th><th class="text-end">Dias Atraso</th>'
        + '</tr></thead><tbody>'+rows+'</tbody></table></div>';

    // Gráficos top 8
    var top8 = linhas.slice(0,8);
    if (top8.length && typeof echarts !== 'undefined') {
        var area = document.getElementById('charts-area');
        area.style.removeProperty('display');
        area.innerHTML =
            '<div class="col-md-7"><div class="pbi-card h-100">'
            + '<div class="pbi-card-header"><i class="bi bi-bar-chart-horizontal me-2 text-danger"></i>Top 8 — Saldo Devedor</div>'
            + '<div id="chartSaldo" style="height:280px"></div></div></div>'
            + '<div class="col-md-5"><div class="pbi-card h-100">'
            + '<div class="pbi-card-header"><i class="bi bi-clock me-2 text-warning"></i>Top 8 — Dias em Atraso</div>'
            + '<div id="chartDias" style="height:280px"></div></div></div>';

        var nomes  = top8.map(function(r){return (r.NOME||'—').substring(0,20);});
        var saldos = top8.map(function(r){return Math.round(parseFloat(r.SALDO_TOTAL||0)*100)/100;});
        var dias8  = top8.map(function(r){return parseInt(r.DIAS_ATRASO||0);});
        var nRev   = nomes.slice().reverse();
        var ax     = {color:'#64748b',fontSize:11};

        var c1 = echarts.init(document.getElementById('chartSaldo'));
        c1.setOption({backgroundColor:'transparent',
            tooltip:{trigger:'axis',formatter:function(p){return 'R$ '+p[0].data.toLocaleString('pt-BR',{minimumFractionDigits:2});}},
            xAxis:{type:'value',axisLabel:{color:ax.color,fontSize:ax.fontSize,formatter:function(v){return 'R$'+(v/1000).toFixed(0)+'k';}}},
            yAxis:{type:'category',data:nRev,axisLabel:{color:ax.color,fontSize:ax.fontSize,width:130,overflow:'truncate'}},
            series:[{type:'bar',data:saldos.slice().reverse(),itemStyle:{color:'#dc2626'},
                label:{show:true,position:'right',color:'#475569',formatter:function(p){return 'R$'+(p.data/1000).toFixed(1)+'k';}}}]});

        var c2 = echarts.init(document.getElementById('chartDias'));
        c2.setOption({backgroundColor:'transparent',
            tooltip:{trigger:'axis'},
            xAxis:{type:'value',axisLabel:{color:ax.color,fontSize:ax.fontSize,formatter:function(v){return v+'d';}}},
            yAxis:{type:'category',data:nomes.slice().reverse(),axisLabel:{color:ax.color,fontSize:ax.fontSize,width:110,overflow:'truncate'}},
            series:[{type:'bar',data:dias8.slice().reverse(),
                itemStyle:{color:{type:'linear',x:0,y:0,x2:1,y2:0,colorStops:[{offset:0,color:'#fbbf24'},{offset:1,color:'#dc2626'}]}},
                label:{show:true,position:'right',color:'#475569',formatter:function(p){return p.data+'d';}}}]});

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

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

})();
</script>
