Tracearr/apps/web/src/components/media/MediaCardSmall.tsx

import { Film, Tv, Music } from 'lucide-react';
import { cn } from '@/lib/utils';

interface MediaCardSmallProps {
  title: string;
  type: string;
  showTitle?: string | null;
  year?: number | null;
  playCount: number;
  thumbPath?: string | null;
  serverId?: string | null;
  rank?: number;
  className?: string;
  style?: React.CSSProperties;
  /** For TV shows (aggregated series), number of unique episodes watched */
  episodeCount?: number;
}

function MediaIcon({ type, className }: { type: string; className?: string }) {
  switch (type) {
    case 'movie':
      return <Film className={className} />;
    case 'episode':
      return <Tv className={className} />;
    case 'track':
      return <Music className={className} />;
    default:
      return <Film className={className} />;
  }
}

function getImageUrl(serverId: string | null | undefined, thumbPath: string | null | undefined, width = 150, height = 225) {
  if (!serverId || !thumbPath) return null;
  return `/api/v1/images/proxy?server=${serverId}&url=${encodeURIComponent(thumbPath)}&width=${width}&height=${height}&fallback=poster`;
}

export function MediaCardSmall({
  title,
  type,
  showTitle,
  year,
  playCount,
  thumbPath,
  serverId,
  rank,
  className,
  style,
  episodeCount,
}: MediaCardSmallProps) {
  const imageUrl = getImageUrl(serverId, thumbPath);
  // For individual episodes: showTitle is series name, title is episode name
  // For aggregated shows: title is series name (no showTitle), episodeCount indicates it's aggregated
  const displayTitle = type === 'episode' && showTitle ? showTitle : title;

  return (
    <div
      className={cn(
        'group relative animate-fade-in overflow-hidden rounded-lg border bg-card transition-all duration-300 hover:scale-[1.03] hover:border-primary/50 hover:shadow-lg hover:shadow-primary/10',
        className
      )}
      style={style}
    >
      {/* Poster */}
      <div className="relative aspect-[2/3] overflow-hidden bg-muted">
        {imageUrl ? (
          <img
            src={imageUrl}
            alt={displayTitle}
            className="h-full w-full object-cover transition-transform group-hover:scale-105"
            loading="lazy"
          />
        ) : (
          <div className="flex h-full w-full items-center justify-center">
            <MediaIcon type={type} className="h-12 w-12 text-muted-foreground/50" />
          </div>
        )}

        {/* Rank badge */}
        {rank && (
          <div className="absolute left-2 top-2 flex h-6 w-6 items-center justify-center rounded-full bg-black/70 text-xs font-bold text-white">
            {rank}
          </div>
        )}

        {/* Hover overlay with play count */}
        <div className="absolute inset-0 flex items-center justify-center bg-black/60 opacity-0 transition-opacity group-hover:opacity-100">
          <div className="text-center">
            <div className="text-2xl font-bold text-white">{playCount}</div>
            <div className="text-xs text-white/80">plays</div>
          </div>
        </div>
      </div>

      {/* Info */}
      <div className="p-3">
        <h4 className="truncate text-sm font-medium" title={displayTitle}>
          {displayTitle}
        </h4>
        <p className="truncate text-xs text-muted-foreground">
          {episodeCount
            ? `${episodeCount} eps`
            : type === 'episode'
            ? title
            : year || type}
        </p>
      </div>
    </div>
  );
}