import {
    forwardRef,
    useImperativeHandle,
    useRef,
    useState,
    useEffect,
} from "react";
import "./AuditCanvas.scss";
import { SubstepButton } from "@/components/SubstepButton/SubstepButton";
import { getMediaPath } from "@/utils/mediaImport";
import { useProgression } from "@/hooks/useProgression";

interface AuditCanvasProps {
    onOpenModal: () => void;
    onOpenLastModal: () => void;
}

export const AuditCanvas = forwardRef<
    { playSegment: () => void },
    AuditCanvasProps
>(({ onOpenModal, onOpenLastModal }, ref) => {
    const [isPlaying, setIsPlaying] = useState(false);
    const { stepValidated } = useProgression();
    const videoRef = useRef<HTMLVideoElement>(null);
    const timecodes = [0, 3, 8, 10, 12, 17, 19.5, 21];

    const steps = [1, 2, 3, 4, 5, 6, 7].map((stepNumber) => (
        <div
            key={stepNumber}
            className={`audit-canvas__substep-button audit-canvas__substep-button--${stepNumber}`}>
            <SubstepButton
                substepNumber={stepNumber}
                onOpenModal={stepNumber === 7 ? onOpenLastModal : onOpenModal}
            />
        </div>
    ));

    useImperativeHandle(ref, () => ({
        playSegment() {
            if (videoRef.current) {
                videoRef.current.play();
                setIsPlaying(true);
            }
        },
    }));

    // Play first segment on component mount
    useEffect(() => {
        const video = videoRef.current;
        if (!video) return;

        video.currentTime = timecodes[0];
        video.play();
        setIsPlaying(true);
    }, []);

    useEffect(() => {
        const video = videoRef.current;
        if (!video || !isPlaying) return;

        const handleTimeUpdate = () => {
            if (video.currentTime >= timecodes[stepValidated + 1]) {
                video.pause();
                setIsPlaying(false);
            }
        };

        video.addEventListener("timeupdate", handleTimeUpdate);

        return () => {
            video.removeEventListener("timeupdate", handleTimeUpdate);
        };
    }, [isPlaying, stepValidated]);

    return (
        <>
            <section className="audit-canvas">
                <div className="audit-canvas__image-container">
                    <video
                        ref={videoRef}
                        className="audit-canvas__image"
                        muted
                        playsInline
                        src={getMediaPath(
                            `/src/assets/videos/schemacentral.webm`,
                            "videos"
                        )}
                    />
                    {steps}
                </div>
            </section>
        </>
    );
});