import { Link } from "@tanstack/react-router";
import { usePollWhile } from "~/hooks/use-poll-while";
import { buttonClass } from "./ui/Button";
import { formatDuration } from "./ui/Primitives";
import type { RepoSummary } from "~/lib/types";

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);

  if (!pending) {
    return (
      <div role="alert" className="space-y-3 rounded-lg border border-red-900/70 bg-red-950/30 p-6">
        <h2 className="text-lg font-semibold text-red-200">This repository could not be set up</h2>
        <p className="text-sm text-red-300/80">
          {error ? `Artifacts reported: ${error}.` : "Artifacts did not finish copying the repository."}
        </p>
        {canAdmin && (
          <Link to="/$owner/$repo/settings" params={{ owner, repo: name }} className={buttonClass("danger", "sm")}>
            Delete and try again
          </Link>
        )}
      </div>
    );
  }

  const verb = status === "importing" ? "Importing" : "Forking";
  return (
    <div className="space-y-4 rounded-lg border border-gray-800 bg-gray-950/60 p-8">
      <div className="flex items-baseline justify-between gap-4">
        <h2 className="text-lg font-semibold text-white">
          {verb} {owner}/{name}…
        </h2>
        <span className="font-mono text-xs text-gray-500" suppressHydrationWarning>
          {formatDuration(createdAt, now)}
        </span>
      </div>
      <progress aria-label={`${verb} repository`} className="sr-only" />
      <div aria-hidden className="relative h-1.5 overflow-hidden rounded-full bg-gray-800">
        <div className="animate-indeterminate absolute inset-y-0 w-1/3 rounded-full bg-accent-500" />
      </div>
      <p className="text-sm text-gray-500">
        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>
    </div>
  );
}