/* global React, Icon, Button, Badge, Card, Drawer, brl, PageHead, KpiMini,
          useContasReceberList, usePedidosList, fmtDate,
          useFinPeriodo, PeriodoFilter, rotuloFaixa */

// ─── Módulo Comissões · FASE 2 (cálculo + telas; o PAGAMENTO é a Fase 3) ─────
// Base = RECEBIDO, não faturado (protege caixa: nunca paga comissão de
// inadimplência). Comissão de um recebível = valor_recebido × (vendedor.comissao/100).
//
// ⚠️ REGRA CRÍTICA — NÃO "simplificar" pra usar `valor`:
//   • soma SEMPRE `valor_recebido`, NUNCA `valor`;
//   • null/0 = zero;
//   • inclui status 'Recebido' E 'Parcial' — existe linha 'Recebido' com
//     recebimento parcial (ex.: 7445/1: valor 1.000, recebido 500). Usar `valor`
//     inflaria a comissão sobre dinheiro que não entrou.
function comValorRecebido(r) {
  const v = (r.valor_recebido != null ? r.valor_recebido : (r.recebido != null ? r.recebido : null));
  const n = Number(v);
  return isNaN(n) ? 0 : n;   // null/0 → 0. NUNCA r.valor.
}
function comDataPagto(r) {
  const d = String(r.data_pagamento || r.dataPagamento || '').slice(0, 10);
  return /^\d{4}-\d{2}-\d{2}$/.test(d) ? d : null;   // eixo data_pagamento (caixa)
}

function Comissoes({ onNav }) {   // eslint-disable-line no-unused-vars
  const { rows: recRows } = useContasReceberList([]);
  const { rows: pedRows } = usePedidosList([]);
  const [vendedores, setVendedores] = React.useState(() => window.TM_VENDEDORES || []);
  const per = useFinPeriodo();
  const [drill, setDrill] = React.useState(null);   // vendedor selecionado (comprovação)

  React.useEffect(() => {
    if (!window.tmSupabase) return;
    window.tmSupabase.from('vendedores').select('id,nome,fantasia,comissao,situacao').order('nome')
      .then(({ data }) => { if (data) setVendedores(data); });
  }, []);

  const intervalo = per.intervalo;
  const noPeriodo = (d) => !!d && (!intervalo.inicio || d >= intervalo.inicio) && (!intervalo.fim || d <= intervalo.fim);

  const calc = React.useMemo(() => {
    const pedById = {}; (pedRows || []).forEach(p => { pedById[p.id] = p; });
    const vendById = {}; (vendedores || []).forEach(v => { vendById[v.id] = v; });

    const porV = {};                                   // vendedorId → { vendedor, gerada, recebido, itens, vendas, vendido }
    const sem = { recebido: 0, itens: [] };            // recebido de pedidos SEM vendedor → sem comissão

    // Comissão GERADA no período: cada recebível confirmado (Recebido/Parcial) no eixo data_pagamento.
    (recRows || []).forEach(r => {
      if (r.status !== 'Recebido' && r.status !== 'Parcial') return;
      const dp = comDataPagto(r); if (!noPeriodo(dp)) return;
      const vr = comValorRecebido(r); if (vr <= 0) return;
      const ped = r.pedido_id ? pedById[r.pedido_id] : null;
      const vid = ped ? ped.vendedor_id : null;
      const item = { ref: r.referencia || r.ref || '—', pedido: ped ? (ped.num || ped.numero || '—') : '—',
        data: dp, valor_recebido: vr, status: r.status };
      if (!vid || !vendById[vid]) { sem.recebido += vr; sem.itens.push(item); return; }
      const v = vendById[vid];
      const pct = Number(v.comissao) || 0;
      const com = vr * pct / 100;
      if (!porV[vid]) porV[vid] = { vendedor: v, gerada: 0, recebido: 0, itens: [], vendas: 0, vendido: 0 };
      porV[vid].gerada += com; porV[vid].recebido += vr;
      porV[vid].itens.push(Object.assign({}, item, { pct, comissao: com }));
    });

    // Desempenho: vendas atribuídas (Atendido) por vendedor no período (eixo data da venda).
    (pedRows || []).forEach(p => {
      if (p.status !== 'Atendido' || !p.vendedor_id || !vendById[p.vendedor_id]) return;
      const d = String(p.data_venda || p.created_at || '').slice(0, 10);
      if (d && !noPeriodo(d)) return;
      if (!porV[p.vendedor_id]) porV[p.vendedor_id] = { vendedor: vendById[p.vendedor_id], gerada: 0, recebido: 0, itens: [], vendas: 0, vendido: 0 };
      porV[p.vendedor_id].vendas += 1;
      porV[p.vendedor_id].vendido += (Number(p.total) || 0);
    });

    const linhas = Object.values(porV).sort((a, b) => b.gerada - a.gerada);
    return { linhas, sem, totalGerada: linhas.reduce((a, l) => a + l.gerada, 0),
      totalRecebido: linhas.reduce((a, l) => a + l.recebido, 0) };
  }, [recRows, pedRows, vendedores, intervalo.inicio, intervalo.fim]);

  const nRecPeriodo = calc.linhas.reduce((a, l) => a + l.itens.length, 0) + calc.sem.itens.length;

  return (
    <div className="canvas">
      <PageHead title="Comissões" sub="Sobre o que foi RECEBIDO (não o faturado) · regime de caixa"
        right={<Button variant="secondary" icon="download" size="sm">Exportar</Button>} />
      <PeriodoFilter aba="comissoes" count={nRecPeriodo} />

      <div className="grid-4" style={{ marginBottom: 16 }}>
        <KpiMini lbl="Comissão gerada" v={calc.totalGerada > 0 ? `R$ ${brl(calc.totalGerada)}` : '—'} sub="no período · sobre recebido" />
        <KpiMini lbl="Recebido com vendedor" v={calc.totalRecebido > 0 ? `R$ ${brl(calc.totalRecebido)}` : '—'} sub="base da comissão" />
        <KpiMini lbl="Vendedores" v={String(calc.linhas.length)} sub="com movimento no período" />
        <KpiMini lbl="Sem vendedor" v={calc.sem.recebido > 0 ? `R$ ${brl(calc.sem.recebido)}` : '—'}
          sub={`${calc.sem.itens.length} recebimento${calc.sem.itens.length !== 1 ? 's' : ''} · sem comissão`} />
      </div>

      <Card title="Desempenho e comissão por vendedor">
        {calc.linhas.length === 0 ? (
          <div style={{ padding: '44px 0', textAlign: 'center', color: 'var(--tm-fg-3)' }}>
            <Icon name="badge-percent" size={34} style={{ opacity: 0.3, marginBottom: 10 }} />
            <div style={{ fontSize: 13 }}>Nenhuma comissão no período</div>
            <div style={{ fontSize: 12 }}>Comissão nasce quando um recebível vinculado a um vendedor é recebido.</div>
          </div>
        ) : (
          <table className="tbl">
            <thead><tr>
              <th>Vendedor</th><th className="num right">%</th><th className="num right">Vendas</th>
              <th className="num right">Vendido</th><th className="num right">Recebido</th>
              <th className="num right">Ticket médio</th><th className="num right">Comissão gerada</th><th></th>
            </tr></thead>
            <tbody>
              {calc.linhas.map((l) => {
                const ticket = l.vendas > 0 ? l.vendido / l.vendas : 0;
                return (
                  <tr key={l.vendedor.id} className="clickable" onClick={() => setDrill(l)}>
                    <td>{l.vendedor.nome}{l.vendedor.fantasia ? <span className="muted" style={{ fontSize: 11 }}> · {l.vendedor.fantasia}</span> : null}</td>
                    <td className="num right">{Number(l.vendedor.comissao) || 0}%</td>
                    <td className="num right">{l.vendas || 0}</td>
                    <td className="num right">{l.vendido > 0 ? `R$ ${brl(l.vendido)}` : '—'}</td>
                    <td className="num right">{l.recebido > 0 ? `R$ ${brl(l.recebido)}` : '—'}</td>
                    <td className="num right">{ticket > 0 ? `R$ ${brl(ticket)}` : '—'}</td>
                    <td className="num right" style={{ fontWeight: 600, color: 'var(--tm-brand-champagne-deep, var(--tm-fg-1))' }}>R$ {brl(l.gerada)}</td>
                    <td><Icon name="chevron-right" size={14} style={{ opacity: 0.5 }} /></td>
                  </tr>
                );
              })}
              {calc.sem.recebido !== 0 && (
                <tr className="clickable" style={{ background: 'var(--tm-bg-1)' }}
                  onClick={() => setDrill({ vendedor: { id: '__sem__', nome: 'Sem vendedor' }, gerada: 0, recebido: calc.sem.recebido, itens: calc.sem.itens, vendas: 0, vendido: 0, semVendedor: true })}>
                  <td style={{ fontStyle: 'italic', color: 'var(--tm-fg-3)' }}>Sem vendedor</td>
                  <td className="num right muted">—</td><td className="num right muted">—</td><td className="num right muted">—</td>
                  <td className="num right">R$ {brl(calc.sem.recebido)}</td>
                  <td className="num right muted">—</td>
                  <td className="num right muted" title="Recebido de pedidos sem vendedor — não gera comissão">sem comissão</td>
                  <td><Icon name="chevron-right" size={14} style={{ opacity: 0.5 }} /></td>
                </tr>
              )}
            </tbody>
          </table>
        )}
      </Card>

      <div style={{ fontSize: 11.5, color: 'var(--tm-fg-4)', marginTop: 12, lineHeight: 1.5 }}>
        Comissão = <b>valor recebido</b> × % do vendedor, título a título, na data do recebimento (regime de caixa).
        Pedidos sem vendedor vão para o balde "Sem vendedor" (atribua o vendedor na lista de Pedidos).
        O <b>pagamento</b> das comissões vem na próxima fase.
      </div>

      {drill && (
        <Drawer open={true} width={720} title={`Comissão · ${drill.vendedor.nome}`}
          subtitle={drill.semVendedor ? 'Recebido sem vendedor — não gera comissão' : `${Number(drill.vendedor.comissao) || 0}% sobre o recebido · ${rotuloFaixa(intervalo)}`}
          onClose={() => setDrill(null)}
          footer={<><span style={{ flex: 1 }} /><Button variant="secondary" size="sm" onClick={() => setDrill(null)}>Fechar</Button></>}>
          {!drill.semVendedor && (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 14 }}>
              <KpiMini lbl="Recebido" v={`R$ ${brl(drill.recebido)}`} sub={`${drill.itens.length} título${drill.itens.length !== 1 ? 's' : ''}`} />
              <KpiMini lbl="% comissão" v={`${Number(drill.vendedor.comissao) || 0}%`} sub="fixa por vendedor" />
              <KpiMini lbl="Comissão" v={`R$ ${brl(drill.gerada)}`} sub="gerada no período" />
            </div>
          )}
          <div style={{ fontSize: 12, color: 'var(--tm-fg-3)', marginBottom: 10 }}>
            Os recebíveis que compõem a comissão (confira na mão): comissão de cada linha = valor recebido × %.
          </div>
          <table className="tbl" style={{ fontSize: 12.5 }}>
            <thead><tr>
              <th>Ref.</th><th>Pedido</th><th>Recebido em</th><th>Status</th>
              <th className="num right">Valor recebido</th>
              {!drill.semVendedor && <th className="num right">%</th>}
              {!drill.semVendedor && <th className="num right">Comissão</th>}
            </tr></thead>
            <tbody>
              {drill.itens.slice().sort((a, b) => String(a.data).localeCompare(String(b.data))).map((it, i) => (
                <tr key={i}>
                  <td><span className="ref-mono">{it.ref}</span></td>
                  <td><span className="ref-mono gold">{it.pedido}</span></td>
                  <td className="muted">{fmtDate(it.data)}</td>
                  <td><span className="ch-chip">{it.status}</span></td>
                  <td className="num right">R$ {brl(it.valor_recebido)}</td>
                  {!drill.semVendedor && <td className="num right muted">{it.pct}%</td>}
                  {!drill.semVendedor && <td className="num right" style={{ fontWeight: 600 }}>R$ {brl(it.comissao)}</td>}
                </tr>
              ))}
              {!drill.semVendedor && (
                <tr style={{ borderTop: '2px solid var(--tm-brand-champagne)', fontWeight: 700 }}>
                  <td colSpan={4}>Total</td>
                  <td className="num right">R$ {brl(drill.recebido)}</td>
                  <td className="num right muted">—</td>
                  <td className="num right">R$ {brl(drill.gerada)}</td>
                </tr>
              )}
            </tbody>
          </table>
        </Drawer>
      )}
    </div>
  );
}

Object.assign(window, { Comissoes });