import { Link } from "@tanstack/react-router";
import { setAutoMerge, setMergeQueue, updatePullBranch } from "~/fns/pull-review";
import { useAction } from "~/hooks/use-action";
import { Badge } from "~/ui/Badge";
import { Button } from "~/ui/Button";
import { ErrorBanner } from "~/ui/Callout";
import type { usePull } from "~/hooks/use-pull";

type PullData = ReturnType<typeof usePull>;
type Props = {
  owner: string;
  repo: string;
  data: PullData;
  method: "merge" | "squash" | "rebase";
};

/** Update-branch, conflict resolution, auto-merge and merge-queue controls that sit in the merge box. */
export function MergeAutomation({ owner, repo, data, method }: Props) {
  const { pull } = data;
  const number = pull.number;
  const update = useAction(updatePullBranch);
  const auto = useAction(setAutoMerge);
  const queue = useAction(setMergeQueue);
  const conflicted = pull.mergeable === "conflict";

  return (
    <div className="space-y-3 border-t border-kumo-hairline pt-3">
      <ErrorBanner message={update.error ?? auto.error ?? queue.error} />
      {data.canPushHead && (data.canUpdateBranch || conflicted) && (
        <div className="flex flex-wrap items-center gap-2 text-sm">
          <span className="text-kumo-subtle">
            {conflicted
              ? "Merging the base branch into this branch has conflicts."
              : `This branch is ${pull.behindBy} commit${pull.behindBy === 1 ? "" : "s"} behind ${pull.baseRef}.`}
          </span>
          <span className="ml-auto flex gap-2">
            {conflicted && (
              <Link
                to="/$owner/$repo/pull/$number/conflicts"
                params={{ owner, repo, number: String(number) }}
                className="rounded-md border border-kumo-line px-2.5 py-1 text-xs text-kumo-default hover:border-accent-500"
              >
                Resolve conflicts
              </Link>
            )}
            {!conflicted && (
              <Button size="sm" pending={update.pending} onClick={() => update.run({ data: { owner, repo, number } })}>
                Update branch
              </Button>
            )}
          </span>
        </div>
      )}
      {data.canMerge && (
        <div className="flex flex-wrap items-center gap-2 text-sm">
          {data.autoMerge ? (
            <>
              <Badge tone="merged">Auto-merge enabled</Badge>
              <span className="text-xs text-kumo-subtle">
                by {data.autoMerge.enabledBy.name} ({data.autoMerge.method}); merges once requirements pass
              </span>
              <Button
                size="sm"
                variant="ghost"
                className="ml-auto"
                pending={auto.pending}
                onClick={() =>
                  auto.run({
                    data: {
                      owner,
                      repo,
                      number,
                      enabled: false,
                      expectedHead: pull.headSha,
                    },
                  })
                }
              >
                Disable auto-merge
              </Button>
            </>
          ) : (
            !data.gate.allowed && (
              <Button
                size="sm"
                pending={auto.pending}
                onClick={() =>
                  auto.run({
                    data: {
                      owner,
                      repo,
                      number,
                      enabled: true,
                      method,
                      expectedHead: pull.headSha,
                    },
                  })
                }
              >
                Enable auto-merge
              </Button>
            )
          )}
          {data.queue ? (
            <>
              <Badge tone="neutral">
                Queued #{data.queue.position}
                {data.queue.state === "testing" ? " · testing" : ""}
              </Badge>
              <Button
                size="sm"
                variant="ghost"
                pending={queue.pending}
                onClick={() =>
                  queue.run({
                    data: {
                      owner,
                      repo,
                      number,
                      queued: false,
                      expectedHead: pull.headSha,
                    },
                  })
                }
              >
                Remove from queue
              </Button>
            </>
          ) : (
            method !== "rebase" &&
            !pull.draft && (
              <Button
                size="sm"
                variant="ghost"
                pending={queue.pending}
                onClick={() =>
                  queue.run({
                    data: {
                      owner,
                      repo,
                      number,
                      queued: true,
                      method,
                      expectedHead: pull.headSha,
                    },
                  })
                }
              >
                Merge when ready (queue)
              </Button>
            )
          )}
        </div>
      )}
    </div>
  );
}