<script setup lang="ts">
type ImageMetadata = {
  url: string;
  date: string;
  camera: string;
  lens: string;
  settings?: {
    aperture?: string;
    shutter?: string;
    iso?: string;
    focalLength?: string;
  };
};

const images: ImageMetadata[] = [
  {
    url: "https://picsum.photos/640/640?random=1",
    date: "March 7, 2025",
    camera: "Olympus EPL-7",
    lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
    settings: {
      aperture: "f/10",
      shutter: "1/250s",
      iso: "500",
      focalLength: "60mm",
    },
  },
  {
    url: "https://picsum.photos/640/800?random=2",
    date: "March 8, 2025",
    camera: "Olympus EPL-7",
    lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
    settings: {
      aperture: "f/10",
      shutter: "1/250s",
      iso: "500",
      focalLength: "60mm",
    },
  },
  {
    url: "https://picsum.photos/800/640?random=3",
    date: "March 10, 2025",
    camera: "Olympus EPL-7",
    lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
    settings: {
      aperture: "f/10",
      shutter: "1/250s",
      iso: "500",
      focalLength: "60mm",
    },
  },
  {
    url: "https://picsum.photos/1000/640?random=4",
    date: "March 12, 2025",
    camera: "Olympus EPL-7",
    lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
    settings: {
      aperture: "f/10",
      shutter: "1/250s",
      iso: "500",
      focalLength: "60mm",
    },
  },
  {
    url: "https://picsum.photos/640/400?random=5",
    date: "March 15, 2025",
    camera: "Olympus EPL-7",
    lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
    settings: {
      aperture: "f/10",
      shutter: "1/250s",
      iso: "500",
      focalLength: "60mm",
    },
  },
  {
    url: "https://picsum.photos/640/800?random=6",
    date: "March 18, 2025",
    camera: "Olympus EPL-7",
    lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
    settings: {
      aperture: "f/10",
      shutter: "1/250s",
      iso: "500",
      focalLength: "60mm",
    },
  },
  {
    url: "https://picsum.photos/810/640?random=7",
    date: "March 20, 2025",
    camera: "Olympus EPL-7",
    lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
    settings: {
      aperture: "f/10",
      shutter: "1/250s",
      iso: "500",
      focalLength: "60mm",
    },
  },
  {
    url: "https://picsum.photos/760/640?random=8",
    date: "March 22, 2025",
    camera: "Olympus EPL-7",
    lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
    settings: {
      aperture: "f/10",
      shutter: "1/250s",
      iso: "500",
      focalLength: "60mm",
    },
  },
  {
    url: "https://picsum.photos/640/900?random=9",
    date: "March 25, 2025",
    camera: "Olympus EPL-7",
    lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
    settings: {
      aperture: "f/10",
      shutter: "1/250s",
      iso: "500",
      focalLength: "60mm",
    },
  },
  {
    url: "https://picsum.photos/1000/640?random=10",
    date: "March 28, 2025",
    camera: "Olympus EPL-7",
    lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
    settings: {
      aperture: "f/10",
      shutter: "1/250s",
      iso: "500",
      focalLength: "60mm",
    },
  },
  {
    url: "https://picsum.photos/640/600?random=11",
    date: "March 30, 2025",
    camera: "Olympus EPL-7",
    lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
    settings: {
      aperture: "f/10",
      shutter: "1/250s",
      iso: "500",
      focalLength: "60mm",
    },
  },
];

const columnCount = ref(3);
const isModalOpen = ref(false);
const currentImageIndex = ref(0);

const currentImage = computed(() => images[currentImageIndex.value]!);

const getColumnImages = (columnNumber: number) =>
  images.filter((_, index) => index % columnCount.value === columnNumber - 1);

const updateColumns = () => {
  if (window.innerWidth < 768) {
    columnCount.value = 1;
  } else if (window.innerWidth < 1152) {
    columnCount.value = 2;
  } else {
    columnCount.value = 3;
  }
};

const openModal = (image: ImageMetadata) => {
  const index = images.indexOf(image);
  if (index !== -1) {
    currentImageIndex.value = index;
    isModalOpen.value = true;
  }
};

const closeModal = () => {
  isModalOpen.value = false;
};

const nextImage = () => {
  currentImageIndex.value = (currentImageIndex.value + 1) % images.length;
};

const prevImage = () => {
  currentImageIndex.value =
    (currentImageIndex.value - 1 + images.length) % images.length;
};

const handleKeydown = (event: KeyboardEvent) => {
  if (!isModalOpen.value) return;

  if (event.key === "Escape") {
    closeModal();
  } else if (event.key === "ArrowRight") {
    nextImage();
  } else if (event.key === "ArrowLeft") {
    prevImage();
  }
};

onMounted(() => {
  updateColumns();
  window.addEventListener("resize", updateColumns);
  window.addEventListener("keydown", handleKeydown);
});

onUnmounted(() => {
  window.removeEventListener("resize", updateColumns);
  window.removeEventListener("keydown", handleKeydown);
});
</script>

<template>
  <div
    class="min-h-screen bg-[#0a0a0a] text-white px-12 py-12 font-[JetBrains_Mono]"
  >
    <div class="flex gap-6">
      <div
        v-for="col in columnCount"
        :key="col"
        class="flex-1 flex flex-col gap-6"
      >
        <header v-if="col === 1" class="pr-2 pb-6">
          <UButton
            icon="i-lucide-arrow-left"
            size="md"
            color="neutral"
            variant="link"
            :ui="{
              base: 'px-0 text-neutral-600 hover:text-neutral-400',
              leadingIcon: 'size-4',
            }"
            >Back to Home</UButton
          >

          <h1 class="text-3xl mt-3 font-bold">Pihkaal's Gallery</h1>
          <p class="text-neutral-600 text-sm mt-2 w-4/5">
            Started on March 7th, 2025. I love macro photography of insects and
            flowers.
          </p>
        </header>
        <div
          v-for="(image, idx) in getColumnImages(col)"
          :key="idx"
          class="relative overflow-hidden rounded-sm bg-black cursor-pointer"
          @click="openModal(image)"
        >
          <img
            :src="image.url"
            class="w-full h-auto block brightness-80 hover:brightness-100 transition-all"
          />
        </div>
      </div>
    </div>

    <Teleport to="body">
      <Transition name="modal">
        <div
          v-if="isModalOpen"
          class="fixed inset-0 z-50 flex items-center font-[JetBrains_Mono] justify-center bg-black/95 backdrop-blur-sm"
          @click="closeModal"
        >
          <!-- close -->
          <UButton
            icon="i-lucide-x"
            color="neutral"
            variant="link"
            :ui="{ leadingIcon: 'size-8' }"
            class="absolute top-6 right-6 z-10"
            aria-label="Close modal"
            @click="closeModal"
          />

          <!-- previous -->
          <UButton
            icon="i-lucide-chevron-left"
            color="neutral"
            variant="link"
            :ui="{ leadingIcon: 'size-8' }"
            class="absolute left-6 z-10 hidden md:block"
            aria-label="Previous image"
            @click.stop="prevImage"
          />
          <div
            class="flex flex-col items-center justify-center gap-3 max-w-[95vw] max-h-[90vh] px-4 md:px-20"
            @click.stop
          >
            <img
              :key="currentImageIndex"
              :src="currentImage.url"
              class="max-w-[90vw] h-[80vh] object-contain rounded-sm"
              alt="Gallery image"
            />

            <!-- metadata -->
            <div
              class="bg-black px-4 py-2 text-sm text-white flex flex-wrap items-center justify-center gap-2"
            >
              <span>{{ currentImage.date }}</span>
              <span class="text-white/50">|</span>
              <span>{{ currentImage.camera }}</span>
              <span class="text-white/50">|</span>
              <span>{{ currentImage.lens }}</span>
              <template v-if="currentImage.settings">
                <span class="text-white/50">|</span>
                <span v-if="currentImage.settings.aperture">{{
                  currentImage.settings.aperture
                }}</span>
                <span v-if="currentImage.settings.shutter">{{
                  currentImage.settings.shutter
                }}</span>
                <span v-if="currentImage.settings.iso"
                  >ISO {{ currentImage.settings.iso }}</span
                >
                <span v-if="currentImage.settings.focalLength">{{
                  currentImage.settings.focalLength
                }}</span>
              </template>
            </div>
          </div>

          <!-- next -->
          <UButton
            icon="i-lucide-chevron-right"
            color="neutral"
            variant="link"
            :ui="{ leadingIcon: 'size-8' }"
            class="absolute right-6 z-10 hidden md:block"
            aria-label="Next image"
            @click.stop="nextImage"
          />

          <!-- TODO: mobile navigation (use md:hidden) -->

          <div
            class="absolute bottom-6 left-1/2 transform -translate-x-1/2 text-white/70 text-sm"
          >
            {{ currentImageIndex + 1 }} / {{ images.length }}
          </div>
        </div>
      </Transition>
    </Teleport>
  </div>
</template>

<style scoped>
.modal-enter-active,
.modal-leave-active {
  transition: opacity 0.3s ease;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}
</style>
