import { ClientOnly } from "@tanstack/react-router";
import { parsePatchFiles } from "@pierre/diffs";
import type { DiffLineAnnotation, FileDiffMetadata, SelectedLineRange } from "@pierre/diffs";
import { FileDiff } from "@pierre/diffs/react";
import { useState } from "react";
import { Button } from "./ui/Button";
import { EmptyState } from "./ui/Primitives";
import { ImageDiff, isImagePath } from "./rich/ImageDiff";
import type { ImageSources } from "./rich/ImageDiff";
import type { DiffResult } from "~/lib/types";

export type DiffSide = "LEFT" | "RIGHT";

export type LineAnchor<T> = { path: string; line: number; side: DiffSide; data: T };

/** First line of a multi-line selection; the anchor line is its last line. */
export type RangeStart = { line: number; side: DiffSide };

type LineAction = (path: string, line: number, side: DiffSide, start?: RangeStart) => void;

function selectionAction(path: string, range: SelectedLineRange, onLineAction: LineAction) {
  const startSide: DiffSide = range.side === "deletions" ? "LEFT" : "RIGHT";
  const endSide: DiffSide = (range.endSide ?? range.side) === "deletions" ? "LEFT" : "RIGHT";
  if (startSide !== endSide || range.start === range.end) {
    onLineAction(path, range.end, endSide);
    return;
  }
  const [first, last] = range.start < range.end ? [range.start, range.end] : [range.end, range.start];
  onLineAction(path, last, endSide, { line: first, side: startSide });
}

type Props<T> = {
  diff: DiffResult;
  anchors?: LineAnchor<T>[];
  renderAnchor?: (anchor: LineAnchor<T>) => React.ReactNode;
  onLineAction?: LineAction;
  images?: ImageSources;
};

const DIFF_STYLES = ["split", "unified"] as const;

function toAnnotationSide(side: DiffSide): "additions" | "deletions" {
  return side === "RIGHT" ? "additions" : "deletions";
}

function FileBlock<T>({
  fileDiff,
  diffStyle,
  anchors,
  renderAnchor,
  onLineAction,
}: {
  fileDiff: FileDiffMetadata;
  diffStyle: (typeof DIFF_STYLES)[number];
  anchors: LineAnchor<T>[];
  renderAnchor?: (anchor: LineAnchor<T>) => React.ReactNode;
  onLineAction?: LineAction;
}) {
  const annotations: DiffLineAnnotation<LineAnchor<T>>[] = anchors.map((anchor) => ({
    side: toAnnotationSide(anchor.side),
    lineNumber: anchor.line,
    metadata: anchor,
  }));
  return (
    <div id={`diff-${fileDiff.name}`} className="overflow-hidden rounded-lg border border-gray-800">
      <FileDiff<LineAnchor<T>>
        fileDiff={fileDiff}
        lineAnnotations={annotations}
        renderAnnotation={(annotation) => (renderAnchor ? renderAnchor(annotation.metadata) : null)}
        options={{
          theme: "pierre-dark",
          diffStyle,
          diffIndicators: "bars",
          hunkSeparators: "line-info",
          overflow: "scroll",
          enableGutterUtility: Boolean(onLineAction),
          onGutterUtilityClick: (range) => {
            if (onLineAction) selectionAction(fileDiff.name, range, onLineAction);
          },
        }}
      />
    </div>
  );
}

export function DiffView<T>({ diff, anchors = [], renderAnchor, onLineAction, images }: Props<T>) {
  const [diffStyle, setDiffStyle] = useState<(typeof DIFF_STYLES)[number]>("split");
  if (!diff.patch.trim()) return <EmptyState title="No changes" />;
  const imageFiles = images ? diff.files.filter((file) => file.binary && isImagePath(file.path)) : [];
  const imagePaths = new Set(imageFiles.map((file) => file.path));
  const files = parsePatchFiles(diff.patch)
    .flatMap((patch) => patch.files)
    .filter((fileDiff) => !imagePaths.has(fileDiff.name));
  const truncatedFiles = diff.files.filter((file) => file.truncated);

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-center gap-3 text-xs text-gray-500">
        <span>
          {diff.files.length} file{diff.files.length === 1 ? "" : "s"} changed
        </span>
        <span className="text-emerald-400">+{diff.additions}</span>
        <span className="text-red-400">−{diff.deletions}</span>
        <Button
          size="sm"
          variant="ghost"
          className="ml-auto"
          onClick={() => setDiffStyle((value) => (value === "split" ? "unified" : "split"))}
        >
          {diffStyle === "split" ? "Unified view" : "Split view"}
        </Button>
      </div>
      {truncatedFiles.length > 0 && (
        <p className="rounded-md border border-amber-900 bg-amber-950/30 px-3 py-2 text-xs text-amber-300">
          {truncatedFiles.length} large file(s) are not rendered:{" "}
          {truncatedFiles
            .slice(0, 5)
            .map((file) => file.path)
            .join(", ")}
        </p>
      )}
      {images &&
        imageFiles.map((file) => (
          <ImageDiff
            key={file.path}
            path={file.path}
            before={file.status === "added" || !images.base ? null : `${images.base}/${file.oldPath ?? file.path}`}
            after={file.status === "deleted" ? null : `${images.head}/${file.path}`}
          />
        ))}
      <ClientOnly fallback={<p className="text-sm text-gray-500">Rendering diff…</p>}>
        {files.map((fileDiff) => (
          <FileBlock
            key={`${fileDiff.prevName ?? ""}:${fileDiff.name}`}
            fileDiff={fileDiff}
            diffStyle={diffStyle}
            anchors={anchors.filter((anchor) => anchor.path === fileDiff.name)}
            renderAnchor={renderAnchor}
            onLineAction={onLineAction}
          />
        ))}
      </ClientOnly>
    </div>
  );
}