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

import type { SearchWork } from "@umt/contracts";
import { ArrowRight, Film, PackageSearch } from "lucide-react";
import { useState } from "react";
import { Link, useNavigate } from "react-router";
import { mediaServers } from "~/api/instances.ts";
import { useSearch } from "~/api/search.ts";
import { EmptyState, ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
import { settingsPath } from "~/components/console/nav.ts";
import { Button } from "~/components/ui/button.tsx";
import { actionIcon } from "./search-labels.ts";
import { SitePickerDialog } from "./site-picker-dialog.tsx";
import { releaseSearchPath, WorkCard, workRef } from "./work-card.tsx";

// 结果页第一阶段:作品(本地 + TMDB 合并,带库存对比)与操作;资源要点「搜索资源」选站点后才查(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>
  );
}

/** 「搜索资源」:先选站点,再跳到第二阶段(同一搜索页带 work / in 参数) */
export function useReleaseSearchLauncher() {
  const navigate = useNavigate();
  const [target, setTarget] = useState<{ title: string; ref: string } | null>(null);
  return {
    open: (t: { title: string; ref: string }) => setTarget(t),
    dialog: (
      <SitePickerDialog
        open={!!target}
        onOpenChange={(o) => !o && setTarget(null)}
        title={target?.title ?? ""}
        onConfirm={(ids) => target && navigate(releaseSearchPath(target, ids))}
      />
    ),
  };
}

export function WorksSection({ q }: { q: string }) {
  const res = useSearch(q, "media", 20);
  const ms = mediaServers.useList();
  const emby = (ms.data?.items ?? []).some((i) => (i as { enabled?: boolean }).enabled !== false);
  const launcher = useReleaseSearchLauncher();
  const works = res.data?.media?.works ?? [];
  const tmdb = res.data?.media?.tmdb;
  const searchReleases = (w: SearchWork) => {
    const ref = workRef(w);
    if (ref) launcher.open({ title: w.title, ref });
  };
  return (
    <section aria-labelledby="search-media" className="min-w-0">
      <div className="mb-3 flex flex-wrap items-end justify-between gap-2">
        <SectionTitle id="search-media" title="作品" extra={res.data ? `${works.length} 部` : undefined} />
        <Button variant="ghost" size="sm" onClick={() => launcher.open({ title: q, ref: `q:${q}` })}>
          <PackageSearch />
          按关键词搜资源
        </Button>
      </div>
      {res.isPending ? (
        <LoadingState rows={3} className="pg-slab rounded-xl p-4" />
      ) : res.isError ? (
        <div className="pg-slab rounded-xl">
          <ErrorState plain error={res.error} onRetry={() => res.refetch()} />
        </div>
      ) : works.length === 0 ? (
        <div className="pg-slab rounded-xl">
          <EmptyState
            plain
            icon={Film}
            title="没有匹配的作品"
            description="换个译名、原名或别名再搜；资源标题可以点「按关键词搜资源」。"
            className="py-8"
          />
        </div>
      ) : (
        <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
          {works.map((w) => (
            <WorkCard key={w.key} w={w} emby={emby} onSearchReleases={searchReleases} />
          ))}
        </div>
      )}
      {tmdb && !tmdb.configured ? (
        <p className="mt-2 text-meta text-muted-foreground">
          TMDB 未配置，只搜了本地作品。
          <Link to={settingsPath("metadata")} className="ml-1 underline underline-offset-4">
            去配置
          </Link>
        </p>
      ) : null}
      {tmdb?.error ? <p className="mt-2 text-meta text-warning">TMDB 查询失败：{tmdb.error}</p> : null}
      {launcher.dialog}
    </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>
  );
}