/* @jsx React.createElement */
const { useState: useStateE, useMemo: useMemoE } = React;

/* Pre-launch: empty index. As episodes ship, push entries into this array
   with shape { num, cat, title, min, date, signal?, paper? }. */
const EPISODES = [];

const CATS = ['ALL', 'ON COMMAND', 'AAR', 'LOGISTICS', 'ISR', 'OPSEC', 'DOCTRINE'];

function EpisodeCard({ ep }) {
  return (
    <article className={"vc-epc" + (ep.paper ? " vc-epc--paper" : "")}>
      <div className="vc-epc__num">
        <span style={{color: ep.paper ? 'var(--c-amber)' : 'var(--c-signal)'}}>EP&nbsp;{ep.num}</span> &middot; {ep.cat}
      </div>
      <h3 className="vc-epc__title">{ep.title}</h3>
      <div className="vc-epc__thumb">
        <div className="vc-epc__thumb-grid" />
        {ep.signal && <div className="vc-epc__live"><span className="vc-pip" /> NEW</div>}
      </div>
      <div className="vc-epc__meta">
        <span>{ep.min}&nbsp;MIN</span>
        <span>{ep.date}</span>
      </div>
    </article>
  );
}

function EpisodeGrid() {
  const [active, setActive] = useStateE('ALL');
  const counts = useMemoE(() => {
    const m = { ALL: EPISODES.length };
    for (const e of EPISODES) m[e.cat] = (m[e.cat] || 0) + 1;
    return m;
  }, []);
  const filtered = active === 'ALL' ? EPISODES : EPISODES.filter(e => e.cat === active);

  return (
    <section className="vc-section" id="episodes">
      <div className="vc-section__head">
        <div className="vc-section__rule" />
        <div className="vc-eyebrow">§ 01 &middot; THE INDEX</div>
        <h2 className="vc-section__h2">Episodes &mdash; in order of operation.</h2>
        <p className="vc-section__sub">A growing index of briefs. Watch in any order; they're indexed for cross-reference, not consumed in sequence.</p>
      </div>

      {/* Hide filter chips while EPISODES is empty — no point filtering nothing. */}
      {EPISODES.length > 0 && (
        <div className="vc-epc-filter">
          <span className="vc-epc-filter__lbl">FILTER §</span>
          {CATS.map(c => (
            <button
              key={c}
              className={"vc-chip" + (active === c ? " is-active" : "")}
              onClick={() => setActive(c)}
            >
              {c}
              <span className="vc-chip__count">{counts[c] || 0}</span>
            </button>
          ))}
        </div>
      )}

      <div className="vc-epc-grid">
        {EPISODES.length === 0
          ? <div className="vc-epc__none">// NO EPISODES YET. FIRST BRIEF DROPS WITH THE LAUNCH. SUBSCRIBE BELOW &rarr;</div>
          : filtered.length > 0
            ? filtered.map(e => <EpisodeCard key={e.num} ep={e} />)
            : <div className="vc-epc__none">// NO EPISODES IN THIS BAND. CHECK BACK SUNDAY 0900Z.</div>}
      </div>
    </section>
  );
}
window.EpisodeGrid = EpisodeGrid;
window.VC_EPISODES = EPISODES;