"use client";
import React, { useState, useEffect, useCallback } from "react";
import { useSwipeable } from "react-swipeable";
import Image from "next/image";
import { AWS_CDN_URL } from "@/utils/staticValues";

interface FullScreenGalleryProps {
  images: { id: number; image_url: string; alt_text?: string }[];
  startIndex?: number;
  onClose?: () => void;
}

export default function FullScreenGallery({
  images,
  startIndex = 0,
  onClose,
}: FullScreenGalleryProps) {
  const [currentIndex, setCurrentIndex] = useState(startIndex);

  const handlers = useSwipeable({
    onSwipedLeft: () => setCurrentIndex((prev) => (prev + 1) % images.length),
    onSwipedRight: () =>
      setCurrentIndex((prev) => (prev - 1 + images.length) % images.length),
    trackMouse: true,
  });

  const handleKeyDown = useCallback(
    (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        onClose?.();
      } else if (e.key === "ArrowLeft") {
        setCurrentIndex((prev) => (prev - 1 + images.length) % images.length);
      } else if (e.key === "ArrowRight") {
        setCurrentIndex((prev) => (prev + 1) % images.length);
      }
    },
    [images.length, onClose],
  );

  useEffect(() => {
    document.addEventListener("keydown", handleKeyDown);
    return () => {
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, [handleKeyDown]);

  if (!images || images.length === 0) return null;

  const currentImage = images[currentIndex];

  return (
    <div
      className="fixed inset-0 z-[1000] flex items-center justify-center bg-gray-950/80"
      {...handlers}
    >
      <div className="mob-noise blur-5xl absolute top-0 left-0 h-full w-full opacity-75" />
      <button
        onClick={onClose}
        className="absolute top-0 right-0 z-20 p-8 text-2xl text-white outline-none"
      >
        <i
          className="icon-[solar--close-square-broken]"
          style={{ width: 24, height: 24 }}
        ></i>
      </button>

      <div className="relative flex h-full w-full max-w-4xl items-center justify-center">
        <Image
          src={`${AWS_CDN_URL}/${currentImage.image_url}`}
          alt={currentImage.alt_text || ""}
          fill
          className="object-contain"
        />
      </div>

      {/* Navigation buttons */}
      {images.length > 1 && (
        <>
          <button
            onClick={() =>
              setCurrentIndex(
                (prev) => (prev - 1 + images.length) % images.length,
              )
            }
            className="absolute left-0 z-20 p-4 md:p-8 text-3xl text-white outline-none"
          >
            <i
              className="icon-[solar--arrow-left-broken]"
              style={{ width: 24, height: 24 }}
            ></i>
          </button>
          <button
            onClick={() =>
              setCurrentIndex((prev) => (prev + 1) % images.length)
            }
            className="absolute right-0 z-20 p-4 md:p-8 text-3xl text-white outline-none"
          >
            <i
              className="icon-[solar--arrow-right-broken]"
              style={{ width: 24, height: 24 }}
            ></i>
          </button>
        </>
      )}
    </div>
  );
}