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

  // 迷你回測預覽:點開即時抓 10 年(美股走 Yahoo)、跑定期定額、跟 S&P 500 比(只顯示%)。教材、非投資建議。
  function MiniBacktest({ code, market }) {
    const B = window.HelmBacktest;
    const [open, setOpen] = React.useState(false);
    const [data, setData] = React.useState(null);
    const [loading, setLoading] = React.useState(false);
    const [err, setErr] = React.useState(false);
    const [years, setYears] = React.useState(10);
    function load() {
      if (data || loading) return;
      var getter = market === "us" ? (window.HelmStockData && window.HelmStockData.getUsBacktest) : (window.HelmStockData && window.HelmStockData.getBacktest);
      if (!getter) { setErr(true); return; }
      setLoading(true);
      getter(code).then(function (d) { setLoading(false); if (!d || !d.ok) { setErr(true); return; } setData(d); }).catch(function () { setLoading(false); setErr(true); });
    }
    function toggle() { var n = !open; setOpen(n); if (n) load(); }
    var r = null;
    if (data && B && data.prices && data.prices.length) {
      var last = data.prices[data.prices.length - 1].date;
      var startDate = (Number(last.slice(0, 4)) - years) + last.slice(4);
      var s = B.dca(data.prices, 10000, startDate);
      var bch = B.dca(data.bench, 10000, startDate);
      if (s) r = { ret: s.ret, bret: bch ? bch.ret : null, benchIsSelf: data.benchIsSelf, yrs: Math.round(B.monthsBetween(s.startDate, last) / 12 * 10) / 10 };
    }
    var benchName = market === "us" ? "S&P 500" : "0050";
    return (
      <div className="wl-mini">
        <button type="button" className="wl-mini__toggle" onClick={toggle} aria-expanded={open}>
          <i className="ph ph-clock-counter-clockwise" aria-hidden="true" /> 回測:早幾年買的話? <i className={"ph " + (open ? "ph-caret-up" : "ph-caret-down")} aria-hidden="true" />
        </button>
        {open && (
          <div className="wl-mini__body">
            {loading && <span className="wl-mini__msg">抓 10 年歷史中…</span>}
            {err && <span className="wl-mini__msg">歷史資料不足或抓取失敗,點進健檢看完整回測。</span>}
            {r && (
              <div>
                <div className="wl-mini__segs">{[1, 3, 5, 10].map(function (y) { var dis = data.availYears >= 2 && y > data.availYears; return <button key={y} type="button" disabled={dis} className={"wl-mini__seg" + (years === y ? " is-on" : "")} onClick={function () { setYears(y); }}>{y} 年</button>; })}</div>
                <div className="wl-mini__stat"><span>近 {r.yrs} 年每月定額,這檔</span><b className={r.ret >= 0 ? "fx-pl--up" : "fx-pl--down"}>{r.ret >= 0 ? "+" : ""}{Math.round(r.ret * 100)}%</b></div>
                {!r.benchIsSelf && r.bret != null && <div className="wl-mini__stat wl-mini__stat--bench"><span>同期大盤 {benchName}</span><b>{r.bret >= 0 ? "+" : ""}{Math.round(r.bret * 100)}%</b></div>}
                <p className="wl-mini__note">{(!r.benchIsSelf && r.bret != null) ? (r.ret > r.bret ? "這檔過去贏大盤,但你當年挑不中、過去也 ≠ 未來。" : "這檔過去還輸大盤——多數個股長期贏不了指數。") : "過去績效不代表未來。"} 教材、非投資建議。</p>
              </div>
            )}
          </div>
        )}
      </div>
    );
  }

  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);
    const [watchTick, setWatchTick] = React.useState(0);
    function toggleWatch(code, name) {
      if (!window.HelmWatch) return;
      if (window.HelmWatch.has(code)) window.HelmWatch.remove(code);
      else window.HelmWatch.add(code, name, "us");
      setWatchTick(function (t) { return t + 1; });
    }
    React.useEffect(function () {
      fetch("us-watchlist.json?v=147").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>
                <p className="prot-sum__note" style={{ color: "var(--value-negative, #c1503b)" }}><b style={{ color: "var(--value-negative, #c1503b)" }}>注意:</b>用財報篩出來的好公司,這幾年高度集中在<b style={{ color: "var(--value-negative, #c1503b)" }}>科技與醫療</b>這兩個產業——整張清單買下去其實一點都不分散。要分散得靠你自己跨產業挑,別被「都是好公司」騙了以為買一籃子就安全。</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>
                    <div style={{ margin: "8px 0 4px", padding: "8px 10px", borderRadius: "10px", background: "var(--surface-sunken)", borderLeft: "3px solid var(--accent-brass)", fontSize: "0.7188rem", color: "var(--text-secondary)", lineHeight: 1.55 }}>
                      ⚠️ 這份名單只看「<b>財報體質</b>」,沒看「<b>現在股價貴不貴</b>」——好公司也可能正貴。要不要碰,務必點進去看即時健檢的估值。
                    </div>
                    <p className="wl-style__blurb">{st.blurb}{key === "sound" ? <span style={{ display: "block", marginTop: 6, color: "var(--text-secondary)" }}>這派只回答「<b>會不會倒</b>」,不回答「<b>會不會漲</b>」——裡面可能有本業正在衰退、只是手上現金多的公司。</span> : null}</p>
                    <div className="wl-picks">
                      {st.picks.length === 0
                        ? <div className="wl-empty">本輪沒有符合的(門檻嚴、寧缺勿濫)</div>
                        : st.picks.map(function (p) {
                          var epsSpike = typeof p.epsYoY === "number" && p.epsYoY > 200;   // 年增爆衝(基期低/一次性)
                          var soundShrink = key === "sound" && (
                            (typeof p.revYoY === "number" && p.revYoY < 0) ||
                            (typeof p.epsYoY === "number" && p.epsYoY < 0)
                          );   // 財務穩派內、本業卻在衰退
                          var watched = !!(window.HelmWatch && window.HelmWatch.has(p.code));
                          return (
                            <div key={p.code} className="wl-pick wl-pick--us">
                              <div className="wl-pick__row">
                              <button type="button" className="wl-pick__main" 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>
                                  {epsSpike && <span className="wl-pick__why" style={{ display: "block", marginTop: 3, color: "var(--value-negative, #c1503b)" }}>⚠️ 年增率爆衝(+{Math.round(p.epsYoY)}%)多半是去年基期極低或一次性因素,別把它當成未來常態去外推。</span>}
                                  {soundShrink && <span className="wl-pick__why" style={{ display: "block", marginTop: 3, color: "var(--value-negative, #c1503b)" }}>⚠️ 但營收/EPS 在衰退</span>}
                                </span>
                                <i className="ph ph-caret-right wl-pick__chev" aria-hidden="true" />
                              </button>
                              <button type="button" className={"wl-pick__star" + (watched ? " is-on" : "")} onClick={function () { toggleWatch(p.code, p.name); }} aria-pressed={watched} aria-label={watched ? "已在觀察清單,點擊移除" : "加入觀察清單"} title={watched ? "已在觀察清單" : "加入觀察清單"}>
                                <i className="ph ph-star" aria-hidden="true" />
                              </button>
                              </div>
                              <MiniBacktest code={p.code} market="us" />
                            </div>
                          );
                        })}
                    </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;
})();