"use client";

import Image from "next/image";
import { useEffect, useRef, useState } from "react";
import { useReducedMotion } from "@/app/hooks/useReducedMotion";
import type { ProjectVideoAsset } from "@/lib/project-videos";

/**
 * Vídeo de rolagem do projeto na capa do card. Nada de vídeo é baixado até o card entrar na tela
 * (IntersectionObserver); fora da tela ele pausa. Com prefers-reduced-motion só o poster aparece.
 */
export function ProjectVideo({
  video,
  title,
}: {
  video: ProjectVideoAsset;
  title: string;
}) {
  const reducedMotion = useReducedMotion();
  const ref = useRef<HTMLVideoElement>(null);
  const [activated, setActivated] = useState(false);

  useEffect(() => {
    const element = ref.current;
    if (reducedMotion || !element) return;
    if (typeof IntersectionObserver === "undefined") {
      setActivated(true);
      return;
    }
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry?.isIntersecting) {
          setActivated(true);
          element.play().catch(() => {});
        } else {
          element.pause();
        }
      },
      { rootMargin: "120px 0px", threshold: 0.2 },
    );
    observer.observe(element);
    return () => observer.disconnect();
  }, [reducedMotion]);

  useEffect(() => {
    const element = ref.current;
    if (!activated || reducedMotion || !element) return;
    element.muted = true; // o React não reflete `muted` no DOM e o autoplay exige o valor real
    element.load();
    element.play().catch(() => {});
  }, [activated, reducedMotion]);

  if (reducedMotion) {
    return (
      <Image
        src={video.poster}
        alt={`Captura de tela de ${title}`}
        width={video.width}
        height={video.height}
        sizes="(min-width: 1360px) 33vw, (min-width: 1025px) 50vw, 100vw"
      />
    );
  }

  return (
    <video
      ref={ref}
      autoPlay
      muted
      loop
      playsInline
      preload="none"
      poster={video.poster}
      width={video.width}
      height={video.height}
      aria-label={`Demonstração em vídeo de ${title}`}
      disablePictureInPicture
      disableRemotePlayback
    >
      {activated &&
        video.sources.map((source) => (
          <source key={source.src} src={source.src} type={source.type} />
        ))}
    </video>
  );
}