"use client";

import { useEffect, useRef, useState } from "react";

type Props = {
  src: string;
  mobileSrc?: string;
  poster?: string;
  className?: string;
  autoPlay?: boolean;
  hoverPlay?: boolean;
  label?: string;
};

export function VideoPreview({
  src,
  mobileSrc,
  poster,
  className = "",
  autoPlay = true,
  hoverPlay = false,
  label = "PLAY",
}: Props) {
  const ref = useRef<HTMLVideoElement>(null);
  const [failed, setFailed] = useState(false);

  useEffect(() => {
    const video = ref.current;
    if (!video) return;

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting && autoPlay) {
          video.play().catch(() => undefined);
        } else {
          video.pause();
        }
      },
      { threshold: 0.12 }
    );

    observer.observe(video);
    return () => observer.disconnect();
  }, [autoPlay]);

  return (
    <div
      className={`video-preview ${className}`}
      data-cursor={label}
      onMouseEnter={() => {
        if (!hoverPlay) return;
        ref.current?.play().catch(() => undefined);
      }}
      onMouseLeave={() => {
        if (!hoverPlay) return;
        ref.current?.pause();
      }}
    >
      {!failed ? (
        <video
          ref={ref}
          poster={poster}
          muted
          loop
          playsInline
          preload="none"
          autoPlay={autoPlay}
          onError={() => setFailed(true)}
          aria-label="Portfolio video preview"
        >
          {mobileSrc ? <source src={mobileSrc} media="(max-width: 700px)" /> : null}
          <source src={src} />
        </video>
      ) : null}
      {failed && poster ? <img src={poster} alt="" className="video-preview__fallback" /> : null}
      <span className="video-preview__label">{label}</span>
    </div>
  );
}