import { useNavigate } from "@tanstack/react-router";
import { deleteFailedRepo } from "~/fns/repos";
import { useAction } from "~/hooks/use-action";
import { usePollWhile } from "~/hooks/use-poll-while";
import { Button } from "~/ui/Button";
import { ErrorBanner } from "~/ui/Callout";
import { formatDuration } from "~/lib/format";
import type { RepoSummary } from "~/lib/types";
import { Callout } from "~/ui/Callout";
import { Heading } from "~/ui/Heading";
import { ProgressTrack } from "~/ui/ProgressTrack";
import { Panel } from "~/ui/Panel";

const POLL_INTERVAL_MS = 4000;

type Props = {
  owner: string;
  name: string;
  status: RepoSummary["status"];
  error: string | null;
  createdAt: number;
  canAdmin: boolean;
};

/**
 * Artifacts reports no byte-level progress for imports or forks, so this shows an indeterminate bar
 * with elapsed time and refreshes until the provisioning Workflow marks the repo ready or failed.
 */
export function RepoProvisioning({ owner, name, status, error, createdAt, canAdmin }: Props) {
  const pending = status === "importing" || status === "forking";
  const now = usePollWhile(pending, POLL_INTERVAL_MS);
  const navigate = useNavigate();
  const remove = useAction(deleteFailedRepo, { invalidate: false });

  if (!pending) {
    return (
      <Callout role="alert" tone="danger" className="space-y-3 rounded-lg p-6">
        <h2 className="text-lg font-semibold text-danger-200">This repository could not be set up</h2>
        <p className="text-sm text-danger-300/80">
          {error ? `Artifacts reported: ${error}.` : "Artifacts did not finish copying the repository."}
        </p>
        <ErrorBanner message={remove.error} />
        {canAdmin && (
          <Button
            variant="danger"
            size="sm"
            pending={remove.pending}
            onClick={async () => {
              const result = await remove.run({ data: { owner, repo: name } });
              if (!result) return;
              await navigate({
                to: "/new",
                search: result.importSourceUrl ? { import: result.importSourceUrl, name: result.name } : {},
              });
            }}
          >
            Delete and try again
          </Button>
        )}
      </Callout>
    );
  }

  const verb = status === "importing" ? "Importing" : "Forking";
  return (
    <Panel padding="xl" className="space-y-4">
      <div className="flex items-baseline justify-between gap-4">
        <Heading level={2} size="md">
          {verb} {owner}/{name}…
        </Heading>
        <span className="font-mono text-xs text-kumo-subtle" suppressHydrationWarning>
          {formatDuration(createdAt, now)}
        </span>
      </div>
      <progress aria-label={`${verb} repository`} className="sr-only" />
      <ProgressTrack />
      <p className="text-sm text-kumo-subtle">
        Cloudflare Artifacts is copying objects. You can leave this page — the{" "}
        {status === "importing" ? "import" : "fork"} keeps running and the repository opens here once it's ready.
      </p>
    </Panel>
  );
}