// Helm — 流派觀察名單(台股)。讀靜態 watchlist.json(離線由 scripts/gen-watchlist.js 用同一引擎算好),
//   分 品質/成長/價值/存股 四派,點任一檔 → 開個股健檢。教材型、非投資建議。
(function () {
  const DOT = { green: "var(--value-positive)", yellow: "var(--accent-brass)", red: "var(--value-negative)", gray: "var(--text-tertiary)" };
  function Dot({ light }) { return <span style={{ display: "inline-block", width: 10, height: 10, borderRadius: "50%", background: DOT[light] || DOT.gray, flexShrink: 0 }} />; }
  const ORDER = ["quality", "growth", "value", "dividend"];

  function WatchlistScreen({ onClose, onOpenStock }) {
    const [data, setData] = React.useState(null);
    const [err, setErr] = React.useState(null);
    React.useEffect(function () {
      fetch("watchlist.json?v=52").then(function (r) { return r.json(); }).then(setData).catch(function (e) { setErr(String((e && e.message) || e)); });
    }, []);

    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">
                <p className="prot-sum__note">四種投資流派各自會挑什麼股票——<b>給新手觀察學習,不是推薦買進</b>。點任一檔看完整健檢。{data ? <>資料 {data.asOf} · 篩選 {data.scored} 檔知名股。</> : 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;
                return (
                  <section key={key} className="fpage__card wl-style">
                    <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" onClick={function () { onOpenStock(p.code); }}>
                              <Dot light={p.light} />
                              <span className="wl-pick__l">
                                <span className="wl-pick__name">{p.name}<span className="wl-pick__code t-num">{p.code}</span>{p.unreliable && <span className="wl-pick__warn">不給綠燈</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>
                );
              })}

              {data && data.excluded && data.excluded.length > 0 && (
                <section className="fpage__card stk-disclaim">
                  <div className="fpage__card-head"><span className="t-overline"><i className="ph ph-warning" aria-hidden="true" /> 為什麼有些股沒入選(教學)</span></div>
                  <p className="stk-note">看起來便宜 ≠ 值得買。最常見陷阱是<b>景氣循環股在獲利高峰</b>:低本益比、高獲利,其實往往是該賣的訊號。點進去看健檢的警語。</p>
                  <div className="wl-excl">
                    {data.excluded.map(function (e) {
                      return (
                        <button key={e.code} type="button" className="wl-excl__row" onClick={function () { onOpenStock(e.code); }}>
                          <span className="wl-excl__name">{e.name}<span className="t-num"> {e.code}</span></span>
                          <span className="wl-excl__reason">{e.reason}</span>
                        </button>
                      );
                    })}
                  </div>
                </section>
              )}

              <section className="fpage__card stk-disclaim">
                <p className="stk-note">名單由規則引擎自動產生(與「個股健檢」同一套評分),從約 30 檔知名股篩出、定期更新。<b>不構成投資建議</b>;流派分類是教學用的概略歸類,實際投資前請看完整健檢、並衡量自身風險承受度。</p>
              </section>
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.WatchlistScreen = WatchlistScreen;
})();