// Helm — 流派觀察名單(美股)。讀靜態 us-watchlist.json(離線由 scripts/gen-us-watchlist.js 用 SEC 年報基本面分類),
//   分 品質龍頭 / 高成長 / 財務穩健 / 配息存股 / ⚠️燒錢成長,點任一檔 → 開美股健檢。教材型、非投資建議。
//   注意:這裡只用「財報基本面」分流派(沒有即時股價/本益比/技術面——那是點進健檢才即時抓)。
(function () {
  const ORDER = ["quality", "growth", "sound", "dividend", "burn"];
  var _uwlData = null, _uwlScroll = 0;   // 模組層快取 + 記住捲動位置,撐過 unmount

  function USWatchlistScreen({ onClose, onOpenStock }) {
    const [data, setData] = React.useState(_uwlData);
    const [err, setErr] = React.useState(null);
    const scrollRef = React.useRef(null);
    const restoredRef = React.useRef(false);
    React.useEffect(function () {
      fetch("us-watchlist.json?v=92").then(function (r) { return r.json(); }).then(function (d) { _uwlData = d; setData(d); }).catch(function (e) { setErr(String((e && e.message) || e)); });
    }, []);
    React.useLayoutEffect(function () {
      if (!restoredRef.current && data && scrollRef.current) { scrollRef.current.scrollTop = _uwlScroll; restoredRef.current = true; }
    }, [data]);

    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" ref={scrollRef} onScroll={function (e) { _uwlScroll = e.currentTarget.scrollTop; }}>
            <div className="fpage__body">
              <section className="fpage__card">
                <p className="prot-sum__note">幾種風格各自會挑什麼美股——<b>給新手觀察學習,不是叫你買</b>。依 <b>SEC 官方年報基本面</b>分類(沒看即時股價),點任一檔看含即時股價的完整健檢。{data ? <>資料 {data.generatedAt} · 從 {data.universe} 檔挑出。</> : null}</p>
              </section>

              {err && <section className="fpage__card"><div className="fx-advice fx-advice--mid"><span className="fx-advice__txt">⚠️ 名單載入失敗:{err}</span></div></section>}
              {!data && !err && <section className="fpage__card"><div className="fx-now"><span className="fx-now__unit">載入名單中</span><span className="fx-now__rate">…</span></div></section>}

              {data && ORDER.map(function (key) {
                const st = data.styles[key];
                if (!st) return null;
                const danger = key === "burn";
                return (
                  <section key={key} className={"fpage__card wl-style" + (danger ? " wl-style--danger" : "")}>
                    <div className="wl-style__head">
                      <i className={"ph " + st.icon} aria-hidden="true" />
                      <span className="wl-style__label">{st.label}</span>
                      <span className="wl-style__sub">{st.sub}</span>
                    </div>
                    <p className="wl-style__blurb">{st.blurb}</p>
                    <div className="wl-picks">
                      {st.picks.length === 0
                        ? <div className="wl-empty">本輪沒有符合的(門檻嚴、寧缺勿濫)</div>
                        : st.picks.map(function (p) {
                          return (
                            <button key={p.code} type="button" className="wl-pick wl-pick--us" onClick={function () { onOpenStock(p.code); }}>
                              <span className="wl-pick__l">
                                <span className="wl-pick__name">{p.name}<span className="wl-pick__code t-num">{p.code}</span>{p.sector && <span className="wl-uschip">{p.sector}</span>}</span>
                                <span className="wl-pick__why">{p.why}</span>
                              </span>
                              <i className="ph ph-caret-right wl-pick__chev" aria-hidden="true" />
                            </button>
                          );
                        })}
                    </div>
                  </section>
                );
              })}

              <section className="fpage__card stk-disclaim">
                <p className="stk-note">名單由規則自動產生(基本面來自 <b>SEC EDGAR 官方年報</b>、每年更新),從約 {data ? data.universe : "—"} 檔有正式美國財報的公司篩出。<b>不構成投資建議</b>;流派是教學用的概略歸類,且<b>只看財報、沒看當下股價貴不貴</b>——便宜與否、進出場時機請點進健檢看即時數字,並衡量自身風險承受度。美股估值天生偏高,清單裡的「好公司」多半也不便宜。</p>
              </section>
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.USWatchlistScreen = USWatchlistScreen;
})();