import { useState } from "react";
import { mergePull, recheckMergeability, updatePull } from "~/fns/pulls";
import { useAction } from "~/hooks/use-action";
import { StatusList } from "./StatusList";
import { MergeAutomation } from "./MergeAutomation";
import { StackMergeControls } from "./StackMergeControls";
import { Badge } from "~/ui/Badge";
import { Panel } from "~/ui/Panel";
import { StatusDot } from "~/ui/StatusDot";
import { Button } from "~/ui/Button";
import { CheckboxField, SelectField, TextAreaField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import type { usePull } from "~/hooks/use-pull";
import { useViewer } from "~/hooks/use-viewer";

type PullData = ReturnType<typeof usePull>;

const METHODS = [
  { value: "merge", label: "Create a merge commit" },
  { value: "squash", label: "Squash and merge" },
  { value: "rebase", label: "Rebase and merge" },
] as const;

/** The browser's UTC offset as git's `+HHMM`, so rebased commits carry the merger's local timezone. */
function browserTimezone(): string {
  const offset = -new Date().getTimezoneOffset();
  const absolute = Math.abs(offset);
  const hours = String(Math.floor(absolute / 60)).padStart(2, "0");
  const minutes = String(absolute % 60).padStart(2, "0");
  return `${offset < 0 ? "-" : "+"}${hours}${minutes}`;
}

export function MergeBox({ owner, repo, data }: { owner: string; repo: string; data: PullData }) {
  const viewer = useViewer();
  const { pull, gate, checks, checksState } = data;
  const [method, setMethod] = useState<(typeof METHODS)[number]["value"]>("merge");
  const merge = useAction(mergePull);
  const recheck = useAction(recheckMergeability);
  const ready = useAction(updatePull);
  const number = pull.number;

  if (pull.merged) {
    return (
      <Panel>
        <div className="flex items-center gap-3 p-4 text-sm">
          <Badge tone="merged">Merged</Badge>
          <span className="text-kumo-default">
            {pull.mergedBy?.name ?? "Someone"} merged commit{" "}
            <code className="font-mono text-accent-300">{pull.mergeCommitSha?.slice(0, 7)}</code> into {pull.baseRef}.
          </span>
        </div>
      </Panel>
    );
  }
  if (data.conversation.issue.state === "closed") return null;

  const mergeState = pull.mergeable === "clean" ? "success" : pull.mergeable === "conflict" ? "failure" : "pending";

  return (
    <Panel>
      {checks.length > 0 && (
        <div className="border-b border-kumo-hairline">
          <div className="flex items-center gap-2 px-4 pt-3 text-sm font-medium text-kumo-default">
            <StatusDot state={checksState} /> Checks
          </div>
          <StatusList checks={checks} />
        </div>
      )}
      <div className="space-y-3 p-4">
        <div className="flex items-center gap-2 text-sm">
          <StatusDot state={mergeState} />
          <span className="text-kumo-default">
            {pull.mergeable === "clean"
              ? "No conflicts with the base branch"
              : pull.mergeable === "conflict"
                ? "This branch has conflicts"
                : "Checking mergeability…"}
          </span>
          {pull.behindBy > 0 && <span className="text-xs text-kumo-subtle">({pull.behindBy} commits behind)</span>}
          {viewer && (
            <Button
              size="sm"
              variant="ghost"
              className="ml-auto"
              pending={recheck.pending}
              onClick={() => recheck.run({ data: { owner, repo, number } })}
            >
              Re-check
            </Button>
          )}
        </div>
        {gate.blockers.length > 0 && (
          <ul className="space-y-1 text-sm text-kumo-warning">
            {gate.blockers.map((blocker) => (
              <li key={blocker}>• {blocker}</li>
            ))}
          </ul>
        )}
        {gate.bypassed.length > 0 && (
          <p className="text-xs text-kumo-subtle">
            As an administrator you can merge without: {gate.bypassed.join("; ")}
          </p>
        )}
        <ErrorBanner message={merge.error ?? ready.error} />
        {pull.draft && data.canPushHead ? (
          <Button
            variant="primary"
            pending={ready.pending}
            onClick={() => ready.run({ data: { owner, repo, number, draft: false } })}
          >
            Ready for review
          </Button>
        ) : data.stackedOn ? (
          <div className="space-y-3">
            {data.canMerge && (
              <SelectField
                label="Merge method"
                value={method}
                options={METHODS}
                onValueChange={(value) => setMethod(METHODS.find((item) => item.value === value)?.value ?? "merge")}
              />
            )}
            <StackMergeControls owner={owner} repo={repo} data={data} method={method} />
          </div>
        ) : (
          data.canMerge && (
            <form
              className="space-y-3"
              onSubmit={(event) => {
                event.preventDefault();
                const form = new FormData(event.currentTarget);
                merge.run({
                  data: {
                    owner,
                    repo,
                    number,
                    method,
                    message: String(form.get("message") ?? ""),
                    deleteBranch: form.get("deleteBranch") === "on",
                    expectedHead: pull.headSha,
                    timezone: browserTimezone(),
                  },
                });
              }}
            >
              <SelectField
                label="Merge method"
                value={method}
                options={METHODS}
                onValueChange={(value) => setMethod(METHODS.find((item) => item.value === value)?.value ?? "merge")}
              />
              <TextAreaField
                label="Commit message"
                name="message"
                rows={2}
                placeholder="Leave blank for the default message"
              />
              <CheckboxField label="Delete head branch after merging" name="deleteBranch" />
              <Button type="submit" variant="primary" disabled={!gate.allowed} pending={merge.pending}>
                {METHODS.find((item) => item.value === method)?.label}
              </Button>
            </form>
          )
        )}
        <MergeAutomation owner={owner} repo={repo} data={data} method={method} />
      </div>
    </Panel>
  );
}