// ═══════════════════════════════════════════════════════════════════
// Screen: Extrato do Vendedor + Simulador "E se…"
// ═══════════════════════════════════════════════════════════════════

function gerarExtratoPDF(vendedor, meu, leadsDetalhe, trimestre) {
  if (!window.jspdf) { alert('Biblioteca PDF não carregada. Verifique sua conexão.'); return; }
  const { jsPDF } = window.jspdf;
  const origens = window.origemLabels || {};
  const doc = new jsPDF('p', 'mm', 'a4');

  doc.setFontSize(18);
  doc.setTextColor(0, 56, 46);
  doc.text('Escalab — Extrato de Comissão', 14, 20);
  doc.setFontSize(11);
  doc.setTextColor(74, 85, 96);
  doc.text(vendedor.nome + '   ·   ' + trimestre + '   ·   Gerado em ' + new Date().toLocaleDateString('pt-BR'), 14, 28);
  doc.setFontSize(10);
  doc.setTextColor(100, 100, 100);
  doc.text('Papel: ' + vendedor.papel + '   |   Setor: ' + vendedor.setor + '   |   Salário base: R$ ' + vendedor.salario.toLocaleString('pt-BR'), 14, 35);

  doc.setFontSize(14);
  doc.setTextColor(0, 83, 65);
  doc.text('Total no trimestre: R$ ' + Math.round(meu.total).toLocaleString('pt-BR'), 14, 44);

  doc.autoTable({
    head: [['Componente', 'Descrição', 'Valor']],
    body: [
      ['Comissão variável', 'Reuniões qualificadas, propostas aprovadas, NPS', 'R$ ' + Math.round(meu.variavel).toLocaleString('pt-BR')],
      ['Fixa por setor', 'Rateio proporcional ao salário base', 'R$ ' + Math.round(meu.fixaSetor).toLocaleString('pt-BR')],
      ['Adicionais evento', '0,01×V (organizador) e 0,025×V (executor)', 'R$ ' + Math.round(meu.evento).toLocaleString('pt-BR')],
      ['TOTAL', '', 'R$ ' + Math.round(meu.total).toLocaleString('pt-BR')],
    ],
    startY: 50,
    styles: { fontSize: 10, cellPadding: 3 },
    headStyles: { fillColor: [0, 131, 107], textColor: 255, fontStyle: 'bold' },
    columnStyles: { 2: { halign: 'right', fontStyle: 'bold' } },
    alternateRowStyles: { fillColor: [240, 249, 246] },
  });

  if (leadsDetalhe.length > 0) {
    const startY = doc.lastAutoTable.finalY + 10;
    doc.setFontSize(12);
    doc.setTextColor(0, 0, 0);
    doc.text('Detalhamento por lead:', 14, startY);

    const linhasRows = [];
    leadsDetalhe.forEach(l => {
      l.itens.forEach((it, i) => {
        linhasRows.push([
          i === 0 ? l.lead : '',
          i === 0 ? (origens[l.origem] || l.origem) : '',
          it.gatilho,
          'R$ ' + Math.round(it.valor).toLocaleString('pt-BR'),
        ]);
      });
    });

    doc.autoTable({
      head: [['Lead', 'Origem', 'Gatilho', 'Valor']],
      body: linhasRows,
      startY: startY + 5,
      styles: { fontSize: 9, cellPadding: 2 },
      headStyles: { fillColor: [0, 56, 46], textColor: 255, fontStyle: 'bold' },
      columnStyles: { 3: { halign: 'right' } },
    });
  }

  doc.save('Escalab-Extrato-' + vendedor.nome.split(' ')[0] + '-' + trimestre.replace('/', '-') + '.pdf');
}

function ExtratoVendedor({ state, vendedorId, setState }) {
  const { leads, regras, vendedores, trimestre, historicoPeriodos = [] } = state;
  const { isMobile } = useMobile();
  const [abaExtrato, setAbaExtrato] = useState('atual');
  const [simValor, setSimValor] = useState(200000);
  const [simOrigem, setSimOrigem] = useState('ativa');
  const [simMarkup, setSimMarkup] = useState(30);
  const [simQuals, setSimQuals] = useState([vendedorId]);
  const [simFinals, setSimFinals] = useState([vendedorId]);
  const [senhaModal, setSenhaModal] = useState(false);
  const [senhaAtual, setSenhaAtual] = useState('');
  const [senhaNova, setSenhaNova] = useState('');
  const [senhaConfirma, setSenhaConfirma] = useState('');
  const [senhaErro, setSenhaErro] = useState('');
  const [showSenhaAtual, setShowSenhaAtual] = useState(false);
  const [showSenhaNova, setShowSenhaNova] = useState(false);

  const vendedor = vendedores.find(v => v.id === vendedorId);
  const porVendedor = useMemo(() => calcularComissoes(leads, regras, vendedores), [leads, regras, vendedores]);
  const meu = porVendedor[vendedorId] || { variavel: 0, fixaSetor: 0, evento: 0, total: 0, linhas: [] };

  const setorRateio = ['P&D', 'PMO', 'NNE', 'Marketing', 'Editais'].includes(vendedor?.setor);
  const ehComercial = ['Comercial', 'Hunter', 'Fidelização'].includes(vendedor?.papel);

  const ativos = vendedores.filter(v => v.ativo && v.papel !== 'Diretora' && v.papel !== 'Diretor');

  const toggleQual  = (id) => setSimQuals(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
  const toggleFinal = (id) => setSimFinals(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);

  const simulado = useMemo(() => {
    const participacoes = [
      ...simQuals.map(id => ({ v: id, papel: 'Qualificador' })),
      ...simFinals.map(id => ({ v: id, papel: 'Finalizador' })),
    ];
    if (participacoes.length === 0) return { total: 0, delta: 0, divisao: [] };
    const fakeLead = {
      id: 'SIM', lead: 'Projeto hipotético', cliente: 'Cliente X', origem: simOrigem,
      qualificado: 'sim', proposta: 'aprovada', vendido: true, valor: simValor, markup: simMarkup,
      setor: 'pd', participacoes, comissiona: true, status: 'fechado', data: '2026-04-22',
    };
    const simIsolado = calcularComissoes([fakeLead], regras, vendedores);
    const simTotal   = calcularComissoes([...leads, fakeLead], regras, vendedores);
    const novo = simTotal[vendedorId] || { total: 0, variavel: 0, fixaSetor: 0, evento: 0 };
    return {
      total: novo.total,
      delta: novo.total - meu.total,
      divisao: vendedores
        .filter(v => simIsolado[v.id]?.total > 0.01)
        .map(v => ({
          id: v.id, nome: v.nome,
          total:    simIsolado[v.id].total,
          variavel: simIsolado[v.id].variavel,
          fixa:     simIsolado[v.id].fixaSetor,
          papeis:   [...(simQuals.includes(v.id) ? ['Qualificador'] : []), ...(simFinals.includes(v.id) ? ['Finalizador'] : [])],
        }))
        .sort((a, b) => b.total - a.total),
    };
  }, [leads, regras, vendedores, vendedorId, simValor, simOrigem, simMarkup, simQuals, simFinals, meu]);

  // 1.2 — Histórico pessoal do vendedor
  const historicoVendedor = useMemo(() => {
    return historicoPeriodos.map(p => {
      const minhaParte = (p.porVendedor || []).find(pv => pv.id === vendedorId);
      if (!minhaParte || minhaParte.total <= 0) return null;
      const leadsComissionados = (p.leads || []).filter(l => {
        if (l.participacoes) return l.participacoes.some(pa => pa.v === vendedorId);
        if (l.comissionados) return l.comissionados.split(',').map(n => n.trim()).some(n => vendedor?.nome?.startsWith(n));
        return false;
      });
      return { ...p, minhaParte, leadsComissionados };
    }).filter(Boolean);
  }, [historicoPeriodos, vendedorId, vendedor]);

  const totalHistoricoVendedor = historicoVendedor.reduce((s, p) => s + p.minhaParte.total, 0);
  const melhorPeriodo = historicoVendedor.reduce((best, p) => (!best || p.minhaParte.total > best.minhaParte.total ? p : best), null);
  const maxHistorico = Math.max(...historicoVendedor.map(p => p.minhaParte.total), 1);

  const setorMembros = useMemo(() => {
    if (!setorRateio) return null;
    const membros = vendedores.filter(v => v.ativo && v.setor === vendedor.setor);
    const soma = membros.reduce((s, m) => s + m.salario, 0);
    return { membros, soma };
  }, [vendedores, vendedor, setorRateio]);

  const equipe = vendedores
    .filter(v => v.ativo && v.papel !== 'Diretora' && porVendedor[v.id]?.total > 0)
    .map(v => ({ ...v, comissao: porVendedor[v.id].total }))
    .sort((a, b) => b.comissao - a.comissao);

  if (!vendedor) return <div>Vendedor não encontrado.</div>;

  const porLead = {};
  meu.linhas.forEach(l => {
    if (!porLead[l.lead]) porLead[l.lead] = { lead: l.lead, origem: l.origem, itens: [], total: 0 };
    porLead[l.lead].itens.push(l);
    porLead[l.lead].total += l.valor;
  });
  const leadsDetalhe = Object.values(porLead).sort((a, b) => b.total - a.total);

  const abrirSenhaModal = () => {
    setSenhaAtual(''); setSenhaNova(''); setSenhaConfirma(''); setSenhaErro('');
    setShowSenhaAtual(false); setShowSenhaNova(false);
    setSenhaModal(true);
  };

  const salvarSenha = async () => {
    setSenhaErro('');
    const senhaCorreta = vendedor.senha || 'escalab123';
    if (!senhaAtual || !senhaNova || !senhaConfirma) { setSenhaErro('Preencha todos os campos.'); return; }
    if (senhaAtual !== senhaCorreta) { setSenhaErro('Senha atual incorreta.'); return; }
    if (senhaNova.length < 6) { setSenhaErro('A nova senha deve ter ao menos 6 caracteres.'); return; }
    if (senhaNova !== senhaConfirma) { setSenhaErro('As senhas não coincidem.'); return; }
    // Atualiza no Firebase Auth (sincroniza para todos)
    if (window.FIREBASE_AUTH?.currentUser) {
      try {
        await window.FIREBASE_AUTH.currentUser.updatePassword(senhaNova);
      } catch (e) {
        setSenhaErro('Erro ao atualizar senha: ' + e.message); return;
      }
    }
    setState.setVendedores(vendedores.map(v => v.id === vendedorId ? { ...v, senha: senhaNova } : v));
    setSenhaModal(false);
  };

  const handleEmailClick = () => {
    const assunto = encodeURIComponent('Extrato de Comissão — ' + trimestre);
    const corpo = encodeURIComponent(
      'Olá ' + vendedor.nome + ',\n\n' +
      'Segue seu extrato de comissão referente a ' + trimestre + ':\n\n' +
      'Variável: R$ ' + Math.round(meu.variavel).toLocaleString('pt-BR') + '\n' +
      'Fixa por setor: R$ ' + Math.round(meu.fixaSetor).toLocaleString('pt-BR') + '\n' +
      'Adicionais: R$ ' + Math.round(meu.evento).toLocaleString('pt-BR') + '\n' +
      'TOTAL: R$ ' + Math.round(meu.total).toLocaleString('pt-BR') + '\n\n' +
      'Equipe Escalab'
    );
    window.open('mailto:?subject=' + assunto + '&body=' + corpo);
  };

  const origens = window.origemLabels || {};

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
      {/* Hero */}
      <div style={{ background: 'linear-gradient(135deg, #00382E 0%, #005E4D 100%)', borderRadius: 16, padding: '36px 40px', color: '#fff', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -60, right: -60, width: 260, height: 260, borderRadius: '50%', background: 'radial-gradient(circle, rgba(94,233,196,.28), transparent 70%)' }} />
        <div style={{ position: 'relative', display: 'flex', flexDirection: isMobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'flex-end', gap: 20 }}>
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontSize: 11, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--escalab-brand-accent)', marginBottom: 18 }}>
              <span>Extrato · {trimestre}</span>
              <span style={{ width: 1, height: 10, background: 'rgba(255,255,255,.3)' }} />
              <span>Transparência total</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 6 }}>
              <Avatar v={vendedor} size={56} />
              <div>
                <h1 style={{ color: '#fff', fontSize: 34, margin: 0, letterSpacing: '-.02em', lineHeight: 1.1 }}>Olá, {vendedor.nome.split(' ')[0]}.</h1>
                <div style={{ fontSize: 14, color: 'rgba(255,255,255,.75)', marginTop: 4 }}>{vendedor.papel} · {vendedor.setor} · Sal. base {brl(vendedor.salario)}</div>
              </div>
            </div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--escalab-brand-accent)', marginBottom: 8 }}>Sua comissão no trimestre</div>
            <div style={{ fontSize: 56, fontWeight: 700, letterSpacing: '-.03em', lineHeight: 1 }}>{brl(meu.total)}</div>
            <div style={{ fontSize: 13, color: 'rgba(255,255,255,.75)', marginTop: 6 }}>
              Atualizado em tempo real · {leadsDetalhe.length} leads contribuem
              {totalHistoricoVendedor > 0 && <span> · <strong style={{ color: 'var(--escalab-brand-accent)' }}>{brl(totalHistoricoVendedor + meu.total)}</strong> acumulado total</span>}
            </div>
          </div>
        </div>
      </div>

      {/* Tabs — Trimestre atual / Meu histórico */}
      <div style={{ display: 'flex', gap: 4, background: 'var(--escalab-paper)', border: '1px solid var(--escalab-line)', borderRadius: 10, padding: 4, width: 'fit-content' }}>
        {[
          { id: 'atual',    label: 'Trimestre atual' },
          { id: 'historico', label: 'Meu histórico' + (historicoVendedor.length > 0 ? ' (' + historicoVendedor.length + ')' : '') },
        ].map(t => (
          <button key={t.id} onClick={() => setAbaExtrato(t.id)}
            style={{ padding: '8px 18px', border: 0, borderRadius: 7, fontFamily: 'inherit', fontSize: 13.5, fontWeight: 500, cursor: 'pointer', transition: 'all .15s',
              background: abaExtrato === t.id ? '#fff' : 'transparent',
              color: abaExtrato === t.id ? 'var(--escalab-ink)' : 'var(--escalab-slate)',
              boxShadow: abaExtrato === t.id ? '0 1px 4px rgba(0,0,0,.10)' : 'none' }}>
            {t.label}
          </button>
        ))}
      </div>

      {/* ═══ ABA: TRIMESTRE ATUAL ═══ */}
      {abaExtrato === 'atual' && <>

        {/* Breakdown */}
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)', gap: 14 }}>
          <Stat label="Variável" value={brl(meu.variavel)} sublabel="Reuniões, propostas, NPS" tone="light" />
          <Stat label="Fixa por setor" value={brl(meu.fixaSetor)} sublabel={'Rateio do setor ' + vendedor.setor} tone="light" />
          <Stat label="Adicionais evento" value={brl(meu.evento)} sublabel="0,01×V e 0,025×V" tone="light" />
          <div style={{ background: '#fff', border: '2px solid var(--escalab-brand)', borderRadius: 12, padding: '22px 24px', position: 'relative' }}>
            <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--escalab-brand)', marginBottom: 12 }}>Total</div>
            <div style={{ fontSize: 36, fontWeight: 700, letterSpacing: '-.02em', color: 'var(--escalab-brand-deep)', lineHeight: 1 }}>{brl(meu.total)}</div>
            <div style={{ fontSize: 12.5, color: 'var(--escalab-slate)', marginTop: 8 }}>A ser pago após fechamento</div>
          </div>
        </div>

        {/* Simulador + Equipe */}
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.1fr 1fr', gap: 20 }}>
          <Card pad={0}>
            <div style={{ padding: '20px 24px', borderBottom: '1px solid var(--escalab-line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div>
                <h3 style={{ margin: 0, fontSize: 17, letterSpacing: '-.01em' }}>Simulador &quot;e se…&quot;</h3>
                <p style={{ margin: '4px 0 0', fontSize: 13, color: 'var(--escalab-slate)' }}>
                  Defina os participantes e veja como a comissão seria dividida.
                </p>
              </div>
              <Icon name="calc" size={22} />
            </div>
            <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 16 }}>
              {/* Parâmetros do projeto */}
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <Field label="Origem">
                  <Select value={simOrigem} onChange={setSimOrigem}
                    options={Object.entries(origens).map(([v, l]) => ({ value: v, label: l }))} />
                </Field>
                <Field label="Markup">
                  <Input value={simMarkup} onChange={v => setSimMarkup(+v || 0)} type="number" suffix="%" />
                </Field>
              </div>
              <Field label={'Valor do projeto: ' + brl(simValor)}>
                <input type="range" min="50000" max="1000000" step="10000" value={simValor} onChange={e => setSimValor(+e.target.value)} style={{ width: '100%', accentColor: 'var(--escalab-brand)' }} />
              </Field>

              {/* Participantes: checkboxes múltiplos por papel */}
              <div style={{ background: 'var(--escalab-paper)', border: '1px solid var(--escalab-line)', borderRadius: 10, padding: 14 }}>
                <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 12 }}>Participantes — marque todos os envolvidos</div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                  {[
                    { label: 'Qualificadores', checked: simQuals, toggle: toggleQual },
                    { label: 'Finalizadores',  checked: simFinals, toggle: toggleFinal },
                  ].map(grupo => (
                    <div key={grupo.label}>
                      <div style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--escalab-slate)', marginBottom: 8 }}>{grupo.label}</div>
                      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, maxHeight: 220, overflowY: 'auto' }}>
                        {ativos.map(v => (
                          <label key={v.id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '4px 6px', borderRadius: 6, cursor: 'pointer', background: grupo.checked.includes(v.id) ? 'var(--escalab-brand-tint)' : 'transparent' }}>
                            <input type="checkbox" checked={grupo.checked.includes(v.id)} onChange={() => grupo.toggle(v.id)} style={{ accentColor: 'var(--escalab-brand)', width: 14, height: 14, flexShrink: 0 }} />
                            <span style={{ fontSize: 12.5, fontWeight: grupo.checked.includes(v.id) ? 600 : 400, color: grupo.checked.includes(v.id) ? 'var(--escalab-brand-deep)' : 'var(--escalab-slate)', lineHeight: 1.3 }}>
                              {v.nome.split(' ')[0]}
                              <span style={{ fontSize: 10.5, color: 'var(--escalab-mute)', display: 'block' }}>{v.papel}</span>
                            </span>
                          </label>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* Resultado com breakdown completo por pessoa */}
              <div style={{ background: 'var(--escalab-brand-tint)', border: '1px solid var(--escalab-brand-soft)', padding: 20, borderRadius: 10 }}>
                <div style={{ fontSize: 11.5, fontWeight: 600, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--escalab-brand-deep)', marginBottom: 14 }}>
                  Divisão real da comissão · {brl(simValor)} × {simMarkup}% markup
                </div>
                {simulado.divisao.length === 0 ? (
                  <div style={{ fontSize: 13, color: 'var(--escalab-mute)' }}>Selecione ao menos um participante acima.</div>
                ) : simulado.divisao.map((p, pi) => {
                  const eVoce = p.id === vendedorId;
                  const vend = vendedores.find(v => v.id === p.id);
                  return (
                    <div key={p.id} style={{ padding: '10px 0', borderBottom: pi < simulado.divisao.length - 1 ? '1px solid var(--escalab-brand-soft)' : 'none' }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: p.variavel > 0.01 || p.fixa > 0.01 ? 6 : 0 }}>
                        <Avatar v={vend} size={26} />
                        <div style={{ flex: 1 }}>
                          <div style={{ fontSize: 13, fontWeight: eVoce ? 700 : 600, color: 'var(--escalab-brand-deep)' }}>
                            {p.nome.split(' ')[0]} {eVoce && <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.08em' }}>· VOCÊ</span>}
                          </div>
                          {p.papeis.length > 0 && <div style={{ fontSize: 10.5, color: 'var(--escalab-brand)', fontWeight: 500 }}>{p.papeis.join(' + ')}</div>}
                        </div>
                        <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--escalab-brand-deep)', fontVariantNumeric: 'tabular-nums' }}>{brl(p.total)}</div>
                      </div>
                      {p.variavel > 0.01 && (
                        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11.5, color: 'var(--escalab-brand-deep)', paddingLeft: 36, opacity: .75 }}>
                          <span>↳ Variável (reunião/proposta)</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>{brlCents(p.variavel)}</span>
                        </div>
                      )}
                      {p.fixa > 0.01 && (
                        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11.5, color: 'var(--escalab-brand-deep)', paddingLeft: 36, opacity: .75 }}>
                          <span>↳ Fixa (% do projeto)</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>{brlCents(p.fixa)}</span>
                        </div>
                      )}
                    </div>
                  );
                })}
                {simulado.delta > 0.01 && (
                  <div style={{ marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--escalab-brand-soft)', fontSize: 12.5, color: 'var(--escalab-brand-deep)' }}>
                    Seu acumulado no trimestre subiria para <strong>{brl(simulado.total)}</strong> (+{brl(simulado.delta)})
                  </div>
                )}
              </div>

            </div>
          </Card>

          <Card pad={0}>
            <div style={{ padding: '20px 24px', borderBottom: '1px solid var(--escalab-line)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                  <h3 style={{ margin: 0, fontSize: 17, letterSpacing: '-.01em' }}>Time Escalab · {trimestre}</h3>
                  <p style={{ margin: '4px 0 0', fontSize: 13, color: 'var(--escalab-slate)' }}>Na Escalab todos veem todos — cultura transparente.</p>
                </div>
                <Tag tone="brand"><Icon name="eye" size={12} /> T</Tag>
              </div>
            </div>
            <div style={{ maxHeight: 360, overflowY: 'auto' }}>
              {equipe.map((v, i) => (
                <div key={v.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '11px 24px', borderBottom: i < equipe.length - 1 ? '1px solid var(--escalab-line)' : 'none', background: v.id === vendedorId ? 'var(--escalab-brand-tint)' : 'transparent' }}>
                  <span style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--escalab-mute)', width: 18 }}>{String(i + 1).padStart(2, '0')}</span>
                  <Avatar v={v} size={28} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>{v.nome} {v.id === vendedorId && <span style={{ fontSize: 10, color: 'var(--escalab-brand)', fontWeight: 700, letterSpacing: '.08em' }}>· VOCÊ</span>}</div>
                    <div style={{ fontSize: 11, color: 'var(--escalab-mute)' }}>{v.papel}</div>
                  </div>
                  <div style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--escalab-brand-deep)', fontVariantNumeric: 'tabular-nums' }}>{brl(v.comissao)}</div>
                </div>
              ))}
            </div>

            {/* 1.3 — Requerimento */}
            <div style={{ padding: '16px 24px', borderTop: '1px solid var(--escalab-line)', background: 'var(--escalab-paper)' }}>
              <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 8 }}>Contestar lançamento</div>
              <p style={{ margin: '0 0 12px', fontSize: 12.5, color: 'var(--escalab-slate)', lineHeight: 1.5 }}>
                Não concorda com algum lançamento? Abra um requerimento para revisão pela diretoria.
              </p>
              <a href="https://docs.google.com/forms/d/13wzE707-zvy6KMHqRnunq8atR03QD-m9usUI0SQvkkg/viewform" target="_blank" rel="noopener noreferrer"
                style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '9px 16px', background: 'var(--escalab-ink)', color: '#fff', borderRadius: 8, fontSize: 13, fontWeight: 600, textDecoration: 'none', transition: 'opacity .15s' }}
                onMouseEnter={e => e.currentTarget.style.opacity = '.85'}
                onMouseLeave={e => e.currentTarget.style.opacity = '1'}>
                <Icon name="mail" size={14} />
                Abrir requerimento
              </a>
            </div>
          </Card>
        </div>

        {/* Detalhamento por lead */}
        <Card pad={0}>
          <div style={{ padding: '20px 24px', borderBottom: '1px solid var(--escalab-line)' }}>
            <h3 style={{ margin: 0, fontSize: 17, letterSpacing: '-.01em' }}>Como seu valor foi calculado</h3>
            <p style={{ margin: '4px 0 0', fontSize: 13, color: 'var(--escalab-slate)' }}>{leadsDetalhe.length} leads contribuíram para sua comissão no trimestre.</p>
          </div>
          {leadsDetalhe.length === 0 ? (
            <div style={{ padding: 40, textAlign: 'center', color: 'var(--escalab-mute)', fontSize: 14 }}>Sem lançamentos no seu extrato neste trimestre.</div>
          ) : leadsDetalhe.map((l, li) => (
            <div key={li} style={{ padding: '16px 24px', borderTop: li > 0 ? '1px solid var(--escalab-line)' : 'none' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <span style={{ fontSize: 14.5, fontWeight: 600 }}>{l.lead}</span>
                  <Tag tone="outline">{origens[l.origem] || l.origem}</Tag>
                </div>
                <span style={{ fontSize: 15, fontWeight: 700, color: 'var(--escalab-brand-deep)', fontVariantNumeric: 'tabular-nums' }}>{brl(l.total)}</span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                {l.itens.map((it, i) => (
                  <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12.5, color: 'var(--escalab-slate)', padding: '3px 0' }}>
                    <span>↳ {it.gatilho}</span>
                    <span style={{ fontVariantNumeric: 'tabular-nums' }}>{brlCents(it.valor)}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </Card>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10 }}>
          <Button variant="outline" icon="lock" onClick={abrirSenhaModal}>Alterar senha</Button>
          <div style={{ display: 'flex', gap: 10 }}>
            <Button variant="outline" icon="mail" onClick={handleEmailClick}>Enviar por email</Button>
            <Button variant="dark" icon="download" onClick={() => gerarExtratoPDF(vendedor, meu, leadsDetalhe, trimestre)}>Baixar PDF</Button>
          </div>
        </div>
      </>}

      {/* ═══ ABA: MEU HISTÓRICO ═══ */}
      {abaExtrato === 'historico' && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          {historicoVendedor.length === 0 ? (
            <Card>
              <div style={{ padding: 40, textAlign: 'center', color: 'var(--escalab-mute)', fontSize: 14 }}>
                Nenhum período anterior com comissão registrada para você.
              </div>
            </Card>
          ) : <>
            {/* Resumo do histórico */}
            <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 14 }}>
              <Stat label="Total acumulado (todos os períodos)" value={brl(totalHistoricoVendedor)} sublabel={`${historicoVendedor.length} período(s) com comissão`} tone="dark" />
              <Stat label="Melhor período" value={melhorPeriodo ? brl(melhorPeriodo.minhaParte.total) : '—'} sublabel={melhorPeriodo?.label || '—'} tone="light" />
              <Stat label="Total com trimestre atual" value={brl(totalHistoricoVendedor + meu.total)} sublabel="Histórico + 1T/2026 em aberto" tone="light" />
            </div>

            {/* Gráfico de barras por período */}
            <Card pad={0}>
              <div style={{ padding: '20px 24px', borderBottom: '1px solid var(--escalab-line)' }}>
                <h3 style={{ margin: 0, fontSize: 17, letterSpacing: '-.01em' }}>Comissão por período</h3>
                <p style={{ margin: '4px 0 0', fontSize: 13, color: 'var(--escalab-slate)' }}>Evolução da sua remuneração ao longo dos períodos registrados.</p>
              </div>
              <div style={{ padding: '20px 24px', display: 'flex', flexDirection: 'column', gap: 14 }}>
                {[...historicoVendedor].reverse().map(p => {
                  const pctBar = p.minhaParte.total / maxHistorico;
                  const isMelhor = p.id === melhorPeriodo?.id;
                  return (
                    <div key={p.id}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                          <span style={{ fontSize: 13.5, fontWeight: 600 }}>{p.label}</span>
                          {isMelhor && <Tag tone="brand">Melhor período</Tag>}
                        </div>
                        <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--escalab-brand-deep)', fontVariantNumeric: 'tabular-nums' }}>{brl(p.minhaParte.total)}</span>
                      </div>
                      <div style={{ height: 8, background: 'var(--escalab-paper)', borderRadius: 999, overflow: 'hidden' }}>
                        <div style={{ width: (pctBar * 100) + '%', height: '100%', background: isMelhor ? 'var(--escalab-brand)' : 'var(--escalab-brand-soft)', borderRadius: 999, transition: 'width .4s' }} />
                      </div>
                      <div style={{ display: 'flex', gap: 16, marginTop: 4, fontSize: 11.5, color: 'var(--escalab-mute)' }}>
                        <span>Variável: {brl(p.minhaParte.variavel)}</span>
                        <span>Fixa: {brl(p.minhaParte.fixa)}</span>
                      </div>
                    </div>
                  );
                })}
                {/* Trimestre atual */}
                {meu.total > 0 && (
                  <div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <span style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--escalab-slate)' }}>1T/2026 (em aberto)</span>
                        <Tag tone="outline">Atual</Tag>
                      </div>
                      <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--escalab-slate)', fontVariantNumeric: 'tabular-nums' }}>{brl(meu.total)}</span>
                    </div>
                    <div style={{ height: 8, background: 'var(--escalab-paper)', borderRadius: 999, overflow: 'hidden' }}>
                      <div style={{ width: (meu.total / maxHistorico * 100) + '%', height: '100%', background: 'var(--escalab-line)', borderRadius: 999 }} />
                    </div>
                  </div>
                )}
              </div>
            </Card>

            {/* Histórico de leads/clientes comissionados */}
            {historicoVendedor.map(p => p.leadsComissionados.length > 0 && (
              <Card key={p.id} pad={0}>
                <div style={{ padding: '16px 24px', borderBottom: '1px solid var(--escalab-line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div>
                    <h4 style={{ margin: 0, fontSize: 15, fontWeight: 600 }}>{p.label} — Leads comissionados</h4>
                    <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', marginTop: 2 }}>{p.leadsComissionados.length} cliente(s) · sua comissão total: {brl(p.minhaParte.total)}</div>
                  </div>
                  <Tag tone="outline">{p.label}</Tag>
                </div>
                <div style={{ padding: '8px 0' }}>
                  {p.leadsComissionados.map((l, li) => (
                    <div key={li} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 24px', borderBottom: li < p.leadsComissionados.length - 1 ? '1px solid var(--escalab-line)' : 'none' }}>
                      <div style={{ flex: 1, fontSize: 13.5, fontWeight: 500 }}>{l.lead}</div>
                      <Tag tone="outline">{origens[l.origem] || l.origem}</Tag>
                      <Tag tone={l.proposta === 'aprovada' ? 'success' : 'outline'}>{l.proposta === 'aprovada' ? 'Proposta aprovada' : 'Qualificado'}</Tag>
                    </div>
                  ))}
                </div>
              </Card>
            ))}
          </>}
        </div>
      )}

      {/* Modal alterar senha */}
      <Modal open={senhaModal} onClose={() => setSenhaModal(false)} title="Alterar minha senha" width={440}
        footer={<>
          <Button variant="outline" onClick={() => setSenhaModal(false)}>Cancelar</Button>
          <Button variant="primary" icon="check" onClick={salvarSenha}>Salvar nova senha</Button>
        </>}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Field label="Senha atual">
            <div style={{ display: 'flex', alignItems: 'center', border: '1px solid var(--escalab-line)', borderRadius: 8, background: '#fff', overflow: 'hidden' }}>
              <input value={senhaAtual} onChange={e => setSenhaAtual(e.target.value)}
                type={showSenhaAtual ? 'text' : 'password'} placeholder="••••••••"
                style={{ border: 0, outline: 0, flex: 1, padding: '10px 12px', fontSize: 14, fontFamily: 'inherit', background: 'transparent' }} />
              <button type="button" onClick={() => setShowSenhaAtual(!showSenhaAtual)} style={{ border: 0, background: 'transparent', cursor: 'pointer', padding: '0 12px', color: 'var(--escalab-slate)', display: 'flex' }}>
                <Icon name="eye" size={15} />
              </button>
            </div>
          </Field>
          <Field label="Nova senha" hint="Mínimo 6 caracteres">
            <div style={{ display: 'flex', alignItems: 'center', border: '1px solid var(--escalab-line)', borderRadius: 8, background: '#fff', overflow: 'hidden' }}>
              <input value={senhaNova} onChange={e => setSenhaNova(e.target.value)}
                type={showSenhaNova ? 'text' : 'password'} placeholder="••••••••"
                style={{ border: 0, outline: 0, flex: 1, padding: '10px 12px', fontSize: 14, fontFamily: 'inherit', background: 'transparent' }} />
              <button type="button" onClick={() => setShowSenhaNova(!showSenhaNova)} style={{ border: 0, background: 'transparent', cursor: 'pointer', padding: '0 12px', color: 'var(--escalab-slate)', display: 'flex' }}>
                <Icon name="eye" size={15} />
              </button>
            </div>
          </Field>
          <Field label="Confirmar nova senha">
            <Input value={senhaConfirma} onChange={setSenhaConfirma} type="password" placeholder="••••••••" />
          </Field>
          {senhaErro && <Banner tone="warn" icon="warn">{senhaErro}</Banner>}
        </div>
      </Modal>
    </div>
  );
}

Object.assign(window, { ExtratoVendedor, gerarExtratoPDF });