// page-dashboard.jsx
const { useState: useStateD, useMemo: useMemoD } = React;

function Dashboard({ lang, search, onOpenToken }) {
  const t = I18N[lang];
  const [tab, setTab] = useStateD('new');
  const [page, setPage] = useStateD(1);
  const perPage = 6;

  const filtered = useMemoD(() => {
    let arr = TOKENS.slice();
    if (search) {
      const q = search.toLowerCase();
      arr = arr.filter((t) => t.sym.toLowerCase().includes(q) || t.name.zh.includes(search) || t.name.en.toLowerCase().includes(q));
    }
    if (tab === 'new') arr.sort((a, b) => a.createdMin - b.createdMin);
    else if (tab === 'gainers') arr.sort((a, b) => b.ch24 - a.ch24);
    else arr.sort((a, b) => b.progress - a.progress);
    return arr;
  }, [tab, search]);

  const pages = Math.max(1, Math.ceil(filtered.length / perPage));
  const slice = filtered.slice((page - 1) * perPage, page * perPage);

  const setTabSafe = (x) => { setTab(x); setPage(1); window.scrollTo({ top: 0, behavior: 'smooth' }); };

  const king = TODAYS_KING;

  return (
    <div className="page" data-screen-label="01 Dashboard">
      <div className="page-head">
        <div>
          <h1 className="page-title">/ {t.nav_lobby.toLowerCase()}</h1>
          <div className="page-sub">&gt; {t.page_dashboard_sub}</div>
        </div>
        <div className="tabs">
          <button className={'tab ' + (tab === 'new' ? 'active' : '')} onClick={() => setTabSafe('new')}>{t.tab_new}</button>
          <button className={'tab ' + (tab === 'gainers' ? 'active' : '')} onClick={() => setTabSafe('gainers')}>{t.tab_gainers}</button>
          <button className={'tab ' + (tab === 'grad' ? 'active' : '')} onClick={() => setTabSafe('grad')}>{t.tab_grad}</button>
        </div>
      </div>

      {/* Today's King */}
      <div className="king scanlines">
        <div className="king-inner">
          <div className="king-avatar">{king.glyph}</div>
          <div className="king-meta">
            <div className="king-label">⚡ {t.today_king}</div>
            <h2 className="king-name">
              {king.name[lang]}<span className="king-sym">${king.sym}</span>
            </h2>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
              <span className="tag live">{t.live}</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-dim)' }}>holders {king.holders}</span>
            </div>
          </div>
          <div className="king-stats">
            <div>
              <label>{t.mcap}</label>
              <b>{fmtMcap(king.mcap)} <span style={{ color:'var(--text-faint)', fontSize:11 }}>TON</span></b>
            </div>
            <div>
              <label>24h</label>
              <b className="up">▲ {king.ch24.toFixed(1)}%</b>
            </div>
            <div>
              <label>{t.progress}</label>
              <b style={{ color: 'var(--accent)' }}>{king.progress.toFixed(1)}%</b>
            </div>
          </div>
        </div>
      </div>

      <div className="grid-dashboard">
        <div>
          <div className="token-grid">
            {slice.map((tk) => (
              <TokenCard key={tk.id} tok={tk} lang={lang} onClick={() => onOpenToken(tk.id)} />
            ))}
          </div>
          {pages > 1 && (
            <div className="pagi">
              <button onClick={() => setPage((p) => Math.max(1, p - 1))}>←</button>
              {Array.from({ length: pages }, (_, i) => i + 1).map((p) => (
                <button key={p} className={p === page ? 'active' : ''} onClick={() => { setPage(p); window.scrollTo({ top:0, behavior:'smooth' }); }}>{p}</button>
              ))}
              <button onClick={() => setPage((p) => Math.min(pages, p + 1))}>→</button>
            </div>
          )}
        </div>
        <LiveTicker lang={lang} />
      </div>
    </div>
  );
}

window.Dashboard = Dashboard;