// Patrimônio Líquido, Imóveis e Automóveis
const { useState: useStateP, useMemo: useMemoP } = React;

// ---------- Pequenos gráficos ----------
function HBar({ items, total }) {
  const max = Math.max(...items.map(i => i.valor), 1);
  return (
    <div className="hbar">
      {items.map(i => (
        <div className="hbar-row" key={i.label}>
          <span className="hbar-label">{i.icon} {i.label}</span>
          <div className="hbar-track"><div style={{ width: (i.valor / max) * 100 + "%", background: i.color }}></div></div>
          <span className="hbar-val">{window.fmtCompact(i.valor)}</span>
          <span className="hbar-pct">{total > 0 ? Math.round((i.valor / total) * 100) : 0}%</span>
        </div>
      ))}
    </div>
  );
}

function PieLegend({ items, colors }) {
  const total = items.reduce((s, i) => s + i.valor, 0);
  let acc = 0;
  const grads = items.map((i, idx) => {
    const from = (acc / total) * 360; acc += i.valor;
    const to = (acc / total) * 360;
    return `${colors[idx % colors.length]} ${from}deg ${to}deg`;
  });
  return (
    <div className="pie-wrap">
      <div className="pie" style={{ background: total > 0 ? `conic-gradient(${grads.join(",")})` : "#e5e7eb" }}></div>
      <div className="pie-legend">
        {items.map((i, idx) => (
          <div key={i.classe}>
            <i style={{ background: colors[idx % colors.length] }}></i>
            <span>{i.classe}</span>
            <strong>{window.fmtBRLString(i.valor)}</strong>
          </div>
        ))}
        {items.length === 0 && <div className="empty-tx">Nenhum saldo cadastrado.</div>}
      </div>
    </div>
  );
}

const PIE_COLORS = ["#311131", "#0663AA", "#7fb8e0", "#EA404D", "#EA404D", "#bcdcf3", "#0E92D2"];

// ---------- Campos de formulário (module scope: não remonta a cada tecla) ----------
function Field({ label, k, type = "text", _f, _s, ...rest }) {
  const money = type === "money";
  return (
    <div className="field">
      <label>{label}</label>
      <input type={money ? "text" : type} inputMode={money ? "decimal" : undefined} value={_f[k] ?? ""} onChange={e => _s(k, e.target.value)} {...rest}/>
    </div>
  );
}
function TitField({ _f, _s }) {
  return (
    <div className="field">
      <label>Titularidade</label>
      <select value={_f.titularidade} onChange={e => _s("titularidade", e.target.value)}>
        <option>Comum</option><option>Cliente</option><option>Cônjuge</option>
      </select>
    </div>
  );
}

// ---------- Modal genérico de ativo ----------
function AssetModal({ kind, edit, onClose, onSave }) {
  const defaults = {
    imovel:  { nome: "", tipo: "Apartamento", endereco: "", valor: "", titularidade: "Comum", restricao: false, segurado: false, aluguel: "" },
    veiculo: { nome: "", marca: "", ano: "", valor: "", titularidade: "Comum", restricao: false, segurado: false },
    saldo:   { nome: "", classe: "Conta corrente", instituicao: "", valor: "", moeda: "BRL", titularidade: "Comum", reserva: false },
    participacao: { nome: "", cnpj: "", pct: "", valorPatrimonial: "", capitalSocial: "", titularidade: "Cliente" },
    outro:   { nome: "", valor: "", titularidade: "Comum" },
    seguro:  { tipo: "Vida", nome: "", seguradora: "", capital: "", premioMensal: "", vigencia: "", segurado: "Cliente" },
    objetivo:{ nome: "", icone: "🎯", alvo: "", acumulado: "", prazo: "" },
  };
  const [form, setForm] = useStateP({ ...defaults[kind], ...(edit || {}) });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const titles = { imovel: "Imóvel", veiculo: "Automóvel", saldo: "Saldo / Investimento", participacao: "Participação societária", outro: "Outro bem", seguro: "Seguro", objetivo: "Objetivo" };

  function submit(e) {
    e.preventDefault();
    const num = k => { const n = window.parseValor(form[k]); return isNaN(n) ? 0 : n; };
    const out = { ...form, id: edit?.id || window.uid() };
    for (const k of ["valor", "aluguel", "pct", "valorPatrimonial", "capitalSocial", "capital", "premioMensal", "alvo", "acumulado", "ano"]) {
      if (k in out) out[k] = num(k);
    }
    onSave(out);
    onClose();
  }


  return (
    <Modal title={(edit ? "Editar " : "Novo ") + titles[kind]} onClose={onClose}>
      <form className="form" onSubmit={submit}>
        {kind === "imovel" && (<>
          <Field _f={form} _s={set} label="Nome" k="nome" required autoFocus/>
          <div className="form-row">
            <div className="field"><label>Tipo</label>
              <select value={form.tipo} onChange={e => set("tipo", e.target.value)}>
                <option>Apartamento</option><option>Casa</option><option>Terreno</option><option>Sala comercial</option><option>Outro</option>
              </select>
            </div>
            <Field _f={form} _s={set} label="Localização" k="endereco" placeholder="Cidade/UF"/>
          </div>
          <div className="form-row"><Field _f={form} _s={set} label="Valor (R$)" k="valor" type="money" required/><TitField _f={form} _s={set}/></div>
          <div className="form-row">
            <Field _f={form} _s={set} label="Aluguel mensal (R$, se alugado)" k="aluguel" type="money"/>
            <div className="field check" style={{ alignSelf: "end" }}>
              <label><input type="checkbox" checked={!!form.restricao} onChange={e => set("restricao", e.target.checked)}/><span>Com restrição/ônus</span></label>
              <label><input type="checkbox" checked={!!form.segurado} onChange={e => set("segurado", e.target.checked)}/><span>Segurado</span></label>
            </div>
          </div>
        </>)}
        {kind === "veiculo" && (<>
          <Field _f={form} _s={set} label="Nome / modelo" k="nome" required autoFocus/>
          <div className="form-row"><Field _f={form} _s={set} label="Marca" k="marca"/><Field _f={form} _s={set} label="Ano" k="ano" type="number"/></div>
          <div className="form-row"><Field _f={form} _s={set} label="Valor (R$)" k="valor" type="money" required/><TitField _f={form} _s={set}/></div>
          <div className="field check">
            <label><input type="checkbox" checked={!!form.restricao} onChange={e => set("restricao", e.target.checked)}/><span>Com restrição (alienação/financiamento)</span></label>
            <label><input type="checkbox" checked={!!form.segurado} onChange={e => set("segurado", e.target.checked)}/><span>Segurado</span></label>
          </div>
        </>)}
        {kind === "saldo" && (<>
          <Field _f={form} _s={set} label="Nome" k="nome" required autoFocus/>
          <div className="form-row">
            <div className="field"><label>Classe</label>
              <select value={form.classe} onChange={e => { const v = e.target.value; setForm(f => ({ ...f, classe: v, moeda: v === "Offshore" ? "USD" : f.moeda })); }}>
                <option>Conta corrente</option><option>Renda fixa</option><option>Fundos de investimentos</option><option>Ações/ETF</option><option>Previdência</option><option>Criptoativos</option><option>Offshore</option><option>Outros</option>
              </select>
            </div>
            <Field _f={form} _s={set} label="Instituição" k="instituicao"/>
          </div>
          <div className="form-row">
            <Field _f={form} _s={set} label={form.moeda === "USD" ? "Valor (US$)" : "Valor (R$)"} k="valor" type="money" required/>
            <div className="field"><label>Moeda</label>
              <select value={form.moeda || "BRL"} onChange={e => set("moeda", e.target.value)}>
                <option value="BRL">Real (R$)</option><option value="USD">Dólar (US$)</option>
              </select>
            </div>
            <TitField _f={form} _s={set}/>
          </div>
          {form.moeda === "USD" && (
            <p className="rel-note">Convertido no compilado pelo dólar do dia (US$ 1 = {window.fmtBRLString(window.FX.usd)}{window.FX.data ? " · " + window.FX.data.split("-").reverse().join("/") : ""}): ≈ {window.fmtBRLString((window.parseValor(form.valor) || 0) * window.FX.usd)}</p>
          )}
          <div className="field check">
            <label><input type="checkbox" checked={!!form.reserva} onChange={e => set("reserva", e.target.checked)}/><span>Faz parte da reserva de emergência</span></label>
          </div>
        </>)}
        {kind === "participacao" && (<>
          <Field _f={form} _s={set} label="Nome da empresa / quotas" k="nome" required autoFocus/>
          <div className="form-row"><Field _f={form} _s={set} label="CNPJ" k="cnpj"/><Field _f={form} _s={set} label="Participação (%)" k="pct" type="money"/></div>
          <div className="form-row"><Field _f={form} _s={set} label="Valor patrimonial (R$)" k="valorPatrimonial" type="money" required/><Field _f={form} _s={set} label="Capital social (R$)" k="capitalSocial" type="money"/></div>
          <TitField _f={form} _s={set}/>
        </>)}
        {kind === "outro" && (<>
          <Field _f={form} _s={set} label="Descrição" k="nome" required autoFocus/>
          <div className="form-row"><Field _f={form} _s={set} label="Valor (R$)" k="valor" type="money" required/><TitField _f={form} _s={set}/></div>
        </>)}
        {kind === "seguro" && (<>
          <div className="form-row">
            <div className="field"><label>Tipo</label>
              <select value={form.tipo} onChange={e => set("tipo", e.target.value)}>
                <option>Vida</option><option>Automóvel</option><option>Residencial</option><option>Saúde</option><option>Invalidez</option><option>Outro</option>
              </select>
            </div>
            <Field _f={form} _s={set} label="Nome da apólice" k="nome" required autoFocus/>
          </div>
          <div className="form-row"><Field _f={form} _s={set} label="Seguradora" k="seguradora"/><Field _f={form} _s={set} label="Capital segurado (R$)" k="capital" type="money" required/></div>
          <div className="form-row"><Field _f={form} _s={set} label="Prêmio mensal (R$)" k="premioMensal" type="money"/><Field _f={form} _s={set} label="Vigência até" k="vigencia" type="date"/></div>
          <div className="field"><label>Segurado</label>
            <select value={form.segurado} onChange={e => set("segurado", e.target.value)}>
              <option>Cliente</option><option>Cônjuge</option><option>Comum</option>
            </select>
          </div>
        </>)}
        {kind === "objetivo" && (<>
          <div className="form-row"><Field _f={form} _s={set} label="Ícone (emoji)" k="icone"/><Field _f={form} _s={set} label="Nome" k="nome" required autoFocus/></div>
          <div className="form-row"><Field _f={form} _s={set} label="Valor alvo (R$)" k="alvo" type="money" required/><Field _f={form} _s={set} label="Já acumulado (R$)" k="acumulado" type="money"/></div>
          <Field _f={form} _s={set} label="Prazo" k="prazo" type="date"/>
        </>)}
        <div className="form-actions">
          <button type="button" className="btn-ghost" onClick={onClose}>Cancelar</button>
          <button type="submit" className="btn-green">Salvar</button>
        </div>
      </form>
    </Modal>
  );
}

// ---------- Tabela de ativos genérica ----------
function AssetTable({ cols, rows, onEdit, onDelete, empty }) {
  return (
    <table className="div-table">
      <thead><tr>{cols.map(c => <th key={c}>{c}</th>)}<th></th></tr></thead>
      <tbody>
        {rows.map(r => (
          <tr key={r.id}>
            {r.cells.map((c, i) => <td key={i}>{c}</td>)}
            <td>
              <div className="row-actions">
                <button onClick={() => onEdit(r.raw)} 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={() => onDelete(r.raw.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>
            </td>
          </tr>
        ))}
        {rows.length === 0 && <tr><td colSpan={cols.length + 1} className="empty-tx">{empty}</td></tr>}
      </tbody>
    </table>
  );
}

function TitBadge({ t }) { return <span className={`badge badge-${t === "Comum" ? "open" : "muted"}`}>{t}</span>; }

// ---------- PATRIMÔNIO LÍQUIDO ----------
function PatrimonioPage({ state, onAsset, onEditAsset, onDeleteAsset, onGoTo }) {
  const p = state.patrimonio;
  const tot = window.patrimonioTotais(p, state.dividas);
  const saldosClasse = window.saldosPorClasse(p.saldos);

  const catItems = [
    { label: "Imóveis", icon: "🏠", valor: tot.imoveis, color: "#311131" },
    { label: "Veículos", icon: "🚗", valor: tot.veiculos, color: "#0663AA" },
    { label: "Participações societárias", icon: "🏢", valor: tot.participacoes, color: "#7fb8e0" },
    { label: "Saldos e Investimentos", icon: "💰", valor: tot.financeiro, color: "#EA404D" },
    { label: "Outros bens", icon: "📦", valor: tot.outros, color: "#EA404D" },
  ].filter(i => i.valor > 0);

  const counts = [
    { label: "Imóveis", n: p.imoveis.length, v: tot.imoveis, go: "imoveis" },
    { label: "Veículos", n: p.veiculos.length, v: tot.veiculos, go: "automoveis" },
    { label: "Participações", n: p.participacoes.length, v: tot.participacoes, kind: "participacao" },
    { label: "Outros bens", n: p.outros.length, v: tot.outros, kind: "outro" },
  ];

  return (
    <div className="page" data-screen-label="Patrimônio Líquido">
      <div className="page-head">
        <div>
          <h2>🏛️ Patrimônio Líquido</h2>
          <span className="page-hint">Bens, investimentos e dívidas do casal.</span>
        </div>
        <button className="btn-green" onClick={() => onAsset("saldo")}>+ Saldo / Investimento</button>
      </div>

      <div className="div-summary">
        <div className="ds-card">
          <div className="ds-label">Patrimônio total</div>
          <Amount value={tot.total}/>
          <div className="ds-delta"><span className="ds-prev">Comum {window.fmtCompact(tot.porTitularidade.Comum)} · Cliente {window.fmtCompact(tot.porTitularidade.Cliente)} · Cônjuge {window.fmtCompact(tot.porTitularidade["Cônjuge"])}</span></div>
        </div>
        <div className="ds-card">
          <div className="ds-label">Dívidas</div>
          <Amount value={-tot.totalDividas}/>
          <div className="ds-delta"><span className="ds-prev">gerencie em Orçamento → Dívidas</span></div>
        </div>
        <div className="ds-card">
          <div className="ds-label">Patrimônio líquido</div>
          <Amount value={tot.liquido}/>
        </div>
        <div className="ds-stats">
          <div className="ds-stat"><span>Não financeiro</span><strong>{window.fmtCompact(tot.naoFinanceiro)}</strong></div>
          <div className="ds-stat"><span>Financeiro</span><strong>{window.fmtCompact(tot.financeiro)}</strong></div>
          <div className="ds-stat"><span>Livre de inventário</span><strong>{window.fmtCompact(tot.previdencia)}</strong></div>
        </div>
      </div>

      <div className="row row-2">
        <div className="card">
          <div className="card-head"><h3>Composição por categoria</h3></div>
          {catItems.length > 0 ? <HBar items={catItems} total={tot.total}/> : <div className="empty-tx">Cadastre bens para ver a composição.</div>}
        </div>
        <div className="card">
          <div className="card-head"><h3>Saldos e Investimentos · {window.fmtCompact(tot.financeiro)}</h3></div>
          <PieLegend items={saldosClasse} colors={PIE_COLORS}/>
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3>Inventário de bens</h3></div>
        <div className="count-cards">
          {counts.map(c => (
            <button key={c.label} className="count-card" onClick={() => c.go ? onGoTo(c.go) : onAsset(c.kind)}>
              <span className="cc-label">{c.label}</span>
              <span className="cc-n">{c.n}</span>
              <span className="cc-v">{c.v > 0 ? window.fmtBRLString(c.v) : "—"}</span>
            </button>
          ))}
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <h3>Saldos e Investimentos</h3>
          <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
            {tot.offshore > 0 && <span className="page-hint">Offshore {window.fmtCompact(tot.offshore)} · US$ 1 = {window.fmtBRLString(window.FX.usd)}{window.FX.data ? " (" + window.FX.data.split("-").reverse().join("/") + ")" : ""}</span>}
            <button className="btn-ghost" onClick={() => onAsset("saldo")}>+ Adicionar</button>
          </div>
        </div>
        <AssetTable
          cols={["Nome", "Classe", "Instituição", "Titularidade", "Valor"]}
          rows={p.saldos.map(s => ({ id: s.id, raw: { ...s, __kind: "saldo" }, cells: [
            <span>{s.nome}{s.reserva ? " 🚨" : ""}</span>, s.classe, s.instituicao || "—", <TitBadge t={s.titularidade}/>,
            <strong>{window.fmtBRLString(window.valorBRL(s))}{s.moeda === "USD" ? <em className="rel-de"> · US$ {Number(s.valor||0).toLocaleString("pt-BR")}</em> : null}</strong>,
          ]}))}
          onEdit={onEditAsset} onDelete={id => onDeleteAsset("saldos", id)}
          empty="Nenhum saldo cadastrado."/>
      </div>

      <div className="card">
        <div className="card-head">
          <h3>Participações societárias</h3>
          <button className="btn-ghost" onClick={() => onAsset("participacao")}>+ Adicionar</button>
        </div>
        <AssetTable
          cols={["Empresa", "CNPJ", "% Participação", "Capital social", "Valor patrimonial"]}
          rows={p.participacoes.map(s => ({ id: s.id, raw: { ...s, __kind: "participacao" }, cells: [
            s.nome, s.cnpj || "—", (s.pct || 0) + "%", window.fmtBRLString(s.capitalSocial), <strong>{window.fmtBRLString(s.valorPatrimonial)}</strong>,
          ]}))}
          onEdit={onEditAsset} onDelete={id => onDeleteAsset("participacoes", id)}
          empty="Nenhuma participação cadastrada."/>
      </div>

      <div className="card">
        <div className="card-head">
          <h3>Outros bens</h3>
          <button className="btn-ghost" onClick={() => onAsset("outro")}>+ Adicionar</button>
        </div>
        <AssetTable
          cols={["Descrição", "Titularidade", "Valor"]}
          rows={p.outros.map(s => ({ id: s.id, raw: { ...s, __kind: "outro" }, cells: [
            s.nome, <TitBadge t={s.titularidade}/>, <strong>{window.fmtBRLString(s.valor)}</strong>,
          ]}))}
          onEdit={onEditAsset} onDelete={id => onDeleteAsset("outros", id)}
          empty="Nenhum outro bem."/>
      </div>
    </div>
  );
}

// ---------- IMÓVEIS ----------
function ImoveisPage({ state, onAsset, onEditAsset, onDeleteAsset }) {
  const imoveis = state.patrimonio.imoveis;
  const total = imoveis.reduce((s, i) => s + Number(i.valor || 0), 0);
  const alugueis = imoveis.reduce((s, i) => s + Number(i.aluguel || 0), 0);
  const segurados = imoveis.filter(i => i.segurado).length;
  const restritos = imoveis.filter(i => i.restricao).length;
  return (
    <div className="page" data-screen-label="Imóveis">
      <div className="page-head">
        <div><h2>🏠 Imóveis</h2><span className="page-hint">Patrimônio imobiliário e renda de aluguéis.</span></div>
        <button className="btn-green" onClick={() => onAsset("imovel")}>+ Novo Imóvel</button>
      </div>
      <div className="div-summary">
        <div className="ds-card"><div className="ds-label">Valor total</div><Amount value={total}/></div>
        <div className="ds-card"><div className="ds-label">Renda de aluguéis / mês</div><Amount value={alugueis}/></div>
        <div className="ds-card"><div className="ds-label">Imóveis</div><Amount value={imoveis.length}/></div>
        <div className="ds-stats">
          <div className="ds-stat"><span>Segurados</span><strong>{segurados}/{imoveis.length}</strong></div>
          <div className="ds-stat"><span>Com restrição</span><strong>{restritos}</strong></div>
        </div>
      </div>
      <div className="card">
        <AssetTable
          cols={["Imóvel", "Tipo", "Localização", "Titularidade", "Aluguel", "Seguro", "Valor"]}
          rows={imoveis.map(i => ({ id: i.id, raw: { ...i, __kind: "imovel" }, cells: [
            <span>{i.nome}{i.restricao ? " ⚠️" : ""}</span>, i.tipo, i.endereco || "—", <TitBadge t={i.titularidade}/>,
            i.aluguel > 0 ? window.fmtBRLString(i.aluguel) : "—",
            i.segurado ? <span className="badge badge-done">Segurado</span> : <span className="badge badge-muted">Sem seguro</span>,
            <strong>{window.fmtBRLString(i.valor)}</strong>,
          ]}))}
          onEdit={onEditAsset} onDelete={id => onDeleteAsset("imoveis", id)}
          empty="Nenhum imóvel cadastrado."/>
      </div>
    </div>
  );
}

// ---------- AUTOMÓVEIS ----------
function AutomoveisPage({ state, onAsset, onEditAsset, onDeleteAsset }) {
  const veiculos = state.patrimonio.veiculos;
  const total = veiculos.reduce((s, i) => s + Number(i.valor || 0), 0);
  const segurados = veiculos.filter(i => i.segurado).length;
  const segurosAuto = state.seguros.filter(s => s.tipo === "Automóvel");
  const premioMensal = segurosAuto.reduce((s, x) => s + Number(x.premioMensal || 0), 0);
  return (
    <div className="page" data-screen-label="Automóveis">
      <div className="page-head">
        <div><h2>🚗 Automóveis</h2><span className="page-hint">Frota da família, seguros e restrições.</span></div>
        <button className="btn-green" onClick={() => onAsset("veiculo")}>+ Novo Automóvel</button>
      </div>
      <div className="div-summary">
        <div className="ds-card"><div className="ds-label">Valor total</div><Amount value={total}/></div>
        <div className="ds-card"><div className="ds-label">Prêmio de seguros / mês</div><Amount value={premioMensal}/></div>
        <div className="ds-card"><div className="ds-label">Veículos</div><Amount value={veiculos.length}/></div>
        <div className="ds-stats">
          <div className="ds-stat"><span>Segurados</span><strong>{segurados}/{veiculos.length}</strong></div>
          <div className="ds-stat"><span>Com restrição</span><strong>{veiculos.filter(i => i.restricao).length}</strong></div>
        </div>
      </div>
      <div className="card">
        <AssetTable
          cols={["Veículo", "Marca", "Ano", "Titularidade", "Seguro", "Valor"]}
          rows={veiculos.map(i => ({ id: i.id, raw: { ...i, __kind: "veiculo" }, cells: [
            <span>{i.nome}{i.restricao ? " ⚠️" : ""}</span>, i.marca || "—", i.ano || "—", <TitBadge t={i.titularidade}/>,
            i.segurado ? <span className="badge badge-done">Segurado</span> : <span className="badge badge-muted">Sem seguro</span>,
            <strong>{window.fmtBRLString(i.valor)}</strong>,
          ]}))}
          onEdit={onEditAsset} onDelete={id => onDeleteAsset("veiculos", id)}
          empty="Nenhum veículo cadastrado."/>
      </div>
    </div>
  );
}

Object.assign(window, { PatrimonioPage, ImoveisPage, AutomoveisPage, AssetModal, AssetTable, TitBadge, HBar, PieLegend, PIE_COLORS });