UHD_Media_Tool/apps/web/app/components/files/file-detail.tsx

import { Download, ExternalLink, LoaderCircle, ScanSearch } from "lucide-react";
import type { ReactNode } from "react";
import { Link } from "react-router";
import { toast } from "sonner";
import {
  type FileEntry,
  type FileRoot,
  fileDownloadUrl,
  filesErrorText,
  filesMockEnabled,
  useFileStat,
  useProbe,
  useTextPreview,
} from "~/api/files.ts";
import { DetailSection, DetailSheet } from "~/components/console/detail-sheet.tsx";
import { LoadingState } from "~/components/console/empty-state.tsx";
import { KvList } from "~/components/console/kv-list.tsx";
import { Button, buttonVariants } from "~/components/ui/button.tsx";
import { downloadLabel } from "~/lib/labels.ts";
import { formatBytes, formatDateTime } from "~/lib/utils.ts";
import { EntryStatus } from "./file-list.tsx";
import { baseName } from "./model.ts";

const PREVIEW_MAX = 20 * 1024 * 1024;

/** 选中单项的详情抽屉:文件信息、作品/Slot/下载链接、sidecars、探测摘要、路径绑定与小文件预览 */
export function FileDetail({
  root,
  entry,
  onClose,
  actions,
}: {
  root: FileRoot;
  entry: FileEntry;
  onClose: () => void;
  actions?: ReactNode;
}) {
  const stat = useFileStat(root.id, entry.path);
  const probe = useProbe();
  const e = stat.data?.entry ?? entry;
  const previewable =
    e.type === "file" &&
    e.size <= PREVIEW_MAX &&
    (e.fileKind === "nfo" || e.fileKind === "subtitle" || e.fileKind === "image");
  const text = useTextPreview(root.id, e.path, previewable && e.fileKind !== "image");
  const media = probe.data?.items[0]?.summary ?? e.media;

  return (
    <DetailSheet
      open
      onOpenChange={(o) => !o && onClose()}
      title={e.name}
      description={<EntryStatus e={e} />}
      footer={actions}
    >
      <DetailSection title="文件">
        <KvList
          items={[
            { label: "类型", value: e.type === "dir" ? "目录" : e.type === "symlink" ? "符号链接" : (e.ext ?? "文件") },
            {
              label: "大小",
              value:
                e.type === "dir"
                  ? e.dirSummary
                    ? `${e.dirSummary.videoCount}${e.dirSummary.partial ? "+" : ""} 个视频 · ${e.dirSummary.registeredCount} 个已登记`
                    : "—"
                  : formatBytes(e.size, 2),
            },
            { label: "修改时间", value: formatDateTime(e.mtime) },
            {
              label: "链接数",
              value:
                stat.data?.nlink != null
                  ? `${stat.data.nlink}${stat.data.sharedInode ? "(共享 inode,禁止原地改写)" : ""}`
                  : null,
            },
            { label: "本机路径", value: `${root.hostPath}${e.path ? `/${e.path}` : ""}`, mono: true, wide: true },
            ...(stat.data && stat.data.realPath !== `${root.hostPath}/${e.path}`
              ? [{ label: "真实路径", value: stat.data.realPath, mono: true, wide: true }]
              : []),
          ]}
        />
        {stat.isPending ? <LoadingState rows={1} /> : null}
        {stat.error ? (
          <p className="mt-2 text-meta text-destructive">{filesErrorText(stat.error, "读取详情失败")}</p>
        ) : null}
      </DetailSection>

      {e.asset ? (
        <DetailSection title="已登记资产">
          <KvList
            items={[
              {
                label: "作品",
                value: (
                  <Link
                    className="underline underline-offset-2 hover:text-foreground"
                    to={`/console/library/${e.asset.mediaEntityId}`}
                  >
                    {e.asset.title}
                    {e.asset.year ? ` (${e.asset.year})` : ""}
                  </Link>
                ),
              },
              { label: "内容单元", value: e.asset.contentUnit ?? "整部" },
              {
                label: "Slot",
                value: e.asset.slotId ? (
                  <Link className="underline underline-offset-2" to={`/console/library/${e.asset.mediaEntityId}#slots`}>
                    {e.asset.slotStatus ?? "查看"}
                  </Link>
                ) : (
                  "未满足任何 Slot"
                ),
              },
              { label: "主资产", value: e.asset.isPrimary ? "是" : "否" },
            ]}
          />
          <Link
            className="mt-2 inline-block text-meta text-muted-foreground underline"
            to={`/console/organize?mediaEntityId=${e.asset.mediaEntityId}`}
          >
            在整理记录中查看
          </Link>
        </DetailSection>
      ) : null}

      {e.download ? (
        <DetailSection title="下载任务">
          <KvList
            items={[
              {
                label: "任务",
                value: (
                  <Link className="underline underline-offset-2" to={`/console/tasks/${e.download.taskId}`}>
                    {downloadLabel(e.download.status).label}
                  </Link>
                ),
              },
              {
                label: "进度",
                value: e.download.progress != null ? `${Math.floor(e.download.progress * 100)}%` : null,
              },
              {
                label: "H&R",
                value: e.download.hnr === "satisfied" ? "已满足" : e.download.hnr === "unsatisfied" ? "未满足" : "未知",
              },
            ]}
          />
        </DetailSection>
      ) : null}

      {stat.data?.bindings.length ? (
        <DetailSection title="路径绑定">
          <ul className="space-y-1 text-caption">
            {stat.data.bindings.map((b) => (
              <li key={b.bindingId}>
                <Link className="underline underline-offset-2" to={`/console/library/${b.mediaEntityId}`}>
                  {b.title}
                </Link>
                {b.kind === "season" && b.seasonNumber != null ? ` · 第 ${b.seasonNumber} 季` : " · 作品目录"}
              </li>
            ))}
          </ul>
          <p className="mt-1 text-meta text-muted-foreground">改名/移动此目录会同步修订绑定;元数据刷新不会改路径。</p>
        </DetailSection>
      ) : null}

      {stat.data?.sidecars.length ? (
        <DetailSection title={`附属文件 ${stat.data.sidecars.length}`}>
          <ul className="space-y-0.5 font-mono text-meta text-muted-foreground">
            {stat.data.sidecars.map((s) => (
              <li key={s} className="truncate" title={s}>
                {baseName(s)}
              </li>
            ))}
          </ul>
        </DetailSection>
      ) : null}

      {e.type === "file" && e.fileKind === "video" ? (
        <DetailSection
          title="媒体信息"
          actions={
            <Button
              size="xs"
              variant="outline"
              disabled={probe.isPending}
              onClick={() =>
                probe.mutate(
                  { items: [{ root: root.id, path: e.path }] },
                  {
                    onSuccess: (r) => {
                      const it = r.items[0];
                      if (it?.status !== "ok") toast.warning(`探测不到媒体信息:${it?.reason ?? "未知原因"}`);
                    },
                    onError: (err) => toast.error(filesErrorText(err, "探测失败")),
                  },
                )
              }
            >
              {probe.isPending ? <LoaderCircle className="animate-spin" /> : <ScanSearch />}
              探测
            </Button>
          }
        >
          {media ? (
            <KvList
              items={[
                { label: "分辨率", value: media.resolution },
                { label: "HDR", value: media.hdr },
                { label: "视频编码", value: media.videoCodec },
                { label: "音轨", value: media.audioTracks },
                {
                  label: "时长",
                  value: media.durationSec ? `${Math.floor(media.durationSec / 60)} 分钟` : null,
                },
                ...(probe.data?.items[0]
                  ? [
                      { label: "容器", value: probe.data.items[0].container },
                      { label: "字幕轨", value: probe.data.items[0].subtitleTracks },
                    ]
                  : []),
              ]}
            />
          ) : (
            <p className="text-caption text-muted-foreground">
              未登记文件不自动探测;点“探测”读取 ffprobe 摘要(缓存 24 小时)。
            </p>
          )}
        </DetailSection>
      ) : null}

      {previewable ? (
        <DetailSection
          title="预览"
          actions={
            filesMockEnabled() ? null : (
              <a
                className={buttonVariants({ size: "xs", variant: "outline" })}
                href={fileDownloadUrl(root.id, e.path)}
                download={e.name}
              >
                <Download />
                下载
              </a>
            )
          }
        >
          {e.fileKind === "image" ? (
            filesMockEnabled() ? (
              <p className="text-caption text-muted-foreground">演示数据没有图片内容。</p>
            ) : (
              <a href={fileDownloadUrl(root.id, e.path)} target="_blank" rel="noreferrer" className="block">
                <img
                  src={fileDownloadUrl(root.id, e.path)}
                  alt={e.name}
                  className="max-h-80 rounded-xl border border-border object-contain"
                />
                <span className="mt-1 inline-flex items-center gap-1 text-meta text-muted-foreground">
                  <ExternalLink className="h-3 w-3" /> 新窗口打开
                </span>
              </a>
            )
          ) : text.isPending ? (
            <LoadingState rows={3} />
          ) : text.error ? (
            <p className="text-caption text-destructive">{filesErrorText(text.error, "预览失败")}</p>
          ) : (
            <pre className="max-h-80 overflow-auto rounded-xl border border-border bg-foreground/[0.03] p-3 font-mono text-meta whitespace-pre-wrap">
              {text.data}
            </pre>
          )}
        </DetailSection>
      ) : null}
    </DetailSheet>
  );
}