"use client";

import { useState } from "react";
import Image from "next/image";
import { Play } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import { cn } from "~/lib/utils";

interface VideoPlayerProps {
  coverImage: string;
  videoSrc: string;
  title?: string;
  aspectRatio?: "square" | "video" | "vertical";
  className?: string;
}

export function VideoPlayer({
  coverImage,
  videoSrc,
  title,
  aspectRatio = "video",
  className,
}: VideoPlayerProps) {
  const [isPlaying, setIsPlaying] = useState(false);

  const aspectRatioClasses = {
    square: "aspect-square",
    video: "aspect-video",
    vertical: "aspect-[9/16]",
  };

  return (
    <div
      className={cn(
        "relative w-full overflow-hidden rounded-lg",
        aspectRatioClasses[aspectRatio],
        className,
      )}
    >
      <AnimatePresence mode="wait">
        {!isPlaying ? (
          <motion.div
            key="cover"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.3 }}
            className="relative h-full w-full cursor-pointer"
            onClick={() => setIsPlaying(true)}
          >
            <Image
              src={coverImage || "/fallback-video.png"}
              alt={title || "Video thumbnail"}
              fill
              className="object-cover"
              priority
            />
            <div className="absolute inset-0 flex items-center justify-center bg-black/20">
              <motion.div
                whileHover={{ scale: 1.1 }}
                whileTap={{ scale: 0.95 }}
                className="bg-primary/90 text-primary-foreground flex size-16 items-center justify-center rounded-full shadow-lg"
              >
                <Play className="size-8" />
              </motion.div>
            </div>
            {title && (
              <div className="absolute right-0 bottom-0 left-0 bg-gradient-to-t from-black/80 to-transparent p-4">
                <h3 className="text-lg font-medium text-white">{title}</h3>
              </div>
            )}
          </motion.div>
        ) : (
          <motion.div
            key="video"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.3 }}
            className="h-full w-full"
          >
            <video
              src={videoSrc}
              className="h-full w-full rounded-md"
              controls
              autoPlay
              controlsList="play nodownload"
              disablePictureInPicture
              disableRemotePlayback
              muted
              onEnded={() => setIsPlaying(false)}
            >
              Your browser does not support the video tag.
            </video>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}
