"use client";

import { useState, useEffect, useCallback, useRef } from "react";
import { Image, X, ChevronLeft, ChevronRight, Calendar, ZoomIn, Download, Maximize2 } from "lucide-react";
import { useParams } from "next/navigation";
import HeroSection from "@/components/ui/hero-section";

interface GalleryImage {
  id: string | number;
  title?: string;
  album: string;
  imageUrl?: string;
  description?: string;
  date?: string;
  [key: string]: unknown;
}

export default function GalleryPage() {
  const params = useParams();
  const lang = (params as { lang?: string })?.lang || "ar";
  const isArabic = lang === "ar";
  const dir = isArabic ? "rtl" : "ltr";

  const [galleryImages, setGalleryImages] = useState<GalleryImage[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedImage, setSelectedImage] = useState<GalleryImage | null>(null);
  const [activeYear, setActiveYear] = useState<string>("all");
  const [selectedIndex, setSelectedIndex] = useState(0);
  const thumbScrollRef = useRef<HTMLDivElement>(null);

  const fetchGallery = useCallback(async () => {
    try {
      const res = await fetch("/api/public/gallery");
      if (res.ok) {
        const data = await res.json();
        setGalleryImages(data);
      }
    } catch (error) {
      console.error("Failed to fetch gallery:", error);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchGallery();
  }, [fetchGallery]);

  const years = Array.from(
    new Set(
      galleryImages
        .map((img) => img.date ? new Date(img.date).getFullYear().toString() : null)
        .filter(Boolean)
    )
  ).sort((a, b) => Number(b) - Number(a));

  const filteredImages = activeYear === "all"
    ? galleryImages
    : galleryImages.filter(
        (img) => img.date && new Date(img.date).getFullYear().toString() === activeYear
      );

  const groupedByYear = years.reduce((acc, year) => {
    acc[year] = galleryImages.filter(
      (img) => img.date && new Date(img.date).getFullYear().toString() === year
    );
    return acc;
  }, {} as Record<string, GalleryImage[]>);

  const openLightbox = (img: GalleryImage) => {
    const idx = filteredImages.findIndex((i) => i.id === img.id);
    setSelectedIndex(idx >= 0 ? idx : 0);
    setSelectedImage(img);
  };

  const navigateImage = useCallback((direction: "next" | "prev") => {
    const len = filteredImages.length;
    if (len === 0) return;
    setSelectedIndex((prev) => {
      const next = direction === "next" ? (prev + 1) % len : (prev - 1 + len) % len;
      setSelectedImage(filteredImages[next]);
      return next;
    });
  }, [filteredImages]);

  const goToImage = useCallback((index: number) => {
    if (index >= 0 && index < filteredImages.length) {
      setSelectedIndex(index);
      setSelectedImage(filteredImages[index]);
    }
  }, [filteredImages]);

  // Keyboard navigation
  useEffect(() => {
    if (!selectedImage) return;
    const handleKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setSelectedImage(null);
      if (e.key === "ArrowLeft") navigateImage(isArabic ? "prev" : "next");
      if (e.key === "ArrowRight") navigateImage(isArabic ? "next" : "prev");
    };
    window.addEventListener("keydown", handleKey);
    return () => window.removeEventListener("keydown", handleKey);
  }, [selectedImage, navigateImage, isArabic]);

  // Scroll thumbnail into view
  useEffect(() => {
    if (thumbScrollRef.current) {
      const active = thumbScrollRef.current.children[selectedIndex] as HTMLElement;
      if (active) {
        active.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
      }
    }
  }, [selectedIndex]);

  return (
    <div dir={dir}>
      <HeroSection
        pageSlug="gallery"
        lang={lang}
        defaultTitle={isArabic ? "المعرض" : "Gallery"}
        defaultSubtitle={isArabic ? "تصفح صور فعالياتنا وأحداثنا" : "Browse photos of our events and activities"}
        badge={
          <div className="inline-flex items-center gap-2 px-4 py-2 bg-white/10 rounded-full text-white/80 text-sm">
            <Image className="w-4 h-4" />
            <span>{isArabic ? "معرض الصور" : "Photo Gallery"}</span>
          </div>
        }
      />

      {/* Year Filter */}
      <section className="py-8 bg-background">
        <div className="container mx-auto px-4">
          <div className="flex flex-wrap gap-3 justify-center">
            <button
              onClick={() => setActiveYear("all")}
              className={`px-6 py-2.5 rounded-full text-sm font-bold transition-all ${
                activeYear === "all"
                  ? "bg-primary text-white"
                  : "bg-surface text-text-secondary hover:bg-primary/10 hover:text-primary border border-border"
              }`}
            >
              {isArabic ? "الكل" : "All"}
            </button>
            {years.map((year) => (
              <button
                key={year}
                onClick={() => setActiveYear(year)}
                className={`px-6 py-2.5 rounded-full text-sm font-bold transition-all ${
                  activeYear === year
                    ? "bg-primary text-white"
                    : "bg-surface text-text-secondary hover:bg-primary/10 hover:text-primary border border-border"
                }`}
              >
                {year}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Gallery Grid */}
      <section className="py-8 bg-background">
        <div className="container mx-auto px-4">
          {loading ? (
            <div className="flex justify-center items-center py-20">
              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary" />
            </div>
          ) : filteredImages.length === 0 ? (
            <div className="text-center py-20">
              <Image className="w-20 h-20 text-gray-300 mx-auto mb-4" />
              <p className="text-text-secondary text-lg">
                {isArabic ? "لا توجد صور حالياً" : "No images available"}
              </p>
            </div>
          ) : activeYear === "all" ? (
            <div className="space-y-12">
              {years.map((year) => (
                <div key={year}>
                  <div className="flex items-center gap-3 mb-6">
                    <Calendar className="w-6 h-6 text-primary" />
                    <h2 className="text-2xl font-bold text-text">{year}</h2>
                    <span className="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium">
                      {groupedByYear[year].length} {isArabic ? "صورة" : "photos"}
                    </span>
                  </div>
                  <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
                    {groupedByYear[year].map((img) => (
                      <div
                        key={img.id}
                        onClick={() => openLightbox(img)}
                        className="aspect-square bg-gradient-to-br from-primary/10 to-secondary/10 rounded-xl overflow-hidden relative group cursor-pointer"
                      >
                        {img.imageUrl ? (
                          <img
                            src={img.imageUrl}
                            alt={img.title || ""}
                            className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
                            onError={(e) => {
                              (e.target as HTMLImageElement).style.display = "none";
                            }}
                          />
                        ) : (
                          <div className="w-full h-full bg-gradient-to-br from-primary/20 to-secondary/20 flex items-center justify-center">
                            <Image className="w-12 h-12 text-primary/30" />
                          </div>
                        )}
                        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors" />
                        <div className="absolute top-2 end-2 opacity-0 group-hover:opacity-100 transition-opacity">
                          <div className="p-2 bg-white/20 backdrop-blur-sm rounded-full">
                            <Maximize2 className="w-4 h-4 text-white" />
                          </div>
                        </div>
                        <div className="absolute bottom-0 inset-x-0 p-3 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
                          <p className="text-white text-xs font-bold truncate">{img.title}</p>
                          <p className="text-white/70 text-[10px]">{img.album}</p>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
              {filteredImages.map((img) => (
                <div
                  key={img.id}
                  onClick={() => openLightbox(img)}
                  className="aspect-square bg-gradient-to-br from-primary/10 to-secondary/10 rounded-xl overflow-hidden relative group cursor-pointer"
                >
                  {img.imageUrl ? (
                    <img
                      src={img.imageUrl}
                      alt={img.title || ""}
                      className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
                      onError={(e) => {
                        (e.target as HTMLImageElement).style.display = "none";
                      }}
                    />
                  ) : (
                    <div className="w-full h-full bg-gradient-to-br from-primary/20 to-secondary/20 flex items-center justify-center">
                      <Image className="w-12 h-12 text-primary/30" />
                    </div>
                  )}
                  <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors" />
                  <div className="absolute top-2 end-2 opacity-0 group-hover:opacity-100 transition-opacity">
                    <div className="p-2 bg-white/20 backdrop-blur-sm rounded-full">
                      <Maximize2 className="w-4 h-4 text-white" />
                    </div>
                  </div>
                  <div className="absolute bottom-0 inset-x-0 p-3 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
                    <p className="text-white text-xs font-bold truncate">{img.title}</p>
                    <p className="text-white/70 text-[10px]">{img.album}</p>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </section>

      {/* Enhanced Lightbox */}
      {selectedImage && (
        <div
          className="fixed inset-0 z-50 bg-black/95 flex flex-col"
          onClick={() => setSelectedImage(null)}
        >
          {/* Top bar */}
          <div className="flex items-center justify-between px-4 py-3 bg-black/50 shrink-0">
            <div className="flex items-center gap-3">
              <span className="text-white font-bold text-sm">
                {selectedIndex + 1} / {filteredImages.length}
              </span>
              {selectedImage.title && (
                <span className="text-white/60 text-sm hidden sm:inline">
                  — {selectedImage.title}
                </span>
              )}
            </div>
            <div className="flex items-center gap-2">
              {selectedImage.imageUrl && (
                <a
                  href={selectedImage.imageUrl}
                  download
                  onClick={(e) => e.stopPropagation()}
                  className="p-2 text-white/60 hover:text-white hover:bg-white/10 rounded-full transition-colors"
                >
                  <Download className="w-5 h-5" />
                </a>
              )}
              <button
                onClick={() => setSelectedImage(null)}
                className="p-2 text-white/60 hover:text-white hover:bg-white/10 rounded-full transition-colors"
              >
                <X className="w-6 h-6" />
              </button>
            </div>
          </div>

          {/* Main image area */}
          <div className="flex-1 flex items-center justify-center relative min-h-0 px-4 py-2">
            {/* Prev button */}
            <button
              onClick={(e) => { e.stopPropagation(); navigateImage("prev"); }}
              className="absolute start-2 sm:start-4 z-10 p-3 bg-white/10 hover:bg-white/20 backdrop-blur-sm rounded-full text-white transition-all shrink-0"
            >
              <ChevronLeft className="w-6 h-6" />
            </button>

            {/* Image */}
            <div className="max-w-5xl max-h-full flex items-center justify-center" onClick={(e) => e.stopPropagation()}>
              {selectedImage.imageUrl ? (
                <img
                  src={selectedImage.imageUrl}
                  alt={selectedImage.title || ""}
                  className="max-w-full max-h-[calc(100vh-180px)] object-contain rounded-lg shadow-2xl"
                  key={selectedImage.id}
                />
              ) : (
                <div className="w-96 h-96 bg-gradient-to-br from-primary/20 to-secondary/20 rounded-lg flex items-center justify-center">
                  <Image className="w-20 h-20 text-primary/30" />
                </div>
              )}
            </div>

            {/* Next button */}
            <button
              onClick={(e) => { e.stopPropagation(); navigateImage("next"); }}
              className="absolute end-2 sm:end-4 z-10 p-3 bg-white/10 hover:bg-white/20 backdrop-blur-sm rounded-full text-white transition-all shrink-0"
            >
              <ChevronRight className="w-6 h-6" />
            </button>
          </div>

          {/* Thumbnail strip */}
          {filteredImages.length > 1 && (
            <div
              ref={thumbScrollRef}
              className="flex gap-2 px-4 py-3 overflow-x-auto shrink-0 bg-black/50 justify-center"
              onClick={(e) => e.stopPropagation()}
            >
              {filteredImages.map((img, i) => (
                <button
                  key={img.id}
                  onClick={(e) => { e.stopPropagation(); goToImage(i); }}
                  className={`shrink-0 w-14 h-14 sm:w-16 sm:h-16 rounded-lg overflow-hidden border-2 transition-all ${
                    i === selectedIndex
                      ? "border-secondary scale-110 shadow-lg shadow-secondary/30"
                      : "border-white/20 opacity-50 hover:opacity-80"
                  }`}
                >
                  {img.imageUrl ? (
                    <img src={img.imageUrl} alt="" className="w-full h-full object-cover" />
                  ) : (
                    <div className="w-full h-full bg-white/10" />
                  )}
                </button>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
}