'use client'

import { useState } from 'react'
import Image from 'next/image'
import { ImageLightbox } from '@/components/ui/image-lightbox'
import { Badge } from '@/components/ui/badge'
import { MapPin, Expand } from 'lucide-react'

interface GalleryProps {
  images: string[]
  title: string
  neighborhood: string
  city: string
  isFeatured?: boolean
}

export function PropertyGallery({ images, title, neighborhood, city, isFeatured }: GalleryProps) {
  const [lightboxOpen, setLightboxOpen] = useState(false)
  const [lightboxIndex, setLightboxIndex] = useState(0)

  const validImages = images.filter(Boolean)
  const coverImage = validImages[0] || '/placeholder-property.svg'

  return (
    <>
      <div className="relative h-[40vh] md:h-[60vh] bg-black">
        {validImages.length > 1 ? (
          <div className="grid grid-cols-4 grid-rows-2 h-full gap-0.5">
            <div
              className="relative col-span-2 row-span-2 cursor-pointer overflow-hidden group"
              onClick={() => { setLightboxIndex(0); setLightboxOpen(true) }}
            >
              <Image src={validImages[0]} alt={title} fill className="object-cover group-hover:scale-105 transition-transform duration-500" priority />
            </div>
            {validImages.slice(1, 5).map((img, i) => (
              <div
                key={i}
                className="relative cursor-pointer overflow-hidden group"
                onClick={() => { setLightboxIndex(i + 1); setLightboxOpen(true) }}
              >
                <Image src={img} alt={`${title} ${i + 2}`} fill className="object-cover group-hover:scale-105 transition-transform duration-500" />
                {i === 3 && validImages.length > 5 && (
                  <div className="absolute inset-0 bg-black/50 flex items-center justify-center text-white text-lg font-bold">
                    +{validImages.length - 5}
                  </div>
                )}
              </div>
            ))}
          </div>
        ) : (
          <div className="relative h-full cursor-pointer" onClick={() => setLightboxOpen(true)}>
            <Image src={coverImage} alt={title} fill className="object-cover opacity-80" priority />
          </div>
        )}

        <div className="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent pointer-events-none" />

        <button
          onClick={() => setLightboxOpen(true)}
          className="absolute top-6 right-6 p-2.5 bg-white/15 backdrop-blur-sm rounded-full text-white hover:bg-white/30 transition-colors z-10"
          title="عرض معرض الصور"
        >
          <Expand className="w-5 h-5" />
        </button>

        {validImages.length > 1 && (
          <div className="absolute top-6 left-6 bg-black/50 backdrop-blur-sm text-white text-xs px-3 py-1.5 rounded-full z-10">
            {validImages.length} صور
          </div>
        )}

        <div className="absolute bottom-6 left-0 right-0">
          <div className="container mx-auto px-4 text-white">
            {isFeatured && <Badge className="bg-blue-600 mb-2 border-none">مميز</Badge>}
            <h1 className="text-3xl md:text-5xl font-bold mb-2">{title}</h1>
            <div className="flex items-center gap-2 text-gray-200">
              <MapPin className="w-5 h-5" />
              <span className="text-lg">{neighborhood}، {city}</span>
            </div>
          </div>
        </div>
      </div>

      <ImageLightbox
        images={validImages}
        currentIndex={lightboxIndex}
        open={lightboxOpen}
        onClose={() => setLightboxOpen(false)}
        onChangeIndex={setLightboxIndex}
      />
    </>
  )
}