// Helm — 理財工具 hub。v1:換匯(可用)+ 股票分析/保險/房產/債券(即將推出,個人自用工具)。
(function () {
  const NS = window.HelmDesignSystem_9613a7;

  function r2(n) { return Number(n).toLocaleString("en-US", { maximumFractionDigits: 2 }); }

  function Tools({ onOpenFx }) {
    const H = window.HELM;
    const fx = H && H.fx;
    const fxRate = fx ? fx.current : ((H && H.RATE) || 0);
    let fxZone = "", fxZoneClass = "mid";
    if (fx && fx.high52 > fx.low52) {
      const fp = (fx.current - fx.low52) / (fx.high52 - fx.low52) * 100;
      fxZone = fp < 34 ? "偏低" : (fp > 66 ? "偏高" : "中間");
      fxZoneClass = fp < 34 ? "low" : (fp > 66 ? "high" : "mid");
    }
    const soon = [
      { icon: "ph-chart-line-up", name: "股票分析", desc: "個股健診 · 教材式拆解(自用)" },
      { icon: "ph-umbrella", name: "保險檢視", desc: "保單盤點 · 保障缺口" },
      { icon: "ph-buildings", name: "房地產", desc: "估值 · 房貸 · 持有成本" },
      { icon: "ph-scales", name: "債券", desc: "殖利率 · 配置" },
    ];

    return (
      <div className="screen">
        <span className="t-overline goal-intro">理財工具</span>

        {/* 換匯參考(可用)*/}
        <button type="button" className="ov-fxcard" onClick={onOpenFx}>
          <span className="ov-fxcard__l">
            <span className="ov-fxcard__title">換匯參考 · USD/TWD</span>
            <span className="ov-fxcard__rate t-num">NT$ {fxRate ? r2(fxRate) : "—"}</span>
          </span>
          <span className="ov-fxcard__r">
            {fxZone && <span className={"ov-fxcard__zone fx-zone--" + fxZoneClass}>{fxZone}</span>}
            <i className="ph ph-caret-right ov-fxcard__chev" aria-hidden="true" />
          </span>
        </button>

        {/* 即將推出 */}
        <div className="tool-soon-list">
          {soon.map(function (s) {
            return (
              <div key={s.name} className="tool-soon">
                <i className={"ph " + s.icon} aria-hidden="true" />
                <span className="tool-soon__l">
                  <span className="tool-soon__name">{s.name}</span>
                  <span className="tool-soon__desc">{s.desc}</span>
                </span>
                <span className="tool-soon__tag">即將推出</span>
              </div>
            );
          })}
        </div>
      </div>
    );
  }

  window.Tools = Tools;
})();