// ============================================================
// PAC Sistema — Módulo Financeiro
// Receitas · Despesas · Consolidação · Relatórios
// ============================================================

const FMT = new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' });
const fmt = (v) => FMT.format(Number(v) || 0);

const MESES_NOMES = [
  'Janeiro','Fevereiro','Março','Abril','Maio','Junho',
  'Julho','Agosto','Setembro','Outubro','Novembro','Dezembro',
];
const SOCIOS = ['Fernando', 'Fernanda', 'Paula'];
const COR_SOCIO = { Fernando: '#0D0D6B', Fernanda: '#2D7A5F', Paula: '#8B4E2E' };

// ─── CSS embutido ─────────────────────────────────────────────
const FIN_CSS = `
.fin-wrap { padding: 0; }
.fin-tabs { display:flex; gap:2px; background:var(--surface,#f4f4f8); border-radius:10px; padding:4px; margin-bottom:24px; width:fit-content; }
.fin-tab { padding:7px 18px; border-radius:7px; border:none; background:transparent; color:var(--fg-muted,#888); font-size:13px; font-weight:500; cursor:pointer; transition:background .15s,color .15s; white-space:nowrap; }
.fin-tab.active { background:#fff; color:var(--pac-navy,#0D0D6B); font-weight:700; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.fin-tab:hover:not(.active) { background:rgba(255,255,255,.6); color:var(--fg,#1a1a2e); }
.fin-kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
@media(max-width:900px){ .fin-kpi-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .fin-kpi-grid{ grid-template-columns:1fr; } }
.fin-kpi { background:var(--card,#fff); border:1px solid var(--border,#e8e8f0); border-radius:12px; padding:18px; }
.fin-kpi-label { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--fg-muted,#888); margin-bottom:10px; }
.fin-kpi-val { font-size:22px; font-weight:800; color:var(--fg,#1a1a2e); }
.fin-kpi-sub { font-size:11px; color:var(--fg-muted,#888); margin-top:4px; }
.fin-card { background:var(--card,#fff); border:1px solid var(--border,#e8e8f0); border-radius:12px; padding:18px 20px; margin-bottom:16px; }
.fin-card-title { font-size:13px; font-weight:700; color:var(--fg,#1a1a2e); margin-bottom:14px; font-family:'Georgia',serif; }
.fin-row { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:8px; margin-bottom:4px; }
.fin-row:hover { background:var(--surface,#f4f4f8); }
.fin-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.fin-table th { text-align:left; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-muted,#888); padding:8px 10px; border-bottom:1px solid var(--border,#e8e8f0); white-space:nowrap; }
.fin-table td { padding:9px 10px; border-bottom:1px solid var(--border,#e8e8f0); vertical-align:middle; }
.fin-table tr:last-child td { border-bottom:none; }
.fin-table tr:hover td { background:var(--surface,#f4f4f8); }
.fin-badge { display:inline-block; font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:.04em; }
.fin-badge.pago { background:#d1fae5; color:#065f46; }
.fin-badge.pendente { background:#fef3c7; color:#92400e; }
.fin-badge.fixa { background:#ede9fe; color:#4c1d95; }
.fin-badge.variavel { background:#fee2e2; color:#991b1b; }
.fin-badge.agendado { background:#e0e7ff; color:#3730a3; }
.fin-badge.cobrado { background:#fef3c7; color:#92400e; }
.fin-badge.atrasado { background:#fee2e2; color:#991b1b; }
.fin-badge.nf { background:#dbeafe; color:#1e40af; }
.fin-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:8px; border:none; font-size:13px; font-weight:600; cursor:pointer; transition:background .15s,opacity .15s; }
.fin-btn.primary { background:var(--pac-navy,#0D0D6B); color:#fff; }
.fin-btn.primary:hover { background:#1a1a8a; }
.fin-btn.ghost { background:transparent; color:var(--fg-muted,#888); border:1px solid var(--border,#e8e8f0); }
.fin-btn.ghost:hover { background:var(--surface,#f4f4f8); color:var(--fg,#1a1a2e); }
.fin-btn.danger { background:#fee2e2; color:#991b1b; }
.fin-btn.danger:hover { background:#fecaca; }
.fin-btn.sm { padding:5px 11px; font-size:11.5px; }
.fin-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
.fin-filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.fin-select { padding:7px 10px; border:1.5px solid var(--border,#e8e8f0); border-radius:7px; font-size:12.5px; color:var(--fg,#1a1a2e); background:#fff; cursor:pointer; }
.fin-select:focus { outline:none; border-color:var(--pac-navy,#0D0D6B); }
.fin-icon-btn { width:28px; height:28px; border:none; background:transparent; cursor:pointer; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; color:var(--fg-muted,#888); transition:background .12s,color .12s; }
.fin-icon-btn:hover { background:var(--surface,#f4f4f8); color:var(--fg,#1a1a2e); }
.fin-icon-btn.red:hover { background:#fee2e2; color:#991b1b; }
.fin-toggle { width:34px; height:18px; border-radius:9px; border:none; cursor:pointer; transition:background .2s; flex-shrink:0; position:relative; }
.fin-toggle::after { content:''; position:absolute; top:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:left .2s; }
.fin-toggle.on { background:var(--pac-navy,#0D0D6B); }
.fin-toggle.on::after { left:18px; }
.fin-toggle.off { background:#d1d5db; }
.fin-toggle.off::after { left:2px; }
/* Modal */
.fin-modal-scrim { position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:600; display:flex; align-items:center; justify-content:center; padding:16px; }
.fin-modal { background:#fff; border-radius:14px; padding:28px; width:100%; max-width:560px; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.2); }
.fin-modal-title { font-size:16px; font-weight:800; color:var(--pac-navy,#0D0D6B); margin-bottom:20px; font-family:'Georgia',serif; }
.fin-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:480px){ .fin-form-grid{ grid-template-columns:1fr; } }
.fin-form-grid.full { grid-template-columns:1fr; }
.fin-label { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--fg-muted,#888); display:block; margin-bottom:5px; }
.fin-input { width:100%; box-sizing:border-box; padding:9px 12px; border:1.5px solid var(--border,#e8e8f0); border-radius:8px; font-size:13px; color:var(--fg,#1a1a2e); background:#fff; transition:border-color .15s; }
.fin-input:focus { outline:none; border-color:var(--pac-navy,#0D0D6B); }
.fin-input.sm { padding:7px 10px; font-size:12.5px; }
.fin-calc-box { background:var(--surface,#f4f4f8); border-radius:8px; padding:12px 14px; font-size:12px; }
.fin-calc-row { display:flex; justify-content:space-between; margin-bottom:3px; color:var(--fg-muted,#888); }
.fin-calc-row.total { font-weight:800; font-size:13px; color:var(--pac-navy,#0D0D6B); border-top:1px solid var(--border,#e8e8f0); padding-top:6px; margin-top:4px; }
/* Gráficos */
.fin-chart-wrap { overflow-x:auto; }
.fin-chart-labels { display:flex; justify-content:space-between; font-size:10px; color:var(--fg-muted,#888); margin-top:4px; }
/* Consolidação */
.fin-socio-card { background:var(--card,#fff); border:1px solid var(--border,#e8e8f0); border-radius:12px; padding:20px; display:flex; flex-direction:column; gap:10px; }
.fin-socio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px; }
@media(max-width:700px){ .fin-socio-grid{ grid-template-columns:1fr; } }
/* Overflow table */
.fin-table-wrap { overflow-x:auto; }
/* Empty */
.fin-empty { text-align:center; padding:48px 24px; color:var(--fg-muted,#888); font-size:13px; }
`;

// ─── Injetar CSS uma vez ───────────────────────────────────────
if (!document.getElementById('fin-css')) {
  const s = document.createElement('style');
  s.id = 'fin-css';
  s.textContent = FIN_CSS;
  document.head.appendChild(s);
}

// ─── Ícones mini ──────────────────────────────────────────────
const FinIcon = ({ name, size = 14, style: st }) => {
  const paths = {
    plus: 'M12 5v14M5 12h14',
    edit: 'M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z',
    trash: 'M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6',
    x: 'M18 6L6 18M6 6l12 12',
    check: 'M20 6L9 17l-5-5',
    trendUp: 'M23 6l-9.5 9.5-5-5L1 18M17 6h6v6',
    trendDown: 'M23 18l-9.5-9.5-5 5L1 6M17 18h6v-6',
    wallet: 'M21 7H3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM16 12a1 1 0 1 0 2 0 1 1 0 0 0-2 0z',
    receipt: 'M4 2v20l4-2 4 2 4-2 4 2V2l-4 2-4-2-4 2-4-2zM8 10h8M8 14h5',
    barChart: 'M12 20V10M6 20V4M18 20v-6',
    building: 'M3 21h18M9 21V7l7-4v18M9 11h.01M9 15h.01M13 21V11l4-4',
    chevDown: 'M6 9l6 6 6-6',
    dollar: 'M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6',
    calendar: 'M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z',
    link: 'M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1',
    copy: 'M9 9h10a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2zM5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1',
  };
  const d = paths[name] || paths.dollar;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={st}>
      <path d={d} />
    </svg>
  );
};

// ─── Componentes auxiliares ───────────────────────────────────

const Spinner = () => (
  <div style={{ display:'flex', justifyContent:'center', padding:40 }}>
    <div className="spinner" style={{ width:22, height:22, borderColor:'rgba(13,13,107,.12)', borderTopColor:'var(--pac-navy,#0D0D6B)' }} />
  </div>
);

const Toast = ({ msg, type, onDone }) => {
  React.useEffect(() => { if (msg) { const t = setTimeout(onDone, 3000); return () => clearTimeout(t); } }, [msg]);
  if (!msg) return null;
  const colors = { ok: '#d1fae5:#065f46', err: '#fee2e2:#991b1b' };
  const [bg, fg] = (colors[type] || colors.ok).split(':');
  return (
    <div style={{ position:'fixed', bottom:28, right:28, zIndex:9000, background:bg, color:fg, padding:'10px 18px', borderRadius:8, fontSize:13, fontWeight:600, boxShadow:'0 4px 16px rgba(0,0,0,.12)', maxWidth:340 }}>
      {msg}
    </div>
  );
};

// ─── Hook de dados ─────────────────────────────────────────────
function useFinanceiro(mes, ano) {
  const [receitas, setReceitas] = React.useState([]);
  const [despesas, setDespesas] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  const load = React.useCallback(() => {
    setLoading(true);
    Promise.all([
      window.PACApi.financeiro.listReceitas({ mes, ano }),
      window.PACApi.financeiro.listDespesas({ mes, ano }),
    ]).then(([r, d]) => {
      setReceitas(r);
      setDespesas(d);
    }).catch(console.error).finally(() => setLoading(false));
  }, [mes, ano]);

  React.useEffect(() => { load(); }, [load]);
  return { receitas, despesas, loading, reload: load };
}

// ─── KPI Card ─────────────────────────────────────────────────
const KpiCard = ({ label, value, sub, accent }) => (
  <div className="fin-kpi">
    <div className="fin-kpi-label" style={{ color: accent || undefined }}>{label}</div>
    <div className="fin-kpi-val">{value}</div>
    {sub && <div className="fin-kpi-sub">{sub}</div>}
  </div>
);

// ─── DASHBOARD ────────────────────────────────────────────────
const FinDashboard = ({ mes, ano, receitas, despesas, loading, onTab }) => {
  if (loading) return <Spinner />;

  const totalBruto = receitas.reduce((a, r) => a + Number(r.valor_bruto), 0);
  const totalLiquido = receitas.reduce((a, r) => a + Number(r.saldo_liquido), 0);
  const totalDesp = despesas.reduce((a, d) => a + Number(d.valor), 0);
  const totalNF = receitas.reduce((a, r) => a + Number(r.desconto_nf), 0);
  const totalCaixa = receitas.reduce((a, r) => a + Number(r.desconto_caixa), 0);

  // Consolidação simples por sócio
  const consolidacao = SOCIOS.map(s => {
    const recs = receitas.filter(r => r.origem === s);
    const liq = recs.reduce((a, r) => a + Number(r.saldo_liquido), 0);
    const despPorSocio = totalDesp / 3;
    return { socio: s, liquido: liq, despesas: despPorSocio, total: liq - despPorSocio };
  });

  const ultimasReceitas = [...receitas].slice(0, 6);

  return (
    <div>
      <div className="fin-kpi-grid">
        <KpiCard label="Receita Bruta" value={fmt(totalBruto)} sub={`${receitas.length} lançamentos`} />
        <KpiCard label="Despesas" value={fmt(totalDesp)} sub={`${despesas.length} lançamentos`} accent="#991b1b" />
        <KpiCard label="Reserva Caixa (5%)" value={fmt(totalCaixa)} sub="5% das receitas brutas" />
        <KpiCard label="Provisão NF (10%)" value={fmt(totalNF)} sub="10% das receitas brutas" />
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1fr 280px', gap:16, marginBottom:16 }}>
        {/* Consolidação por sócio */}
        <div className="fin-card">
          <div className="fin-card-title">Consolidação por Sócio — {MESES_NOMES[mes - 1]} {ano}</div>
          {consolidacao.every(c => c.liquido === 0 && c.despesas === 0)
            ? <div className="fin-empty" style={{ padding:'20px 0' }}>Nenhum dado neste período.</div>
            : consolidacao.map(c => (
              <div key={c.socio} className="fin-row" style={{ background:'var(--surface,#f4f4f8)', marginBottom:8 }}>
                <div style={{ display:'flex', alignItems:'center', gap:10 }}>
                  <div style={{ width:4, height:36, borderRadius:3, background: COR_SOCIO[c.socio], flexShrink:0 }} />
                  <div>
                    <div style={{ fontWeight:700, fontSize:13 }}>{c.socio}</div>
                    <div style={{ fontSize:11, color:'var(--fg-muted,#888)' }}>
                      Receita líq.: {fmt(c.liquido)} · Desp.: {fmt(c.despesas)}
                    </div>
                  </div>
                </div>
                <div style={{ textAlign:'right' }}>
                  <div style={{ fontWeight:800, fontSize:14, color: c.total >= 0 ? '#065f46' : '#991b1b' }}>{fmt(c.total)}</div>
                  <div style={{ fontSize:11, color:'var(--fg-muted,#888)' }}>a transferir</div>
                </div>
              </div>
            ))
          }
          <button className="fin-btn ghost sm" onClick={() => onTab('consolidacao')} style={{ marginTop:6 }}>
            Ver consolidação completa →
          </button>
        </div>

        {/* Acesso rápido */}
        <div className="fin-card">
          <div className="fin-card-title">Acesso Rápido</div>
          {[
            ['Lançar Receita', 'receitas'],
            ['Lançar Despesa', 'despesas'],
            ['Consolidação', 'consolidacao'],
            ['Relatórios', 'relatorios'],
          ].map(([label, tab]) => (
            <button key={tab} className="fin-btn ghost" onClick={() => onTab(tab)} style={{ display:'flex', width:'100%', marginBottom:6, justifyContent:'flex-start' }}>
              {label}
            </button>
          ))}
        </div>
      </div>

      {/* Últimas receitas */}
      <div className="fin-card">
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:12 }}>
          <div className="fin-card-title" style={{ margin:0 }}>Últimas Receitas</div>
          <button className="fin-btn ghost sm" onClick={() => onTab('receitas')}>Ver todas →</button>
        </div>
        {ultimasReceitas.length === 0
          ? <div className="fin-empty" style={{ padding:'16px 0' }}>Nenhuma receita neste mês.</div>
          : (
            <div className="fin-table-wrap">
              <table className="fin-table">
                <thead><tr>
                  <th>Descrição</th><th>Origem</th><th>Forma</th>
                  <th style={{ textAlign:'right' }}>Bruto</th>
                  <th style={{ textAlign:'right' }}>Líquido</th>
                  <th style={{ textAlign:'center' }}>Status</th>
                </tr></thead>
                <tbody>
                  {ultimasReceitas.map(r => (
                    <tr key={r.id}>
                      <td style={{ maxWidth:180, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', fontWeight:600 }}>{r.descricao}</td>
                      <td><span style={{ fontSize:11, padding:'2px 8px', borderRadius:20, background: COR_SOCIO[r.origem] + '22', color: COR_SOCIO[r.origem], fontWeight:700 }}>{r.origem}</span></td>
                      <td style={{ color:'var(--fg-muted,#888)' }}>{r.forma_pagamento}</td>
                      <td style={{ textAlign:'right', fontWeight:600 }}>{fmt(r.valor_bruto)}</td>
                      <td style={{ textAlign:'right', fontWeight:800, color:'#065f46' }}>{fmt(r.saldo_liquido)}</td>
                      <td style={{ textAlign:'center' }}>
                        <span className={`fin-badge ${r.cliente_pagou ? 'pago' : 'pendente'}`}>
                          {r.cliente_pagou ? 'Pago' : 'Pendente'}
                        </span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )
        }
      </div>
    </div>
  );
};

// ─── MODAL RECEITA ────────────────────────────────────────────
const ModalReceita = ({ initial, clientes, onSave, onClose }) => {
  React.useEffect(() => {
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', h);
    return () => document.removeEventListener('keydown', h);
  }, [onClose]);
  const empty = {
    client_id: '', descricao: '', origem: 'Fernando',
    forma_pagamento: 'Pix', conta: 'Sicoob',
    data: new Date().toISOString().slice(0, 10),
    valor_bruto: '', aplicar_nf: true, aplicar_caixa: true,
    outros_descontos: '0', outros_descontos_descricao: '', outros_descontos_destino: '',
    boleto_enviado: false, cliente_pagou: false, nota_fiscal_emitida: false, observacoes: '',
  };
  const [form, setForm] = React.useState(initial ? {
    ...initial,
    valor_bruto: String(initial.valor_bruto),
    outros_descontos: String(initial.outros_descontos || 0),
    client_id: initial.client_id || '',
  } : empty);
  const [saving, setSaving] = React.useState(false);
  const [err, setErr] = React.useState('');

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const vb = Number(form.valor_bruto) || 0;
  const od = Number(form.outros_descontos) || 0;
  const dNf = form.aplicar_nf ? +(vb * 0.10) : 0;
  const dCaixa = form.aplicar_caixa ? +(vb * 0.05) : 0;
  const liquido = +(vb - dNf - dCaixa - od);

  const handleSave = async () => {
    if (!form.descricao.trim()) { setErr('Descrição obrigatória.'); return; }
    if (!vb || vb <= 0) { setErr('Valor bruto inválido.'); return; }
    setSaving(true); setErr('');
    try {
      await onSave({
        ...form,
        client_id: form.client_id || null,
        valor_bruto: vb,
        outros_descontos: od,
        outros_descontos_descricao: form.outros_descontos_descricao || null,
        outros_descontos_destino: form.outros_descontos_destino || null,
        observacoes: form.observacoes || null,
      });
    } catch (e) {
      setErr(e.message || 'Erro ao salvar.'); setSaving(false);
    }
  };

  const Chk = ({ k, label }) => (
    <label style={{ display:'flex', alignItems:'center', gap:8, cursor:'pointer', fontSize:13 }}>
      <button
        type="button"
        className={`fin-toggle ${form[k] ? 'on' : 'off'}`}
        onClick={() => set(k, !form[k])}
      />
      {label}
    </label>
  );

  return (
    <div className="fin-modal-scrim" onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="fin-modal">
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:20 }}>
          <div className="fin-modal-title" style={{ margin:0 }}>{initial ? 'Editar Receita' : 'Nova Receita'}</div>
          <button className="fin-icon-btn" onClick={onClose}><FinIcon name="x" size={16} /></button>
        </div>

        <div className="fin-form-grid" style={{ marginBottom:12 }}>
          <div style={{ gridColumn:'1/-1' }}>
            <label className="fin-label">Descrição *</label>
            <input className="fin-input" value={form.descricao} onChange={e => set('descricao', e.target.value)} placeholder="Ex: Honorários — Contrato XYZ" />
          </div>
          <div>
            <label className="fin-label">Origem (Sócio) *</label>
            <select className="fin-input fin-select" value={form.origem} onChange={e => set('origem', e.target.value)}>
              {SOCIOS.map(s => <option key={s} value={s}>{s}</option>)}
            </select>
          </div>
          <div>
            <label className="fin-label">Cliente</label>
            <SearchableSelect className="fin-input fin-select" value={form.client_id} onChange={e => set('client_id', e.target.value)}>
              <option value="">— Sem cliente —</option>
              {(clientes || []).map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
            </SearchableSelect>
          </div>
          <div>
            <label className="fin-label">Forma de Pagamento *</label>
            <select className="fin-input fin-select" value={form.forma_pagamento} onChange={e => set('forma_pagamento', e.target.value)}>
              {['Pix','Boleto','Dinheiro'].map(v => <option key={v} value={v}>{v}</option>)}
            </select>
          </div>
          <div>
            <label className="fin-label">Conta *</label>
            <select className="fin-input fin-select" value={form.conta} onChange={e => set('conta', e.target.value)}>
              {['Sicoob','Inter'].map(v => <option key={v} value={v}>{v}</option>)}
            </select>
          </div>
          <div>
            <label className="fin-label">Data *</label>
            <input className="fin-input" type="date" value={form.data} onChange={e => set('data', e.target.value)} />
          </div>
          <div>
            <label className="fin-label">Valor Bruto (R$) *</label>
            <input className="fin-input" type="number" min="0" step="0.01" value={form.valor_bruto} onChange={e => set('valor_bruto', e.target.value)} placeholder="0,00" />
          </div>
        </div>

        {/* Flags NF / Caixa */}
        <div style={{ display:'flex', gap:20, marginBottom:12, flexWrap:'wrap' }}>
          <Chk k="aplicar_nf" label="Descontar 10% NF" />
          <Chk k="aplicar_caixa" label="Descontar 5% Caixa" />
        </div>

        {/* Outros descontos */}
        <div className="fin-form-grid" style={{ marginBottom:12 }}>
          <div>
            <label className="fin-label">Outros Descontos (R$)</label>
            <input className="fin-input" type="number" min="0" step="0.01" value={form.outros_descontos} onChange={e => set('outros_descontos', e.target.value)} />
          </div>
          <div>
            <label className="fin-label">Destino do Desconto</label>
            <input className="fin-input" value={form.outros_descontos_destino} onChange={e => set('outros_descontos_destino', e.target.value)} placeholder="Ex: Terceiros" />
          </div>
          <div style={{ gridColumn:'1/-1' }}>
            <label className="fin-label">Descrição do Desconto</label>
            <input className="fin-input" value={form.outros_descontos_descricao} onChange={e => set('outros_descontos_descricao', e.target.value)} placeholder="Motivo do desconto adicional" />
          </div>
        </div>

        {/* Preview do cálculo */}
        {vb > 0 && (
          <div className="fin-calc-box" style={{ marginBottom:14 }}>
            <div className="fin-calc-row"><span>Valor Bruto</span><span>{fmt(vb)}</span></div>
            {dNf > 0 && <div className="fin-calc-row"><span>−10% NF</span><span style={{ color:'#991b1b' }}>−{fmt(dNf)}</span></div>}
            {dCaixa > 0 && <div className="fin-calc-row"><span>−5% Caixa</span><span style={{ color:'#991b1b' }}>−{fmt(dCaixa)}</span></div>}
            {od > 0 && <div className="fin-calc-row"><span>−Outros</span><span style={{ color:'#991b1b' }}>−{fmt(od)}</span></div>}
            <div className="fin-calc-row total"><span>Saldo Líquido</span><span>{fmt(liquido)}</span></div>
          </div>
        )}

        {/* Status */}
        <div style={{ display:'flex', gap:16, marginBottom:16, flexWrap:'wrap' }}>
          <Chk k="boleto_enviado" label="Boleto enviado" />
          <Chk k="cliente_pagou" label="Cliente pagou" />
          <Chk k="nota_fiscal_emitida" label="NF emitida" />
        </div>

        <div style={{ marginBottom:16 }}>
          <label className="fin-label">Observações</label>
          <textarea className="fin-input" rows={2} value={form.observacoes} onChange={e => set('observacoes', e.target.value)} style={{ resize:'vertical' }} />
        </div>

        {err && <div style={{ color:'#991b1b', fontSize:12, marginBottom:10, background:'#fee2e2', padding:'7px 12px', borderRadius:6 }}>{err}</div>}

        <div style={{ display:'flex', gap:10, justifyContent:'flex-end' }}>
          <button className="fin-btn ghost" onClick={onClose}>Cancelar</button>
          <button className="fin-btn primary" onClick={handleSave} disabled={saving}>
            {saving ? 'Salvando…' : (initial ? 'Salvar alterações' : 'Lançar receita')}
          </button>
        </div>
      </div>
    </div>
  );
};

// ─── RECEITAS ─────────────────────────────────────────────────
const FinReceitas = ({ receitas, clientes, loading, mes, setMes, ano, setAno, reload }) => {
  const [filtroOrigem, setFiltroOrigem] = React.useState('todos');
  const [modal, setModal] = React.useState(null); // null | 'new' | receita
  const [toast, setToast] = React.useState({ msg: '', type: 'ok' });

  const toastOk = (m) => setToast({ msg: m, type: 'ok' });
  const toastErr = (m) => setToast({ msg: m, type: 'err' });

  const filtradas = filtroOrigem === 'todos'
    ? receitas
    : receitas.filter(r => r.origem === filtroOrigem);

  const handleSave = async (form) => {
    if (modal === 'new') {
      await window.PACApi.financeiro.createReceita(form);
      toastOk('Receita lançada com sucesso.');
    } else {
      await window.PACApi.financeiro.updateReceita(modal.id, form);
      toastOk('Receita atualizada.');
    }
    setModal(null);
    reload();
  };

  const handleDelete = async (id) => {
    if (!confirm('Excluir esta receita?')) return;
    try {
      await window.PACApi.financeiro.deleteReceita(id);
      toastOk('Receita excluída.');
      reload();
    } catch (e) { toastErr(e.message || 'Erro ao excluir.'); }
  };

  const handleToggle = async (r, key) => {
    try {
      await window.PACApi.financeiro.updateReceita(r.id, { [key]: !r[key] });
      reload();
    } catch (e) { toastErr('Erro ao atualizar status.'); }
  };

  const [duplicando, setDuplicando] = React.useState(false);
  const handleDuplicar = async () => {
    const mesNome = MESES_NOMES[(mes + 10) % 12];
    if (!confirm(`Duplicar todas as receitas de ${mesNome} para ${MESES_NOMES[mes - 1]}/${ano}? Os status (pago, NF, boleto) virão zerados para ajuste manual.`)) return;
    setDuplicando(true);
    try {
      const r = await window.PACApi.financeiro.duplicarReceitas(mes, ano);
      toastOk(r.criadas > 0 ? `${r.criadas} receita(s) duplicada(s) do mês anterior.` : 'Nenhuma receita no mês anterior para duplicar.');
      reload();
    } catch (e) { toastErr(e.message || 'Erro ao duplicar.'); }
    finally { setDuplicando(false); }
  };

  return (
    <div>
      <Toast msg={toast.msg} type={toast.type} onDone={() => setToast({ msg: '', type: 'ok' })} />
      <div className="fin-header">
        <div className="fin-filters">
          <select className="fin-select" value={mes} onChange={e => setMes(Number(e.target.value))}>
            {MESES_NOMES.map((m, i) => <option key={i} value={i + 1}>{m}</option>)}
          </select>
          <select className="fin-select" value={ano} onChange={e => setAno(Number(e.target.value))}>
            {[2024, 2025, 2026].map(y => <option key={y} value={y}>{y}</option>)}
          </select>
          <select className="fin-select" value={filtroOrigem} onChange={e => setFiltroOrigem(e.target.value)}>
            <option value="todos">Todos os sócios</option>
            {SOCIOS.map(s => <option key={s} value={s}>{s}</option>)}
          </select>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="fin-btn ghost" onClick={handleDuplicar} disabled={duplicando} title="Copia as receitas do mês anterior para este mês">
            <FinIcon name="copy" size={14} /> {duplicando ? 'Duplicando…' : 'Duplicar mês anterior'}
          </button>
          <button className="fin-btn primary" onClick={() => setModal('new')}>
            <FinIcon name="plus" size={14} /> Nova Receita
          </button>
        </div>
      </div>

      {loading ? <Spinner /> : filtradas.length === 0
        ? <div className="fin-empty">Nenhuma receita neste período.</div>
        : (
          <div className="fin-card" style={{ padding:0, overflow:'hidden' }}>
            <div className="fin-table-wrap">
              <table className="fin-table">
                <thead><tr>
                  <th>Descrição</th>
                  <th>Origem</th>
                  <th>Data</th>
                  <th>Forma</th>
                  <th>Conta</th>
                  <th style={{ textAlign:'right' }}>Bruto</th>
                  <th style={{ textAlign:'right' }}>Líquido</th>
                  <th style={{ textAlign:'center' }}>Boleto</th>
                  <th style={{ textAlign:'center' }}>Pago</th>
                  <th style={{ textAlign:'center' }}>NF</th>
                  <th></th>
                </tr></thead>
                <tbody>
                  {filtradas.map(r => (
                    <tr key={r.id}>
                      <td style={{ fontWeight:600, maxWidth:200, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }} title={r.descricao}>{r.descricao}</td>
                      <td>
                        <span style={{ fontSize:11, padding:'2px 8px', borderRadius:20, background: COR_SOCIO[r.origem] + '22', color: COR_SOCIO[r.origem], fontWeight:700 }}>{r.origem}</span>
                      </td>
                      <td style={{ color:'var(--fg-muted,#888)', whiteSpace:'nowrap' }}>{r.data ? r.data.slice(0,10) : ''}</td>
                      <td style={{ color:'var(--fg-muted,#888)' }}>{r.forma_pagamento}</td>
                      <td style={{ color:'var(--fg-muted,#888)' }}>{r.conta}</td>
                      <td style={{ textAlign:'right', fontWeight:600 }}>{fmt(r.valor_bruto)}</td>
                      <td style={{ textAlign:'right', fontWeight:800, color:'#065f46' }}>{fmt(r.saldo_liquido)}</td>
                      <td style={{ textAlign:'center' }}>
                        <button className={`fin-toggle ${r.boleto_enviado ? 'on' : 'off'}`} onClick={() => handleToggle(r, 'boleto_enviado')} title={r.boleto_enviado ? 'Enviado' : 'Não enviado'} />
                      </td>
                      <td style={{ textAlign:'center' }}>
                        <button className={`fin-toggle ${r.cliente_pagou ? 'on' : 'off'}`} onClick={() => handleToggle(r, 'cliente_pagou')} title={r.cliente_pagou ? 'Pago' : 'Pendente'} />
                      </td>
                      <td style={{ textAlign:'center' }}>
                        <button className={`fin-toggle ${r.nota_fiscal_emitida ? 'on' : 'off'}`} onClick={() => handleToggle(r, 'nota_fiscal_emitida')} title={r.nota_fiscal_emitida ? 'Emitida' : 'Não emitida'} />
                      </td>
                      <td>
                        <div style={{ display:'flex', gap:4 }}>
                          <button className="fin-icon-btn" onClick={() => setModal(r)} title="Editar"><FinIcon name="edit" size={13} /></button>
                          <button className="fin-icon-btn red" onClick={() => handleDelete(r.id)} title="Excluir"><FinIcon name="trash" size={13} /></button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )
      }

      {modal && (
        <ModalReceita
          initial={modal === 'new' ? null : modal}
          clientes={clientes}
          onSave={handleSave}
          onClose={() => setModal(null)}
        />
      )}
    </div>
  );
};

// ─── MODAL DESPESA ────────────────────────────────────────────
const ModalDespesa = ({ initial, onSave, onClose }) => {
  React.useEffect(() => {
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', h);
    return () => document.removeEventListener('keydown', h);
  }, [onClose]);
  const empty = {
    descricao: '', categoria: '', tipo: 'fixa',
    valor: '', data: new Date().toISOString().slice(0, 10), observacoes: '',
  };
  const [form, setForm] = React.useState(initial
    ? { ...initial, valor: String(initial.valor) }
    : empty
  );
  const [saving, setSaving] = React.useState(false);
  const [err, setErr] = React.useState('');
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const CATEGORIAS = ['Aluguel', 'Software/Assinaturas', 'Salários', 'Marketing', 'Contabilidade', 'Cartório', 'Material de escritório', 'Telefone/Internet', 'Outros'];

  const handleSave = async () => {
    if (!form.descricao.trim()) { setErr('Descrição obrigatória.'); return; }
    const v = Number(form.valor);
    if (!v || v <= 0) { setErr('Valor inválido.'); return; }
    if (!form.categoria.trim()) { setErr('Categoria obrigatória.'); return; }
    setSaving(true); setErr('');
    try {
      await onSave({ ...form, valor: v, observacoes: form.observacoes || null });
    } catch (e) {
      setErr(e.message || 'Erro ao salvar.'); setSaving(false);
    }
  };

  const v = Number(form.valor) || 0;

  return (
    <div className="fin-modal-scrim" onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="fin-modal" style={{ maxWidth:480 }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:20 }}>
          <div className="fin-modal-title" style={{ margin:0 }}>{initial ? 'Editar Despesa' : 'Nova Despesa'}</div>
          <button className="fin-icon-btn" onClick={onClose}><FinIcon name="x" size={16} /></button>
        </div>
        <div className="fin-form-grid" style={{ marginBottom:12 }}>
          <div style={{ gridColumn:'1/-1' }}>
            <label className="fin-label">Descrição *</label>
            <input className="fin-input" value={form.descricao} onChange={e => set('descricao', e.target.value)} placeholder="Ex: Assinatura Adobe, Aluguel..." />
          </div>
          <div>
            <label className="fin-label">Categoria *</label>
            <select className="fin-input fin-select" value={form.categoria} onChange={e => set('categoria', e.target.value)}>
              <option value="">— Selecione —</option>
              {CATEGORIAS.map(c => <option key={c} value={c}>{c}</option>)}
            </select>
          </div>
          <div>
            <label className="fin-label">Tipo *</label>
            <select className="fin-input fin-select" value={form.tipo} onChange={e => set('tipo', e.target.value)}>
              <option value="fixa">Fixa</option>
              <option value="variavel">Variável</option>
            </select>
          </div>
          <div>
            <label className="fin-label">Valor Total (R$) *</label>
            <input className="fin-input" type="number" min="0" step="0.01" value={form.valor} onChange={e => set('valor', e.target.value)} placeholder="0,00" />
          </div>
          <div>
            <label className="fin-label">Data *</label>
            <input className="fin-input" type="date" value={form.data} onChange={e => set('data', e.target.value)} />
          </div>
        </div>
        {v > 0 && (
          <div className="fin-calc-box" style={{ marginBottom:12 }}>
            <div className="fin-calc-row"><span>Total</span><span>{fmt(v)}</span></div>
            <div className="fin-calc-row total"><span>Por sócio (÷3)</span><span>{fmt(v / 3)}</span></div>
          </div>
        )}
        <div style={{ marginBottom:14 }}>
          <label className="fin-label">Observações</label>
          <textarea className="fin-input" rows={2} value={form.observacoes} onChange={e => set('observacoes', e.target.value)} style={{ resize:'vertical' }} />
        </div>
        {err && <div style={{ color:'#991b1b', fontSize:12, marginBottom:10, background:'#fee2e2', padding:'7px 12px', borderRadius:6 }}>{err}</div>}
        <div style={{ display:'flex', gap:10, justifyContent:'flex-end' }}>
          <button className="fin-btn ghost" onClick={onClose}>Cancelar</button>
          <button className="fin-btn primary" onClick={handleSave} disabled={saving}>
            {saving ? 'Salvando…' : (initial ? 'Salvar alterações' : 'Lançar despesa')}
          </button>
        </div>
      </div>
    </div>
  );
};

// ─── DESPESAS ─────────────────────────────────────────────────
const FinDespesas = ({ despesas, loading, mes, setMes, ano, setAno, reload }) => {
  const [modal, setModal] = React.useState(null);
  const [toast, setToast] = React.useState({ msg: '', type: 'ok' });

  const handleSave = async (form) => {
    if (modal === 'new') {
      await window.PACApi.financeiro.createDespesa(form);
      setToast({ msg: 'Despesa lançada.', type: 'ok' });
    } else {
      await window.PACApi.financeiro.updateDespesa(modal.id, form);
      setToast({ msg: 'Despesa atualizada.', type: 'ok' });
    }
    setModal(null); reload();
  };

  const handleDelete = async (id) => {
    if (!confirm('Excluir esta despesa?')) return;
    try {
      await window.PACApi.financeiro.deleteDespesa(id);
      setToast({ msg: 'Despesa excluída.', type: 'ok' }); reload();
    } catch (e) { setToast({ msg: e.message || 'Erro.', type: 'err' }); }
  };

  const [duplicando, setDuplicando] = React.useState(false);
  const handleDuplicar = async () => {
    const mesNome = MESES_NOMES[(mes + 10) % 12];
    if (!confirm(`Duplicar todas as despesas de ${mesNome} para ${MESES_NOMES[mes - 1]}/${ano}?`)) return;
    setDuplicando(true);
    try {
      const r = await window.PACApi.financeiro.duplicarDespesas(mes, ano);
      setToast({ msg: r.criadas > 0 ? `${r.criadas} despesa(s) duplicada(s) do mês anterior.` : 'Nenhuma despesa no mês anterior para duplicar.', type: 'ok' });
      reload();
    } catch (e) { setToast({ msg: e.message || 'Erro ao duplicar.', type: 'err' }); }
    finally { setDuplicando(false); }
  };

  return (
    <div>
      <Toast msg={toast.msg} type={toast.type} onDone={() => setToast({ msg: '', type: 'ok' })} />
      <div className="fin-header">
        <div className="fin-filters">
          <select className="fin-select" value={mes} onChange={e => setMes(Number(e.target.value))}>
            {MESES_NOMES.map((m, i) => <option key={i} value={i + 1}>{m}</option>)}
          </select>
          <select className="fin-select" value={ano} onChange={e => setAno(Number(e.target.value))}>
            {[2024, 2025, 2026].map(y => <option key={y} value={y}>{y}</option>)}
          </select>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="fin-btn ghost" onClick={handleDuplicar} disabled={duplicando} title="Copia as despesas do mês anterior para este mês">
            <FinIcon name="copy" size={14} /> {duplicando ? 'Duplicando…' : 'Duplicar mês anterior'}
          </button>
          <button className="fin-btn primary" onClick={() => setModal('new')}>
            <FinIcon name="plus" size={14} /> Nova Despesa
          </button>
        </div>
      </div>

      {loading ? <Spinner /> : despesas.length === 0
        ? <div className="fin-empty">Nenhuma despesa neste período.</div>
        : (
          <div className="fin-card" style={{ padding:0, overflow:'hidden' }}>
            <div className="fin-table-wrap">
              <table className="fin-table">
                <thead><tr>
                  <th>Descrição</th><th>Categoria</th><th>Tipo</th><th>Data</th>
                  <th style={{ textAlign:'right' }}>Total</th>
                  <th style={{ textAlign:'right' }}>Por Sócio</th>
                  <th></th>
                </tr></thead>
                <tbody>
                  {despesas.map(d => (
                    <tr key={d.id}>
                      <td style={{ fontWeight:600 }}>{d.descricao}</td>
                      <td style={{ color:'var(--fg-muted,#888)' }}>{d.categoria}</td>
                      <td><span className={`fin-badge ${d.tipo}`}>{d.tipo}</span></td>
                      <td style={{ color:'var(--fg-muted,#888)', whiteSpace:'nowrap' }}>{d.data ? d.data.slice(0,10) : ''}</td>
                      <td style={{ textAlign:'right', fontWeight:600 }}>{fmt(d.valor)}</td>
                      <td style={{ textAlign:'right', fontWeight:700, color:'#991b1b' }}>{fmt(d.valor_por_socio)}</td>
                      <td>
                        <div style={{ display:'flex', gap:4 }}>
                          <button className="fin-icon-btn" onClick={() => setModal(d)} title="Editar"><FinIcon name="edit" size={13} /></button>
                          <button className="fin-icon-btn red" onClick={() => handleDelete(d.id)} title="Excluir"><FinIcon name="trash" size={13} /></button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )
      }

      {modal && (
        <ModalDespesa
          initial={modal === 'new' ? null : modal}
          onSave={handleSave}
          onClose={() => setModal(null)}
        />
      )}
    </div>
  );
};

// ─── CONSOLIDAÇÃO ─────────────────────────────────────────────
const FinConsolidacao = ({ mes, setMes, ano, setAno }) => {
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(false);

  React.useEffect(() => {
    setLoading(true);
    window.PACApi.financeiro.consolidacao(mes, ano)
      .then(setData)
      .catch(console.error)
      .finally(() => setLoading(false));
  }, [mes, ano]);

  return (
    <div>
      <div className="fin-header">
        <div className="fin-filters">
          <select className="fin-select" value={mes} onChange={e => setMes(Number(e.target.value))}>
            {MESES_NOMES.map((m, i) => <option key={i} value={i + 1}>{m}</option>)}
          </select>
          <select className="fin-select" value={ano} onChange={e => setAno(Number(e.target.value))}>
            {[2024, 2025, 2026].map(y => <option key={y} value={y}>{y}</option>)}
          </select>
        </div>
      </div>

      {loading ? <Spinner /> : !data ? null : (
        <>
          {/* Totais gerais */}
          <div className="fin-kpi-grid" style={{ gridTemplateColumns:'repeat(4,1fr)', marginBottom:20 }}>
            <KpiCard label="Receita Líquida Total" value={fmt(data.totais.receitas)} />
            <KpiCard label="Despesas Totais" value={fmt(data.totais.despesas)} accent="#991b1b" />
            <KpiCard label="Reserva NF (10%)" value={fmt(data.totais.nf)} />
            <KpiCard label="Reserva Caixa (5%)" value={fmt(data.totais.caixa)} />
          </div>

          {/* Por sócio */}
          <div className="fin-socio-grid">
            {SOCIOS.map(s => {
              const c = data.consolidacao[s];
              if (!c) return null;
              return (
                <div key={s} className="fin-socio-card">
                  <div style={{ display:'flex', alignItems:'center', gap:10 }}>
                    <div style={{ width:5, height:40, borderRadius:3, background: COR_SOCIO[s], flexShrink:0 }} />
                    <div>
                      <div style={{ fontWeight:800, fontSize:16 }}>{s}</div>
                      <div style={{ fontSize:11, color:'var(--fg-muted,#888)' }}>{MESES_NOMES[mes - 1]} {ano}</div>
                    </div>
                  </div>
                  <div style={{ borderTop:'1px solid var(--border,#e8e8f0)', paddingTop:10, display:'flex', flexDirection:'column', gap:6 }}>
                    <div style={{ display:'flex', justifyContent:'space-between', fontSize:12.5 }}>
                      <span style={{ color:'var(--fg-muted,#888)' }}>Receita líquida</span>
                      <span style={{ fontWeight:700 }}>{fmt(c.saldoLiquido)}</span>
                    </div>
                    <div style={{ display:'flex', justifyContent:'space-between', fontSize:12.5 }}>
                      <span style={{ color:'var(--fg-muted,#888)' }}>Parcela despesas</span>
                      <span style={{ fontWeight:700, color:'#991b1b' }}>−{fmt(c.despesas)}</span>
                    </div>
                    <div style={{ display:'flex', justifyContent:'space-between', fontSize:12.5 }}>
                      <span style={{ color:'var(--fg-muted,#888)' }}>Provisão NF</span>
                      <span style={{ color:'var(--fg-muted,#888)' }}>{fmt(c.descontoNf)}</span>
                    </div>
                    <div style={{ display:'flex', justifyContent:'space-between', fontSize:12.5 }}>
                      <span style={{ color:'var(--fg-muted,#888)' }}>Reserva caixa</span>
                      <span style={{ color:'var(--fg-muted,#888)' }}>{fmt(c.descontoCaixa)}</span>
                    </div>
                  </div>
                  <div style={{ background: c.totalFinal >= 0 ? '#d1fae5' : '#fee2e2', borderRadius:8, padding:'10px 14px', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                    <span style={{ fontWeight:700, fontSize:12, color: c.totalFinal >= 0 ? '#065f46' : '#991b1b' }}>A transferir</span>
                    <span style={{ fontWeight:900, fontSize:18, color: c.totalFinal >= 0 ? '#065f46' : '#991b1b' }}>{fmt(c.totalFinal)}</span>
                  </div>
                </div>
              );
            })}
          </div>
        </>
      )}
    </div>
  );
};

// ─── GRÁFICOS SVG ─────────────────────────────────────────────
const BarChart = ({ data, keys, colors, height = 180 }) => {
  const maxVal = Math.max(...data.flatMap(d => keys.map(k => Number(d[k]) || 0)), 1);
  const W = 600; const BAR_W = Math.floor((W - 40) / data.length / (keys.length + 0.5));
  const H = height; const PAD = 30;

  return (
    <div className="fin-chart-wrap">
      <svg viewBox={`0 0 ${W} ${H + PAD}`} style={{ width:'100%', minWidth:320 }}>
        {data.map((d, i) => {
          const groupW = (W - 40) / data.length;
          const startX = 20 + i * groupW;
          return keys.map((k, ki) => {
            const val = Number(d[k]) || 0;
            const barH = (val / maxVal) * H;
            const x = startX + ki * (BAR_W + 2) + 2;
            return (
              <g key={k}>
                <rect x={x} y={H - barH} width={BAR_W} height={barH} fill={colors[ki]} rx={3} opacity={0.85} />
                {val > 0 && barH > 16 && (
                  <text x={x + BAR_W / 2} y={H - barH + 12} textAnchor="middle" fill="#fff" fontSize={8} fontWeight={700}>
                    {(val / 1000).toFixed(0)}k
                  </text>
                )}
              </g>
            );
          });
        })}
        {/* Eixo X — labels */}
        {data.map((d, i) => {
          const groupW = (W - 40) / data.length;
          const x = 20 + i * groupW + groupW / 2;
          return (
            <text key={i} x={x} y={H + PAD - 4} textAnchor="middle" fill="#888" fontSize={9}>
              {MESES_NOMES[d.mes - 1]?.slice(0, 3)}
            </text>
          );
        })}
      </svg>
    </div>
  );
};

// ─── RELATÓRIOS ───────────────────────────────────────────────
const FinRelatorios = ({ ano, setAno }) => {
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(false);

  React.useEffect(() => {
    setLoading(true);
    window.PACApi.financeiro.comparativo(ano)
      .then(setData)
      .catch(console.error)
      .finally(() => setLoading(false));
  }, [ano]);

  const mesesComDados = data ? data.filter(m => m.receita_bruta > 0 || m.despesas > 0) : [];

  // Legenda
  const Legenda = ({ items }) => (
    <div style={{ display:'flex', gap:16, flexWrap:'wrap', marginBottom:12 }}>
      {items.map(([label, color]) => (
        <div key={label} style={{ display:'flex', alignItems:'center', gap:6, fontSize:11 }}>
          <div style={{ width:10, height:10, borderRadius:2, background:color }} />
          {label}
        </div>
      ))}
    </div>
  );

  return (
    <div>
      <div className="fin-header">
        <div className="fin-filters">
          <select className="fin-select" value={ano} onChange={e => setAno(Number(e.target.value))}>
            {[2024, 2025, 2026].map(y => <option key={y} value={y}>{y}</option>)}
          </select>
        </div>
      </div>

      {loading ? <Spinner /> : !data ? null : mesesComDados.length === 0
        ? <div className="fin-empty">Nenhum dado para {ano}.</div>
        : (
          <>
            {/* Receitas vs Despesas */}
            <div className="fin-card" style={{ marginBottom:16 }}>
              <div className="fin-card-title">Receita Bruta × Despesas — {ano}</div>
              <Legenda items={[['Receita Bruta', '#0D0D6B'], ['Despesas', '#dc2626']]} />
              <BarChart data={data} keys={['receita_bruta', 'despesas']} colors={['#0D0D6B', '#dc2626']} />
            </div>

            {/* Receitas por sócio */}
            <div className="fin-card" style={{ marginBottom:16 }}>
              <div className="fin-card-title">Receita Líquida por Sócio — {ano}</div>
              <Legenda items={SOCIOS.map(s => [s, COR_SOCIO[s]])} />
              <BarChart
                data={data.map(m => ({ mes: m.mes, Fernando: m.por_socio.Fernando, Fernanda: m.por_socio.Fernanda, Paula: m.por_socio.Paula }))}
                keys={['Fernando', 'Fernanda', 'Paula']}
                colors={Object.values(COR_SOCIO)}
              />
            </div>

            {/* Tabela resumo */}
            <div className="fin-card">
              <div className="fin-card-title">Resumo Anual</div>
              <div className="fin-table-wrap">
                <table className="fin-table">
                  <thead><tr>
                    <th>Mês</th>
                    <th style={{ textAlign:'right' }}>Receita Bruta</th>
                    <th style={{ textAlign:'right' }}>Receita Líq.</th>
                    <th style={{ textAlign:'right' }}>Despesas</th>
                    <th style={{ textAlign:'right' }}>Saldo</th>
                    <th style={{ textAlign:'right' }}>NF</th>
                    <th style={{ textAlign:'right' }}>Caixa</th>
                  </tr></thead>
                  <tbody>
                    {data.filter(m => m.receita_bruta > 0 || m.despesas > 0).map(m => {
                      const saldo = m.receita_liquida - m.despesas;
                      return (
                        <tr key={m.mes}>
                          <td style={{ fontWeight:600 }}>{MESES_NOMES[m.mes - 1]}</td>
                          <td style={{ textAlign:'right' }}>{fmt(m.receita_bruta)}</td>
                          <td style={{ textAlign:'right' }}>{fmt(m.receita_liquida)}</td>
                          <td style={{ textAlign:'right', color:'#991b1b' }}>{fmt(m.despesas)}</td>
                          <td style={{ textAlign:'right', fontWeight:700, color: saldo >= 0 ? '#065f46' : '#991b1b' }}>{fmt(saldo)}</td>
                          <td style={{ textAlign:'right', color:'var(--fg-muted,#888)' }}>{fmt(m.nf)}</td>
                          <td style={{ textAlign:'right', color:'var(--fg-muted,#888)' }}>{fmt(m.caixa)}</td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </div>
          </>
        )
      }
    </div>
  );
};

// ─── AGENDA: helpers ──────────────────────────────────────────
const TIPO_LABEL = { cobranca: 'Cobrança', nota_fiscal: 'Nota Fiscal' };
const hojeISO = () => new Date().toISOString().slice(0, 10);

function statusAgenda(a) {
  if (a.tipo === 'nota_fiscal') {
    if (a.nf_emitida) return { cls: 'pago', label: 'NF emitida' };
    if (a.data_agendada && a.data_agendada.slice(0, 10) < hojeISO()) return { cls: 'atrasado', label: 'NF atrasada' };
    return { cls: 'nf', label: 'NF agendada' };
  }
  if (a.pago) return { cls: 'pago', label: 'Pago' };
  if (a.cobrado) return { cls: 'cobrado', label: 'Cobrado' };
  if (a.data_agendada && a.data_agendada.slice(0, 10) < hojeISO()) return { cls: 'atrasado', label: 'Atrasado' };
  return { cls: 'agendado', label: 'Agendado' };
}

// ─── MODAL AGENDAMENTO ────────────────────────────────────────
const ModalAgendamento = ({ initial, clientes, receitas, onSave, onClose }) => {
  React.useEffect(() => {
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', h);
    return () => document.removeEventListener('keydown', h);
  }, [onClose]);

  const empty = {
    tipo: 'cobranca', client_id: '', receita_id: '', descricao: '', valor: '',
    data_agendada: hojeISO(),
    cobrado: false, data_cobranca: '', pago: false, data_pagamento: '',
    nf_emitida: false, data_nf: '', observacoes: '',
  };
  const [form, setForm] = React.useState(initial ? {
    ...initial,
    valor: initial.valor != null ? String(initial.valor) : '',
    client_id: initial.client_id || '',
    receita_id: initial.receita_id || '',
    data_agendada: initial.data_agendada ? initial.data_agendada.slice(0, 10) : hojeISO(),
    data_cobranca: initial.data_cobranca ? initial.data_cobranca.slice(0, 10) : '',
    data_pagamento: initial.data_pagamento ? initial.data_pagamento.slice(0, 10) : '',
    data_nf: initial.data_nf ? initial.data_nf.slice(0, 10) : '',
    observacoes: initial.observacoes || '',
  } : empty);
  const [saving, setSaving] = React.useState(false);
  const [err, setErr] = React.useState('');
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  // Ao vincular uma receita, puxa descrição/valor/cliente quando vazios
  const onPickReceita = (rid) => {
    setForm(f => {
      const next = { ...f, receita_id: rid };
      const r = (receitas || []).find(x => x.id === rid);
      if (r) {
        if (!next.descricao.trim()) next.descricao = r.descricao;
        if (!next.valor) next.valor = String(r.valor_bruto);
        if (!next.client_id && r.client_id) next.client_id = r.client_id;
      }
      return next;
    });
  };

  // Marcar um flag preenche a data correspondente com hoje (se vazia)
  const toggleFlag = (flagKey, dateKey) => {
    setForm(f => {
      const on = !f[flagKey];
      return { ...f, [flagKey]: on, [dateKey]: on && !f[dateKey] ? hojeISO() : f[dateKey] };
    });
  };

  const handleSave = async () => {
    if (!form.descricao.trim()) { setErr('Descrição obrigatória.'); return; }
    if (!form.data_agendada) { setErr('Data agendada obrigatória.'); return; }
    setSaving(true); setErr('');
    try {
      const valorNum = form.valor === '' ? null : Number(form.valor);
      await onSave({
        tipo: form.tipo,
        client_id: form.client_id || null,
        receita_id: form.receita_id || null,
        descricao: form.descricao.trim(),
        valor: valorNum,
        data_agendada: form.data_agendada,
        cobrado: !!form.cobrado,
        data_cobranca: form.data_cobranca || null,
        pago: !!form.pago,
        data_pagamento: form.data_pagamento || null,
        nf_emitida: !!form.nf_emitida,
        data_nf: form.data_nf || null,
        observacoes: form.observacoes || null,
      });
    } catch (e) {
      setErr(e.message || 'Erro ao salvar.'); setSaving(false);
    }
  };

  const isNf = form.tipo === 'nota_fiscal';

  return (
    <div className="fin-modal-scrim" onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="fin-modal">
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:20 }}>
          <div className="fin-modal-title" style={{ margin:0 }}>{initial ? 'Editar Agendamento' : 'Novo Agendamento'}</div>
          <button className="fin-icon-btn" onClick={onClose}><FinIcon name="x" size={16} /></button>
        </div>

        <div className="fin-form-grid" style={{ marginBottom:12 }}>
          <div>
            <label className="fin-label">Tipo *</label>
            <select className="fin-input fin-select" value={form.tipo} onChange={e => set('tipo', e.target.value)}>
              <option value="cobranca">Cobrança</option>
              <option value="nota_fiscal">Nota Fiscal</option>
            </select>
          </div>
          <div>
            <label className="fin-label">Data Agendada *</label>
            <input className="fin-input" type="date" value={form.data_agendada} onChange={e => set('data_agendada', e.target.value)} />
          </div>
          <div style={{ gridColumn:'1/-1' }}>
            <label className="fin-label">Descrição *</label>
            <input className="fin-input" value={form.descricao} onChange={e => set('descricao', e.target.value)} placeholder={isNf ? 'Ex: Emitir NF — Contrato XYZ' : 'Ex: Cobrar honorários — Contrato XYZ'} />
          </div>
          <div>
            <label className="fin-label">Cliente</label>
            <SearchableSelect className="fin-input fin-select" value={form.client_id} onChange={e => set('client_id', e.target.value)}>
              <option value="">— Sem cliente —</option>
              {(clientes || []).map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
            </SearchableSelect>
          </div>
          <div>
            <label className="fin-label">Valor (R$)</label>
            <input className="fin-input" type="number" min="0" step="0.01" value={form.valor} onChange={e => set('valor', e.target.value)} placeholder="0,00" />
          </div>
          <div style={{ gridColumn:'1/-1' }}>
            <label className="fin-label">Vincular a uma Receita (confirmação automática)</label>
            <SearchableSelect className="fin-input fin-select" value={form.receita_id} onChange={e => onPickReceita(e.target.value)}>
              <option value="">— Não vincular —</option>
              {(receitas || []).map(r => (
                <option key={r.id} value={r.id}>
                  {(r.data ? r.data.slice(0,10) + ' · ' : '') + r.descricao + ' · ' + fmt(r.valor_bruto)}
                </option>
              ))}
            </SearchableSelect>
            {form.receita_id && (
              <div style={{ fontSize:11, color:'var(--fg-muted,#888)', marginTop:5, display:'flex', alignItems:'center', gap:5 }}>
                <FinIcon name="link" size={11} /> Marcar como pago/cobrado/NF aqui atualiza a receita vinculada.
              </div>
            )}
          </div>
        </div>

        {/* Status */}
        <div className="fin-calc-box" style={{ marginBottom:14 }}>
          {!isNf && (
            <>
              <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:10 }}>
                <label style={{ display:'flex', alignItems:'center', gap:8, cursor:'pointer', fontSize:13 }}>
                  <button type="button" className={`fin-toggle ${form.cobrado ? 'on' : 'off'}`} onClick={() => toggleFlag('cobrado', 'data_cobranca')} />
                  Cliente cobrado
                </label>
                {form.cobrado && (
                  <input className="fin-input sm" type="date" style={{ width:150 }} value={form.data_cobranca} onChange={e => set('data_cobranca', e.target.value)} />
                )}
              </div>
              <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom: isNf ? 0 : 10 }}>
                <label style={{ display:'flex', alignItems:'center', gap:8, cursor:'pointer', fontSize:13 }}>
                  <button type="button" className={`fin-toggle ${form.pago ? 'on' : 'off'}`} onClick={() => toggleFlag('pago', 'data_pagamento')} />
                  Cliente pagou (confirmado)
                </label>
                {form.pago && (
                  <input className="fin-input sm" type="date" style={{ width:150 }} value={form.data_pagamento} onChange={e => set('data_pagamento', e.target.value)} />
                )}
              </div>
            </>
          )}
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
            <label style={{ display:'flex', alignItems:'center', gap:8, cursor:'pointer', fontSize:13 }}>
              <button type="button" className={`fin-toggle ${form.nf_emitida ? 'on' : 'off'}`} onClick={() => toggleFlag('nf_emitida', 'data_nf')} />
              Nota Fiscal emitida
            </label>
            {form.nf_emitida && (
              <input className="fin-input sm" type="date" style={{ width:150 }} value={form.data_nf} onChange={e => set('data_nf', e.target.value)} />
            )}
          </div>
        </div>

        <div style={{ marginBottom:16 }}>
          <label className="fin-label">Observações</label>
          <textarea className="fin-input" rows={2} value={form.observacoes} onChange={e => set('observacoes', e.target.value)} style={{ resize:'vertical' }} />
        </div>

        {err && <div style={{ color:'#991b1b', fontSize:12, marginBottom:10, background:'#fee2e2', padding:'7px 12px', borderRadius:6 }}>{err}</div>}

        <div style={{ display:'flex', gap:10, justifyContent:'flex-end' }}>
          <button className="fin-btn ghost" onClick={onClose}>Cancelar</button>
          <button className="fin-btn primary" onClick={handleSave} disabled={saving}>
            {saving ? 'Salvando…' : (initial ? 'Salvar alterações' : 'Agendar')}
          </button>
        </div>
      </div>
    </div>
  );
};

// ─── AGENDA ───────────────────────────────────────────────────
const FinAgenda = ({ clientes, receitas, mes, setMes, ano, setAno, onReloadReceitas }) => {
  const [itens, setItens] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [filtroTipo, setFiltroTipo] = React.useState('todos');
  const [modal, setModal] = React.useState(null); // null | 'new' | agendamento
  const [toast, setToast] = React.useState({ msg: '', type: 'ok' });

  const toastOk = (m) => setToast({ msg: m, type: 'ok' });
  const toastErr = (m) => setToast({ msg: m, type: 'err' });

  const load = React.useCallback(() => {
    setLoading(true);
    window.PACApi.financeiro.listAgenda({ mes, ano, tipo: filtroTipo })
      .then(setItens)
      .catch(e => toastErr(e.message || 'Erro ao carregar agenda.'))
      .finally(() => setLoading(false));
  }, [mes, ano, filtroTipo]);

  React.useEffect(() => { load(); }, [load]);

  const afterChange = (vinculada) => {
    load();
    if (vinculada && onReloadReceitas) onReloadReceitas();
  };

  const handleSave = async (form) => {
    if (modal === 'new') {
      await window.PACApi.financeiro.createAgenda(form);
      toastOk('Agendamento criado.');
    } else {
      await window.PACApi.financeiro.updateAgenda(modal.id, form);
      toastOk('Agendamento atualizado.');
    }
    setModal(null);
    afterChange(!!form.receita_id);
  };

  const handleDelete = async (id) => {
    if (!confirm('Excluir este agendamento?')) return;
    try {
      await window.PACApi.financeiro.deleteAgenda(id);
      toastOk('Agendamento excluído.');
      load();
    } catch (e) { toastErr(e.message || 'Erro ao excluir.'); }
  };

  const handleToggle = async (a, key) => {
    try {
      const dateKey = { cobrado: 'data_cobranca', pago: 'data_pagamento', nf_emitida: 'data_nf' }[key];
      const on = !a[key];
      const payload = { [key]: on };
      if (dateKey && on && !a[dateKey]) payload[dateKey] = hojeISO();
      if (a.receita_id) payload.receita_id = a.receita_id;
      await window.PACApi.financeiro.updateAgenda(a.id, payload);
      afterChange(!!a.receita_id);
    } catch (e) { toastErr('Erro ao atualizar status.'); }
  };

  const [duplicando, setDuplicando] = React.useState(false);
  const handleDuplicar = async () => {
    const mesNome = MESES_NOMES[(mes + 10) % 12];
    if (!confirm(`Duplicar a agenda de ${mesNome} para ${MESES_NOMES[mes - 1]}/${ano}? Os status (cobrado, pago, NF) virão zerados.`)) return;
    setDuplicando(true);
    try {
      const r = await window.PACApi.financeiro.duplicarAgenda(mes, ano);
      toastOk(r.criadas > 0 ? `${r.criadas} agendamento(s) duplicado(s) do mês anterior.` : 'Nenhum agendamento no mês anterior para duplicar.');
      load();
    } catch (e) { toastErr(e.message || 'Erro ao duplicar.'); }
    finally { setDuplicando(false); }
  };

  return (
    <div>
      <Toast msg={toast.msg} type={toast.type} onDone={() => setToast({ msg: '', type: 'ok' })} />
      <div className="fin-header">
        <div className="fin-filters">
          <select className="fin-select" value={mes} onChange={e => setMes(Number(e.target.value))}>
            {MESES_NOMES.map((m, i) => <option key={i} value={i + 1}>{m}</option>)}
          </select>
          <select className="fin-select" value={ano} onChange={e => setAno(Number(e.target.value))}>
            {[2024, 2025, 2026].map(y => <option key={y} value={y}>{y}</option>)}
          </select>
          <select className="fin-select" value={filtroTipo} onChange={e => setFiltroTipo(e.target.value)}>
            <option value="todos">Todos os tipos</option>
            <option value="cobranca">Cobranças</option>
            <option value="nota_fiscal">Notas Fiscais</option>
          </select>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="fin-btn ghost" onClick={handleDuplicar} disabled={duplicando} title="Copia a agenda do mês anterior para este mês">
            <FinIcon name="copy" size={14} /> {duplicando ? 'Duplicando…' : 'Duplicar mês anterior'}
          </button>
          <button className="fin-btn primary" onClick={() => setModal('new')}>
            <FinIcon name="plus" size={14} /> Novo Agendamento
          </button>
        </div>
      </div>

      {loading ? <Spinner /> : itens.length === 0
        ? <div className="fin-empty">Nenhum agendamento neste período.</div>
        : (
          <div className="fin-card" style={{ padding:0, overflow:'hidden' }}>
            <div className="fin-table-wrap">
              <table className="fin-table">
                <thead><tr>
                  <th>Data</th>
                  <th>Descrição</th>
                  <th>Cliente</th>
                  <th>Tipo</th>
                  <th style={{ textAlign:'right' }}>Valor</th>
                  <th style={{ textAlign:'center' }}>Status</th>
                  <th style={{ textAlign:'center' }}>Cobrado</th>
                  <th style={{ textAlign:'center' }}>Pago</th>
                  <th style={{ textAlign:'center' }}>NF</th>
                  <th></th>
                </tr></thead>
                <tbody>
                  {itens.map(a => {
                    const st = statusAgenda(a);
                    const atrasado = a.data_agendada && a.data_agendada.slice(0,10) < hojeISO() && !a.pago && !(a.tipo === 'nota_fiscal' && a.nf_emitida);
                    const cli = a.clients ? (a.clients.short_name || a.clients.name) : '—';
                    return (
                      <tr key={a.id}>
                        <td style={{ whiteSpace:'nowrap', fontWeight:600, color: atrasado ? '#991b1b' : 'var(--fg,#1a1a2e)' }}>
                          {a.data_agendada ? a.data_agendada.slice(0,10).split('-').reverse().join('/') : ''}
                        </td>
                        <td style={{ fontWeight:600, maxWidth:220, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }} title={a.descricao}>
                          {a.descricao}
                          {a.receita_id && <FinIcon name="link" size={11} style={{ marginLeft:6, color:'var(--fg-muted,#888)' }} />}
                        </td>
                        <td style={{ color:'var(--fg-muted,#888)' }}>{cli}</td>
                        <td><span className={`fin-badge ${a.tipo === 'nota_fiscal' ? 'nf' : 'agendado'}`}>{TIPO_LABEL[a.tipo]}</span></td>
                        <td style={{ textAlign:'right', fontWeight:600 }}>{a.valor != null ? fmt(a.valor) : '—'}</td>
                        <td style={{ textAlign:'center' }}><span className={`fin-badge ${st.cls}`}>{st.label}</span></td>
                        <td style={{ textAlign:'center' }}>
                          <button className={`fin-toggle ${a.cobrado ? 'on' : 'off'}`} onClick={() => handleToggle(a, 'cobrado')} title={a.cobrado ? 'Cobrado' : 'Não cobrado'} />
                        </td>
                        <td style={{ textAlign:'center' }}>
                          <button className={`fin-toggle ${a.pago ? 'on' : 'off'}`} onClick={() => handleToggle(a, 'pago')} title={a.pago ? 'Pago' : 'Pendente'} />
                        </td>
                        <td style={{ textAlign:'center' }}>
                          <button className={`fin-toggle ${a.nf_emitida ? 'on' : 'off'}`} onClick={() => handleToggle(a, 'nf_emitida')} title={a.nf_emitida ? 'NF emitida' : 'NF pendente'} />
                        </td>
                        <td>
                          <div style={{ display:'flex', gap:4 }}>
                            <button className="fin-icon-btn" onClick={() => setModal(a)} title="Editar"><FinIcon name="edit" size={13} /></button>
                            <button className="fin-icon-btn red" onClick={() => handleDelete(a.id)} title="Excluir"><FinIcon name="trash" size={13} /></button>
                          </div>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>
        )
      }

      {modal && (
        <ModalAgendamento
          initial={modal === 'new' ? null : modal}
          clientes={clientes}
          receitas={receitas}
          onSave={handleSave}
          onClose={() => setModal(null)}
        />
      )}
    </div>
  );
};

// ─── COMPONENTE PRINCIPAL ─────────────────────────────────────
const Financeiro = ({ currentUser }) => {
  const now = new Date();
  const [tab, setTab] = React.useState('dash');
  const [mes, setMes] = React.useState(now.getMonth() + 1);
  const [ano, setAno] = React.useState(now.getFullYear());
  const [clientes, setClientes] = React.useState([]);

  const { receitas, despesas, loading, reload } = useFinanceiro(mes, ano);

  // Carregar clientes para o select de receitas
  React.useEffect(() => {
    window.PACApi.clients.list().then(setClientes).catch(() => {});
  }, []);

  const TABS = [
    { key: 'dash', label: 'Dashboard' },
    { key: 'agenda', label: 'Agenda' },
    { key: 'receitas', label: 'Receitas' },
    { key: 'despesas', label: 'Despesas' },
    { key: 'consolidacao', label: 'Consolidação' },
    { key: 'relatorios', label: 'Relatórios' },
  ];

  return (
    <div className="fin-wrap">
      {/* Cabeçalho */}
      <div style={{ marginBottom:20 }}>
        <h2 style={{ fontSize:20, fontWeight:800, color:'var(--pac-navy,#0D0D6B)', margin:'0 0 2px', fontFamily:'Georgia,serif' }}>
          Financeiro
        </h2>
        <p style={{ fontSize:12.5, color:'var(--fg-muted,#888)', margin:0 }}>
          Receitas · Despesas · Consolidação · Relatórios — Peracini, Alves &amp; Cottas
        </p>
      </div>

      {/* Tabs */}
      <div className="fin-tabs">
        {TABS.map(t => (
          <button key={t.key} className={`fin-tab${tab === t.key ? ' active' : ''}`} onClick={() => setTab(t.key)}>
            {t.label}
          </button>
        ))}
      </div>

      {/* Conteúdo */}
      {tab === 'dash' && (
        <FinDashboard
          mes={mes} ano={ano}
          receitas={receitas} despesas={despesas}
          loading={loading} onTab={setTab}
        />
      )}
      {tab === 'agenda' && (
        <FinAgenda
          clientes={clientes} receitas={receitas}
          mes={mes} setMes={setMes} ano={ano} setAno={setAno}
          onReloadReceitas={reload}
        />
      )}
      {tab === 'receitas' && (
        <FinReceitas
          receitas={receitas} clientes={clientes}
          loading={loading} mes={mes} setMes={setMes}
          ano={ano} setAno={setAno} reload={reload}
        />
      )}
      {tab === 'despesas' && (
        <FinDespesas
          despesas={despesas} loading={loading}
          mes={mes} setMes={setMes}
          ano={ano} setAno={setAno} reload={reload}
        />
      )}
      {tab === 'consolidacao' && (
        <FinConsolidacao mes={mes} setMes={setMes} ano={ano} setAno={setAno} />
      )}
      {tab === 'relatorios' && (
        <FinRelatorios ano={ano} setAno={setAno} />
      )}
    </div>
  );
};

window.Financeiro = Financeiro;