// ═══════════════════════════════════════════════════════════════════
// Screen: Painel da Diretoria (Maria)
// ═══════════════════════════════════════════════════════════════════

function exportarExcel(state) {
  if (!window.XLSX) { alert('Biblioteca Excel não carregada. Verifique sua conexão.'); return; }
  const { leads, vendedores, regras, trimestre } = state;
  const porVendedor = calcularComissoes(leads, regras, vendedores);
  const origens = window.origemLabels || {};
  const status = window.statusLabels || {};
  const wb = window.XLSX.utils.book_new();

  const leadsData = leads.map(l => ({
    'ID': l.id,
    'Lead': l.lead,
    'Cliente': l.cliente,
    'Data': l.data,
    'Origem': origens[l.origem] || l.origem,
    'Status': status[l.status] || l.status,
    'Qualificado': l.qualificado,
    'Proposta': l.proposta,
    'Vendido': l.vendido ? 'Sim' : 'Não',
    'Valor (R$)': l.valor || 0,
    'Markup (%)': l.markup || 0,
    'Comissiona': l.comissiona ? 'Sim' : 'Não',
    'Justificativa': l.justificativa || '',
  }));
  window.XLSX.utils.book_append_sheet(wb, window.XLSX.utils.json_to_sheet(leadsData), 'Leads');

  const comData = vendedores.filter(v => v.ativo).map(v => ({
    'Nome': v.nome,
    'Papel': v.papel,
    'Setor': v.setor,
    'Salário Base (R$)': v.salario,
    'Variável (R$)': Math.round(porVendedor[v.id]?.variavel || 0),
    'Fixa Setor (R$)': Math.round(porVendedor[v.id]?.fixaSetor || 0),
    'Adicionais (R$)': Math.round(porVendedor[v.id]?.evento || 0),
    'Total (R$)': Math.round(porVendedor[v.id]?.total || 0),
  }));
  window.XLSX.utils.book_append_sheet(wb, window.XLSX.utils.json_to_sheet(comData), 'Comissões');

  window.XLSX.writeFile(wb, 'Escalab-' + trimestre.replace('/', '-') + '.xlsx');
}

function gerarFolhaPDF(state) {
  if (!window.jspdf) { alert('Biblioteca PDF não carregada. Verifique sua conexão.'); return; }
  const { leads, vendedores, regras, trimestre } = state;
  const porVendedor = calcularComissoes(leads, regras, vendedores);
  const { jsPDF } = window.jspdf;
  const doc = new jsPDF('p', 'mm', 'a4');

  doc.setFontSize(18);
  doc.setTextColor(0, 131, 107);
  doc.text('Escalab — Folha de Comissionamento', 14, 20);
  doc.setFontSize(11);
  doc.setTextColor(74, 85, 96);
  doc.text(trimestre + '   ·   Gerado em ' + new Date().toLocaleDateString('pt-BR'), 14, 28);

  const totalPagar = Object.values(porVendedor).reduce((s, v) => s + v.total, 0);
  const totalVendido = leads.filter(l => l.vendido && l.comissiona).reduce((s, l) => s + l.valor, 0);
  doc.setFontSize(10);
  doc.setTextColor(0, 0, 0);
  doc.text('Total a pagar: R$ ' + Math.round(totalPagar).toLocaleString('pt-BR'), 14, 36);
  doc.text('Total vendido: R$ ' + Math.round(totalVendido).toLocaleString('pt-BR'), 90, 36);

  const rows = vendedores
    .filter(v => v.ativo && (porVendedor[v.id]?.total || 0) > 0)
    .sort((a, b) => (porVendedor[b.id]?.total || 0) - (porVendedor[a.id]?.total || 0))
    .map(v => [
      v.nome, v.papel, v.setor,
      'R$ ' + Math.round(porVendedor[v.id].variavel).toLocaleString('pt-BR'),
      'R$ ' + Math.round(porVendedor[v.id].fixaSetor).toLocaleString('pt-BR'),
      'R$ ' + Math.round(porVendedor[v.id].evento).toLocaleString('pt-BR'),
      'R$ ' + Math.round(porVendedor[v.id].total).toLocaleString('pt-BR'),
    ]);

  doc.autoTable({
    head: [['Nome', 'Papel', 'Setor', 'Variável', 'Fixa Setor', 'Adicionais', 'Total']],
    body: rows,
    startY: 42,
    styles: { fontSize: 9, cellPadding: 3 },
    headStyles: { fillColor: [0, 131, 107], textColor: 255, fontStyle: 'bold' },
    alternateRowStyles: { fillColor: [240, 249, 246] },
    columnStyles: { 6: { fontStyle: 'bold' } },
  });

  doc.save('Escalab-Folha-' + trimestre.replace('/', '-') + '.pdf');
}

function PainelDiretoria({ state, setState }) {
  const { leads, regras, vendedores, trimestre, fechado, historicoPeriodos = [], dreRealizado = 0, modoHistorico, periodoHistorico, modoFuturo } = state;
  const { isMobile } = useMobile();
  const [dreModal, setDreModal] = React.useState(false);
  const [dreInput, setDreInput] = React.useState('');

  const porVendedor = useMemo(() => calcularComissoes(leads, regras, vendedores), [leads, regras, vendedores]);
  const resumo = useMemo(() => resumoPorOrigem(leads, regras.metas), [leads, regras]);

  const totalPagar = Object.values(porVendedor).reduce((s, v) => s + v.total, 0);
  const totalFaturadoTrimestre = leads.filter(l => l.vendido && l.comissiona).reduce((s, l) => s + l.valor, 0);
  const totalMeta = Object.values(regras.metas).reduce((s, m) => s + m.valor, 0);
  const leadsAtivos = leads.filter(l => l.status !== 'perdido').length;
  const leadsFechados = leads.filter(l => l.vendido).length;

  // Acumulado 2026 = períodos fechados neste ano + trimestre atual
  const periodos2026 = historicoPeriodos.filter(p => String(p.periodo || p.label).includes('2026'));
  const acumFixa2026     = periodos2026.reduce((s, p) => s + p.totalFixa, 0) + Object.values(porVendedor).reduce((s, v) => s + v.fixaSetor, 0);
  const acumVariavel2026 = periodos2026.reduce((s, p) => s + p.totalVariavel, 0) + Object.values(porVendedor).reduce((s, v) => s + v.variavel + v.evento, 0);
  const acumGeral2026    = acumFixa2026 + acumVariavel2026;
  const acumFaturado2026 = periodos2026.reduce((s, p) => s + p.totalFaturado, 0) + totalFaturadoTrimestre;

  const orcamento = regras.orcamentoVariavel || 0;
  const orcamento2025 = regras.orcamentoVariavel2025 || 0;
  const eAnual = modoHistorico && !String(trimestre).match(/\dT\/\d{4}/);
  const pctVariavelPago = orcamento > 0 ? acumVariavel2026 / orcamento : 0;

  const faseQualif   = leads.filter(l => l.status === 'qualificado' && l.origem !== 'fidelizacao').length;
  const faseNegFinal = leads.filter(l => l.status === 'negociacao').length;
  const faseFideliz  = leads.filter(l => l.origem === 'fidelizacao' && l.status !== 'perdido' && l.status !== 'fechado').length;

  // Acumulado 2026 — em unidades
  const leadsAcum2026    = periodos2026.reduce((arr, p) => arr.concat(p.leads || []), []).concat(leads);
  const acumUnidQualif   = leadsAcum2026.filter(l => l.qualificado === 'sim').length;
  const acumUnidFideliz  = leadsAcum2026.filter(l => l.origem === 'fidelizacao').length;
  const acumUnidFechados = leadsAcum2026.filter(l => l.vendido).length;

  // Quando em modo histórico, usa dados pré-computados do período
  const totalPagarDisplay     = modoHistorico ? (periodoHistorico?.totalGeral || 0)   : totalPagar;
  const totalFaturadoDisplay  = modoHistorico ? (periodoHistorico?.totalFaturado || 0) : totalFaturadoTrimestre;
  const rankingDisplay = modoHistorico
    ? (periodoHistorico?.porVendedor || [])
        .map(pv => ({ ...pv, comissao: pv.total, papel: vendedores.find(v=>v.id===pv.id)?.papel||'—', setor: vendedores.find(v=>v.id===pv.id)?.setor||'—', cor: vendedores.find(v=>v.id===pv.id)?.cor||'#888', iniciais: vendedores.find(v=>v.id===pv.id)?.iniciais||'?' }))
        .sort((a, b) => b.comissao - a.comissao)
    : vendedores.filter(v => v.ativo && porVendedor[v.id]?.total > 0)
        .map(v => ({ ...v, comissao: porVendedor[v.id].total }))
        .sort((a, b) => b.comissao - a.comissao)
        .slice(0, 6);

  const abrirDre = () => { setDreInput(dreRealizado > 0 ? String(dreRealizado) : ''); setDreModal(true); };
  const salvarDre = () => { setState.setDreRealizado(+dreInput.replace(/\D/g,'') || 0); setDreModal(false); };

  const cols4 = isMobile ? '1fr 1fr' : 'repeat(4, 1fr)';
  const cols2 = isMobile ? '1fr' : '1.4fr 1fr';

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
      {/* Header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 20, flexWrap: 'wrap' }}>
        <div>
          <Eyebrow idx="01">Painel da Diretoria</Eyebrow>
          <h1 style={{ fontSize: 44, margin: 0, letterSpacing: '-.02em', lineHeight: 1.05, maxWidth: 740 }}>
            Acompanhamento do <em style={{ fontStyle: 'normal', color: 'var(--escalab-brand)' }}>{trimestre}</em>
          </h1>
          <p style={{ marginTop: 14, color: 'var(--escalab-slate)', fontSize: 16, maxWidth: 640 }}>
            Os números abaixo recalculam ao vivo a cada lançamento de lead, proposta ou venda. Nada mais manual.
          </p>
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          <Button variant="outline" icon="download" onClick={() => exportarExcel(state)}>Exportar Excel</Button>
          <Button variant="outline" icon="download" onClick={() => gerarFolhaPDF(state)}>Gerar folha (PDF)</Button>
          {!fechado ? (
            <Button variant="dark" icon="lock" onClick={() => setState.openFechar(true)}>Fechar {trimestre}</Button>
          ) : (
            <Tag tone="success"><Icon name="check" size={12} /> Trimestre fechado</Tag>
          )}
        </div>
      </div>

      {/* Stats — trimestre atual */}
      <div style={{ display: 'grid', gridTemplateColumns: cols4, gap: 14 }}>
        <Stat label="A pagar no trimestre" value={brl(totalPagarDisplay)} sublabel={`${leadsFechados} clientes fechados${modoHistorico ? ' · período fechado' : ' · atualizado agora'}`} tone="dark" />

        {/* 2.2 — Faturado projetos comissionados + DRE Realizado */}
        <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 12, padding: '22px 24px', position: 'relative' }}>
          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 12 }}>Faturado (projetos comissionados)</div>
          <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: '-.02em', color: 'var(--escalab-ink)', lineHeight: 1 }}>{brl(totalFaturadoDisplay)}</div>
          {dreRealizado > 0 ? (
            <div style={{ marginTop: 8, fontSize: 12, color: 'var(--escalab-slate)' }}>
              DRE Realizado: <strong style={{ color: totalFaturadoDisplay >= dreRealizado ? 'var(--escalab-brand-deep)' : 'var(--escalab-warn, #b45309)' }}>{brl(dreRealizado)}</strong>
            </div>
          ) : (
            <div style={{ marginTop: 8, fontSize: 12, color: 'var(--escalab-mute)' }}>DRE não informado</div>
          )}
          {!modoHistorico && <button onClick={abrirDre}
            style={{ position: 'absolute', top: 14, right: 14, border: '1px solid var(--escalab-line)', borderRadius: 6, background: 'transparent', cursor: 'pointer', padding: '4px 8px', fontSize: 11, color: 'var(--escalab-slate)' }}>
            {dreRealizado > 0 ? 'Editar DRE' : '+ DRE'}
          </button>}
        </div>

        {/* 2.3 — % variável pago vs orçamento */}
        <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 12, padding: '22px 24px' }}>
          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 12 }}>Variável pago vs orçamento</div>
          <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: '-.02em', color: pctVariavelPago > 1 ? '#dc2626' : 'var(--escalab-ink)', lineHeight: 1 }}>{pct(pctVariavelPago)}</div>
          <div style={{ marginTop: 8, height: 4, background: 'var(--escalab-paper)', borderRadius: 999, overflow: 'hidden' }}>
            <div style={{ width: Math.min(pctVariavelPago, 1) * 100 + '%', height: '100%', background: pctVariavelPago > 0.9 ? '#dc2626' : 'var(--escalab-brand)', borderRadius: 999, transition: 'width .3s' }} />
          </div>
          <div style={{ marginTop: 6, fontSize: 11.5, color: 'var(--escalab-mute)' }}>Planejado 2026: {brl(orcamento)}</div>
          <div style={{ marginTop: 2, fontSize: 11.5, color: 'var(--escalab-mute)' }}>Planejado 2025: {brl(orcamento2025)}</div>
        </div>

        <Stat label="Leads ativos" value={leadsAtivos} sublabel={`${faseQualif} em qualificação · ${faseNegFinal} em negociação · ${faseFideliz} fidelização`} tone="light" />
      </div>

      {/* 2.4 — Pipeline por fase */}
      <div>
        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 10 }}>Pipeline de vendas — jornada atual</div>
        <div style={{ display: 'grid', gridTemplateColumns: cols4, gap: 14 }}>
          {[
            { label: 'Qualificação',       count: faseQualif,   desc: 'Lead qualificado, proposta pendente',        cor: 'var(--escalab-brand)' },
            { label: 'Negociação Final',   count: faseNegFinal, desc: 'Proposta aprovada, aguardando fechamento',   cor: '#f59e0b' },
            { label: 'Fidelização',        count: faseFideliz,  desc: 'Canal fidelização — pós-venda ativo',        cor: '#6366f1' },
            { label: eAnual ? 'Fechados / Ano' : 'Fechados / Trimestre', count: leadsFechados, desc: eAnual ? 'Projetos vendidos no ano' : 'Projetos vendidos no trimestre', cor: '#10b981' },
          ].map(fase => (
            <div key={fase.label} style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 12, padding: '18px 20px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                <div style={{ width: 8, height: 8, borderRadius: '50%', background: fase.cor, flexShrink: 0 }} />
                <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)' }}>{fase.label}</div>
              </div>
              <div style={{ fontSize: 32, fontWeight: 700, letterSpacing: '-.02em', color: 'var(--escalab-ink)', lineHeight: 1 }}>{fase.count}</div>
              <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)', marginTop: 6, lineHeight: 1.4 }}>{fase.desc}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Stats — acumulado 2026 */}
      <div>
        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 10 }}>Acumulado 2026</div>
        <div style={{ display: 'grid', gridTemplateColumns: cols4, gap: 14 }}>
          <Stat label="Total distribuído 2026" value={brl(acumGeral2026)} sublabel="Fixa + variável · todos os trimestres" tone="light" />
          <Stat label="Comissão variável 2026" value={brl(acumVariavel2026)} sublabel="Reuniões, propostas e bônus" tone="light" />
          <Stat label="Comissão fixa 2026" value={brl(acumFixa2026)} sublabel="% sobre valor de cada projeto" tone="light" />
          <Stat label="Faturado projetos comissionados" value={brl(acumFaturado2026)} sublabel="Projetos comissionados no ano" tone="light" />
        </div>
      </div>

      {/* Acumulado 2026 — em unidades */}
      <div>
        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 10 }}>Acumulado 2026 — em unidades</div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(3, 1fr)', gap: 14 }}>
          {[
            { label: 'Qualificação',    count: acumUnidQualif,   desc: 'Leads qualificados no ano',          cor: 'var(--escalab-brand)' },
            { label: 'Fidelização',     count: acumUnidFideliz,  desc: 'Canal fidelização — pós-venda ativo', cor: '#6366f1' },
            { label: 'Fechados / Ano',  count: acumUnidFechados, desc: 'Projetos vendidos no ano',            cor: '#10b981' },
          ].map(fase => (
            <div key={fase.label} style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 12, padding: '18px 20px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                <div style={{ width: 8, height: 8, borderRadius: '50%', background: fase.cor, flexShrink: 0 }} />
                <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)' }}>{fase.label}</div>
              </div>
              <div style={{ fontSize: 32, fontWeight: 700, letterSpacing: '-.02em', color: 'var(--escalab-ink)', lineHeight: 1 }}>{fase.count}</div>
              <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)', marginTop: 6, lineHeight: 1.4 }}>{fase.desc}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Modal DRE Realizado */}
      <Modal open={dreModal} onClose={() => setDreModal(false)} title="Informar DRE Realizado" width={420}
        footer={<>
          <Button variant="outline" onClick={() => setDreModal(false)}>Cancelar</Button>
          <Button variant="primary" icon="check" onClick={salvarDre}>Salvar</Button>
        </>}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <p style={{ margin: 0, fontSize: 14, color: 'var(--escalab-slate)', lineHeight: 1.5 }}>
            Informe o valor faturado conforme o DRE Realizado do trimestre. Esse valor é inserido manualmente e usado para comparar com os leads comissionados.
          </p>
          <Field label="DRE Realizado — Faturamento do trimestre (R$)">
            <Input value={dreInput} onChange={setDreInput} type="number" prefix="R$" placeholder="0" />
          </Field>
        </div>
      </Modal>

      {/* Metas + Ranking */}
      <div style={{ display: 'grid', gridTemplateColumns: cols2, gap: 20 }}>
        <Card pad={0}>
          <div style={{ padding: '22px 24px 10px', borderBottom: '1px solid var(--escalab-line)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <h3 style={{ margin: 0, fontSize: 18, letterSpacing: '-.01em' }}>Metas por origem</h3>
              <span style={{ fontSize: 12, color: 'var(--escalab-mute)' }}>Total {brl(totalMeta)}</span>
            </div>
          </div>
          <div style={{ padding: '16px 24px 22px', display: 'flex', flexDirection: 'column', gap: 18 }}>
            {Object.entries(resumo).map(([k, r]) => {
              const pctV = r.vendido / r.meta;
              const tone = pctV >= 0.8 ? 'brand' : 'warn';
              return (
                <div key={k}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <span style={{ fontWeight: 600, fontSize: 14 }}>{r.label}</span>
                      <span style={{ fontSize: 11.5, color: 'var(--escalab-mute)' }}>{r.leads} leads</span>
                    </div>
                    <div style={{ display: 'flex', gap: 10, alignItems: 'baseline' }}>
                      <span style={{ fontSize: 14, fontWeight: 600 }}>{brl(r.vendido)}</span>
                      <span style={{ fontSize: 12, color: 'var(--escalab-mute)' }}>/ {brl(r.meta)}</span>
                      <span style={{ fontSize: 12, color: pctV >= 0.8 ? 'var(--escalab-brand)' : 'var(--escalab-mute)', fontWeight: 600, minWidth: 44, textAlign: 'right' }}>{pct(pctV)}</span>
                    </div>
                  </div>
                  <Progress value={r.vendido} max={r.meta} tone={tone} />
                </div>
              );
            })}
          </div>
        </Card>

        <Card pad={0}>
          <div style={{ padding: '22px 24px 10px', borderBottom: '1px solid var(--escalab-line)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <h3 style={{ margin: 0, fontSize: 18, letterSpacing: '-.01em' }}>Ranking de comissão</h3>
              <span style={{ fontSize: 12, color: 'var(--escalab-mute)' }}>{modoHistorico ? 'Período fechado' : 'Top 6'} · {trimestre}</span>
            </div>
          </div>
          <div style={{ padding: '6px 0' }}>
            {rankingDisplay.map((v, i) => (
              <div key={v.id || i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 24px', borderBottom: i < rankingDisplay.length - 1 ? '1px solid var(--escalab-line)' : 'none' }}>
                <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--escalab-mute)', width: 18 }}>{String(i + 1).padStart(2, '0')}</span>
                <Avatar v={v} size={32} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 600 }}>{v.nome}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)' }}>{v.papel} · {v.setor}</div>
                </div>
                <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--escalab-brand-deep)', fontVariantNumeric: 'tabular-nums' }}>{brl(v.comissao)}</div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* Alertas */}
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr 1fr', gap: 12 }}>
        <Banner tone="warn" icon="warn">
          <strong>Eventos: meta a risco.</strong> Atingimento em {pct(resumo.eventos?.vendido / resumo.eventos?.meta || 0)} — faltam {brl((resumo.eventos?.meta || 0) - (resumo.eventos?.vendido || 0))}.
        </Banner>
        <Banner tone="info" icon="info">
          <strong>Markups altos em P&amp;D.</strong> Três projetos com markup acima de 50% — revisão de pricing recomendada.
        </Banner>
        <Banner tone="success" icon="check">
          <strong>Ativa/Parceiros: {pct(resumo.ativa?.vendido / resumo.ativa?.meta || 0)} da meta.</strong> Ritmo consistente mantém trimestre no azul.
        </Banner>
      </div>
    </div>
  );
}

Object.assign(window, { PainelDiretoria, exportarExcel, gerarFolhaPDF });