"use client";

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

const filters = ["Tümü", "Odalar", "Aktiviteler", "Restoran", "Doğa"] as const;
type Filter = (typeof filters)[number];

const gallery: { src: string; alt: string; category: Exclude<Filter, "Tümü"> }[] = [
  { src: "https://images.unsplash.com/photo-1582719478250-c89404bb8a0e?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-1522883392419-7d8cb2435728?q=80&w=2924&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() {
  const [active, setActive] = useState<Filter>("Tümü");
  const [lightbox, setLightbox] = useState<string | null>(null);

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

  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">
            Fotoğraflar
          </span>
          <h1 className="font-serif text-5xl font-bold text-dark mb-4">Galeri</h1>
          <p className="text-muted max-w-md mx-auto text-sm leading-relaxed">
            Kite Beach Akyaka'nın eşsiz doğasını, modern odaları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={img.alt}
                  fill
                  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">
                    {img.alt}
                  </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
              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>
  );
}