'use client'

import Image from 'next/image'
import { useState } from 'react'
import { X, ChevronLeft, ChevronRight } from 'lucide-react'

export function PortfolioGallery({ images, name }: { images: string[]; name: string }) {
  const [open, setOpen] = useState<number | null>(null)

  if (!images.length) return null

  const next = () => setOpen((i) => (i === null ? null : (i + 1) % images.length))
  const prev = () => setOpen((i) => (i === null ? null : (i - 1 + images.length) % images.length))

  return (
    <>
      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
        {images.map((img, i) => (
          <button
            key={i}
            onClick={() => setOpen(i)}
            className="relative aspect-[4/3] rounded-xl overflow-hidden group cursor-pointer"
            aria-label={`أعمال سابقة ${i + 1}`}
          >
            <Image
              src={img}
              alt={`عمل سابق ${i + 1} - ${name}`}
              fill
              className="object-cover group-hover:scale-110 transition-transform duration-500"
            />
            <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors flex items-center justify-center">
              <span className="opacity-0 group-hover:opacity-100 text-white text-sm font-bold transition-opacity">عرض الصورة</span>
            </div>
          </button>
        ))}
      </div>

      {open !== null && (
        <div className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-4" onClick={() => setOpen(null)}>
          <button className="absolute top-4 right-4 text-white hover:bg-white/10 p-2 rounded-full" onClick={() => setOpen(null)}>
            <X className="w-6 h-6" />
          </button>
          <button className="absolute left-4 top-1/2 -translate-y-1/2 text-white hover:bg-white/10 p-2 rounded-full" onClick={(e) => { e.stopPropagation(); prev() }}>
            <ChevronLeft className="w-6 h-6" />
          </button>
          <button className="absolute right-4 top-1/2 -translate-y-1/2 text-white hover:bg-white/10 p-2 rounded-full" onClick={(e) => { e.stopPropagation(); next() }}>
            <ChevronRight className="w-6 h-6" />
          </button>
          <div className="max-w-4xl w-full h-full flex items-center justify-center" onClick={(e) => e.stopPropagation()}>
            <Image
              src={images[open]}
              alt={`عمل سابق ${open + 1} - ${name}`}
              width={1200}
              height={800}
              className="max-h-full w-auto object-contain rounded-xl"
            />
          </div>
        </div>
      )}
    </>
  )
}