import { PosterCard } from "@/components/media/poster-card";
import { Skeleton } from "@/components/ui/skeleton";
import type { MediaCardData } from "@/lib/types";

/**
 * Responsive poster grid used by every catalogue page (`/movies`, `/tv`,
 * `/anime`, `/genres/[id]`, `/search`).
 *
 * The column count is driven purely by CSS so the same markup works at every
 * breakpoint without a single media query in JS.
 */
export function PosterGrid({
  items,
  priorityCount = 0,
  emptyMessage = "Nothing to show here yet.",
}: {
  items: MediaCardData[];
  /** How many leading cards get `priority` so the LCP image is not lazy. */
  priorityCount?: number;
  emptyMessage?: string;
}) {
  if (items.length === 0) {
    return (
      <div className="rounded-xl border border-dashed border-line-strong bg-surface-2/40 px-6 py-16 text-center">
        <p className="text-sm font-medium text-ink-muted">{emptyMessage}</p>
        <p className="mt-1.5 text-[13px] text-ink-faint">
          Try loosening a filter or searching for something else.
        </p>
      </div>
    );
  }

  return (
    <ul className="grid grid-cols-3 gap-x-3 gap-y-7 sm:grid-cols-4 sm:gap-x-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 2xl:grid-cols-8">
      {items.map((item, index) => (
        <li key={`${item.mediaType}-${item.id}`} className="min-w-0">
          <PosterCard item={item} index={index} priority={index < priorityCount} className="w-full" />
        </li>
      ))}
    </ul>
  );
}

/**
 * Loading state for {@link PosterGrid}.
 *
 * Lives beside the grid on purpose: the two must declare *identical* column
 * counts, otherwise the layout shifts the moment real data arrives.
 */
export function GridSkeleton({ count = 16 }: { count?: number }) {
  return (
    <ul
      aria-busy="true"
      aria-label="Loading titles"
      className="grid grid-cols-3 gap-x-3 gap-y-7 sm:grid-cols-4 sm:gap-x-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 2xl:grid-cols-8"
    >
      {Array.from({ length: count }, (_, i) => (
        <li key={i} className="min-w-0">
          <Skeleton className="aspect-2/3 w-full rounded-md" />
          <Skeleton className="mt-2.5 h-3.5 w-4/5 rounded-xs" />
          <Skeleton className="mt-1.5 h-2.5 w-2/5 rounded-xs" />
        </li>
      ))}
    </ul>
  );
}