import { useQueryClient } from "@tanstack/react-query";
import { RotateCw } from "lucide-react";
import { useSearchParams } from "react-router";
import { agentKeys } from "~/api/agent.ts";
import { PageHeader } from "~/components/console/page-header.tsx";
import { PlanBoard } from "~/components/schedules/schedule-board.tsx";
import { Button } from "~/components/ui/button.tsx";
import { qk } from "~/lib/query-keys.ts";

// FE-6:计划页(定时任务配置)与任务页(运行记录)分开。?job= 高亮并滚到该定时任务;#auto / #checks 定位到节。

export const meta = () => [{ title: "计划 · UHD 媒体自动化控制台" }];

export default function SchedulesPage() {
  const qc = useQueryClient();
  const [params] = useSearchParams();
  return (
    <>
      <PageHeader
        title="计划"
        description="定时任务的开关、间隔和下次运行。每次运行的结果在任务页。"
        actions={
          <Button
            variant="outline"
            size="sm"
            onClick={() => {
              qc.invalidateQueries({ queryKey: qk.all("schedules") });
              qc.invalidateQueries({ queryKey: [...agentKeys.all, "list"] });
            }}
          >
            <RotateCw />
            刷新
          </Button>
        }
      />
      <PlanBoard highlightJob={params.get("job") ?? undefined} />
    </>
  );
}