// Helm — 黃金價格參考(便宜提醒)。用實體黃金 ETF GLD 追蹤國際金價 → 近一年百分位 + 偏低/偏高 + 「跌了可分批撿一點」。
//   教育性、非投資建議。金價=避險/分散配角、不生息。純前端讀 window.HELM.fxGold(後端 fxRangeGold_ 給的 {current,low52,high52,mean,pct,series})。
(function () {
  function fmt(n) { return Math.round(n || 0).toLocaleString("en-US"); }

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

    function Shell(children) {
      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">{children}</div></div>
          </div>
        </div>
      );
    }

    if (!g || !g.current) {
      return Shell(
        <section className="fpage__card"><div className="fire-desc"><p>金價資料載入中或暫時取不到,稍後再打開試試。</p></div></section>
      );
    }

    const pct = g.pct == null ? 50 : g.pct;
    let zone, zoneCls, advice;
    if (pct <= 33) { zone = "偏低(相對便宜)"; zoneCls = "low"; advice = "金價落在近一年偏低區——想配置一點黃金,這種時候比追高安心。但記得:一小塊(佔資產 5–10%)、分批或定期定額,別重壓。"; }
    else if (pct >= 67) { zone = "偏高(相對貴)"; zoneCls = "high"; advice = "金價落在近一年偏高區、最近漲多。想買別急著追,分批或等回落再撿。黃金不生息,追高風險大。"; }
    else { zone = "中間"; zoneCls = "mid"; advice = "金價在近一年中間帶,沒特別便宜也沒特別貴。想配置就小額分批,不用猜時機。"; }

    const ozUsd = Math.round(g.current * 10);                        // GLD ≈ 1/10 盎司 → 國際金價/oz(近似)
    const perGramTwd = Math.round(g.current * 10 * rate / 31.1035);  // 每公克台幣(近似)

    // 近一年走勢 sparkline
    const s = (g.series || []).filter(function (p) { return p.v > 0; });
    let spark = null;
    if (s.length > 1) {
      const vs = s.map(function (p) { return p.v; });
      const mn = Math.min.apply(null, vs), mx = Math.max.apply(null, vs);
      const W = 300, Hh = 56, pad = 3;
      const pts = s.map(function (p, i) {
        const x = pad + i / (s.length - 1) * (W - 2 * pad);
        const y = Hh - pad - (mx === mn ? 0.5 : (p.v - mn) / (mx - mn)) * (Hh - 2 * pad);
        return x.toFixed(1) + "," + y.toFixed(1);
      }).join(" ");
      spark = (
        <svg viewBox={"0 0 " + W + " " + Hh} className="gold-spark" preserveAspectRatio="none" aria-hidden="true">
          <polyline points={pts} fill="none" stroke="var(--accent-brass, #cbac74)" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" />
        </svg>
      );
    }

    return Shell(
      <React.Fragment>
        <section className="fpage__card">
          <div className="fpage__card-head"><span className="t-overline">國際金價 · 現在便不便宜</span><span className="fpage__card-hint">GLD 追蹤 · 近一年</span></div>
          <div className="fx-now">
            <span className="fx-now__unit">近一年位置</span>
            <span className={"fx-now__rate t-num fx-zone--" + zoneCls}>{zone}</span>
          </div>
          <div className="fx-stats">
            <span>目前在近一年第 <b>{pct}</b> 百分位</span>
            <span>區間 US${fmt(g.low52)} ~ US${fmt(g.high52)}</span>
          </div>
          {spark}
          <div className="fire-desc"><p>💡 {advice}</p></div>
        </section>

        <section className="fpage__card">
          <div className="fpage__card-head"><span className="t-overline">價格(近似換算)</span></div>
          <div className="tax-break">
            <div className="tax-row"><span>GLD(實體黃金 ETF)</span><span className="t-num">US$ {g.current}</span></div>
            <div className="tax-row"><span>≈ 國際金價 / 盎司</span><span className="t-num">US$ {fmt(ozUsd)}</span></div>
            <div className="tax-row"><span>≈ 每公克(台幣)</span><span className="t-num">NT$ {fmt(perGramTwd)}</span></div>
          </div>
          <p className="fx-disclaim">用「實體黃金 ETF GLD」追蹤國際金價(GOOGLEFINANCE 取不到 XAU 現貨);盎司/公克為換算<b>近似值</b>,實際交易以台銀黃金存摺牌價或券商為準。百分位是「機械規則」(現價 vs 近一年),<b>不是預測金價</b>。</p>
        </section>

        <section className="fpage__card">
          <div className="fire-desc">
            <p><b>老實提醒:</b>黃金是<b>避險/分散的配角</b>,不生息、不配息,長期報酬通常輸大盤股票——適合當「一小塊保險」,不是主力。這張「便宜提醒」只是幫你在想配置時<b>別追高</b>,不是叫你一定要買。你目前的優先序仍是:預備金 + 保障 → 大盤定期定額 → 有餘力再談一小塊黃金分散。</p>
          </div>
        </section>
      </React.Fragment>
    );
  }
  window.GoldScreen = GoldScreen;
})();