import { useEffect, useRef, useState } from "react";
import { getPullMergeFix, startPullMergeFix } from "~/fns/mergefix";
import { useAction } from "~/hooks/use-action";
import { Badge, Panel } from "~/components/ui/Primitives";
import { Button } from "~/components/ui/Button";
import { ErrorBanner } from "~/components/ui/Field";
import { cn } from "~/utils/cn";

type MergeFix = Awaited<ReturnType<typeof getPullMergeFix>>;
type PullParams = { owner: string; repo: string; number: number };

const POLL_MS = 4000;
const ACTIVE = new Set(["queued", "running", "applying"]);

const STATUS_COPY = {
  queued: "Queued",
  running: "Analyzing conflicts",
  applying: "Committing fix",
  applied: "Fix committed",
  suggested: "Suggestions 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)}%`;
}

/** Polls the latest run while it is active and reports when it settles. */
function useMergeFix(params: PullParams, initial: MergeFix, onSettled: (fix: MergeFix) => void) {
  const [fix, setFix] = useState(initial);
  const active = fix !== null && ACTIVE.has(fix.status);
  const latest = useRef({ params, onSettled });
  latest.current = { params, onSettled };
  useEffect(() => {
    if (!active) return;
    const timer = setInterval(async () => {
      const next = await getPullMergeFix({ data: latest.current.params }).catch(() => null);
      if (!next) return;
      setFix(next);
      if (!ACTIVE.has(next.status)) latest.current.onSettled(next);
    }, POLL_MS);
    return () => clearInterval(timer);
  }, [active]);
  return [fix, setFix] as const;
}

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, setFix] = useMergeFix(params, initial, (next) => {
    if (next?.status === "applied") onApplied();
  });
  const [picked, setPicked] = useState(new Map<string, string>());
  const busy = fix !== null && ACTIVE.has(fix.status);

  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 && (
          <Button
            size="sm"
            variant="primary"
            pending={start.pending || busy}
            onClick={async () => {
              const result = await start.run({ data: params });
              if (result) setFix(await getPullMergeFix({ data: params }));
            }}
          >
            {fix ? "Run again" : "Fix conflicts with AI"}
          </Button>
        )
      }
    >
      <div className="space-y-3 p-4 text-sm text-gray-400">
        <ErrorBanner message={start.error} />
        {!fix ? (
          <p>
            Generates candidate resolutions per conflict and asks a decision model to rank them. Confident, low-risk
            fixes are committed to the head branch and run through CI; anything else is offered here for review.
          </p>
        ) : (
          <div className="flex flex-wrap items-center gap-2">
            <Badge tone={fix.status === "failed" ? "red" : fix.status === "applied" ? "green" : "accent"}>
              {STATUS_COPY[fix.status]}
            </Badge>
            {fix.commitSha && <code className="font-mono text-xs text-gray-300">{fix.commitSha.slice(0, 7)}</code>}
            {fix.stale && <span className="text-amber-300">The head branch changed since this run.</span>}
            {fix.error && <span className="text-red-300">{fix.error}</span>}
            {fix.requeue && (
              <span className={fix.requeue.status === "gave_up" ? "text-amber-300" : "text-gray-400"}>
                {REQUEUE_COPY[fix.requeue.status]}
                {fix.requeue.error ? `: ${fix.requeue.error}` : ""}
              </span>
            )}
            <span className="ml-auto text-xs text-gray-500">{fix.calls} model call(s)</span>
          </div>
        )}
        {fix?.status === "suggested" &&
          !fix.stale &&
          fix.files.map((file) => (
            <div key={file.path} className="space-y-2 rounded-md border border-gray-800 p-3">
              <div className="flex flex-wrap items-center gap-2">
                <code className="font-mono text-gray-200">{file.path}</code>
                {file.status === "skipped" ? (
                  <Badge tone="amber">{file.reason}</Badge>
                ) : (
                  <>
                    <Badge tone={file.decision.risk.level === "security-sensitive" ? "red" : "neutral"}>
                      risk: {file.decision.risk.level}
                    </Badge>
                    {file.decision.reasons.map((reason) => (
                      <Badge key={reason} tone="amber">
                        {reason}
                      </Badge>
                    ))}
                  </>
                )}
              </div>
              {file.status === "planned" &&
                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-gray-500">Conflict {index + 1}</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
                                  ? "border-accent-500 bg-accent-950 text-accent-200"
                                  : "border-gray-700 text-gray-300 hover:border-gray-500",
                              )}
                            >
                              {candidate.label}{" "}
                              <span className="font-mono text-gray-500">
                                {percent(hunk.probabilities[candidate.id])}
                              </span>
                              {hunk.selected === candidate.id && <span className="ml-1 text-accent-300">(top)</span>}
                            </button>
                          ))}
                      </div>
                    </div>
                  ))}
            </div>
          ))}
      </div>
    </Panel>
  );
}