'use client'

import { useState, useEffect } from 'react'
import { XMarkIcon } from '@heroicons/react/24/outline'

interface VideoModalProps {
  isOpen: boolean
  onClose: () => void
  embedUrl?: string
  title?: string
}

export default function VideoModal({ isOpen, onClose, embedUrl, title = "Demo Video" }: VideoModalProps) {
  // Handle escape key press
  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        onClose()
      }
    }

    if (isOpen) {
      document.addEventListener('keydown', handleEscape)
      // Prevent body scroll when modal is open
      document.body.style.overflow = 'hidden'
    }

    return () => {
      document.removeEventListener('keydown', handleEscape)
      document.body.style.overflow = 'unset'
    }
  }, [isOpen, onClose])

  if (!isOpen) return null

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      {/* Backdrop */}
      <div 
        className="absolute inset-0 bg-black/80 backdrop-blur-sm transition-opacity duration-300"
        onClick={onClose}
      />
      
      {/* Modal Content */}
      <div className="relative w-full max-w-4xl mx-auto">
        {/* Close Button */}
        <button
          onClick={onClose}
          className="absolute -top-12 right-0 z-10 p-2 rounded-full text-white/80 hover:text-white hover:bg-white/10 transition-all duration-200 group"
          aria-label="Close video"
        >
          <XMarkIcon className="w-8 h-8 group-hover:scale-110 transition-transform duration-200" />
        </button>

        {/* Video Container */}
        <div 
          className="relative w-full bg-black rounded-2xl overflow-hidden shadow-2xl transform transition-all duration-300 hover:scale-[1.02]"
          style={{
            aspectRatio: '744 / 504', // Using the aspect ratio from the provided embed dimensions
            boxShadow: '0 0 50px rgba(15, 118, 110, 0.3), 0 0 100px rgba(124, 58, 237, 0.2)'
          }}
        >
          {/* Mystical glow effect */}
          <div className="absolute inset-0 rounded-2xl opacity-20 pointer-events-none">
            <div className="absolute inset-0 bg-gradient-to-br from-teal-500/20 via-transparent to-purple-500/20 animate-pulse" />
          </div>

          {/* Veed.io Embed */}
          <iframe
            src={embedUrl || "https://www.veed.io/embed/d002828c-4b1e-4552-8d87-d6ce48b05d4a?watermark=0&color=&sharing=0&title=0&autoplay=1&volume=100&unmuted=1"}
            title={title}
            className="absolute inset-0 w-full h-full rounded-2xl"
            frameBorder="0"
            allowFullScreen
            style={{ border: 'none' }}
          />
        </div>

        {/* Optional Title */}
        {title && (
          <div className="text-center mt-4">
            <h3 className="text-lg font-medium text-white/90">
              {title}
            </h3>
          </div>
        )}
      </div>
    </div>
  )
}