import { useEffect, useCallback } from 'react'
import { ChevronLeft, ChevronRight, X, Download } from 'lucide-react'

export interface LightboxItem {
  url: string
  label?: string
}

interface Props {
  items: LightboxItem[]
  index: number
  onClose: () => void
  onIndexChange: (i: number) => void
}

export default function ImageLightbox({ items, index, onClose, onIndexChange }: Props) {
  const item = items[index]
  const hasPrev = index > 0
  const hasNext = index < items.length - 1

  const prev = useCallback(() => { if (hasPrev) onIndexChange(index - 1) }, [hasPrev, index, onIndexChange])
  const next = useCallback(() => { if (hasNext) onIndexChange(index + 1) }, [hasNext, index, onIndexChange])

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose()
      else if (e.key === 'ArrowLeft') prev()
      else if (e.key === 'ArrowRight') next()
    }
    window.addEventListener('keydown', onKey)
    return () => window.removeEventListener('keydown', onKey)
  }, [onClose, prev, next])

  // Prevent body scroll while open
  useEffect(() => {
    document.body.style.overflow = 'hidden'
    return () => { document.body.style.overflow = '' }
  }, [])

  if (!item) return null

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/90"
      onClick={onClose}
    >
      {/* Close */}
      <button
        className="absolute top-4 right-4 p-2 rounded-full bg-white/10 text-white hover:bg-white/20 transition-colors z-10"
        onClick={onClose}
        title="Close (Esc)"
      >
        <X size={20} />
      </button>

      {/* Counter + label */}
      <div className="absolute top-4 left-4 text-white/70 text-sm z-10 flex items-center gap-3">
        <span>{index + 1} / {items.length}</span>
        {item.label && <span className="text-white/50">{item.label}</span>}
      </div>

      {/* Download */}
      <a
        href={item.url}
        download
        target="_blank"
        rel="noopener noreferrer"
        className="absolute top-4 right-16 p-2 rounded-full bg-white/10 text-white hover:bg-white/20 transition-colors z-10"
        onClick={(e) => e.stopPropagation()}
        title="Download"
      >
        <Download size={18} />
      </a>

      {/* Prev arrow */}
      {hasPrev && (
        <button
          className="absolute left-3 top-1/2 -translate-y-1/2 p-2 rounded-full bg-white/10 text-white hover:bg-white/20 transition-colors z-10"
          onClick={(e) => { e.stopPropagation(); prev() }}
          title="Previous"
        >
          <ChevronLeft size={28} />
        </button>
      )}

      {/* Next arrow */}
      {hasNext && (
        <button
          className="absolute right-3 top-1/2 -translate-y-1/2 p-2 rounded-full bg-white/10 text-white hover:bg-white/20 transition-colors z-10"
          onClick={(e) => { e.stopPropagation(); next() }}
          title="Next"
        >
          <ChevronRight size={28} />
        </button>
      )}

      {/* Image */}
      <img
        src={item.url}
        alt={item.label || 'Render'}
        className="max-h-[90vh] max-w-[90vw] object-contain select-none"
        onClick={(e) => e.stopPropagation()}
        draggable={false}
      />
    </div>
  )
}
