"use client";

import { useEffect, useId, useState } from "react";
import Image, { type StaticImageData } from "next/image";
// import DefaultThumbnail from "../../../../public/images/video-thumbnail.png";
import PlayIcon from "../../../../public/images/play-button.svg";
import { VideoTreatmentProps } from "@/types/cataract";

// interface VideoTreatmentProps {
//     className?: string;
//     title?: string;
//     videoUrl?: string;
//     thumbnail?: StaticImageData | string;
// }

const DEFAULT_VIDEO_URL = "/videos/eye-examination.mp4";

export default function VideoSection({
    className,
    image,
    title,
    video = DEFAULT_VIDEO_URL,
    thumbnail,
}: VideoTreatmentProps) {
    const [isVideoOpen, setIsVideoOpen] = useState(false);
    const [hasVideoError, setHasVideoError] = useState(false);
    const titleId = useId();
    const poster = typeof thumbnail === "string" ? thumbnail : thumbnail;

    useEffect(() => {
        if (!isVideoOpen) return;

        const handleKeyDown = (event: KeyboardEvent) => {
            if (event.key === "Escape") setIsVideoOpen(false);
        };

        document.addEventListener("keydown", handleKeyDown);
        return () => document.removeEventListener("keydown", handleKeyDown);
    }, [isVideoOpen]);

    return (
        <section className={`bg-[#00204F] py-16 md:py-30 mb-16 md:mb-20 xl:mb-30 ${className}`}>
            <div className="container">
                <div className="max-w-[1064px] mx-auto">
                    <h2
                        className=" text-[32px] md:text-[40px] text-white font-medium md:text-center text-left leading-[1.2] mb-8 md:mb-14"
                    >
                        {title}
                    </h2>

                    <button
                        type="button"
                        onClick={() => {
                            setHasVideoError(false);
                            setIsVideoOpen(true);
                        }}
                        className="group relative block aspect-[5/4] w-full overflow-hidden rounded-[8px] text-left focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-white md:aspect-[2.13/1] md:rounded-[12px]"
                        aria-haspopup="dialog"
                        aria-label={`Play ${title}`}
                    >
                        <Image
                            src={image}
                            alt=""
                            fill
                            sizes="(max-width: 767px) calc(100vw - 16px), 430px"
                            className="object-cover"
                        />
                        <span className="absolute inset-0 bg-[#00204f]/35 backdrop-blur-[5px] transition-colors duration-200 " />
                        <Image
                            src={PlayIcon}
                            alt="play-icon"
                            width={88}
                            height={88}
                            className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transition-transform duration-200 group-hover:scale-105"
                        />
                    </button>
                </div>
            </div>

            {isVideoOpen && (
                <div
                    className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/80 p-5 backdrop-blur-sm"
                    role="presentation"
                    onMouseDown={() => setIsVideoOpen(false)}
                >
                    <div
                        className="relative w-full max-w-[960px] overflow-hidden rounded-[16px] bg-black shadow-2xl"
                        role="dialog"
                        aria-modal="true"
                        aria-labelledby={titleId}
                        onMouseDown={(event) => event.stopPropagation()}
                    >
                        <button
                            type="button"
                            onClick={() => setIsVideoOpen(false)}
                            className="absolute right-3 top-3 z-10 grid h-9 w-9 place-items-center rounded-full bg-black/60 text-xl leading-none text-white transition-colors hover:bg-black/85 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
                            aria-label="Close video"
                        >
                            <span aria-hidden="true">X</span>
                        </button>
                        <video
                            className="aspect-video w-full"
                            controls
                            autoPlay
                            muted
                            playsInline
                            preload="metadata"
                            poster={poster}
                            onError={() => setHasVideoError(true)}
                        >
                            <source src={video} type="video/mp4" />
                            Your browser does not support the video tag.
                        </video>
                        {hasVideoError && (
                            <p className="absolute inset-x-0 bottom-0 bg-black/80 p-3 text-center text-sm text-white">
                                The video could not be loaded. Please try again later.
                            </p>
                        )}
                    </div>
                </div>
            )}
        </section>
    );
}