import { SELECTED_SURFACE } from "~/ui/tones";
import { useState } from "react";
import { startPullMergeFix } from "~/fns/mergefix";
import { MERGE_FIX_ACTIVE, useMergeFix, type MergeFix, type PullParams } from "~/hooks/use-merge-fix";
import { useAction } from "~/hooks/use-action";
import { MergeFixProposal } from "~/components/MergeFixProposal";
import { Badge } from "~/ui/Badge";
import { Panel } from "~/ui/Panel";
import { Button } from "~/ui/Button";
import { ErrorBanner } from "~/ui/Callout";
import { cn } from "~/utils/cn";

const STATUS_COPY = {
  queued: "Queued",
  running: "Analyzing conflicts",
  applying: "Committing fix",
  applied: "Fix committed",
  suggested: "Proposal ready",
  failed: "Failed",
} as const;

const REQUEUE_COPY = {
  waiting: "Rejoins the merge queue once CI passes",
  enqueued: "Back in the merge queue",
  gave_up: "Not re-queued",
} as const;

function percent(value: number | undefined): string {
  return `${Math.round((value ?? 0) * 100)}%`;
}

export function MergeFixPanel({
  params,
  initial,
  canStart,
  onPick,
  onApplied,
}: {
  params: PullParams;
  initial: MergeFix;
  canStart: boolean;
  onPick: (path: string, hunk: number, text: string) => void;
  onApplied: () => void;
}) {
  const start = useAction(startPullMergeFix, { invalidate: false });
  const { fix, refresh } = useMergeFix(params, initial, (next) => {
    if (next?.status === "applied") onApplied();
  });
  const [picked, setPicked] = useState(new Map<string, string>());
  const busy = fix !== null && MERGE_FIX_ACTIVE.has(fix.status);
  const startRun = async (mode: "propose" | "auto") => {
    const result = await start.run({ data: { ...params, mode } });
    if (result) await refresh();
  };

  const pick = (path: string, hunk: number, id: string, text: string) => {
    setPicked(new Map(picked).set(`${path}#${hunk}`, id));
    onPick(path, hunk, text);
  };

  return (
    <Panel
      title="Fix conflicts with AI"
      actions={
        canStart && (
          <div className="flex flex-wrap gap-2">
            <Button size="sm" variant="primary" pending={start.pending || busy} onClick={() => startRun("propose")}>
              {fix ? "Propose again" : "Propose a fix with AI"}
            </Button>
            <Button size="sm" disabled={start.pending || busy} onClick={() => startRun("auto")}>
              Resolve automatically (one-shot)
            </Button>
          </div>
        )
      }
    >
      <div className="space-y-3 p-4 text-sm text-kumo-subtle">
        <ErrorBanner message={start.error} />
        {!fix ? (
          <p>
            Generates candidate resolutions per conflict and asks a decision model to rank them. You get a proposal with
            per-file diffs, risk and reasoning to accept or reject before anything is pushed. The one-shot option
            commits confident, low-risk fixes directly and still falls back to a proposal for anything else.
          </p>
        ) : (
          <div className="flex flex-wrap items-center gap-2">
            <Badge tone={fix.status === "failed" ? "danger" : fix.status === "applied" ? "merged" : "warning"}>
              {STATUS_COPY[fix.status]}
            </Badge>
            {fix.commitSha && <code className="font-mono text-xs text-kumo-default">{fix.commitSha.slice(0, 7)}</code>}
            {fix.stale && (
              <span className="text-kumo-warning">
                The head or base branch changed since this run; propose again to get a fresh fix.
              </span>
            )}
            {fix.error && <span className="text-kumo-danger">{fix.error}</span>}
            {fix.requeue && (
              <span className={fix.requeue.status === "gave_up" ? "text-kumo-warning" : "text-kumo-subtle"}>
                {REQUEUE_COPY[fix.requeue.status]}
                {fix.requeue.error ? `: ${fix.requeue.error}` : ""}
              </span>
            )}
            <span className="ml-auto text-xs text-kumo-subtle">{fix.calls} model call(s)</span>
          </div>
        )}
        {fix?.status === "suggested" && !fix.stale && (
          <MergeFixProposal
            params={params}
            fix={fix}
            canApply={canStart}
            onApplied={onApplied}
            renderHunks={(file) =>
              file.hunks
                .map((hunk, index) => ({ hunk, index, key: `${file.path}#${index}` }))
                .map(({ hunk, index, key }) => (
                  <div key={key} className="space-y-1">
                    <div className="text-xs text-kumo-subtle">
                      Conflict {index + 1}: pick a candidate to edit by hand
                    </div>
                    <div className="flex flex-wrap gap-2">
                      {[...hunk.candidates]
                        .sort((left, right) => (hunk.probabilities[right.id] ?? 0) - (hunk.probabilities[left.id] ?? 0))
                        .map((candidate) => (
                          <button
                            key={candidate.id}
                            type="button"
                            title={candidate.text}
                            onClick={() => pick(file.path, index, candidate.id, candidate.text)}
                            className={cn(
                              "rounded-md border px-2 py-1 text-left text-xs",
                              picked.get(`${file.path}#${index}`) === candidate.id
                                ? SELECTED_SURFACE
                                : "border-kumo-line text-kumo-default hover:border-kumo-interact",
                            )}
                          >
                            {candidate.label}{" "}
                            <span className="font-mono text-kumo-subtle">
                              {percent(hunk.probabilities[candidate.id])}
                            </span>
                            {hunk.selected === candidate.id && <span className="ml-1 text-accent-300">(top)</span>}
                          </button>
                        ))}
                    </div>
                  </div>
                ))
            }
          />
        )}
      </div>
    </Panel>
  );
}