// Proteção: seguros, estrutura familiar e planejamento sucessório
const { useState: useStatePr } = React;

function FamiliaCard({ familia, onEdit }) {
  const c = familia.cliente, j = familia.conjuge;
  return (
    <div className="card" data-screen-label="Estrutura familiar">
      <div className="card-head">
        <h3>Estrutura familiar</h3>
        <button className="btn-ghost" onClick={onEdit}>Editar</button>
      </div>
      <div className="fam-tree">
        <div className="fam-couple">
          <div className="fam-node">
            <span className="fam-role">Cliente</span>
            <strong>{c.nome}</strong>
            <span className="fam-sub">{window.idade(c.nascimento) != null ? window.idade(c.nascimento) + " anos · " : ""}{c.estadoCivil}</span>
            <span className="fam-sub">{c.regimeBens}</span>
          </div>
          {j?.nome && (
            <div className="fam-node">
              <span className="fam-role">Cônjuge</span>
              <strong>{j.nome}</strong>
              <span className="fam-sub">{window.idade(j.nascimento) != null ? window.idade(j.nascimento) + " anos" : ""}</span>
            </div>
          )}
        </div>
        <div className="fam-children">
          {(familia.filhos || []).map((f, i) => (
            <div className="fam-node fam-child" key={i}>
              <span className="fam-role">Filho(a)</span>
              <strong>{f.nome}</strong>
              <span className="fam-sub">{window.idade(f.nascimento) != null ? window.idade(f.nascimento) + " anos" : ""}</span>
            </div>
          ))}
          {(familia.filhos || []).length === 0 && <div className="empty-tx">Nenhum filho cadastrado.</div>}
        </div>
      </div>
    </div>
  );
}

function FamiliaModal({ familia, onClose, onSave }) {
  const [form, setForm] = useStatePr(JSON.parse(JSON.stringify(familia)));
  const setC = (k, v) => setForm(f => ({ ...f, cliente: { ...f.cliente, [k]: v } }));
  const setJ = (k, v) => setForm(f => ({ ...f, conjuge: { ...f.conjuge, [k]: v } }));
  const setFilho = (i, k, v) => setForm(f => {
    const filhos = f.filhos.map((x, idx) => idx === i ? { ...x, [k]: v } : x);
    return { ...f, filhos };
  });
  return (
    <Modal title="Estrutura familiar" onClose={onClose}>
      <form className="form" onSubmit={e => { e.preventDefault(); onSave(form); onClose(); }}>
        <div className="form-row">
          <div className="field"><label>Nome do cliente</label><input value={form.cliente.nome} onChange={e => setC("nome", e.target.value)} required/></div>
          <div className="field"><label>Nascimento</label><input type="date" value={form.cliente.nascimento} onChange={e => setC("nascimento", e.target.value)}/></div>
        </div>
        <div className="form-row">
          <div className="field"><label>Estado civil</label>
            <select value={form.cliente.estadoCivil} onChange={e => setC("estadoCivil", e.target.value)}>
              <option>Casado(a)</option><option>Solteiro(a)</option><option>União estável</option><option>Divorciado(a)</option><option>Viúvo(a)</option>
            </select>
          </div>
          <div className="field"><label>Regime de bens</label>
            <select value={form.cliente.regimeBens} onChange={e => setC("regimeBens", e.target.value)}>
              <option>Comunhão parcial de bens</option><option>Comunhão universal de bens</option><option>Separação total de bens</option><option>Separação obrigatória de bens</option><option>Participação final nos aquestos</option>
            </select>
          </div>
        </div>
        <div className="form-row">
          <div className="field"><label>Nome do cônjuge</label><input value={form.conjuge?.nome || ""} onChange={e => setJ("nome", e.target.value)}/></div>
          <div className="field"><label>Nascimento</label><input type="date" value={form.conjuge?.nascimento || ""} onChange={e => setJ("nascimento", e.target.value)}/></div>
        </div>
        <div className="field"><label>Filhos</label></div>
        {form.filhos.map((f, i) => (
          <div className="form-row" key={i}>
            <div className="field"><input value={f.nome} placeholder="Nome" onChange={e => setFilho(i, "nome", e.target.value)}/></div>
            <div className="field" style={{ display: "flex", gap: 8 }}>
              <input type="date" value={f.nascimento || ""} onChange={e => setFilho(i, "nascimento", e.target.value)} style={{ flex: 1 }}/>
              <button type="button" className="btn-ghost" onClick={() => setForm(x => ({ ...x, filhos: x.filhos.filter((_, idx) => idx !== i) }))}>✕</button>
            </div>
          </div>
        ))}
        <button type="button" className="btn-ghost" onClick={() => setForm(x => ({ ...x, filhos: [...x.filhos, { nome: "", nascimento: "" }] }))}>+ Adicionar filho(a)</button>
        <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>
  );
}

function ProtecaoPage({ state, onAsset, onEditAsset, onDeleteAsset, onEditFamilia, onUpdateSucessao }) {
  const seguros = state.seguros;
  const suc = window.calcSucessao(state);
  const tot = window.patrimonioTotais(state.patrimonio, state.dividas);
  const capitalVida = seguros.filter(s => s.tipo === "Vida" || s.tipo === "Invalidez").reduce((s, x) => s + Number(x.capital || 0), 0);
  const premioTotal = seguros.reduce((s, x) => s + Number(x.premioMensal || 0), 0);
  const dividaTotal = tot.totalDividas;
  const coberturaDivida = dividaTotal > 0 ? Math.min(capitalVida / dividaTotal, 1) : 1;
  const custoSucessorio = suc.custoExtrajudicial;
  const coberturaSucessao = custoSucessorio > 0 ? Math.min(capitalVida / custoSucessorio, 1) : 1;
  const gapSucessao = Math.max(0, custoSucessorio - capitalVida);

  const setSuc = (k, v) => onUpdateSucessao({ ...state.sucessao, [k]: Number(v) || 0 });

  return (
    <div className="page" data-screen-label="Proteção">
      <div className="page-head">
        <div><h2>🛡️ Proteção</h2><span className="page-hint">Seguros e planejamento sucessório. A estrutura familiar é cadastrada na aba Objetivos.</span></div>
        <button className="btn-green" onClick={() => onAsset("seguro")}>+ Novo Seguro</button>
      </div>

      <div className="div-summary">
        <div className="ds-card"><div className="ds-label">Capital segurado (vida)</div><Amount value={capitalVida}/></div>
        <div className="ds-card"><div className="ds-label">Prêmios / mês</div><Amount value={premioTotal}/></div>
        <div className="ds-card">
          <div className="ds-label">Dívida coberta por seguro</div>
          <div className="amount"><span className="a-int">{Math.round(coberturaDivida * 100)}</span><span className="a-dec">%</span></div>
          <div className="ds-delta"><span className="ds-prev">% do saldo devedor coberto</span></div>
        </div>
        <div className="ds-stats">
          <div className="ds-stat"><span>Apólices</span><strong>{seguros.length}</strong></div>
          <div className="ds-stat"><span>Custo sucessório coberto</span><strong>{Math.round(coberturaSucessao * 100)}%</strong></div>
        </div>
      </div>

      {gapSucessao > 0 && (
        <div className="card ck-seed" style={{ borderColor: "#ecd9ae", background: "#fdf9ef" }}>
          <span>⚠️ O capital segurado ({window.fmtBRLString(capitalVida)}) cobre {Math.round(coberturaSucessao * 100)}% do custo do inventário extrajudicial ({window.fmtBRLString(custoSucessorio)}). Sugestão: aumentar a proteção em <strong>{window.fmtBRLString(gapSucessao)}</strong> para os herdeiros não precisarem vender bens para pagar a sucessão.</span>
        </div>
      )}

      <div className="card">
        <div className="card-head"><h3>Apólices</h3></div>
        <AssetTable
          cols={["Apólice", "Tipo", "Seguradora", "Segurado", "Prêmio/mês", "Vigência", "Capital"]}
          rows={seguros.map(s => ({ id: s.id, raw: { ...s, __kind: "seguro" }, cells: [
            s.nome, s.tipo, s.seguradora || "—", <TitBadge t={s.segurado}/>,
            s.premioMensal > 0 ? window.fmtBRLString(s.premioMensal) : "—",
            s.vigencia ? s.vigencia.split("-").reverse().join("/") : "—",
            <strong>{window.fmtBRLString(s.capital)}</strong>,
          ]}))}
          onEdit={onEditAsset} onDelete={id => onDeleteAsset("__seguros", id)}
          empty="Nenhum seguro cadastrado."/>
      </div>

      {/* ---- Sucessão ---- */}
      <div className="card" data-screen-label="Sucessão — Partilha">
        <div className="card-head"><h3>Partilha · patrimônio transmissível</h3><span className="page-hint">{suc.regime}</span></div>
        <div className="suc-cards">
          <div className="suc-kpi"><span>Total</span><strong>{window.fmtBRLString(suc.transmissivel)}</strong></div>
          <div className="suc-kpi"><span>Meação</span><strong>{window.fmtBRLString(suc.meacao)}</strong></div>
          <div className="suc-kpi"><span>Herança</span><strong>{window.fmtBRLString(suc.heranca)}</strong></div>
          <div className="suc-kpi"><span>Legítima</span><strong>{window.fmtBRLString(suc.legitima)}</strong></div>
        </div>
        <div className="suc-bar">
          <div className="suc-bar-meacao" style={{ width: suc.transmissivel > 0 ? (suc.meacao / suc.transmissivel) * 100 + "%" : "50%" }}></div>
          <div className="suc-bar-heranca" style={{ width: suc.transmissivel > 0 ? (suc.heranca / suc.transmissivel) * 100 + "%" : "50%" }}></div>
        </div>
        <div className="suc-bar-legend">
          <span><i className="dotmark" style={{ background: "#311131" }}></i> Meação {suc.transmissivel > 0 ? Math.round((suc.meacao / suc.transmissivel) * 100) : 0}%</span>
          <span><i className="dotmark" style={{ background: "#EA404D" }}></i> Herança {suc.transmissivel > 0 ? Math.round((suc.heranca / suc.transmissivel) * 100) : 0}%</span>
        </div>
        <div className="suc-note">Previdência isenta de inventário: <strong>{window.fmtBRLString(suc.previdenciaIsenta)}</strong> · {suc.notaRegime}</div>
      </div>

      <div className="row row-2">
        <div className="card" data-screen-label="Sucessão — ITCMD">
          <div className="card-head"><h3>ITCMD estimado</h3></div>
          <div className="suc-itcmd">
            <div className="suc-kpi big"><span>ITCMD ({suc.estado} · alíquota {suc.aliquota}%)</span><strong>{window.fmtBRLString(suc.itcmd)}</strong></div>
            <div className="suc-lines">
              <div><span>Patrimônio transmissível</span><strong>{window.fmtBRLString(suc.transmissivel)}</strong></div>
              <div><span>(−) Meação</span><strong>{window.fmtBRLString(suc.meacao)}</strong></div>
              <div><span>(−) Previdência isenta</span><strong>{window.fmtBRLString(suc.previdenciaIsenta)}</strong></div>
              <div className="suc-total"><span>Valor tributável</span><strong>{window.fmtBRLString(suc.valorTributavel)}</strong></div>
            </div>
            <div className="field" style={{ maxWidth: 220 }}>
              <label>Alíquota ITCMD (%)</label>
              <input type="number" step="0.5" value={state.sucessao.aliquotaITCMD} onChange={e => setSuc("aliquotaITCMD", e.target.value)}/>
            </div>
          </div>
        </div>
        <div className="card" data-screen-label="Sucessão — Custos">
          <div className="card-head"><h3>Composição dos custos de inventário</h3></div>
          <div className="suc-custos">
            <div className="suc-custo">
              <div className="suc-custo-head"><span>Extrajudicial (cartório)</span><strong>{window.fmtBRLString(suc.custoExtrajudicial)}</strong></div>
              <div className="suc-lines">
                <div><span>Registro dos imóveis</span><strong>{window.fmtBRLString(suc.registro)}</strong></div>
                <div><span>Custo de escritura</span><strong>{window.fmtBRLString(suc.escritura)}</strong></div>
                <div><span>ITCMD</span><strong>{window.fmtBRLString(suc.itcmd)}</strong></div>
                <div><span>Honorários (tabela OAB)</span><strong>{window.fmtBRLString(suc.honorariosExtra)}</strong></div>
              </div>
            </div>
            <div className="suc-custo">
              <div className="suc-custo-head"><span>Judicial</span><strong>{window.fmtBRLString(suc.custoJudicial)}</strong></div>
              <div className="suc-lines">
                <div><span>Registro dos imóveis</span><strong>{window.fmtBRLString(suc.registro)}</strong></div>
                <div><span>Custas judiciais</span><strong>{window.fmtBRLString(suc.custasJudiciais)}</strong></div>
                <div><span>ITCMD</span><strong>{window.fmtBRLString(suc.itcmd)}</strong></div>
                <div><span>Honorários</span><strong>{window.fmtBRLString(suc.honorariosJud)}</strong></div>
              </div>
            </div>
          </div>
          <div className="suc-note">*Honorários sugeridos conforme recomendação da tabela OAB de cada estado.</div>
        </div>
      </div>

      <div className="card" data-screen-label="Sucessão — Herdeiros">
        <div className="card-head"><h3>Herdeiros e partilhas</h3></div>
        <div className="herd-cards">
          {suc.herdeiros.map((h, i) => (
            <div className="herd-card" key={i}>
              <div className="herd-top">
                <span className="herd-avatar">{(h.nome || "?").split(" ").map(x => x[0]).slice(0, 2).join("")}</span>
                <span className="badge badge-muted">{h.papel}</span>
              </div>
              <strong className="herd-nome">{h.nome}</strong>
              <span className="herd-comp">{h.composicao}</span>
              <span className="herd-valor">{window.fmtCompact(h.valor)}</span>
              <span className="herd-pct">{suc.transmissivel > 0 ? ((h.valor / suc.transmissivel) * 100).toFixed(1) : 0}% do transmissível</span>
            </div>
          ))}
          {suc.herdeiros.length === 0 && <div className="empty-tx">Cadastre cônjuge e filhos na estrutura familiar (aba Objetivos).</div>}
        </div>
        <div className="suc-note">*Partilha simulada conforme o regime de bens ({suc.regime}) — CC arts. 1.829 e 1.832. Estimativas simplificadas — não substituem aconselhamento jurídico.</div>
      </div>
    </div>
  );
}

Object.assign(window, { ProtecaoPage, FamiliaCard, FamiliaModal });