"use client";
import { useState } from "react";
import { Play } from "lucide-react";
import { useVideoIndex } from "./VideoIndexProvider";
import { VideoPlayerModal } from "./VideoPlayerModal";

/**
 * Centered play button overlay for cover images. Visible only when the
 * video index has a match for this code. Same UX as the cover-grid play
 * button — always visible, rectangular, opens the in-app player modal.
 */
export function CoverPlayButton({
  code,
  actresses,
}: {
  code: string | null;
  actresses?: Array<{ id: number; name: string; slug: string }>;
}) {
  const idx = useVideoIndex();
  const [playing, setPlaying] = useState(false);
  if (!code || !idx.hasVideo(code)) return null;
  return (
    <>
      <button
        type="button"
        onClick={() => setPlaying(true)}
        aria-label="Play video"
        title="Play video"
        className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 inline-flex items-center justify-center w-20 h-14 rounded-lg backdrop-blur-md text-white/95 cursor-pointer transition-colors hover:text-[var(--color-cyan)] hover:[animation:play-pulse_1.2s_ease-out_infinite] active:scale-95"
        style={{
          background: "rgba(20,20,28,0.75)",
          border: 0,
          boxShadow: "0 6px 16px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.5)",
        }}
      >
        <Play className="w-6 h-6" style={{ fill: "currentColor" }} />
      </button>
      {playing && (
        <VideoPlayerModal
          code={code}
          actresses={actresses}
          onClose={() => setPlaying(false)}
        />
      )}
    </>
  );
}