"use client"

import { useState, useCallback } from "react"

interface VideoLightboxProps {
  thumbnailSrc: string
  videoUrl: string
  className?: string
  children?: React.ReactNode
}

export default function VideoLightbox({ thumbnailSrc, videoUrl, className, children }: VideoLightboxProps) {
  const [open, setOpen] = useState(false)

  const handleOpen = useCallback(() => setOpen(true), [])
  const handleClose = useCallback(() => setOpen(false), [])

  const embedUrl = videoUrl.includes("youtube.com/watch")
    ? videoUrl.replace("watch?v=", "embed/") + "?autoplay=1"
    : videoUrl

  return (
    <>
      <button type="button" className={className} onClick={handleOpen} style={{ cursor: "pointer", border: "none", background: "none", padding: 0 }}>
        {children || <img src={thumbnailSrc} alt="Video thumbnail" style={{ width: "100%" }} />}
      </button>
      {open && (
        <div
          style={{
            position: "fixed", inset: 0, zIndex: 9999,
            background: "rgba(0,0,0,0.9)",
            display: "flex", alignItems: "center", justifyContent: "center",
          }}
          onClick={handleClose}
        >
          <div style={{ position: "relative", width: "90vw", maxWidth: 1200, aspectRatio: "16/9" }} onClick={(e) => e.stopPropagation()}>
            <iframe
              src={embedUrl}
              style={{ width: "100%", height: "100%", border: "none", borderRadius: 12 }}
              allow="autoplay; fullscreen; picture-in-picture"
              allowFullScreen
            />
            <button
              type="button"
              onClick={handleClose}
              style={{
                position: "absolute", top: -40, right: 0,
                background: "none", border: "none", color: "#fff",
                fontSize: 28, cursor: "pointer", lineHeight: 1,
              }}
              aria-label="Close"
            >
              &#x2715;
            </button>
          </div>
        </div>
      )}
    </>
  )
}