// Helm — 我的觀察清單。讀 HelmWatch(跨裝置同步),逐檔跑引擎顯示當前紅黃綠燈/分數,
//   點開個股健檢、可移除。教材型、非投資建議。
(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 }} />; }

  function WatchScreen({ onClose, onOpenStock }) {
    const [items, setItems] = React.useState(null);
    const [results, setResults] = React.useState({});
    const [flags, setFlags] = React.useState({});

    React.useEffect(function () {
      const l = (window.HelmWatch && window.HelmWatch.list()) || [];
      setItems(l);
      window.HelmStockData.getFlags().then(function (f) { setFlags((f && f.flags) || {}); });
      (function next(i) {
        if (i >= l.length) return;
        const code = l[i].code;
        setResults(function (r) { const n = Object.assign({}, r); n[code] = { loading: true }; return n; });
        window.HelmStockData.buildMetrics(code).then(function (rr) {
          setResults(function (r) {
            const n = Object.assign({}, r);
            n[code] = rr.metrics ? { score: window.HelmStockScore.scoreStock(rr.metrics), m: rr.metrics } : { etf: true };
            return n;
          });
        }).catch(function (e) {
          setResults(function (r) { const n = Object.assign({}, r); n[code] = { error: String((e && e.message) || e) }; return n; });
        }).then(function () { next(i + 1); });
      })(0);
    }, []);

    function remove(code) {
      if (window.HelmWatch) window.HelmWatch.remove(code);
      setItems(function (l) { return l.filter(function (x) { return x.code !== code; }); });
    }
    function sub(r) {
      if (!r || r.loading) return "查詢中…";
      if (r.error) return "查詢失敗(可能網路或限流,稍後再開)";
      if (r.etf) return "ETF / 無個股財報";
      if (r.score) return r.score.tag;
      return "—";
    }

    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>。點任一檔看完整健檢。</p>
              </section>

              {items && items.length === 0 && (
                <section className="fpage__card">
                  <div className="wt-empty">
                    <i className="ph ph-binoculars" aria-hidden="true" />
                    <p>還沒有觀察的股票。</p>
                    <span>在「個股健檢」查一檔後點<b>「加入觀察清單」</b>,或從「流派觀察名單」挑幾檔開始追蹤。</span>
                  </div>
                </section>
              )}

              {items && items.length > 0 && (
                <section className="fpage__card">
                  <div className="wt-list">
                    {items.map(function (it) {
                      const r = results[it.code] || { loading: true };
                      const light = r.score ? r.score.overallLight : "gray";
                      const fl = flags[it.code];
                      return (
                        <div key={it.code} className="wt-row">
                          <button type="button" className="wt-row__main" onClick={function () { onOpenStock(it.code); }}>
                            <Dot light={light} />
                            <span className="wt-row__l">
                              <span className="wt-row__name">{it.name}<span className="wt-row__code t-num">{it.code}</span>{fl && <span className="wt-row__flag">⚠️ {fl.kinds[0]}</span>}</span>
                              <span className="wt-row__sub">{sub(r)}</span>
                            </span>
                            <span className="wt-row__score t-num" style={{ color: DOT[light] }}>{r.score ? (r.score.overall == null ? "—" : r.score.overall) : (r.loading ? "…" : "—")}</span>
                          </button>
                          <button type="button" className="wt-row__del" onClick={function () { remove(it.code); }} aria-label="移除觀察"><i className="ph ph-x" aria-hidden="true" /></button>
                        </div>
                      );
                    })}
                  </div>
                </section>
              )}

              <section className="fpage__card stk-disclaim">
                <p className="stk-note">分數與紅黃綠燈是規則引擎的基本面健檢(同「個股健檢」),<b>不構成投資建議</b>。觀察清單的用途是讓你長期追蹤、熟悉不同股票的體質變化,慢慢找到適合自己的流派。</p>
              </section>
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.WatchScreen = WatchScreen;
})();