// Objetivos, Reserva de Emergência, Aposentadoria e IRPF
const { useState: useStatePl, useMemo: useMemoPl } = React;

// ---------- OBJETIVOS ----------
function ObjetivosPage({ state, onAsset, onEditAsset, onDeleteAsset }) {
  const objetivos = state.objetivos;
  const totalAlvo = objetivos.reduce((s, o) => s + Number(o.alvo || 0), 0);
  const totalAcum = objetivos.reduce((s, o) => s + Number(o.acumulado || 0), 0);
  return (
    <div className="page" data-screen-label="Objetivos">
      <div className="page-head">
        <div><h2>🎯 Objetivos</h2><span className="page-hint">Metas financeiras da família com progresso e prazo.</span></div>
        <button className="btn-green" onClick={() => onAsset("objetivo")}>+ Novo Objetivo</button>
      </div>
      <div className="div-summary">
        <div className="ds-card"><div className="ds-label">Soma dos alvos</div><Amount value={totalAlvo}/></div>
        <div className="ds-card"><div className="ds-label">Já acumulado</div><Amount value={totalAcum}/></div>
        <div className="ds-card"><div className="ds-label">Falta</div><Amount value={Math.max(0, totalAlvo - totalAcum)}/></div>
        <div className="ds-stats">
          <div className="ds-stat"><span>Objetivos</span><strong>{objetivos.length}</strong></div>
          <div className="ds-stat"><span>Concluídos</span><strong>{objetivos.filter(o => o.acumulado >= o.alvo && o.alvo > 0).length}</strong></div>
        </div>
      </div>
      <div className="obj-grid">
        {objetivos.map(o => {
          const pct = o.alvo > 0 ? Math.min(o.acumulado / o.alvo, 1) : 0;
          const done = pct >= 1;
          const meses = o.prazo ? Math.max(0, Math.round((new Date(o.prazo) - new Date()) / (30.44 * 864e5))) : null;
          const aporteNec = meses > 0 ? Math.max(0, (o.alvo - o.acumulado) / meses) : null;
          return (
            <div className={`card obj-card ${done ? "done" : ""}`} key={o.id}>
              <div className="obj-head">
                <span className="obj-icon">{o.icone || "🎯"}</span>
                <div className="row-actions">
                  <button onClick={() => onEditAsset({ ...o, __kind: "objetivo" })} title="Editar">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M11 4H4v16h16v-7"></path><path d="M18 2l4 4-10 10H8v-4z"></path></svg>
                  </button>
                  <button onClick={() => onDeleteAsset("__objetivos", o.id)} title="Excluir">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M8 6V4a1 1 0 011-1h6a1 1 0 011 1v2M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"></path></svg>
                  </button>
                </div>
              </div>
              <h3>{o.nome}</h3>
              <div className="obj-nums">
                <strong>{window.fmtBRLString(o.acumulado)}</strong>
                <span>de {window.fmtBRLString(o.alvo)}</span>
              </div>
              <div className="obj-bar"><div style={{ width: pct * 100 + "%" }}></div></div>
              <div className="obj-foot">
                <span>{Math.round(pct * 100)}%</span>
                {o.prazo && <span>até {o.prazo.split("-").reverse().join("/")}</span>}
                {aporteNec != null && !done && <span className="obj-aporte">≈ {window.fmtCompact(aporteNec)}/mês</span>}
                {done && <span className="obj-done">✅ concluído</span>}
              </div>
            </div>
          );
        })}
        {objetivos.length === 0 && <div className="card empty-card">Nenhum objetivo. Adicione o primeiro!</div>}
      </div>
    </div>
  );
}

// ---------- RESERVA DE EMERGÊNCIA ----------
function ReservaPage({ state, onUpdateReserva, onAsset, onEditAsset }) {
  const base = state.reserva.base || "todos";
  const custo = window.custoFixoDetalhe(state.transactions, 3, base);
  const custoMensal = custo.media;
  const mesRotulo = k => window.MESES[Number(k.slice(5, 7)) - 1] + "/" + k.slice(2, 4);
  const mesesAlvo = state.reserva.mesesAlvo || 6;
  const alvo = custoMensal * mesesAlvo;
  const saldosReserva = state.patrimonio.saldos.filter(s => s.reserva);
  const saldoAuto = saldosReserva.reduce((s, x) => s + Number(x.valor || 0), 0);
  const saldo = state.reserva.saldoManual != null ? state.reserva.saldoManual : saldoAuto;
  const pct = alvo > 0 ? Math.min(saldo / alvo, 1) : 0;
  const mesesCobertos = custoMensal > 0 ? saldo / custoMensal : 0;

  return (
    <div className="page" data-screen-label="Reserva de Emergência">
      <div className="page-head">
        <div><h2>🚨 Reserva de Emergência</h2><span className="page-hint">Colchão de segurança em ativos líquidos, dimensionado pelo seu custo fixo.</span></div>
        <button className="btn-green" onClick={() => onAsset("saldo")}>+ Adicionar ativo líquido</button>
      </div>

      <div className="div-summary">
        <div className="ds-card"><div className="ds-label">Reserva atual</div><Amount value={saldo}/></div>
        <div className="ds-card"><div className="ds-label">Alvo ({mesesAlvo} meses)</div><Amount value={alvo}/></div>
        <div className="ds-card"><div className="ds-label">Custo fixo mensal (média)</div><Amount value={custoMensal}/></div>
        <div className="ds-stats">
          <div className="ds-stat"><span>Meses cobertos</span><strong>{mesesCobertos.toFixed(1)}</strong></div>
          <div className="ds-stat"><span>Progresso</span><strong>{Math.round(pct * 100)}%</strong></div>
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3>Progresso da reserva</h3></div>
        <div className="res-bar">
          <div className="res-fill" style={{ width: pct * 100 + "%" }}></div>
          {[...Array(mesesAlvo)].map((_, i) => (
            <span className="res-tick" key={i} style={{ left: ((i + 1) / mesesAlvo) * 100 + "%" }}></span>
          ))}
        </div>
        <div className="res-legend">
          <span>{mesesCobertos.toFixed(1)} de {mesesAlvo} meses de custo fixo</span>
          {pct < 1 ? <span>Faltam <strong>{window.fmtBRLString(Math.max(0, alvo - saldo))}</strong></span> : <span className="obj-done">✅ Reserva completa</span>}
        </div>
        <div className="form-row" style={{ marginTop: 16, maxWidth: 560 }}>
          <div className="field">
            <label>Meses de custo fixo (alvo)</label>
            <select value={mesesAlvo} onChange={e => onUpdateReserva({ ...state.reserva, mesesAlvo: Number(e.target.value) })}>
              {[3, 6, 9, 12, 18, 24].map(m => <option key={m} value={m}>{m} meses</option>)}
            </select>
          </div>
          <div className="field">
            <label>Base do custo mensal</label>
            <select value={base} onChange={e => onUpdateReserva({ ...state.reserva, base: e.target.value })}>
              <option value="todos">Todos os gastos do mês</option>
              <option value="fixos">Só custos fixos (não redutíveis)</option>
            </select>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <h3>Custo fixo mensal</h3>
          <span className="page-hint">Média {base === "todos" ? "de todos os gastos lançados" : "dos lançamentos não redutíveis"} {custo.meses.length > 0 ? `· ${custo.meses.map(m => mesRotulo(m.key)).join(", ")}` : ""}</span>
        </div>
        {custo.meses.length === 0 ? (
          <div className="empty-tx">Nenhum gasto lançado ainda. Classifique os lançamentos no Checklist para dimensionar a reserva.</div>
        ) : (
          <table className="analysis-table">
            <thead><tr><th>Classe</th><th>Média mensal</th></tr></thead>
            <tbody>
              {custo.porClasse.map(c => (
                <tr key={c.id}><td>{c.icon} {c.label}</td><td className="num">{window.fmtBRLString(c.valor)}</td></tr>
              ))}
              <tr className="total-row"><td><strong>Total</strong></td><td className="num"><strong>{window.fmtBRLString(custoMensal)}</strong></td></tr>
            </tbody>
          </table>
        )}
      </div>

      <div className="card">
        <div className="card-head"><h3>Ativos que compõem a reserva</h3></div>
        <AssetTable
          cols={["Nome", "Classe", "Instituição", "Valor"]}
          rows={saldosReserva.map(s => ({ id: s.id, raw: { ...s, __kind: "saldo" }, cells: [
            s.nome, s.classe, s.instituicao || "—", <strong>{window.fmtBRLString(s.valor)}</strong>,
          ]}))}
          onEdit={onEditAsset} onDelete={() => {}}
          empty='Nenhum ativo marcado como reserva. Edite um saldo e marque "Faz parte da reserva de emergência".'/>
      </div>
    </div>
  );
}

// ---------- APOSENTADORIA ----------
function AposentadoriaPage({ state, onUpdateAposentadoria }) {
  const cfg = state.aposentadoria;
  const tot = window.patrimonioTotais(state.patrimonio, state.dividas);
  const calc = window.calcAposentadoria(cfg, tot.financeiro);
  const previdencias = state.patrimonio.saldos.filter(s => s.classe === "Previdência");
  const set = (k, v) => onUpdateAposentadoria({ ...cfg, [k]: Number(v) || 0 });

  return (
    <div className="page" data-screen-label="Aposentadoria">
      <div className="page-head">
        <div><h2>🌴 Aposentadoria</h2><span className="page-hint">Independência financeira: capital necessário para viver de renda.</span></div>
      </div>

      <div className="div-summary">
        <div className="ds-card"><div className="ds-label">Capital necessário</div><Amount value={calc.alvo}/><div className="ds-delta"><span className="ds-prev">renda de {window.fmtBRLString(cfg.rendaMensalDesejada)}/mês a {cfg.taxaRealAA}% a.a. real</span></div></div>
        <div className="ds-card"><div className="ds-label">Patrimônio financeiro hoje</div><Amount value={tot.financeiro}/><div className="ds-delta"><span className="ds-prev">{Math.round(calc.pct * 100)}% do alvo</span></div></div>
        <div className="ds-card"><div className="ds-label">Projeção aos {cfg.idadeAlvo} anos</div><Amount value={calc.projecao}/><div className="ds-delta"><span className="ds-prev">com aportes de {window.fmtBRLString(cfg.aporteMensal)}/mês</span></div></div>
        <div className="ds-stats">
          <div className="ds-stat"><span>Anos até lá</span><strong>{calc.anos}</strong></div>
          <div className="ds-stat"><span>Aporte necessário</span><strong>{window.fmtCompact(calc.aporteNecessario)}/mês</strong></div>
        </div>
      </div>

      <div className="row row-2">
        <div className="card">
          <div className="card-head"><h3>Premissas</h3></div>
          <div className="form-row">
            <div className="field"><label>Idade atual</label><input type="number" value={cfg.idadeAtual} onChange={e => set("idadeAtual", e.target.value)}/></div>
            <div className="field"><label>Idade alvo</label><input type="number" value={cfg.idadeAlvo} onChange={e => set("idadeAlvo", e.target.value)}/></div>
          </div>
          <div className="form-row">
            <div className="field"><label>Renda mensal desejada (R$)</label><input type="number" value={cfg.rendaMensalDesejada} onChange={e => set("rendaMensalDesejada", e.target.value)}/></div>
            <div className="field"><label>Taxa real (% a.a.)</label><input type="number" step="0.5" value={cfg.taxaRealAA} onChange={e => set("taxaRealAA", e.target.value)}/></div>
          </div>
          <div className="field" style={{ maxWidth: 260 }}><label>Aporte mensal atual (R$)</label><input type="number" value={cfg.aporteMensal} onChange={e => set("aporteMensal", e.target.value)}/></div>
        </div>
        <div className="card">
          <div className="card-head"><h3>Progresso rumo ao alvo</h3></div>
          <div className="res-bar"><div className="res-fill" style={{ width: calc.pct * 100 + "%" }}></div></div>
          <div className="res-legend">
            <span>{window.fmtCompact(tot.financeiro)} de {window.fmtCompact(calc.alvo)}</span>
            <span>{Math.round(calc.pct * 100)}%</span>
          </div>
          <div className="suc-lines" style={{ marginTop: 16 }}>
            <div><span>Projeção com aportes atuais</span><strong>{window.fmtCompact(calc.projecao)}</strong></div>
            <div><span>{calc.projecao >= calc.alvo ? "Excedente projetado" : "Déficit projetado"}</span><strong className={calc.projecao >= calc.alvo ? "" : "neg"}>{window.fmtCompact(Math.abs(calc.projecao - calc.alvo))}</strong></div>
            <div className="suc-total"><span>Aporte p/ fechar a conta</span><strong>{window.fmtBRLString(calc.aporteNecessario)}/mês</strong></div>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3>Previdências (livres de inventário)</h3></div>
        <AssetTable
          cols={["Nome", "Instituição", "Titularidade", "Valor"]}
          rows={previdencias.map(s => ({ id: s.id, raw: { ...s, __kind: "saldo" }, cells: [
            s.nome, s.instituicao || "—", <TitBadge t={s.titularidade}/>, <strong>{window.fmtBRLString(s.valor)}</strong>,
          ]}))}
          onEdit={() => {}} onDelete={() => {}}
          empty='Nenhuma previdência. Cadastre um saldo com classe "Previdência" no Patrimônio Líquido.'/>
      </div>
    </div>
  );
}

// ---------- IRPF ----------
function IrpfPage({ state, year, onToggleEtapa }) {
  const revisado = !!(state.etapas && state.etapas.irpf);
  const p = state.patrimonio;
  const tot = window.patrimonioTotais(p, state.dividas);
  const agg = state.aggregates[year] || state.aggregates[Object.keys(state.aggregates).sort().pop()];
  const rendimentos = agg ? Object.entries(agg.receitas).map(([fonte, arr]) => ({ fonte, total: arr.reduce((s, v) => s + Number(v || 0), 0) })).filter(r => r.total > 0) : [];
  const totalRend = rendimentos.reduce((s, r) => s + r.total, 0);
  const bens = [
    ...p.imoveis.map(i => ({ grupo: "01 — Bens imóveis", desc: i.nome, valor: i.valor })),
    ...p.veiculos.map(i => ({ grupo: "02 — Bens móveis", desc: i.nome, valor: i.valor })),
    ...p.participacoes.map(i => ({ grupo: "03 — Participações societárias", desc: i.nome, valor: i.valorPatrimonial })),
    ...p.saldos.map(i => ({ grupo: i.classe === "Conta corrente" ? "06 — Depósitos à vista" : "07 — Fundos e aplicações", desc: i.nome, valor: i.valor })),
    ...p.outros.map(i => ({ grupo: "99 — Outros bens", desc: i.nome, valor: i.valor })),
  ];
  const previdenciaPGBL = p.saldos.filter(s => s.classe === "Previdência").reduce((s, x) => s + Number(x.valor || 0), 0);
  const limitePGBL = totalRend * 0.12;

  return (
    <div className="page" data-screen-label="IRPF">
      <div className="page-head">
        <div><h2>🧾 IRPF</h2><span className="page-hint">Prévia da declaração gerada automaticamente dos seus dados: rendimentos, bens e direitos, dívidas e ônus. Ano-base {year}.</span></div>
        <button className={revisado ? "btn-ghost" : "btn-green"} onClick={() => onToggleEtapa && onToggleEtapa("irpf", !revisado)}>
          {revisado ? "✓ Revisado — desmarcar" : "✓ Marcar IRPF como revisado"}
        </button>
      </div>

      <div className="div-summary">
        <div className="ds-card"><div className="ds-label">Rendimentos no ano</div><Amount value={totalRend}/></div>
        <div className="ds-card"><div className="ds-label">Bens e direitos</div><Amount value={tot.total}/></div>
        <div className="ds-card"><div className="ds-label">Dívidas e ônus reais</div><Amount value={tot.totalDividas}/></div>
        <div className="ds-stats">
          <div className="ds-stat"><span>Itens de bens</span><strong>{bens.length}</strong></div>
          <div className="ds-stat"><span>Limite dedução PGBL (12%)</span><strong>{window.fmtCompact(limitePGBL)}</strong></div>
        </div>
      </div>

      <div className="row row-2">
        <div className="card">
          <div className="card-head"><h3>Rendimentos por fonte — {year}</h3></div>
          <table className="div-table">
            <thead><tr><th>Fonte</th><th>Total no ano</th></tr></thead>
            <tbody>
              {rendimentos.map(r => (
                <tr key={r.fonte}><td>{r.fonte}</td><td><strong>{window.fmtBRLString(r.total)}</strong></td></tr>
              ))}
              {rendimentos.length === 0 && <tr><td colSpan="2" className="empty-tx">Sem rendimentos lançados em {year}.</td></tr>}
              {rendimentos.length > 0 && <tr className="total-row"><td><strong>Total</strong></td><td><strong>{window.fmtBRLString(totalRend)}</strong></td></tr>}
            </tbody>
          </table>
        </div>
        <div className="card">
          <div className="card-head"><h3>Dicas para a declaração</h3></div>
          <ul className="irpf-tips">
            <li><strong>PGBL:</strong> você tem {window.fmtBRLString(previdenciaPGBL)} em previdência. Aportes em PGBL são dedutíveis até 12% da renda tributável ({window.fmtBRLString(limitePGBL)} em {year}).</li>
            <li><strong>Bens comuns:</strong> no regime de {state.familia.cliente.regimeBens.toLowerCase()}, bens comuns podem ser declarados integralmente por um dos cônjuges.</li>
            <li><strong>Dívidas &gt; R$ 5.000:</strong> devem ser informadas na ficha "Dívidas e Ônus Reais".</li>
            <li><strong>Aluguéis recebidos:</strong> {p.imoveis.some(i => i.aluguel > 0) ? "você tem imóveis alugados — recolha o carnê-leão mensalmente." : "nenhum imóvel alugado cadastrado."}</li>
          </ul>
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3>Bens e direitos (rascunho da ficha)</h3></div>
        <table className="div-table">
          <thead><tr><th>Grupo</th><th>Discriminação</th><th>Situação atual</th></tr></thead>
          <tbody>
            {bens.map((b, i) => (
              <tr key={i}><td>{b.grupo}</td><td>{b.desc}</td><td><strong>{window.fmtBRLString(b.valor)}</strong></td></tr>
            ))}
            {bens.length === 0 && <tr><td colSpan="3" className="empty-tx">Cadastre bens no Patrimônio Líquido.</td></tr>}
            {bens.length > 0 && <tr className="total-row"><td colSpan="2"><strong>Total</strong></td><td><strong>{window.fmtBRLString(tot.total)}</strong></td></tr>}
          </tbody>
        </table>
      </div>

      <div className="card">
        <div className="card-head"><h3>Dívidas e ônus reais</h3></div>
        <table className="div-table">
          <thead><tr><th>Descrição</th><th>Credor</th><th>Saldo devedor</th></tr></thead>
          <tbody>
            {state.dividas.map(d => (
              <tr key={d.id}><td>{d.descricao}</td><td>{d.credor || "—"}</td><td><strong>{window.fmtBRLString(d.saldoDevedor)}</strong></td></tr>
            ))}
            {state.dividas.length === 0 && <tr><td colSpan="3" className="empty-tx">Nenhuma dívida.</td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  );
}

Object.assign(window, { ObjetivosPage, ReservaPage, AposentadoriaPage, IrpfPage });