path: root/makima/frontend/src/components/mesh/OverlayDiffViewer.tsx

import { useState, useMemo } from "react";

interface DiffLine {
  type: "add" | "remove" | "context" | "header" | "hunk";
  content: string;
  oldLineNumber?: number;
  newLineNumber?: number;
}

interface DiffFile {
  path: string;
  status: "added" | "modified" | "deleted" | "renamed";
  oldPath?: string; // For renames
  additions: number;
  deletions: number;
  lines: DiffLine[];
}

interface OverlayDiffViewerProps {
  diff: string;
  changedFiles?: string[];
  loading?: boolean;
  error?: string;
  onClose?: () => void;
  title?: string;
}

function parseDiff(diffText: string): DiffFile[] {
  if (!diffText.trim()) return [];

  const files: DiffFile[] = [];
  const lines = diffText.split("\n");

  let currentFile: DiffFile | null = null;
  let oldLineNum = 0;
  let newLineNum = 0;

  for (let i = 0; i < lines.length; i++) {
    const line = lines[i];

    // File header (diff --git a/path b/path)
    if (line.startsWith("diff --git")) {
      if (currentFile) {
        files.push(currentFile);
      }

      // Extract paths
      const match = line.match(/diff --git a\/(.+) b\/(.+)/);
      const oldPath = match?.[1] || "";
      const newPath = match?.[2] || oldPath;

      currentFile = {
        path: newPath,
        oldPath: oldPath !== newPath ? oldPath : undefined,
        status: "modified",
        additions: 0,
        deletions: 0,
        lines: [],
      };
      continue;
    }

    if (!currentFile) continue;

    // New file indicator
    if (line.startsWith("new file mode")) {
      currentFile.status = "added";
      continue;
    }

    // Deleted file indicator
    if (line.startsWith("deleted file mode")) {
      currentFile.status = "deleted";
      continue;
    }

    // Rename indicator
    if (line.startsWith("rename from") || line.startsWith("rename to")) {
      currentFile.status = "renamed";
      continue;
    }

    // Hunk header (@@ -1,3 +1,4 @@)
    if (line.startsWith("@@")) {
      const hunkMatch = line.match(/@@ -(\d+),?\d* \+(\d+),?\d* @@/);
      if (hunkMatch) {
        oldLineNum = parseInt(hunkMatch[1], 10);
        newLineNum = parseInt(hunkMatch[2], 10);
      }
      currentFile.lines.push({
        type: "hunk",
        content: line,
      });
      continue;
    }

    // Skip other headers (---, +++, index, etc.)
    if (
      line.startsWith("---") ||
      line.startsWith("+++") ||
      line.startsWith("index ") ||
      line.startsWith("Binary files")
    ) {
      currentFile.lines.push({
        type: "header",
        content: line,
      });
      continue;
    }

    // Diff content
    if (line.startsWith("+")) {
      currentFile.additions++;
      currentFile.lines.push({
        type: "add",
        content: line.substring(1),
        newLineNumber: newLineNum++,
      });
    } else if (line.startsWith("-")) {
      currentFile.deletions++;
      currentFile.lines.push({
        type: "remove",
        content: line.substring(1),
        oldLineNumber: oldLineNum++,
      });
    } else if (line.startsWith(" ") || line === "") {
      currentFile.lines.push({
        type: "context",
        content: line.substring(1) || "",
        oldLineNumber: oldLineNum++,
        newLineNumber: newLineNum++,
      });
    }
  }

  if (currentFile) {
    files.push(currentFile);
  }

  return files;
}

function DiffFileView({ file, collapsed, onToggle }: { file: DiffFile; collapsed: boolean; onToggle: () => void }) {
  const statusColors: Record<DiffFile["status"], string> = {
    added: "text-green-400 bg-green-400/10",
    modified: "text-yellow-400 bg-yellow-400/10",
    deleted: "text-red-400 bg-red-400/10",
    renamed: "text-purple-400 bg-purple-400/10",
  };

  const statusLabels: Record<DiffFile["status"], string> = {
    added: "A",
    modified: "M",
    deleted: "D",
    renamed: "R",
  };

  return (
    <div className="border border-[rgba(117,170,252,0.2)] mb-2">
      {/* File header */}
      <button
        onClick={onToggle}
        className="w-full flex items-center gap-2 px-3 py-2 bg-[rgba(0,0,0,0.2)] hover:bg-[rgba(0,0,0,0.3)] transition-colors text-left"
      >
        <span className="font-mono text-[10px] text-[#555]">
          {collapsed ? "▶" : "▼"}
        </span>
        <span
          className={`px-1.5 py-0.5 font-mono text-[9px] font-bold ${statusColors[file.status]}`}
        >
          {statusLabels[file.status]}
        </span>
        <span className="font-mono text-sm text-[#dbe7ff] flex-1 truncate">
          {file.oldPath ? (
            <>
              <span className="text-[#555]">{file.oldPath}</span>
              <span className="text-[#75aafc] mx-1">→</span>
              {file.path}
            </>
          ) : (
            file.path
          )}
        </span>
        <span className="font-mono text-[10px]">
          {file.additions > 0 && (
            <span className="text-green-400 mr-2">+{file.additions}</span>
          )}
          {file.deletions > 0 && (
            <span className="text-red-400">-{file.deletions}</span>
          )}
        </span>
      </button>

      {/* File content */}
      {!collapsed && (
        <div className="overflow-x-auto">
          <table className="w-full font-mono text-xs">
            <tbody>
              {file.lines.map((line, i) => {
                if (line.type === "header" || line.type === "hunk") {
                  return (
                    <tr
                      key={i}
                      className="bg-[rgba(117,170,252,0.05)]"
                    >
                      <td
                        colSpan={3}
                        className="px-2 py-0.5 text-[#75aafc] select-none"
                      >
                        {line.content}
                      </td>
                    </tr>
                  );
                }

                const bgColor =
                  line.type === "add"
                    ? "bg-green-400/10"
                    : line.type === "remove"
                    ? "bg-red-400/10"
                    : "";

                const textColor =
                  line.type === "add"
                    ? "text-green-400"
                    : line.type === "remove"
                    ? "text-red-400"
                    : "text-[#9bc3ff]";

                const prefix =
                  line.type === "add"
                    ? "+"
                    : line.type === "remove"
                    ? "-"
                    : " ";

                return (
                  <tr key={i} className={bgColor}>
                    {/* Old line number */}
                    <td className="w-10 px-2 py-0 text-right text-[#555] select-none border-r border-[rgba(117,170,252,0.1)]">
                      {line.type !== "add" ? line.oldLineNumber : ""}
                    </td>
                    {/* New line number */}
                    <td className="w-10 px-2 py-0 text-right text-[#555] select-none border-r border-[rgba(117,170,252,0.1)]">
                      {line.type !== "remove" ? line.newLineNumber : ""}
                    </td>
                    {/* Content */}
                    <td className={`px-2 py-0 whitespace-pre ${textColor}`}>
                      <span className="select-none mr-1 text-[#555]">
                        {prefix}
                      </span>
                      {line.content}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

export function OverlayDiffViewer({
  diff,
  changedFiles,
  loading,
  error,
  onClose,
  title = "Overlay Changes",
}: OverlayDiffViewerProps) {
  const [collapsedFiles, setCollapsedFiles] = useState<Set<string>>(new Set());
  const [showFullDiff, setShowFullDiff] = useState(true);

  const parsedFiles = useMemo(() => parseDiff(diff), [diff]);

  const toggleFile = (path: string) => {
    setCollapsedFiles((prev) => {
      const next = new Set(prev);
      if (next.has(path)) {
        next.delete(path);
      } else {
        next.add(path);
      }
      return next;
    });
  };

  const expandAll = () => setCollapsedFiles(new Set());
  const collapseAll = () => setCollapsedFiles(new Set(parsedFiles.map((f) => f.path)));

  // Calculate totals
  const totals = useMemo(() => {
    return parsedFiles.reduce(
      (acc, file) => ({
        additions: acc.additions + file.additions,
        deletions: acc.deletions + file.deletions,
        files: acc.files + 1,
      }),
      { additions: 0, deletions: 0, files: 0 }
    );
  }, [parsedFiles]);

  if (loading) {
    return (
      <div className="panel p-4">
        <div className="flex items-center justify-center h-32">
          <div className="font-mono text-sm text-[#75aafc]">
            Loading diff...
          </div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="panel p-4">
        <div className="flex items-center justify-between mb-3">
          <div className="font-mono text-xs text-[#9bc3ff] tracking-wide uppercase">
            {title}
          </div>
          {onClose && (
            <button
              onClick={onClose}
              className="font-mono text-xs text-[#555] hover:text-[#9bc3ff]"
            >
              Close
            </button>
          )}
        </div>
        <div className="bg-red-400/10 border border-red-400/30 p-3 font-mono text-sm text-red-400">
          {error}
        </div>
      </div>
    );
  }

  if (!diff.trim() && (!changedFiles || changedFiles.length === 0)) {
    return (
      <div className="panel p-4">
        <div className="flex items-center justify-between mb-3">
          <div className="font-mono text-xs text-[#9bc3ff] tracking-wide uppercase">
            {title}
          </div>
          {onClose && (
            <button
              onClick={onClose}
              className="font-mono text-xs text-[#555] hover:text-[#9bc3ff]"
            >
              Close
            </button>
          )}
        </div>
        <div className="text-center py-8 font-mono text-sm text-[#555]">
          No changes detected in overlay
        </div>
      </div>
    );
  }

  return (
    <div className="panel flex flex-col max-h-[600px]">
      {/* Header */}
      <div className="flex items-center justify-between p-3 border-b border-[rgba(117,170,252,0.2)] shrink-0">
        <div className="flex items-center gap-4">
          <div className="font-mono text-xs text-[#9bc3ff] tracking-wide uppercase">
            {title}
          </div>
          <div className="font-mono text-[10px] text-[#75aafc]">
            {totals.files} file{totals.files !== 1 ? "s" : ""} changed
            {totals.additions > 0 && (
              <span className="text-green-400 ml-2">+{totals.additions}</span>
            )}
            {totals.deletions > 0 && (
              <span className="text-red-400 ml-2">-{totals.deletions}</span>
            )}
          </div>
        </div>
        <div className="flex items-center gap-2">
          <button
            onClick={expandAll}
            className="font-mono text-[10px] text-[#555] hover:text-[#9bc3ff]"
          >
            Expand All
          </button>
          <button
            onClick={collapseAll}
            className="font-mono text-[10px] text-[#555] hover:text-[#9bc3ff]"
          >
            Collapse All
          </button>
          <button
            onClick={() => setShowFullDiff(!showFullDiff)}
            className="font-mono text-[10px] text-[#555] hover:text-[#9bc3ff]"
          >
            {showFullDiff ? "File List" : "Full Diff"}
          </button>
          {onClose && (
            <button
              onClick={onClose}
              className="font-mono text-xs text-[#555] hover:text-[#9bc3ff] ml-2"
            >
              Close
            </button>
          )}
        </div>
      </div>

      {/* Content */}
      <div className="flex-1 overflow-y-auto p-3">
        {showFullDiff ? (
          // Full diff view
          parsedFiles.length > 0 ? (
            parsedFiles.map((file) => (
              <DiffFileView
                key={file.path}
                file={file}
                collapsed={collapsedFiles.has(file.path)}
                onToggle={() => toggleFile(file.path)}
              />
            ))
          ) : (
            // Fallback to raw diff
            <pre className="font-mono text-xs text-[#9bc3ff] whitespace-pre-wrap">
              {diff}
            </pre>
          )
        ) : (
          // File list view
          <div className="space-y-1">
            {(changedFiles || parsedFiles.map((f) => f.path)).map((path) => {
              const file = parsedFiles.find((f) => f.path === path);
              return (
                <div
                  key={path}
                  className="flex items-center gap-2 px-2 py-1 hover:bg-[rgba(117,170,252,0.05)]"
                >
                  {file && (
                    <span
                      className={`px-1 py-0.5 font-mono text-[9px] ${
                        file.status === "added"
                          ? "text-green-400 bg-green-400/10"
                          : file.status === "deleted"
                          ? "text-red-400 bg-red-400/10"
                          : file.status === "renamed"
                          ? "text-purple-400 bg-purple-400/10"
                          : "text-yellow-400 bg-yellow-400/10"
                      }`}
                    >
                      {file.status.charAt(0).toUpperCase()}
                    </span>
                  )}
                  <span className="font-mono text-sm text-[#dbe7ff] flex-1 truncate">
                    {path}
                  </span>
                  {file && (
                    <span className="font-mono text-[10px]">
                      {file.additions > 0 && (
                        <span className="text-green-400 mr-1">+{file.additions}</span>
                      )}
                      {file.deletions > 0 && (
                        <span className="text-red-400">-{file.deletions}</span>
                      )}
                    </span>
                  )}
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}