"use client";

import Image from "next/image";
import { useState, use } from "react";

const getAltText = (alt: string, isEn: boolean) => {
  if (!isEn) return alt;
  const translations: Record<string, string> = {
    "Standart Oda": "Standard Room",
    "Kitesurf": "Kitesurfing",
    "Nehir Doğa": "River Nature",
    "Nehir Manzaralı Oda": "River View Room",
    "Restoran": "Restaurant",
    "Yoga": "Yoga",
    "Bungalow": "Bungalow",
    "SUP": "Stand Up Paddleboarding",
    "Kahvaltı": "Breakfast Spread",
    "Bisiklet": "Bicycle Rental",
    "Restoran Ambiyans": "Restaurant Ambience",
    "Gün Batımı": "Sunset View",
  };
  return translations[alt] || alt;
};

const gallery: { src: string; alt: string; category: "Odalar" | "Aktiviteler" | "Restoran" | "Doğa" }[] = [
  { src: "https://images.unsplash.com/photo-1618773928121-c32242e63f39?q=80&w=2940&auto=format&fit=crop",   alt: "Standart Oda",       category: "Odalar"      },
  { src: "https://images.unsplash.com/photo-1526367790999-0150786686a2?q=80&w=2940&auto=format&fit=crop",   alt: "Kitesurf",           category: "Aktiviteler" },
  { src: "https://images.unsplash.com/photo-1544551763-46a013bb70d5?q=80&w=2940&auto=format&fit=crop",       alt: "Nehir Doğa",         category: "Doğa"        },
  { src: "https://images.unsplash.com/photo-1566665797739-1674de7a421a?q=80&w=2874&auto=format&fit=crop",   alt: "Nehir Manzaralı Oda",category: "Odalar"      },
  { src: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?q=80&w=2940&auto=format&fit=crop",   alt: "Restoran",           category: "Restoran"    },
  { src: "https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?q=80&w=2940&auto=format&fit=crop",   alt: "Yoga",               category: "Aktiviteler" },
  { src: "https://images.unsplash.com/photo-1499955085172-a104c9463ece?q=80&w=2940&auto=format&fit=crop",   alt: "Bungalow",           category: "Odalar"      },
  { src: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=2940&auto=format&fit=crop",       alt: "SUP",                category: "Aktiviteler" },
  { src: "https://images.unsplash.com/photo-1551504734-5ee1c4a1479b?q=80&w=2940&auto=format&fit=crop",       alt: "Kahvaltı",           category: "Restoran"    },
  { src: "https://images.unsplash.com/photo-1511994298241-608e28f14fde?q=80&w=2940&auto=format&fit=crop",   alt: "Bisiklet",           category: "Aktiviteler" },
  { src: "https://images.unsplash.com/photo-1544148103-0773bf10d330?q=80&w=2940&auto=format&fit=crop",       alt: "Restoran Ambiyans",  category: "Restoran"    },
  { src: "https://images.unsplash.com/photo-1498623116890-37e912163d5d?q=80&w=2940&auto=format&fit=crop",   alt: "Gün Batımı",         category: "Doğa"        },
];

export default function GaleriPage({ params }: { params: Promise<{ lang: string }> }) {
  const { lang } = use(params);
  const isEn = lang === "en";

  const filters = isEn 
    ? ["All", "Rooms", "Activities", "Restaurant", "Nature"] 
    : ["Tümü", "Odalar", "Aktiviteler", "Restoran", "Doğa"];

  const [active, setActive] = useState<string>(isEn ? "All" : "Tümü");
  const [lightbox, setLightbox] = useState<string | null>(null);

  const getInternalCategory = (filterName: string) => {
    if (filterName === "All" || filterName === "Tümü") return "Tümü";
    if (filterName === "Rooms") return "Odalar";
    if (filterName === "Activities") return "Aktiviteler";
    if (filterName === "Restaurant") return "Restoran";
    if (filterName === "Nature") return "Doğa";
    return filterName;
  };

  const internalActive = getInternalCategory(active);

  const filtered =
    internalActive === "Tümü" ? gallery : gallery.filter((g) => g.category === internalActive);

  return (
    <div className="min-h-screen bg-background pt-28 pb-20">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        {/* Heading */}
        <div className="text-center mb-12">
          <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
            {isEn ? "Photos" : "Fotoğraflar"}
          </span>
          <h1 className="font-serif text-5xl font-bold text-dark mb-4">{isEn ? "Gallery" : "Galeri"}</h1>
          <p className="text-muted max-w-md mx-auto text-sm leading-relaxed">
            {isEn 
              ? "Discover the unique nature and exciting activities of Kite Beach Akyaka."
              : "Kite Beach Akyaka'nın eşsiz doğasını ve heyecan verici aktivitelerini keşfedin."}
          </p>
        </div>

        {/* Filter tabs */}
        <div className="flex flex-wrap justify-center gap-2 mb-12">
          {filters.map((f) => (
            <button
              key={f}
              onClick={() => setActive(f)}
              className={`px-6 py-2.5 rounded-full text-[12px] font-bold tracking-wider uppercase transition-all duration-300 ${
                active === f
                  ? "bg-primary text-white shadow-md shadow-primary/20"
                  : "bg-white text-dark border border-sand hover:border-primary/40 hover:text-primary"
              }`}
            >
              {f}
            </button>
          ))}
        </div>

        {/* Grid */}
        <div className="columns-1 sm:columns-2 md:columns-3 gap-4 space-y-4">
          {filtered.map((img, idx) => (
            <div
              key={`${active}-${idx}`}
              className="break-inside-avoid relative rounded-2xl overflow-hidden group cursor-pointer"
              onClick={() => setLightbox(img.src)}
              style={{ animation: `scale-in 0.4s cubic-bezier(0.16,1,0.3,1) ${idx * 40}ms both` }}
            >
              <div className="relative w-full" style={{ paddingBottom: idx % 3 === 0 ? "133%" : "75%" }}>
                <Image
                  src={img.src}
                  alt={getAltText(img.alt, isEn)}
                  fill
                  sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, 33vw"
                  className="object-cover group-hover:scale-105 transition-transform duration-700"
                />
                <div className="absolute inset-0 bg-dark/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                  <span className="text-white font-semibold text-[13px] tracking-wider bg-dark/60 backdrop-blur-sm px-4 py-2 rounded-full">
                    {getAltText(img.alt, isEn)}
                  </span>
                </div>
              </div>
            </div>
          ))}
        </div>

      </div>

      {/* Lightbox */}
      {lightbox && (
        <div
          className="fixed inset-0 z-50 bg-dark/95 flex items-center justify-center p-4 cursor-zoom-out"
          onClick={() => setLightbox(null)}
        >
          <div className="relative max-w-5xl w-full max-h-[90vh] aspect-video">
            <Image
              src={lightbox}
              alt="Galeri"
              fill
              sizes="100vw"
              className="object-contain rounded-xl"
            />
          </div>
          <button
            className="absolute top-6 right-6 text-white/60 hover:text-white transition-colors text-3xl font-light"
            onClick={() => setLightbox(null)}
          >
            ×
          </button>
        </div>
      )}
    </div>
  );
}