const { Button } = window.AntelopeDashDesignSystem_4664c0;

// Shared photo model + lightbox, loaded by index.html (for the volunteer row) and
// photos.html (for both galleries). One implementation so the two pages cannot drift.

const seq = (a, b) => { const out = []; for (let i = a; i <= b; i++) out.push(String(i).padStart(3, "0")); return out; };

// 031 is a duplicate of 030 and was never shipped; 001/026/030 appear in the volunteer
// row instead. Skipping all four keeps the flat gallery at 80 with no photo repeated.
const COURSE_SKIP = ["001", "026", "030", "031"];
const COURSE_IDS = seq(1, 31).filter((n) => !COURSE_SKIP.includes(n)); // 27
const FINISH_IDS = seq(1, 50);

// Grid tiles load assets/photos/thumbs/<name>; the lightbox loads the full file.
const thumbOf = (src) => src.replace("assets/photos/", "assets/photos/thumbs/");
const photo = (src, alt, caption) => ({ src, thumb: thumbOf(src), alt, caption });

const VOLUNTEERS = [
  photo("assets/photos/course-001.jpg", "Volunteer sweeping the course", "Course sweeper"),
  photo("assets/photos/course-026.jpg", "Aid station on the course", "The aid station"),
  photo("assets/photos/course-030.jpg", "Some of the 2026 volunteer crew", "Some of the crew"),
];
const COURSE = COURSE_IDS.map((n) => photo("assets/photos/course-" + n + ".jpg", "Runner on the Antelope Dash course"));
const FINISH = FINISH_IDS.map((n) => photo("assets/photos/finish-" + n + ".jpg", "Runner in the Antelope Dash finish chute"));
const GALLERY = [...COURSE, ...FINISH, ...VOLUNTEERS]; // 27 + 50 + 3 = 80

window.AD_PHOTOS = { COURSE, FINISH, VOLUNTEERS, GALLERY };

// photos: the array being walked. index: 0-based, or null when closed.
function Lightbox({ photos, index, onIndex, onClose }) {
  const open = index != null && photos && photos.length > 0;

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      else if (e.key === "ArrowLeft") onIndex((index - 1 + photos.length) % photos.length);
      else if (e.key === "ArrowRight") onIndex((index + 1) % photos.length);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, index, photos, onIndex, onClose]);

  if (!open) return null;
  const p = photos[index];
  const step = (d) => onIndex((index + d + photos.length) % photos.length);
  const stop = (fn) => (e) => { e.stopPropagation(); fn(); };

  return (
    <div onClick={onClose} role="dialog" aria-modal="true" aria-label="Photo viewer"
      style={{
        position: "fixed", inset: 0, zIndex: 100, display: "flex", flexDirection: "column",
        alignItems: "center", justifyContent: "center", gap: 20, padding: 32,
        background: "rgba(15,23,42,0.88)", backdropFilter: "blur(6px)", WebkitBackdropFilter: "blur(6px)",
      }}>
      <img src={p.src} alt={p.alt || ""} onClick={(e) => e.stopPropagation()}
        style={{ maxWidth: "min(1100px, 92vw)", maxHeight: "76vh", objectFit: "contain", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-xl)" }} />
      <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap", justifyContent: "center" }}>
        <Button variant="glass" size="md" onClick={stop(() => step(-1))}>Prev</Button>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 14, color: "var(--slate-300)", minWidth: 90, textAlign: "center", fontVariantNumeric: "tabular-nums" }}>
          {index + 1} / {photos.length}
        </span>
        <Button variant="glass" size="md" onClick={stop(() => step(1))}>Next</Button>
        <Button variant="glass" size="md" onClick={stop(onClose)}>Close</Button>
      </div>
    </div>
  );
}
window.Lightbox = Lightbox;