"use client";

import Image from "next/image";
import type { Stream } from "@/types";
import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Eye, Star } from "lucide-react";

interface StreamThumbnailCardProps {
  stream: Stream;
  onStreamSelect: (stream: Stream) => void;
  variant?: 'grid' | 'list';
}

export function StreamThumbnailCard({ stream, onStreamSelect, variant = 'grid' }: StreamThumbnailCardProps) {
  if (variant === 'list') {
    return (
      <div
        role="button"
        tabIndex={0}
        onClick={() => onStreamSelect(stream)}
        onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") onStreamSelect(stream); }}
        className="flex gap-3 cursor-pointer p-2 rounded-lg hover:bg-muted/50 transition-colors"
        aria-label={`Play stream: ${stream.name}`}
      >
        <div className="w-24 h-14 relative flex-shrink-0 rounded-md overflow-hidden">
          <Image
            src={`https://picsum.photos/seed/${stream.id}/200/120`}
            alt={`Thumbnail for ${stream.name}`}
            fill
            sizes="100px"
            className="object-cover"
            data-ai-hint="live stream tv"
          />
        </div>
        <div className="flex-grow overflow-hidden">
          <h4 className="font-semibold text-sm truncate text-foreground">{stream.name}</h4>
          <p className="text-xs text-muted-foreground flex items-center gap-1">
            <Eye className="w-3 h-3" />
            {(stream.views || 0).toLocaleString()}
          </p>
        </div>
      </div>
    );
  }

  // Grid variant
  return (
    <div
      className="group relative h-full cursor-pointer hover:z-20"
      role="button"
      tabIndex={0}
      onClick={() => onStreamSelect(stream)}
      onKeyDown={(e) => {
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          onStreamSelect(stream);
        }
      }}
      aria-label={`Play stream: ${stream.name}`}
    >
      <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={`https://picsum.photos/seed/${stream.id}/400/225`}
            alt={`Thumbnail for ${stream.name}`}
            fill
            sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, (max-width: 1024px) 33vw, 25vw"
            className="object-cover"
            data-ai-hint="live stream tv"
            priority={false}
          />
          {stream.pinIndex && stream.pinIndex >= 1 && stream.pinIndex <= 5 && (
            <div className="absolute top-2 left-2">
              <Badge variant="default" className="bg-yellow-500 text-black shadow-lg">
                <Star className="w-3 h-3 mr-1" />
                PIN {stream.pinIndex}
              </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={stream.name}>
            {stream.name}
          </h3>
        </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-xs mb-1 line-clamp-2">{stream.name}</h3>
          <p className="text-xs text-gray-300 line-clamp-3">{stream.description || "No description."}</p>
          <div className="flex items-center gap-2 mt-2">
            <Badge variant="secondary" className="text-xs px-2 py-0.5 flex items-center gap-1 bg-black/75 text-white border-black/50" aria-label={`${(stream.views || 0).toLocaleString()} views`}>
              <Eye className="w-3 h-3" />
              {(stream.views || 0).toLocaleString()}
            </Badge>
          </div>
        </div>
      </Card>
    </div>
  );
}