// Helm — 複利 / 通膨試算。兩模式:定期定額(複利成長,本金+每月投入×報酬)/ 通膨購買力(現金放著貶值)。
//   互相呼應:複利的「實質」用通膨折現、通膨模式提醒要投資打敗通膨。純前端。欄位記憶 localStorage helm-grow-*。
(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) { return window.HelmPrefs ? window.HelmPrefs.get(k) : (function () { try { return localStorage.getItem(k); } catch (e) { return null; } })(); }
  function lsSet(k, v) { if (window.HelmPrefs) window.HelmPrefs.set(k, v); else { try { localStorage.setItem(k, v); } catch (e) {} } }
  function lsDel(k) { if (window.HelmPrefs) window.HelmPrefs.del(k); else { try { localStorage.removeItem(k); } catch (e) {} } }

  const K = { mode: "helm-grow-mode", years: "helm-grow-years", infl: "helm-grow-infl", lump: "helm-grow-lump", monthly: "helm-grow-monthly", ret: "helm-grow-ret", amount: "helm-grow-amount" };

  function GrowScreen({ onClose }) {
    const H = window.HELM || {};
    const cf = H.cashflow || {};
    const dftLump = String(Math.round(H.liquid || 0));
    const dftMonthly = String(Math.max(0, Math.round(cf.investSum || 10000)));

    const [mode, setMode] = React.useState(function () { return lsGet(K.mode) || "grow"; });
    const [years, setYears] = React.useState(function () { return lsGet(K.years) || "20"; });
    const [infl, setInfl] = React.useState(function () { return lsGet(K.infl) || "2.5"; });
    const [lump, setLump] = React.useState(function () { return lsGet(K.lump) || dftLump; });
    const [monthly, setMonthly] = React.useState(function () { return lsGet(K.monthly) || dftMonthly; });
    const [ret, setRet] = React.useState(function () { return lsGet(K.ret) || "5"; });
    const [amount, setAmount] = React.useState(function () { return lsGet(K.amount) || "1000000"; });

    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() { Object.keys(K).forEach(function (k) { lsDel(K[k]); }); setMode("grow"); setYears("20"); setInfl("2.5"); setLump(dftLump); setMonthly(dftMonthly); setRet("5"); setAmount("1000000"); }

    const Y = Math.max(0, num(years)), INF = num(infl);
    const inflFactor = Math.pow(1 + INF / 100, Y);
    // 定期定額複利
    const LUMP = num(lump), MO = num(monthly), R = num(ret);
    const rm = R / 100 / 12, N = Y * 12;
    const fv = rm > 0 ? LUMP * Math.pow(1 + rm, N) + MO * (Math.pow(1 + rm, N) - 1) / rm : LUMP + MO * N;
    const principal = LUMP + MO * N;
    const gain = fv - principal;
    const realFv = fv / inflFactor;
    // 通膨購買力
    const AMT = num(amount);
    const futureValue = AMT / inflFactor;     // 今日這筆錢,Y 年後的實質購買力
    const futureNeed = AMT * inflFactor;      // 現在 AMT 的東西,Y 年後要多少錢
    const lostPct = Math.round((1 - 1 / inflFactor) * 100);

    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">

              <div className="fire-seg" role="tablist">
                <button type="button" role="tab" aria-selected={mode === "grow"} className={"fire-seg__btn" + (mode === "grow" ? " is-on" : "")} onClick={function () { pickMode("grow"); }}>定期定額</button>
                <button type="button" role="tab" aria-selected={mode === "inflation"} className={"fire-seg__btn" + (mode === "inflation" ? " is-on" : "")} onClick={function () { pickMode("inflation"); }}>通膨購買力</button>
              </div>

              {mode === "grow" ? (
                <section className="fpage__card">
                  <div className="fpage__card-head"><span className="t-overline">定期定額 · 複利成長</span></div>
                  <div className="fx-now"><span className="fx-now__unit">{Y} 年後約</span><span className="fx-now__rate t-num">{wan(fv)} 萬</span></div>
                  <div className="goal__nums"><span className="t-num">投入本金 {wan(principal)} 萬</span><span className="goal__pct t-num">多賺 {wan(gain)} 萬</span></div>
                  <div className="tax-break">
                    <div className="tax-row"><span>初始 + 每月 {fmt(MO)} × {N} 個月</span><span className="t-num">本金 {fmt(principal)}</span></div>
                    <div className="tax-row"><span>{R}% 年報酬複利滾出</span><span className="t-num">{fmt(fv)}</span></div>
                    <div className="tax-row"><span>其中複利獲利</span><span className="t-num">{fmt(gain)}</span></div>
                    <div className="tax-row tax-row--sum"><span>扣 {INF}% 通膨後的實質購買力</span><span className="t-num">{fmt(realFv)}</span></div>
                  </div>
                  <div className="fire-desc">
                    <p>💡 <b>複利的威力</b>:你總共投入 {wan(principal)} 萬,{Y} 年滾成 <b>{wan(fv)} 萬</b>,多賺 {wan(gain)} 萬。越早開始、滾越久差越多。</p>
                    <p>但別忘了通膨:這 {wan(fv)} 萬的<b>實質購買力</b>大約只等於今天的 {wan(realFv)} 萬——所以報酬率要<b>跑贏通膨</b>才算真的變有錢。</p>
                  </div>
                  <div className="fpage__fields">
                    <Field label="初始金額" hint="現在先投入的一筆(預設帶你的活錢+投資;沒有填 0)">
                      <Input amount affix="NT$" inputMode="decimal" value={fmt(LUMP)} onChange={persist(setLump, K.lump)} /></Field>
                    <Field label="每月投入" hint="預設帶你的定期定額">
                      <Input amount affix="NT$" inputMode="decimal" value={fmt(MO)} 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="年數"><Input inputMode="numeric" value={years} onChange={persist(setYears, K.years)} /></Field>
                    <Field label="年通膨率(%)" hint="台灣長期約 2~2.5%"><Input inputMode="decimal" value={infl} onChange={persist(setInfl, K.infl)} /></Field>
                  </div>
                </section>
              ) : (
                <section className="fpage__card">
                  <div className="fpage__card-head"><span className="t-overline">通膨 · 購買力縮水</span></div>
                  <div className="fx-now"><span className="fx-now__unit">{Y} 年後購買力剩約</span><span className="fx-now__rate t-num">{wan(futureValue)} 萬</span></div>
                  <div className="goal__nums"><span className="t-num">等於現在縮水 {lostPct}%</span><span className="goal__pct t-num">放著不動</span></div>
                  <div className="tax-break">
                    <div className="tax-row"><span>現在的金額</span><span className="t-num">{fmt(AMT)}</span></div>
                    <div className="tax-row"><span>{Y} 年後、{INF}% 通膨下的實質購買力</span><span className="t-num">{fmt(futureValue)}</span></div>
                    <div className="tax-row tax-row--sum"><span>= 縮水</span><span className="t-num">{fmt(AMT - futureValue)}</span></div>
                    <div className="tax-row"><span>換個說法:現在 {wan(AMT)} 萬的東西,{Y} 年後要</span><span className="t-num">{fmt(futureNeed)}</span></div>
                  </div>
                  <div className="fire-desc">
                    <p>💡 <b>錢放著不動 = 慢慢變薄</b>。你的 {wan(AMT)} 萬現金,{Y} 年後在 {INF}% 通膨下,實質購買力只剩約 <b>{wan(futureValue)} 萬</b>(縮水 {lostPct}%)。</p>
                    <p>這就是為什麼<b>不能把錢全放定存/現金</b>——至少要投資到跑贏通膨。切到「定期定額」看同一筆錢拿去投資會差多少。</p>
                  </div>
                  <div className="fpage__fields">
                    <Field label="目前金額" hint="想試算的一筆現金">
                      <Input amount affix="NT$" inputMode="decimal" value={fmt(AMT)} onChange={persist(setAmount, K.amount)} /></Field>
                    <Field label="年通膨率(%)" hint="台灣長期約 2~2.5%"><Input inputMode="decimal" value={infl} onChange={persist(setInfl, K.infl)} /></Field>
                    <Field label="年數"><Input inputMode="numeric" value={years} onChange={persist(setYears, K.years)} /></Field>
                  </div>
                </section>
              )}

              <button type="button" className="fire-reset" onClick={resetAll}><i className="ph ph-arrow-counter-clockwise" aria-hidden="true" /> 回復預設值</button>
              <p className="fx-disclaim">單純的數學試算:複利假設報酬率穩定(實際會上下波動)、通膨用固定年率估。報酬率與通膨都是假設、非保證,當方向參考。</p>
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.GrowScreen = GrowScreen;
})();