"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import ProcedureVideoImg from "../../../../public/images/procedure-video.png";
import PlayButtonImg from "../../../../public/images/play-button.svg";
import CloseIconImg from "../../../../public/images/close-icon.svg";
import { LaserProcedureStepsProps } from "@/types/laser-vision";


export default function ProcedureSteps({ title, heading, description, image, video, process_cards = [], className }: LaserProcedureStepsProps) {
    const [activeStep, setActiveStep] = useState(1);
    const [isVideoOpen, setIsVideoOpen] = useState(false);

    if (!heading && (!process_cards || process_cards.length === 0)) return null;

    useEffect(() => {
        const handleScroll = () => {
            const cards = document.querySelectorAll(".procedure-step-card");
            let closestStep = 1;
            let minDistance = Infinity;
            const viewportCenter = window.innerHeight / 2;

            cards.forEach((card) => {
                const rect = card.getBoundingClientRect();
                const cardCenter = rect.top + rect.height / 2;
                const distance = Math.abs(viewportCenter - cardCenter);
                if (distance < minDistance) {
                    minDistance = distance;
                    closestStep = parseInt(card.getAttribute("data-step") || "1");
                }
            });

            setActiveStep(closestStep);
        };

        window.addEventListener("scroll", handleScroll);
        // Initial call
        handleScroll();

        return () => {
            window.removeEventListener("scroll", handleScroll);
        };
    }, []);

    return (
        <section className={`py-16 md:py-30 bg-[#00173B] text-white ${className}`}>
            <div className="container">
                <div className="grid grid-cols-1 md:grid-cols-12 gap-8 lg:gap-16 items-start">
                    {/* Left Sticky Column (Desktop) */}
                    <div className="col-span-1 md:col-span-6 md:sticky md:top-28 h-fit">
                        <span className="text-[12px] md:text-[14px] font-medium text-[#CCD2DC] tracking-[1.5px] uppercase block mb-3">
                            {title}
                        </span>
                        <h2 className="text-[32px] md:text-[48px] text-white font-medium leading-[1.2] mb-2 md:mb-4">
                            {heading}
                        </h2>
                        <p className="text-[18px] md:text-[20px] text-[#CCD2DC] font-normal leading-[1.3] mb-6 md:mb-14 max-w-[550px]">
                            {description}
                        </p>

                        {/* Video Card with Play Button */}
                        <div
                            onClick={() => setIsVideoOpen(true)}
                            className="relative w-full aspect-[16/10] rounded-[24px] overflow-hidden group cursor-pointer border border-[#1E2E4A] shadow-lg"
                        >
                            <Image
                                src={image || ProcedureVideoImg}
                                alt="Step-by-step Procedure Video"
                                fill
                                className="object-cover"
                            />
                            {/* Dark gradient overlay for readability */}
                            <div className="absolute inset-0 bg-black/10 transition-opacity group-hover:bg-black/20" />
                            {/* Play Button */}
                            <div className="absolute inset-0 m-auto w-20 h-20 shadow-lg rounded-full overflow-hidden transition-transform group-hover:scale-110 duration-300 cursor-pointer">
                                <Image
                                    src={PlayButtonImg}
                                    alt="Play video"
                                    width={80}
                                    height={80}
                                    className="w-full h-full"
                                />
                            </div>
                        </div>
                    </div>

                    {/* Right Scrolling Column (Desktop) */}
                    <div className="col-span-1 md:col-span-6 space-y-6 md:space-y-12 md:pt-[25vh] md:pb-[35vh]">
                        {process_cards?.map((processItem, index) => {
                            const isActive = activeStep === index + 1;
                            return (
                                <div
                                    key={index}
                                    data-step={index + 1}
                                    className={`procedure-step-card w-full rounded-[24px] p-8 md:p-12 transition-all duration-500 flex flex-col items-center text-center ${isActive
                                        ? "bg-[#071E3D] border border-[#1E2E4A] opacity-100 scale-100 shadow-xl shadow-black/20"
                                        : "bg-[#071E3D]/30 border border-transparent opacity-20 md:opacity-20 scale-[0.96]"
                                        }`}
                                >
                                    {/* Number Circle */}
                                    <div className={`w-14 h-14 rounded-full text-[24px] font-medium flex items-center justify-center mb-6 shrink-0 shadow-md transition-all duration-500 ${isActive
                                        ? "bg-white text-[#1718FF]"
                                        : "bg-[#132B4F] text-[#4E76B1]"
                                        }`}>
                                        {String(index + 1).padStart(2, "0")}
                                    </div>
                                    <h3 className="text-[18px] md:text-[24px] text-white font-bold leading-[1.3] mb-3">
                                        {processItem.title}
                                    </h3>
                                    <p className="text-[14px] md:text-[18px] text-[#A0AEC0] font-medium leading-[1.5]">
                                        {processItem.description}
                                    </p>
                                </div>
                            );
                        })}
                    </div>
                </div>
            </div>

            {/* Video Modal Overlay */}
            {isVideoOpen && (
                <div
                    onClick={() => setIsVideoOpen(false)}
                    className="fixed inset-0 bg-black/80 z-[9999] flex items-center justify-center p-4 backdrop-blur-xs"
                >
                    <div
                        onClick={(e) => e.stopPropagation()}
                        className="relative w-full max-w-[800px] aspect-[16/9] bg-black rounded-[24px] overflow-hidden border border-white/10 shadow-2xl"
                    >
                        {/* Close button */}
                        <button
                            onClick={() => setIsVideoOpen(false)}
                            className="absolute top-4 right-4 bg-black/50 hover:bg-black/75 text-white rounded-full p-2.5 z-[10000] transition-colors border border-white/20 cursor-pointer flex items-center justify-center"
                            aria-label="Close modal"
                        >
                            <Image
                                src={CloseIconImg}
                                alt="Close icon"
                                width={20}
                                height={20}
                                className="w-5 h-5"
                            />
                        </button>

                        {/* HTML5 Video element */}
                        <video
                            className="w-full h-full object-contain"
                            controls
                            autoPlay
                            muted
                            playsInline
                            preload="auto"
                        >
                            <source src={video} type="video/mp4" />
                            Your browser does not support the video tag.
                        </video>
                    </div>
                </div>
            )}
        </section>
    );
}