UHD_Media_Tool/apps/web/app/components/search/search-sections.tsx

import type { TmdbCandidate } from "@umt/contracts";
import { ArrowRight, Film, Plus } from "lucide-react";
import { Link, useNavigate } from "react-router";
import { toast } from "sonner";
import { useSearch } from "~/api/search.ts";
import { useCreateSubscription } from "~/api/subscriptions.ts";
import { EmptyState, ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
import { settingsPath } from "~/components/console/nav.ts";
import { StatusBadge } from "~/components/console/status-badge.tsx";
import { Button } from "~/components/ui/button.tsx";
import { errorMessage } from "~/lib/api.ts";
import { actionIcon, mediaKindLabel, slotSummary } from "./search-labels.ts";

// 结果页的"作品"与"操作"两段(资源段见 release-results.tsx)

function SectionTitle({ id, title, extra }: { id: string; title: string; extra?: string }) {
  return (
    <h2 id={id} className="mb-3 text-body font-semibold text-foreground">
      {title}
      {extra ? <span className="ml-2 text-caption font-normal text-muted-foreground tabular-nums">{extra}</span> : null}
    </h2>
  );
}

/** 从 TMDB 候选建订阅:按标题追踪(建档后自动关联作品) */
export function useSubscribeTmdb() {
  const create = useCreateSubscription();
  const navigate = useNavigate();
  return {
    pending: create.isPending,
    subscribe: (c: TmdbCandidate, onDone?: () => void) => {
      const kind = c.entityType === "movie" ? "movie" : "series";
      create.mutate(
        {
          titleQuery: c.year ? `${c.title} ${c.year}` : c.title,
          mediaKind: kind,
          mode: kind === "movie" ? "once" : "continuous",
          seasonScope: kind === "movie" ? "current_season" : "following_seasons",
          priority: "new_work",
          origin: "user",
        },
        {
          onSuccess: () => {
            toast.success(`已订阅「${c.title}」`, {
              action: { label: "查看", onClick: () => navigate("/console/subscriptions") },
            });
            onDone?.();
          },
          onError: (e) => toast.error(errorMessage(e, "订阅失败")),
        },
      );
    },
  };
}

export function MediaSection({ q }: { q: string }) {
  const res = useSearch(q, "media", 20);
  const sub = useSubscribeTmdb();
  const local = res.data?.media?.local.items ?? [];
  const tmdb = res.data?.media?.tmdb;
  return (
    <section aria-labelledby="search-media" className="min-w-0">
      <SectionTitle
        id="search-media"
        title="作品"
        extra={res.data ? `${local.length + (tmdb?.items.length ?? 0)} 条` : undefined}
      />
      <div className="pg-slab min-w-0 overflow-hidden rounded-xl">
        {res.isPending ? (
          <LoadingState rows={2} className="p-4" />
        ) : res.isError ? (
          <ErrorState plain error={res.error} onRetry={() => res.refetch()} />
        ) : local.length === 0 && !tmdb?.items.length ? (
          <EmptyState
            plain
            icon={Film}
            title="没有匹配的作品"
            description="换个译名、原名或别名再搜。"
            className="py-8"
          />
        ) : (
          <ul className="divide-y divide-border/60">
            {local.map((h) => (
              <li key={h.entity.id}>
                <Link
                  to={`/console/library/${h.entity.id}`}
                  className="flex min-w-0 items-center gap-3 px-4 py-3 transition-colors duration-micro hover:bg-foreground/[0.04]"
                >
                  <Film className="h-4 w-4 shrink-0 text-muted-foreground" />
                  <div className="min-w-0 flex-1">
                    <p className="truncate text-sm font-medium text-foreground">
                      {h.entity.title}
                      {h.entity.year ? <span className="text-muted-foreground"> ({h.entity.year})</span> : null}
                    </p>
                    <p className="truncate text-meta text-muted-foreground">
                      {mediaKindLabel(h.entity.kind)} · {slotSummary(h)}
                      {h.matchedAlias && h.matchedAlias !== h.entity.title ? ` · 命中别名 ${h.matchedAlias}` : ""}
                    </p>
                  </div>
                  <StatusBadge>本地</StatusBadge>
                </Link>
              </li>
            ))}
            {(tmdb?.items ?? []).map((c) => (
              <li key={`${c.entityType}-${c.externalId}`} className="flex min-w-0 items-center gap-3 px-4 py-3">
                <Plus className="h-4 w-4 shrink-0 text-muted-foreground" />
                <div className="min-w-0 flex-1">
                  <p className="truncate text-sm font-medium text-foreground">
                    {c.title}
                    {c.year ? <span className="text-muted-foreground"> ({c.year})</span> : null}
                  </p>
                  <p className="line-clamp-1 text-meta text-muted-foreground">
                    TMDB · {c.entityType === "movie" ? "电影" : "剧集"}
                    {c.originalTitle && c.originalTitle !== c.title ? ` · ${c.originalTitle}` : ""}
                    {c.overview ? ` · ${c.overview}` : ""}
                  </p>
                </div>
                {c.localEntityId ? (
                  <Button asChild variant="outline" size="sm">
                    <Link to={`/console/library/${c.localEntityId}`}>查看</Link>
                  </Button>
                ) : (
                  <Button variant="outline" size="sm" disabled={sub.pending} onClick={() => sub.subscribe(c)}>
                    订阅
                  </Button>
                )}
              </li>
            ))}
          </ul>
        )}
        {tmdb && !tmdb.configured ? (
          <p className="border-t border-border/60 px-4 py-2.5 text-meta text-muted-foreground">
            TMDB 未配置,只搜了本地作品。
            <Link to={settingsPath("metadata")} className="ml-1 underline underline-offset-4">
              去配置
            </Link>
          </p>
        ) : null}
        {tmdb?.error ? (
          <p className="border-t border-border/60 px-4 py-2.5 text-meta text-warning">TMDB 查询失败:{tmdb.error}</p>
        ) : null}
      </div>
    </section>
  );
}

export function ActionsSection({ q }: { q: string }) {
  const res = useSearch(q, "actions", 12);
  const items = res.data?.actions?.items ?? [];
  if (res.isPending || res.isError || items.length === 0) return null;
  return (
    <section aria-labelledby="search-actions" className="min-w-0">
      <SectionTitle id="search-actions" title="操作" />
      <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
        {items.map((a) => {
          const Icon = actionIcon(a.kind);
          return (
            <Link
              key={a.id}
              to={a.href}
              className="pg-slab flex min-w-0 items-center gap-3 rounded-xl px-4 py-3 transition-colors duration-micro hover:bg-foreground/[0.04]"
            >
              <Icon className="h-4 w-4 shrink-0 text-muted-foreground" />
              <span className="min-w-0 flex-1">
                <span className="block truncate text-sm font-medium text-foreground">{a.title}</span>
                <span className="block truncate text-meta text-muted-foreground">{a.group}</span>
              </span>
              <ArrowRight className="h-4 w-4 shrink-0 text-muted-foreground" />
            </Link>
          );
        })}
      </div>
    </section>
  );
}