"use client";

import type { CSSProperties } from "react";
import { useReducedMotion } from "@/app/hooks/useReducedMotion";
import { getProjectVideo, getShowcaseConfig } from "@/lib/project-showcase";
import { ProjectVideo } from "../ProjectVideo";
import { BrowserFrame, displayUrl } from "./BrowserFrame";
import { useShowcaseCard } from "./ShowcaseProvider";
import { useNearViewport, useViewportDevice } from "./useShowcaseMedia";

/**
 * Capa do card com vídeo: o vídeo dentro de uma moldura de navegador, com brilho da cor do site quando é o
 * card que toca, e o botão que amplia (a tela inteira é o botão). A versão do aparelho (celular abaixo de
 * 768 px) só é escolhida no navegador; no servidor e antes de a capa chegar a ~1 tela da janela, nem o pôster
 * é pedido (a moldura já reserva o espaço).
 */
export function ProjectMedia({
  project,
}: {
  project: {
    id: string;
    title: string;
    demoUrl?: string | null;
  };
}) {
  const { frameRef, active, open, userPaused, toggleAutoplay } =
    useShowcaseCard(project.id);
  const reducedMotion = useReducedMotion();
  const device = useViewportDevice();
  const near = useNearViewport(frameRef);
  const video = device ? getProjectVideo(project.id, device) : undefined;
  const config = getShowcaseConfig(project.id);
  if (!getProjectVideo(project.id) || !config) return null;

  return (
    <div
      ref={frameRef}
      className="ds-frame"
      data-active={active}
      style={{ "--accent": config.accent } as CSSProperties}
    >
      <BrowserFrame url={displayUrl(project)}>
        <div
          className="ds-frame-screen"
          style={
            video && near
              ? { backgroundImage: `url(${video.poster})` }
              : undefined
          }
        >
          {video && (
            <ProjectVideo
              video={video}
              title={project.title}
              active={active}
              showPoster={near}
            />
          )}
          <button
            type="button"
            className="ds-frame-expand"
            onClick={open}
            aria-haspopup="dialog"
            aria-label={`Ampliar o vídeo de ${project.title}`}
          >
            <span className="ds-frame-chip" aria-hidden="true">
              Ampliar
            </span>
          </button>
          {!reducedMotion && (
            <button
              type="button"
              className="ds-frame-pause"
              onClick={toggleAutoplay}
              aria-label={
                userPaused
                  ? "Retomar os vídeos dos projetos"
                  : "Pausar os vídeos dos projetos"
              }
            >
              <svg viewBox="0 0 16 16" aria-hidden="true">
                {userPaused ? (
                  <path d="M4 2.5v11l9-5.5z" />
                ) : (
                  <path d="M4 3h3v10H4zM9 3h3v10H9z" />
                )}
              </svg>
            </button>
          )}
        </div>
      </BrowserFrame>
    </div>
  );
}