import type { FileDiffMetadata } from "@pierre/diffs";
import { FileDiff } from "@pierre/diffs/react";
import { useMemo, useState } from "react";
import { parseIncidentPrPatchFiles, visibleIncidentPrDiffFiles } from "./incident-pr-diff-model.ts";

const DIFF_OPTIONS = {
  theme: "pierre-dark",
  themeType: "dark",
  diffStyle: "unified",
  overflow: "wrap",
  hunkSeparators: "line-info-basic",
  diffIndicators: "bars",
} as const;

export default function IncidentPrDiffView({
  patch,
  patchKey,
}: {
  patch: string;
  patchKey: string;
}) {
  const [selectedFileName, setSelectedFileName] = useState<string | null>(null);
  const files = useMemo(() => parseIncidentPrPatchFiles(patch), [patch]);
  const visibleFiles = visibleIncidentPrDiffFiles(files, selectedFileName);

  return (
    <div className="grid min-h-[520px] grid-cols-[190px_minmax(0,1fr)] overflow-hidden rounded-md border border-border bg-surface">
      <FileTree files={files} selectedFileName={selectedFileName} onSelect={setSelectedFileName} />
      <div className="min-w-0 overflow-auto bg-[#0d0d0f]">
        {visibleFiles.length > 0 ? (
          <div className="space-y-4">
            {visibleFiles.map((file) => (
              <FileDiff
                key={`${patchKey}:${file.name}`}
                fileDiff={file}
                options={DIFF_OPTIONS}
                disableWorkerPool
              />
            ))}
          </div>
        ) : (
          <div className="p-4 text-[12px] text-muted">Diff could not be parsed.</div>
        )}
      </div>
    </div>
  );
}

function FileTree({
  files,
  selectedFileName,
  onSelect,
}: {
  files: FileDiffMetadata[];
  selectedFileName: string | null;
  onSelect: (name: string | null) => void;
}) {
  return (
    <aside className="border-r border-border bg-bg/80">
      <button
        type="button"
        onClick={() => onSelect(null)}
        className={`flex h-9 w-full items-center justify-between border-b border-border px-3 text-left text-[12px] ${
          selectedFileName === null ? "bg-surface-2 text-fg" : "text-muted hover:text-fg"
        }`}
      >
        <span>All files</span>
        <span className="font-mono text-[11px] text-subtle">{files.length}</span>
      </button>
      <div className="max-h-[480px] overflow-y-auto py-1">
        {files.length === 0 ? (
          <p className="px-3 py-2 text-[12px] text-muted">No file list</p>
        ) : (
          files.map((file) => (
            <button
              key={file.name}
              type="button"
              onClick={() => onSelect(file.name)}
              className={`block w-full truncate px-3 py-1.5 text-left font-mono text-[11px] ${
                selectedFileName === file.name
                  ? "bg-surface-2 text-fg"
                  : "text-muted hover:bg-surface hover:text-fg"
              }`}
              title={file.name}
            >
              {file.name}
            </button>
          ))
        )}
      </div>
    </aside>
  );
}