// 雷達區 — 量化平台統一殼（2026-07-20 瘦身：8 分頁 → 4 分頁）
//   研判中樞 desk（預設；機構覆蓋/金融團隊入口收在中樞內）
//   訊號掃描 signals（黃金交叉 ◉／選股工坊 ○ 內部 pill 切換）
//   籌碼風向 flows（券資比榜 + 三大法人榜 上下堆疊）
//   策略實驗室 lab
// 舊 tab 參數相容：scan/stocklab→signals、margin/chip→flows、coverage/team→desk。
// 分頁 JSX 走 jsx-loader 隨選編譯；各分頁 app 依然掛 window.XApp。
const { useState, useEffect } = React;

const LEGACY_TAB = { scan: 'signals', stocklab: 'signals', margin: 'flows', chip: 'flows', coverage: 'desk', team: 'desk' };

const TABS = [
  { id: 'desk',    label: '研判中樞',   en: 'The Desk',      Icon: window.RadarDialIcon,
    files: ['team-icons.jsx', 'brain-desk.jsx'], global: 'BrainDeskApp' },
  { id: 'signals', label: '訊號掃描',   en: 'Signal Scan',   Icon: window.GoldenCrossIcon,
    files: ['scan.jsx'], global: 'ScanApp' },   // 選股工坊 pill 切到才補載 stock-lab.jsx
  { id: 'flows',   label: '籌碼風向',   en: 'Money Flows',   Icon: window.FlowDeltaIcon,
    files: ['margin-radar.jsx', 'chip-radar.jsx'], global: 'ChipRadarApp' },
  { id: 'lab',     label: '策略實驗室', en: 'Strategy Lab',  Icon: window.FlaskLabIcon,
    files: ['lab-icons.jsx', 'strategy-lab.jsx'], global: 'StrategyLabApp' },
];

// ── Desk Strip 連接組織：四分頁共用終端狀態帶 ──
//   輕量 pub/sub store：各 tab app 算好關鍵數字時 QhStrip.set(tab, items)，
//   殼層 <DeskStrip> 訂閱後在 pill 下方統一渲染（低耦合、不動各頁內部）。
//   item: { label, value, sub?, tone? }  tone ∈ up|dn|flat|gold（終端紅漲綠跌）
window.QhStrip = window.QhStrip || (function () {
  var store = {}, subs = new Set();
  return {
    set: function (tab, items) { store[tab] = items; subs.forEach(function (f) { f(); }); },
    get: function (tab) { return store[tab] || null; },
    sub: function (f) { subs.add(f); return function () { subs.delete(f); }; },
  };
})();

function DeskStrip({ active }) {
  const [, force] = useState(0);
  useEffect(function () {
    return window.QhStrip.sub(function () { force(function (n) { return n + 1; }); });
  }, []);
  const items = window.QhStrip.get(active);
  if (!items || !items.length) {
    return <div className="qd-strip loading" aria-hidden="true"><div className="qd-strip-skel" /></div>;
  }
  return (
    <div className="qd-strip" role="status" aria-label="工作台即時狀態">
      {items.map(function (it, i) {
        return (
          <div className="qd-strip-cell" key={i}>
            <span className="qd-strip-lbl">{it.label}</span>
            <span className={'qd-strip-val' + (it.tone && it.sub == null ? ' ' + it.tone : '')}>
              {it.value}
              {it.sub != null && <span className={'sub' + (it.tone ? ' ' + it.tone : '')}>{it.sub}</span>}
            </span>
          </div>
        );
      })}
      <div className="qd-strip-id"><span className="dot" />The Quant Desk</div>
    </div>
  );
}

function loadTab(tab) {
  return tab.files.reduce(
    (p, f) => p.then(() => f.endsWith('.js') ? window.loadScript(f) : window.loadJsx(f)),
    Promise.resolve()
  );
}

function TabSkeleton({ label }) {
  return (
    <div className="qd-skel">
      <div className="bar w40" />
      <div className="bar w80" />
      <div className="bar" />
      <div className="bar w60" />
      <div className="note">「{label}」載入中——首次開啟才編譯這個分頁，之後即時切換。</div>
    </div>
  );
}

// ── 訊號掃描：黃金交叉 / 選股工坊 內部 pill 切換 ──
function SignalScanApp() {
  const [mode, setMode] = useState(() => {
    const t = new URLSearchParams(window.location.search).get('tab');
    return t === 'stocklab' ? 'stocklab' : 'scan';
  });
  const [, setTick] = useState(0);
  const [err, setErr] = useState('');

  useEffect(() => {
    const need = mode === 'stocklab' ? 'StockLabApp' : 'ScanApp';
    const file = mode === 'stocklab' ? 'stock-lab.jsx' : 'scan.jsx';
    if (window[need]) return;
    window.loadJsx(file).then(() => setTick(n => n + 1)).catch(e => setErr(e.message));
  }, [mode]);

  const pills = [
    { id: 'scan',     cn: '黃金交叉', en: 'Cross Radar', hint: '全市場 MACD 掃描' },
    { id: 'stocklab', cn: '選股工坊', en: 'Smart Radar', hint: '多因子篩選＋五力' },
  ];
  const ready = mode === 'stocklab' ? window.StockLabApp : window.ScanApp;

  return (
    <div>
      <div style={{ display: 'flex', gap: 10, padding: '2px 4px 6px', flexWrap: 'wrap' }}>
        {pills.map(p => {
          const on = mode === p.id;
          return (
            <button key={p.id} onClick={() => setMode(p.id)} style={{
              padding: '8px 20px', cursor: 'pointer', borderRadius: 3,
              border: on ? '1.5px solid var(--gold)' : '1px solid var(--paper-line)',
              background: on ? 'var(--ink)' : 'var(--paper)',
              color: on ? 'var(--gold-leaf)' : 'var(--ink-mute)',
              fontFamily: 'var(--font-cn)', fontSize: 'var(--fs-sm)', letterSpacing: '.08em',
              transition: 'all .15s',
            }}>
              {on ? '◉ ' : '○ '}{p.cn}
              <span style={{ fontFamily: 'var(--font-en)', fontStyle: 'italic', fontSize: 'var(--fs-nano)', marginLeft: 7, opacity: .8 }}>{p.en}</span>
              <span style={{ fontFamily: 'var(--font-cn)', fontSize: 'var(--fs-nano)', marginLeft: 7, opacity: .65 }}>{p.hint}</span>
            </button>
          );
        })}
      </div>
      {err && <div style={{ padding: 18, fontFamily: 'var(--font-cn)', color: 'var(--bear)', fontSize: 'var(--fs-sm)' }}>⚠ {err}</div>}
      {!err && !ready && <TabSkeleton label={pills.find(p => p.id === mode).cn} />}
      {ready && mode === 'scan'     && window.ScanApp     && <window.ScanApp embedded />}
      {ready && mode === 'stocklab' && window.StockLabApp && <window.StockLabApp embedded defaultTab="radar" />}
    </div>
  );
}

// ── 籌碼風向：券資比榜 + 三大法人榜 上下堆疊 ──
function MoneyFlowsApp() {
  return (
    <div>
      {window.MarginRadarApp && <window.MarginRadarApp embedded />}
      <div style={{ margin: '8px 0 26px', borderTop: '1.5px solid var(--paper-line)', position: 'relative' }}>
        <span style={{
          position: 'absolute', top: -11, left: '50%', transform: 'translateX(-50%)',
          background: 'var(--paper)', padding: '0 14px',
          fontFamily: 'var(--font-en)', fontStyle: 'italic', fontSize: 'var(--fs-nano)', color: 'var(--gold-deep)', letterSpacing: '.14em',
        }}>❦ Institutional Flow</span>
      </div>
      {window.ChipRadarApp && <window.ChipRadarApp />}
    </div>
  );
}

function RadarZoneApp() {
  const [activeTab, setActiveTab] = useState(() => {
    const t = new URLSearchParams(window.location.search).get('tab');
    if (TABS.some(x => x.id === t)) return t;
    if (LEGACY_TAB[t]) return LEGACY_TAB[t];   // 舊網址相容
    return 'desk';
  });
  const [, setTick] = useState(0);
  const [loadErr, setLoadErr] = useState(null);

  function switchTab(id) {
    setActiveTab(id);
    setLoadErr(null);
    const p = new URLSearchParams(window.location.search);
    p.set('tab', id);
    history.replaceState(null, '', '?' + p.toString());
  }

  const current = TABS.find(t => t.id === activeTab);
  const ready = current && !!window[current.global];

  useEffect(() => {
    if (!current || window[current.global]) return;
    let dead = false;
    loadTab(current)
      .then(() => { if (!dead) setTick(n => n + 1); })
      .catch(e => { if (!dead) setLoadErr(e.message || String(e)); });
    return () => { dead = true; };
  }, [activeTab]);

  // 首個分頁就緒後閒時預抓其餘
  useEffect(() => {
    if (!ready) return;
    const idle = window.requestIdleCallback || (fn => setTimeout(fn, 2500));
    const handle = idle(() => {
      TABS.filter(t => !window[t.global])
        .reduce((p, t) => p.then(() => loadTab(t).catch(() => {})), Promise.resolve());
    });
    return () => { (window.cancelIdleCallback || clearTimeout)(handle); };
  }, [ready]);

  const CurrentApp = ready ? window[current.global] : null;

  return (
    <div className="shell">
      <window.Masthead active="radarzone" />
      <window.TickerTape />
      <window.NavBar active="radarzone" />

      <section className="cover" style={{ paddingTop: 32, marginBottom: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          {window.RadarDialIcon && (
            <window.RadarDialIcon size={46} color="var(--gold-deep)" strokeWidth={1.3} spin />
          )}
          <div>
            <div className="stock-eyebrow">
              <span style={{ fontStyle: 'italic' }}>The Quant Desk</span>
              <span className="kai" style={{ marginLeft: 10 }}>雷達區</span>
            </div>
            <p style={{ fontSize: 'var(--fs-xs)', color: 'var(--ink-mute)', marginTop: 6 }}>
              研判、掃描、籌碼、回測——四個工作台，切到才載入。
            </p>
          </div>
        </div>
      </section>

      {/* Tab Bar */}
      <div style={{
        display: 'flex', gap: 0, flexWrap: 'wrap',
        borderBottom: '1.5px solid var(--paper-line)',
        marginBottom: 0,
        background: 'var(--paper-bright)',
        paddingLeft: 8,
      }}>
        {TABS.map(function(t) {
          var active = activeTab === t.id;
          return (
            <button key={t.id}
              onClick={function() { switchTab(t.id); }}
              style={{
                position: 'relative',
                padding: '13px 30px 11px',
                border: 'none',
                cursor: 'pointer',
                background: active ? 'var(--paper)' : 'transparent',
                marginBottom: -1.5,
                fontFamily: 'var(--font-cn)',
                fontSize: 'var(--fs-sm)',
                color: active ? 'var(--ink)' : 'var(--ink-mute)',
                letterSpacing: '.1em',
                transition: 'color .18s',
                outline: 'none',
              }}>
              <span style={{
                position: 'absolute', bottom: 0, left: active ? 16 : 32, right: active ? 16 : 32,
                height: 2,
                background: active ? 'var(--gold)' : 'transparent',
                borderRadius: 1,
                transition: 'left .2s, right .2s, background .2s',
              }} />
              {t.Icon && (
                <t.Icon size={15} color={active ? 'var(--gold-deep)' : 'var(--ink-mute)'} strokeWidth={1.5}
                  style={{ verticalAlign: '-3px', marginRight: 6 }} />
              )}
              <span className="kai" style={{ fontFamily: 'var(--font-cn)' }}>{t.label}</span>
              <span style={{
                display: 'inline-block',
                marginLeft: 7,
                fontSize: 'var(--fs-nano)',
                fontStyle: 'italic',
                fontFamily: 'var(--font-en)',
                color: active ? 'var(--gold)' : 'var(--ink-mute)',
                letterSpacing: '.04em',
                opacity: active ? 1 : 0.7,
                transition: 'color .18s, opacity .18s',
              }}>
                {t.en}
              </span>
            </button>
          );
        })}
      </div>

      {/* Desk Strip：四分頁共用終端狀態帶（連接組織，pill 正下方永遠在） */}
      <DeskStrip active={activeTab} />

      {loadErr && (
        <div style={{ padding: '22px 8px', fontFamily: 'var(--font-cn)', fontSize: 'var(--fs-sm)', color: 'var(--bear)' }}>
          ⚠ 分頁載入失敗（{loadErr}）——請重新整理再試。
        </div>
      )}
      {!loadErr && !ready && current && <TabSkeleton label={current.label} />}

      {ready && activeTab === 'desk'    && <CurrentApp embedded />}
      {ready && activeTab === 'signals' && <SignalScanApp />}
      {ready && activeTab === 'flows'   && <MoneyFlowsApp />}
      {ready && activeTab === 'lab'     && <CurrentApp embedded />}

      <window.FooterBar />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('zone-root')).render(<RadarZoneApp />);