function formatGap(ms) {
  const totalS = ms / 1000;
  const m = Math.floor(totalS / 60);
  const s = Math.floor(totalS % 60);
  const mss = Math.round(ms % 1000);
  if (m > 0) return `${m}:${String(s).padStart(2, "0")}.${String(mss).padStart(3, "0")}`;
  return `${s}.${String(mss).padStart(3, "0")}`;
}

function SectionHead({ n, kicker, title, sub }) {
  const [ref, visible] = useReveal();
  return (
    <div className={`sec-head ${visible ? "rv" : ""}`} ref={ref}>
      <div className="sec-head__num">{n}</div>
      <div className="sec-head__body">
        <div className="sec-head__kicker">{kicker}</div>
        <h2 className="sec-head__title">{title}</h2>
        {sub && <p className="sec-head__sub">{sub}</p>}
      </div>
    </div>
  );
}

function Runs() {
  const runs = window.RUN_DATA.runs;
  const [active, setActive] = useState(0);
  const [ref, visible] = useReveal();
  const current = runs[active];

  return (
    <section className="runs" id="runs">
      <SectionHead
        n="01"
        kicker="THE RUNS"
        title="Every run, every VOD."
        sub="Individual levels and glitchless routes. Watch the attempt, then read the page on speedrun.com."
      />

      <div className={`runs__wrap ${visible ? "rv" : ""}`} ref={ref}>
        <div className="runs__player">
          <div className="runs__frame">
            <iframe
              key={current.youtube}
              src={`https://www.youtube.com/embed/${current.youtube}?rel=0&modestbranding=1`}
              title={current.name}
              frameBorder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
            />
          </div>
          <div className="runs__meta">
            <div className="runs__meta-left">
              <div className="runs__meta-title">{current.name}</div>
              <div className="runs__meta-cat">{current.category} · {current.platform}</div>
              {current.time && (
                <div className="runs__stats" aria-label={`Time ${current.time}`}>
                  <div className="runs__stat runs__stat--mine">
                    <span className="runs__stat-label">MY TIME</span>
                    <span className="runs__stat-val">{current.time}</span>
                  </div>
                  {current.wr && (
                    <>
                      <div className="runs__stats-sep" aria-hidden="true" />
                      <div className="runs__stat runs__stat--wr">
                        <span className="runs__stat-label">
                          WORLD RECORD · <a href={current.wr.url} target="_blank" rel="noreferrer">{current.wr.holder}</a>
                        </span>
                        <span className="runs__stat-val">{current.wr.time}</span>
                      </div>
                      <div className="runs__stat runs__stat--gap">
                        <span className="runs__stat-label">GAP TO WR</span>
                        <span className="runs__stat-val">
                          +{formatGap(current.timeMs - current.wr.timeMs)}
                        </span>
                      </div>
                    </>
                  )}
                </div>
              )}
            </div>
            <div className="runs__meta-right">
              <a className="btn btn--primary" href={current.speedrun} target="_blank" rel="noreferrer">
                Open on speedrun.com ↗
              </a>
              <a className="btn" href={`https://www.youtube.com/watch?v=${current.youtube}`} target="_blank" rel="noreferrer">
                Watch on YouTube ↗
              </a>
            </div>
          </div>
        </div>

        <aside className="runs__list" role="tablist" aria-label="Runs">
          {runs.map((r, i) => (
            <button
              key={r.youtube}
              role="tab"
              aria-selected={active === i}
              className={`runs__item ${active === i ? "is-on" : ""}`}
              onClick={() => setActive(i)}
            >
              <div className="runs__item-head">
                <span className="runs__item-n">{String(i + 1).padStart(2, "0")}</span>
                {r.time && <span className="runs__item-time">{r.time}</span>}
                <span className="runs__item-arrow">{active === i ? "▶" : "↗"}</span>
              </div>
              <div className="runs__item-name">{r.name}</div>
              <div className="runs__item-cat">{r.category}</div>
              <div className="runs__item-thumb">
                <img
                  src={`https://img.youtube.com/vi/${r.youtube}/mqdefault.jpg`}
                  alt=""
                  loading="lazy"
                />
              </div>
            </button>
          ))}
        </aside>
      </div>
    </section>
  );
}

Object.assign(window, { Runs, SectionHead });