"use client";

import { Play } from "lucide-react";
import Image from "next/image";
import { useEffect, useRef, useState } from "react";
import type { Device, ShowcaseAssets } from "@/lib/project-showcase";

const deviceLabel: Record<Device, string> = {
  desktop: "no computador",
  mobile: "no celular",
};

/**
 * Pôster com um botão de play. O vídeo só é montado, e só baixa, quando a pessoa aperta o botão:
 * antes disso a página mostra a imagem do site, não um vídeo parado em 0:00 com controles do navegador.
 * Vai dentro de um quadro com `position: relative` (moldura de navegador ou de celular) que dá o tamanho.
 */
export function CasePlayer({
  assets,
  title,
  device,
  sizes = "(min-width: 1280px) 900px, 100vw",
}: {
  assets: ShowcaseAssets;
  title: string;
  device: Device;
  sizes?: string;
}) {
  const [playing, setPlaying] = useState(false);
  const videoRef = useRef<HTMLVideoElement>(null);

  // o botão sai de cena ao tocar: o foco vai para o vídeo, para quem usa o teclado não o perder
  useEffect(() => {
    if (playing) videoRef.current?.focus();
  }, [playing]);

  if (playing) {
    return (
      <video
        ref={videoRef}
        className="absolute inset-0 h-full w-full object-cover object-top"
        autoPlay
        controls
        muted
        loop
        playsInline
        poster={assets.poster}
        width={assets.width}
        height={assets.height}
        tabIndex={0}
        aria-label={`Vídeo do site ${title} ${deviceLabel[device]}`}
        disablePictureInPicture
      >
        {assets.sources.map((source) => (
          <source key={source.src} src={source.src} type={source.type} />
        ))}
      </video>
    );
  }

  return (
    <>
      {/* o quadro do celular já mostra o pôster como fundo; no computador a imagem entra aqui */}
      {device === "desktop" ? (
        <Image
          src={assets.poster}
          alt=""
          fill
          sizes={sizes}
          className="object-cover object-top"
        />
      ) : null}
      <button
        type="button"
        onClick={() => setPlaying(true)}
        aria-label={`Reproduzir o vídeo do site ${title} ${deviceLabel[device]}`}
        className="group absolute inset-0 grid place-items-center focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-white"
      >
        <span
          aria-hidden="true"
          className="grid size-14 place-items-center rounded-full border border-white/70 bg-black/65 text-white transition-colors group-hover:bg-black/85 motion-reduce:transition-none sm:size-16"
        >
          <Play className="ml-1 size-6" fill="currentColor" />
        </span>
      </button>
    </>
  );
}