"use client";

import { useMemo, useState } from "react";
import { GalleryFilters, type GalleryFilter } from "@/components/gallery/GalleryFilters";
import { GalleryLightbox } from "@/components/gallery/GalleryLightbox";
import { galleryImages as mockGalleryImages } from "@/lib/mock-data";
import type { PublicGalleryImage } from "@/lib/db-data";

type GalleryGridProps = {
  images?: PublicGalleryImage[];
};

export function GalleryGrid({ images = mockGalleryImages }: GalleryGridProps) {
  const [activeFilter, setActiveFilter] = useState<GalleryFilter>("All");
  const [activeIndex, setActiveIndex] = useState<number | null>(null);

  const filteredImages = useMemo(
    () =>
      activeFilter === "All"
        ? images
        : images.filter((image) => image.category === activeFilter),
    [activeFilter, images],
  );

  function closeLightbox() {
    setActiveIndex(null);
  }

  function showNext() {
    setActiveIndex((current) => {
      if (current === null) {
        return null;
      }

      return (current + 1) % filteredImages.length;
    });
  }

  function showPrevious() {
    setActiveIndex((current) => {
      if (current === null) {
        return null;
      }

      return (current - 1 + filteredImages.length) % filteredImages.length;
    });
  }

  return (
    <section className="bg-white">
      <GalleryFilters
        activeFilter={activeFilter}
        onFilterChange={(filter) => {
          setActiveFilter(filter);
          closeLightbox();
        }}
      />

      <div className="container-custom pb-10">
        <div className="columns-1 gap-4 sm:columns-2 lg:columns-3">
          {filteredImages.map((image, index) => (
            <button
              key={image.id}
              type="button"
              className="group mb-4 block w-full break-inside-avoid overflow-hidden rounded-card border border-border bg-white text-left shadow-card"
              onClick={() => setActiveIndex(index)}
            >
              <img
                src={image.image}
                alt={image.alt}
                className="h-auto w-full object-cover transition duration-300 group-hover:scale-[1.02]"
              />
              <span className="block p-4">
                <span className="text-xs font-bold uppercase tracking-[0.14em] text-ev-deep">
                  {image.category}
                </span>
                <span className="mt-1 block text-base font-bold text-navy-deep">
                  {image.title}
                </span>
              </span>
            </button>
          ))}
        </div>

        {filteredImages.length === 0 ? (
          <div className="rounded-card border border-border bg-primary-soft p-8 text-center">
            <h2 className="text-xl font-bold text-navy-deep">No images found</h2>
            <p className="mt-2 text-sm text-navy-muted">
              Try selecting another gallery category.
            </p>
          </div>
        ) : null}
      </div>

      <GalleryLightbox
        images={filteredImages}
        activeIndex={activeIndex}
        onClose={closeLightbox}
        onNext={showNext}
        onPrevious={showPrevious}
      />
    </section>
  );
}