// Helm — 定期定額成本試算(美股管道:富邦複委託 vs 富途/moomoo 電匯入金)。
//   教育性質試算、非投資建議。費率為公開資訊、會變動,以各券商官網/客服最新公告為準(查證日 2026-07)。
//   富邦美股定期定額:手續費 0.1% 無低消(優惠期至 2026/12/31);富途:平台費 ~0.99 美元/筆 + 每次電匯入金 ~800~1200 台幣。
//   兩管道都要換匯,價差視為共同成本。純前端,欄位記憶 localStorage helm-cost-*。
(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) {} } }

  // 內建費率常數(查證 2026-07,可隨官網調整)
  const FUBON_FEE_PCT = 0.1;    // 富邦美股定期定額手續費 %(無低消)
  const FX_SPREAD_PCT = 0.2;    // 換匯單向價差 %(兩管道共同)
  const FUTU_WIRE = 1000;       // 富途每次電匯入金成本(台幣,中間值)
  const FUTU_PLAT_USD = 0.99;   // 富途平台費(美元/筆)

  const K = { amt: "helm-cost-amt", freq: "helm-cost-freq", everyn: "helm-cost-everyn" };

  function CostScreen({ onClose }) {
    const H = window.HELM || {};
    const rate = (H.fx && H.fx.current) || H.RATE || 32;

    const [amt, setAmt] = React.useState(function () { return lsGet(K.amt) || "6000"; });
    const [freq, setFreq] = React.useState(function () { return lsGet(K.freq) || "4"; });
    const [everyn, setEveryn] = React.useState(function () { return lsGet(K.everyn) || "1"; });

    function persist(setter, key) { return function (e) { const v = e.target.value; setter(v); lsSet(key, v); }; }
    function resetAll() { Object.keys(K).forEach(function (k) { lsDel(K[k]); }); setAmt("6000"); setFreq("4"); setEveryn("1"); }

    const A = num(amt), F = Math.max(1, num(freq)), N = Math.max(1, num(everyn));

    // 富邦:手續費 + 換匯價差
    const fubonFee = A * FUBON_FEE_PCT / 100;
    const fubonFx = A * FX_SPREAD_PCT / 100;
    const fubonPer = fubonFee + fubonFx;
    const fubonPct = A > 0 ? fubonPer / A * 100 : 0;
    const fubonYear = fubonPer * F * 12;

    // 富途:平台費 + 電匯攤提(每 N 次投入才入金一次)+ 換匯價差
    const futuPlat = FUTU_PLAT_USD * rate;
    const futuWirePer = FUTU_WIRE / N;
    const futuFx = A * FX_SPREAD_PCT / 100;
    const futuPer = futuPlat + futuWirePer + futuFx;
    const futuPct = A > 0 ? futuPer / A * 100 : 0;
    const futuYear = futuPer * F * 12;

    const cheaper = fubonPer <= futuPer ? "富邦" : "富途";
    const diffYear = Math.abs(futuYear - fubonYear);
    const diff10 = diffYear * 10;

    // 富途要每次投入多大,平台費才低於富邦全部手續費(教育用門檻)
    // 富途要每次投入多大才比富邦「整體」便宜:富邦手續費 A*0.1% = 富途固定成本(平台費 + 電匯攤提);換匯價差兩邊相同、相抵。
    // 注意要含電匯攤提(FUTU_WIRE/N),否則會嚴重低估門檻;N 越大電匯攤越薄、門檻越低。
    const futuBreakAmt = (futuPlat + futuWirePer) / (FUBON_FEE_PCT / 100);
    const cheaperPct = cheaper === "富邦" ? fubonPct : futuPct;
    const gCol = "var(--c-pos, #1b8a5a)", rCol = "var(--c-neg, #c0392b)";

    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">每次投入 {fmt(A)} 元 · 被成本吃掉多少</span></div>
                <div className="fx-now">
                  <span className="fx-now__unit">成本率 · {cheaper}成本較低</span>
                  <span className="fx-now__rate t-num" style={{ color: gCol }}>{cheaperPct.toFixed(2)}%</span>
                </div>
                <div className="goal__nums">
                  <span className="t-num" style={{ color: cheaper === "富邦" ? gCol : (fubonPct > futuPct * 1.5 ? rCol : "inherit") }}>富邦複委託 {fubonPct.toFixed(2)}%</span>
                  <span className="goal__pct t-num" style={{ color: cheaper === "富途" ? gCol : (futuPct > fubonPct * 1.5 ? rCol : "inherit") }}>富途 {futuPct.toFixed(1)}%</span>
                </div>

                <div className="tax-break">
                  <div className="tax-row"><span>富邦 · 手續費 {FUBON_FEE_PCT}%(無低消)</span><span className="t-num">{fmt(fubonFee)}</span></div>
                  <div className="tax-row"><span>富邦 · 換匯價差 {FX_SPREAD_PCT}%</span><span className="t-num">{fmt(fubonFx)}</span></div>
                  <div className="tax-row tax-row--sum"><span>富邦每次成本</span><span className="t-num" style={{ color: gCol }}>{fmt(fubonPer)}（{fubonPct.toFixed(2)}%）</span></div>
                  <div className="tax-row"><span>富途 · 平台費 {FUTU_PLAT_USD} 美元/筆</span><span className="t-num">{fmt(futuPlat)}</span></div>
                  <div className="tax-row"><span>富途 · 電匯攤提（每 {N} 次入金 1 次）</span><span className="t-num">{fmt(futuWirePer)}</span></div>
                  <div className="tax-row"><span>富途 · 換匯價差 {FX_SPREAD_PCT}%</span><span className="t-num">{fmt(futuFx)}</span></div>
                  <div className="tax-row tax-row--sum"><span>富途每次成本</span><span className="t-num" style={{ color: futuPer > fubonPer ? rCol : gCol }}>{fmt(futuPer)}（{futuPct.toFixed(1)}%）</span></div>
                </div>

                <div className="fire-desc">
                  <p>💡 你每次投入 <b>{fmt(A)} 元</b>、每月 {F} 次:富邦被吃 <b>{fubonPct.toFixed(2)}%</b>、富途 <b>{futuPct.toFixed(1)}%</b>。一年下來 {cheaper} 較省，兩者差約 <b>{fmt(diffYear)} 元/年</b>（10 年約 {wan(diff10)} 萬）。</p>
                  <p>富途的成本卡在<b>每筆平台費（約 {fmt(futuPlat)} 元）</b>＋<b>電匯入金（每次約 {fmt(FUTU_WIRE)} 元、可分攤）</b>。小額定期定額時這些固定費用佔比很重——以你目前設定，<b>每次要投超過約 {fmt(futuBreakAmt)} 元</b>富途才會比富邦「整體」划算（把下面「幾次入金一次」調大、電匯攤薄，這門檻會降）。所以小額定期定額幾乎都是富邦划算。</p>
                  <p>想讓富途變划算，只能「<b>累積很多次、一次大額電匯入金</b>」（把上面「幾次入金一次」調大看成本率下降）——但代價是資金閒置等入金，且要承擔海外券商、報稅自理、爭議救濟難。</p>
                </div>

                <div className="fpage__fields">
                  <Field label="每次投入金額" hint="一個扣款日投入多少(NT$)">
                    <Input amount affix="NT$" inputMode="decimal" value={fmt(A)} onChange={persist(setAmt, K.amt)} /></Field>
                  <Field label="每月扣款次數" hint="例如 1/8/15/22 就是 4 次">
                    <Input inputMode="numeric" value={freq} onChange={persist(setFreq, K.freq)} /></Field>
                  <Field label="富途:幾次投入才電匯入金一次" hint="1=每次都入金(最貴);調大=累積後一次入金攤平電匯">
                    <Input inputMode="numeric" value={everyn} onChange={persist(setEveryn, K.everyn)} /></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">費率為公開資訊、會變動(富邦定期定額 0.1% 無低消優惠至 2026/12/31、可能限新戶;富途平台費與電匯成本依實際為準)。換匯價差、匯率用近似值。本試算為教育用途、非投資或稅務建議,實際請以各券商官網/客服為準。</p>
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.CostScreen = CostScreen;
})();