"use client";

import Image from "next/image";
import type { AssociatedVideo } from "@/types";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Play, ListVideo } from "lucide-react";
import { getYoutubeThumbnailUrl } from "@/lib/youtube-utils";

interface VideoThumbnailCardProps {
  video: AssociatedVideo;
  onVideoSelect: (video: AssociatedVideo) => void;
  variant?: 'grid' | 'list';
  isPlaylist?: boolean;
}

export function VideoThumbnailCard({ video, onVideoSelect, variant = 'grid', isPlaylist = false }: VideoThumbnailCardProps) {
  const thumbnailUrl = getYoutubeThumbnailUrl(video.youtubeUrl);
  
  if (variant === 'list') {
    return (
      <div
        role="button"
        tabIndex={0}
        onClick={() => onVideoSelect(video)}
        onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") onVideoSelect(video); }}
        className="flex gap-3 cursor-pointer p-2 rounded-lg hover:bg-muted/50 transition-colors group"
        aria-label={`Play video: ${video.title}`}
      >
        <div className="w-40 aspect-video relative flex-shrink-0 rounded-md overflow-hidden bg-muted">
          <Image
            src={thumbnailUrl}
            alt={`Thumbnail for ${video.title}`}
            fill
            sizes="160px"
            className="object-cover"
            data-ai-hint="youtube video"
          />
           <div className="absolute inset-0 bg-black/20 group-hover:bg-black/50 transition-colors flex items-center justify-center">
            <Play className="w-8 h-8 text-white/80 group-hover:text-white transition-colors" />
          </div>
        </div>
        <div className="flex-grow overflow-hidden">
          <h4 className="font-semibold text-sm text-foreground group-hover:text-accent transition-colors line-clamp-2" title={video.title}>{video.title}</h4>
          <p className="text-xs text-muted-foreground line-clamp-3">{video.description}</p>
        </div>
      </div>
    );
  }

  // Grid variant
  return (
    <div
      className="group relative h-full cursor-pointer hover:z-20"
      role="button"
      tabIndex={0}
      onClick={() => onVideoSelect(video)}
      onKeyDown={(e) => {
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          onVideoSelect(video);
        }
      }}
      aria-label={`Play video: ${video.title}`}
    >
      <Card
        className="h-full bg-card border-border shadow-lg transition-all duration-300 ease-in-out group-hover:scale-125"
      >
        <div className="w-full aspect-video relative rounded-lg overflow-hidden">
          <Image
            src={thumbnailUrl}
            alt={`Thumbnail for ${video.title}`}
            fill
            sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw"
            className="object-cover"
            data-ai-hint="youtube video"
            priority={false}
          />
           {isPlaylist && (
            <div className="absolute top-2 left-2">
              <Badge variant="secondary" className="bg-black/60 text-white shadow-lg backdrop-blur-sm">
                <ListVideo className="w-3 h-3 mr-1" />
                Playlist
              </Badge>
            </div>
          )}
        </div>
        <div className="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/80 via-black/50 to-transparent transition-opacity duration-300 group-hover:opacity-0">
          <h3 className="text-xs font-semibold text-white truncate" title={video.title}>
            {video.title}
          </h3>
           {isPlaylist && video.description && (
             <p className="text-xs text-gray-300">{video.description}</p>
           )}
        </div>
        <div className="absolute inset-0 bg-black/70 flex flex-col justify-end p-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
          <h3 className="font-bold text-sm mb-1 line-clamp-2">{video.title}</h3>
          <p className="text-xs text-gray-300 line-clamp-3">{isPlaylist ? video.description : (video.description || "Click to play this video.")}</p>
        </div>
      </Card>
    </div>
  );
}