// js/components/widgets/RankingVendedoresCard.jsx
// [v224.218 PRIVACIDADE-RANKING 20260728] Ranking de vendedores com máscara NO SERVIDOR.
//
// Fonte única: RPC znx_ranking_vendedores_v1(p_from, p_to).
//   - admin        → total_vendido e num_pedidos preenchidos em TODAS as linhas
//   - demais papéis→ nome + posição de todos, valores SÓ na própria linha;
//                    os do colega vêm NULL DO BANCO (não escondidos aqui).
//
// Por isso este componente não tem nenhum filtro de privacidade: não há o que
// esconder no cliente — o que não pode ser visto simplesmente não chega. Se algum
// dia aparecer valor de colega pra não-admin, o defeito é na RPC, não aqui.
//
// ⚠️ LEIA ANTES DE "CONSERTAR" O R$ 0,00 (v224.219):
//   R$ 0,00 na PRÓPRIA linha  → CERTO. É o número real de quem não vendeu no período.
//                               Quem não vendeu SEMPRE vê a própria linha, zerada.
//   R$ 0,00 na linha de COLEGA → BUG. Colega sem permissão tem que vir NULL do servidor.
//   '—' (traço) na linha de colega → CERTO. É a máscara da RPC.
//
// Ou seja: null → '—' · 0 → 'R$ 0,00'. NÃO trocar 0 por '—' "pra ficar bonito":
// isso apagaria o zero real da pessoa e ela ia achar que a tela quebrou.
//
// Deps runtime: sb, fmt (globals)
(function(){
  'use strict';
  const {useState, useEffect, useCallback} = React;

  // Mês corrente em YYYY-MM-DD, hora local (a coluna sales.date é `date`, não timestamp —
  // usar toISOString() daria o dia errado perto da virada por causa do UTC).
  function mesCorrente(){
    const d = new Date(), p = n => String(n).padStart(2,'0');
    const ini = new Date(d.getFullYear(), d.getMonth(), 1);
    const fim = new Date(d.getFullYear(), d.getMonth()+1, 0);
    const s = x => x.getFullYear()+'-'+p(x.getMonth()+1)+'-'+p(x.getDate());
    return { from: s(ini), to: s(fim) };
  }

  function RankingVendedoresCard({ from, to, titulo }){
    const periodo = (from && to) ? { from, to } : mesCorrente();
    from = periodo.from; to = periodo.to;

    const [linhas, setLinhas] = useState([]);
    const [erro, setErro]     = useState(null);
    const [carregando, setCarregando] = useState(true);
    const fmt = typeof window.fmt === 'function' ? window.fmt : (v)=>String(v);

    const carregar = useCallback(async () => {
      if (typeof sb === 'undefined' || !sb.rpc) { setErro('sem conexão'); setCarregando(false); return; }
      setCarregando(true);
      try {
        const { data, error } = await sb.rpc('znx_ranking_vendedores_v1', { p_from: from, p_to: to });
        if (error) throw error;
        setLinhas(Array.isArray(data) ? data : []);
        setErro(null);
      } catch (e) {
        console.error('[RankingVendedoresCard]', e);
        setErro(e && e.message ? e.message : String(e));
        if (typeof Sentry !== 'undefined') Sentry.captureException(e, { extra:{ context:'RankingVendedoresCard', from, to } });
      } finally { setCarregando(false); }
    }, [from, to]);

    useEffect(() => { carregar(); }, [carregar]);

    // [v224.219] medalha pela POSIÇÃO que o servidor mandou, não pelo índice do array.
    // Pelo índice, quem estivesse em 16º mas fosse a 3ª linha da lista ganhava 🥉.
    const medalha = pos => ['🥇','🥈','🥉'][Number(pos)-1] || null;

    return (
      <div className="card" style={{padding:14}}>
        <div style={{fontSize:11,color:'#9CA3AF',fontWeight:700,textTransform:'uppercase',letterSpacing:1.2,marginBottom:2}}>
          🏆 {titulo || 'Ranking de vendedores'}
        </div>
        {/* Rótulo obrigatório: este total NÃO desconta crédito do cliente, então diverge
            do dashboard de propósito. Ver v224.218 §1. */}
        <div style={{fontSize:10,color:'#9CA3AF',marginBottom:10}}>
          Ranking por valor vendido (não desconta crédito do cliente)
        </div>

        {carregando && <div style={{fontSize:12,color:'#9CA3AF',fontStyle:'italic',padding:'8px 0'}}>Carregando...</div>}
        {!carregando && erro && <div style={{fontSize:12,color:'#DC2626',padding:'8px 0'}}>Não consegui carregar o ranking.</div>}
        {!carregando && !erro && linhas.length===0 && (
          <div style={{fontSize:12,color:'#9CA3AF',fontStyle:'italic',padding:'8px 0'}}>Nenhuma venda no período.</div>
        )}

        {!carregando && !erro && linhas.length>0 && (
          <div style={{display:'flex',flexDirection:'column',gap:5}}>
            {linhas.map(r=>(
              <div key={r.seller_id || r.posicao}
                style={{
                  display:'flex',justifyContent:'space-between',alignItems:'center',
                  padding:'6px 10px',borderRadius:6,
                  background: r.is_me ? '#DBEAFE' : (Number(r.posicao)===1 ? '#FEF3C7' : '#F9FAFB'),
                  border: r.is_me ? '1px solid #2563EB55' : '1px solid transparent'
                }}>
                <div style={{display:'flex',alignItems:'center',gap:6,fontSize:12,minWidth:0}}>
                  <span style={{color:'#9CA3AF',fontWeight:700,minWidth:20}}>{medalha(r.posicao) || ('#'+r.posicao)}</span>
                  <strong style={{color:'#1B2A4A',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{r.vendedor}</strong>
                  {r.is_me && <span style={{fontSize:9,background:'#2563EB',color:'#fff',padding:'1px 6px',borderRadius:10,fontWeight:700}}>VOCÊ</span>}
                </div>
                <div style={{textAlign:'right',whiteSpace:'nowrap'}}>
                  {/* `==null` pega null E undefined, mas NÃO pega 0 — é essa distinção que
                      separa "não posso ver" (traço) de "vendi zero" (R$ 0,00). Ver topo. */}
                  <div style={{fontSize:13,fontWeight:700,
                    color: r.total_vendido==null ? '#D1D5DB' : (Number(r.total_vendido)===0 ? '#9CA3AF' : '#16A34A')}}>
                    {r.total_vendido==null ? '—' : fmt(r.total_vendido)}
                  </div>
                  <div style={{fontSize:10,color:'#9CA3AF'}}>
                    {r.num_pedidos==null ? '—' : r.num_pedidos+' vendas'}
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    );
  }

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