"use client";

import { CustomShellLightbox } from "./index";

export interface DemoProps {
  imageCount?: number;
  backdropOpacity?: number;
  showCaption?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ imageCount = 5, backdropOpacity = 92, showCaption = true }: DemoProps) {
  return (
    <div className="w-full p-6">
      <CustomShellLightbox imageCount={imageCount} backdropOpacity={backdropOpacity} showCaption={showCaption} />
    </div>
  );
}

1d:T1e1e, 1e:T174ac,

<script setup lang="ts">
import { computed, nextTick, ref, watch } from "vue";

const props = withDefaults(
  defineProps<{
    imageCount?: number;
    backdropOpacity?: number;
    showCaption?: boolean;
  }>(),
  { imageCount: 5, backdropOpacity: 92, showCaption: true },
);

interface Plate {
  title: string;
  accent: string;
}

const ALL_PLATES: Plate[] = [
  { title: "Harbor light before the tide", accent: "#38BDF8" },
  { title: "Fog over the ridge trail", accent: "#9BE15D" },
  { title: "Kite festival, late afternoon", accent: "#F5C542" },
  { title: "Neon alley after the rain", accent: "#FF4D8D" },
  { title: "Terraced fields at first light", accent: "#7C5CFF" },
  { title: "Salt flats, midday glare", accent: "#FF6A1F" },
  { title: "Lantern market, closing hour", accent: "#38BDF8" },
  { title: "Glacier melt, blue hour", accent: "#9BE15D" },
  { title: "Rooftop garden, city hum", accent: "#F5C542" },
  { title: "Night market, steam and light", accent: "#FF4D8D" },
];

const count = computed(() => Math.min(Math.max(Math.round(props.imageCount), 3), 10));
const plates = computed(() => ALL_PLATES.slice(0, count.value));
const openIndex = ref<number | null>(null);
const closeButton = ref<HTMLButtonElement | null>(null);
const triggerEl = ref<HTMLButtonElement | null>(null);
const scrim = computed(() => Math.min(Math.max(props.backdropOpacity, 0), 100) / 100);
const active = computed(() => (openIndex.value === null ? null : plates.value[openIndex.value]));

watch(openIndex, (value, previous) => {
  if (value !== null && previous === null) {
    nextTick(() => closeButton.value?.focus());
  }
  if (value === null && previous !== null) {
    nextTick(() => triggerEl.value?.focus());
  }
});

function openAt(index: number, event: MouseEvent) {
  triggerEl.value = event.currentTarget as HTMLButtonElement;
  openIndex.value = index;
}
function close() {
  openIndex.value = null;
}
function step(delta: number) {
  if (openIndex.value === null) return;
  openIndex.value = (openIndex.value + delta + count.value) % count.value;
}
function onOverlayKeydown(event: KeyboardEvent) {
  if (event.key === "Escape") {
    event.stopPropagation();
    close();
  } else if (event.key === "ArrowRight") {
    event.preventDefault();
    step(1);
  } else if (event.key === "ArrowLeft") {
    event.preventDefault();
    step(-1);
  }
}
</script>

<template>
  <div class="lightbox">
    <div class="lightbox__grid">
      <button
        v-for="(plate, index) in plates"
        :key="plate.title"
        type="button"
        class="lightbox__plate"
        :tabindex="openIndex !== null ? -1 : 0"
        :style="{ background: `linear-gradient(160deg, ${plate.accent}CC, ${plate.accent}55)` }"
        @click="openAt(index, $event)"
      >
        <span class="lightbox__plate-label">{{ plate.title }}</span>
      </button>
    </div>

    <Transition name="lightbox-fade">
      <div
        v-if="active"
        class="lightbox__overlay"
        role="dialog"
        aria-modal="false"
        :aria-label="active.title"
        @keydown="onOverlayKeydown"
      >
        <div class="lightbox__scrim" :style="{ background: `rgba(4,5,7,${scrim})` }" aria-hidden="true" @click="close" />

        <button ref="closeButton" type="button" class="lightbox__close" aria-label="Close" @click="close">
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" aria-hidden="true">
            <path d="M6 6l12 12M18 6L6 18" />
          </svg>
        </button>

        <template v-if="count > 1">
          <button type="button" class="lightbox__arrow lightbox__arrow--left" aria-label="Previous image" @click="step(-1)">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M15 5l-7 7 7 7" />
            </svg>
          </button>
          <button type="button" class="lightbox__arrow lightbox__arrow--right" aria-label="Next image" @click="step(1)">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M9 5l7 7-7 7" />
            </svg>
          </button>
        </template>

        <Transition name="lightbox-swap" mode="out-in">
          <div :key="openIndex ?? -1" class="lightbox__figure">
            <div class="lightbox__image" :style="{ background: `linear-gradient(160deg, ${active.accent}E6, ${active.accent}40)` }" />
            <p v-if="showCaption" class="lightbox__caption">{{ active.title }}</p>
          </div>
        </Transition>
      </div>
    </Transition>
  </div>
</template>

<style scoped>
.lightbox {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: #0b0d10;
  padding: 1.5rem;
}
.lightbox__grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.lightbox__plate {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0.5rem;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  transition: transform 150ms ease;
}
.lightbox__plate:hover {
  transform: scale(1.02);
}
.lightbox__plate:focus-visible {
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.7);
}
.lightbox__plate-label {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  background: rgb(0 0 0 / 0.45);
  color: rgb(255 255 255 / 0.9);
  font: 500 11px/1.4 system-ui, sans-serif;
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lightbox__overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.lightbox__scrim {
  position: absolute;
  inset: 0;
}
.lightbox__close,
.lightbox__arrow {
  position: absolute;
  z-index: 30;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: rgb(255 255 255 / 0.7);
  cursor: pointer;
  outline: none;
  transition: color 150ms ease;
}
.lightbox__close:hover,
.lightbox__arrow:hover {
  color: #fff;
}
.lightbox__close:focus-visible,
.lightbox__arrow:focus-visible {
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.7);
}
.lightbox__close {
  top: 1rem;
  right: 1rem;
  width: 2.25rem;
  height: 2.25rem;
}
.lightbox__arrow {
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
}
.lightbox__arrow--left {
  left: 0.5rem;
}
.lightbox__arrow--right {
  right: 0.5rem;
}
.lightbox__figure {
  position: relative;
  z-index: 10;
  display: flex;
  width: 100%;
  max-width: 42rem;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.lightbox__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 0.75rem;
}
.lightbox__caption {
  margin: 0;
  text-align: center;
  font-size: 0.875rem;
  color: rgb(255 255 255 / 0.7);
}
.lightbox-fade-enter-active,
.lightbox-fade-leave-active {
  transition: opacity 280ms ease;
}
.lightbox-fade-enter-from,
.lightbox-fade-leave-to {
  opacity: 0;
}
.lightbox-swap-enter-active,
.lightbox-swap-leave-active {
  transition: opacity 220ms ease, transform 220ms ease;
}
.lightbox-swap-enter-from,
.lightbox-swap-leave-to {
  opacity: 0;
  transform: scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
  .lightbox-fade-enter-active,
  .lightbox-fade-leave-active,
  .lightbox-swap-enter-active,
  .lightbox-swap-leave-active {
    transition-duration: 1ms;
  }
}
</style>

Nearby