import React, { useCallback, useEffect } from 'react'
import { AnimatePresence, motion } from 'framer-motion'
import { MdClose, MdChevronLeft, MdChevronRight } from 'react-icons/md'

type Props = {
  images: string[]
  index: number | null
  onClose: () => void
  onChange: (index: number) => void
}

export function Lightbox({ images, index, onClose, onChange }: Props) {
  const isOpen = index !== null

  const next = useCallback(() => {
    if (index === null) return
    onChange((index + 1) % images.length)
  }, [index, images.length, onChange])

  const prev = useCallback(() => {
    if (index === null) return
    onChange((index - 1 + images.length) % images.length)
  }, [index, images.length, onChange])

  useEffect(() => {
    if (!isOpen) return
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose()
      if (e.key === 'ArrowRight') next()
      if (e.key === 'ArrowLeft') prev()
    }
    window.addEventListener('keydown', onKey)
    document.body.style.overflow = 'hidden'
    return () => {
      window.removeEventListener('keydown', onKey)
      document.body.style.overflow = ''
    }
  }, [isOpen, onClose, next, prev])

  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          role="dialog"
          aria-modal="true"
          className="fixed inset-0 z-[90] flex items-center justify-center p-4 md:p-10"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
        >
          {/* Solid Brand Background */}
          <div
            className="absolute inset-0 bg-[#27221c]"
            onClick={onClose}
            aria-hidden="true"
          />

          {/* Close Button at Top Right */}
          <button
            type="button"
            onClick={onClose}
            className="absolute right-6 top-6 z-10 flex h-10 w-10 items-center justify-center rounded-xl bg-copper text-ink transition-all duration-300 ease-lux hover:scale-105 hover:bg-copper focus:outline-none focus:ring-2 focus:ring-copper"
          >
            <MdClose size={24} />
          </button>

          {/* Main Content Area */}
          <div className="relative z-10 flex w-full max-w-7xl items-center justify-center gap-4 md:gap-8">
            
            {/* Prev Button */}
            <button
              type="button"
              onClick={prev}
              className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-copper text-ink transition-all duration-300 ease-lux hover:scale-105 hover:bg-copper focus:outline-none focus:ring-2 focus:ring-copper"
            >
              <MdChevronRight size={28} />
            </button>

            {/* Image */}
            <motion.img
              key={index}
              src={images[index as number]}
              alt=""
              className="max-h-[85vh] w-auto max-w-[calc(100%-7rem)] rounded-md object-contain shadow-2xl"
              initial={{ opacity: 0, scale: 0.96 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.96 }}
              transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
            />

            {/* Next Button */}
            <button
              type="button"
              onClick={next}
              className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-copper text-ink transition-all duration-300 ease-lux hover:scale-105 hover:bg-[#c57941] focus:outline-none focus:ring-2 focus:ring-copper "
            >
              <MdChevronLeft size={28} />
            </button>
            
          </div>

          <div className="absolute bottom-6 z-10 flex items-center justify-center">
            <span className="text-sm font-light text-copper" dir="ltr">
              {(index as number) + 1} / {images.length}
            </span>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  )
}