import type { MouseEvent, ReactNode, RefObject } from "react";

interface VideoPlayerProps {
    src: string | null;
    videoRef: RefObject<HTMLVideoElement>;
    playing: boolean;
    currentFrame: number;
    totalFrames: number;
    onTogglePlay: () => void;
    onPlay: () => void;
    onPause: () => void;
    onEnded: () => void;
    onLoadError?: () => void | Promise<void>;
    onStageClick?: (position: { x: number; y: number }) => void;
    children?: ReactNode;
}

function VideoPlayer({
    src,
    videoRef,
    currentFrame,
    totalFrames,
    onEnded,
    onLoadError,
    onPause,
    onPlay,
    onTogglePlay,
    onStageClick,
    children,
}: VideoPlayerProps) {
    const handleStageClick = (event: MouseEvent<HTMLDivElement>) => {
        if (!onStageClick) return;
        const rect = event.currentTarget.getBoundingClientRect();
        const x = ((event.clientX - rect.left) / rect.width) * 100;
        const y = ((event.clientY - rect.top) / rect.height) * 100;
        onStageClick({ x: Math.max(0, Math.min(100, x)), y: Math.max(0, Math.min(100, y)) });
    };

    return (
        <div
            style={{
                width: "100%",
                maxWidth: "1100px",
                aspectRatio: "16/9",
                borderRadius: "var(--radius-xl)",
                overflow: "hidden",
                position: "relative",
                background: "var(--bg-base)",
                border: "1px solid var(--border-default)",
                boxShadow: "var(--shadow-lg)",
            }}
        >
            {src ? (
                <video
                    ref={videoRef}
                    src={src}
                    style={{ width: "100%", height: "100%", objectFit: "contain" }}
                    onPlay={onPlay}
                    onPause={onPause}
                    onEnded={onEnded}
                    onError={(e) => {
                        const video = e.currentTarget;
                        console.error("Video load error:", {
                            src: video.src,
                            error: video.error,
                            networkState: video.networkState,
                            readyState: video.readyState,
                        });
                        onLoadError?.();
                    }}
                    onLoadedMetadata={(e) => {
                        console.log("Video metadata loaded:", {
                            duration: e.currentTarget.duration,
                            videoWidth: e.currentTarget.videoWidth,
                            videoHeight: e.currentTarget.videoHeight,
                        });
                    }}
                />
            ) : (
                <div
                    style={{
                        color: "var(--text-muted)",
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        height: "100%",
                        fontSize: "13px",
                    }}
                >
                    Loading video...
                </div>
            )}

            <div
                style={{
                    position: "absolute",
                    top: "12px",
                    right: "12px",
                    background: "var(--bg-elevated)",
                    border: "1px solid var(--border-default)",
                    borderRadius: "var(--radius-md)",
                    padding: "5px 10px",
                    fontSize: "11px",
                    fontFamily: "var(--font-mono)",
                    fontWeight: 500,
                    color: "var(--text-secondary)",
                }}
            >
                {currentFrame} / {totalFrames}
            </div>

            <div
                style={{
                    position: "absolute",
                    inset: 0,
                    cursor: onStageClick ? "crosshair" : "pointer",
                }}
                onClick={(event) => {
                    handleStageClick(event);
                    if (!onStageClick) onTogglePlay();
                }}
            >
                {children}
            </div>
        </div>
    );
}

export default VideoPlayer;