// Helm — 個股健檢(台股)。前端直連 FinMind(window.HelmStockData)+ 規則引擎(window.HelmStockScore)。
//   誠實設計:不可靠不給綠燈、警語在上、每指標可點「這是什麼」、盲區免責在下。教材型、非投資建議。
(function () {
  const NS = window.HelmDesignSystem_9613a7;
  const { Field, Input, Button } = NS;

  const DOT = { green: "var(--value-positive)", yellow: "var(--accent-brass)", red: "var(--value-negative)", gray: "var(--text-tertiary)" };
  const CAT_LABEL = { valuation: "貴不貴?", profit: "會賺嗎?", growth: "在長大嗎?", health: "會倒嗎?" };
  const CAT_SUB = { valuation: "估值", profit: "獲利", growth: "成長", health: "財務健康" };
  function fmt(n) { return Math.round(n || 0).toLocaleString("en-US"); }
  function Dot({ light }) { return <span style={{ display: "inline-block", width: 11, height: 11, borderRadius: "50%", background: DOT[light] || DOT.gray, flexShrink: 0 }} />; }

  function StockScreen({ onClose, initialId }) {
    const [id, setId] = React.useState(initialId || "");
    const [busy, setBusy] = React.useState(false);
    const [res, setRes] = React.useState(null);
    const [openKey, setOpenKey] = React.useState(null);
    const [flags, setFlags] = React.useState(null);

    function lookup(codeArg) {
      const code = String(codeArg != null ? codeArg : id).trim();
      if (!/^\d{4,6}[A-Z]?$/.test(code)) { setRes({ error: "請輸入股票代號(例:2330)" }); return; }
      setBusy(true); setRes(null); setOpenKey(null);
      window.HelmStockData.buildMetrics(code).then(function (r) {
        if (!r.metrics) { setRes({ etf: true, name: r._debug.name, code: code }); }
        else { setRes({ score: window.HelmStockScore.scoreStock(r.metrics), m: r.metrics, code: code }); }
        setBusy(false);
      }).catch(function (e) {
        var msg = String((e && e.message) || e);
        if (/Failed to fetch|NetworkError|fetch/i.test(msg)) msg = "抓取資料失敗——可能是網路不穩,或 FinMind 暫時限流(免費版有流量上限),請稍後再試。";
        setRes({ error: msg }); setBusy(false);
      });
    }

    React.useEffect(function () {
      window.HelmStockData.getFlags().then(setFlags);
      if (initialId) lookup(initialId);
    }, []);

    function adviceCls(light) { return light === "red" ? "fx-advice--high" : light === "yellow" ? "fx-advice--mid" : "fx-advice--low"; }

    function report() {
      const s = res.score, m = res.m;
      const fi = flags && flags.flags && flags.flags[res.code];
      const staleTxt = m.staleMonths != null ? "(" + m.staleMonths + " 個月前)" : "";
      return (
        <React.Fragment>
          {fi && (
            <section className="fpage__card stk-flagcard">
              <div className="stk-flag">
                <i className="ph ph-warning-octagon" aria-hidden="true" />
                <div className="stk-flag__txt">
                  <b>⚠️ {fi.kinds.join("、")}股 · {fi.market}</b>
                  <span>{fi.note}</span>
                  <span className="stk-flag__cav">交易受限制或有異常,常是炒作、財務有狀況的標的——新手務必避開。資料截至 {flags.asOf},最新以證交所/櫃買公告為準。</span>
                </div>
              </div>
            </section>
          )}
          {/* 標頭 + 鮮度 */}
          <section className="fpage__card">
            <div className="stk-head">
              <div>
                <span className="stk-name">{m.name}</span>
                <span className="stk-code t-num">{res.code}</span>
              </div>
              <div className="stk-fresh">財報截至 {m.lq} {staleTxt}<br />股價 {m.asOfPrice}</div>
            </div>

            {/* 定位(最重要,擺最上)*/}
            <div className={"fx-advice " + adviceCls(s.overallLight)} style={{ marginTop: 12 }}>
              <span className="fx-advice__txt">{s.tag}</span>
            </div>

            {/* 總分(不可靠時不給綠燈)*/}
            <div className="stk-score">
              <span className="stk-score__num t-num" style={{ color: DOT[s.overallLight] }}>{s.overall == null ? "—" : s.overall}</span>
              <span className="stk-score__of">/ 100</span>
              <span className="stk-score__verdict"><Dot light={s.overallLight} /> {s.verdict}</span>
            </div>
          </section>

          {/* 四大類紅黃綠燈 */}
          <section className="fpage__card">
            <div className="fpage__card-head"><span className="t-overline">體質四面向</span><span className="fpage__card-hint">點指標看「這是什麼」</span></div>
            <div className="stk-cats">
              {s.categories.map(function (c) {
                return (
                  <div key={c.key} className="stk-cat">
                    <div className="stk-cat__row">
                      <Dot light={c.light} />
                      <span className="stk-cat__label">{CAT_LABEL[c.key]}</span>
                      <span className="stk-cat__sub">{CAT_SUB[c.key]}</span>
                      <span className="stk-cat__pct t-num">{c.pct == null ? "—" : c.pct + "%"}</span>
                    </div>
                    {c.conflict && <div className="stk-cat__conflict"><i className="ph ph-trend-down" aria-hidden="true" /> {c.conflict}</div>}
                    {c.note && !c.conflict && <div className="stk-cat__note">{c.note}</div>}
                    <div className="stk-items">
                      {c.items.map(function (it) {
                        const k = c.key + ":" + it.key, open = openKey === k;
                        return (
                          <div key={it.key} className="stk-item">
                            <button type="button" className="stk-item__btn" onClick={function () { setOpenKey(open ? null : k); }}>
                              <Dot light={it.light} />
                              <span className="stk-item__name">{it.name}</span>
                              <span className="stk-item__val">{it.verdict}</span>
                              <i className={"ph " + (open ? "ph-caret-up" : "ph-question")} aria-hidden="true" />
                            </button>
                            {open && <div className="stk-item__desc">{it.desc}</div>}
                          </div>
                        );
                      })}
                    </div>
                  </div>
                );
              })}
            </div>
          </section>

          {/* 技術面(分開、不計分)*/}
          {s.technical.length > 0 && (
            <section className="fpage__card">
              <div className="fpage__card-head"><span className="t-overline">技術面 · 短線時機</span><span className="fpage__card-hint">不計入分數</span></div>
              <div className="stk-cats">
                {s.technical.map(function (t, i) {
                  return <div key={i} className="stk-cat__row"><Dot light={t.light} /><span className="stk-cat__label">{t.name}</span><span className="stk-item__val">{t.signal}</span></div>;
                })}
              </div>
            </section>
          )}

          {/* 盲區 + 免責 */}
          <section className="fpage__card stk-disclaim">
            <div className="fpage__card-head"><span className="t-overline"><i className="ph ph-eye-slash" aria-hidden="true" /> 這工具看不到什麼</span></div>
            {s.notes.map(function (n, i) { return <p key={i} className="stk-note">{n}</p>; })}
          </section>
        </React.Fragment>
      );
    }

    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">
                <div className="fpage__card-head"><span className="t-overline">查台股</span><span className="fpage__card-hint">輸入代號</span></div>
                <div className="stk-search">
                  <Input inputMode="numeric" placeholder="例:2330 台積電" value={id}
                    onChange={function (e) { setId(e.target.value); }}
                    onKeyDown={function (e) { if (e.key === "Enter") lookup(); }} />
                  <Button variant="primary" onClick={lookup} loading={busy}>查健檢</Button>
                </div>
                <p className="prot-sum__note">用財報指標看一家公司的體質——<b>教材型、非投資建議</b>。資料來自 FinMind,免費、可能有延遲。</p>
              </section>

              {busy && <section className="fpage__card"><div className="fx-now"><span className="fx-now__unit">抓 FinMind 資料中</span><span className="fx-now__rate">…</span></div></section>}
              {res && res.error && <section className="fpage__card"><div className="fx-advice fx-advice--mid"><span className="fx-advice__txt">⚠️ {res.error}</span></div></section>}
              {res && res.etf && (
                <section className="fpage__card">
                  <div className="stk-head"><div><span className="stk-name">{res.name}</span><span className="stk-code t-num">{res.code}</span></div></div>
                  <div className="fx-advice fx-advice--mid" style={{ marginTop: 12 }}><span className="fx-advice__txt">這是 ETF / 無個股財報,不適用個股基本面評分。ETF 請看淨值、折溢價、追蹤誤差、總費用率。</span></div>
                </section>
              )}
              {res && res.score && report()}
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.StockScreen = StockScreen;
})();