// Helm — 退休 / FIRE 試算。兩種模式:4% 法則(永續,花不完)/ 壽命模式(花到預計壽命剛好用完)。純前端計算。
// 欄位記憶:沒動過 → 用明細/預設的最新值;改過 → 記住你的值(localStorage)。「重設」清掉記憶、回到自動值。
(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 wan1(n) { return (Math.round((n || 0) / 1e3) / 10).toLocaleString("en-US"); }   // 萬,1 位小數
  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) {} }
  function ageFromBirth(b) {   // "1989/03/18" / "1989-03-18" → 當下足歲(生日未到當年不加)
    var m = String(b || "").match(/(\d{4})\D+(\d{1,2})\D+(\d{1,2})/);
    if (!m) return null;
    var now = new Date(), a = now.getFullYear() - (+m[1]);
    if (now.getMonth() + 1 < +m[2] || (now.getMonth() + 1 === +m[2] && now.getDate() < +m[3])) a--;
    return (a > 0 && a < 120) ? a : null;
  }
  const K = { mode: "helm-fire-mode", portfolio: "helm-fire-portfolio", monthly: "helm-fire-monthly", ret: "helm-fire-ret", annualExp: "helm-fire-annualexp", age: "helm-fire-age", life: "helm-fire-life" };

  function FireChart({ portfolio, monthly, returnPct, target, years }) {
    const ref = React.useRef(null);
    const chart = React.useRef(null);
    React.useEffect(function () {
      if (!ref.current || !window.Chart) return;
      const css = getComputedStyle(document.documentElement);
      const brass = (css.getPropertyValue("--accent-brass") || "#cbac74").trim();
      const tert = (css.getPropertyValue("--text-tertiary") || "#9aa").trim();
      const grid = (css.getPropertyValue("--line-faint") || "rgba(0,0,0,.06)").trim();
      const pos = (css.getPropertyValue("--value-positive") || "#3a8a5f").trim();
      const n = Math.max(5, Math.min(40, Math.ceil(years) + 2));
      const r = returnPct / 100;
      const labels = [], data = [];
      let bal = portfolio;
      for (let y = 0; y <= n; y++) { labels.push(y + "y"); data.push(Math.round(bal)); bal = bal * (1 + r) + monthly * 12; }
      if (chart.current) chart.current.destroy();
      chart.current = new window.Chart(ref.current, {
        type: "line",
        data: { labels: labels, datasets: [
          { data: data, borderColor: brass, backgroundColor: brass + "22", fill: true, tension: 0.25, pointRadius: 0, borderWidth: 2 },
          { data: labels.map(function () { return target; }), borderColor: pos, borderDash: [4, 4], pointRadius: 0, borderWidth: 1, fill: false },
        ] },
        options: {
          responsive: true, maintainAspectRatio: false,
          plugins: { legend: { display: false }, tooltip: { callbacks: { label: function (c) { return "NT$ " + Math.round(c.parsed.y).toLocaleString("en-US"); } } } },
          scales: {
            y: { ticks: { color: tert, maxTicksLimit: 5, callback: function (v) { return Math.round(v / 1e6) + "M"; } }, grid: { color: grid } },
            x: { ticks: { color: tert, maxTicksLimit: 8 }, grid: { display: false } },
          },
        },
      });
      return function () { if (chart.current) { chart.current.destroy(); chart.current = null; } };
    }, [portfolio, monthly, returnPct, target, years]);
    return <div className="ov-trendchart" style={{ height: 150 }}><canvas ref={ref} /></div>;
  }

  function RetireScreen({ onClose }) {
    const H = window.HELM || {};
    const cf = H.cashflow || {};
    const loanPay = (cf.loans || []).reduce(function (s, l) { return s + (l.monthly || 0); }, 0);   // 房貸/車貸/信貸月付
    const baseExpenseMo = Math.max(0, (cf.expenseSum || 50000) - loanPay);   // 退休時貸款多半已還清 → 預設扣掉
    const birthAge = ageFromBirth(H.birth);   // 有設生日 → 自動算當下年齡(優先)

    // 自動帶入的「預設值」(沒記憶時用這些;會跟著明細變)
    const dftPortfolio = String(Math.round(H.liquid || 0));
    const dftMonthly = String(Math.max(0, Math.round(cf.investSum || cf.savingPower || 0)));   // 定期定額
    const dftAnnualExp = String(Math.round(baseExpenseMo * 12));
    const dftAge = birthAge != null ? String(birthAge) : "35";

    // 每個欄位:有記住的值就用記住的,否則用自動帶入的預設
    const [mode, setMode] = React.useState(function () { return lsGet(K.mode) || "perpetual"; });
    const [portfolio, setPortfolio] = React.useState(function () { return lsGet(K.portfolio) || dftPortfolio; });
    const [monthly, setMonthly] = React.useState(function () { return lsGet(K.monthly) || dftMonthly; });
    const [ret, setRet] = React.useState(function () { return lsGet(K.ret) || "5"; });
    const [annualExp, setAnnualExp] = React.useState(function () { return lsGet(K.annualExp) || dftAnnualExp; });
    const [age, setAge] = React.useState(function () { return birthAge != null ? String(birthAge) : (lsGet(K.age) || "35"); });
    const [lifeExp, setLifeExp] = React.useState(function () { return lsGet(K.life) || "85"; });

    // 改欄位 = 同時記住(只在使用者實際輸入時寫,所以沒動的欄位仍跟著明細)
    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 resetAll() {
      [K.mode, K.portfolio, K.monthly, K.ret, K.annualExp, K.age, K.life].forEach(lsDel);
      setMode("perpetual"); setPortfolio(dftPortfolio); setMonthly(dftMonthly); setRet("5");
      setAnnualExp(dftAnnualExp); setAge(dftAge); setLifeExp("85");
    }

    const P = num(portfolio), M = num(monthly), R = num(ret), AE = num(annualExp), AG = num(age), D = num(lifeExp);
    const rM = R / 100 / 12, rA = R / 100;
    function annuityPV(yrs) {   // 退休後 yrs 年、每年領 AE、剩餘以 rA 成長 → 退休那天所需本金(年金現值)
      if (yrs <= 0) return 0;
      if (rA <= 0) return AE * yrs;
      return AE * (1 - Math.pow(1 + rA, -yrs)) / rA;
    }

    let displayTarget, months = 0, reached = true;
    if (mode === "perpetual") {
      displayTarget = AE * 25;   // 4% 法則
      let bal = P;
      if (P < displayTarget) { while (bal < displayTarget && months < 600) { bal = bal * (1 + rM) + M; months++; } if (months >= 600) reached = false; }
    } else {
      // 壽命模式:單趟掃描——投資逐月成長,同時「所需本金」隨年齡增長而縮小(剩餘退休年數變少),第一次追上=達成點
      let bal = P, curAge = AG, tgt = annuityPV(D - curAge);
      if (P < tgt) {
        while (months < 600) { bal = bal * (1 + rM) + M; months++; curAge = AG + months / 12; tgt = annuityPV(D - curAge); if (tgt <= 0 || bal >= tgt) break; }
        if (months >= 600 && bal < tgt) reached = false;
      }
      displayTarget = reached ? annuityPV(D - (AG + months / 12)) : annuityPV(Math.max(1, D - AG));
    }
    const years = months / 12;
    const fiAge = AG + years;
    const progress = displayTarget > 0 ? Math.min(100, Math.round(P / displayTarget * 100)) : 100;
    const retireYears = Math.max(0, Math.round(D - fiAge));   // 壽命模式:退休後要靠這筆錢的年數

    return (
      <div className="fpage" role="dialog" aria-modal="true" aria-label="退休 FIRE 試算">
        <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">退休 / FIRE 試算</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></div>

                {/* 模式切換 */}
                <div className="fire-seg" role="tablist">
                  <button type="button" role="tab" aria-selected={mode === "perpetual"} className={"fire-seg__btn" + (mode === "perpetual" ? " is-on" : "")} onClick={function () { pickMode("perpetual"); }}>4% 法則</button>
                  <button type="button" role="tab" aria-selected={mode === "lifespan"} className={"fire-seg__btn" + (mode === "lifespan" ? " is-on" : "")} onClick={function () { pickMode("lifespan"); }}>壽命模式</button>
                </div>

                {/* 模式說明(帶你的實際數字)*/}
                {mode === "perpetual" ? (
                  <div className="fire-desc">
                    <p><b>這是什麼</b>:假設你只花投資賺的、<b>不動到本金</b> → 錢花不完,還能留給家人。比較保守,要存的錢多一點。</p>
                    <p><b>怎麼算</b>:需要的錢 = 年支出 × 25(等於每年只領本金的 4%)。你年支出約 {wan1(AE)} 萬,× 25 ≈ <b>{wan(AE * 25)} 萬</b>。</p>
                  </div>
                ) : (
                  <div className="fire-desc">
                    <p><b>這是什麼</b>:假設錢<b>花到 {D || "—"} 歲剛好用完</b>(本金也花掉)→ 需要的錢比較少、可能更早退休;但要是活得比預期久就會不夠。</p>
                    <p><b>怎麼算</b>:退休後約 {retireYears} 年、每年花 {wan1(AE)} 萬,粗估共 {wan(AE * retireYears)} 萬;但錢會<b>邊花邊繼續生利息</b>,所以退休那天其實只要準備約 <b>{wan(displayTarget)} 萬</b>,就夠花到 {D || "—"} 歲。</p>
                  </div>
                )}

                <div className="fx-now"><span className="fx-now__unit">{mode === "perpetual" ? "需要約" : "退休需要約"}</span><span className="fx-now__rate t-num">{wan(displayTarget)} 萬</span></div>
                <div className="goal__bar"><div className="goal__fill" style={{ width: progress + "%" }} /></div>
                <div className="goal__nums">
                  <span className="t-num">投資部位 {wan(P)} 萬 <span className="goal__of">/ {wan(displayTarget)} 萬</span></span>
                  <span className="goal__pct t-num">{progress}%</span>
                </div>
                {P >= displayTarget ? (
                  <div className="fx-advice fx-advice--low"><span className="fx-advice__txt">🎉 你的投資部位已達標!{mode === "perpetual" ? "以 4% 推算,被動收入估計能覆蓋年支出。" : "這筆錢估計夠你花到 " + D + " 歲。"}</span></div>
                ) : reached ? (
                  <div className="fx-advice fx-advice--mid">
                    <span className="fx-advice__tag">💡 估算結果</span>
                    <span className="fx-advice__txt">照現在的步調,大約 <b>{years.toFixed(1)} 年後</b>(約 <b>{Math.round(fiAge)} 歲</b>){mode === "perpetual" ? "達成財務自由" : "就能退休,錢夠花到 " + D + " 歲"}。</span>
                  </div>
                ) : (
                  <div className="fx-advice fx-advice--high"><span className="fx-advice__txt">照現在的步調 50 年內到不了 —— 試著提高「每月投入」或檢視假設(下面可調)。</span></div>
                )}
                {P < displayTarget && reached && <FireChart portfolio={P} monthly={M} returnPct={R} target={displayTarget} years={years} />}
              </section>

              <section className="fpage__card">
                <div className="fpage__card-head"><span className="t-overline">假設(可調,改過會記住)</span></div>
                <div className="fpage__fields">
                  <Field label="目前投資部位" hint="預設帶入你的活錢+投資(房子車子不算)">
                    <Input amount affix="NT$" inputMode="decimal" value={fmt(P)} onChange={persist(setPortfolio, K.portfolio)} />
                  </Field>
                  <Field label="每月可投入" hint={"每月固定投入投資的錢(預設=定期定額" + ((cf.savingPower || 0) > (cf.investSum || 0) ? "、上限 " + fmt(cf.savingPower) : "") + ")"}>
                    <Input amount affix="NT$" inputMode="decimal" value={fmt(M)} onChange={persist(setMonthly, K.monthly)} />
                  </Field>
                  <Field label="年報酬率(%)" hint="長期股市約 5–7%,保守抓 5">
                    <Input inputMode="decimal" value={ret} onChange={persist(setRet, K.ret)} />
                  </Field>
                  <Field label="退休後年支出" hint={"預設 = 現在支出扣掉房貸車貸後 ×12" + (loanPay > 0 ? "(已扣月付 " + fmt(loanPay) + ")" : "")}>
                    <Input amount affix="NT$" inputMode="decimal" value={fmt(AE)} onChange={persist(setAnnualExp, K.annualExp)} />
                  </Field>
                  <Field label="目前年齡" hint={birthAge != null ? "依你的生日自動計算" : "改過會記住"}>
                    <Input inputMode="decimal" value={age} onChange={persist(setAge, K.age)} />
                  </Field>
                  {mode === "lifespan" && (
                    <Field label="預計壽命(歲)" hint="壽命模式用:錢要花到這歲剛好用完">
                      <Input inputMode="decimal" value={lifeExp} onChange={persist(setLifeExp, K.life)} />
                    </Field>
                  )}
                </div>
                <button type="button" className="fire-reset" onClick={resetAll}><i className="ph ph-arrow-counter-clockwise" aria-hidden="true" /> 全部重設為自動帶入的值</button>
              </section>

              <p className="fx-disclaim">粗估、給方向用:報酬率是假設不是保證。<b>4% 法則</b>保守(留著本金、抗長壽);<b>壽命模式</b>需要的錢少但活得比預期久會不夠。兩者都還沒把通膨、稅、勞保勞退算進去——當方向參考,別當精算。</p>
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.RetireScreen = RetireScreen;
})();