UHD_Media_Tool/apps/web/app/components/schedules/schedule-board.tsx

import { useQueryClient } from "@tanstack/react-query";
import { SCHEDULE_CHANGED_EVENT, type ScheduledJob, type ScheduleGroup } from "@umt/contracts";
import { AlertTriangle, CalendarClock, CircleCheck, LoaderCircle, Plus, XCircle } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { useNavigate } from "react-router";
import { useScheduleBoard } from "~/api/schedules.ts";
import { EmptyState, ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
import { StatTile } from "~/components/console/stat-tile.tsx";
import { Button } from "~/components/ui/button.tsx";
import { qk } from "~/lib/query-keys.ts";
import { useSse } from "~/lib/sse.ts";
import { AgentCheckDialog } from "./agent-check-dialog.tsx";
import { GROUP_LABEL, GROUP_ORDER } from "./labels.ts";
import { ScheduleCard } from "./schedule-card.tsx";

// 定时任务看板(W7-C),IA-3 起是任务页的"计划"页签。卡片"运行记录"跳到任务流按该定时任务筛选。

/** 每秒一跳的当前时间(倒计时用) */
export function useNow(ms = 1000) {
  const [now, setNow] = useState(() => Date.now());
  useEffect(() => {
    const t = setInterval(() => setNow(Date.now()), ms);
    return () => clearInterval(t);
  }, [ms]);
  return now;
}

/** SSE:调度器每次开始/结束一次运行都会发 schedule.changed;1 秒节流 */
export function useLiveSchedules() {
  const qc = useQueryClient();
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
  useSse([SCHEDULE_CHANGED_EVENT], () => {
    if (timer.current) return;
    timer.current = setTimeout(() => {
      timer.current = null;
      qc.invalidateQueries({ queryKey: qk.all("schedules") });
    }, 1000);
  });
  useEffect(
    () => () => {
      if (timer.current) clearTimeout(timer.current);
    },
    [],
  );
  return useScheduleBoard();
}

/** 任务流里某个定时任务的筛选地址 */
export const scheduleStreamPath = (id: string) => `/console/tasks?tab=all&kind=schedule&ref=${encodeURIComponent(id)}`;

export function ScheduleBoard({ highlightJob }: { highlightJob?: string }) {
  const _qc = useQueryClient();
  const navigate = useNavigate();
  const board = useLiveSchedules();
  const now = useNow();
  const [editing, setEditing] = useState<{ job: ScheduledJob | null; key: number } | null>(null);

  const data = board.data;
  const items = data?.items ?? [];
  const byGroup = new Map<ScheduleGroup, ScheduledJob[]>();
  for (const g of GROUP_ORDER) byGroup.set(g, []);
  for (const j of items) byGroup.get(j.group)?.push(j);
  const stats = data?.stats;
  const val = (n: number | undefined) => (board.isPending ? "…" : board.isError ? "—" : (n ?? 0));

  return (
    <>
      <div className="mb-3 flex flex-wrap items-center gap-2">
        <p className="text-caption text-muted-foreground">周期任务与 Agent 巡检的开关、间隔和下次运行。</p>
        <div className="ml-auto flex items-center gap-2">
          <Button size="sm" onClick={() => setEditing({ job: null, key: Date.now() })}>
            <Plus />
            新建巡检
          </Button>
        </div>
      </div>

      <div className="mb-3 grid grid-cols-2 gap-2 lg:grid-cols-4">
        <StatTile label="已启用" icon={CircleCheck} value={val(stats?.enabled)} />
        <StatTile
          label="上次失败"
          icon={XCircle}
          tone={(stats?.failed ?? 0) > 0 ? "destructive" : "neutral"}
          value={val(stats?.failed)}
        />
        <StatTile label="运行中" icon={LoaderCircle} value={val(stats?.running)} />
        <StatTile label="全部" icon={CalendarClock} value={val(stats?.total)} />
      </div>

      {data && !data.schedulerOnline ? (
        <p
          role="status"
          className="mb-4 flex items-center gap-2 rounded-tight border border-warning/30 bg-warning/10 px-3 py-2 text-caption text-warning"
        >
          <AlertTriangle className="h-4 w-4 shrink-0" />
          调度器未在线,任务不会按时运行。
        </p>
      ) : (
        <div className="mb-4" />
      )}

      {board.isPending ? (
        <LoadingState rows={6} />
      ) : board.isError ? (
        <ErrorState error={board.error} onRetry={() => board.refetch()} />
      ) : items.length === 0 ? (
        <EmptyState icon={CalendarClock} title="还没有定时任务" description="worker 启动后自动登记。" />
      ) : (
        <div className="grid items-start gap-4 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5">
          {GROUP_ORDER.map((g) => {
            const jobs = byGroup.get(g) ?? [];
            return (
              <section key={g} aria-label={GROUP_LABEL[g]} className="grid min-w-0 gap-2.5">
                <h2 className="flex items-baseline justify-between px-1 text-caption font-medium text-muted-foreground">
                  <span>{GROUP_LABEL[g]}</span>
                  <span className="tabular-nums">{jobs.length}</span>
                </h2>
                {jobs.length === 0 ? (
                  <p className="rounded-xl border border-dashed border-border/70 px-4 py-6 text-center text-meta text-muted-foreground">
                    {g === "agent" ? "还没有巡检。" : "还没有定时任务。"}
                  </p>
                ) : (
                  jobs.map((j) => (
                    <ScheduleCard
                      key={j.id}
                      job={j}
                      now={now}
                      highlight={highlightJob === j.id}
                      onHistory={(job) => navigate(scheduleStreamPath(job.id))}
                      onEdit={(job) => setEditing({ job, key: Date.now() })}
                    />
                  ))
                )}
              </section>
            );
          })}
        </div>
      )}

      {editing ? (
        <AgentCheckDialog key={editing.key} open job={editing.job} onOpenChange={(o) => !o && setEditing(null)} />
      ) : null}
    </>
  );
}