"use client";

import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { GALLERY_CONTENT } from "@/config/siteContent";

interface GalleryProps {
  onOpenLightbox: (index: number) => void;
}

export default function Gallery({ onOpenLightbox }: GalleryProps) {
  const [selectedCategory, setSelectedCategory] = useState("BEDROOM");

  const categoryPhotos = GALLERY_CONTENT.categoryPhotos;
  const currentPhotos = (categoryPhotos as Record<string, Array<{ title: string; image: string }>>)[selectedCategory] || categoryPhotos.ALL;

  const handleImageError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
    e.currentTarget.src = "/images/hero_luxury_villa.jpg";
  };

  return (
    <section id="gallery" className="py-24 bg-[#c8beaf] text-zinc-900 overflow-hidden relative">
      <div className="max-w-7xl mx-auto px-6 lg:px-12">
        
        {/* Title */}
        <motion.h2 
          initial={{ opacity: 0, y: 15 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.3 }}
          className="text-4xl sm:text-5xl font-black font-serif tracking-tight text-zinc-900 mb-12"
        >
          {GALLERY_CONTENT.titleLine1} <br />
          {GALLERY_CONTENT.titleLine2}
        </motion.h2>

        {/* Gallery Container Grid */}
        <div className="relative grid grid-cols-1 lg:grid-cols-12 gap-8 items-center pt-8 pb-16">
          
          {/* Black Container Box */}
          <motion.div 
            initial={{ opacity: 0, x: -20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.3 }}
            className="lg:col-span-8 bg-black text-white p-8 sm:p-12 md:p-14 shadow-2xl relative z-0 flex flex-col md:flex-row gap-10 md:gap-14 min-h-[360px] rounded-2xl"
          >
            {/* Category Filter Navigation */}
            <div className="space-y-4 shrink-0 font-mono text-xs sm:text-sm tracking-widest uppercase">
              {GALLERY_CONTENT.categories.map((cat) => (
                <div key={cat} className="block">
                  <button
                    onClick={() => setSelectedCategory(cat)}
                    className={`transition-colors py-1 relative ${
                      selectedCategory === cat
                        ? "text-white font-bold"
                        : "text-zinc-400 hover:text-zinc-200"
                    }`}
                  >
                    {cat}
                    {selectedCategory === cat && (
                      <motion.div
                        layoutId="galleryTabUnderline"
                        className="absolute bottom-0 left-0 right-0 h-0.5 bg-white"
                        transition={{ duration: 0.2 }}
                      />
                    )}
                  </button>
                </div>
              ))}
            </div>

            {/* Paragraph Text inside Black Box */}
            <div className="text-zinc-300 text-xs sm:text-sm leading-relaxed max-w-md font-normal self-center">
              <p>
                {GALLERY_CONTENT.description}
              </p>
            </div>
          </motion.div>

          {/* Overlapping 4-Photo Grid */}
          <div className="lg:col-span-4 relative z-10 lg:-ml-28">
            <AnimatePresence mode="wait">
              <motion.div 
                key={selectedCategory}
                initial={{ opacity: 0, scale: 0.98 }}
                animate={{ opacity: 1, scale: 1 }}
                exit={{ opacity: 0, scale: 0.98 }}
                transition={{ duration: 0.2 }}
                className="grid grid-cols-2 gap-4 sm:gap-6"
              >
                {/* Top-Left Photo */}
                <div 
                  onClick={() => onOpenLightbox(0)}
                  className="group relative h-[220px] sm:h-[260px] shadow-2xl overflow-hidden cursor-pointer bg-zinc-900 border-2 border-white/20 -mt-10 rounded-xl"
                >
                  <img
                    src={currentPhotos[0]?.image}
                    alt={currentPhotos[0]?.title}
                    onError={handleImageError}
                    className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
                  />
                  <div className="absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition duration-200 flex items-end p-3">
                    <span className="text-white text-[11px] font-bold line-clamp-1">{currentPhotos[0]?.title}</span>
                  </div>
                </div>

                {/* Top-Right Photo */}
                <div 
                  onClick={() => onOpenLightbox(1)}
                  className="group relative h-[220px] sm:h-[260px] shadow-2xl overflow-hidden cursor-pointer bg-zinc-900 border-2 border-white/20 -mt-6 rounded-xl"
                >
                  <img
                    src={currentPhotos[1]?.image}
                    alt={currentPhotos[1]?.title}
                    onError={handleImageError}
                    className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
                  />
                  <div className="absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition duration-200 flex items-end p-3">
                    <span className="text-white text-[11px] font-bold line-clamp-1">{currentPhotos[1]?.title}</span>
                  </div>
                </div>

                {/* Bottom-Left Photo */}
                <div 
                  onClick={() => onOpenLightbox(2)}
                  className="group relative h-[220px] sm:h-[260px] shadow-2xl overflow-hidden cursor-pointer bg-zinc-900 border-2 border-white/20 rounded-xl"
                >
                  <img
                    src={currentPhotos[2]?.image}
                    alt={currentPhotos[2]?.title}
                    onError={handleImageError}
                    className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
                  />
                  <div className="absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition duration-200 flex items-end p-3">
                    <span className="text-white text-[11px] font-bold line-clamp-1">{currentPhotos[2]?.title}</span>
                  </div>
                </div>

                {/* Bottom-Right Photo */}
                <div 
                  onClick={() => onOpenLightbox(3)}
                  className="group relative h-[240px] sm:h-[280px] shadow-2xl overflow-hidden cursor-pointer bg-zinc-900 border-2 border-white/20 mt-4 rounded-xl"
                >
                  <img
                    src={currentPhotos[3]?.image}
                    alt={currentPhotos[3]?.title}
                    onError={handleImageError}
                    className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
                  />
                  <div className="absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition duration-200 flex items-end p-3">
                    <span className="text-white text-[11px] font-bold line-clamp-1">{currentPhotos[3]?.title}</span>
                  </div>
                </div>
              </motion.div>
            </AnimatePresence>
          </div>

        </div>

      </div>
    </section>
  );
}