UHD_Media_Tool/apps/web/app/components/discover/discover-card.tsx

import { type DiscoverItem, tmdbImageUrl } from "@umt/contracts";
import { CalendarPlus, LoaderCircle, PackageSearch, Star } from "lucide-react";
import { useState } from "react";
import { StatusBadge } from "~/components/console/status-badge.tsx";
import { Button } from "~/components/ui/button.tsx";
import { cn } from "~/lib/utils.ts";
import { itemMeta, localBadges } from "./discover-state.ts";

// 发现卡片:海报(懒加载)、评分、本地状态、标题、年份 · 类型 · 风格;点海报 / 标题进作品,下面两个动作。

export type CardAction = "open" | "subscribe" | "search";

export function coverUrl(it: Pick<DiscoverItem, "cover" | "posterPath">): string | null {
  return it.posterPath ? tmdbImageUrl(it.posterPath, "w342") : it.cover;
}

export function DiscoverCard({
  item,
  busy,
  onAction,
  className,
}: {
  item: DiscoverItem;
  /** 正在为这张卡匹配 TMDB */
  busy: CardAction | null;
  onAction: (a: CardAction) => void;
  className?: string;
}) {
  const [failed, setFailed] = useState(false);
  const src = failed ? null : coverUrl(item);
  const badges = localBadges(item);
  const meta = itemMeta(item);
  return (
    <article className={cn("group flex min-w-0 flex-col", className)} aria-label={item.title}>
      <button
        type="button"
        onClick={() => onAction("open")}
        disabled={!!busy}
        className="relative block aspect-[2/3] w-full cursor-pointer overflow-hidden rounded-xl border border-border/70 bg-foreground/[0.05] text-left transition-colors duration-base hover:border-foreground/40 disabled:cursor-wait"
      >
        {src ? (
          <img
            src={src}
            alt=""
            loading="lazy"
            decoding="async"
            referrerPolicy="no-referrer"
            onError={() => setFailed(true)}
            className="h-full w-full object-cover transition-transform duration-slow group-hover:scale-[1.03]"
          />
        ) : (
          <span className="grid h-full w-full place-items-center px-2 text-center text-title font-semibold text-foreground/30">
            {item.title.charAt(0)}
          </span>
        )}
        {item.rating ? (
          <span className="absolute top-1.5 left-1.5 inline-flex items-center gap-0.5 rounded-full bg-background/80 px-1.5 py-0.5 text-micro font-medium text-foreground backdrop-blur">
            <Star className="h-3 w-3" aria-hidden />
            {item.rating.toFixed(1)}
          </span>
        ) : null}
        {badges.length ? (
          <span className="absolute inset-x-1.5 bottom-1.5 flex flex-wrap gap-1">
            {badges.map((b) => (
              <StatusBadge key={b.label} tone={b.tone} className="bg-background/85 backdrop-blur">
                {b.label}
              </StatusBadge>
            ))}
          </span>
        ) : null}
        {busy ? (
          <span className="absolute inset-0 grid place-items-center bg-background/60">
            <LoaderCircle className="h-5 w-5 animate-spin" aria-label="匹配中" />
          </span>
        ) : null}
      </button>
      <div className="min-w-0 pt-1.5">
        <button
          type="button"
          onClick={() => onAction("open")}
          disabled={!!busy}
          className="block w-full cursor-pointer truncate text-left text-caption font-medium text-foreground hover:underline"
          title={item.title}
        >
          {item.title}
        </button>
        <p className="truncate text-meta text-muted-foreground">{meta || "—"}</p>
        <div className="mt-1 flex flex-wrap gap-1">
          <Button
            variant="ghost"
            size="xs"
            onClick={() => onAction("subscribe")}
            disabled={!!busy}
            aria-label={`订阅「${item.title}」`}
          >
            <CalendarPlus />
            订阅
          </Button>
          <Button
            variant="ghost"
            size="xs"
            onClick={() => onAction("search")}
            disabled={!!busy}
            aria-label={`搜索「${item.title}」的资源`}
          >
            <PackageSearch />
            搜索资源
          </Button>
        </div>
      </div>
    </article>
  );
}

export function DiscoverCardSkeleton({ className }: { className?: string }) {
  return (
    <div className={cn("flex min-w-0 flex-col", className)} aria-hidden>
      <div className="aspect-[2/3] w-full animate-pulse rounded-xl bg-foreground/[0.07]" />
      <div className="mt-2 h-3.5 w-4/5 animate-pulse rounded-tight bg-foreground/[0.07]" />
      <div className="mt-1.5 h-3 w-1/2 animate-pulse rounded-tight bg-foreground/[0.05]" />
    </div>
  );
}