import { useState } from "react";
import type { ReactNode } from "react";
import { applyPullMergeFix } from "~/fns/mergefix";
import type { MergeFix, PullParams } from "~/hooks/use-merge-fix";
import { useAction } from "~/hooks/use-action";
import { Badge } from "~/ui/Badge";
import { Button } from "~/ui/Button";
import { ErrorBanner } from "~/ui/Callout";
import { cn } from "~/utils/cn";

type FixFile = NonNullable<MergeFix>["files"][number];

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

function DiffView({ diff }: { diff: string }) {
  return (
    <pre className="max-h-80 overflow-auto rounded-md border border-gray-800 bg-gray-950 p-2 font-mono text-xs leading-5">
      {diff.split("\n").map((line, index) => (
        <div
          // oxlint-disable-next-line no-array-index-key -- diff lines have no identity beyond position
          key={index}
          className={cn(
            line.startsWith("+") && !line.startsWith("+++") && "bg-success-950 text-success-300",
            line.startsWith("-") && !line.startsWith("---") && "bg-danger-950 text-danger-300",
            line.startsWith("@@") && "text-accent-300",
            !/^[-+@]/.test(line) && "text-gray-400",
          )}
        >
          {line || " "}
        </div>
      ))}
    </pre>
  );
}

function Reasoning({ file }: { file: Extract<FixFile, { status: "planned" }> }) {
  const confidences = file.hunks.map((hunk) => (hunk.selected ? (hunk.probabilities[hunk.selected] ?? 0) : 0));
  return (
    <div className="flex flex-wrap items-center gap-2 text-xs">
      <Badge tone={file.decision.risk.level === "security-sensitive" ? "danger" : "neutral"}>
        risk: {file.decision.risk.level}
      </Badge>
      <span className="text-gray-500">needs a human: {percent(file.decision.needsHuman)}</span>
      <span className="text-gray-500">
        confidence per conflict: {confidences.map((value) => percent(value)).join(", ") || "n/a"}
      </span>
      {file.decision.reasons.length === 0 ? (
        <Badge tone="success">No concerns raised</Badge>
      ) : (
        file.decision.reasons.map((reason) => (
          <Badge key={reason} tone="warning">
            {reason}
          </Badge>
        ))
      )}
    </div>
  );
}

/** A reviewable proposal: per-file diff, reasoning and risk, with accept/reject per file before anything is pushed. */
export function MergeFixProposal({
  params,
  fix,
  canApply,
  onApplied,
  renderHunks,
}: {
  params: PullParams;
  fix: NonNullable<MergeFix>;
  canApply: boolean;
  onApplied: () => void;
  renderHunks: (file: Extract<FixFile, { status: "planned" }>) => ReactNode;
}) {
  const apply = useAction(applyPullMergeFix, { invalidate: false });
  const applicable = fix.files.flatMap((file) =>
    file.status === "planned" && file.resolution !== null ? [file.path] : [],
  );
  const [rejected, setRejected] = useState(new Set<string>());
  const accepted = applicable.filter((path) => !rejected.has(path));
  const toggle = (path: string) => {
    const next = new Set(rejected);
    if (next.has(path)) next.delete(path);
    else next.add(path);
    setRejected(next);
  };

  return (
    <div className="space-y-3">
      <ErrorBanner message={apply.error} />
      {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">
            {file.status === "planned" && file.resolution !== null && (
              <label className="flex items-center gap-1 text-xs text-gray-300">
                <input
                  type="checkbox"
                  checked={!rejected.has(file.path)}
                  disabled={!canApply}
                  onChange={() => toggle(file.path)}
                  aria-label={`Accept the proposed resolution for ${file.path}`}
                />
                Accept
              </label>
            )}
            <code className="font-mono text-gray-200">{file.path}</code>
            {file.status === "skipped" && <Badge tone="warning">{file.reason}</Badge>}
            {file.status === "planned" && file.resolution === null && (
              <Badge tone="warning">No clean resolution; resolve by hand</Badge>
            )}
          </div>
          {file.status === "planned" && (
            <>
              <Reasoning file={file} />
              {file.diff && <DiffView diff={file.diff} />}
              {renderHunks(file)}
            </>
          )}
        </div>
      ))}
      {canApply && applicable.length > 0 && (
        <div className="flex flex-wrap items-center gap-2">
          <Button
            size="sm"
            variant="primary"
            disabled={accepted.length === 0}
            pending={apply.pending}
            onClick={async () => {
              const result = await apply.run({ data: { ...params, files: accepted } });
              if (result) onApplied();
            }}
          >
            Apply selected ({accepted.length})
          </Button>
          {accepted.length < fix.files.length && (
            <span className="text-xs text-gray-500">
              Every conflicted file needs a resolution; edit the rest below before committing.
            </span>
          )}
        </div>
      )}
    </div>
  );
}