/* iBD Coliseum — Hall of Fame: an executive-curated showcase, split into
   Gallery cards and Competition submissions. Executives induct entries with the
   "Move to Hall of Fame" action on a card; this page is the gallery of honor. */

function HofCard({ entry, canManage, onRemove, onArchive, openProfile, openDetail }) {
  const { CATEGORIES, TOOLS, avatarColor, initials } = window.COLISEUM_DATA;
  const cat = CATEGORIES.find((c) => c.id === entry.cat);
  const catColor = cat ? cat.color : "var(--accent)";
  return (
    <div className="hof-card card" style={{ "--cat": catColor }}>
      <div className="ctop">
        <span className="cat"><span className="sq"></span>{cat ? cat.label : entry.cat}</span>
        <span className="hof-badge"><Icon name="trophy" className="ic" />Hall of Fame</span>
      </div>
      <h3 className="card-title" onClick={() => openDetail && openDetail(entry)} title="Open this card">{entry.title}</h3>
      <p className="desc">{entry.desc}</p>
      {entry.tools && entry.tools.length > 0 &&
        <div className="tools">
          {entry.tools.map((t) =>
            <span className="tool" key={t}><span className="blob" style={{ background: TOOLS[t] || "#999" }}></span>{t}</span>
          )}
        </div>}
      <div className="cfoot">
        <button className="author author-btn" onClick={() => openProfile && openProfile(entry.author)} title={`View ${entry.author}'s profile`}>
          <span className="av" style={{ background: avatarColor(entry.author) }}>{initials(entry.author)}</span>
          <div className="author-meta">
            <div className="nm">{entry.author}</div>
            <div className="tm">{entry.team}</div>
          </div>
        </button>
        <span className="hof-votes"><Icon name="up" className="ic" />{entry.votes}</span>
      </div>
      {canManage &&
        <div className="manage-row">
          <button className="manage-btn danger" onClick={() => onRemove(entry)}>
            <Icon name="trash" className="ic" />Remove from Hall of Fame
          </button>
          <button className="manage-btn archive" onClick={() => onArchive && onArchive(entry)} title="Hide this card everywhere; the submitter keeps their points">
            <Icon name="archive" className="ic" />Archive
          </button>
        </div>}
    </div>
  );
}

function HofSection({ title, sub, icon, list, canManage, onRemove, onArchive, openProfile, openDetail }) {
  return (
    <div className="hof-section">
      <div className="section-head">
        <h2><Icon name={icon} className="ic" />{title}</h2>
        <span className="muted">{list.length} {list.length === 1 ? "card" : "cards"}</span>
      </div>
      <p className="muted hof-sub">{sub}</p>
      {list.length === 0
        ? <div className="cards-empty">
            <EmptyState compact icon={icon} title="Nothing inducted yet"
              message={canManage
                ? "Open a card in the gallery or a competition and use “Move to Hall of Fame” to feature it here."
                : "Leadership hasn't inducted anything here yet — check back soon."} />
          </div>
        : <div className="cards hof-grid">
            {list.map((e) =>
              <HofCard key={e.id} entry={e} canManage={canManage} onRemove={onRemove} onArchive={onArchive}
                openProfile={openProfile} openDetail={openDetail} />
            )}
          </div>}
    </div>
  );
}

function HallOfFame({ entries = [], canManage, onRemove, onArchive, openProfile, openDetail, loading }) {
  const galleryEntries = entries.filter((e) => !e.missionId);
  const compEntries = entries.filter((e) => e.missionId);

  return (
    <div className="hof">
      <section className="ghero arena">
        <div className="wrap">
          <div className="eyebrow">iBD Coliseum · Curated by leadership</div>
          <h1>Hall of <em>Fame</em></h1>
          <p className="sub">The standout work leadership has inducted — the best of the always-on gallery and the competition arena, gathered in one place.</p>
          <div className="season-meta">
            <span className="count-pill"><Icon name="grid" className="ic" />{galleryEntries.length} from the gallery</span>
            <span className="count-pill"><Icon name="target" className="ic" />{compEntries.length} from competitions</span>
          </div>
        </div>
      </section>

      <section className="gbody">
        <div className="wrap" style={{ display: "block" }}>
          {loading
            ? <div className="cards-empty"><EmptyState compact icon="trophy" title="Loading the Hall of Fame…" /></div>
            : <div className="hof-cols">
                <HofSection title="Gallery cards" sub="Inducted from the always-on gallery." icon="grid"
                  list={galleryEntries} canManage={canManage} onRemove={onRemove} onArchive={onArchive}
                  openProfile={openProfile} openDetail={openDetail} />
                <HofSection title="Competition submissions" sub="Inducted from tournament entries." icon="target"
                  list={compEntries} canManage={canManage} onRemove={onRemove} onArchive={onArchive}
                  openProfile={openProfile} openDetail={openDetail} />
              </div>}
        </div>
      </section>
    </div>
  );
}

window.HallOfFame = HallOfFame;