// 籌碼雷達 — 全市場三大法人買賣超排行
const { useState, useEffect, useRef } = React;

function ChipRadarApp() {
  const [data, setData]     = useState(null);
  const [tab, setTab]       = useState('buy');   // buy | sell | foreign | trust
  const [loading, setLoad]  = useState(true);
  const [err, setErr]       = useState('');

  useEffect(() => {
    fetch('/api/stock?type=chip_top')
      .then(r => r.json())
      .then(d => { if (d.ok) setData(d); else setErr(d.error); })
      .catch(e => setErr(e.message))
      .finally(() => setLoad(false));
  }, []);

  function goStock(code) { location.href = `個股技術分析.html?code=${code}`; }

  const tabs = [
    { id: 'buy',     label: '三大法人 買超 Top 30' },
    { id: 'sell',    label: '三大法人 賣超 Top 30' },
    { id: 'foreign', label: '外資 排行' },
    { id: 'trust',   label: '投信 排行' },
  ];

  function getRows() {
    if (!data) return [];
    if (tab === 'buy')     return data.buy_top;
    if (tab === 'sell')    return data.sell_top;
    if (tab === 'foreign') return [...data.buy_top, ...data.sell_top].sort((a,b) => b.foreign_net - a.foreign_net).slice(0, 30);
    if (tab === 'trust')   return [...data.buy_top, ...data.sell_top].sort((a,b) => b.trust_net - a.trust_net).slice(0, 30);
    return [];
  }

  function fmtK(n) {
    const abs = Math.abs(n);
    if (abs >= 100000000) return (n / 100000000).toFixed(1) + '億張';
    if (abs >= 10000) return (n / 10000).toFixed(1) + '萬張';
    return n.toLocaleString() + '張';
  }

  function bar(val, maxVal) {
    const pct = Math.min(100, Math.abs(val) / maxVal * 100);
    const color = val >= 0 ? 'var(--crimson)' : 'var(--teal)';
    return (
      <div style={{ display:'flex', alignItems:'center', gap:6 }}>
        <div style={{ flex:1, background:'var(--paper-line)', borderRadius:2, height:6, overflow:'hidden' }}>
          <div style={{ width: pct+'%', background: color, height:'100%', transition:'width .3s' }}/>
        </div>
        <span style={{ color, fontSize:'var(--fs-xs)', minWidth:80, textAlign:'right' }}>{val >= 0 ? '+' : ''}{fmtK(val)}</span>
      </div>
    );
  }

  const rows = getRows();
  const maxVal = rows.length ? Math.max(...rows.map(r => Math.abs(r.total_net))) : 1;
  const maxForeign = rows.length ? Math.max(...rows.map(r => Math.abs(r.foreign_net))) : 1;
  const maxTrust   = rows.length ? Math.max(...rows.map(r => Math.abs(r.trust_net)))   : 1;

  return (
    <div className="frame-card" style={{ maxWidth:900, margin:'0 auto 40px', padding:'24px 26px' }}>
      <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.FlowDeltaIcon && (
          <window.FlowDeltaIcon size={26} color="var(--gold-deep)" strokeWidth={1.4} style={{ marginTop:6, flexShrink:0 }} />
        )}
        <window.SectionHead kicker="Institutional Flow" title="籌碼雷達" titleEn="Chip Radar" sub="三大法人買賣超排行"/>
      </div>
      {loading && <div style={{ textAlign:'center', color:'var(--ink-mute)', padding:60 }}>載入中…</div>}
      {err     && <div style={{ color:'var(--crimson)', padding:20 }}>{err}</div>}
      {data && (
        <>
          <div style={{ fontSize:'var(--fs-xs)', color:'var(--ink-mute)', marginBottom:16 }}>
            資料日期：{data.date.slice(0,4)}/{data.date.slice(4,6)}/{data.date.slice(6,8)}　來源：TWSE
          </div>

          {/* Tab */}
          <div style={{ display:'flex', gap:8, marginBottom:20, flexWrap:'wrap' }}>
            {tabs.map(t => (
              <button key={t.id} onClick={() => setTab(t.id)} style={{
                padding:'7px 14px', borderRadius:2, border:'1px solid',
                borderColor: tab===t.id ? 'var(--gold)' : 'var(--paper-line)',
                background: tab===t.id ? 'var(--ink)' : 'var(--paper)',
                color: tab===t.id ? 'var(--gold-leaf)' : 'var(--ink-mute)',
                fontFamily:'var(--font-cn)',
                fontSize:'var(--fs-sm)', cursor:'pointer', transition:'all .15s',
              }}>{t.label}</button>
            ))}
          </div>

          {/* Table */}
          <div style={{ background:'var(--paper-bright)', border:'1px solid var(--paper-line)', borderRadius:4, overflow:'hidden' }}>
            <div style={{ display:'grid', gridTemplateColumns:'32px 80px 1fr 1fr 1fr', gap:0, padding:'8px 16px',
              borderBottom:'1px solid var(--paper-line)', fontSize:'var(--fs-nano)', color:'var(--ink-mute)', letterSpacing:'.05em' }}>
              <span>#</span><span>代號</span><span>名稱／三大法人</span>
              <span style={{textAlign:'right'}}>外資</span>
              <span style={{textAlign:'right'}}>投信</span>
            </div>

            {rows.map((r, i) => {
              const isMainBuy = tab === 'buy' || tab === 'sell';
              const netVal = tab === 'foreign' ? r.foreign_net : tab === 'trust' ? r.trust_net : r.total_net;
              const mx     = tab === 'foreign' ? maxForeign : tab === 'trust' ? maxTrust : maxVal;
              const rowBg = i % 2 === 0 ? 'transparent' : 'var(--paper)';
              return (
                <div key={r.code} onClick={() => goStock(r.code)} style={{
                  display:'grid', gridTemplateColumns:'32px 80px 1fr 1fr 1fr',
                  gap:0, padding:'10px 16px', cursor:'pointer',
                  borderBottom:'1px dashed var(--paper-line)',
                  background: rowBg,
                  transition:'background .15s',
                }} onMouseEnter={e => e.currentTarget.style.background='rgba(184,146,77,.08)'}
                   onMouseLeave={e => e.currentTarget.style.background = rowBg}>
                  <span style={{ color:'var(--ink-faint)', fontSize:'var(--fs-xs)' }}>{i+1}</span>
                  <span style={{ color:'var(--gold-deep)', fontSize:'var(--fs-sm)', fontWeight:'bold' }}>{r.code}</span>
                  <div>
                    <div style={{ fontSize:'var(--fs-sm)', color:'var(--ink)', marginBottom:4 }}>{r.name}</div>
                    {bar(netVal, mx)}
                  </div>
                  <div style={{ textAlign:'right', fontSize:'var(--fs-xs)', color: r.foreign_net >= 0 ? 'var(--crimson)' : 'var(--teal)' }}>
                    {r.foreign_net >= 0 ? '+' : ''}{fmtK(r.foreign_net)}
                  </div>
                  <div style={{ textAlign:'right', fontSize:'var(--fs-xs)', color: r.trust_net >= 0 ? 'var(--crimson)' : 'var(--teal)' }}>
                    {r.trust_net >= 0 ? '+' : ''}{fmtK(r.trust_net)}
                  </div>
                </div>
              );
            })}
          </div>
        </>
      )}
    </div>
  );
}

window.ChipRadarApp = ChipRadarApp;

const _root = document.getElementById('root');
if (_root) ReactDOM.createRoot(_root).render(React.createElement(ChipRadarApp));