components.tsx

import { useState, type ReactElement, type ReactNode } from "react";
import {
  ArrowRight,
  BellOff,
  Check,
  ChevronDown,
  CircleCheckBig,
  Download,
  Globe,
  Loader2,
  PackageCheck,
  RefreshCw,
  ShieldAlert,
  TriangleAlert,
  X,
} from "lucide-react";
import { useTranslation } from "react-i18next";
import { cn } from "@App/pkg/utils/cn";
import { formatUnixTime } from "@App/pkg/utils/day_format";
import { Button } from "@App/pages/components/ui/button";
import { Checkbox } from "@App/pages/components/ui/checkbox";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@App/pages/components/ui/collapsible";
import { Progress } from "@App/pages/components/ui/progress";
import { Skeleton } from "@App/pages/components/ui/skeleton";
import { StateScreen } from "@App/pages/components/ui/state-screen";
import { DataPanel } from "@App/pages/components/ui/data-panel";
import { Tooltip, TooltipContent, TooltipTrigger } from "@App/pages/components/ui/tooltip";
import { Popconfirm } from "@App/pages/components/ui/popconfirm";
import { formatSimilarity, groupCheckState, splitBySite } from "./logic";
import type { BatchProgress, RowState, UpdateItem, UpdateRisk } from "./logic";

/** 批量更新视图（桌面/移动共用）所需的数据与回调 */
export interface BatchUpdateViewProps {
  /** 触发本页的当前网址（?site=），为空表示不是从某个网站打开的 */
  site: string;
  updates: UpdateItem[];
  ignored: UpdateItem[];
  /** 本次检查覆盖的脚本总数（用于空状态文案） */
  totalChecked: number;
  checktime: number;
  checking: boolean;
  loading: boolean;
  /** 记录取数失败的原因；非 null 时整页落到错误终态 */
  loadError: string | null;
  /** 批量正在进行：期间禁止勾选与再次发起批量，避免两条进度互相覆盖 */
  batchBusy: boolean;
  selected: Set<string>;
  /** 按 uuid 索引的行内更新状态；不在表内即为初始态 */
  rowStates: Record<string, RowState>;
  /** 正在打开更新详情页的脚本 uuid：服务端备代码期间行内转圈并挡住重复点击 */
  opening: Set<string>;
  /** 批量操作进度；为 null 表示当前没有批量操作 */
  batchProgress: BatchProgress | null;
  /** 服务端检查结果已失效，需重新检查更新 */
  recordExpired: boolean;
  onToggle: (uuid: string) => void;
  onToggleAll: () => void;
  /** 切换一组（如「本站相关」）的选择，不影响组外已选项 */
  onToggleGroup: (uuids: string[]) => void;
  onUpdate: (item: UpdateItem) => void;
  onIgnore: (item: UpdateItem) => void;
  onRestore: (item: UpdateItem) => void;
  onUpdateSelected: () => void;
  onIgnoreSelected: () => void;
  onRestoreAll: () => void;
  onCheckNow: () => void;
  /** 重新拉取更新记录（加载失败后的出口） */
  onRetryLoad: () => void;
  /** 打开单个脚本的更新详情页 */
  onOpen: (uuid: string) => void;
  /** 打开 options 脚本列表，便于事后核对刚更新了哪些脚本 */
  onOpenScriptList: () => void;
}

/** 悬停 tooltip：用于展示过长被截断的内容（脚本名、来源）或附加信息（相似度、新增连接） */
function HoverTip({ content, children }: { content: ReactNode; children: ReactElement }) {
  return (
    <Tooltip>
      <TooltipTrigger asChild>{children}</TooltipTrigger>
      <TooltipContent className="max-w-[320px] break-all">{content}</TooltipContent>
    </Tooltip>
  );
}

/** 脚本图标：有 @icon 时显示图片，失败或缺省时回退为首字母方块 */
export function ScriptAvatar({ name, iconUrl, size = 28 }: { name: string; iconUrl: string; size?: number }) {
  const [error, setError] = useState(false);
  if (iconUrl && !error) {
    return (
      <img
        src={iconUrl}
        alt={name}
        onError={() => setError(true)}
        className="shrink-0 rounded-md object-cover"
        style={{ width: size, height: size }}
      />
    );
  }
  return (
    <span
      className="flex shrink-0 items-center justify-center rounded-md bg-muted text-xs font-medium text-fg-secondary"
      style={{ width: size, height: size }}
    >
      {name.charAt(0).toUpperCase()}
    </span>
  );
}

const PILL = "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap";

// 重大改动是「需要留意」而不是「危险」，用警示色而非危险红；显著改动用中性色，不和主色的「更新」抢视线
const RISK_CLASS: Record<UpdateRisk, string> = {
  major: "bg-warning-bg text-warning-fg",
  noticeable: "bg-muted text-fg-secondary",
  tiny: "bg-success-bg text-success-fg",
};
const RISK_KEY: Record<UpdateRisk, string> = {
  major: "codechange_major",
  noticeable: "codechange_noticeable",
  tiny: "codechange_tiny",
};

export function RiskBadge({ risk, similarity }: { risk: UpdateRisk; similarity: number }) {
  const { t } = useTranslation();
  return (
    <HoverTip content={`${t("install:updatepage.similarity")} ${formatSimilarity(similarity)}`}>
      <span className={cn(PILL, RISK_CLASS[risk], "cursor-default")}>{t(`install:updatepage.${RISK_KEY[risk]}`)}</span>
    </HoverTip>
  );
}

export function ConnectBadge({ newConnects }: { newConnects: string[] }) {
  const { t } = useTranslation();
  const content =
    newConnects.length > 0
      ? `${t("install:updatepage.new_connects")}: ${newConnects.join(", ")}`
      : t("install:updatepage.tag_new_connect");
  return (
    <HoverTip content={content}>
      <span className={cn(PILL, "bg-warning-bg text-warning-fg cursor-default")}>
        <ShieldAlert className="size-3" />
        {t("install:updatepage.tag_new_connect")}
      </span>
    </HoverTip>
  );
}

export function StatusBadge({ enabled }: { enabled: boolean }) {
  const { t } = useTranslation();
  return (
    <span className={cn(PILL, enabled ? "bg-success-bg text-success-fg" : "bg-muted text-muted-foreground")}>
      {enabled ? t("install:updatepage.enabled") : t("install:updatepage.disabled")}
    </span>
  );
}

/**
 * 新旧版本对比。桌面放在脚本名下的次要行里，过长时各自截断、悬停看全文；
 * 移动端触屏没有悬停，wrap 时折行展示完整版本号。
 */
export function VersionDiff({
  oldVersion,
  newVersion,
  wrap,
  className,
}: {
  oldVersion: string;
  newVersion: string;
  wrap?: boolean;
  className?: string;
}) {
  const diff = (
    <div
      className={cn(
        "flex min-w-0 items-center gap-x-1.5 font-mono text-[13px]",
        wrap ? "flex-wrap break-all" : "cursor-default",
        className
      )}
    >
      <span className={cn("text-muted-foreground", !wrap && "truncate")}>{`v${oldVersion}`}</span>
      <span className="flex min-w-0 items-center gap-1.5">
        <ArrowRight className="size-3.5 shrink-0 text-muted-foreground" />
        <span className={cn("font-semibold text-primary", !wrap && "truncate")}>{`v${newVersion}`}</span>
      </span>
    </div>
  );
  if (wrap) return diff;
  return <HoverTip content={`v${oldVersion} → v${newVersion}`}>{diff}</HoverTip>;
}

export function SourceCell({ source }: { source: string }) {
  if (!source) return <span className="text-muted-foreground">{"—"}</span>;
  return (
    <HoverTip content={source}>
      <span className="flex min-w-0 cursor-default items-center gap-1.5 text-[13px] text-fg-secondary">
        <Globe className="size-3.5 shrink-0 text-muted-foreground" />
        <span className="truncate">{source}</span>
      </span>
    </HoverTip>
  );
}

/**
 * 可点击跳转更新详情页的脚本名（过长时 tooltip 显示全名）；loading 期间转圈并拒绝再次点击。
 * 用 aria-disabled 而不是 disabled：浏览器不向 disabled 控件派发指针事件，
 * 那样会在名字被截断、最需要看全名的时候把 tooltip 一起关掉，键盘触发后焦点也会掉到 body。
 * 转圈位常驻等宽空槽，避免 spinner 出现时把名字挤窄造成二次截断。
 */
export function ScriptName({
  name,
  loading,
  uuid,
  onClick,
}: {
  name: string;
  loading?: boolean;
  uuid: string;
  onClick: () => void;
}) {
  return (
    <HoverTip content={name}>
      <button
        type="button"
        onClick={() => {
          if (!loading) onClick();
        }}
        aria-disabled={loading}
        aria-busy={loading}
        data-testid={`script-name-${uuid}`}
        className={cn(
          "flex min-w-0 items-center gap-1.5 text-left text-sm font-medium text-foreground hover:text-primary hover:underline",
          loading && "cursor-progress"
        )}
      >
        <span className="truncate">{name}</span>
        <span className="flex size-3.5 shrink-0 items-center justify-center">
          {loading && <Loader2 className="size-3.5 animate-spin text-primary" />}
        </span>
      </button>
    </HoverTip>
  );
}

/** 复选框的扩展点击区：方框不变，伪元素向外撑到约 44px */
export const CHECKBOX_HIT = "relative after:absolute after:-inset-3.5 after:content-['']";

/** 分段组头（「{site} 相关」/「其他更新」）：复选框只切换本段，桌面与移动共用 */
export function UpdateGroupHeader({
  kind,
  items,
  view,
  className,
}: {
  kind: "site" | "other";
  items: UpdateItem[];
  view: BatchUpdateViewProps;
  className?: string;
}) {
  const { t } = useTranslation();
  const uuids = items.map((item) => item.uuid);
  const title =
    kind === "site" ? t("install:updatepage.group_site", { site: view.site }) : t("install:updatepage.group_other");
  return (
    <div data-testid={`update-group-${kind}`} className={cn("flex min-w-0 items-center", className)}>
      <div className="flex w-9 shrink-0 items-center">
        <Checkbox
          aria-label={title}
          checked={groupCheckState(uuids, view.selected)}
          disabled={view.batchBusy}
          onCheckedChange={() => view.onToggleGroup(uuids)}
          className={CHECKBOX_HIT}
        />
      </div>
      <span className="flex min-w-0 items-center gap-1.5 text-[13px] font-semibold text-foreground">
        {kind === "site" && <Globe className="size-3.5 shrink-0 text-fg-secondary" />}
        <span className="truncate">{title}</span>
      </span>
      <span className="ml-2 shrink-0 rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">
        {items.length}
      </span>
      {kind === "site" && (
        <span className="ml-2.5 truncate text-xs text-muted-foreground">{t("install:updatepage.group_site_desc")}</span>
      )}
    </div>
  );
}

/** 行内文字按钮（更新 / 忽略 / 恢复） */
function LinkAction({ label, onClick, muted }: { label: string; onClick: () => void; muted?: boolean }) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(
        "text-[13px] font-medium hover:underline",
        muted ? "text-muted-foreground font-normal" : "text-primary"
      )}
    >
      {label}
    </button>
  );
}

/**
 * 行内更新状态区：进行中/成功/失败时接管操作区，初始态才让位给常规操作按钮。
 * 桌面与移动共用，保证两套视图的状态语义完全一致。
 */
export function RowStatus({
  item,
  state,
  onRetry,
  children,
}: {
  item: UpdateItem;
  state: RowState | undefined;
  onRetry: () => void;
  children: ReactNode;
}) {
  const { t } = useTranslation();
  const testId = `row-status-${item.uuid}`;
  const ignoring = state?.kind === "ignore";
  const wrap = (phase: string, content: ReactNode) => (
    <span
      data-testid={testId}
      data-phase={phase}
      data-kind={state?.kind ?? "update"}
      className="flex items-center justify-end gap-1.5 whitespace-nowrap"
    >
      {content}
    </span>
  );
  switch (state?.phase) {
    case "queued":
      return wrap(
        "queued",
        <span className="text-[13px] text-muted-foreground">{t("install:updatepage.row_queued")}</span>
      );
    case "working":
      return wrap(
        "working",
        <>
          <Loader2 className="size-3.5 animate-spin text-primary" />
          <span className="text-[13px] font-medium text-primary">
            {ignoring ? t("install:updatepage.row_ignoring") : t("install:updatepage.row_updating")}
          </span>
        </>
      );
    case "success":
    case "exiting":
      return wrap(
        state.phase,
        <>
          <Check className="size-3.5 text-success-fg animate-in zoom-in-50 duration-300 ease-out" />
          <span className="text-[13px] font-medium text-success-fg">
            {ignoring
              ? t("install:updatepage.row_ignored", { version: item.newVersion })
              : t("install:updatepage.row_updated", { version: item.newVersion })}
          </span>
        </>
      );
    case "fail":
      return wrap(
        "fail",
        <>
          <HoverTip content={state.error || t("install:updatepage.unknown_error")}>
            <span className="cursor-default text-[13px] font-medium text-destructive">
              {ignoring ? t("install:updatepage.row_ignore_failed") : t("install:updatepage.row_failed")}
            </span>
          </HoverTip>
          <span className="text-muted-foreground">{"·"}</span>
          <button
            type="button"
            data-testid={`row-retry-${item.uuid}`}
            onClick={onRetry}
            className="text-[13px] font-medium text-primary hover:underline"
          >
            {t("install:updatepage.retry")}
          </button>
        </>
      );
    default:
      return wrap("idle", children);
  }
}

/** 行底 2px 扫光条：更新中的持续信号，复用全局不确定进度条动画 */
export function RowWorkingBar() {
  const { t } = useTranslation();
  return (
    <Progress
      variant="top"
      indeterminate
      className="absolute inset-x-0 bottom-0"
      aria-label={t("install:updatepage.row_updating")}
    />
  );
}

/** 行容器随状态变化的底色与退场动画 */
export function rowPhaseClass(state: RowState | undefined): string {
  switch (state?.phase) {
    case "queued":
    case "working":
      // overflow-hidden：把行底扫光条裁进圆角（移动端卡片是圆角承载面）
      return "bg-primary/5 overflow-hidden";
    case "success":
      return "bg-success-bg/70";
    case "exiting":
      return "bg-success-bg/70 overflow-hidden translate-x-6 transition-transform duration-200 ease-out animate-collapse-bar";
    case "fail":
      return "bg-destructive/10";
    default:
      return "";
  }
}

/** 已忽略分组的「全部恢复并更新」：批量安装且不可撤销，必须先确认后果 */
export function RestoreAllAction({ view, className }: { view: BatchUpdateViewProps; className?: string }) {
  const { t } = useTranslation();
  const connectCount = view.ignored.filter((item) => item.withNewConnect).length;
  const description = [
    t("install:updatepage.restore_all_confirm", { count: view.ignored.length }),
    connectCount > 0 ? t("install:updatepage.restore_all_confirm_connect", { count: connectCount }) : "",
  ]
    .filter(Boolean)
    .join(" ");
  return (
    <Popconfirm description={description} onConfirm={view.onRestoreAll} side="bottom" align="end">
      <Button
        variant="link"
        size="sm"
        data-testid="ignored-restore-all"
        disabled={view.batchBusy}
        className={cn("h-auto p-0 text-[13px]", className)}
      >
        {t("install:updatepage.restore_all")}
      </Button>
    </Popconfirm>
  );
}

/** 批量进度与收尾汇总：确定性进度条 + 一条汇总文案 + 事后核对入口 */
export function BatchSummary({
  progress,
  onOpenScriptList,
  className,
}: {
  progress: BatchProgress;
  onOpenScriptList: () => void;
  className?: string;
}) {
  const { t } = useTranslation();
  const { done, total, failed, finished, interrupted } = progress;
  const updated = done - failed;
  const succeeded = finished && failed === 0 && !interrupted;
  const text = !finished
    ? t("install:updatepage.batch_progress", { done, total })
    : interrupted
      ? t("install:updatepage.batch_interrupted", { count: updated })
      : failed > 0
        ? t("install:updatepage.batch_done_partial", { updated, failed })
        : t("install:updatepage.batch_done", { count: updated });
  return (
    <div data-testid="batch-summary" className="shrink-0 border-b border-border bg-card">
      <Progress
        variant="top"
        value={done}
        max={total}
        aria-label={text}
        indicatorClassName={succeeded ? "bg-success" : failed > 0 || interrupted ? "bg-warning" : undefined}
      />
      <div className={cn("flex items-center justify-between gap-3 py-1.5", className)}>
        <span
          className={cn(
            "truncate text-[13px]",
            succeeded
              ? "text-success-fg"
              : finished && (failed > 0 || interrupted)
                ? "text-warning-fg"
                : "text-fg-secondary"
          )}
        >
          {text}
        </span>
        {finished && updated > 0 && (
          <button
            type="button"
            data-testid="batch-open-scripts"
            onClick={onOpenScriptList}
            className="shrink-0 text-[13px] font-medium text-primary hover:underline"
          >
            {t("install:updatepage.view_updated_scripts")}
          </button>
        )}
      </div>
    </div>
  );
}

/**
 * 检查结果已随 Service Worker 回收失效：点更新不会有任何效果，必须显式告知。
 * 自带重新检查入口——移动端顶栏那个按钮只有图标，让用户自己找不合理。
 */
export function RecordExpiredNotice({ onCheckNow, className }: { onCheckNow: () => void; className?: string }) {
  const { t } = useTranslation();
  return (
    <div
      data-testid="record-expired"
      role="alert"
      className={cn(
        "flex shrink-0 items-center gap-2 border-b border-border bg-warning-bg py-2 text-[13px] text-warning-fg",
        className
      )}
    >
      <TriangleAlert className="size-4 shrink-0" />
      <span className="flex-1">{t("install:updatepage.record_expired")}</span>
      <button
        type="button"
        data-testid="record-expired-recheck"
        onClick={onCheckNow}
        className="shrink-0 font-medium underline underline-offset-2"
      >
        {t("install:updatepage.recheck")}
      </button>
    </div>
  );
}

/**
 * 是否展示骨架。首屏取数期间必然要；此外只有「从未检查过、这次是第一次」才用骨架，
 * 已经给出过空态之后再点检查，保留空态 + 顶部进度条即可，不要整页闪回骨架再闪回来。
 */
export function showSkeleton(view: BatchUpdateViewProps, empty: boolean): boolean {
  return view.loading || (view.checking && empty && view.checktime === 0);
}

/**
 * 桌面只保留「脚本 / 变更 / 操作」三列，版本与来源放进脚本名下的次要行：
 * 固定列只剩约 440px，768px（桌面最窄）时脚本名仍有可读宽度，不必再加断点。
 */
const COL = {
  change: "w-[220px] shrink-0 pl-2",
  // 需容纳最宽的行内状态（「更新失败 · 重试」/ 各语言的「已更新 vX.Y.Z」），不能按初始态的两个按钮取宽
  action: "w-[180px] shrink-0",
};

/** 桌面端单行（待更新或已忽略） */
function DesktopRow({
  item,
  state,
  selected,
  opening,
  batchBusy,
  onToggle,
  onOpen,
  onUpdate,
  onIgnore,
  onRestore,
  ignoredRow,
}: {
  item: UpdateItem;
  state?: RowState;
  selected?: boolean;
  opening?: boolean;
  batchBusy?: boolean;
  onToggle?: (uuid: string) => void;
  onOpen: (uuid: string) => void;
  onUpdate?: (item: UpdateItem) => void;
  onIgnore?: (item: UpdateItem) => void;
  onRestore?: (item: UpdateItem) => void;
  ignoredRow?: boolean;
}) {
  const { t } = useTranslation();
  const dim = item.enabled ? "" : "opacity-55";
  // 重试要重放失败的那个动作本身，忽略失败后再点「重试」不该改成安装
  const primaryAction = () =>
    state?.kind === "ignore" ? onIgnore?.(item) : ignoredRow ? onRestore?.(item) : onUpdate?.(item);
  return (
    <div
      className={cn(
        "relative flex min-h-14 items-center px-4 py-2 border-b border-border last:border-b-0 hover:bg-accent/40 transition-colors",
        rowPhaseClass(state)
      )}
    >
      <div className="flex w-9 shrink-0 items-center">
        {ignoredRow ? (
          <BellOff className="size-3.5 text-muted-foreground" />
        ) : (
          <Checkbox checked={!!selected} disabled={batchBusy} onCheckedChange={() => onToggle?.(item.uuid)} />
        )}
      </div>
      <div className={cn("flex flex-1 items-center gap-2.5 min-w-0", dim)}>
        <ScriptAvatar name={item.name} iconUrl={item.iconUrl} />
        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
          <div className="flex min-w-0 items-center gap-2">
            <ScriptName name={item.name} uuid={item.uuid} loading={opening} onClick={() => onOpen(item.uuid)} />
            <StatusBadge enabled={item.enabled} />
          </div>
          <div className="flex min-w-0 items-center gap-2">
            {/* 版本优先保留，来源先被截断 */}
            <VersionDiff oldVersion={item.oldVersion} newVersion={item.newVersion} className="max-w-[65%] shrink-0" />
            <span className="text-muted-foreground">{"·"}</span>
            <SourceCell source={item.source} />
          </div>
        </div>
      </div>
      <div className={cn(COL.change, "flex items-center gap-1.5 flex-wrap", dim)}>
        <RiskBadge risk={item.risk} similarity={item.similarity} />
        {item.withNewConnect && <ConnectBadge newConnects={item.newConnects} />}
      </div>
      <div className={cn(COL.action, "flex items-center justify-end gap-2")}>
        <RowStatus item={item} state={state} onRetry={primaryAction}>
          {ignoredRow ? (
            <LinkAction label={t("install:updatepage.restore")} onClick={() => onRestore?.(item)} />
          ) : (
            <>
              <LinkAction label={t("install:updatepage.update")} onClick={() => onUpdate?.(item)} />
              <span className="h-3 w-px bg-border" />
              <LinkAction label={t("install:updatepage.ignore")} onClick={() => onIgnore?.(item)} muted />
            </>
          )}
        </RowStatus>
      </div>
      {state?.phase === "working" && <RowWorkingBar />}
    </div>
  );
}

function DesktopTableHeader() {
  const { t } = useTranslation();
  return (
    <div className="flex h-10 items-center px-4 border-b border-border bg-muted/40 text-xs font-medium text-muted-foreground">
      <div className="w-9 shrink-0" />
      <div className="flex-1">{t("install:updatepage.col_script")}</div>
      <div className={COL.change}>{t("install:updatepage.col_change")}</div>
      <div className={cn(COL.action, "text-right")}>{t("install:updatepage.col_action")}</div>
    </div>
  );
}

const DESKTOP_GROUP_HEAD = "h-11 px-4 border-b border-border bg-muted/40";

function DesktopTable({ view }: { view: BatchUpdateViewProps }) {
  const groups = splitBySite(view.updates);
  const rows = (items: UpdateItem[]) =>
    items.map((item) => (
      <DesktopRow
        key={item.uuid}
        item={item}
        state={view.rowStates[item.uuid]}
        selected={view.selected.has(item.uuid)}
        opening={view.opening.has(item.uuid)}
        batchBusy={view.batchBusy}
        onToggle={view.onToggle}
        onOpen={view.onOpen}
        onUpdate={view.onUpdate}
        onIgnore={view.onIgnore}
      />
    ));
  return (
    <DataPanel>
      <DesktopTableHeader />
      {groups ? (
        <>
          <UpdateGroupHeader kind="site" items={groups.site} view={view} className={DESKTOP_GROUP_HEAD} />
          {rows(groups.site)}
          {groups.other.length > 0 && (
            <>
              <UpdateGroupHeader kind="other" items={groups.other} view={view} className={DESKTOP_GROUP_HEAD} />
              {rows(groups.other)}
            </>
          )}
        </>
      ) : (
        rows(view.updates)
      )}
    </DataPanel>
  );
}

function DesktopIgnored({ view }: { view: BatchUpdateViewProps }) {
  const { t } = useTranslation();
  return (
    <Collapsible defaultOpen>
      <DataPanel>
        <div className="flex h-12 items-center justify-between px-4 border-b border-border">
          <CollapsibleTrigger className="group flex items-center gap-2">
            <ChevronDown className="size-[18px] text-fg-secondary transition-transform group-data-[state=closed]:-rotate-90" />
            <span className="text-sm font-medium text-foreground">{t("install:updatepage.ignored_section")}</span>
            <span className="rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">
              {view.ignored.length}
            </span>
          </CollapsibleTrigger>
          <RestoreAllAction view={view} />
        </div>
        <CollapsibleContent>
          {view.ignored.map((item) => (
            <DesktopRow
              key={item.uuid}
              item={item}
              state={view.rowStates[item.uuid]}
              ignoredRow
              opening={view.opening.has(item.uuid)}
              batchBusy={view.batchBusy}
              onOpen={view.onOpen}
              onRestore={view.onRestore}
            />
          ))}
        </CollapsibleContent>
      </DataPanel>
    </Collapsible>
  );
}

/**
 * 顶部全选：有分段时它的作用范围（全部待更新）不再不言自明，显式写出「全选」，与组头复选框区分。
 */
export function SelectAllLabel({ view }: { view: BatchUpdateViewProps }) {
  const { t } = useTranslation();
  const selectedCount = view.updates.filter((u) => view.selected.has(u.uuid)).length;
  const count = t("install:updatepage.selected_count", { selected: selectedCount, total: view.updates.length });
  return <>{splitBySite(view.updates) ? `${t("script:select_all")} · ${count}` : count}</>;
}

export function SelectAllCheckbox({ view, className }: { view: BatchUpdateViewProps; className?: string }) {
  const { t } = useTranslation();
  return (
    <Checkbox
      aria-label={t("script:select_all")}
      checked={groupCheckState(
        view.updates.map((u) => u.uuid),
        view.selected
      )}
      disabled={view.batchBusy}
      onCheckedChange={view.onToggleAll}
      className={className}
    />
  );
}

function DesktopToolbar({ view }: { view: BatchUpdateViewProps }) {
  const { t } = useTranslation();
  const selectedCount = view.updates.filter((u) => view.selected.has(u.uuid)).length;
  return (
    <div className="flex items-center justify-between">
      <div className="flex items-center gap-3">
        <SelectAllCheckbox view={view} />
        <span className="text-sm font-medium text-foreground">
          <SelectAllLabel view={view} />
        </span>
        {view.ignored.length > 0 && (
          <>
            <span className="text-muted-foreground">{"·"}</span>
            <span className="text-[13px] text-muted-foreground">
              {t("install:updatepage.ignored_count", { count: view.ignored.length })}
            </span>
          </>
        )}
      </div>
      <div className="flex items-center gap-2.5">
        <Button
          variant="outline"
          size="sm"
          disabled={selectedCount === 0 || view.batchBusy}
          onClick={view.onIgnoreSelected}
        >
          <BellOff />
          {t("install:updatepage.ignore_selected")}
        </Button>
        <Button size="sm" disabled={selectedCount === 0 || view.batchBusy} onClick={view.onUpdateSelected}>
          <Download />
          {t("install:updatepage.update_selected", { count: selectedCount })}
        </Button>
      </div>
    </div>
  );
}

/** 顶部不确定进度条：检查更新进行中时的即时反馈信号（贴在 header 下方，不随内容滚动） */
export function TopProgressBar() {
  const { t } = useTranslation();
  return <Progress variant="top" indeterminate aria-label={t("install:updatepage.status_checking_updates")} />;
}

/** 骨架占位灰条 */
export function SkeletonBar({ className }: { className?: string }) {
  return <Skeleton className={className} />;
}

/**
 * 桌面端检查中的骨架：保留表头 + 占位行，取代冻结的空状态/大转圈。
 * 工具条也要占位——真实态里它在表格上方，缺了这一块数据到达时整张表会向下跳一截。
 */
function SkeletonTable() {
  const { t } = useTranslation();
  return (
    <div
      role="status"
      aria-busy="true"
      aria-label={t("install:updatepage.loading_list")}
      className="flex flex-col gap-4"
    >
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <SkeletonBar className="size-4 rounded-md" />
          <SkeletonBar className="h-4 w-28" />
        </div>
        <div className="flex items-center gap-2.5">
          <SkeletonBar className="h-8 w-24 rounded-md" />
          <SkeletonBar className="h-8 w-28 rounded-md" />
        </div>
      </div>
      <SkeletonRows />
    </div>
  );
}

function SkeletonRows() {
  return (
    <DataPanel data-testid="update-skeleton">
      <DesktopTableHeader />
      {Array.from({ length: 4 }).map((_, i) => (
        <div key={i} className="flex min-h-14 items-center px-4 py-2 border-b border-border last:border-b-0">
          <div className="w-9 shrink-0">
            <SkeletonBar className="size-4 rounded-md" />
          </div>
          <div className="flex flex-1 items-center gap-2.5 min-w-0">
            <SkeletonBar className="size-7 shrink-0 rounded-md" />
            <div className="flex min-w-0 flex-1 flex-col gap-1.5">
              <SkeletonBar className="h-4 w-40 max-w-[55%]" />
              <SkeletonBar className="h-3.5 w-52 max-w-[70%]" />
            </div>
          </div>
          <div className={COL.change}>
            <SkeletonBar className="h-5 w-20 rounded-full" />
          </div>
          <div className={cn(COL.action, "flex justify-end")}>
            <SkeletonBar className="h-4 w-12" />
          </div>
        </div>
      ))}
    </DataPanel>
  );
}

/** 空状态：所有脚本均为最新。重新检查时原地保留，只让按钮转圈，不整页闪回骨架 */
export function EmptyState({
  totalChecked,
  checking,
  onCheckNow,
}: {
  totalChecked: number;
  checking: boolean;
  onCheckNow: () => void;
}) {
  const { t } = useTranslation();
  return (
    <StateScreen
      data-testid="update-empty"
      icon={CircleCheckBig}
      tone="primary"
      compact
      className="py-24"
      title={t("install:updatepage.empty_title")}
      description={t("install:updatepage.empty_desc", { count: totalChecked })}
      action={
        <Button data-testid="empty-recheck" disabled={checking} onClick={onCheckNow}>
          <RefreshCw className={cn(checking && "animate-spin")} />
          {t("install:updatepage.recheck")}
        </Button>
      }
    />
  );
}

/**
 * 更新记录取数失败的终态。没有这一屏时，空记录会被渲染成「所有脚本均为最新」，
 * 把一次加载失败说成了检查成功。
 */
export function LoadErrorScreen({
  error,
  onRetry,
  onOpenScriptList,
}: {
  error: string;
  onRetry: () => void;
  onOpenScriptList: () => void;
}) {
  const { t } = useTranslation();
  return (
    <StateScreen
      data-testid="update-load-error"
      icon={TriangleAlert}
      tone="error"
      compact
      className="py-24"
      title={t("install:updatepage.load_failed_title")}
      description={t("install:updatepage.load_failed_desc")}
      detail={error || undefined}
      detailTestId="update-load-error-detail"
      action={
        <div className="flex gap-2.5">
          <Button data-testid="load-error-retry" onClick={onRetry}>
            <RefreshCw />
            {t("install:updatepage.retry")}
          </Button>
          <Button variant="outline" onClick={onOpenScriptList}>
            {t("install:updatepage.script_list")}
          </Button>
        </div>
      }
    />
  );
}

/** 顶部状态/自动关闭信息条 */
function HeaderStatus({ view }: { view: BatchUpdateViewProps }) {
  const { t } = useTranslation();
  const text = view.checking
    ? t("install:updatepage.status_checking_updates")
    : view.checktime
      ? t("install:updatepage.last_check", { time: formatUnixTime(Math.floor(view.checktime / 1000)) })
      : "";
  if (!text) return null;
  return (
    <>
      <span className="text-muted-foreground">{"·"}</span>
      <span className="truncate text-[13px] text-muted-foreground">{text}</span>
    </>
  );
}

/** 桌面端整页视图 */
export function DesktopView({ view }: { view: BatchUpdateViewProps }) {
  const { t } = useTranslation();
  const empty = view.updates.length === 0 && view.ignored.length === 0;
  return (
    <div className="flex h-dvh flex-col bg-background text-foreground">
      <header className="flex h-[60px] shrink-0 items-center justify-between border-b border-border bg-card px-6">
        <div className="flex min-w-0 items-center gap-3">
          <PackageCheck className="size-[22px] shrink-0 text-primary" />
          <h1 className="text-lg font-semibold text-foreground">{t("install:updatepage.title")}</h1>
          <HeaderStatus view={view} />
        </div>
        <div className="flex shrink-0 items-center gap-3">
          <Button
            variant={view.recordExpired ? "default" : "outline"}
            size="sm"
            disabled={view.checking}
            onClick={view.onCheckNow}
          >
            <RefreshCw className={cn(view.checking && "animate-spin")} />
            {t("install:updatepage.main_header")}
          </Button>
          <Button
            variant="ghost"
            size="icon-sm"
            className="text-fg-secondary"
            aria-label={t("common:close")}
            onClick={() => window.close()}
          >
            <X />
          </Button>
        </div>
      </header>
      {view.checking && <TopProgressBar />}
      {view.recordExpired && <RecordExpiredNotice onCheckNow={view.onCheckNow} className="px-6" />}
      {view.batchProgress && (
        <BatchSummary progress={view.batchProgress} onOpenScriptList={view.onOpenScriptList} className="px-6" />
      )}
      <div className="flex-1 overflow-auto scrollbar-custom">
        <div className="mx-auto flex w-full max-w-[1100px] flex-col gap-4 px-6 py-6">
          {view.loadError !== null ? (
            <LoadErrorScreen
              error={view.loadError}
              onRetry={view.onRetryLoad}
              onOpenScriptList={view.onOpenScriptList}
            />
          ) : showSkeleton(view, empty) ? (
            <SkeletonTable />
          ) : empty ? (
            <EmptyState totalChecked={view.totalChecked} checking={view.checking} onCheckNow={view.onCheckNow} />
          ) : (
            <>
              {view.updates.length > 0 && (
                <>
                  <DesktopToolbar view={view} />
                  <DesktopTable view={view} />
                </>
              )}
              {view.ignored.length > 0 && <DesktopIgnored view={view} />}
            </>
          )}
        </div>
      </div>
    </div>
  );
}