/* iBD Coliseum — Council: the few who name the Crowns for a Quest.
 *
 * The Quest card has always said "The Coliseum Council decides the Crowns", and
 * entries.crown was read in three places, but nothing ever wrote it. This is
 * that missing screen. Naming a Crown also marks the entry for the Hall of
 * Fame, which is where the design puts crowned work under "ARENA CROWNS", so
 * the two stay in step without a second action to remember.
 */

function CouncilRow({ entry, rank, saving, onSave }) {
  const { initials, avatarColor } = window.COLISEUM_DATA;
  const [draft, setDraft] = React.useState(entry.crown || "");
  React.useEffect(() => { setDraft(entry.crown || ""); }, [entry.id, entry.crown]);
  const dirty = draft.trim() !== (entry.crown || "").trim();
  const finalist = rank <= 5;

  return (
    <div className={"cc-row" + (entry.crown ? " crowned" : "")}>
      <span className={"cc-rank" + (finalist ? " finalist" : "")}>{finalist ? `#${rank}` : rank}</span>
      <span className="cc-main">
        <span className="cc-title">{entry.title}</span>
        <span className="cc-meta">
          <span className="cc-av" style={{ background: avatarColor(entry.author) }}>{initials(entry.author)}</span>
          {entry.author}{entry.team ? ` · ${entry.team}` : ""} · {entry.votes} {entry.votes === 1 ? "vote" : "votes"}
          {entry.crown && <span className="cc-chip">◆ {entry.crown}</span>}
        </span>
      </span>
      <span className="cc-award">
        <input type="text" value={draft} placeholder="Name a Crown…" aria-label={`Crown for ${entry.title}`}
          onChange={(e) => setDraft(e.target.value)}
          onKeyDown={(e) => { if (e.key === "Enter" && dirty) onSave(entry, draft); }} />
        <button className="cc-save" disabled={!dirty || saving} onClick={() => onSave(entry, draft)}>
          {saving ? "Saving…" : entry.crown && !draft.trim() ? "Clear" : "Crown"}
        </button>
      </span>
    </div>
  );
}

function Council({ quest, entries, loading, error, canJudge, onSave, onOpenHof }) {
  const { initials, avatarColor } = window.COLISEUM_DATA;
  if (!canJudge) {
    return (
      <div className="council-page">
        <section className="ghero arena">
          <div className="wrap">
            <div className="eyebrow">iBD Coliseum · Council</div>
            <h1>Council only</h1>
            <p className="sub">Crowns are named by the Coliseum Council. If you should be on it, ask an administrator.</p>
          </div>
        </section>
      </div>
    );
  }

  const crowned = entries.filter((e) => (e.crown || "").trim());

  return (
    <div className="council-page">
      <section className="ghero arena">
        <div className="wrap">
          <div className="eyebrow">iBD Coliseum · Council</div>
          <h1>Name the <em>Crowns</em></h1>
          <p className="sub">
            {quest
              ? `${quest.title} — ${entries.length} ${entries.length === 1 ? "entry" : "entries"}, ranked by Arena votes. The Top 5 are the shortlist; a Crown can go to any entry.`
              : "No Quest is running, so there is nothing to crown yet."}
          </p>
        </div>
      </section>

      <div className="wrap council-body">
        {error && <p className="cc-error" role="alert">{error}</p>}

        <div className="dcard">
          <div className="dh">
            <h3>Entries</h3>
            <span className="sub">
              {loading ? "Loading…" : `${crowned.length} of ${entries.length} crowned`}
            </span>
          </div>
          {!loading && entries.length === 0
            ? <p className="cc-empty">No entries in this Quest yet.</p>
            : <div className="cc-rows">
                {entries.map((e, i) => (
                  <CouncilRow key={e.id} entry={e} rank={i + 1} saving={e.saving}
                    onSave={onSave} />
                ))}
              </div>}
          <p className="cc-note">
            Naming a Crown also places the entry in the Hall of Fame, where the Council's picks are listed under Arena Crowns.
            Clearing the name removes both — the Crown and its place in the hall.
          </p>
        </div>

        {crowned.length > 0 &&
          <div className="dcard">
            <div className="dh">
              <h3>How these will read</h3>
              <span className="sub">Hall of Fame · Arena Crowns</span>
            </div>
            <div className="hof-grid">
              {crowned.map((e) => (
                <div className="card hof-arena" key={e.id}>
                  <div className="cmain">
                    <div className="ctop">
                      <span className="hof-crown"><span className="hof-mark">◆</span>{e.crown}</span>
                      <span className="rgt"><span className="when">{e.missionNo ? `Quest ${e.missionNo}` : "Quest"}</span></span>
                    </div>
                    <h3 className="card-title">{e.title}</h3>
                    <p className="desc">{e.desc}</p>
                    <div className="cfoot">
                      <span className="hof-by">
                        <span className="av" style={{ background: avatarColor(e.author) }}>{initials(e.author)}</span>
                        <span className="hof-byline">{e.author}{e.team ? ` · ${e.team}` : ""}</span>
                      </span>
                    </div>
                  </div>
                  <div className="cside">
                    <span className="vote own"><Icon name="up" className="ic" />{e.votes || 0}</span>
                  </div>
                </div>
              ))}
            </div>
            {onOpenHof &&
              <button className="quest-btn ghost" onClick={onOpenHof}>Open the Hall of Fame</button>}
          </div>}
      </div>
    </div>
  );
}

window.Council = Council;