"use client";

import { useEffect, useRef } from "react";
import { useInView } from "@/app/hooks/useInView";
import { useReducedMotion } from "@/app/hooks/useReducedMotion";
import { useSaveData } from "./showcase/useShowcaseMedia";

/**
 * Peça 3D em loop no cartão da oferta (`public/3d/peca-<nome>.{webm,mp4}`, 640x400, com o pôster `.webp`). É decorativa:
 * o nome do cartão e a lista dizem o que é. Nada baixa antes de tocar (`preload="none"`); toca só enquanto está à vista e
 * fica no pôster com movimento reduzido ou "Economizar dados".
 */
export function OfferVideo({ name }: Readonly<{ name: string }>) {
  const ref = useRef<HTMLVideoElement>(null);
  const inView = useInView(ref, { amount: 0.3, once: false });
  const reducedMotion = useReducedMotion();
  const saveData = useSaveData();
  const play = inView && !reducedMotion && !saveData;

  useEffect(() => {
    const video = ref.current;
    if (!video) return;
    if (!play) {
      video.pause();
      return;
    }
    // o navegador pode recusar a reprodução (economia de energia, aba em segundo plano): o vídeo fica no pôster
    video.play()?.catch(() => {});
  }, [play]);

  const src = `/3d/peca-${name}`;
  return (
    <video
      ref={ref}
      tabIndex={-1}
      aria-hidden="true"
      disablePictureInPicture
      disableRemotePlayback
      muted
      loop
      playsInline
      preload="none"
      poster={`${src}.webp`}
      width={640}
      height={400}
      // contain, não cover: o fundo do vídeo é o mesmo do quadro, e a peça nunca é cortada num quadro mais largo
      className="block h-full w-full object-contain"
    >
      <source src={`${src}.webm`} type="video/webm" />
      <source src={`${src}.mp4`} type="video/mp4" />
    </video>
  );
}