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

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

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

type Props<T> = {
  diff: DiffResult;
  anchors?: LineAnchor<T>[];
  renderAnchor?: (anchor: LineAnchor<T>) => React.ReactNode;
  onLineAction?: (path: string, line: number, side: DiffSide) => void;
};

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?: (path: string, line: number, side: DiffSide) => void;
}) {
  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) =>
            onLineAction?.(fileDiff.name, range.start, range.side === "deletions" ? "LEFT" : "RIGHT"),
        }}
      />
    </div>
  );
}

export function DiffView<T>({ diff, anchors = [], renderAnchor, onLineAction }: Props<T>) {
  const [diffStyle, setDiffStyle] = useState<(typeof DIFF_STYLES)[number]>("split");
  if (!diff.patch.trim()) return <EmptyState title="No changes" />;
  const files = parsePatchFiles(diff.patch).flatMap((patch) => patch.files);
  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>
      )}
      <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>
  );
}