/* page-github.jsx — GitHub AI Radar: momentum feed + watchlist */
const { useState: useStateG, useMemo: useMemoG } = React;
const { REPOS_FULL, REPO_CATS } = window.RADAR;

const G_COLORS = ['#2563eb', '#7c3aed', '#06b6d4', '#10b981', '#db2777', '#f59e0b'];
const G_WINDOWS = [
  { key: 'today', field: 'today', label: 'Today', suf: 'today' },
  { key: 'week', field: 'week', label: 'This week', suf: 'this week' },
];
const G_SORTS = [
  { key: 'momentum', label: 'Momentum' },
  { key: 'stars', label: 'Stars' },
];

function gFmt(n) { return n >= 1000 ? (n / 1000).toFixed(1).replace(/\.0$/, '') + 'k' : String(n); }

function GithubPage() {
  useRevealAll();
  const [cat, setCat] = useStateG('All');
  const [win, setWin] = useStateG('today');
  const [sort, setSort] = useStateG('momentum');
  const [q, setQ] = useStateG('');
  const [watchedOnly, setWatchedOnly] = useStateG(false);
  const [watched, setWatched] = useStateG(() => {
    try { return new Set(JSON.parse(localStorage.getItem('arr_watch') || '[]')); } catch (e) { return new Set(); }
  });

  const field = G_WINDOWS.find((w) => w.key === win).field;
  const suf = G_WINDOWS.find((w) => w.key === win).suf;

  const toggleWatch = (id) => setWatched((prev) => {
    const n = new Set(prev);
    n.has(id) ? n.delete(id) : n.add(id);
    localStorage.setItem('arr_watch', JSON.stringify([...n]));
    return n;
  });

  const list = useMemoG(() => {
    let arr = REPOS_FULL.filter((r) => {
      const id = r.owner + '/' + r.name;
      if (watchedOnly && !watched.has(id)) return false;
      if (cat !== 'All' && r.cat !== cat) return false;
      if (q && !(r.name + ' ' + r.owner + ' ' + r.desc + ' ' + r.tags.join(' ')).toLowerCase().includes(q.toLowerCase())) return false;
      return true;
    });
    arr = [...arr].sort((a, b) => sort === 'stars' ? b.stars - a.stars : b[field] - a[field]);
    return arr;
  }, [cat, win, sort, q, watchedOnly, watched, field]);

  const hotSet = useMemoG(() => new Set(
    [...REPOS_FULL].sort((a, b) => b[field] - a[field]).slice(0, 3).map((r) => r.owner + '/' + r.name)
  ), [field]);

  return (
    <>
      <Nav active="github" />
      <PageHero eyebrow="GitHub AI radar" title={<>Watch the breakouts <span className="grad-text">happen.</span></>}
        sub="Star velocity across 142,307 tracked AI repositories — agents, MCP servers, inference engines and whatever ships tonight.">
        <div className="search" style={{ maxWidth: 440 }}>
          <span className="ic">⌕</span>
          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search repos, owners, topics…" />
        </div>
      </PageHero>

      <main className="wrap page-body">
        <div className="gh-toolbar reveal">
          <div className="pills" style={{ marginBottom: 0 }}>
            {REPO_CATS.map((c) => (
              <button key={c} className={'pill' + (cat === c ? ' on' : '')} onClick={() => setCat(c)}>{c}</button>
            ))}
          </div>
          <div style={{ flex: 1 }}></div>
          <div className="pills" style={{ marginBottom: 0 }}>
            {G_WINDOWS.map((w) => (
              <button key={w.key} className={'pill' + (win === w.key ? ' on' : '')} onClick={() => setWin(w.key)}>{w.label}</button>
            ))}
          </div>
          <div className="pills" style={{ marginBottom: 0 }}>
            {G_SORTS.map((s) => (
              <button key={s.key} className={'pill' + (sort === s.key ? ' on' : '')} onClick={() => setSort(s.key)}>{s.label}</button>
            ))}
            <button className={'pill' + (watchedOnly ? ' on' : '')} onClick={() => setWatchedOnly(!watchedOnly)}>
              ★ Watchlist{watched.size > 0 ? ` (${watched.size})` : ''}
            </button>
          </div>
        </div>

        <div className="gh-rows reveal">
          {list.map((r, i) => {
            const id = r.owner + '/' + r.name;
            return (
              <div className="gh-row" key={id}>
                <div className="gh-rank">{String(i + 1).padStart(2, '0')}</div>
                <div>
                  <div className="gh-name">
                    <a href={'https://github.com/' + id} target="_blank" rel="noreferrer">
                      <span className="owner">{r.owner}/</span>{r.name}
                    </a>
                    {hotSet.has(id) && <span className="hot-pill">Hot</span>}
                  </div>
                  <div className="gh-desc">{r.desc}</div>
                  <div className="gh-meta">
                    <span className="gh-lang"><span className="dot" style={{ background: r.langColor }}></span>{r.lang}</span>
                    {r.tags.map((t) => <span className="gh-tag" key={t}>{t}</span>)}
                  </div>
                </div>
                <div className="gh-spark"><MiniSpark data={r.spark} color={G_COLORS[i % G_COLORS.length]} w={150} h={36} /></div>
                <div className="gh-stars">
                  <div className="tot">★ {gFmt(r.stars)}</div>
                  <div className="d">+{gFmt(r[field])} {suf}</div>
                </div>
                <button className={'watch-btn' + (watched.has(id) ? ' on' : '')} onClick={() => toggleWatch(id)}
                  title={watched.has(id) ? 'Remove from watchlist' : 'Add to watchlist'}>
                  {watched.has(id) ? '★' : '☆'}
                </button>
              </div>
            );
          })}
          {list.length === 0 && <p className="empty-note">{watchedOnly ? 'Your watchlist is empty — star a repo to track it here.' : 'No repos match those filters.'}</p>}
        </div>
      </main>
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<GithubPage />);