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 { consolePath } from "~/components/console/nav.ts";
import { PageHeader } from "~/components/console/page-header.tsx";
import { DownloadDetail } from "~/components/downloads/download-detail.tsx";
import { Button } from "~/components/ui/button.tsx";

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

export default function DownloadTaskPage() {
  const { id = "" } = useParams();
  const task = useDownloadTask(id);
  const t = task.data;
  return (
    <>
      <PageHeader
        title={t?.name ?? "下载任务"}
        className="[&_h1]:break-all"
        actions={
          <Button asChild variant="ghost" size="sm">
            <Link to={consolePath("downloads")}>
              <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>
    </>
  );
}