UHD_Media_Tool/apps/web/app/routes/console/identity.tsx

import type {
  ExternalIdentity,
  IdentityCandidateReason,
  IdentityCandidateStatus,
  IdentityPoolItem,
  IdentityStatus,
} from "@umt/contracts";
import { Fingerprint, Lock, SearchX } from "lucide-react";
import { useEffect, useState } from "react";
import { useSearchParams } from "react-router";
import { useExternalIdentities, useIdentityPool } from "~/api/identity.ts";
import { type DataColumn, DataTable } from "~/components/console/data-table.tsx";
import { FilterBar, FilterSelect } from "~/components/console/filter-bar.tsx";
import { PageHeader } from "~/components/console/page-header.tsx";
import { AliasesPanel } from "~/components/library/identity-aliases.tsx";
import { ExternalIdentitySheet, identityRef } from "~/components/library/identity-external-sheet.tsx";
import { PoolSheet, querySummary } from "~/components/library/identity-pool-sheet.tsx";
import {
  EVIDENCE_LEVEL,
  IDENTITY_STATUS,
  opts,
  POOL_REASON,
  POOL_STATUS,
  VERIFY_STATUS,
} from "~/components/library/labels.ts";
import { relTime, Tone } from "~/components/library/parts.tsx";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs.tsx";

// 身份与元数据(REQ §7.2、§7.5):待识别池、外部身份映射与修订、别名。

function useDebounced(v: string, ms = 250) {
  const [d, setD] = useState(v);
  useEffect(() => {
    const t = setTimeout(() => setD(v), ms);
    return () => clearTimeout(t);
  }, [v, ms]);
  return d;
}

function PoolTab() {
  const [q, setQ] = useState("");
  const [status, setStatus] = useState("pending");
  const [reason, setReason] = useState("");
  const dq = useDebounced(q.trim());
  const pool = useIdentityPool({
    q: dq || undefined,
    status: (status || undefined) as IdentityCandidateStatus | undefined,
    reason: (reason || undefined) as IdentityCandidateReason | undefined,
  });
  const [openId, setOpenId] = useState<string | null>(null);
  const rows = pool.data?.pages.flatMap((p) => p.items);
  const open = rows?.find((r) => r.id === openId) ?? null;

  const columns: DataColumn<IdentityPoolItem>[] = [
    {
      key: "title",
      header: "原始标题",
      className: "max-w-0 w-full",
      cell: (r) => (
        <div className="min-w-0">
          <p className="font-mono text-caption break-all text-foreground">{r.release.title}</p>
          <p className="mt-0.5 truncate text-meta text-muted-foreground">
            {r.release.subtitle ? `${r.release.subtitle} · ` : ""}解析:{querySummary(r.query)}
          </p>
        </div>
      ),
    },
    { key: "reason", header: "原因", cell: (r) => <Tone v={POOL_REASON[r.reason]} /> },
    {
      key: "cands",
      header: "候选",
      hideBelow: "sm",
      align: "right",
      cell: (r) => <span className="tabular-nums">{r.candidates.length}</span>,
    },
    {
      key: "attempts",
      header: "尝试",
      hideBelow: "md",
      cell: (r) => (
        <span className="text-meta whitespace-nowrap text-muted-foreground">
          {r.attempts} 次 · {relTime(r.lastAttemptAt)}
        </span>
      ),
    },
    {
      key: "next",
      header: "下次复查",
      hideBelow: "lg",
      cell: (r) => (
        <span className="text-meta whitespace-nowrap text-muted-foreground">
          {r.status === "pending" ? (
            r.nextReviewAt ? (
              relTime(r.nextReviewAt)
            ) : (
              "不自动复查"
            )
          ) : (
            <Tone v={POOL_STATUS[r.status]} />
          )}
        </span>
      ),
    },
  ];

  const filtered = !!q || status !== "pending" || !!reason;
  return (
    <>
      <FilterBar
        search={{ value: q, onChange: setQ, placeholder: "按原始标题 / 解析标题检索" }}
        onReset={
          filtered
            ? () => {
                setQ("");
                setStatus("pending");
                setReason("");
              }
            : undefined
        }
      >
        <FilterSelect label="状态" value={status} onChange={setStatus} options={opts(POOL_STATUS)} />
        <FilterSelect label="原因" value={reason} onChange={setReason} options={opts(POOL_REASON)} />
      </FilterBar>
      <DataTable
        columns={columns}
        rows={rows}
        rowKey={(r) => r.id}
        loading={pool.isPending}
        error={pool.error}
        onRetry={() => pool.refetch()}
        onRowClick={(r) => setOpenId(r.id)}
        selectedKey={openId}
        empty={{
          icon: SearchX,
          title: filtered ? "没有符合条件的待识别资源" : "待识别池是空的",
          description: "识别证据不足或冲突的资源会留在这里,可按原始标题找回;新证据到来时会自动重试。",
        }}
        hasMore={pool.hasNextPage}
        onLoadMore={() => pool.fetchNextPage()}
        loadingMore={pool.isFetchingNextPage}
      />
      <PoolSheet key={open?.id ?? "none"} item={open} onClose={() => setOpenId(null)} />
    </>
  );
}

function ExternalTab() {
  const [provider, setProvider] = useState("");
  const [status, setStatus] = useState("");
  const list = useExternalIdentities({
    provider: provider || undefined,
    status: (status || undefined) as IdentityStatus | undefined,
  });
  const [openId, setOpenId] = useState<string | null>(null);
  const rows = list.data?.pages.flatMap((p) => p.items);
  const open = rows?.find((r) => r.id === openId) ?? null;

  const columns: DataColumn<ExternalIdentity>[] = [
    {
      key: "ref",
      header: "外部身份",
      cell: (r) => (
        <span className="inline-flex items-center gap-1.5 font-mono text-caption break-all text-foreground">
          {r.locked ? <Lock className="h-3 w-3 shrink-0 text-muted-foreground" aria-label="人工锁" /> : null}
          {identityRef(r)}
        </span>
      ),
    },
    {
      key: "entity",
      header: "作品",
      hideBelow: "sm",
      cell: (r) => (
        <span className="line-clamp-1 text-caption text-foreground">
          {r.mediaEntityTitle ?? <span className="text-muted-foreground">未关联</span>}
        </span>
      ),
    },
    { key: "status", header: "状态", cell: (r) => <Tone v={IDENTITY_STATUS[r.status]} /> },
    {
      key: "level",
      header: "证据",
      hideBelow: "sm",
      cell: (r) => <span className="text-meta whitespace-nowrap">{EVIDENCE_LEVEL[r.evidenceLevel]}</span>,
    },
    { key: "verify", header: "外部校验", hideBelow: "md", cell: (r) => <Tone v={VERIFY_STATUS[r.verifyStatus]} /> },
    {
      key: "rev",
      header: "修订",
      hideBelow: "lg",
      align: "right",
      cell: (r) => (
        <span className="text-meta whitespace-nowrap text-muted-foreground tabular-nums">
          r{r.revision} · {relTime(r.updatedAt)}
        </span>
      ),
    },
  ];
  const filtered = !!provider || !!status;
  return (
    <>
      <FilterBar
        onReset={
          filtered
            ? () => {
                setProvider("");
                setStatus("");
              }
            : undefined
        }
      >
        <FilterSelect
          label="来源"
          value={provider}
          onChange={setProvider}
          options={[
            { value: "tmdb", label: "TMDB" },
            { value: "imdb", label: "IMDb" },
            { value: "tvdb", label: "TVDB" },
          ]}
        />
        <FilterSelect label="状态" value={status} onChange={setStatus} options={opts(IDENTITY_STATUS)} />
      </FilterBar>
      <DataTable
        columns={columns}
        rows={rows}
        rowKey={(r) => r.id}
        loading={list.isPending}
        error={list.error}
        onRetry={() => list.refetch()}
        onRowClick={(r) => setOpenId(r.id)}
        selectedKey={openId}
        empty={{
          icon: Fingerprint,
          title: "没有外部身份",
          description: "TMDB 等外部 ID 只是辅助映射;没有记录时作品仍可先建本地档案入库。",
        }}
        hasMore={list.hasNextPage}
        onLoadMore={() => list.fetchNextPage()}
        loadingMore={list.isFetchingNextPage}
      />
      <ExternalIdentitySheet item={open} onClose={() => setOpenId(null)} />
    </>
  );
}

const TABS = ["pool", "external", "aliases"] as const;

export default function IdentityPage() {
  const [params, setParams] = useSearchParams();
  const tab = (TABS as readonly string[]).includes(params.get("tab") ?? "") ? params.get("tab")! : "pool";
  return (
    <>
      <PageHeader
        title="身份与元数据"
        description="本地 UUID 是主身份,外部 ID 是辅助映射。自动模糊匹配不会覆盖人工锁定的关系。"
      />
      <Tabs
        value={tab}
        onValueChange={(v) =>
          setParams(
            (p) => {
              p.set("tab", v);
              return p;
            },
            { replace: true },
          )
        }
      >
        <TabsList>
          <TabsTrigger value="pool">待识别池</TabsTrigger>
          <TabsTrigger value="external">外部身份</TabsTrigger>
          <TabsTrigger value="aliases">别名</TabsTrigger>
        </TabsList>
        <TabsContent value="pool">
          <PoolTab />
        </TabsContent>
        <TabsContent value="external">
          <ExternalTab />
        </TabsContent>
        <TabsContent value="aliases">
          <AliasesPanel />
        </TabsContent>
      </Tabs>
    </>
  );
}