// Helm — 換匯參考(USD/TWD 近一年區間 + 富邦小抄)+ 定期定額換匯追蹤。
(function () {
  const NS = window.HelmDesignSystem_9613a7;
  const { Field, Input, Button } = NS;

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

  function FxScreen({ onClose, onChanged }) {
    const H = window.HELM || {};
    const fx = H.fx || null;
    const sum = H.fxSummary || { totalTwd: 0, totalUsd: 0, avgRate: 0, count: 0 };
    const records = H.fxRecords || [];
    const current = fx ? fx.current : (H.RATE || 0);

    const [showAdd, setShowAdd] = React.useState(false);
    const [date, setDate] = React.useState(new Date().toISOString().slice(0, 10));
    const [twd, setTwd] = React.useState("");
    const [usd, setUsd] = React.useState("");
    const [saving, setSaving] = React.useState(false);
    const [busyRow, setBusyRow] = React.useState(0);

    const twdNum = parseFloat(String(twd).replace(/,/g, "")) || 0;
    const usdNum = parseFloat(String(usd).replace(/,/g, "")) || 0;
    const previewRate = usdNum > 0 ? twdNum / usdNum : 0;

    let pct = null, zone = "";
    if (fx && fx.high52 > fx.low52) {
      pct = Math.max(2, Math.min(98, (fx.current - fx.low52) / (fx.high52 - fx.low52) * 100));
      zone = pct < 34 ? "偏低" : (pct > 66 ? "偏高" : "中間");
    }
    const zoneNote = zone === "偏低" ? "美元相對便宜 —— 你本來就要投資,是相對好的時機。"
      : zone === "偏高" ? "美元相對貴 —— 別急著大額換,分批就好。"
      : zone === "中間" ? "落在中間 —— 定期定額換,不用猜時機。" : "";

    function add() {
      if (twdNum <= 0 || usdNum <= 0) return;
      setSaving(true);
      window.HelmData.addFx({ date: date.replace(/-/g, "/"), twd: twdNum, usd: usdNum }).then(function () {
        setSaving(false); setShowAdd(false); setTwd(""); setUsd("");
        onChanged();
      });
    }
    function del(row) {
      setBusyRow(row);
      window.HelmData.deleteFx(row).then(function () { setBusyRow(0); onChanged(); });
    }

    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">換匯參考</span><span className="fpage__card-hint">USD / TWD</span></div>
                <div className="fx-now"><span className="fx-now__unit">1 USD =</span><span className="fx-now__rate t-num">NT$ {current ? r2(current) : "—"}</span></div>
                {pct !== null && (
                  <div className="fx-range">
                    <div className="fx-range__track"><div className="fx-range__marker" style={{ left: pct + "%" }} /></div>
                    <div className="fx-range__labels">
                      <span>近一年低 {r2(fx.low52)}</span>
                      <span className={"fx-zone fx-zone--" + (zone === "偏低" ? "low" : zone === "偏高" ? "high" : "mid")}>{zone}</span>
                      <span>高 {r2(fx.high52)}</span>
                    </div>
                  </div>
                )}
                {zoneNote && <p className="fx-note">{zoneNote}</p>}
                <p className="fx-disclaim">這是參考脈絡,不是買賣訊號 —— 沒人能準報低點。</p>
              </section>

              {/* 富邦換匯小抄 */}
              <section className="fpage__card">
                <div className="fpage__card-head"><span className="t-overline">富邦換匯小抄</span></div>
                <ul className="fx-tips">
                  <li>用<b>一本萬利 App 線上換匯</b>(換匯/外幣轉帳→買外幣),挑 <b>09:00–15:30</b> 吃優惠最高 3 分,別臨櫃。</li>
                  <li><b>外幣交割</b>:先把台幣分批換成美元囤著,要買 SPCX 直接用美元下單。</li>
                  <li>最穩做法:<b>定期定額換匯</b>(每月固定一筆),用下面記錄追蹤平均成本。</li>
                  <li>單筆 <b>≥ 50 萬</b>有大額優惠,但那等於全壓當下匯率;新手分批通常更安心。</li>
                </ul>
              </section>

              {/* 定期定額換匯追蹤 */}
              <section className="fpage__card">
                <div className="fpage__card-head">
                  <span className="t-overline">定期定額換匯追蹤</span>
                  {!showAdd && <button className="fx-addbtn" onClick={() => setShowAdd(true)}><i className="ph ph-plus" aria-hidden="true" />新增換匯</button>}
                </div>

                {sum.count > 0 && (
                  <div className="fx-avg">
                    <div className="fx-avg__row"><span>累計</span><span className="t-num">NT$ {fmt(sum.totalTwd)} → US$ {fmt(sum.totalUsd)}</span></div>
                    <div className="fx-avg__row fx-avg__main"><span>平均成本</span><span className="t-num">1 USD = NT$ {r2(sum.avgRate)}</span></div>
                    {current > 0 && sum.avgRate > 0 && (
                      <div className="fx-avg__cmp">{sum.avgRate <= current ? "你的平均成本比現在低,換得不錯 👍" : "平均成本比現在高一點,之後分批拉低就好。"}</div>
                    )}
                  </div>
                )}

                {showAdd && (
                  <div className="fx-addform">
                    <Field label="日期"><Input type="date" value={date} onChange={(e) => setDate(e.target.value)} /></Field>
                    <Field label="換出台幣"><Input amount affix="NT$" inputMode="decimal" placeholder="0" value={twd} onChange={(e) => setTwd(e.target.value)} /></Field>
                    <Field label="換得美元"><Input amount affix="US$" inputMode="decimal" placeholder="0" value={usd} onChange={(e) => setUsd(e.target.value)} /></Field>
                    {previewRate > 0 && <div className="fx-note">這筆匯率 1 USD = NT$ {r2(previewRate)}</div>}
                    <div className="fx-addform__row">
                      <Button variant="secondary" block onClick={() => { setShowAdd(false); setTwd(""); setUsd(""); }} disabled={saving}>取消</Button>
                      <Button variant="primary" block onClick={add} loading={saving}>加入</Button>
                    </div>
                  </div>
                )}

                <div className="fx-list">
                  {records.length === 0 && !showAdd && <p className="fx-empty">還沒有換匯記錄。每次換美元後加一筆,就能看平均成本。</p>}
                  {records.map(function (r) {
                    return (
                      <div className="fx-row" key={r.id}>
                        <div className="fx-row__main">
                          <span className="fx-row__date">{r.date}</span>
                          <span className="fx-row__amt t-num">NT$ {fmt(r.twd)} → US$ {fmt(r.usd)}</span>
                        </div>
                        <span className="fx-row__rate t-num">{r2(r.rate)}</span>
                        <button className="fx-row__del" onClick={() => del(r._row)} disabled={busyRow === r._row} aria-label="刪除這筆">
                          <i className={"ph " + (busyRow === r._row ? "ph-circle-notch" : "ph-trash")} aria-hidden="true" />
                        </button>
                      </div>
                    );
                  })}
                </div>
              </section>

            </div>
          </div>
        </div>
      </div>
    );
  }

  window.FxScreen = FxScreen;
})();