/*
  Screenshot lightbox (MICRO_INTERACTIONS). Loaded only on case-study pages. Builds
  its overlay lazily, traps focus, supports arrows / Esc / backdrop, restores focus.
  Only real images render trigger buttons (placeholders don't), so this stays inert
  until captures land.
*/
interface Shot {
  src: string;
  caption: string;
  alt: string;
}

const triggers = Array.from(document.querySelectorAll<HTMLButtonElement>('[data-lightbox]'));

if (triggers.length) {
  const shots: Shot[] = triggers.map((t) => ({
    src: t.dataset.lightboxSrc ?? '',
    caption: t.dataset.lightboxCaption ?? '',
    alt: t.getAttribute('aria-label') ?? '',
  }));

  let lastFocus: HTMLElement | null = null;
  let index = 0;

  const overlay = document.createElement('div');
  overlay.className =
    'fixed inset-0 z-[70] hidden items-center justify-center bg-black/85 p-4 backdrop-blur-sm';
  overlay.setAttribute('role', 'dialog');
  overlay.setAttribute('aria-modal', 'true');
  overlay.innerHTML = `
    <button data-lb-close class="absolute right-4 top-4 h-10 w-10 rounded-sm border border-white/20 text-white" aria-label="Close">✕</button>
    <button data-lb-prev class="absolute left-4 h-10 w-10 rounded-sm border border-white/20 text-white" aria-label="Previous">‹</button>
    <figure class="max-h-full max-w-5xl">
      <img data-lb-img class="max-h-[80vh] w-full rounded-md object-contain" alt="" />
      <figcaption class="mt-3 text-center font-mono text-[13px] text-white/70">
        <span data-lb-caption></span> <span data-lb-counter class="ml-2 text-white/40"></span>
      </figcaption>
    </figure>
    <button data-lb-next class="absolute right-4 bottom-1/2 h-10 w-10 rounded-sm border border-white/20 text-white" aria-label="Next">›</button>
  `;
  document.body.appendChild(overlay);

  const img = overlay.querySelector<HTMLImageElement>('[data-lb-img]')!;
  const cap = overlay.querySelector<HTMLElement>('[data-lb-caption]')!;
  const counter = overlay.querySelector<HTMLElement>('[data-lb-counter]')!;
  const closeBtn = overlay.querySelector<HTMLButtonElement>('[data-lb-close]')!;

  function render(): void {
    const shot = shots[index]!;
    img.src = shot.src;
    img.alt = shot.alt;
    cap.textContent = shot.caption;
    counter.textContent = `${index + 1}/${shots.length}`;
  }
  function open(i: number): void {
    index = i;
    lastFocus = document.activeElement as HTMLElement;
    render();
    overlay.classList.remove('hidden');
    overlay.classList.add('flex');
    closeBtn.focus();
  }
  function close(): void {
    overlay.classList.add('hidden');
    overlay.classList.remove('flex');
    lastFocus?.focus();
  }
  const step = (delta: number) => {
    index = (index + delta + shots.length) % shots.length;
    render();
  };

  triggers.forEach((t, i) => t.addEventListener('click', () => open(i)));
  closeBtn.addEventListener('click', close);
  overlay.querySelector('[data-lb-prev]')!.addEventListener('click', () => step(-1));
  overlay.querySelector('[data-lb-next]')!.addEventListener('click', () => step(1));
  overlay.addEventListener('click', (e) => {
    if (e.target === overlay) close();
  });
  document.addEventListener('keydown', (e) => {
    if (overlay.classList.contains('hidden')) return;
    if (e.key === 'Escape') close();
    if (e.key === 'ArrowLeft') step(-1);
    if (e.key === 'ArrowRight') step(1);
    if (e.key === 'Tab') {
      e.preventDefault();
      closeBtn.focus();
    }
  });
}
