// js/components/pages/DashboardFinanceiro.jsx
// Dashboard focado pra financeiro — SEM info de equipe/vendedoras/metas.
// Foco: fluxo de caixa, contas a pagar/receber, status de pagamento, ticket médio.
// Onda 2026-05-07: separado do DashboardV2 (admin) por pedido do Jamal.
(function(){
  'use strict';
  const {useMemo, useState} = React;

  function fmtMoneyCompact(v){
    const n = Number(v||0);
    if(Math.abs(n) >= 1000000) return 'R$ '+(n/1000000).toFixed(1)+'M';
    if(Math.abs(n) >= 1000) return 'R$ '+(n/1000).toFixed(1)+'k';
    return (typeof window.fmt === 'function' ? window.fmt(n) : 'R$ '+n.toFixed(2));
  }
  function fmt(v){ return typeof window.fmt === 'function' ? window.fmt(v) : 'R$ '+Number(v||0).toFixed(2); }

  function StatCard({label, value, sub, color, icon}){
    return (
      <div className="card" style={{padding:14, borderLeft:'4px solid '+(color||'#2563EB')}}>
        <div style={{display:'flex',alignItems:'center',gap:8}}>
          {icon && <span style={{fontSize:18}}>{icon}</span>}
          <div style={{fontSize:11,color:'#6B7280',fontWeight:600,textTransform:'uppercase',letterSpacing:0.5}}>{label}</div>
        </div>
        <div style={{fontSize:22,fontWeight:800,marginTop:6,color:color||'#1B2A4A'}}>{value}</div>
        {sub && <div style={{fontSize:11,color:'#9CA3AF',marginTop:2}}>{sub}</div>}
      </div>
    );
  }

  function DashboardFinanceiro({user, sales, quotes, payables, receivables, clients}){
    const today = new Date();
    const todayStr = today.toLocaleDateString('pt-BR');
    const monthStart = new Date(today.getFullYear(), today.getMonth(), 1);
    const monthEnd = new Date(today.getFullYear(), today.getMonth()+1, 0);
    const next30 = new Date(today.getTime() + 30*86400000);
    const last30 = new Date(today.getTime() - 30*86400000);

    // ═══════════════ HOJE ═══════════════
    const todayKey = today.toISOString().slice(0,10);
    const todayStats = useMemo(()=>{
      const todaySales = (sales||[]).filter(s=>s.status!=='Cancelada' && s.date && String(s.date).slice(0,10)===todayKey);
      const totalToday = todaySales.reduce((a,s)=>a + (typeof window.saleFinalTotal === 'function' ? window.saleFinalTotal(s) : Number(s.total||0)), 0);
      const pagas = todaySales.filter(s=>s.paymentStatus==='Pago').length;
      const pendentes = todaySales.filter(s=>s.paymentStatus==='Pendente'||s.paymentStatus==='Parcial').length;
      const valorPendente = todaySales.filter(s=>s.paymentStatus!=='Pago').reduce((a,s)=>a + (typeof window.saleFinalTotal === 'function' ? window.saleFinalTotal(s) : Number(s.total||0)), 0);
      // Por método
      const pix = todaySales.reduce((a,s)=>a + Number(s.paymentPixValue||s.payment_pix_value||0), 0);
      const cash = todaySales.reduce((a,s)=>a + Number(s.paymentCashValue||s.payment_cash_value||0), 0);
      return { count: todaySales.length, total: totalToday, pagas, pendentes, valorPendente, pix, cash };
    }, [sales, todayKey]);

    // ═══════════════ MÊS ═══════════════
    const monthStats = useMemo(()=>{
      const monthSales = (sales||[]).filter(s=>{
        if(s.status==='Cancelada') return false;
        if(!s.date) return false;
        const d = new Date(s.date);
        return d >= monthStart && d <= monthEnd;
      });
      const total = monthSales.reduce((a,s)=>a + (typeof window.saleFinalTotal === 'function' ? window.saleFinalTotal(s) : Number(s.total||0)), 0);
      const pagas = monthSales.filter(s=>s.paymentStatus==='Pago');
      const totalPago = pagas.reduce((a,s)=>a + (typeof window.saleFinalTotal === 'function' ? window.saleFinalTotal(s) : Number(s.total||0)), 0);
      const totalPendente = total - totalPago;
      const ticket = monthSales.length > 0 ? total / monthSales.length : 0;
      const pctPago = total > 0 ? (totalPago / total) * 100 : 0;
      return { count: monthSales.length, total, totalPago, totalPendente, ticket, pctPago };
    }, [sales, monthStart, monthEnd]);

    // ═══════════════ CASH FLOW 30 DIAS ═══════════════
    const cashFlow = useMemo(()=>{
      // A receber: receivables Pendente com due dentro de 30 dias
      const recPendentes = (receivables||[]).filter(r=>r.status==='Pendente' || r.status==='Parcial');
      const aReceber30d = recPendentes.filter(r=>{
        if(!r.due) return false;
        const d = new Date(r.due);
        return d <= next30;
      });
      const totalReceber = aReceber30d.reduce((a,r)=>a + Number(r.value||0), 0);

      // A pagar: payables Pendente com due dentro de 30 dias
      const payPendentes = (payables||[]).filter(p=>p.status==='Pendente' || p.status==='Parcial');
      const aPagar30d = payPendentes.filter(p=>{
        if(!p.due) return false;
        const d = new Date(p.due);
        return d <= next30;
      });
      const totalPagar = aPagar30d.reduce((a,p)=>a + Number(p.value||0), 0);

      // Atrasados (vencidos sem pagamento)
      const recAtrasados = recPendentes.filter(r=>{
        if(!r.due) return false;
        return new Date(r.due) < today;
      });
      const totalAtrasadoReceber = recAtrasados.reduce((a,r)=>a + Number(r.value||0), 0);

      const payAtrasados = payPendentes.filter(p=>{
        if(!p.due) return false;
        return new Date(p.due) < today;
      });
      const totalAtrasadoPagar = payAtrasados.reduce((a,p)=>a + Number(p.value||0), 0);

      return {
        aReceber30d: totalReceber, qtdReceber: aReceber30d.length,
        aPagar30d: totalPagar, qtdPagar: aPagar30d.length,
        saldoProjetado: totalReceber - totalPagar,
        atrasadoReceber: totalAtrasadoReceber, qtdAtrasadoReceber: recAtrasados.length,
        atrasadoPagar: totalAtrasadoPagar, qtdAtrasadoPagar: payAtrasados.length
      };
    }, [receivables, payables, today, next30]);

    // ═══════════════ INADIMPLÊNCIA — clientes com débito vencido ═══════════════
    const inadimplencia = useMemo(()=>{
      const clientesAtrasados = new Map();
      for(const r of (receivables||[])){
        if(r.status !== 'Pendente' && r.status !== 'Parcial') continue;
        if(!r.due) continue;
        if(new Date(r.due) >= today) continue;
        const cid = r.clientId || r.client_id;
        if(!cid) continue;
        const cur = clientesAtrasados.get(cid) || { total: 0, count: 0 };
        cur.total += Number(r.value || 0);
        cur.count += 1;
        clientesAtrasados.set(cid, cur);
      }
      const ranking = Array.from(clientesAtrasados.entries())
        .map(([cid, info])=>{
          const c = (clients||[]).find(x=>String(x.id)===String(cid));
          return { cid, name: c?.name || 'Cliente', whatsapp: c?.whatsapp || c?.phone, ...info };
        })
        .sort((a,b)=>b.total - a.total)
        .slice(0, 10);
      return { count: clientesAtrasados.size, ranking };
    }, [receivables, clients, today]);

    // ═══════════════ PAGAMENTO MISTO BREAKDOWN (mês) ═══════════════
    const paymentBreakdown = useMemo(()=>{
      const monthSales = (sales||[]).filter(s=>{
        if(s.status==='Cancelada') return false;
        if(!s.date) return false;
        const d = new Date(s.date);
        return d >= monthStart && d <= monthEnd;
      });
      // [v127 CRIT-2 2026-05-09] Aplica regra `aggregar_pagamento_split` — soma split direto.
      // ANTES: filter paymentMethod==='Pix' (frágil pra string drift, ignorava parte de Misto).
      // AGORA: soma payment_pix_value/payment_cash_value direto. Cobre Pix puro, Dinheiro puro,
      // Misto, e qualquer combinação. Mata recorrência do bug R$11k de 2026-05-07.
      const totalPix = monthSales.reduce((a,s)=>a + Number(s.paymentPixValue||s.payment_pix_value||0), 0);
      const totalCash = monthSales.reduce((a,s)=>a + Number(s.paymentCashValue||s.payment_cash_value||0), 0);
      const totalPrazo = monthSales.filter(s=>s.paymentMethod === 'À prazo').reduce((a,s)=>a + (typeof window.saleFinalTotal === 'function' ? window.saleFinalTotal(s) : Number(s.total||0)), 0);
      const total = totalPix + totalCash + totalPrazo;
      return { totalPix, totalCash, totalPrazo, total };
    }, [sales, monthStart, monthEnd]);

    return (
      <div>
        <div className="page-header">
          <div className="page-title">Dashboard Financeiro</div>
          <div style={{fontSize:12, color:'#6B7280'}}>Olá, {user?.name || user?.username} · {todayStr}</div>
        </div>

        {/* ═══ HOJE ═══ */}
        <div style={{marginBottom:8, fontSize:11, fontWeight:700, color:'#9CA3AF', textTransform:'uppercase', letterSpacing:1}}>☀️ HOJE</div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(180px, 1fr))', gap:12, marginBottom:18}}>
          <StatCard icon="💰" label="Faturamento" value={fmt(todayStats.total)} sub={todayStats.count + ' venda' + (todayStats.count!==1?'s':'')} color="#1B2A4A"/>
          <StatCard icon="✅" label="Pagas" value={todayStats.pagas} sub="confirmadas" color="#16A34A"/>
          <StatCard icon="⏳" label="Pendentes" value={todayStats.pendentes} sub={fmt(todayStats.valorPendente)} color="#EA580C"/>
          <StatCard icon="🔵" label="Pix hoje" value={fmt(todayStats.pix)} color="#2563EB"/>
          <StatCard icon="💵" label="Dinheiro hoje" value={fmt(todayStats.cash)} color="#16A34A"/>
        </div>

        {/* ═══ ESTE MÊS ═══ */}
        <div style={{marginBottom:8, fontSize:11, fontWeight:700, color:'#9CA3AF', textTransform:'uppercase', letterSpacing:1}}>📅 ESTE MÊS — {monthStart.toLocaleDateString('pt-BR',{month:'long',year:'numeric'})}</div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(180px, 1fr))', gap:12, marginBottom:18}}>
          <StatCard icon="📊" label="Faturamento mês" value={fmtMoneyCompact(monthStats.total)} sub={monthStats.count + ' vendas'} color="#1B2A4A"/>
          <StatCard icon="✅" label="Recebido" value={fmtMoneyCompact(monthStats.totalPago)} sub={monthStats.pctPago.toFixed(1) + '% do total'} color="#16A34A"/>
          <StatCard icon="⏳" label="A receber" value={fmtMoneyCompact(monthStats.totalPendente)} sub={(100-monthStats.pctPago).toFixed(1) + '% pendente'} color="#EA580C"/>
          <StatCard icon="🎯" label="Ticket médio" value={fmt(monthStats.ticket)} color="#7C3AED"/>
        </div>

        {/* ═══ CASH FLOW 30 DIAS ═══ */}
        <div style={{marginBottom:8, fontSize:11, fontWeight:700, color:'#9CA3AF', textTransform:'uppercase', letterSpacing:1}}>💸 CASH FLOW — próximos 30 dias</div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(220px, 1fr))', gap:12, marginBottom:18}}>
          <div className="card" style={{padding:18, background:'linear-gradient(135deg,#ECFDF5,#D1FAE5)', borderLeft:'4px solid #16A34A'}}>
            <div style={{fontSize:11, color:'#065F46', fontWeight:700, textTransform:'uppercase'}}>↗ A Receber</div>
            <div style={{fontSize:24, fontWeight:800, color:'#16A34A', marginTop:4}}>{fmtMoneyCompact(cashFlow.aReceber30d)}</div>
            <div style={{fontSize:11, color:'#065F46'}}>{cashFlow.qtdReceber} parcela{cashFlow.qtdReceber!==1?'s':''}</div>
          </div>
          <div className="card" style={{padding:18, background:'linear-gradient(135deg,#FEF2F2,#FECACA)', borderLeft:'4px solid #DC2626'}}>
            <div style={{fontSize:11, color:'#7F1D1D', fontWeight:700, textTransform:'uppercase'}}>↘ A Pagar</div>
            <div style={{fontSize:24, fontWeight:800, color:'#DC2626', marginTop:4}}>-{fmtMoneyCompact(cashFlow.aPagar30d)}</div>
            <div style={{fontSize:11, color:'#7F1D1D'}}>{cashFlow.qtdPagar} conta{cashFlow.qtdPagar!==1?'s':''}</div>
          </div>
          <div className="card" style={{padding:18, background:cashFlow.saldoProjetado>=0?'linear-gradient(135deg,#EFF6FF,#DBEAFE)':'linear-gradient(135deg,#FEF2F2,#FECACA)', borderLeft:'4px solid '+(cashFlow.saldoProjetado>=0?'#2563EB':'#DC2626')}}>
            <div style={{fontSize:11, color:cashFlow.saldoProjetado>=0?'#1E3A8A':'#7F1D1D', fontWeight:700, textTransform:'uppercase'}}>📊 Saldo projetado</div>
            <div style={{fontSize:26, fontWeight:800, color:cashFlow.saldoProjetado>=0?'#2563EB':'#DC2626', marginTop:4}}>
              {cashFlow.saldoProjetado >= 0 ? '+' : ''}{fmtMoneyCompact(cashFlow.saldoProjetado)}
            </div>
            <div style={{fontSize:11, color:'#6B7280'}}>{cashFlow.saldoProjetado>=0?'fluxo positivo 🟢':'fluxo negativo ⚠️'}</div>
          </div>
        </div>

        {/* ═══ ATRASADOS ═══ */}
        {(cashFlow.atrasadoReceber > 0 || cashFlow.atrasadoPagar > 0) && (
          <>
            <div style={{marginBottom:8, fontSize:11, fontWeight:700, color:'#DC2626', textTransform:'uppercase', letterSpacing:1}}>🚨 ATRASADOS — atenção urgente</div>
            <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(220px, 1fr))', gap:12, marginBottom:18}}>
              {cashFlow.atrasadoReceber > 0 && (
                <div className="card" style={{padding:14, borderLeft:'4px solid #DC2626', background:'#FEF2F2'}}>
                  <div style={{fontSize:11, color:'#7F1D1D', fontWeight:700, textTransform:'uppercase'}}>⏰ Recebíveis vencidos</div>
                  <div style={{fontSize:20, fontWeight:800, color:'#DC2626', marginTop:4}}>{fmt(cashFlow.atrasadoReceber)}</div>
                  <div style={{fontSize:11, color:'#7F1D1D'}}>{cashFlow.qtdAtrasadoReceber} parcela{cashFlow.qtdAtrasadoReceber!==1?'s':''}</div>
                </div>
              )}
              {cashFlow.atrasadoPagar > 0 && (
                <div className="card" style={{padding:14, borderLeft:'4px solid #DC2626', background:'#FEF2F2'}}>
                  <div style={{fontSize:11, color:'#7F1D1D', fontWeight:700, textTransform:'uppercase'}}>⏰ Contas a pagar atrasadas</div>
                  <div style={{fontSize:20, fontWeight:800, color:'#DC2626', marginTop:4}}>{fmt(cashFlow.atrasadoPagar)}</div>
                  <div style={{fontSize:11, color:'#7F1D1D'}}>{cashFlow.qtdAtrasadoPagar} conta{cashFlow.qtdAtrasadoPagar!==1?'s':''}</div>
                </div>
              )}
            </div>
          </>
        )}

        {/* ═══ MÉTODOS DE PAGAMENTO MÊS ═══ */}
        <div style={{marginBottom:8, fontSize:11, fontWeight:700, color:'#9CA3AF', textTransform:'uppercase', letterSpacing:1}}>💳 RECEBIDO POR MÉTODO — este mês</div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(180px, 1fr))', gap:12, marginBottom:18}}>
          <StatCard icon="🔵" label="Pix" value={fmtMoneyCompact(paymentBreakdown.totalPix)} sub={paymentBreakdown.total>0?((paymentBreakdown.totalPix/paymentBreakdown.total)*100).toFixed(1)+'% do total':'-'} color="#2563EB"/>
          <StatCard icon="💵" label="Dinheiro" value={fmtMoneyCompact(paymentBreakdown.totalCash)} sub={paymentBreakdown.total>0?((paymentBreakdown.totalCash/paymentBreakdown.total)*100).toFixed(1)+'% do total':'-'} color="#16A34A"/>
          <StatCard icon="🕐" label="À prazo" value={fmtMoneyCompact(paymentBreakdown.totalPrazo)} sub={paymentBreakdown.total>0?((paymentBreakdown.totalPrazo/paymentBreakdown.total)*100).toFixed(1)+'% do total':'-'} color="#EA580C"/>
        </div>

        {/* ═══ TOP 10 INADIMPLENTES ═══ */}
        {inadimplencia.ranking.length > 0 && (
          <div className="card" style={{padding:0, marginBottom:18, overflow:'hidden'}}>
            <div style={{padding:'14px 18px', background:'#1B2A4A', color:'#fff', fontSize:13, fontWeight:700}}>
              🚨 TOP {Math.min(10, inadimplencia.count)} clientes com débito vencido ({inadimplencia.count} no total)
            </div>
            <table style={{width:'100%', fontSize:13}}>
              <thead>
                <tr style={{background:'#F8FAFC', borderBottom:'1px solid #E4E7EC'}}>
                  <th style={{padding:'10px 14px', textAlign:'left', fontWeight:700, color:'#6B7280', fontSize:11}}>#</th>
                  <th style={{padding:'10px 14px', textAlign:'left', fontWeight:700, color:'#6B7280', fontSize:11}}>Cliente</th>
                  <th style={{padding:'10px 14px', textAlign:'center', fontWeight:700, color:'#6B7280', fontSize:11}}>Parcelas</th>
                  <th style={{padding:'10px 14px', textAlign:'right', fontWeight:700, color:'#6B7280', fontSize:11}}>Total devido</th>
                  <th style={{padding:'10px 14px', textAlign:'center', fontWeight:700, color:'#6B7280', fontSize:11}}>WhatsApp</th>
                </tr>
              </thead>
              <tbody>
                {inadimplencia.ranking.map((c,i)=>(
                  <tr key={c.cid} style={{borderBottom:'1px solid #F3F4F6'}}>
                    <td style={{padding:'10px 14px', color:'#9CA3AF', fontWeight:700}}>{i+1}</td>
                    <td style={{padding:'10px 14px', fontWeight:600}}>{c.name}</td>
                    <td style={{padding:'10px 14px', textAlign:'center', color:'#6B7280'}}>{c.count}</td>
                    <td style={{padding:'10px 14px', textAlign:'right', fontWeight:700, color:'#DC2626'}}>{fmt(c.total)}</td>
                    <td style={{padding:'10px 14px', textAlign:'center'}}>
                      {c.whatsapp && (
                        <a href={`https://wa.me/55${String(c.whatsapp).replace(/\D/g,'')}?text=${encodeURIComponent('Olá '+c.name+', notei que ainda há '+c.count+' parcela(s) em aberto totalizando '+fmt(c.total)+'. Pode me confirmar quando pretende quitar? Obrigado!')}`}
                          target="_blank" rel="noopener noreferrer"
                          style={{background:'#25D366', color:'#fff', padding:'4px 10px', borderRadius:5, fontSize:11, textDecoration:'none', fontWeight:600}}>
                          📱 Cobrar
                        </a>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.components = window.ZNX.components || {};
  window.ZNX.components.DashboardFinanceiro = DashboardFinanceiro;
  window.DashboardFinanceiro = DashboardFinanceiro;
})();