// Live leaderboard with animated rank changes
const { useState: useStateL, useEffect: useEffectL, useRef: useRefL } = React;

function Leaderboard() {
  const initial = [
    { id: 'a1', name: '王○宏', code: 'T***092', return: 187.42, pnl: 2845600, trades: 428, change: 0 },
    { id: 'a2', name: 'Jessica L.', code: 'T***418', return: 172.85, pnl: 2318400, trades: 512, change: 0 },
    { id: 'a3', name: '陳○澤', code: 'T***771', return: 158.03, pnl: 1984200, trades: 367, change: 0 },
    { id: 'a4', name: 'Marcus C.', code: 'T***245', return: 141.67, pnl: 1672300, trades: 284, change: 0 },
    { id: 'a5', name: '林○瑄', code: 'T***630', return: 134.28, pnl: 1548900, trades: 456, change: 0 },
    { id: 'a6', name: '張○偉', code: 'T***158', return: 118.92, pnl: 1342700, trades: 319, change: 0 },
    { id: 'a7', name: 'Kenji T.', code: 'T***504', return: 105.47, pnl: 1128400, trades: 201, change: 0 },
    { id: 'a8', name: '黃○婷', code: 'T***867', return: 98.34, pnl: 982100, trades: 394, change: 0 },
    { id: 'a9', name: '吳○彥', code: 'T***012', return: 87.19, pnl: 854300, trades: 276, change: 0 },
    { id: 'a10', name: 'Sophia R.', code: 'T***683', return: 79.58, pnl: 742800, trades: 189, change: 0 },
  ];

  const [rows, setRows] = useStateL(initial);
  const [flashes, setFlashes] = useStateL({});
  const [lastUpdate, setLastUpdate] = useStateL(new Date());

  useEffectL(() => {
    const tick = () => {
      setRows(prev => {
        const updated = prev.map(r => {
          const drift = (Math.random() - 0.48) * 1.8;
          const newReturn = Math.max(10, r.return + drift);
          const newPnl = Math.round(r.pnl + drift * 15000);
          const newTrades = r.trades + (Math.random() > 0.7 ? 1 : 0);
          return { ...r, return: +newReturn.toFixed(2), pnl: newPnl, trades: newTrades, prevReturn: r.return };
        });
        updated.sort((a, b) => b.return - a.return);
        // compute rank change vs prev order
        const newFlashes = {};
        updated.forEach((r, i) => {
          const prevIndex = prev.findIndex(p => p.id === r.id);
          if (prevIndex !== i) {
            newFlashes[r.id] = prevIndex > i ? 'up' : 'down';
          }
          r.change = prevIndex - i;
        });
        setFlashes(newFlashes);
        setTimeout(() => setFlashes({}), 1000);
        return updated;
      });
      setLastUpdate(new Date());
    };
    const id = setInterval(tick, 3200);
    return () => clearInterval(id);
  }, []);

  const timeStr = lastUpdate.toTimeString().slice(0, 8);

  return (
    <section className="lb" id="leaderboard">
      <div className="deco">
        <div className="deco-scan"></div>
        <div className="deco-chart">
          <svg viewBox="0 0 1200 600" preserveAspectRatio="none">
            <defs>
              <linearGradient id="lbChartG" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="#5B9EFF" stopOpacity="0.18"/>
                <stop offset="100%" stopColor="#5B9EFF" stopOpacity="0"/>
              </linearGradient>
            </defs>
            <path d="M0,420 L80,380 L160,400 L240,340 L320,360 L400,290 L480,320 L560,250 L640,280 L720,200 L800,230 L880,160 L960,190 L1040,120 L1120,150 L1200,80 L1200,600 L0,600 Z" fill="url(#lbChartG)"/>
            <path d="M0,420 L80,380 L160,400 L240,340 L320,360 L400,290 L480,320 L560,250 L640,280 L720,200 L800,230 L880,160 L960,190 L1040,120 L1120,150 L1200,80" fill="none" stroke="#5B9EFF" strokeWidth="1.5" strokeOpacity="0.35"/>
          </svg>
        </div>
      </div>
      <div className="money-layer">
        <MoneyGoldCoin size="md" className="money-coin-lb-1 money-float-a" />
        <MoneyCoinStack size="md" className="money-coin-lb-2 money-float-b" />
      </div>
      <div className="shell">
        <div className="s-head">
          <div>
            <div className="s-label">LIVE LEADERBOARD · 即時排行榜</div>
            <h2 className="s-title">交易王<span className="accent">每秒都在改寫</span></h2>
          </div>
          <p className="s-sub">前 10 強報酬率排行榜（模擬示意）。實際競賽開始後，此處將呈現每日結算排名、週冠軍更替、以及冠軍寶座爭奪戰。</p>
        </div>

        <div className="lb-panel">
          <div className="lb-top">
            <span className="live"><span className="dot"></span>LIVE · 模擬資料示意</span>
            <span className="updated">LAST UPDATE · {timeStr}</span>
          </div>
          <table className="lb-table">
            <thead>
              <tr>
                <th style={{width:80}}>排名</th>
                <th>參賽者</th>
                <th className="r">累計損益</th>
                <th className="r">交易筆數</th>
                <th className="r">報酬率</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={r.id} className={flashes[r.id] === 'up' ? 'flash-up' : flashes[r.id] === 'down' ? 'flash-down' : ''}>
                  <td>
                    <span className={`lb-rank ${i===0?'top1':i===1?'top2':i===2?'top3':''}`}>
                      {String(i+1).padStart(2,'0')}
                      <span className={`arrow ${r.change>0?'up':r.change<0?'down':'eq'}`}>
                        {r.change>0?`▲${r.change}`:r.change<0?`▼${-r.change}`:'—'}
                      </span>
                    </span>
                  </td>
                  <td>
                    <div className="lb-user">
                      <div className="lb-avatar">{r.name.slice(0,1)}</div>
                      <div>
                        <div className="lb-name">{r.name}<small>{r.code}</small></div>
                      </div>
                    </div>
                  </td>
                  <td className={`lb-num ${r.pnl>=0?'up':'down'}`}>
                    {r.pnl>=0?'+':''}{r.pnl.toLocaleString()}
                  </td>
                  <td className="lb-num" style={{color:'var(--text-dim)'}}>{r.trades.toLocaleString()}</td>
                  <td className={`lb-num ${r.return>=0?'up':'down'}`}>
                    {r.return>=0?'+':''}{r.return.toFixed(2)}%
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          <div className="lb-foot">
            顯示前 10 名 · 完整排行榜於賽事開始後開放查詢 · <a style={{color:'var(--gold)'}}>查看完整排行榜 →</a>
          </div>
        </div>
      </div>
    </section>
  );
}