"use client";

import { useEffect, useState } from "react";
import PlayArrowIcon from "@mui/icons-material/PlayArrow";

interface VideoHeroProps {
    videoUrl: string;
    eyebrow: string;
    title: string;
    titleHighlight?: string;
    subtitle: string;
    playText?: string;
}

export default function VideoHero({
    videoUrl,
    eyebrow,
    title,
    titleHighlight,
    subtitle,
    playText = "Play Video",
}: VideoHeroProps) {

    const [isValidVideo, setIsValidVideo] = useState(false);
    const [videoSrc, setVideoSrc] = useState("");
    const [isVideoModalOpen, setIsVideoModalOpen] = useState(false);

    useEffect(() => {
        const checkVideo = async () => {
            if (!videoUrl) return;

            const url = videoUrl.startsWith("http://") || videoUrl.startsWith("https://")
                ? videoUrl
                : `${process.env.NEXT_PUBLIC_API_IMAGE_URL || ""}${videoUrl}`;

            try {
                const response = await fetch(url, {
                    method: "HEAD",
                });

                const contentType = response.headers.get("content-type");

                if (
                    response.ok &&
                    contentType &&
                    contentType.includes("video")
                ) {
                    setVideoSrc(url);
                    setIsValidVideo(true);
                } else {
                    // Fallback to setting videoSrc if ok
                    if (response.ok) {
                        setVideoSrc(url);
                        setIsValidVideo(true);
                    } else {
                        setIsValidVideo(false);
                    }
                }

            } catch (error) {
                // If HEAD fetch is blocked by CORS, fallback to displaying video directly
                setVideoSrc(url);
                setIsValidVideo(true);
            }
        };

        if (videoUrl) {
            checkVideo();
        }

    }, [videoUrl]);


    return (
        <section className="relative flex min-h-screen items-center justify-center overflow-hidden mb-30 bg-black">

            {isValidVideo && (
                <video
                    className="absolute inset-0 h-full w-full object-cover"
                    autoPlay
                    muted
                    loop
                    playsInline
                >
                    <source
                        src={videoSrc}
                        type="video/mp4"
                    />
                </video>
            )}


            <div className="relative z-10 mx-auto flex max-w-7xl flex-col items-center px-6 text-center text-white">

                <p className="mb-3 text-lg font-semibold text-white">
                    {eyebrow}
                </p>

                <h1 className="mb-3 text-4xl font-bold md:text-6xl text-white">
                    {title}{" "}
                    {titleHighlight && (
                        <span className="font-light">
                            {titleHighlight}
                        </span>
                    )}
                </h1>

                <h2 className="mb-10 max-w-3xl text-xl font-semibold text-white">
                    {subtitle}
                </h2>
            </div>

            {isValidVideo && (
                <div className="absolute top-1/2 -translate-y-1/2 left-6 md:left-10 lg:left-14 z-2 mt-30">
                    <button
                        type="button"
                        onClick={() => setIsVideoModalOpen(true)}
                        className="group flex items-center gap-3.5 text-left cursor-pointer transition-transform duration-300"
                    >
                        <div className="
                            flex 
                            h-11 
                            w-11 
                            md:h-12 
                            md:w-12 
                            items-center 
                            justify-center 
                            rounded-full 
                            bg-white/25 
                            backdrop-blur-md 
                            shadow-lg 
                            transition-all 
                            duration-300 
                            group-hover:bg-white/40 
                            group-hover:border-white/50 
                            group-hover:scale-110
                        ">
                            <PlayArrowIcon className="text-white text-xl md:text-2xl ml-0.5 transition-transform duration-300 group-hover:scale-105" />
                        </div>

                        <span className="text-sm md:text-base font-semibold tracking-tighter text-white transition-colors duration-300 group-hover:text-white/90">
                            {playText}
                        </span>
                    </button>
                </div>
            )}



            {/* Compact Video Modal */}
            {isVideoModalOpen && (
                <div
                    className="
                        fixed
                        inset-0
                        z-[9999]
                        flex
                        items-center
                        justify-center
                        bg-black/80
                        backdrop-blur-sm
                        p-4
                    "
                    onClick={() => setIsVideoModalOpen(false)}
                >
                    <div
                        className="
                            relative
                            w-full
                            max-w-2xl
                            overflow-hidden
                            rounded-sm
                            bg-black
                            shadow-2xl
                        "
                        onClick={(e) => e.stopPropagation()}
                    >
                        <button
                            onClick={() => setIsVideoModalOpen(false)}
                            className="
                                absolute
                                right-3
                                top-3
                                z-30
                                flex
                                h-9
                                w-9
                                items-center
                                justify-center
                                rounded-full
                                bg-black/70
                                text-white
                                transition
                                hover:bg-black
                            "
                        >
                            ✕
                        </button>

                        <div className="relative aspect-video w-full">
                            <video
                                controls
                                autoPlay
                                className="h-full w-full rounded-sm object-contain"
                            >
                                <source
                                    src={videoSrc}
                                    type="video/mp4"
                                />
                            </video>
                        </div>
                    </div>
                </div>
            )}

        </section>
    );
}