// site-archive.jsx — drewmcguire.ai archive page

const THEMES = [
  { id: 'all',         label: 'All',                 match: () => true },
  { id: 'water',       label: 'Water',               match: (ep) => (ep.themes || []).includes('Water') },
  { id: 'energy',      label: 'Energy',              match: (ep) => (ep.themes || []).includes('Energy') },
  { id: 'corporate',   label: 'Corporate secrecy',   match: (ep) => (ep.themes || []).includes('Corporate secrecy') },
  { id: 'legislation', label: 'Legislation',         match: (ep) => (ep.themes || []).includes('Legislation') },
  { id: 'ai-infra',    label: 'AI infrastructure',   match: (ep) => (ep.themes || []).includes('AI infrastructure') },
  { id: 'records',     label: 'Public records',      match: (ep) => (ep.themes || []).includes('Public records') },
];

function ArchivePage() {
  const [active, setActive] = React.useState('all');
  const theme = THEMES.find(t => t.id === active);
  const filtered = window.EPISODES.filter(theme.match);
  const published = filtered.filter(e => e.status === 'published');
  const forthcoming = filtered.filter(e => e.status === 'forthcoming');

  return (
    <main>
      <PageHeader
        kicker="Deep Cuts · The archive"
        title={<span>Every file.<br/><span style={{ color: 'var(--teal-400)' }}>Every source.</span></span>}
        subtitle="Each investigation lives here in full. Sources, transcripts, the methodology that produced it. If a claim is in a video, the document is on this page."
      />

      {/* filter rail */}
      <section style={{ position: 'sticky', top: 'calc(var(--nav-h) + var(--telemetry-h))', zIndex: 30, background: 'rgba(7, 9, 10, 0.92)', backdropFilter: 'blur(12px)', borderBottom: '1px solid rgba(236,231,220,0.08)' }}>
        <div className="container" style={{ padding: '20px 32px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4, overflowX: 'auto', WebkitOverflowScrolling: 'touch', scrollbarWidth: 'none' }}>
            <Kicker color="var(--gray-400)" style={{ marginRight: 16, flexShrink: 0 }}>Filter</Kicker>
            {THEMES.map(t => {
              const isActive = active === t.id;
              const count = window.EPISODES.filter(t.match).length;
              return (
                <button
                  key={t.id}
                  onClick={() => setActive(t.id)}
                  style={{
                    padding: '10px 16px',
                    fontFamily: "'IBM Plex Mono', monospace",
                    fontSize: 11, fontWeight: 500,
                    letterSpacing: '0.22em', textTransform: 'uppercase',
                    color: isActive ? 'var(--ink-950)' : 'var(--gray-300)',
                    background: isActive ? 'var(--paper)' : 'transparent',
                    border: '1px solid ' + (isActive ? 'var(--paper)' : 'rgba(236,231,220,0.15)'),
                    cursor: 'pointer', flexShrink: 0,
                    transition: 'background .15s, color .15s, border-color .15s',
                    display: 'inline-flex', alignItems: 'center', gap: 8,
                  }}
                >
                  {t.label}
                  <span style={{ opacity: 0.65, fontSize: 9 }}>{String(count).padStart(2, '0')}</span>
                </button>
              );
            })}
          </div>
        </div>
      </section>

      {/* PUBLISHED */}
      {published.length > 0 && (
        <section className="section" style={{ paddingTop: 56 }}>
          <div className="container">
            <Reveal>
              <Bureau>Published · {published.length}</Bureau>
            </Reveal>
            <Reveal delay={80}>
              <div className="g-cards-2" style={{ marginTop: 24, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
                {published.map((ep, i) => (
                  <div key={ep.id} style={{ gridColumn: i === 0 ? '1 / -1' : 'auto' }}>
                    <EpisodeCard ep={ep} layout={i === 0 ? 'wide' : 'grid'} />
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </section>
      )}

      {/* FORTHCOMING */}
      {forthcoming.length > 0 && (
        <section className="section" style={{ paddingTop: 24, paddingBottom: 120 }}>
          <div className="container">
            <Reveal>
              <Bureau>Forthcoming · {forthcoming.length}</Bureau>
            </Reveal>
            <Reveal delay={80}>
              <div className="g-cards" style={{ marginTop: 24, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
                {forthcoming.map(ep => <EpisodeCard key={ep.id} ep={ep} />)}
              </div>
            </Reveal>
          </div>
        </section>
      )}

      {/* empty state */}
      {published.length === 0 && forthcoming.length === 0 && (
        <section className="section section--lg">
          <div className="container">
            <div className="t-cond" style={{ fontSize: 36, textTransform: 'uppercase', color: 'var(--gray-400)' }}>
              Nothing on file under <span style={{ color: 'var(--paper)' }}>{theme.label}</span>.
            </div>
            <p className="t-body" style={{ maxWidth: 540, marginTop: 16 }}>
              That doesn&rsquo;t mean nothing&rsquo;s coming. Drop your email below and we&rsquo;ll send the next one the night it drops.
            </p>
          </div>
        </section>
      )}
    </main>
  );
}

Object.assign(window, { ArchivePage });