"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { X } from "lucide-react"
import Image from "next/image"

interface ImageViewerProps {
  isOpen: boolean
  onClose: () => void
  images: string[]
  currentIndex: number
}

export default function ImageViewer({ isOpen, onClose, images, currentIndex }: ImageViewerProps) {
  const [index, setIndex] = useState(currentIndex)

  useEffect(() => {
    setIndex(currentIndex)
  }, [currentIndex])

  useEffect(() => {
    const handleEsc = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose()
    }

    if (isOpen) {
      document.body.style.overflow = "hidden"
      window.addEventListener("keydown", handleEsc)
    }

    return () => {
      document.body.style.overflow = ""
      window.removeEventListener("keydown", handleEsc)
    }
  }, [isOpen, onClose])

  if (!isOpen) return null

  const nextImage = () => {
    setIndex((prev) => (prev + 1) % images.length)
  }

  const prevImage = () => {
    setIndex((prev) => (prev - 1 + images.length) % images.length)
  }

  const handleBackdropClick = (e: React.MouseEvent) => {
    if (e.target === e.currentTarget) {
      onClose()
    }
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/90" onClick={handleBackdropClick}>
      <button
        onClick={onClose}
        className="absolute top-4 right-4 p-3 rounded-full bg-purple-600/80 text-white hover:bg-purple-500 transition-colors shadow-lg z-50"
        aria-label="Close image viewer"
      >
        <X size={24} />
      </button>

      <div className="relative w-full h-full flex items-center justify-center p-4">
        <div className="relative max-w-full max-h-full">
          <Image
            src={images[index] || "/placeholder.svg"}
            alt="Full size image"
            width={1200}
            height={800}
            className="object-contain max-h-[90vh]"
            style={{ width: "auto", height: "auto" }}
            onClick={(e) => {
              e.stopPropagation()
              nextImage()
            }}
          />
        </div>
      </div>

      {images.length > 1 && (
        <div className="absolute bottom-4 left-0 right-0 flex justify-center gap-2">
          {images.map((_, i) => (
            <button
              key={i}
              onClick={() => setIndex(i)}
              className={`w-2 h-2 rounded-full ${i === index ? "bg-purple-500" : "bg-purple-500/50"}`}
              aria-label={`View image ${i + 1}`}
            />
          ))}
        </div>
      )}
    </div>
  )
}