"use client";

import { Tv } from "lucide-react";
import type { ShowSummary } from "@/lib/types";

interface Props {
  show: ShowSummary;
  selected: boolean;
  onToggle: () => void;
  onClick: () => void;
}

export function ShowTile({ show, selected, onToggle, onClick }: Props) {
  return (
    <div className="group relative flex flex-col overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 transition-colors hover:border-zinc-600">
      {/* Thumbnail area - clickable to drill in */}
      <button
        type="button"
        className="relative aspect-video w-full overflow-hidden bg-zinc-800"
        onClick={onClick}
      >
        {show.thumbnail_url ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={show.thumbnail_url}
            alt={show.series_name}
            className="h-full w-full object-cover transition-transform group-hover:scale-105"
          />
        ) : (
          <div className="flex h-full w-full items-center justify-center">
            <Tv className="h-10 w-10 text-zinc-600" />
          </div>
        )}
        {/* Selection overlay */}
        {selected && (
          <div className="absolute inset-0 bg-blue-600/30 ring-2 ring-inset ring-blue-500" />
        )}
      </button>

      {/* Info area */}
      <div className="flex flex-col gap-1 p-2">
        <button
          type="button"
          className="truncate text-left text-sm font-medium text-zinc-100 hover:text-white"
          onClick={onClick}
          title={show.series_name}
        >
          {show.series_name}
        </button>
        <p className="text-xs text-zinc-500">
          {show.season_count} {show.season_count === 1 ? "season" : "seasons"} · {show.episode_count} eps
        </p>
        {show.genres.length > 0 && (
          <p className="truncate text-xs text-zinc-600">
            {show.genres.slice(0, 3).join(", ")}
          </p>
        )}
      </div>

      {/* Select checkbox */}
      <button
        type="button"
        onClick={e => { e.stopPropagation(); onToggle(); }}
        className={`absolute left-1.5 top-1.5 flex h-5 w-5 items-center justify-center rounded border text-xs font-bold transition-opacity ${
          selected
            ? "border-blue-500 bg-blue-600 text-white opacity-100"
            : "border-zinc-600 bg-zinc-900/80 text-transparent opacity-0 group-hover:opacity-100"
        }`}
        aria-label={selected ? "Deselect" : "Select"}
      >
        ✓
      </button>
    </div>
  );
}