UHD_Media_Tool/apps/web/app/components/library/identity-views.tsx

import type {
  ExternalIdentity,
  IdentityCandidateReason,
  IdentityCandidateStatus,
  IdentityPoolItem,
  IdentityStatus,
} from "@umt/contracts";
import { ArrowRight, Fingerprint, Lock, SearchX } from "lucide-react";
import { useEffect, useState } from "react";
import { Link } 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 { ExternalIdentitySheet, identityRef } from "~/components/library/identity-external-sheet.tsx";
import { inboxLink, inInbox, 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";

// 媒体概览的身份视图(原"身份与元数据"页,IA-3 并入 /console/library):待识别资源、外部身份。
// 待识别资源只读;选候选、忽略在待处理里做(docs/design/console-ia.md §3.1 判定只在待处理)。

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;
}

export 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) => (
        <div className="flex flex-col items-start gap-1">
          <Tone v={POOL_REASON[r.reason]} />
          {inInbox(r) ? (
            <Link
              to={inboxLink(r)}
              onClick={(e) => e.stopPropagation()}
              className="inline-flex items-center gap-0.5 text-meta whitespace-nowrap text-muted-foreground underline-offset-4 hover:text-foreground hover:underline"
            >
              已进待处理
              <ArrowRight className="h-3 w-3" />
            </Link>
          ) : null}
        </div>
      ),
    },
    {
      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)} />
    </>
  );
}

export 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: "没有外部身份的作品也能建档入库。",
        }}
        hasMore={list.hasNextPage}
        onLoadMore={() => list.fetchNextPage()}
        loadingMore={list.isFetchingNextPage}
      />
      <ExternalIdentitySheet item={open} onClose={() => setOpenId(null)} />
    </>
  );
}