// js/components/widgets/VendedorAbaClientes.jsx
// [Wave 16 v223.42 20260520] Aba "Clientes" top clientes recorrentes da vendedora
// Props: vendedoraAlvo, sales, clients, periodDays (default 90)
// Deps runtime: window.ZNX.lib.vendedorAnalise, window.fmt
(function(){
  'use strict';
  const {useState} = React;

  function freqLabel(f){
    if (f == null) return (<span style={{color:'#9CA3AF',fontSize:11}}>—</span>);
    if (f <= 7) return (<span style={{color:'#059669',fontWeight:700,fontSize:11}}>VIP (a cada {f.toFixed(0)}d)</span>);
    if (f <= 21) return (<span style={{color:'#2563EB',fontSize:11}}>Frequente ({f.toFixed(0)}d)</span>);
    if (f <= 60) return (<span style={{color:'#6B7280',fontSize:11}}>Regular ({f.toFixed(0)}d)</span>);
    return (<span style={{color:'#9CA3AF',fontSize:11}}>Esporádico ({f.toFixed(0)}d)</span>);
  }

  function diasDesdeBadge(d){
    if (d == null) return null;
    let color = '#059669', bg = '#D1FAE5', label = 'Recente';
    if (d > 30) { color = '#F59E0B'; bg = '#FEF3C7'; label = 'Atenção'; }
    if (d > 60) { color = '#DC2626'; bg = '#FEE2E2'; label = 'Frio'; }
    return (<span style={{display:'inline-block',padding:'2px 8px',borderRadius:12,background:bg,color:color,fontSize:11,fontWeight:600}}>{d}d • {label}</span>);
  }

  function VendedorAbaClientes(props){
    const lib = window.ZNX && window.ZNX.lib && window.ZNX.lib.vendedorAnalise;
    if (!lib || typeof lib.calcTopClientesVendedor !== 'function') {
      if (window.Sentry && typeof window.Sentry.captureMessage === 'function') {
        try { window.Sentry.captureMessage('[Wave 16 v223.42] VendedorAbaClientes missing lib', 'error'); } catch(e){}
      }
      console.error('[VendedorAbaClientes] Dependências faltando: lib=', !!lib);
      return (<div style={{padding:20,color:'#B91C1C',background:'#FEE2E2',borderRadius:8}}>Erro: módulo de clientes não carregou. Recarregue a página (Ctrl+Shift+R).</div>);
    }
    if (!props.vendedoraAlvo) return (<div style={{padding:20,color:'#6B7280'}}>Selecione uma vendedora pra ver análise de clientes.</div>);

    const [periodDays, setPeriodDays] = useState(Number(props.periodDays || 90));
    const [topN, setTopN] = useState(20);
    const fmt = (typeof window.fmt === 'function') ? window.fmt : function(v){ return 'R$ '+Number(v||0).toFixed(2); };
    const rows = lib.calcTopClientesVendedor(props.sales||[], props.clients||[], props.vendedoraAlvo, periodDays, topN);

    return (
      <div>
        {/* Controles */}
        <div style={{display:'grid',gridTemplateColumns:'200px 150px 1fr',gap:12,marginBottom:16,alignItems:'end'}}>
          <div>
            <label style={{fontSize:12,fontWeight:600,color:'#6B7280',display:'block',marginBottom:4}}>Período de análise</label>
            <select value={String(periodDays)} onChange={function(e){ setPeriodDays(Number(e.target.value)); }} style={{width:'100%',padding:'8px 12px',border:'1px solid #D1D5DB',borderRadius:8,fontSize:14}}>
              <option value="30">30 dias</option>
              <option value="60">60 dias</option>
              <option value="90">90 dias</option>
              <option value="180">180 dias</option>
              <option value="365">1 ano</option>
            </select>
          </div>
          <div>
            <label style={{fontSize:12,fontWeight:600,color:'#6B7280',display:'block',marginBottom:4}}>Top N</label>
            <select value={String(topN)} onChange={function(e){ setTopN(Number(e.target.value)); }} style={{width:'100%',padding:'8px 12px',border:'1px solid #D1D5DB',borderRadius:8,fontSize:14}}>
              <option value="10">Top 10</option>
              <option value="20">Top 20</option>
              <option value="50">Top 50</option>
            </select>
          </div>
          <div style={{fontSize:12,color:'#6B7280',padding:'8px 0'}}>
            {rows.length} cliente{rows.length===1?'':'s'} de {props.vendedoraAlvo} nos últimos {periodDays} dias
          </div>
        </div>

        {/* Tabela top clientes */}
        <div style={{background:'#fff',border:'1px solid #E5E7EB',borderRadius:12,padding:16}}>
          {rows.length === 0 ? (
            <div style={{padding:40,textAlign:'center',color:'#9CA3AF'}}>Nenhuma venda nesta vendedora no período.</div>
          ) : (
            <div style={{overflowX:'auto'}}>
              <table style={{width:'100%',fontSize:13,borderCollapse:'collapse'}}>
                <thead>
                  <tr style={{borderBottom:'2px solid #E5E7EB',background:'#F9FAFB'}}>
                    <th style={{textAlign:'left',padding:'10px',fontWeight:600,color:'#374151'}}>#</th>
                    <th style={{textAlign:'left',padding:'10px',fontWeight:600,color:'#374151'}}>Cliente</th>
                    <th style={{textAlign:'right',padding:'10px',fontWeight:600,color:'#374151'}}>Notas</th>
                    <th style={{textAlign:'right',padding:'10px',fontWeight:600,color:'#374151'}}>Faturado</th>
                    <th style={{textAlign:'right',padding:'10px',fontWeight:600,color:'#374151'}}>Ticket Médio</th>
                    <th style={{textAlign:'center',padding:'10px',fontWeight:600,color:'#374151'}}>Frequência</th>
                    <th style={{textAlign:'center',padding:'10px',fontWeight:600,color:'#374151'}}>Última Compra</th>
                  </tr>
                </thead>
                <tbody>
                  {rows.map(function(r,idx){
                    return (
                      <tr key={'cli-'+r.clientId} style={{borderBottom:'1px solid #F3F4F6'}}>
                        <td style={{padding:'10px',fontWeight:700,color:idx<3?'#C8A951':'#9CA3AF'}}>{idx+1}{idx===0?' 🥇':idx===1?' 🥈':idx===2?' 🥉':''}</td>
                        <td style={{padding:'10px'}}>
                          <div style={{fontWeight:600,color:'#1F2937'}}>{r.clientName}</div>
                          {r.clientPhone && <div style={{fontSize:11,color:'#9CA3AF'}}>{r.clientPhone}</div>}
                        </td>
                        <td style={{padding:'10px',textAlign:'right',color:'#1F2937'}}>{r.notasCount} <span style={{color:'#9CA3AF',fontSize:11}}>({r.faturadasCount}f)</span></td>
                        <td style={{padding:'10px',textAlign:'right',fontWeight:700,color:'#059669'}}>{fmt(r.valorFaturado)}</td>
                        <td style={{padding:'10px',textAlign:'right',color:'#374151'}}>{fmt(r.ticketMedio)}</td>
                        <td style={{padding:'10px',textAlign:'center'}}>{freqLabel(r.frequenciaMedia)}</td>
                        <td style={{padding:'10px',textAlign:'center'}}>{diasDesdeBadge(r.diasDesdeUltimaCompra)}</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </div>
    );
  }

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