// 券資比雷達 — Margin & Short-Sale Speculation Radar
// 取代原本的「當沖雷達」(當沖比率排行，已改用 TWTB4U 併入他處/棄用)。
// 投機客真正每天在盯的兩張榜：融資使用率暴增(短線過熱) + 潛在軋空(融券佔比高)。
const { useState, useEffect, useCallback } = React;

function fmtPct(v, decimals) {
  const d = decimals ?? 2;
  return (v > 0 ? '+' : '') + v.toFixed(d) + '%';
}

function ChgCell({ chgPct, close }) {
  if (!close) return <span style={{ color: 'var(--ink-faint)' }}>—</span>;
  const col = chgPct > 0 ? 'var(--bull)' : chgPct < 0 ? 'var(--bear)' : 'var(--ink-mute)';
  return (
    <span style={{ color: col }}>
      {close.toFixed(1)}（{fmtPct(chgPct, 2)}）
    </span>
  );
}

function MarginSurgeTable({ items }) {
  if (!items.length) return (
    <div className="mr-notice">
      <span className="ornament">❦</span>
      <span className="kai">今日沒有融資使用率明顯暴增的標的</span>
    </div>
  );
  return (
    <div className="mr-table-wrap">
      <table className="mr-table">
        <colgroup>
          <col style={{ width: 32 }} /><col style={{ width: 60 }} /><col />
          <col style={{ width: 70 }} /><col style={{ width: 60 }} /><col style={{ width: 110 }} />
        </colgroup>
        <thead>
          <tr>
            <th></th>
            <th className="kai">代號</th>
            <th className="kai">名稱</th>
            <th className="kai mr-th-r">使用率</th>
            <th className="kai mr-th-r">Δ較前日</th>
            <th className="kai mr-th-r">現價/漲跌</th>
          </tr>
        </thead>
        <tbody>
          {items.map((d, i) => (
            <tr key={d.code} className="mr-row">
              <td><span className={`mr-rank${i < 3 ? ' mr-rank--top3' : ''}`}>{i + 1}</span></td>
              <td className="num">{d.code}</td>
              <td className="mr-stock-name kai">{d.name}</td>
              <td className="num mr-td-r">{(d.marginUsage * 100).toFixed(1)}%</td>
              <td className="num mr-td-r" style={{ color: 'var(--bear)', fontWeight: 600 }}>
                +{d.marginUsageDeltaPp.toFixed(2)}pp
              </td>
              <td className="num mr-td-r">
                <ChgCell chgPct={d.chgPct} close={d.close} />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function ShortSqueezeTable({ items }) {
  if (!items.length) return (
    <div className="mr-notice">
      <span className="ornament">❦</span>
      <span className="kai">今日沒有符合門檻的融券集中標的</span>
    </div>
  );
  return (
    <div className="mr-table-wrap">
      <table className="mr-table">
        <colgroup>
          <col style={{ width: 32 }} /><col style={{ width: 60 }} /><col />
          <col style={{ width: 70 }} /><col style={{ width: 70 }} /><col style={{ width: 110 }} />
        </colgroup>
        <thead>
          <tr>
            <th></th>
            <th className="kai">代號</th>
            <th className="kai">名稱</th>
            <th className="kai mr-th-r">融券佔比</th>
            <th className="kai mr-th-r">融券餘額</th>
            <th className="kai mr-th-r">現價/漲跌</th>
          </tr>
        </thead>
        <tbody>
          {items.map((d, i) => {
            const potential = d.chgPct > 3; // 融券高 + 今日大漲：潛在軋空火苗
            return (
              <tr key={d.code} className="mr-row">
                <td><span className={`mr-rank${i < 3 ? ' mr-rank--top3' : ''}`}>{i + 1}</span></td>
                <td className="num">{d.code}</td>
                <td className="mr-stock-name kai">
                  {d.name}{potential ? <span title="融券高＋今日大漲，留意軋空" style={{ marginLeft: 4 }}>🎯</span> : null}
                </td>
                <td className="num mr-td-r">{(d.shortRatio * 100).toFixed(2)}%</td>
                <td className="num mr-td-r">{d.shortToday.toLocaleString()}張</td>
                <td className="num mr-td-r">
                  <ChgCell chgPct={d.chgPct} close={d.close} />
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

function MarginRadarApp({ embedded }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);

  const load = useCallback(() => {
    setLoading(true);
    setError(false);
    fetch('/api/stock?type=margin_short')
      .then(r => r.json())
      .then(d => {
        setData(d);
        setLoading(false);
      })
      .catch(() => {
        setError(true);
        setLoading(false);
      });
  }, []);

  useEffect(() => { load(); }, [load]);

  const marginSurge = data?.marginSurge || [];
  const shortSqueeze = data?.shortSqueeze || [];

  // Desk Strip：發佈籌碼風向狀態到四分頁共用狀態帶（雷達區嵌入時）
  useEffect(() => {
    if (!window.QhStrip) return;
    window.QhStrip.set('flows', [
      { label: '融資暴增', value: marginSurge.length, tone: 'gold' },
      { label: '潛在軋空', value: shortSqueeze.length, tone: 'up' },
      { label: '資料日', value: data?.date || '—' },
    ]);
  }, [marginSurge.length, shortSqueeze.length, data]);

  return (
    <div className={embedded ? '' : 'shell'}>
      {!embedded && <window.Masthead active="marginradar" />}
      {!embedded && <window.NavBar active="marginradar" />}
      {!embedded && <window.TickerTape />}

      <main className="mr-main">

        <section className="mr-intro frame-card">
          <div className="corner-tl" /><div className="corner-tr" />
          <div className="corner-bl" /><div className="corner-br" />
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
            {window.ScaleBalanceIcon && (
              <window.ScaleBalanceIcon size={28} color="var(--gold-deep)" strokeWidth={1.4}
                style={{ marginTop: 6, flexShrink: 0 }} />
            )}
            <window.SectionHead
              kicker="TWSE MI_MARGN + TPEx margin_balance · 上市櫃全市場"
              title="券資比雷達"
              titleEn="Margin & Short-Sale Radar"
              sub="投機客每天在盯的兩張榜：融資使用率暴增(短線過熱) ／ 潛在軋空(融券部位集中)"
            />
          </div>
          <p>
            <b>融資使用率暴增</b>：融資今日餘額佔融資限額的比率，較前一交易日跳升最多的標的——通常代表散戶籌碼快速湧入、短線過熱，追高風險也隨之升高。
            <br />
            <b>潛在軋空雷達</b>：融券今日餘額佔融券限額比重最高的標的——空方部位集中，若同時遇到股價走強（🎯 標記），籌碼面容易形成軋空行情。
          </p>
          <p style={{ fontSize: 11.5, color: 'var(--ink-faint)' }}>
            ⚠️ 純籌碼面統計，不構成任何買賣建議；資料為 T 日盤後公布，涵蓋上市（TWSE）＋上櫃（TPEx）。
          </p>
          <div className="mr-updated">
            {loading ? '讀取中…' : error ? '讀取失敗，稍後再試' : `資料日期：${data?.date || '—'}（上市＋上櫃）`}
            <button className="mr-refresh-btn" style={{ marginLeft: 10 }} onClick={load} disabled={loading}>
              🔄 重新整理
            </button>
          </div>
        </section>

        <div className="mr-grid">
          <section className="mr-panel frame-card">
            <div className="corner-tl" /><div className="corner-tr" />
            <div className="corner-bl" /><div className="corner-br" />
            <window.SectionHead kicker="融資使用率 較前日Δ" title="融資使用率暴增" titleEn="Margin Usage Surge" />
            <p className="mr-panel-note">門檻：融資限額≥1,000張、使用率≥10%，排除限額太小的冷門股雜訊。</p>
            {loading ? <div className="mr-notice kai">讀取中…</div>
              : error ? <div className="mr-notice kai">讀取失敗，稍後再試</div>
              : <MarginSurgeTable items={marginSurge} />}
          </section>

          <section className="mr-panel frame-card">
            <div className="corner-tl" /><div className="corner-tr" />
            <div className="corner-bl" /><div className="corner-br" />
            <window.SectionHead kicker="融券今日餘額/融券限額" title="潛在軋空雷達" titleEn="Short Squeeze Radar" />
            <p className="mr-panel-note">門檻：融券限額≥1,000張、今日餘額≥50張；🎯 標記今日漲幅逾 3% 者。</p>
            {loading ? <div className="mr-notice kai">讀取中…</div>
              : error ? <div className="mr-notice kai">讀取失敗，稍後再試</div>
              : <ShortSqueezeTable items={shortSqueeze} />}
          </section>
        </div>

      </main>

      {!embedded && <window.FooterBar />}
    </div>
  );
}
window.MarginRadarApp = MarginRadarApp;

const _marginRadarRoot = document.getElementById('root');
if (_marginRadarRoot) ReactDOM.createRoot(_marginRadarRoot).render(<MarginRadarApp />);