Lightbox

"use client";

import { useState, type KeyboardEvent, type ReactNode } from "react";
import { Dialog } from "radix-ui";
import { cn } from "@/lib/utils";

export interface LightboxProps {
  trigger?: ReactNode;
  defaultOpen?: boolean;
  images?: { caption: string; ratio: "landscape" | "portrait" }[];
  da?: string;
}

const DEFAULT_IMAGES: NonNullable<LightboxProps["images"]> = [
  { caption: "Oslo Opera — Main signage", ratio: "landscape" },
  { caption: "Oslo Opera — Season poster", ratio: "portrait" },
  { caption: "Oslo Opera — Ticket system", ratio: "landscape" },
  { caption: "Oslo Opera — Program booklet", ratio: "portrait" },
];

/** Full-screen image viewer (Radix Dialog) on ink (stays dark in dark mode): the image frame centered, mono “03 / 04” counter and caption, Prev/Next text buttons and arrow-key navigation, thumbnails strip. */
export function Lightbox({ trigger, defaultOpen, images = DEFAULT_IMAGES, da = "mono-clean" }: LightboxProps) {
  const [i, setI] = useState(0);
  const img = images[i] ?? images[0]!;
  const go = (d: number) => setI((x) => (x + d + images.length) % images.length);
  const pad = (n: number) => String(n).padStart(2, "0");
  const key = (e: KeyboardEvent) => {
    if (e.key === "ArrowRight") go(1);
    if (e.key === "ArrowLeft") go(-1);
  };
  return (
    <Dialog.Root defaultOpen={defaultOpen}>
      {trigger && <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>}
      <Dialog.Portal>
        <Dialog.Content
          data-da={da}
          onKeyDown={key}
          className="fixed inset-0 z-50 flex flex-col bg-(--lb) text-(--lbfg) outline-none [--lb:var(--da-fg)] [--lbfg:var(--da-bg)] dark:[--lb:var(--da-bg)] dark:[--lbfg:var(--da-fg)] transition-opacity duration-(--da-duration) starting:opacity-0"
        >
          <div className="flex items-center justify-between px-5 py-4 font-da-mono text-[11px] tracking-da-label uppercase">
            <Dialog.Title aria-live="polite">
              {pad(i + 1)} / {pad(images.length)} — {img.caption}
            </Dialog.Title>
            <Dialog.Description className="sr-only">Use the left and right arrow keys to browse images.</Dialog.Description>
            <Dialog.Close className="da-focus rounded-da-sm hover:underline">Close</Dialog.Close>
          </div>
          <div className="grid min-h-0 flex-1 grid-cols-[auto_1fr_auto] items-center gap-4 px-5">
            <button
              type="button"
              onClick={() => go(-1)}
              className="da-focus rounded-da-sm font-da-mono text-[11px] tracking-da-label uppercase hover:underline"
            >
              Prev
            </button>
            <div
              key={i}
              role="img"
              aria-label={img.caption}
              className={cn(
                "mx-auto max-h-full bg-(--lbfg)/15 transition-opacity duration-(--da-duration) starting:opacity-0",
                img.ratio === "landscape" ? "aspect-[4/3] w-full max-w-3xl" : "aspect-[3/4] h-full max-h-[70dvh]",
              )}
            />
            <button type="button" onClick={() => go(1)} className="da-focus rounded-da-sm font-da-mono text-[11px] tracking-da-label uppercase hover:underline">
              Next
            </button>
          </div>
          <div className="flex justify-center gap-2 px-5 py-5">
            {images.map((im, j) => (
              <button
                key={im.caption}
                type="button"
                aria-label={`Show ${im.caption}`}
                aria-current={j === i ? "true" : undefined}
                onClick={() => setI(j)}
                className={cn(
                  "da-focus h-10 w-14 bg-(--lbfg)/15 transition-opacity",
                  j === i ? "outline-2 outline-offset-2 outline-(--lbfg)" : "opacity-50 hover:opacity-100",
                )}
              />
            ))}
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

export default Lightbox;