/**
 * BoostMedia AI Content Generator Admin - Image Lightbox
 *
 * @package BoostMedia_AI
 * @license GPL-2.0-or-later
 */

import { useEffect } from 'react'
import { X, RefreshCw } from 'lucide-react'
import { t } from '../../lib/i18n'

interface ImageLightboxProps {
  imageUrl: string
  postTitle: string
  isOpen: boolean
  onClose: () => void
  onRegenerate: () => void
}

export function ImageLightbox({
  imageUrl,
  postTitle,
  isOpen,
  onClose,
  onRegenerate,
}: ImageLightboxProps) {
  useEffect(() => {
    if (!isOpen) return
    const handleKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose()
    }
    document.addEventListener('keydown', handleKey)
    return () => document.removeEventListener('keydown', handleKey)
  }, [isOpen, onClose])

  if (!isOpen) return null

  return (
    <div
      className="fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4"
      onClick={onClose}
    >
      <div
        className="relative max-w-[90vw] max-h-[90vh] flex flex-col items-center"
        onClick={(e) => e.stopPropagation()}
      >
        <button
          onClick={onClose}
          className="absolute -top-3 -end-3 bg-white rounded-full w-7 h-7 flex items-center justify-center shadow-md hover:bg-bc-gray-100 transition-colors z-10"
        >
          <X className="w-4 h-4 text-bc-gray-600" />
        </button>

        <img
          src={imageUrl}
          alt={postTitle}
          className="max-w-full max-h-[75vh] rounded-bc-lg object-contain"
        />

        <div className="flex justify-center gap-3 mt-4">
          <button
            onClick={onRegenerate}
            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-bc bg-white text-bc-gray-800 font-semibold text-[15px] border-2 border-bc-gray-200 hover:border-bc-primary hover:text-bc-primary transition-colors shadow-md"
          >
            <RefreshCw className="w-4 h-4" />
            {t('Regenerate Image')}
          </button>
        </div>
      </div>
    </div>
  )
}