// Relatório — Budget da família (orçamento mensal) — imprimível
function RelatorioBudgetPage({ state, year, month = 0 }) {
  const [atualizadoEm, setAtualizadoEm] = React.useState(() => new Date());
  const [flash, setFlash] = React.useState(false);
  function atualizar() { setAtualizadoEm(new Date()); setFlash(true); setTimeout(() => setFlash(false), 1200); }
  const fmt = window.fmtBRLString;
  const fam = state.familia;
  const mesLabel = window.MESES_FULL[month] + "/" + year;

  const mt = window.monthTotals(state.transactions, state.aggregates, year, month);
  const receita = mt.income, despesa = mt.expense, saldo = receita - despesa;
  const txPoupanca = receita > 0 ? (saldo / receita) * 100 : 0;

  const prevM = month === 0 ? { m: 11, y: year - 1 } : { m: month - 1, y: year };
  const prev = window.monthTotals(state.transactions, state.aggregates, prevM.y, prevM.m);
  const prevLabel = window.MESES_FULL[prevM.m] + "/" + prevM.y;

  const plano = window.computePlano(state.transactions, state.aggregates, year, month);
  const monthTxs = window.txByMonth(state.transactions, year, month);
  const classes = window.byClasse(monthTxs);
  const totalClasses = classes.reduce((s, c) => s + c.value, 0);

  // Despesas por categoria: lançamentos detalhados primeiro, senão agregados
  let cats = window.byCategory(monthTxs);
  if (!cats.length) cats = window.aggCategoryBreakdown(state.aggregates, year, month);
  const totalCats = cats.reduce((s, c) => s + c.value, 0);

  // Receitas por fonte
  const recMap = {};
  for (const t of monthTxs) {
    if (t.type !== "Receita") continue;
    const k = t.category || t.description || "Receita";
    recMap[k] = (recMap[k] || 0) + Number(t.amount || 0);
  }
  for (const [nome, arr] of Object.entries(state.aggregates?.[year]?.receitas || {})) {
    const v = Number((arr || [])[month] || 0);
    if (v > 0) recMap[nome] = (recMap[nome] || 0) + v;
  }
  const receitas = Object.entries(recMap).map(([nome, valor]) => ({ nome, valor })).sort((a, b) => b.valor - a.valor);

  const custo = window.custoFixoDetalhe(state.transactions, 3, (state.reserva || {}).base || "todos");
  const membros = [fam.cliente.nome, fam.conjuge?.nome].filter(Boolean).concat((fam.filhos || []).map(f => f.nome)).filter(Boolean);

  function Sec({ title, explain, children }) {
    return (
      <section className="rel-sec">
        <div className="rel-sec-head"><h3>{title}</h3></div>
        {explain && <p className="rel-explain">{explain}</p>}
        {children}
      </section>
    );
  }

  return (
    <div className="page rel-page" data-screen-label="Relatório Budget">
      <div className="page-head no-print">
        <div><h2>💰 Budget da família</h2><span className="page-hint">Orçamento mensal da família — pronto para imprimir/salvar em PDF.</span></div>
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          {flash && <span className="rel-flash">✓ Relatório atualizado</span>}
          <button className="btn-green" onClick={atualizar}>🔄 Atualizar relatório</button>
          <button className="btn-ghost" onClick={() => window.print()}>🖨️ Imprimir / PDF</button>
        </div>
      </div>

      <div className="rel-doc">
        <div className="rel-capa">
          <h1>Budget da família</h1>
          <p className="rel-sub">Orçamento mensal · {mesLabel}</p>
          <p className="rel-stamp">Gerado com os dados de {atualizadoEm.toLocaleDateString("pt-BR")} às {atualizadoEm.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" })} — reflete tudo que foi lançado no app.</p>
          <div className="rel-hr"></div>
          <h4>Família</h4>
          <div className="rel-info-grid">
            <div><span>Cliente</span><strong>{fam.cliente.nome || "—"}</strong></div>
            <div><span>Cônjuge</span><strong>{fam.conjuge?.nome || "—"}</strong></div>
            <div><span>Filhos</span><strong>{(fam.filhos || []).length > 0 ? fam.filhos.map(f => f.nome).filter(Boolean).join(", ") || fam.filhos.length : "—"}</strong></div>
            <div><span>Membros</span><strong>{membros.length || "—"}</strong></div>
          </div>
        </div>

        <Sec title={"Resumo do mês · " + mesLabel}>
          <div className="rel-kpi-row">
            <div className="rel-kpi big"><span>Receita</span><strong>{fmt(receita)}</strong></div>
            <div className="rel-kpi big"><span>Despesas</span><strong>{fmt(despesa)}</strong></div>
            <div className="rel-kpi big"><span>Saldo do mês</span><strong className={saldo < 0 ? "rel-neg" : ""}>{fmt(saldo)}</strong><em>taxa de poupança {receita > 0 ? txPoupanca.toFixed(0) + "%" : "—"}</em></div>
          </div>
          <div className="rel-kpi-row">
            <div className="rel-kpi"><span>Receita em {prevLabel}</span><strong>{fmt(prev.income)}</strong></div>
            <div className="rel-kpi"><span>Despesas em {prevLabel}</span><strong>{fmt(prev.expense)}</strong></div>
            <div className="rel-kpi"><span>Δ despesas vs {prevLabel}</span><strong className={despesa > prev.expense ? "rel-neg" : ""}>{prev.expense > 0 ? (despesa >= prev.expense ? "+" : "") + fmt(despesa - prev.expense) : "—"}</strong></div>
            <div className="rel-kpi"><span>Custo médio mensal (3m)</span><strong>{fmt(custo.media)}</strong></div>
          </div>
        </Sec>

        <Sec title="Plano 70·10·10·10" explain="A receita se divide em: até 70% para o custo de vida, 10% caridade, 10% capital ativo (projetos) e 10% capital passivo (investimentos).">
          <div className="rel-bars">
            {plano.buckets.map(b => (
              <div className="rel-bar-row" key={b.key}>
                <span>{b.icon} {b.label} ({Math.round(b.pct * 100)}%)</span>
                <div className="rel-bar-track">
                  <div style={{ width: Math.min(b.target > 0 ? (b.used / b.target) * 100 : 0, 100) + "%", background: b.over ? "#EA404D" : "#0663AA" }}></div>
                </div>
                <strong className={b.over ? "rel-neg" : ""}>{fmt(b.used)} <em className="rel-de">de {fmt(b.target)}</em></strong>
              </div>
            ))}
          </div>
        </Sec>

        <Sec title="Receitas por fonte">
          {receitas.length > 0 ? (
            <table className="rel-table">
              <thead><tr><th>Fonte</th><th>Valor</th><th>% da receita</th></tr></thead>
              <tbody>
                {receitas.map(r => (
                  <tr key={r.nome}><td>{r.nome}</td><td>{fmt(r.valor)}</td><td>{receita > 0 ? Math.round((r.valor / receita) * 100) : 0}%</td></tr>
                ))}
                <tr><td><strong>Total</strong></td><td><strong>{fmt(receita)}</strong></td><td>100%</td></tr>
              </tbody>
            </table>
          ) : <p className="rel-empty">Nenhuma receita lançada em {mesLabel}.</p>}
        </Sec>

        <Sec title="Gastos por classe" explain="Fixo essencial e Fixo são o piso do orçamento; ✂️ Redutível é onde o corte não afeta o essencial.">
          {totalClasses > 0 ? (
            <table className="rel-table">
              <thead><tr><th>Classe</th><th>Valor</th><th>% do total</th></tr></thead>
              <tbody>
                {classes.map(c => (
                  <tr key={c.id}><td>{c.icon} {c.label}</td><td>{fmt(c.value)}</td><td>{Math.round((c.value / totalClasses) * 100)}%</td></tr>
                ))}
                <tr><td><strong>Total</strong></td><td><strong>{fmt(totalClasses)}</strong></td><td>100%</td></tr>
              </tbody>
            </table>
          ) : <p className="rel-empty">Nenhum lançamento classificado em {mesLabel}.</p>}
        </Sec>

        <Sec title="Despesas por categoria">
          {cats.length > 0 ? (
            <table className="rel-table">
              <thead><tr><th>Categoria</th><th>Valor</th><th>% das despesas</th></tr></thead>
              <tbody>
                {cats.map(c => (
                  <tr key={c.category}><td>{c.category}</td><td>{fmt(c.value)}</td><td>{totalCats > 0 ? Math.round((c.value / totalCats) * 100) : 0}%</td></tr>
                ))}
                <tr><td><strong>Total</strong></td><td><strong>{fmt(totalCats)}</strong></td><td>100%</td></tr>
              </tbody>
            </table>
          ) : <p className="rel-empty">Nenhuma despesa lançada em {mesLabel}.</p>}
        </Sec>

        <Sec title="Aviso Legal">
          <p className="rel-legal">
            Este estudo é dirigido exclusivamente ao destinatário indicado na capa e pode conter informações confidenciais.
            Tem natureza informativa e orientadora, e não deve ser interpretado como aconselhamento jurídico ou financeiro.
          </p>
        </Sec>
      </div>
    </div>
  );
}

Object.assign(window, { RelatorioBudgetPage });