// Helm — 想看的公司介紹(待補側寫清單)。
//   你在個股健檢/流派名單按「🔖 記下來」的股票會列在這;每天清晨 5 點,Claude 用訂閱自動
//   補上業務簡介 + 護城河 → 寫進 company-profiles.json → 部署 → 從清單移除。就算忘了代號也找得到。
(function () {
  function ProfileWishScreen({ onClose, onOpenStock }) {
    const [list, setList] = React.useState(null);   // null = 載入中
    const [busy, setBusy] = React.useState("");

    function load() {
      if (!(window.HelmData && window.HelmData.listProfileWish)) { setList([]); return; }
      window.HelmData.listProfileWish().then(function (d) { setList(d || []); }).catch(function () { setList([]); });
    }
    React.useEffect(function () { load(); }, []);

    function remove(code) {
      if (!(window.HelmData && window.HelmData.removeProfileWish)) return;
      setBusy(code);
      window.HelmData.removeProfileWish(code).then(function () {
        setList(function (l) { return (l || []).filter(function (x) { return x.code !== code; }); });
        setBusy("");
      }).catch(function () { setBusy(""); });
    }

    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="stk-note" style={{ marginTop: 0 }}>你在個股健檢或流派名單按「🔖 記下來」的股票會列在這。<b>每天清晨 5 點</b>自動幫你補上業務簡介 + 護城河;補好就從清單消失,到<b>個股健檢</b>就看得到。</p>
            </section>
            {list == null ? (
              <div className="fx-now"><span className="fx-now__unit">載入中</span><span className="fx-now__rate">…</span></div>
            ) : list.length === 0 ? (
              <section className="fpage__card"><div className="fire-desc"><p>清單是空的。在<b>個股健檢</b>或<b>流派名單</b>看到沒有公司介紹的股票時,按「🔖 記下來」,它就會出現在這、每天清晨自動補上。</p></div></section>
            ) : (
              <section className="fpage__card">
                {list.map(function (it) {
                  return (
                    <div key={it.code} style={{ display: "flex", alignItems: "center", gap: 8, padding: "11px 0", borderTop: "1px solid rgba(128,128,128,0.18)" }}>
                      <button type="button" onClick={function () { if (onOpenStock) onOpenStock(it.code, it.market); }}
                        style={{ flex: 1, minWidth: 0, textAlign: "left", background: "none", border: "none", cursor: "pointer", padding: 0, color: "inherit", font: "inherit" }}>
                        <span style={{ display: "block", fontWeight: 600 }}>{it.name || it.code}</span>
                        <span style={{ display: "block", fontSize: 12, opacity: 0.6, marginTop: 2 }}>{it.code}{it.market === "us" ? " · 美股" : " · 台股"} · {it.addedAt} 記下 · 待補</span>
                      </button>
                      <button type="button" onClick={function () { remove(it.code); }} disabled={busy === it.code} aria-label="移除"
                        style={{ flex: "0 0 auto", background: "none", border: "none", cursor: "pointer", opacity: 0.5, fontSize: 18, padding: 6, color: "inherit" }}>
                        <i className="ph ph-x" aria-hidden="true" />
                      </button>
                    </div>
                  );
                })}
              </section>
            )}
          </div></div>
        </div>
      </div>
    );
  }
  window.ProfileWishScreen = ProfileWishScreen;
})();