UHD_Media_Tool/apps/web/app/components/dashboard/home-runtime.tsx

import { useQuery } from "@tanstack/react-query";
import { type Dashboard, DownloadBoard, type HealthLevel } from "@umt/contracts";
import { ArrowRight, Download, HardDrive, type LucideIcon } from "lucide-react";
import type { ReactNode } from "react";
import { Link } from "react-router";
import { apiParsed } from "~/api/parse.ts";
import { useSystemHealth } from "~/api/system.ts";
import { EmptyState, ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
import { consolePath } from "~/components/console/nav.ts";
import { StatusBadge, type StatusTone } from "~/components/console/status-badge.tsx";
import { formatRelative } from "~/lib/labels.ts";
import { cn, formatBytes } from "~/lib/utils.ts";

const LEVEL: Record<HealthLevel, { label: string; tone: StatusTone }> = {
  ok: { label: "正常", tone: "success" },
  warn: { label: "需要关注", tone: "warning" },
  critical: { label: "需要处理", tone: "destructive" },
  unknown: { label: "用量未知", tone: "neutral" },
};
const SCOPE = { data_dir: "系统数据", library_root: "媒体库", download_dir: "下载目录" };

function OverviewCard({
  title,
  icon: Icon,
  to,
  children,
}: {
  title: string;
  icon: LucideIcon;
  to: string;
  children: ReactNode;
}) {
  return (
    <section className="pg-slab min-w-0 rounded-xl p-5">
      <div className="mb-3 flex items-center gap-2">
        <Icon className="h-4 w-4 text-muted-foreground" aria-hidden />
        <h2 className="text-body font-semibold text-foreground">{title}</h2>
        <Link
          to={to}
          className="ml-auto inline-flex items-center gap-1 text-meta text-muted-foreground hover:text-foreground"
        >
          详情
          <ArrowRight className="h-3.5 w-3.5" />
        </Link>
      </div>
      {children}
    </section>
  );
}

function StorageOverview() {
  const q = useSystemHealth(60_000);
  const mediaDisks = q.data?.disks.filter((d) => d.scope !== "data_dir") ?? [];
  const disks = mediaDisks.length ? mediaDisks : (q.data?.disks ?? []);
  return (
    <OverviewCard title="存储情况" icon={HardDrive} to={consolePath("status")}>
      {q.isPending ? (
        <LoadingState rows={2} />
      ) : q.isError ? (
        <ErrorState plain title="存储状态加载失败" onRetry={() => q.refetch()} className="py-6" />
      ) : !disks.length ? (
        <EmptyState plain icon={HardDrive} title="暂无存储状态" className="py-6" />
      ) : (
        <ul className="space-y-4">
          {disks.map((d) => {
            const pct = d.usedRatio === null ? null : d.usedRatio * 100;
            const state = LEVEL[d.level];
            return (
              <li key={`${d.scope}-${d.id ?? d.path}`} className="min-w-0">
                <div className="flex items-center justify-between gap-2">
                  <p className="min-w-0 truncate text-sm font-medium" title={d.name}>
                    {d.name !== SCOPE[d.scope] ? (
                      <span className="mr-1.5 text-meta font-normal text-muted-foreground">{SCOPE[d.scope]}</span>
                    ) : null}
                    {d.name}
                  </p>
                  <StatusBadge tone={state.tone}>
                    {state.label}
                    {pct === null ? "" : ` · ${Math.round(pct)}%`}
                  </StatusBadge>
                </div>
                {pct !== null ? (
                  <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-foreground/[0.08]" aria-hidden>
                    <div
                      className={cn(
                        "h-full rounded-full",
                        d.level === "critical"
                          ? "bg-destructive"
                          : d.level === "warn"
                            ? "bg-warning"
                            : "bg-foreground/60",
                      )}
                      style={{ width: `${pct}%` }}
                    />
                  </div>
                ) : null}
                <p className="mt-1.5 flex flex-wrap gap-x-3 gap-y-1 text-meta text-muted-foreground tabular-nums">
                  <span>
                    剩余{" "}
                    <span className="font-medium text-foreground">
                      {d.availableBytes === null ? "未知" : formatBytes(d.availableBytes, 1)}
                    </span>
                  </span>
                  <span>已用 {d.usedBytes === null ? "未知" : formatBytes(d.usedBytes, 1)}</span>
                  <span>总量 {d.totalBytes === null ? "未知" : formatBytes(d.totalBytes, 1)}</span>
                </p>
                <p className="mt-1 truncate text-meta text-muted-foreground" title={d.path}>
                  {d.path}
                </p>
                {d.error ? <p className="mt-1 text-meta text-warning">无法读取磁盘用量</p> : null}
              </li>
            );
          })}
        </ul>
      )}
      {q.data && !q.isError ? (
        <p className="mt-3 text-meta text-muted-foreground">所在磁盘用量 · 检查于 {formatRelative(q.data.checkedAt)}</p>
      ) : null}
    </OverviewCard>
  );
}

function DownloaderOverview({ downloaders }: { downloaders?: Dashboard["sources"]["downloaders"] }) {
  // 首页仅取一条面板记录，速度和计数仍是完整汇总；无需拉取下载任务列表。
  const q = useQuery({
    queryKey: ["downloads", "home-overview"],
    queryFn: ({ signal }) =>
      apiParsed(DownloadBoard, "/api/v1/download-tasks/board", { params: { state: "active", limit: 1 }, signal }),
    refetchInterval: 15_000,
    refetchIntervalInBackground: false,
  });
  const board = q.data;
  const instances = board?.transfer.instances ?? [];
  const sources =
    downloaders ??
    instances.map((d) => ({ id: d.instanceId, name: d.name, enabled: true, health: "unknown", lastSeenAt: null }));
  return (
    <OverviewCard title="下载器情况" icon={Download} to={consolePath("downloads")}>
      {q.isPending ? (
        <LoadingState rows={2} />
      ) : q.isError ? (
        <ErrorState plain title="下载器状态加载失败" onRetry={() => q.refetch()} className="py-6" />
      ) : !sources.length ? (
        <EmptyState plain icon={Download} title={downloaders ? "尚未配置下载器" : "暂无启用下载器"} className="py-6" />
      ) : (
        <>
          <p className="mb-3 text-title-sm font-semibold tabular-nums">
            {board?.counts.active}
            <span className="ml-1.5 text-caption font-normal text-muted-foreground">项进行中</span>
          </p>
          <ul className="divide-y divide-border/60">
            {sources.map((d) => {
              const live = instances.find((i) => i.instanceId === d.id);
              const state = !d.enabled
                ? { label: "已停用", tone: "neutral" as const }
                : !live
                  ? { label: "状态未知", tone: "neutral" as const }
                  : live.reachable
                    ? { label: "在线", tone: "success" as const }
                    : { label: "连接失败", tone: "warning" as const };
              const readable = d.enabled && live?.reachable;
              return (
                <li key={d.id} className="py-2 first:pt-0 last:pb-0">
                  <div className="flex items-center justify-between gap-2">
                    <span className="min-w-0 truncate text-sm font-medium" title={d.name}>
                      {d.name}
                    </span>
                    <StatusBadge tone={state.tone}>{state.label}</StatusBadge>
                  </div>
                  {d.enabled ? (
                    <p className="mt-1.5 flex flex-wrap gap-x-4 gap-y-1 text-meta text-muted-foreground tabular-nums">
                      <span>
                        下载{" "}
                        <span className="text-foreground">
                          {readable ? `${formatBytes(live.dlSpeed, 1)}/s` : "未知"}
                        </span>
                      </span>
                      <span>
                        上传{" "}
                        <span className="text-foreground">
                          {readable ? `${formatBytes(live.upSpeed, 1)}/s` : "未知"}
                        </span>
                      </span>
                    </p>
                  ) : null}
                </li>
              );
            })}
          </ul>
          <p className="mt-3 text-meta text-muted-foreground">
            进行中含等待计划、暂停和异常任务 · 速度含下载器全部任务
          </p>
          {board?.liveAt ? (
            <p className="mt-1 text-meta text-muted-foreground">速度采样于 {formatRelative(board.liveAt)}</p>
          ) : null}
        </>
      )}
    </OverviewCard>
  );
}

export function HomeRuntime({ downloaders }: { downloaders?: Dashboard["sources"]["downloaders"] }) {
  return (
    <div className="mb-4 grid gap-4 lg:grid-cols-2">
      <StorageOverview />
      <DownloaderOverview downloaders={downloaders} />
    </div>
  );
}