// Wave 2b — Financeiro (4 telas): Assinaturas, Faturas, Despesas, Relatórios (DRE)

// =============================================================
// 6. Assinaturas (recorrência)
// =============================================================
const PageAssinaturas = ({ onNavigate }) => {
  const [filter, setFilter] = React.useState('todas');
  const subs = [
    { id: 1, cliente: 'Supermercado Vila Rica ME', plano: 'Profissional Anual', valor: 8400, freq: 'Mensal', proxima: '15/05/26', status: 'ativa', since: 'jun/2024' },
    { id: 2, cliente: 'Distribuidora RC Ltda', plano: 'Profissional', valor: 3200, freq: 'Mensal', proxima: '18/04/26', status: 'ativa', since: 'mar/2025' },
    { id: 3, cliente: 'Construtora AV', plano: 'Essencial', valor: 2400, freq: 'Mensal', proxima: '22/04/26', status: 'atrasada', since: 'jul/2024' },
    { id: 4, cliente: 'Pet Shop Amigo Fiel', plano: 'Essencial', valor: 680, freq: 'Mensal', proxima: '25/04/26', status: 'ativa', since: 'nov/2025' },
    { id: 5, cliente: 'Mecânica Rápida', plano: 'Básico', valor: 540, freq: 'Mensal', proxima: '10/05/26', status: 'pausada', since: 'ago/2024' },
    { id: 6, cliente: 'Hamburgueria 22', plano: 'Profissional', valor: 1240, freq: 'Mensal', proxima: '20/04/26', status: 'ativa', since: 'jan/2026' },
    { id: 7, cliente: 'Farmácia Bem Estar', plano: 'Essencial', valor: 960, freq: 'Mensal', proxima: '30/04/26', status: 'ativa', since: 'set/2025' },
    { id: 8, cliente: 'Escola Aprender +', plano: 'Profissional Anual', valor: 14400, freq: 'Anual', proxima: '01/02/27', status: 'ativa', since: 'fev/2025' },
  ];
  const filtered = filter === 'todas' ? subs : subs.filter(s => s.status === filter);
  const mrr = subs.filter(s => s.status === 'ativa').reduce((t, s) => t + (s.freq === 'Anual' ? s.valor / 12 : s.valor), 0);
  const arr = mrr * 12;
  const statusChip = (s) => ({
    ativa: { bg: 'rgba(34,197,94,.14)', c: '#86efac', l: 'Ativa' },
    atrasada: { bg: 'rgba(239,68,68,.14)', c: '#fca5a5', l: 'Atrasada' },
    pausada: { bg: 'rgba(245,158,11,.14)', c: '#fcd34d', l: 'Pausada' },
    cancelada: { bg: 'rgba(139,139,139,.2)', c: 'var(--text-3)', l: 'Cancelada' },
  })[s];

  return (
    <AppShell current="assinaturas" onNavigate={onNavigate}>
      <PageContainer
        title="Assinaturas"
        subtitle="Cobranças recorrentes ativas · régua de cobrança, upgrades, downgrades e pausas."
        actions={<>
          <button className="btn btn-outline btn-sm"><Icon name="settings" size={13}/> Planos</button>
          <button className="btn btn-outline btn-sm"><Icon name="download" size={13}/> Exportar</button>
          <button className="btn btn-primary btn-sm"><Icon name="plus" size={13}/> Nova assinatura</button>
        </>}
      >
        {/* MRR / ARR / Churn / NRR */}
        <div className="row-4" style={{ marginBottom: 18 }}>
          <Tile icon="trending-up" label="MRR · receita recorrente" value={BRL(mrr)} delta="+12,3%" sub="vs. mês anterior"/>
          <Tile icon="bar-chart" label="ARR · receita anual" value={BRL(arr)} delta="+R$ 182k"/>
          <Tile icon="alert" label="Churn rate 30d" value="2,1%" delta="-0,3pp" deltaDir="down" sub="2 canceladas"/>
          <Tile icon="award" label="NRR · net revenue retention" value="108%" delta="Acima de 100%" sub="Expansão > churn" accent="rgba(139,92,246,.2)"/>
        </div>

        {/* MRR trend */}
        <div className="tile" style={{ marginBottom: 18 }}>
          <div className="tile-head">
            <div className="sect-title">Evolução do MRR · últimos 12 meses</div>
            <span className="grow"/>
            <span className="chip chip-brand">+42% YoY</span>
          </div>
          <Bars
            labels={['Mai/25','Jun','Jul','Ago','Set','Out','Nov','Dez','Jan/26','Fev','Mar','Abr']}
            series={[
              { name: 'MRR novo', color: '#22c55e', data: [3200, 2800, 4200, 3600, 5400, 6200, 4800, 7200, 8400, 9200, 11400, 12800] },
              { name: 'Expansão', color: 'var(--accent-1)', data: [1200, 1600, 1400, 2200, 1800, 2400, 2800, 3200, 4200, 4800, 5400, 6200] },
              { name: 'Churn', color: '#ef4444', data: [800, 1200, 600, 1400, 900, 1200, 800, 1600, 1200, 1400, 1100, 1200] },
            ]}
            height={220}
          />
        </div>

        {/* Filters */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 12, flexWrap: 'wrap', alignItems: 'center' }}>
          {[
            { id: 'todas', l: 'Todas', c: subs.length },
            { id: 'ativa', l: 'Ativas', c: subs.filter(s => s.status === 'ativa').length },
            { id: 'atrasada', l: 'Atrasadas', c: subs.filter(s => s.status === 'atrasada').length },
            { id: 'pausada', l: 'Pausadas', c: subs.filter(s => s.status === 'pausada').length },
          ].map(c => (
            <button key={c.id} onClick={() => setFilter(c.id)} style={{
              padding: '7px 12px', fontSize: 12.5, borderRadius: 8, fontWeight: 500,
              background: filter === c.id ? 'var(--accent-soft-14)' : 'var(--bg-2)',
              border: `1px solid ${filter === c.id ? 'var(--accent-soft-55)' : 'var(--line-2)'}`,
              color: filter === c.id ? 'var(--accent-text)' : 'var(--text-2)',
            }}>{c.l} <span style={{ opacity: .6, fontSize: 11 }}>({c.c})</span></button>
          ))}
          <span style={{ flex: 1 }}/>
          <span style={{ fontSize: 12, color: 'var(--text-3)' }}>Total filtrado: <b style={{ color: 'var(--text-0)', fontVariantNumeric: 'tabular-nums' }}>
            {BRL(filtered.reduce((t, s) => t + s.valor, 0))}
          </b></span>
        </div>

        <div className="table-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th>Cliente</th>
                <th>Plano</th>
                <th style={{ textAlign: 'right' }}>Valor</th>
                <th>Frequência</th>
                <th>Próxima cobrança</th>
                <th>Cliente desde</th>
                <th>Status</th>
                <th style={{ textAlign: 'right' }}>Ações</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(s => {
                const st = statusChip(s.status);
                return (
                  <tr key={s.id}>
                    <td>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                        <Avatar name={s.cliente} size={28}/>
                        <b style={{ color: 'var(--text-0)', fontWeight: 500 }}>{s.cliente}</b>
                      </div>
                    </td>
                    <td><span className="chip chip-brand" style={{ fontSize: 11 }}>{s.plano}</span></td>
                    <td style={{ textAlign: 'right', color: 'var(--text-0)', fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>{BRL(s.valor)}</td>
                    <td style={{ color: 'var(--text-2)' }}>{s.freq}</td>
                    <td style={{ fontVariantNumeric: 'tabular-nums', color: s.status === 'atrasada' ? '#fca5a5' : 'var(--text-1)' }}>{s.proxima}</td>
                    <td style={{ color: 'var(--text-3)', fontSize: 12 }}>{s.since}</td>
                    <td><span className="chip" style={{ background: st.bg, color: st.c, fontSize: 10.5, fontWeight: 600 }}>{st.l}</span></td>
                    <td style={{ textAlign: 'right' }}>
                      <button className="btn btn-outline btn-sm" style={{ padding: '5px 8px' }}><Icon name="edit" size={11}/></button>
                      <button className="btn btn-outline btn-sm" style={{ padding: '5px 8px', marginLeft: 4 }}><Icon name="pause" size={11}/></button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </PageContainer>
    </AppShell>
  );
};

// =============================================================
// 7. Faturas
// =============================================================
const PageFaturas = ({ onNavigate }) => {
  const [modal, setModal] = React.useState(false);
  const [filter, setFilter] = React.useState('todas');
  const invoices = [
    { id: 'FAT-2026-00184', cliente: 'Supermercado Vila Rica ME', email: 'financeiro@vilarica.com.br', emissao: '15/04/26', vencimento: '22/04/26', valor: 8400.00, status: 'pendente', metodo: 'Boleto' },
    { id: 'FAT-2026-00183', cliente: 'Distribuidora RC Ltda', email: 'rc@distribuidora.com.br', emissao: '15/04/26', vencimento: '25/04/26', valor: 3200.00, status: 'pendente', metodo: 'PIX' },
    { id: 'FAT-2026-00182', cliente: 'Hamburgueria 22', email: 'contato@hambu22.com', emissao: '10/04/26', vencimento: '18/04/26', valor: 1240.00, status: 'atrasada', metodo: 'Boleto' },
    { id: 'FAT-2026-00181', cliente: 'Farmácia Bem Estar', email: 'adm@bemestar.com.br', emissao: '10/04/26', vencimento: '28/04/26', valor: 960.00, status: 'pendente', metodo: 'Cartão' },
    { id: 'FAT-2026-00180', cliente: 'Pet Shop Amigo Fiel', email: 'financeiro@amigofiel.com', emissao: '05/04/26', vencimento: '15/04/26', valor: 680.00, status: 'paga', metodo: 'PIX' },
    { id: 'FAT-2026-00179', cliente: 'Escola Aprender +', email: 'tesouraria@aprender.edu', emissao: '01/04/26', vencimento: '10/04/26', valor: 1200.00, status: 'paga', metodo: 'Boleto' },
    { id: 'FAT-2026-00178', cliente: 'Mecânica Rápida Eireli', email: 'mecrapida@mec.com', emissao: '01/04/26', vencimento: '12/04/26', valor: 540.00, status: 'atrasada', metodo: 'Boleto' },
    { id: 'FAT-2026-00177', cliente: 'Construtora AV SA', email: 'pagto@constav.com.br', emissao: '28/03/26', vencimento: '08/04/26', valor: 2400.00, status: 'paga', metodo: 'PIX' },
  ];
  const filtered = filter === 'todas' ? invoices : invoices.filter(i => i.status === filter);
  const totals = {
    pendente: invoices.filter(i => i.status === 'pendente').reduce((t, i) => t + i.valor, 0),
    atrasada: invoices.filter(i => i.status === 'atrasada').reduce((t, i) => t + i.valor, 0),
    paga: invoices.filter(i => i.status === 'paga').reduce((t, i) => t + i.valor, 0),
  };
  const statusChip = (s) => ({
    paga: { bg: 'rgba(34,197,94,.14)', c: '#86efac', l: 'Paga', icon: 'check' },
    pendente: { bg: 'rgba(245,158,11,.14)', c: '#fcd34d', l: 'Pendente', icon: 'clock' },
    atrasada: { bg: 'rgba(239,68,68,.14)', c: '#fca5a5', l: 'Atrasada', icon: 'alert' },
  })[s];
  const methodIcon = (m) => ({ PIX: 'pix', Boleto: 'receipt', Cartão: 'wallet' })[m] || 'receipt';

  return (
    <AppShell current="faturas" onNavigate={onNavigate}>
      <PageContainer
        title="Faturas"
        subtitle="Emita, cobre e acompanhe todas as faturas em um só lugar."
        actions={<>
          <button className="btn btn-outline btn-sm"><Icon name="download" size={13}/> Exportar</button>
          <button className="btn btn-outline btn-sm"><Icon name="sparkle" size={13}/> Cobrar atrasadas</button>
          <button className="btn btn-primary btn-sm" onClick={() => setModal(true)}><Icon name="plus" size={13}/> Nova fatura</button>
        </>}
      >
        <div className="row-4" style={{ marginBottom: 18 }}>
          <Tile icon="receipt" label="Faturas abril" value="8" sub={`${BRL(invoices.reduce((t, i) => t + i.valor, 0))} total`}/>
          <Tile icon="clock" label="Pendentes" value={BRL(totals.pendente)} sub="4 faturas · régua ativa" accent="rgba(245,158,11,.18)"/>
          <Tile icon="alert" label="Atrasadas" value={BRL(totals.atrasada)} sub="2 faturas · cobrança urgente" accent="rgba(239,68,68,.18)"/>
          <Tile icon="check" label="Recebidas" value={BRL(totals.paga)} delta="3 faturas" accent="rgba(34,197,94,.18)"/>
        </div>

        {/* Filters */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 12, flexWrap: 'wrap', alignItems: 'center' }}>
          {[
            { id: 'todas', l: 'Todas', c: invoices.length },
            { id: 'pendente', l: 'Pendentes', c: invoices.filter(i => i.status === 'pendente').length },
            { id: 'atrasada', l: 'Atrasadas', c: invoices.filter(i => i.status === 'atrasada').length },
            { id: 'paga', l: 'Pagas', c: invoices.filter(i => i.status === 'paga').length },
          ].map(c => (
            <button key={c.id} onClick={() => setFilter(c.id)} style={{
              padding: '7px 12px', fontSize: 12.5, borderRadius: 8, fontWeight: 500,
              background: filter === c.id ? 'var(--accent-soft-14)' : 'var(--bg-2)',
              border: `1px solid ${filter === c.id ? 'var(--accent-soft-55)' : 'var(--line-2)'}`,
              color: filter === c.id ? 'var(--accent-text)' : 'var(--text-2)',
            }}>{c.l} <span style={{ opacity: .6, fontSize: 11 }}>({c.c})</span></button>
          ))}
          <span style={{ flex: 1 }}/>
          <div style={{ position: 'relative' }}>
            <Icon name="search" size={13} style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', color: 'var(--text-3)' }}/>
            <input placeholder="Buscar fatura ou cliente..." style={{
              padding: '8px 12px 8px 32px', borderRadius: 8, fontSize: 12.5, width: 260,
              background: 'var(--bg-2)', border: '1px solid var(--line-2)', color: 'var(--text-1)',
            }}/>
          </div>
        </div>

        <div className="table-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th>Fatura</th>
                <th>Cliente</th>
                <th>Emissão</th>
                <th>Vencimento</th>
                <th style={{ textAlign: 'right' }}>Valor</th>
                <th>Método</th>
                <th>Status</th>
                <th style={{ textAlign: 'right' }}>Ações</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(r => {
                const st = statusChip(r.status);
                return (
                  <tr key={r.id}>
                    <td style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--text-2)' }}>{r.id}</td>
                    <td>
                      <b style={{ color: 'var(--text-0)', fontWeight: 500 }}>{r.cliente}</b>
                      <div style={{ fontSize: 11, color: 'var(--text-3)' }}>{r.email}</div>
                    </td>
                    <td style={{ color: 'var(--text-2)', fontVariantNumeric: 'tabular-nums' }}>{r.emissao}</td>
                    <td style={{ fontVariantNumeric: 'tabular-nums', color: r.status === 'atrasada' ? '#fca5a5' : 'var(--text-1)' }}>{r.vencimento}</td>
                    <td style={{ textAlign: 'right', color: 'var(--text-0)', fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>{BRL(r.valor)}</td>
                    <td>
                      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 12, color: 'var(--text-2)' }}>
                        <Icon name={methodIcon(r.metodo)} size={12}/> {r.metodo}
                      </span>
                    </td>
                    <td><span className="chip" style={{ background: st.bg, color: st.c, fontSize: 10.5, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon name={st.icon} size={10}/> {st.l}</span></td>
                    <td style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
                      <button className="btn btn-outline btn-sm" style={{ padding: '5px 8px' }} title="Enviar por e-mail"><Icon name="mail" size={11}/></button>
                      <button className="btn btn-outline btn-sm" style={{ padding: '5px 8px', marginLeft: 4 }} title="WhatsApp"><Icon name="whatsapp" size={11}/></button>
                      <button className="btn btn-outline btn-sm" style={{ padding: '5px 8px', marginLeft: 4 }} title="Baixar PDF"><Icon name="download" size={11}/></button>
                      {r.status !== 'paga' && (
                        <button className="btn btn-outline btn-sm" style={{ padding: '5px 8px', marginLeft: 4, color: '#86efac', borderColor: 'rgba(34,197,94,.3)' }} title="Marcar como paga"><Icon name="check" size={11}/></button>
                      )}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>

        {modal && <FaturaModal onClose={() => setModal(false)}/>}
      </PageContainer>
    </AppShell>
  );
};

const FaturaModal = ({ onClose }) => (
  <>
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.65)', zIndex: 100, backdropFilter: 'blur(6px)' }}/>
    <div style={{
      position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
      width: 560, maxWidth: 'calc(100vw - 40px)', maxHeight: '90vh', overflowY: 'auto',
      background: 'var(--bg-1)', border: '1px solid var(--line-2)', borderRadius: 16,
      zIndex: 101, boxShadow: 'var(--shadow-lg)',
    }}>
      <div style={{ padding: '22px 26px', borderBottom: '1px solid var(--line-1)', display: 'flex', alignItems: 'center', gap: 12 }}>
        <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: 'var(--text-0)', letterSpacing: '-.01em' }}>Nova fatura</h2>
        <span style={{ flex: 1 }}/>
        <button onClick={onClose} className="shell-top-btn" style={{ width: 32, height: 32 }}><Icon name="x" size={14}/></button>
      </div>
      <div style={{ padding: 26, display: 'flex', flexDirection: 'column', gap: 16 }}>
        <DField label="Cliente" select options={['Supermercado Vila Rica ME', 'Distribuidora RC Ltda', 'Hamburgueria 22', 'Farmácia Bem Estar']}/>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <DField label="Valor" placeholder="R$ 0,00" prefix="R$"/>
          <DField label="Vencimento" type="date" defaultValue="2026-04-25"/>
        </div>
        <DField label="Descrição" textarea placeholder="Serviços prestados · referência abril/2026"/>
        <DField label="Método de cobrança" select options={['Boleto bancário', 'PIX', 'Cartão de crédito', 'Boleto + PIX']}/>

        <div>
          <label style={{ fontSize: 12, fontWeight: 500, color: 'var(--text-2)', marginBottom: 8, display: 'block' }}>Régua de cobrança automática</label>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {[
              { t: 'Enviar e-mail no envio da fatura', a: true },
              { t: 'Lembrete 3 dias antes do vencimento via WhatsApp', a: true },
              { t: 'Notificação no dia do vencimento', a: true },
              { t: 'Cobrança após atraso (D+1, D+5, D+10)', a: false },
            ].map((opt, i) => (
              <label key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px', background: 'var(--bg-2)', borderRadius: 8, fontSize: 12.5, cursor: 'pointer' }}>
                <input type="checkbox" defaultChecked={opt.a}/> <span style={{ color: 'var(--text-1)' }}>{opt.t}</span>
              </label>
            ))}
          </div>
        </div>

        <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
          <button onClick={onClose} className="btn btn-outline" style={{ flex: 1 }}>Cancelar</button>
          <button className="btn btn-primary" style={{ flex: 2 }}><Icon name="check" size={14}/> Criar e enviar fatura</button>
        </div>
      </div>
    </div>
  </>
);

// =============================================================
// 8. Despesas
// =============================================================
const PageDespesas = ({ onNavigate }) => {
  const desp = [
    { id: 'DSP-0421', data: '17/04', fornecedor: 'Farinha SP Ltda', cat: 'Insumos', valor: 3680.00, venc: '25/04', status: 'pendente', nf: '5892', anexo: true },
    { id: 'DSP-0420', data: '17/04', fornecedor: 'CEMIG', cat: 'Utilidades', valor: 1240.55, venc: '19/04', status: 'pendente', nf: null, anexo: true },
    { id: 'DSP-0419', data: '16/04', fornecedor: 'Automatiza Tech', cat: 'Software', valor: 499.00, venc: '16/04', status: 'paga', nf: '18234', anexo: true },
    { id: 'DSP-0418', data: '15/04', fornecedor: 'Posto Ipiranga', cat: 'Combustível', valor: 348.80, venc: '15/04', status: 'paga', nf: null, anexo: false },
    { id: 'DSP-0417', data: '14/04', fornecedor: 'Escritório Contábil BH', cat: 'Serviços', valor: 890.00, venc: '20/04', status: 'pendente', nf: '2041', anexo: true },
    { id: 'DSP-0416', data: '12/04', fornecedor: 'Imobiliária Central', cat: 'Imóvel', valor: 4200.00, venc: '10/05', status: 'agendada', nf: null, anexo: true },
    { id: 'DSP-0415', data: '10/04', fornecedor: 'AWS Amazon', cat: 'Software', valor: 840.20, venc: '10/04', status: 'paga', nf: null, anexo: true },
    { id: 'DSP-0414', data: '08/04', fornecedor: 'Café Central', cat: 'Alimentação', valor: 142.60, venc: '08/04', status: 'paga', nf: '842', anexo: false },
  ];
  const byCategory = desp.reduce((acc, d) => { acc[d.cat] = (acc[d.cat] || 0) + d.valor; return acc; }, {});
  const catColors = {
    'Insumos': '#f59e0b', 'Utilidades': '#06b6d4', 'Software': 'var(--accent-1)', 'Combustível': '#ef4444',
    'Serviços': '#3b82f6', 'Imóvel': '#22c55e', 'Alimentação': '#ec4899',
  };
  const statusChip = (s) => ({
    paga: { bg: 'rgba(34,197,94,.14)', c: '#86efac', l: 'Paga' },
    pendente: { bg: 'rgba(245,158,11,.14)', c: '#fcd34d', l: 'Pendente' },
    agendada: { bg: 'rgba(59,130,246,.14)', c: '#93c5fd', l: 'Agendada' },
  })[s];

  return (
    <AppShell current="despesas" onNavigate={onNavigate}>
      <PageContainer
        title="Despesas"
        subtitle="Contas a pagar, comprovantes, categorização automática e aprovações."
        actions={<>
          <button className="btn btn-outline btn-sm"><Icon name="upload" size={13}/> Anexar lote</button>
          <button className="btn btn-outline btn-sm"><Icon name="download" size={13}/> Exportar</button>
          <button className="btn btn-primary btn-sm"><Icon name="plus" size={13}/> Nova despesa</button>
        </>}
      >
        <div className="row-4" style={{ marginBottom: 18 }}>
          <Tile icon="minus-circle" label="Total abril" value={BRL(desp.reduce((t, d) => t + d.valor, 0))} sub={`${desp.length} despesas`}/>
          <Tile icon="clock" label="A pagar" value={BRL(desp.filter(d => d.status === 'pendente').reduce((t, d) => t + d.valor, 0))} sub="3 pendentes" accent="rgba(245,158,11,.18)"/>
          <Tile icon="calendar" label="Agendadas" value={BRL(desp.filter(d => d.status === 'agendada').reduce((t, d) => t + d.valor, 0))} sub="próximos 30d" accent="rgba(59,130,246,.18)"/>
          <Tile icon="check" label="Pagas" value={BRL(desp.filter(d => d.status === 'paga').reduce((t, d) => t + d.valor, 0))} sub="4 quitadas" accent="rgba(34,197,94,.18)"/>
        </div>

        {/* Category breakdown */}
        <div className="tile" style={{ marginBottom: 18 }}>
          <div className="tile-head">
            <div className="sect-title">Despesas por categoria · abril/26</div>
            <span className="grow"/>
          </div>
          <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
            <Donut segments={Object.entries(byCategory).map(([k, v]) => ({ name: k, value: v, color: catColors[k] || '#8b5cf6' }))} size={160}/>
            <div style={{ flex: 1, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
              {Object.entries(byCategory).sort((a, b) => b[1] - a[1]).map(([k, v]) => (
                <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px', background: 'var(--bg-1)', borderRadius: 8 }}>
                  <span className="dot" style={{ background: catColors[k] || '#8b5cf6', width: 10, height: 10 }}/>
                  <span style={{ flex: 1, fontSize: 12.5, color: 'var(--text-1)' }}>{k}</span>
                  <b style={{ fontSize: 13, color: 'var(--text-0)', fontVariantNumeric: 'tabular-nums' }}>{BRL(v)}</b>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="table-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th>Despesa</th>
                <th>Fornecedor</th>
                <th>Categoria</th>
                <th>Vencimento</th>
                <th style={{ textAlign: 'right' }}>Valor</th>
                <th style={{ textAlign: 'center' }}>NF</th>
                <th style={{ textAlign: 'center' }}>Anexo</th>
                <th>Status</th>
                <th style={{ textAlign: 'right' }}>Ações</th>
              </tr>
            </thead>
            <tbody>
              {desp.map(d => {
                const st = statusChip(d.status);
                return (
                  <tr key={d.id}>
                    <td style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--text-2)' }}>{d.id}</td>
                    <td><b style={{ color: 'var(--text-0)', fontWeight: 500 }}>{d.fornecedor}</b></td>
                    <td>
                      <span style={{
                        display: 'inline-flex', alignItems: 'center', gap: 6, padding: '3px 8px', fontSize: 11, borderRadius: 6,
                        background: (catColors[d.cat] || '#8b5cf6') + '22', color: catColors[d.cat] || '#c4b5fd', fontWeight: 500,
                      }}>
                        <span className="dot" style={{ background: catColors[d.cat], width: 6, height: 6 }}/>{d.cat}
                      </span>
                    </td>
                    <td style={{ fontVariantNumeric: 'tabular-nums', color: d.status === 'pendente' && new Date(`2026-04-${d.venc.split('/')[0]}`) < new Date('2026-04-17') ? '#fca5a5' : 'var(--text-1)' }}>{d.venc}</td>
                    <td style={{ textAlign: 'right', color: '#fca5a5', fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>-{BRL(d.valor)}</td>
                    <td style={{ textAlign: 'center', color: 'var(--text-3)', fontSize: 11.5, fontFamily: 'var(--font-mono)' }}>{d.nf || '—'}</td>
                    <td style={{ textAlign: 'center' }}>
                      {d.anexo ? (
                        <span style={{ display: 'inline-grid', placeItems: 'center', width: 24, height: 24, background: 'var(--accent-soft-14)', color: 'var(--accent-text)', borderRadius: 6 }}>
                          <Icon name="file" size={12}/>
                        </span>
                      ) : <span style={{ color: 'var(--text-4)', fontSize: 11 }}>—</span>}
                    </td>
                    <td><span className="chip" style={{ background: st.bg, color: st.c, fontSize: 10.5, fontWeight: 600 }}>{st.l}</span></td>
                    <td style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
                      <button className="btn btn-outline btn-sm" style={{ padding: '5px 8px' }}><Icon name="edit" size={11}/></button>
                      {d.status !== 'paga' && <button className="btn btn-outline btn-sm" style={{ padding: '5px 8px', marginLeft: 4, color: '#86efac', borderColor: 'rgba(34,197,94,.3)' }}><Icon name="check" size={11}/></button>}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </PageContainer>
    </AppShell>
  );
};

// =============================================================
// 9. Relatórios Financeiros (DRE)
// =============================================================
const PageDRE = ({ onNavigate }) => {
  const [period, setPeriod] = React.useState('abr26');
  // Periods for comparison
  const dre = [
    { group: 'receita', title: 'RECEITA BRUTA OPERACIONAL', children: [
      { label: 'Receita de vendas', v: 91200, prev: 85900 },
      { label: 'Receita de serviços', v: 18420, prev: 16800 },
      { label: 'Receita de assinaturas', v: 12400, prev: 11200 },
    ], total: 122020, prev: 113900 },
    { group: 'deducao', title: '(-) DEDUÇÕES DA RECEITA', children: [
      { label: 'Impostos sobre vendas (ICMS, ISS, PIS, COFINS)', v: -14820, prev: -13980 },
      { label: 'Devoluções e abatimentos', v: -1840, prev: -2100 },
    ], total: -16660, prev: -16080 },
    { group: 'liquida', title: 'RECEITA LÍQUIDA', total: 105360, prev: 97820, highlight: true },
    { group: 'custo', title: '(-) CUSTO DOS PRODUTOS VENDIDOS', children: [
      { label: 'Custo das mercadorias (CMV)', v: -38400, prev: -35800 },
      { label: 'Custo dos serviços prestados (CSP)', v: -4200, prev: -3600 },
    ], total: -42600, prev: -39400 },
    { group: 'bruto', title: 'LUCRO BRUTO', total: 62760, prev: 58420, highlight: true, margin: 59.6 },
    { group: 'despesa', title: '(-) DESPESAS OPERACIONAIS', children: [
      { label: 'Folha e encargos CLT', v: -14820, prev: -13920 },
      { label: 'Pró-labore sócios', v: -8000, prev: -8000 },
      { label: 'Aluguel e condomínio', v: -4200, prev: -4200 },
      { label: 'Utilidades (energia, água, internet)', v: -2180, prev: -1940 },
      { label: 'Software e assinaturas', v: -1840, prev: -1840 },
      { label: 'Marketing e publicidade', v: -1200, prev: -840 },
      { label: 'Outras despesas administrativas', v: -2860, prev: -2400 },
    ], total: -35100, prev: -33140 },
    { group: 'operacional', title: 'LUCRO OPERACIONAL (EBITDA)', total: 27660, prev: 25280, highlight: true, margin: 26.3 },
    { group: 'financeiro', title: '(±) RESULTADO FINANCEIRO', children: [
      { label: 'Receitas financeiras (aplicações, juros)', v: 840, prev: 620 },
      { label: 'Despesas financeiras (tarifas, juros)', v: -340, prev: -280 },
    ], total: 500, prev: 340 },
    { group: 'liquido', title: 'LUCRO LÍQUIDO DO PERÍODO', total: 28160, prev: 25620, highlight: true, final: true, margin: 26.7 },
  ];
  const [expanded, setExpanded] = React.useState({ receita: true, deducao: true, custo: true, despesa: true, financeiro: true });

  return (
    <AppShell current="dre" onNavigate={onNavigate}>
      <PageContainer
        title="DRE & Relatórios Financeiros"
        subtitle="Demonstração de Resultados do Exercício · comparativo vs. período anterior."
        maxWidth={1500}
        actions={<>
          <select style={selectStyle} value={period} onChange={(e) => setPeriod(e.target.value)}>
            <option value="abr26">Abril/2026 vs. Março/2026</option>
            <option value="q1">Q1 2026 vs. Q4 2025</option>
            <option value="ytd">YTD 2026 vs. YTD 2025</option>
          </select>
          <button className="btn btn-outline btn-sm"><Icon name="bar-chart" size={13}/> Gráficos</button>
          <button className="btn btn-outline btn-sm"><Icon name="download" size={13}/> PDF</button>
          <button className="btn btn-outline btn-sm"><Icon name="download" size={13}/> Excel</button>
        </>}
      >
        {/* KPI strip */}
        <div className="row-4" style={{ marginBottom: 18 }}>
          <Tile icon="trending-up" label="Receita líquida" value={BRL(105360)} delta="+7,7%" sub="vs. março"/>
          <Tile icon="bar-chart" label="Margem bruta" value="59,6%" delta="+0,2pp"/>
          <Tile icon="award" label="EBITDA" value={BRL(27660)} delta="+9,4%" accent="rgba(139,92,246,.2)"/>
          <Tile icon="wallet" label="Lucro líquido" value={BRL(28160)} delta="+9,9%" sub="Margem 26,7%" accent="rgba(34,197,94,.2)"/>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 16 }} className="gridD">
          <style>{`@media (max-width: 1200px) { .gridD { grid-template-columns: 1fr !important; } }`}</style>

          {/* DRE Hierarchy */}
          <div className="tile" style={{ padding: 0 }}>
            <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--line-1)', display: 'flex', alignItems: 'center', gap: 10 }}>
              <div className="sect-title">Demonstração de Resultados · abril/26</div>
              <span className="grow"/>
              <span className="chip chip-green">+9,9% vs. março</span>
            </div>
            <table className="tbl">
              <thead>
                <tr>
                  <th>Conta</th>
                  <th style={{ textAlign: 'right' }}>Abril/26</th>
                  <th style={{ textAlign: 'right' }}>Março/26</th>
                  <th style={{ textAlign: 'right' }}>Δ%</th>
                  <th style={{ textAlign: 'right' }}>AV</th>
                </tr>
              </thead>
              <tbody>
                {dre.map((row, i) => {
                  const delta = row.prev ? ((row.total - row.prev) / Math.abs(row.prev)) * 100 : 0;
                  const av = (row.total / 105360 * 100);
                  const isExp = expanded[row.group];
                  const isHighlight = row.highlight;
                  return (
                    <React.Fragment key={i}>
                      <tr style={{
                        background: isHighlight ? (row.final ? 'var(--accent-soft-14)' : 'var(--bg-3)') : 'transparent',
                        cursor: row.children ? 'pointer' : 'default',
                      }} onClick={() => row.children && setExpanded({ ...expanded, [row.group]: !isExp })}>
                        <td style={{
                          fontWeight: isHighlight ? 700 : 600,
                          color: isHighlight ? (row.final ? 'var(--accent-text)' : 'var(--text-0)') : 'var(--text-1)',
                          fontSize: isHighlight ? 13 : 12.5,
                        }}>
                          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                            {row.children && <Icon name="chevronDown" size={10} style={{ transform: isExp ? 'none' : 'rotate(-90deg)', transition: 'transform 150ms', opacity: .6 }}/>}
                            {row.title}
                          </span>
                        </td>
                        <td style={{ textAlign: 'right', fontWeight: isHighlight ? 700 : 600, color: row.total >= 0 ? 'var(--text-0)' : '#fca5a5', fontVariantNumeric: 'tabular-nums', fontSize: isHighlight ? 14 : 13 }}>
                          {row.total < 0 ? '(' : ''}{BRL(Math.abs(row.total))}{row.total < 0 ? ')' : ''}
                        </td>
                        <td style={{ textAlign: 'right', color: 'var(--text-3)', fontVariantNumeric: 'tabular-nums' }}>{row.prev < 0 ? '(' : ''}{BRL(Math.abs(row.prev))}{row.prev < 0 ? ')' : ''}</td>
                        <td style={{ textAlign: 'right', color: delta >= 0 ? '#86efac' : '#fca5a5', fontWeight: 600, fontVariantNumeric: 'tabular-nums', fontSize: 12 }}>
                          {delta >= 0 ? '+' : ''}{delta.toFixed(1)}%
                        </td>
                        <td style={{ textAlign: 'right', color: 'var(--text-3)', fontSize: 11.5, fontVariantNumeric: 'tabular-nums' }}>
                          {row.margin ? row.margin.toFixed(1) + '%' : (av !== 100 && av < 500 && av > -500 ? av.toFixed(1) + '%' : '—')}
                        </td>
                      </tr>
                      {row.children && isExp && row.children.map((c, j) => (
                        <tr key={`${i}-${j}`} style={{ background: 'var(--bg-base)' }}>
                          <td style={{ paddingLeft: 36, fontSize: 12, color: 'var(--text-2)' }}>{c.label}</td>
                          <td style={{ textAlign: 'right', color: c.v < 0 ? '#fca5a5' : 'var(--text-1)', fontVariantNumeric: 'tabular-nums', fontSize: 12 }}>
                            {c.v < 0 ? '(' : ''}{BRL(Math.abs(c.v))}{c.v < 0 ? ')' : ''}
                          </td>
                          <td style={{ textAlign: 'right', color: 'var(--text-3)', fontVariantNumeric: 'tabular-nums', fontSize: 12 }}>{c.prev < 0 ? '(' : ''}{BRL(Math.abs(c.prev))}{c.prev < 0 ? ')' : ''}</td>
                          <td style={{ textAlign: 'right', color: 'var(--text-3)', fontSize: 11 }}>—</td>
                          <td style={{ textAlign: 'right', color: 'var(--text-4)', fontSize: 11, fontVariantNumeric: 'tabular-nums' }}>{(c.v / 105360 * 100).toFixed(1)}%</td>
                        </tr>
                      ))}
                    </React.Fragment>
                  );
                })}
              </tbody>
            </table>
          </div>

          {/* Right column: charts */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="tile">
              <div className="tile-head"><div className="sect-title">Composição do resultado</div></div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <Donut size={140} segments={[
                  { name: 'Receita líquida', value: 105360, color: '#22c55e' },
                  { name: 'CPV', value: 42600, color: '#ef4444' },
                  { name: 'Despesas oper.', value: 35100, color: '#f59e0b' },
                  { name: 'Lucro líquido', value: 28160, color: 'var(--accent-1)' },
                ]}/>
                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 12 }}>
                  {[
                    { l: 'Receita líquida', v: '100%', c: '#22c55e' },
                    { l: 'CPV', v: '40,4%', c: '#ef4444' },
                    { l: 'Despesas oper.', v: '33,3%', c: '#f59e0b' },
                    { l: 'Lucro líquido', v: '26,7%', c: 'var(--accent-1)' },
                  ].map(x => (
                    <div key={x.l} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span className="dot" style={{ background: x.c }}/>
                      <span style={{ flex: 1, color: 'var(--text-2)' }}>{x.l}</span>
                      <b style={{ color: 'var(--text-0)', fontVariantNumeric: 'tabular-nums' }}>{x.v}</b>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div className="tile">
              <div className="tile-head"><div className="sect-title">Evolução do lucro líquido</div></div>
              <Bars
                labels={['Nov', 'Dez', 'Jan', 'Fev', 'Mar', 'Abr']}
                series={[
                  { name: 'Lucro líquido (R$)', color: 'var(--accent-1)', data: [18400, 20800, 19600, 22400, 25620, 28160] },
                ]}
                height={160}
              />
            </div>

            <div className="tile">
              <div className="tile-head">
                <Icon name="sparkle" size={14} color="var(--accent-text)"/>
                <div className="sect-title">Insights da IA</div>
              </div>
              {[
                { t: 'Margem bruta estável em ~59,6%', sub: 'Efeito do melhor mix de serviços vs. produto.', icon: 'trending-up', c: '#86efac' },
                { t: 'Despesa com Marketing +42,9%', sub: 'Aumento justificável pela campanha de abril — monitorar ROI.', icon: 'alert', c: '#fcd34d' },
                { t: 'Folha CLT cresceu 6,5%', sub: 'Abaixo da inflação do dissídio (7,1%).', icon: 'check', c: '#86efac' },
              ].map((x, i) => (
                <div key={i} style={{ display: 'flex', gap: 10, padding: '10px 0', borderBottom: i < 2 ? '1px solid var(--line-1)' : 'none' }}>
                  <span style={{ width: 28, height: 28, borderRadius: 7, background: x.c + '22', color: x.c, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                    <Icon name={x.icon} size={13}/>
                  </span>
                  <div>
                    <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--text-0)', marginBottom: 2 }}>{x.t}</div>
                    <div style={{ fontSize: 11.5, color: 'var(--text-2)', lineHeight: 1.5 }}>{x.sub}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </PageContainer>
    </AppShell>
  );
};

Object.assign(window, { PageAssinaturas, PageFaturas, PageDespesas, PageDRE });