UHD_Media_Tool/apps/web/app/components/library/identity-pool-sheet.tsx

import type { IdentityPoolItem, PoolCandidate } from "@umt/contracts";
import { ExternalLink, LoaderCircle, RotateCw } from "lucide-react";
import { type FormEvent, useState } from "react";
import { Link } from "react-router";
import { toast } from "sonner";
import { z } from "zod";
import { useAssignPool, useDismissPool, useRetryPool } from "~/api/identity.ts";
import { ConfirmDialog } from "~/components/console/confirm-dialog.tsx";
import { DetailSection, DetailSheet } from "~/components/console/detail-sheet.tsx";
import { FormField, zodFieldErrors } from "~/components/console/form-field.tsx";
import { JsonView } from "~/components/console/json-view.tsx";
import { KvList } from "~/components/console/kv-list.tsx";
import { consolePath } from "~/components/console/nav.ts";
import { Button } from "~/components/ui/button.tsx";
import { Input } from "~/components/ui/input.tsx";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/ui/select.tsx";
import { Textarea } from "~/components/ui/textarea.tsx";
import { errorMessage } from "~/lib/api.ts";
import { formatDateTime } from "~/lib/utils.ts";
import { EntityPicker, type PickedEntity } from "./identity-entity-picker.tsx";
import { EVIDENCE_LEVEL, POOL_REASON, POOL_STATUS } from "./labels.ts";
import { Chip, Tone } from "./parts.tsx";

// 待识别条目详情:候选证据 + 三种人工指定方式(候选 / 手动 TMDB id / 本地作品)+ 忽略 / 重试。指定后默认加人工锁。

const TmdbForm = z.object({
  entityType: z.enum(["movie", "tv"]),
  externalId: z.string().trim().regex(/^\d+$/, "TMDB id 是纯数字"),
});

/** query 摘要:标题 / 年份 / 季集 */
export function querySummary(q: Record<string, unknown>): string {
  const parts: string[] = [];
  if (q.title) parts.push(String(q.title));
  if (q.year) parts.push(String(q.year));
  if (q.season !== undefined && q.season !== null) parts.push(`S${String(q.season).padStart(2, "0")}`);
  if (q.episode !== undefined && q.episode !== null) parts.push(`E${String(q.episode).padStart(2, "0")}`);
  if (q.segment) parts.push(String(q.segment));
  if (q.cut) parts.push(String(q.cut));
  return parts.join(" · ") || "—";
}

function CandidateRow({
  c,
  index,
  onPick,
  disabled,
}: {
  c: PoolCandidate;
  index: number;
  onPick: () => void;
  disabled: boolean;
}) {
  return (
    <li className="min-w-0 rounded-lg border border-border/80 p-3">
      <div className="flex flex-wrap items-start justify-between gap-2">
        <div className="min-w-0">
          <p className="font-medium break-words text-foreground">
            {index + 1}. {c.title}
            {c.year ? ` (${c.year})` : ""}
          </p>
          <p className="font-mono text-meta break-all text-muted-foreground">
            {c.provider}:{c.entityType}:{c.externalId}
          </p>
        </div>
        <Button size="sm" variant="outline" onClick={onPick} disabled={disabled}>
          指定此候选
        </Button>
      </div>
      <div className="mt-2 flex flex-wrap items-center gap-1.5">
        <Chip>{EVIDENCE_LEVEL[c.level] ?? c.level}</Chip>
        {c.localEntityId ? (
          <Link
            to={consolePath("library", c.localEntityId)}
            className="inline-flex items-center gap-1 text-meta text-muted-foreground underline-offset-4 hover:text-foreground hover:underline"
          >
            本地作品
            <ExternalLink className="h-3 w-3" />
          </Link>
        ) : (
          <span className="text-meta text-muted-foreground">本地未建档,指定后按外部详情建档</span>
        )}
      </div>
      {c.evidence.length ? (
        <ul className="mt-2 list-disc space-y-0.5 pl-5 text-meta text-muted-foreground">
          {c.evidence.map((e) => (
            <li key={e} className="break-words">
              {e}
            </li>
          ))}
        </ul>
      ) : null}
    </li>
  );
}

export function PoolSheet({ item, onClose }: { item: IdentityPoolItem | null; onClose: () => void }) {
  const assign = useAssignPool();
  const dismiss = useDismissPool();
  const retry = useRetryPool();
  const [tmdb, setTmdb] = useState({ entityType: "movie" as "movie" | "tv", externalId: "" });
  const [tmdbErr, setTmdbErr] = useState<Record<string, string>>({});
  const [entity, setEntity] = useState<PickedEntity | null>(null);
  const [note, setNote] = useState("");

  if (!item) return null;
  const pending = item.status === "pending";
  const busy = assign.isPending || dismiss.isPending || retry.isPending;

  const doAssign = async (body: Parameters<typeof assign.mutateAsync>[0], ok: string) => {
    try {
      await assign.mutateAsync(body);
      toast.success(ok);
      onClose();
    } catch (err) {
      toast.error(errorMessage(err));
    }
  };

  const submitTmdb = (e: FormEvent) => {
    e.preventDefault();
    const r = TmdbForm.safeParse(tmdb);
    if (!r.success) {
      setTmdbErr(zodFieldErrors(r.error.issues));
      return;
    }
    setTmdbErr({});
    void doAssign(
      { id: item.id, external: { provider: "tmdb", ...r.data }, lock: true },
      `已指定 TMDB ${r.data.entityType}:${r.data.externalId} 并加人工锁`,
    );
  };

  return (
    <DetailSheet
      open
      width="lg"
      onOpenChange={(o) => !o && onClose()}
      title={item.release.title}
      description={item.release.subtitle ?? undefined}
      footer={
        <>
          <ConfirmDialog
            trigger={
              <Button variant="outline" disabled={!pending || busy}>
                忽略
              </Button>
            }
            title="忽略这条待识别资源?"
            description="忽略后不再自动复查;资源仍可在待识别入口按原始标题找回。"
            confirmLabel="忽略"
            onConfirm={async () => {
              try {
                await dismiss.mutateAsync({ id: item.id, note: note.trim() || undefined });
                toast.success("已忽略");
                onClose();
              } catch (err) {
                toast.error(errorMessage(err));
                throw err;
              }
            }}
          >
            <Textarea
              value={note}
              onChange={(e) => setNote(e.target.value)}
              placeholder="备注(可选):为什么忽略"
              rows={2}
            />
          </ConfirmDialog>
          <Button
            variant="outline"
            disabled={busy}
            onClick={async () => {
              try {
                await retry.mutateAsync(item.id);
                toast.success("已重新识别");
              } catch (err) {
                toast.error(errorMessage(err));
              }
            }}
          >
            {retry.isPending ? <LoaderCircle className="animate-spin" /> : <RotateCw />}
            立即重试
          </Button>
        </>
      }
    >
      <KvList
        items={[
          { label: "状态", value: <Tone v={POOL_STATUS[item.status]} /> },
          { label: "原因", value: <Tone v={POOL_REASON[item.reason]} /> },
          { label: "解析结果", value: querySummary(item.query), wide: true },
          { label: "站点分类", value: item.release.categoryRaw },
          { label: "首次发现", value: formatDateTime(item.release.firstSeenAt) },
          { label: "尝试次数", value: String(item.attempts) },
          { label: "上次尝试", value: formatDateTime(item.lastAttemptAt) },
          { label: "下次复查", value: item.nextReviewAt ? formatDateTime(item.nextReviewAt) : "不再自动复查" },
          { label: "证据版本", value: item.evidenceVersion, mono: true },
        ]}
      />

      <DetailSection title={`候选(${item.candidates.length})`}>
        {item.candidates.length ? (
          <ul className="space-y-2">
            {item.candidates.map((c, i) => (
              <CandidateRow
                key={`${c.provider}:${c.entityType}:${c.externalId}`}
                c={c}
                index={i}
                disabled={!pending || busy}
                onPick={() =>
                  doAssign({ id: item.id, candidateIndex: i, lock: true }, `已归入「${c.title}」并加人工锁`)
                }
              />
            ))}
          </ul>
        ) : (
          <p className="text-caption text-muted-foreground">没有候选。可以手动指定 TMDB id 或本地作品。</p>
        )}
      </DetailSection>

      {pending ? (
        <>
          <DetailSection title="手动指定 TMDB">
            <form onSubmit={submitTmdb} className="grid gap-2 sm:grid-cols-[8rem_1fr_auto] sm:items-start" noValidate>
              <FormField label="类型" htmlFor="pool-tmdb-type">
                <Select
                  value={tmdb.entityType}
                  onValueChange={(v) => setTmdb((t) => ({ ...t, entityType: v as "movie" | "tv" }))}
                >
                  <SelectTrigger id="pool-tmdb-type" className="w-full">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent position="popper">
                    <SelectItem value="movie">电影 movie</SelectItem>
                    <SelectItem value="tv">剧集 tv</SelectItem>
                  </SelectContent>
                </Select>
              </FormField>
              <FormField label="TMDB id" htmlFor="pool-tmdb-id" error={tmdbErr.externalId}>
                <Input
                  id="pool-tmdb-id"
                  inputMode="numeric"
                  value={tmdb.externalId}
                  aria-invalid={!!tmdbErr.externalId}
                  onChange={(e) => setTmdb((t) => ({ ...t, externalId: e.target.value }))}
                  placeholder="如 693134"
                />
              </FormField>
              <Button type="submit" variant="outline" className="sm:mt-6" disabled={busy}>
                指定
              </Button>
            </form>
          </DetailSection>

          <DetailSection title="指定本地作品">
            <div className="grid gap-2">
              <EntityPicker value={entity} onChange={setEntity} />
              <div className="flex justify-end">
                <Button
                  variant="outline"
                  disabled={!entity || busy}
                  onClick={() =>
                    entity &&
                    doAssign(
                      { id: item.id, mediaEntityId: entity.id, lock: true },
                      `已归入「${entity.title}」并加人工锁`,
                    )
                  }
                >
                  归入该作品
                </Button>
              </div>
            </div>
          </DetailSection>
        </>
      ) : null}

      <JsonView label="解析条件(原始)" value={item.query} defaultOpen={false} />
    </DetailSheet>
  );
}