UHD_Media_Tool/apps/web/app/components/sites/site-overview.tsx

import type { SiteListItem } from "@umt/contracts";
import { useSiteUserData } from "~/api/sites.ts";
import { DetailSection } from "~/components/console/detail-sheet.tsx";
import { ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
import { KvList } from "~/components/console/kv-list.tsx";
import { StatTile } from "~/components/console/stat-tile.tsx";
import { StatusBadge } from "~/components/console/status-badge.tsx";
import { relTime } from "~/components/workbench/release-fields.ts";
import {
  ACCOUNT_OVERALL,
  AUTH_KIND_LABEL,
  bytes,
  dataAccount,
  healthLine,
  healthMessage,
  overallStatus,
  primaryAccount,
  rateLimitText,
  ratioText,
} from "./site-fields.ts";
import { UserDataChart } from "./user-data-chart.tsx";

/** 站点详情"概览":账号数据磁贴 + 30 天趋势 + 状态 */
export function SiteOverview({ site }: { site: SiteListItem }) {
  const dAcc = dataAccount(site.accounts);
  const acc = primaryAccount(site.accounts);
  const u = dAcc?.userData ?? null;
  const history = useSiteUserData(site.id, dAcc?.id, 30);
  const st = ACCOUNT_OVERALL[overallStatus(site)];
  const h = healthLine(site.lastHealth, site.lastHealthAt);

  return (
    <div className="space-y-6 pt-2">
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
        <StatTile label="上传" value={bytes(u?.upload)} />
        <StatTile label="下载" value={bytes(u?.download)} />
        <StatTile label="分享率" value={ratioText(u)} />
        <StatTile label="等级" value={u?.userLevel ?? "—"} hint={u?.vip ? "VIP" : undefined} />
        <StatTile label="做种" value={u ? u.seeding : "—"} hint={u?.seedingSize ? bytes(u.seedingSize) : undefined} />
        <StatTile
          label={u?.bonus !== null && u?.bonus !== undefined ? "魔力" : "未读消息"}
          value={
            u
              ? u.bonus !== null
                ? u.bonus.toLocaleString("zh-CN", { maximumFractionDigits: 1 })
                : u.messageUnread || "—"
              : "—"
          }
          hint={u && u.bonus !== null && u.messageUnread ? `${u.messageUnread} 条未读` : undefined}
        />
      </div>

      <div className="grid gap-6 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
        <section className="pg-slab min-w-0 rounded-xl p-4">
          <div className="mb-3 flex flex-wrap items-baseline justify-between gap-2">
            <h2 className="text-lead font-semibold text-foreground">近 30 天</h2>
            <span className="text-meta text-muted-foreground">
              {dAcc ? `账号 ${dAcc.label} · 数据 ${relTime(dAcc.userDataAt)}` : "没有账号数据"}
            </span>
          </div>
          {history.isPending && dAcc ? (
            <LoadingState rows={4} />
          ) : history.error ? (
            <ErrorState plain title="读取历史失败" error={history.error} onRetry={() => void history.refetch()} />
          ) : (
            <UserDataChart points={history.data?.items ?? []} />
          )}
        </section>

        <div className="space-y-6">
          <DetailSection title="账号">
            <KvList
              columns={1}
              items={[
                { label: "状态", value: <StatusBadge tone={st.tone}>{st.label}</StatusBadge> },
                { label: "凭证", value: acc ? AUTH_KIND_LABEL[acc.authKind] : "未配置" },
                { label: "用户名", value: u?.username ?? acc?.loginName },
                { label: "上次登录", value: relTime(acc?.lastLoginAt) },
                ...(acc?.lastError && acc.status !== "active"
                  ? [{ label: "最近错误", value: <span className="text-warning">{acc.lastError.message}</span> }]
                  : []),
              ]}
            />
          </DetailSection>
          <DetailSection title="站点">
            <KvList
              columns={1}
              items={[
                {
                  label: "健康检测",
                  value: (
                    <span>
                      {h.text}
                      {healthMessage(site.lastHealth) ? (
                        <span className="block text-meta text-muted-foreground">{healthMessage(site.lastHealth)}</span>
                      ) : null}
                    </span>
                  ),
                },
                {
                  label: "快照",
                  value: site.snapshotEnabled
                    ? `${site.lastSnapshotAt ? relTime(site.lastSnapshotAt) : "还没有快照"} · ${site.snapshotIntervalSec ? `每 ${Math.round(site.snapshotIntervalSec / 60)} 分钟` : "默认周期"}`
                    : "未开启",
                },
                { label: "限流", value: rateLimitText(site.rateLimit) },
                { label: "代理", value: site.proxy ? "使用" : "不使用" },
              ]}
            />
          </DetailSection>
        </div>
      </div>
    </div>
  );
}