---
// Gallery — an accessible image lightbox.
//
// • Grid of optimized arched thumbnails (astro:assets, avif/webp, lazy).
// • Each thumbnail is a <button> that opens a native <dialog> showing the
//   full image, with prev/next, a counter, Esc-to-close and a focus trap
//   (the <dialog> modal traps focus natively; we also wrap arrows so Tab
//   cycles inside).
// • Keyboard: ← / → navigate (RTL-aware), Esc closes, Enter/Space on a
//   thumbnail opens at that index.
// • [dir=rtl]: directional chevrons mirror via .icon-dir; ← / → keys swap.
// • Reduced-motion respected (no transitions when reduced).
//
// One <dialog> per gallery instance; the directionally-aware logic is in a
// small inline island scoped by a unique id.
import { Image } from 'astro:assets';
import type { ImageMetadata } from 'astro';

interface GalleryImage {
  src: ImageMetadata;
  alt: string;
}
interface Props {
  images: GalleryImage[];
  /** accessible name for the thumbnail region */
  label: string;
  /** accessible name for the lightbox dialog */
  lightboxLabel: string;
  closeLabel: string;
  prevLabel: string;
  nextLabel: string;
  /** (current, total) => "Photo 1 of 4" */
  counter: (current: number, total: number) => string;
  /** unique-ish id seed (e.g. the room slug) */
  id: string;
}
const {
  images,
  label,
  lightboxLabel,
  closeLabel,
  prevLabel,
  nextLabel,
  counter,
  id,
} = Astro.props;

const gid = `gallery-${id}`;
const total = images.length;
---
<section class="gallery" aria-label={label} data-gallery={gid}>
  <ul class="gallery__grid" role="list">
    {images.map((image, i) => (
      <li class="gallery__cell">
        <button
          type="button"
          class="gallery__thumb arch-image"
          data-gallery-open={i}
          aria-haspopup="dialog"
          aria-controls={gid}
        >
          <Image
            src={image.src}
            alt={image.alt}
            formats={['avif', 'webp']}
            widths={[400, 600, 900, 1200]}
            sizes="(min-width: 480px) 50vw, 92vw"
            loading="lazy"
            decoding="async"
          />
          <span class="gallery__zoom" aria-hidden="true">
            <svg width="20" height="20" viewBox="0 0 16 16" fill="none"
                 stroke="currentColor" stroke-width="1.4" stroke-linecap="round"
                 stroke-linejoin="round" focusable="false">
              <circle cx="7" cy="7" r="4.5" />
              <path d="M10.5 10.5 14 14 M7 5v4 M5 7h4" />
            </svg>
          </span>
        </button>
      </li>
    ))}
  </ul>

  <dialog class="lightbox" id={gid} aria-label={lightboxLabel}>
    <div class="lightbox__inner">
      <button type="button" class="lightbox__close" data-gallery-close aria-label={closeLabel}>
        <svg width="22" height="22" viewBox="0 0 16 16" fill="none" stroke="currentColor"
             stroke-width="1.6" stroke-linecap="round" aria-hidden="true" focusable="false">
          <path d="M3.5 3.5 12.5 12.5 M12.5 3.5 3.5 12.5" />
        </svg>
      </button>

      <button type="button" class="lightbox__nav lightbox__nav--prev" data-gallery-prev aria-label={prevLabel}>
        <svg class="icon-dir" width="26" height="26" viewBox="0 0 16 16" fill="none" stroke="currentColor"
             stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
          <path d="M10 3 5 8l5 5" />
        </svg>
      </button>

      <figure class="lightbox__figure">
        {images.map((image, i) => (
          <Image
            class="lightbox__img"
            data-gallery-slide={i}
            hidden={i !== 0}
            src={image.src}
            alt={image.alt}
            formats={['avif', 'webp']}
            widths={[640, 960, 1280, 1600]}
            sizes="(min-width: 1024px) 80vw, 94vw"
            loading="lazy"
            decoding="async"
          />
        ))}
      </figure>

      <button type="button" class="lightbox__nav lightbox__nav--next" data-gallery-next aria-label={nextLabel}>
        <svg class="icon-dir" width="26" height="26" viewBox="0 0 16 16" fill="none" stroke="currentColor"
             stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
          <path d="M6 3l5 5-5 5" />
        </svg>
      </button>

      <p class="lightbox__counter" data-gallery-counter aria-live="polite">{counter(1, total)}</p>
    </div>
  </dialog>
</section>

<style>
  /* ── Thumbnail grid ─────────────────────────────────────── */
  .gallery__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-m);
    grid-template-columns: 1fr;
  }
  /* From small tablets up: 2 equal columns — a 4-image gallery becomes a clean 2×2. */
  @media (min-width: 480px) {
    .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  }
  /* Exactly 3 images: the first is a full-width landscape banner; the other
     two share the row below (each half width). */
  .gallery__grid:has(> :nth-child(3):last-child) > .gallery__cell:first-child {
    grid-column: 1 / -1;
  }
  .gallery__grid:has(> :nth-child(3):last-child) > .gallery__cell:first-child .gallery__thumb {
    aspect-ratio: 16 / 9;
  }

  .gallery__thumb {
    appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    inline-size: 100%;
    block-size: 100%;
    cursor: pointer;
    background: var(--c-travertine);
    outline: 1px solid color-mix(in oklab, var(--c-gold) 35%, transparent);
    outline-offset: -1px;
    position: relative;
  }

  .gallery__thumb :global(img) {
    transition: transform .5s var(--ease);
  }
  .gallery__thumb:hover :global(img),
  .gallery__thumb:focus-visible :global(img) {
    transform: scale(1.05);
  }

  .gallery__zoom {
    position: absolute;
    inset-block-end: .6rem;
    inset-inline-end: .6rem;
    inline-size: 38px;
    block-size: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in oklab, var(--c-ink) 62%, transparent);
    color: #fff;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .gallery__thumb:hover .gallery__zoom,
  .gallery__thumb:focus-visible .gallery__zoom {
    opacity: 1;
    transform: none;
  }

  /* ── Lightbox dialog ────────────────────────────────────── */
  .lightbox {
    border: 0;
    padding: 0;
    max-inline-size: 100vw;
    max-block-size: 100dvh;
    inline-size: 100vw;
    block-size: 100dvh;
    background: color-mix(in oklab, var(--c-plum) 92%, #000);
    color: #fff;
  }
  .lightbox::backdrop {
    background: color-mix(in oklab, var(--c-ink) 86%, #000);
  }
  .lightbox:not([open]) { display: none; }

  .lightbox__inner {
    block-size: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr auto;
    align-items: center;
    gap: var(--space-s);
    padding: clamp(var(--space-m), 4vw, var(--space-l));
    padding-block-start: clamp(3.5rem, 8vw, var(--space-l));
  }

  .lightbox__figure {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    inline-size: 100%;
    block-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 0;
  }
  .lightbox__img {
    max-inline-size: 100%;
    max-block-size: 100%;
    inline-size: auto !important;
    block-size: auto !important;
    object-fit: contain;
    border-radius: var(--radius);
  }
  .lightbox__img[hidden] { display: none; }

  .lightbox__close {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    position: absolute;
    inset-block-start: clamp(var(--space-m), 3vw, var(--space-l));
    inset-inline-end: clamp(var(--space-m), 3vw, var(--space-l));
  }

  .lightbox__close,
  .lightbox__nav {
    appearance: none;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 48px;
    block-size: 48px;
    border-radius: 999px;
    color: #fff;
    background: color-mix(in oklab, #fff 14%, transparent);
    transition: background .15s var(--ease), transform .15s var(--ease);
  }
  .lightbox__nav { z-index: 1; }
  .lightbox__nav--prev { grid-column: 1; grid-row: 1; justify-self: start; }
  .lightbox__nav--next { grid-column: 3; grid-row: 1; justify-self: end; }

  .lightbox__close:hover,
  .lightbox__nav:hover {
    background: color-mix(in oklab, #fff 26%, transparent);
  }
  .lightbox__close:hover { transform: rotate(90deg); }
  .lightbox__nav--prev:hover { transform: translateX(-3px); }
  .lightbox__nav--next:hover { transform: translateX(3px); }
  [dir="rtl"] .lightbox__nav--prev:hover { transform: translateX(3px); }
  [dir="rtl"] .lightbox__nav--next:hover { transform: translateX(-3px); }

  .lightbox__close:focus-visible,
  .lightbox__nav:focus-visible {
    outline: 3px solid var(--c-gold);
    outline-offset: 2px;
  }

  .lightbox__counter {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: color-mix(in oklab, #fff 80%, transparent);
  }
  :lang(zh) .lightbox__counter, :lang(ja) .lightbox__counter,
  :lang(ko) .lightbox__counter, :lang(ar) .lightbox__counter,
  :lang(he) .lightbox__counter { letter-spacing: .04em; }

  /* Single-image gallery: hide nav arrows */
  .lightbox:has([data-gallery-slide]:only-of-type) .lightbox__nav {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .gallery__thumb :global(img),
    .gallery__zoom,
    .lightbox__close,
    .lightbox__nav {
      transition: none;
    }
    .lightbox__close:hover { transform: none; }
    .lightbox__nav:hover { transform: none; }
  }
</style>

<script>
  // Lightbox controller. Works for every [data-gallery] on the page and is
  // re-initialised after Astro View Transitions swap the DOM.
  function initGalleries() {
    const galleries = document.querySelectorAll<HTMLElement>('[data-gallery]:not([data-gallery-ready])');
    galleries.forEach((root) => {
      root.setAttribute('data-gallery-ready', '');
      const dialog = root.querySelector<HTMLDialogElement>('dialog');
      if (!dialog) return;

      const slides = Array.from(dialog.querySelectorAll<HTMLElement>('[data-gallery-slide]'));
      const counterEl = dialog.querySelector<HTMLElement>('[data-gallery-counter]');
      const counterTpl = counterEl?.textContent ?? '';
      const total = slides.length;
      let index = 0;
      let opener: HTMLElement | null = null;

      const setCounter = (i: number) => {
        if (!counterEl) return;
        // Replace the leading "1" and trailing total in the template with live values.
        // Templates are localized ("Photo 1 of 4" / "Foto 1 di 4"); swap the
        // first standalone "1" and the standalone total number.
        counterEl.textContent = counterTpl
          .replace(/(^|\D)1(\D|$)/, `$1${i + 1}$2`)
          .replace(new RegExp(`(\\D)${total}(\\D|$)`), `$1${total}$2`);
      };

      const show = (i: number) => {
        index = (i + total) % total;
        slides.forEach((s, n) => { s.hidden = n !== index; });
        setCounter(index);
      };

      const isRtl = () => getComputedStyle(document.documentElement).direction === 'rtl';

      const open = (i: number, from: HTMLElement) => {
        opener = from;
        show(i);
        dialog.showModal();
        // focus the next/close control for immediate keyboard nav
        (dialog.querySelector<HTMLElement>('[data-gallery-next]')
          ?? dialog.querySelector<HTMLElement>('[data-gallery-close]'))?.focus();
      };

      const close = () => {
        if (dialog.open) dialog.close();
      };

      root.querySelectorAll<HTMLElement>('[data-gallery-open]').forEach((btn) => {
        btn.addEventListener('click', () => open(Number(btn.dataset.galleryOpen), btn));
      });

      dialog.querySelector('[data-gallery-prev]')?.addEventListener('click', () => show(index - 1));
      dialog.querySelector('[data-gallery-next]')?.addEventListener('click', () => show(index + 1));
      dialog.querySelector('[data-gallery-close]')?.addEventListener('click', close);

      // Click on the backdrop (dialog itself, outside the inner panel) closes.
      dialog.addEventListener('click', (e) => {
        if (e.target === dialog) close();
      });

      // Keyboard: arrows navigate (RTL-aware); Esc handled natively by <dialog>.
      dialog.addEventListener('keydown', (e) => {
        if (total < 2) return;
        if (e.key === 'ArrowRight') { e.preventDefault(); show(isRtl() ? index - 1 : index + 1); }
        else if (e.key === 'ArrowLeft') { e.preventDefault(); show(isRtl() ? index + 1 : index - 1); }
        else if (e.key === 'Home') { e.preventDefault(); show(0); }
        else if (e.key === 'End') { e.preventDefault(); show(total - 1); }
      });

      // Restore focus to the opener on close (native Esc included).
      dialog.addEventListener('close', () => {
        opener?.focus();
        opener = null;
      });
    });
  }

  initGalleries();
  document.addEventListener('astro:page-load', initGalleries);
</script>