// Publications page — year-grouped list with sticky year labels.

function PubsHero() {
  return (
    <section className="page-hero">
      <span className="eyebrow">§ Publications</span>
      <h1>Publications.</h1>
    </section>
  );
}

function PubItem({ p, showYear }) {
  return (
    <li className="pubs-year__item">
      <span className="pubs-year__type">{p.type}{showYear && <><br />{p.year}</>}</span>
      <div>
        <div className="pubs-year__text">
          {p.text}
          {p.status && <span className="pubs-year__status">{p.status}</span>}
          {p.award && <span className="pubs-year__award">★ {p.award}</span>}
          {p.link && <a className="pubs-year__link" href={p.link} target="_blank" rel="noopener">Link ↗</a>}
        </div>
        <div className="pubs-year__tags">
          {p.tags.map(t => {
            const theme = window.LAB.THEMES[t];
            return theme
              ? <ThemeBadge key={t} theme={t} />
              : <span key={t} className="tag">{t}</span>;
          })}
        </div>
      </div>
    </li>
  );
}

// Years up to this one are shown together in one "and earlier" group.
const EARLIER_CUTOFF = 2020;

function PubsByYear() {
  // Group by year (descending); everything up to EARLIER_CUTOFF goes in one group.
  const groups = {};
  for (const p of window.LAB.PUBS) {
    const key = p.year <= EARLIER_CUTOFF ? 'earlier' : String(p.year);
    (groups[key] ||= []).push(p);
  }
  const keys = Object.keys(groups)
    .filter(k => k !== 'earlier')
    .sort((a, b) => Number(b) - Number(a));
  if (groups.earlier) keys.push('earlier');
  return keys.map(k => (
    <section key={k} className="pubs-year">
      {k === 'earlier'
        ? <div className="pubs-year__label pubs-year__label--range">{EARLIER_CUTOFF}<br />and earlier</div>
        : <div className="pubs-year__label">{k}</div>}
      <ul className="pubs-year__list">
        {groups[k].map((p, i) => <PubItem key={i} p={p} showYear={k === 'earlier'} />)}
      </ul>
    </section>
  ));
}

function PubsPage() {
  return (
    <>
      <SiteNav active="publications" />
      <PubsHero />
      <PubsByYear />
      <SiteFooter />
    </>
  );
}

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