import { useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import { transferRepo } from "~/fns/profile";
import { transferableOwners } from "~/fns/repos";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/ui/Button";
import { SelectField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { Panel } from "~/ui/Panel";

export function TransferRepoPanel({ owner, repo }: { owner: string; repo: string }) {
  const navigate = useNavigate();
  const transfer = useAction(transferRepo, { invalidate: false });
  const [targets, setTargets] = useState<string[] | null>(null);

  return (
    <Panel tone="danger" title="Transfer ownership">
      <div className="space-y-3 p-5 text-sm">
        <ErrorBanner message={transfer.error} />
        <p className="text-kumo-subtle">
          Move this repository to another account you can create repositories in. Old URLs and git remotes redirect.
        </p>
        {targets === null ? (
          <Button onClick={async () => setTargets((await transferableOwners()).filter((name) => name !== owner))}>
            Choose new owner
          </Button>
        ) : targets.length === 0 ? (
          <p className="text-kumo-subtle">There are no other accounts you can transfer to.</p>
        ) : (
          <form
            className="space-y-3"
            onSubmit={async (event) => {
              event.preventDefault();
              const form = new FormData(event.currentTarget);
              const result = await transfer.run({
                data: {
                  owner,
                  repo,
                  newOwner: String(form.get("newOwner") ?? ""),
                  confirm: String(form.get("confirm") ?? ""),
                },
              });
              if (result) {
                await navigate({ to: "/$owner/$repo", params: { owner: result.owner, repo: result.name } });
              }
            }}
          >
            <SelectField
              label="New owner"
              name="newOwner"
              options={targets.map((name) => ({ value: name, label: name }))}
            />
            <TextField label={`Type ${owner}/${repo} to confirm`} name="confirm" required />
            <Button type="submit" variant="danger" pending={transfer.pending}>
              Transfer repository
            </Button>
          </form>
        )}
      </div>
    </Panel>
  );
}