// Helm — 保障體檢:身故/失能/重疾/醫療 四大人身風險,各用最適合的衡量法。
//   身故=遺族需求缺口;失能=失能需求缺口(含本人生活費+照護費,常比身故大);
//   重疾=建議準備金緩衝;醫療=實支實付檢查清單。純前端,接 Helm 負債/資產/保障/現金流。
//   做缺口/體檢分析、不推銷保單。欄位記憶 localStorage helm-prot-*。
//   (經 agent 查證勞保局來源:失能年金=平均月投保薪資×年資×1.55%、最低4000、眷屬+25%上限+50%,
//    受投保薪資上限 45,800 封頂;98 年後年資之終身無工作能力只能領年金。)
(function () {
  const NS = window.HelmDesignSystem_9613a7;
  const { Field, Input } = NS;
  function fmt(n) { return Math.round(n || 0).toLocaleString("en-US"); }
  function wan(n) { return (Math.round((n || 0) / 1e4)).toLocaleString("en-US"); }
  function num(v) { return parseFloat(String(v).replace(/,/g, "")) || 0; }
  function lsGet(k) { try { return localStorage.getItem(k); } catch (e) { return null; } }
  function lsSet(k, v) { try { localStorage.setItem(k, v); } catch (e) {} }
  function lsDel(k) { try { localStorage.removeItem(k); } catch (e) {} }

  const K = {
    mode: "helm-prot-mode",
    famExp: "helm-prot-famexp", spouseInc: "helm-prot-spinc", debt: "helm-prot-debt", edu: "helm-prot-edu", assets: "helm-prot-assets",
    dYears: "helm-prot-dyears", funeral: "helm-prot-funeral", lifeCover: "helm-prot-lifecover", survivor: "helm-prot-survivor",
    careAnnual: "helm-prot-careannual", careYears: "helm-prot-careyears", disCover: "helm-prot-discover", disBenefit: "helm-prot-disbenefit",
    ciReserve: "helm-prot-cireserve", ciCover: "helm-prot-cicover",
    med1: "helm-prot-med1", med2: "helm-prot-med2", med3: "helm-prot-med3",
  };

  function InsuranceScreen({ onClose }) {
    const H = window.HELM || {};
    const cf = H.cashflow || {};
    const loanPay = (cf.loans || []).reduce(function (s, l) { return s + (l.monthly || 0); }, 0);
    const dftFam = String(Math.round(Math.max(0, (cf.expenseSum || 50000) - loanPay) * 12));
    const dftDebt = String(Math.round(H.totalLiab || 0));
    const prot = H.protection || [];
    const sumCat = function (re) { return prot.reduce(function (s, p) { return s + (re.test(p.cat || "") ? (p.twd || 0) : 0); }, 0); };
    const dftCover = String(Math.round(sumCat(/壽險/)));            // 一般身故壽險(意外/癌症身故為條件式,不計入)
    const dftDisCover = String(Math.round(sumCat(/失能|長照/)));    // 失能/長照給付
    const dftCiCover = String(Math.round(sumCat(/重疾|重大疾病/)));  // 重疾治療一次金
    const dftAssets = String(Math.round(H.liquid || 0));

    const [mode, setMode] = React.useState(function () { return lsGet(K.mode) || "death"; });
    // 共用
    const [famExp, setFamExp] = React.useState(function () { return lsGet(K.famExp) || dftFam; });
    const [spouseInc, setSpouseInc] = React.useState(function () { return lsGet(K.spouseInc) || "0"; });
    const [debt, setDebt] = React.useState(function () { return lsGet(K.debt) || dftDebt; });
    const [edu, setEdu] = React.useState(function () { return lsGet(K.edu) || "0"; });
    const [assets, setAssets] = React.useState(function () { return lsGet(K.assets) || dftAssets; });
    // 身故
    const [dYears, setDYears] = React.useState(function () { return lsGet(K.dYears) || "15"; });
    const [funeral, setFuneral] = React.useState(function () { return lsGet(K.funeral) || "1000000"; });
    const [lifeCover, setLifeCover] = React.useState(function () { return lsGet(K.lifeCover) || dftCover; });
    const [survivor, setSurvivor] = React.useState(function () { return lsGet(K.survivor) || "3000000"; });
    // 失能
    const [careAnnual, setCareAnnual] = React.useState(function () { return lsGet(K.careAnnual) || "300000"; });
    const [careYears, setCareYears] = React.useState(function () { return lsGet(K.careYears) || "20"; });
    const [disCover, setDisCover] = React.useState(function () { return lsGet(K.disCover) || dftDisCover; });
    const [disBenefit, setDisBenefit] = React.useState(function () { return lsGet(K.disBenefit) || "250000"; });
    // 重疾
    const [ciReserve, setCiReserve] = React.useState(function () { return lsGet(K.ciReserve) || "3000000"; });
    const [ciCover, setCiCover] = React.useState(function () { return lsGet(K.ciCover) || dftCiCover; });
    // 醫療(檢查清單)
    const [med1, setMed1] = React.useState(function () { return lsGet(K.med1) || "0"; });
    const [med2, setMed2] = React.useState(function () { return lsGet(K.med2) || "0"; });
    const [med3, setMed3] = React.useState(function () { return lsGet(K.med3) || "0"; });

    function persist(setter, key) { return function (e) { const v = e.target.value; setter(v); lsSet(key, v); }; }
    function pickMode(m) { setMode(m); lsSet(K.mode, m); }
    function toggleMed(v, setter, key) { const nv = v === "1" ? "0" : "1"; setter(nv); lsSet(key, nv); }
    function resetAll() {
      Object.keys(K).forEach(function (k) { lsDel(K[k]); });
      setMode("death"); setFamExp(dftFam); setSpouseInc("0"); setDebt(dftDebt); setEdu("0"); setAssets(dftAssets);
      setDYears("15"); setFuneral("1000000"); setLifeCover(dftCover); setSurvivor("3000000");
      setCareAnnual("300000"); setCareYears("20"); setDisCover(dftDisCover); setDisBenefit("250000");
      setCiReserve("3000000"); setCiCover(dftCiCover); setMed1("0"); setMed2("0"); setMed3("0");
    }

    const FAM = num(famExp), SPINC = num(spouseInc), DEBT = num(debt), EDU = num(edu), ASSETS = num(assets);
    // 身故缺口
    const dLiving = Math.max(0, FAM - SPINC) * Math.max(0, num(dYears));
    const dNeed = dLiving + DEBT + EDU + num(funeral);
    const dRes = num(lifeCover) + ASSETS + num(survivor);
    const gapDeath = Math.max(0, dNeed - dRes);
    // 失能缺口(生活費含本人、加照護費;勞保失能年金低)
    const cYears = Math.max(0, num(careYears));
    const disLiving = Math.max(0, FAM - SPINC) * cYears;            // 本人還在,不減本人那份
    const disCare = num(careAnnual) * cYears;
    const disNeed = disLiving + disCare + DEBT + EDU;
    const disRes = num(disCover) + ASSETS + num(disBenefit) * cYears;
    const gapDis = Math.max(0, disNeed - disRes);
    // 重疾緩衝
    const gapCI = Math.max(0, num(ciReserve) - num(ciCover));
    // 醫療清單
    const medScore = (med1 === "1" ? 1 : 0) + (med2 === "1" ? 1 : 0) + (med3 === "1" ? 1 : 0);

    function statusTxt(mk) {
      if (mk === "death") return gapDeath > 0 ? "缺 " + wan(gapDeath) + " 萬" : "✅ 充足";
      if (mk === "disability") return gapDis > 0 ? "缺 " + wan(gapDis) + " 萬" : "✅ 充足";
      if (mk === "ci") return gapCI > 0 ? "建議再備 " + wan(gapCI) + " 萬" : "✅ 已備足";
      return medScore + " / 3 達標";
    }
    function statusCls(mk) {
      if (mk === "death") return gapDeath > 0 ? "warn" : "ok";
      if (mk === "disability") return gapDis > 0 ? "warn" : "ok";
      if (mk === "ci") return gapCI > 0 ? "warn" : "ok";
      return medScore >= 2 ? "ok" : "warn";
    }
    const TABS = [{ k: "death", n: "身故" }, { k: "disability", n: "失能" }, { k: "ci", n: "重疾" }, { k: "medical", n: "醫療" }];
    const NAMES = { death: "身故 · 壽險", disability: "失能 · 失能扶助", ci: "重疾 · 癌症", medical: "醫療 · 實支實付" };

    return (
      <div className="fpage" role="dialog" aria-modal="true" aria-label="保障體檢">
        <div className="fpage__panel">
          <header className="fpage__bar">
            <button className="fpage__cancel" onClick={onClose}><i className="ph ph-arrow-left" aria-hidden="true" />返回</button>
            <span className="fpage__title">保障體檢</span>
            <span aria-hidden="true" />
          </header>
          <div className="fpage__scroll">
            <div className="fpage__body">

              {/* 體檢總覽:四大風險一眼看 */}
              <section className="fpage__card">
                <div className="fpage__card-head"><span className="t-overline">保障體檢</span><span className="fpage__card-hint">萬一你倒下 / 病倒</span></div>
                <div className="prot-sum">
                  {TABS.map(function (t) {
                    return (
                      <button key={t.k} type="button" className={"prot-sum__row" + (mode === t.k ? " is-on" : "")} onClick={function () { pickMode(t.k); }}>
                        <span className="prot-sum__name">{NAMES[t.k]}</span>
                        <span className={"prot-sum__stat prot-stat--" + statusCls(t.k)}>{statusTxt(t.k)}</span>
                      </button>
                    );
                  })}
                </div>
                <p className="prot-sum__note">先補大洞:四種風險都用低保費的<b>定期/附約型</b>(定期壽險、失能扶助、重疾一次金、實支實付)補滿,再談儲蓄投資型。總保費抓在年收入 1/10 內當參考(雙十原則只是護欄、別硬套)。</p>
              </section>

              {/* 風險切換 */}
              <div className="fire-seg" role="tablist">
                {TABS.map(function (t) {
                  return <button key={t.k} type="button" role="tab" aria-selected={mode === t.k} className={"fire-seg__btn" + (mode === t.k ? " is-on" : "")} onClick={function () { pickMode(t.k); }}>{t.n}</button>;
                })}
              </div>

              {/* ── 身故 ── */}
              {mode === "death" && (
                <section className="fpage__card">
                  <div className="fpage__card-head"><span className="t-overline">身故 · 壽險缺口</span></div>
                  <div className="fx-now"><span className="fx-now__unit">{gapDeath > 0 ? "還缺約" : "保障"}</span><span className="fx-now__rate t-num">{gapDeath > 0 ? wan(gapDeath) + " 萬" : "充足"}</span></div>
                  <div className="tax-break">
                    <div className="tax-row"><span>家庭生活費({num(dYears)} 年{SPINC > 0 ? "、已扣配偶收入" : ""})</span><span className="t-num">{fmt(dLiving)}</span></div>
                    <div className="tax-row"><span>+ 負債清償 + 教育金</span><span className="t-num">{fmt(DEBT + EDU)}</span></div>
                    <div className="tax-row"><span>+ 喪葬與緊急預備</span><span className="t-num">{fmt(num(funeral))}</span></div>
                    <div className="tax-row tax-row--sum"><span>= 需求</span><span className="t-num">{fmt(dNeed)}</span></div>
                    <div className="tax-row"><span>− 現有壽險 + 資產 + 勞保遺屬</span><span className="t-num">{fmt(dRes)}</span></div>
                    <div className="tax-row tax-row--sum"><span>= 身故缺口</span><span className="t-num">{fmt(gapDeath)}</span></div>
                  </div>
                  <div className={"fx-advice " + (gapDeath > 0 ? "fx-advice--mid" : "fx-advice--low")}>
                    <span className="fx-advice__txt">{gapDeath > 0 ? "萬一你走了,家人還差約 " + wan(gapDeath) + " 萬。用定期壽險補最便宜(缺口會隨小孩長大、房貸還清而縮小)。" : "✅ 身故保障充足。"}</span>
                  </div>
                  <div className="fpage__fields">
                    <Field label="全家年生活費" hint="預設=月支出扣貸款×12。身故後家人開銷會降(少 2–3 成),可自行調低">
                      <Input amount affix="NT$" inputMode="decimal" value={fmt(FAM)} onChange={persist(setFamExp, K.famExp)} /></Field>
                    <Field label="配偶年收入" hint="先抵掉家庭生活費,單薪填 0">
                      <Input amount affix="NT$" inputMode="decimal" value={fmt(SPINC)} onChange={persist(setSpouseInc, K.spouseInc)} /></Field>
                    <Field label="需支撐年數" hint="常用:最小的孩子到 20 歲還剩幾年"><Input inputMode="numeric" value={dYears} onChange={persist(setDYears, K.dYears)} /></Field>
                    <Field label="負債清償" hint="預設=總負債。⚠️有房貸壽險→把它的保額填進下面『現有壽險』(別重複算房貸)">
                      <Input amount affix="NT$" inputMode="decimal" value={fmt(DEBT)} onChange={persist(setDebt, K.debt)} /></Field>
                    <Field label="子女教育金" hint="公立大學約 60–80 萬/人,從小到大常抓 300 萬/人;沒有填 0">
                      <Input amount affix="NT$" inputMode="decimal" value={fmt(EDU)} onChange={persist(setEdu, K.edu)} /></Field>
                    <Field label="喪葬與緊急預備" hint="預設 100 萬(勞保另有約 23 萬喪葬津貼可抵)">
                      <Input amount affix="NT$" inputMode="decimal" value={fmt(num(funeral))} onChange={persist(setFuneral, K.funeral)} /></Field>
                    <Field label="現有壽險保額" hint="身故會理賠的總額(含房貸壽險、團保;預設帶 Helm『保障』項)">
                      <Input amount affix="NT$" inputMode="decimal" value={fmt(num(lifeCover))} onChange={persist(setLifeCover, K.lifeCover)} /></Field>
                    <Field label="可變現資產" hint="家人能動用的活錢+投資(自住房通常不賣可調低)">
                      <Input amount affix="NT$" inputMode="decimal" value={fmt(ASSETS)} onChange={persist(setAssets, K.assets)} /></Field>
                    <Field label="勞保/勞退遺屬給付(粗估)" hint="遺屬年金+勞退專戶,預設保守 300 萬。⚠️勞保受投保薪資上限 45,800 封頂">
                      <Input amount affix="NT$" inputMode="decimal" value={fmt(num(survivor))} onChange={persist(setSurvivor, K.survivor)} /></Field>
                  </div>
                </section>
              )}

              {/* ── 失能 ── */}
              {mode === "disability" && (
                <section className="fpage__card">
                  <div className="fpage__card-head"><span className="t-overline">失能 · 照護缺口</span><span className="fpage__card-hint">常比身故大</span></div>
                  <div className="fx-now"><span className="fx-now__unit">{gapDis > 0 ? "還缺約" : "保障"}</span><span className="fx-now__rate t-num">{gapDis > 0 ? wan(gapDis) + " 萬" : "充足"}</span></div>
                  <div className="tax-break">
                    <div className="tax-row"><span>家庭生活費(含你,{cYears} 年{SPINC > 0 ? "、扣配偶收入" : ""})</span><span className="t-num">{fmt(disLiving)}</span></div>
                    <div className="tax-row"><span>+ 額外照護費({cYears} 年 × {wan(num(careAnnual))} 萬)</span><span className="t-num">{fmt(disCare)}</span></div>
                    <div className="tax-row"><span>+ 負債清償 + 教育金</span><span className="t-num">{fmt(DEBT + EDU)}</span></div>
                    <div className="tax-row tax-row--sum"><span>= 需求</span><span className="t-num">{fmt(disNeed)}</span></div>
                    <div className="tax-row"><span>− 失能/長照險 + 資產 + 勞保失能({cYears}年)</span><span className="t-num">{fmt(disRes)}</span></div>
                    <div className="tax-row tax-row--sum"><span>= 失能缺口</span><span className="t-num">{fmt(gapDis)}</span></div>
                  </div>
                  <div className={"fx-advice " + (gapDis > 0 ? "fx-advice--high" : "fx-advice--low")}>
                    <span className="fx-advice__tag">{gapDis > 0 ? "⚠️ 最該補的洞" : "✅"}</span>
                    <span className="fx-advice__txt">{gapDis > 0 ? "你失能但活著:收入停、還要被照顧(看護月 2–3 萬起)、勞保失能年金一年才約 25 萬(受 45,800 封頂)。缺口約 " + wan(gapDis) + " 萬,常比身故大。用『失能扶助險』補(每月給付型)最對症。" : "失能保障充足。"}</span>
                  </div>
                  <div className="fpage__fields">
                    <Field label="全家年生活費" hint="失能你還在→生活費照全家算(不扣你那份)">
                      <Input amount affix="NT$" inputMode="decimal" value={fmt(FAM)} onChange={persist(setFamExp, K.famExp)} /></Field>
                    <Field label="配偶年收入" hint="先抵生活費,單薪填 0">
                      <Input amount affix="NT$" inputMode="decimal" value={fmt(SPINC)} onChange={persist(setSpouseInc, K.spouseInc)} /></Field>
                    <Field label="每年額外照護費" hint="外籍看護約 26,000/月≈31 萬/年;本國/機構 5–8 萬/月。長照 2.0 是補貼非全包">
                      <Input amount affix="NT$" inputMode="decimal" value={fmt(num(careAnnual))} onChange={persist(setCareAnnual, K.careAnnual)} /></Field>
                    <Field label="需照護年數" hint="預設 20 年"><Input inputMode="numeric" value={careYears} onChange={persist(setCareYears, K.careYears)} /></Field>
                    <Field label="負債清償" hint="預設=總負債"><Input amount affix="NT$" inputMode="decimal" value={fmt(DEBT)} onChange={persist(setDebt, K.debt)} /></Field>
                    <Field label="可變現資產" hint="家人能動用的活錢+投資"><Input amount affix="NT$" inputMode="decimal" value={fmt(ASSETS)} onChange={persist(setAssets, K.assets)} /></Field>
                    <Field label="現有失能/長照險保額" hint="失能扶助險、長照險的理賠(沒有填 0)">
                      <Input amount affix="NT$" inputMode="decimal" value={fmt(num(disCover))} onChange={persist(setDisCover, K.disCover)} /></Field>
                    <Field label="勞保失能年金(每年,粗估)" hint="完全失能:平均月投保薪資×年資×1.55%×(含眷屬)。竹科頂 45,800、年資 15–20 年約 19–26 萬/年">
                      <Input amount affix="NT$" inputMode="decimal" value={fmt(num(disBenefit))} onChange={persist(setDisBenefit, K.disBenefit)} /></Field>
                  </div>
                </section>
              )}

              {/* ── 重疾 ── */}
              {mode === "ci" && (
                <section className="fpage__card">
                  <div className="fpage__card-head"><span className="t-overline">重疾 / 癌症 · 準備金</span></div>
                  <div className="fx-now"><span className="fx-now__unit">{gapCI > 0 ? "建議再備" : "已備"}</span><span className="fx-now__rate t-num">{gapCI > 0 ? wan(gapCI) + " 萬" : "足夠"}</span></div>
                  <div className="tax-break">
                    <div className="tax-row"><span>建議準備金</span><span className="t-num">{fmt(num(ciReserve))}</span></div>
                    <div className="tax-row"><span>− 現有重疾/癌症險保額</span><span className="t-num">{fmt(num(ciCover))}</span></div>
                    <div className="tax-row tax-row--sum"><span>= 還需準備</span><span className="t-num">{fmt(gapCI)}</span></div>
                  </div>
                  <div className="fire-desc">
                    <p><b>為什麼是「準備金」不是缺口</b>:重疾/癌症的治療費發散——標靶藥一年 144–360 萬、免疫療法 85–660 萬,且沒有像勞保遺屬那樣的社會保險可抵。所以這塊是「該備多少一筆現金 or 重疾險保額」。</p>
                    <p><b>建議錨點</b>:基本 100 萬 / 建議 <b>200–300 萬</b>(標靶免疫一年期 + 1–2 年收入中斷)/ 完整 300–500 萬。用「重疾一次金」型補最有效率。</p>
                  </div>
                  <div className="fpage__fields">
                    <Field label="建議準備金" hint="預設 300 萬(可調:基本 100 / 建議 300 / 完整 500 萬)">
                      <Input amount affix="NT$" inputMode="decimal" value={fmt(num(ciReserve))} onChange={persist(setCiReserve, K.ciReserve)} /></Field>
                    <Field label="現有重疾/癌症險保額" hint="重大傷病險、癌症一次金等的理賠(沒有填 0)">
                      <Input amount affix="NT$" inputMode="decimal" value={fmt(num(ciCover))} onChange={persist(setCiCover, K.ciCover)} /></Field>
                  </div>
                </section>
              )}

              {/* ── 醫療 ── */}
              {mode === "medical" && (
                <section className="fpage__card">
                  <div className="fpage__card-head"><span className="t-overline">醫療 · 實支實付體檢</span></div>
                  <div className="fx-now"><span className="fx-now__unit">達標</span><span className="fx-now__rate t-num">{medScore} / 3</span></div>
                  <div className="prot-check">
                    <button type="button" className={"prot-check__item" + (med1 === "1" ? " is-on" : "")} onClick={function () { toggleMed(med1, setMed1, K.med1); }}>
                      <i className={"ph " + (med1 === "1" ? "ph-check-circle" : "ph-circle")} aria-hidden="true" />
                      <span><b>醫療雜費限額 ≥ 30 萬?</b><br />這格才 cover 自費醫材/新藥(達文西 15–20 萬、標靶藥),是實支最關鍵的一格</span>
                    </button>
                    <button type="button" className={"prot-check__item" + (med2 === "1" ? " is-on" : "")} onClick={function () { toggleMed(med2, setMed2, K.med2); }}>
                      <i className={"ph " + (med2 === "1" ? "ph-check-circle" : "ph-circle")} aria-hidden="true" />
                      <span><b>手術費限額 ≥ 20 萬?</b><br />達文西手術一台 15–20 萬起、人工關節約 15 萬</span>
                    </button>
                    <button type="button" className={"prot-check__item" + (med3 === "1" ? " is-on" : "")} onClick={function () { toggleMed(med3, setMed3, K.med3); }}>
                      <i className={"ph " + (med3 === "1" ? "ph-check-circle" : "ph-circle")} aria-hidden="true" />
                      <span><b>病房費日額 ≥ 4,000 元?</b><br />自費單/雙人房差額每日數千元</span>
                    </button>
                  </div>
                  <div className={"fx-advice " + (medScore >= 2 ? "fx-advice--low" : "fx-advice--mid")}>
                    <span className="fx-advice__txt">{medScore >= 2 ? "✅ 醫療實支大致到位。" : "💡 建議補強實支實付——重點看『雜費限額』(不是病房日額)。"} ⚠️ 2024/10 起新制只能用收據正本理賠、多張以實際花費為上限,確認你的保單是新制還是舊制。</span>
                  </div>
                </section>
              )}

              <button type="button" className="fire-reset" onClick={resetAll}><i className="ph ph-arrow-counter-clockwise" aria-hidden="true" /> 全部重設為自動帶入的值</button>

              {prot.length > 0 && (
                <section className="fpage__card">
                  <div className="fpage__card-head"><span className="t-overline">你的保單(來自 Helm)</span><span className="fpage__card-hint">{prot.length} 張</span></div>
                  <div className="tax-break">
                    {prot.map(function (p, i) {
                      return <div key={i} className="tax-row"><span>{(p.cat ? p.cat + " · " : "") + p.name}</span><span className="t-num">{(p.twd || 0) > 0 ? wan(p.twd) + " 萬" : "—"}</span></div>;
                    })}
                  </div>
                  <p className="prot-sum__note">類別「壽險」才計入身故保障;意外/癌症身故、醫療屬條件式,只列不計入一般壽險。在 App「新增項目 → 類型:保障」可自己增修。</p>
                </section>
              )}

              <p className="fx-disclaim">四大人身風險粗估(經查證勞保局/健保署/實務來源),<b>不是推薦保單</b>。身故/失能用「需求−資源=缺口」,重疾用「建議準備金」,醫療用「檢查清單」。勞保失能/遺屬給付受投保薪資上限 45,800 封頂、為粗估(實際依年資、給付選擇而定)。生活費用名目加總、未折現(通膨與投資報酬大致互抵)。當方向參考,實際保額/保單依家庭狀況與預算決定。</p>
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.InsuranceScreen = InsuranceScreen;
})();