import { useState, type ReactNode, type VideoHTMLAttributes } from "react";
import { cn } from "../../lib/cn";

export type VideoSource = {
  src: string;
  type?: string;
};

export type VideoPlayerProps = Omit<VideoHTMLAttributes<HTMLVideoElement>, "children"> & {
  aspectRatio?: number | string;
  fallback?: ReactNode;
  fit?: "contain" | "cover" | "fill" | "none" | "scale-down";
  frameClassName?: string;
  responsive?: boolean;
  sources?: VideoSource[];
};

export function VideoPlayer({
  aspectRatio = 16 / 9,
  className,
  controls = true,
  fallback,
  fit = "contain",
  frameClassName,
  playsInline = true,
  onError,
  poster,
  responsive = true,
  src,
  style,
  sources,
  ...props
}: VideoPlayerProps) {
  const [failed, setFailed] = useState(false);

  return (
    <div
      className={cn("relative max-w-full overflow-hidden rounded-[var(--uhuru-radius-md)] bg-[var(--uhuru-surface-inverse)]", frameClassName)}
      style={{ aspectRatio }}
    >
      {failed ? (
        fallback ?? <div className="grid h-full min-h-24 place-items-center px-4 text-sm text-[var(--uhuru-text-inverse)] opacity-70">Unable to load video</div>
      ) : (
        <video
          className={cn(responsive ? "h-full w-full" : "max-w-full", className)}
          controls={controls}
          onError={(event) => {
            setFailed(true);
            onError?.(event);
          }}
          poster={poster}
          playsInline={playsInline}
          src={sources ? undefined : src}
          style={{ objectFit: fit, ...style }}
          {...props}
        >
          {sources?.map((source) => <source key={`${source.src}-${source.type ?? "default"}`} {...source} />)}
        </video>
      )}
    </div>
  );
}