import { ArrowLeft } from "lucide-react";
import { Link, useParams } from "react-router";
import { useDownloadTask } from "~/api/downloads.ts";
import { ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
import { PageHeader } from "~/components/console/page-header.tsx";
import { DownloadDetail } from "~/components/downloads/download-detail.tsx";
import { Button } from "~/components/ui/button.tsx";

export default function DownloadTaskPage() {
  const { id = "" } = useParams();
  const task = useDownloadTask(id);
  return (
    <>
      <PageHeader
        title={task.data?.name ?? "下载任务"}
        description="下载 → 整理 → 核验的业务时间线与子任务"
        className="[&_h1]:break-all"
        actions={
          <Button asChild variant="ghost" size="sm">
            <Link to="/console/tasks">
              <ArrowLeft />
              下载与任务
            </Link>
          </Button>
        }
      />
      <div className="pg-slab rounded-xl p-4 md:p-5">
        {task.isPending ? (
          <LoadingState rows={5} />
        ) : task.error ? (
          <ErrorState plain error={task.error} onRetry={() => void task.refetch()} />
        ) : (
          <DownloadDetail task={task.data} />
        )}
      </div>
    </>
  );
}