"use client";
import { useEffect, useRef, useState } from "react";
import { parsePatchFiles } from "@pierre/diffs";
import type { FileDiff as FileDiffRenderer, FileDiffMetadata } from "@pierre/diffs";

export type CommitDiffViewProps = {
  patch: string;
};

export function CommitDiffView({ patch }: CommitDiffViewProps) {
  const [diffStyle, setDiffStyle] = useState<"split" | "unified">("split");

  if (!patch) {
    return <p className="text-gray-500">No changes in this commit.</p>;
  }

  const parsed = parsePatchFiles(patch);
  const files = parsed.flatMap((p) => p.files);

  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2">
        <span className="text-xs text-gray-500">
          {files.length} file{files.length !== 1 ? "s" : ""} changed
        </span>
        <button
          type="button"
          onClick={() => setDiffStyle((s) => (s === "split" ? "unified" : "split"))}
          className="rounded border border-gray-700 px-2 py-0.5 text-xs text-gray-400 hover:border-gray-500 hover:text-gray-200"
        >
          {diffStyle === "split" ? "Unified" : "Split"}
        </button>
      </div>
      {files.map((fileDiff) => (
        <DiffFileRenderer
          key={`${fileDiff.type}:${fileDiff.prevName ?? ""}:${fileDiff.name}`}
          fileDiff={fileDiff}
          diffStyle={diffStyle}
        />
      ))}
    </div>
  );
}

function DiffFileRenderer({ fileDiff, diffStyle }: { fileDiff: FileDiffMetadata; diffStyle: "split" | "unified" }) {
  const containerRef = useRef<HTMLDivElement>(null);
  const instanceRef = useRef<FileDiffRenderer | null>(null);

  useEffect(() => {
    let mounted = true;

    async function render() {
      const { FileDiff } = await import("@pierre/diffs");

      if (!mounted || !containerRef.current) return;

      if (instanceRef.current) {
        instanceRef.current.cleanUp();
      }

      const instance = new FileDiff({
        theme: "pierre-dark",
        diffStyle,
        diffIndicators: "bars",
        hunkSeparators: "line-info",
        overflow: "scroll",
      });

      instance.render({
        fileDiff,
        containerWrapper: containerRef.current,
      });

      instanceRef.current = instance;
    }

    render();

    return () => {
      mounted = false;
      if (instanceRef.current) {
        instanceRef.current.cleanUp();
        instanceRef.current = null;
      }
    };
  }, [fileDiff, diffStyle]);

  return (
    <div className="overflow-hidden rounded-lg border border-gray-800">
      <div ref={containerRef} />
    </div>
  );
}