/* iBD Coliseum — Season: current-quarter leaderboard and timeline */
const { useMemo } = React;

function catMeta(id) {
  const { CATEGORIES } = window.COLISEUM_DATA;
  return CATEGORIES.find((c) => c.id === id) || { color: "var(--accent)", label: id };
}

function SeasonLeaderboard({ cards, openCard }) {
  const ranked = [...cards].sort((a, b) => b.votes - a.votes).slice(0, 8);
  const max = ranked.length ? ranked[0].votes : 1;
  if (ranked.length === 0) {
    return (
      <div className="cards-empty">
        <EmptyState icon="fire" title="No cards ranked yet"
          message="As colleagues share cards and upvote what's useful, the season's most-loved cards rank here." />
      </div>
    );
  }
  return (
    <ol className="lboard">
      {ranked.map((c, i) => {
        const cat = catMeta(c.cat);
        const rank = i + 1;
        return (
          <li className={"lrow clickable" + (rank <= 3 ? " t" + rank : "")} key={c.id} style={{ "--cat": cat.color }}
            onClick={() => openCard(c.id)} title="Open this card">
            <span className="lrank">{rank}</span>
            <div className="lcell-main">
              <span className="mdot" style={{ background: cat.color }}></span>
              <div className="lt">
                <div className="t">{c.title}</div>
                <div className="a">{c.author} · {c.team}</div>
              </div>
            </div>
            <div className="lbar-cell"><div className="lbar"><i style={{ width: (c.votes / max * 100) + "%" }}></i></div></div>
            <div className="lscore">{c.votes}<span className="u">votes</span></div>
          </li>
        );
      })}
    </ol>
  );
}

function SeasonTimeline({ items }) {
  return (
    <ol className="s-timeline">
      {items.map((it, i) => (
        <li className={"st-item " + it.state + (it.end ? " end" : "")} key={i}>
          <span className="st-rail">
            <span className="st-dot">
              {it.state === "done" ? <Icon name="check" className="ic" />
                : it.end ? <Icon name="flag" className="ic" />
                : it.state === "now" ? <span className="st-pulse"></span> : null}
            </span>
          </span>
          <div className="st-body">
            <div className="st-top">
              <span className="st-tag">{it.tag}</span>
              <span className="st-date">{it.date}</span>
              {it.state === "now" && <span className="st-badge">We are here</span>}
            </div>
            <h3 className="st-title">{it.t}</h3>
            <p className="st-desc">{it.d}</p>
          </div>
        </li>
      ))}
    </ol>
  );
}

function Season({ cards = [], openCard, hofIds }) {
  const { buildSeasonMeta, entryInCurrentSeason } = window.COLISEUM_DATA;
  const S = buildSeasonMeta();
  const seasonCards = useMemo(
    () => (hofIds ? cards.filter((c) => !hofIds.has(c.id)) : cards)
      .filter((c) => entryInCurrentSeason(c)),
    [cards, hofIds]
  );

  return (
    <div className="season">
      <section className="ghero arena">
        <div className="wrap">
          <div className="eyebrow">iBD Coliseum · {S.label}</div>
          <h1>{S.year} Season {S.quarter} <em>overview</em></h1>
          <p className="sub">Top cards and what's ahead this quarter — browse and share on Gallery.</p>
        </div>
      </section>

      <section className="season-lb-wrap">
        <div className="wrap">
          <div className="section-head" style={{ marginBottom: 6 }}>
            <h2>Top cards this season</h2>
            <span className="muted">Ranked by community upvotes</span>
          </div>
          <p className="muted" style={{ fontSize: "var(--fs-small)", marginBottom: 24, maxWidth: "62ch" }}>
            The season's most-upvoted gallery cards — recognition only, no elimination. Click any row to open the card.
          </p>
          <SeasonLeaderboard cards={seasonCards} openCard={openCard} />
        </div>
      </section>

      <section className="season-tl-wrap">
        <div className="wrap">
          <div className="section-head" style={{ marginBottom: 6 }}>
            <h2>Season timeline</h2>
            <span className="muted">What's ahead before the season closes</span>
          </div>
          <p className="muted" style={{ fontSize: "var(--fs-small)", marginBottom: 26, maxWidth: "62ch" }}>
            The Coliseum runs in quarterly seasons. Each one is a relaxed three-month stretch to try things and share what worked — here's where we are and what's left.
          </p>
          <SeasonTimeline items={S.timeline} />
        </div>
      </section>
    </div>
  );
}

window.Season = Season;