webui/src/web-components/sketch-diff2-view.ts

import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import "./sketch-monaco-view";
import "./sketch-diff-range-picker";
import "./sketch-diff-file-picker";
import "./sketch-diff-empty-view";
import {
  GitDiffFile,
  GitDataService,
  DefaultGitDataService,
} from "./git-data-service";
import { DiffRange } from "./sketch-diff-range-picker";

/**
 * A component that displays diffs using Monaco editor with range and file pickers
 */
@customElement("sketch-diff2-view")
export class SketchDiff2View extends LitElement {
  /**
   * Handles comment events from the Monaco editor and forwards them to the chat input
   * using the same event format as the original diff view for consistency.
   */
  private handleMonacoComment(event: CustomEvent) {
    try {
      // Validate incoming data
      if (!event.detail || !event.detail.formattedComment) {
        console.error("Invalid comment data received");
        return;
      }

      // Create and dispatch event using the standardized format
      const commentEvent = new CustomEvent("diff-comment", {
        detail: { comment: event.detail.formattedComment },
        bubbles: true,
        composed: true,
      });

      this.dispatchEvent(commentEvent);
    } catch (error) {
      console.error("Error handling Monaco comment:", error);
    }
  }

  /**
   * Handle save events from the Monaco editor
   */
  private async handleMonacoSave(event: CustomEvent) {
    try {
      // Validate incoming data
      if (
        !event.detail ||
        !event.detail.path ||
        event.detail.content === undefined
      ) {
        console.error("Invalid save data received");
        return;
      }

      const { path, content } = event.detail;

      // Get Monaco view component
      const monacoView = this.shadowRoot?.querySelector("sketch-monaco-view");
      if (!monacoView) {
        console.error("Monaco view not found");
        return;
      }

      try {
        await this.gitService?.saveFileContent(path, content);
        console.log(`File saved: ${path}`);
        (monacoView as any).notifySaveComplete(true);
      } catch (error) {
        console.error(
          `Error saving file: ${error instanceof Error ? error.message : String(error)}`,
        );
        (monacoView as any).notifySaveComplete(false);
      }
    } catch (error) {
      console.error("Error handling save:", error);
    }
  }
  @property({ type: String })
  initialCommit: string = "";

  // The commit to show - used when showing a specific commit from timeline
  @property({ type: String })
  commit: string = "";

  @property({ type: String })
  selectedFilePath: string = "";

  @state()
  private files: GitDiffFile[] = [];

  @state()
  private currentRange: DiffRange = { type: "range", from: "", to: "HEAD" };

  @state()
  private originalCode: string = "";

  @state()
  private modifiedCode: string = "";

  @state()
  private isRightEditable: boolean = false;

  @state()
  private loading: boolean = false;

  @state()
  private error: string | null = null;

  static styles = css`
    :host {
      display: flex;
      height: 100%;
      flex: 1;
      flex-direction: column;
      min-height: 0; /* Critical for flex child behavior */
      overflow: hidden;
      position: relative; /* Establish positioning context */
    }

    .controls {
      padding: 8px 16px;
      border-bottom: 1px solid var(--border-color, #e0e0e0);
      background-color: var(--background-light, #f8f8f8);
      flex-shrink: 0; /* Prevent controls from shrinking */
    }

    .controls-container {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .range-row {
      width: 100%;
      display: flex;
    }

    .file-row {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }

    sketch-diff-range-picker {
      width: 100%;
    }

    sketch-diff-file-picker {
      flex: 1;
    }

    .view-toggle-button {
      background-color: #f0f0f0;
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 8px;
      font-size: 16px;
      cursor: pointer;
      white-space: nowrap;
      transition: background-color 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 36px;
      min-height: 36px;
    }

    .view-toggle-button:hover {
      background-color: #e0e0e0;
    }

    .diff-container {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 0; /* Critical for flex child to respect parent height */
      position: relative; /* Establish positioning context */
      height: 100%; /* Take full height */
    }

    .diff-content {
      flex: 1;
      overflow: hidden;
      min-height: 0; /* Required for proper flex behavior */
      display: flex; /* Required for child to take full height */
      position: relative; /* Establish positioning context */
      height: 100%; /* Take full height */
    }

    .loading,
    .empty-diff {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      font-family: var(--font-family, system-ui, sans-serif);
    }

    .empty-diff {
      color: var(--text-secondary-color, #666);
      font-size: 16px;
      text-align: center;
    }

    .error {
      color: var(--error-color, #dc3545);
      padding: 16px;
      font-family: var(--font-family, system-ui, sans-serif);
    }

    sketch-monaco-view {
      --editor-width: 100%;
      --editor-height: 100%;
      flex: 1; /* Make Monaco view take full height */
      display: flex; /* Required for child to take full height */
      position: absolute; /* Absolute positioning to take full space */
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      height: 100%; /* Take full height */
      width: 100%; /* Take full width */
    }
  `;

  @property({ attribute: false, type: Object })
  gitService!: GitDataService;

  // The gitService must be passed from parent to ensure proper dependency injection

  constructor() {
    super();
    console.log("SketchDiff2View initialized");

    // Fix for monaco-aria-container positioning
    // Add a global style to ensure proper positioning of aria containers
    const styleElement = document.createElement("style");
    styleElement.textContent = `
      .monaco-aria-container {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(1px, 1px, 1px, 1px) !important;
        white-space: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        z-index: -1 !important;
      }
    `;
    document.head.appendChild(styleElement);
  }

  connectedCallback() {
    super.connectedCallback();
    // Initialize with default range and load data
    // Get base commit if not set
    if (
      this.currentRange.type === "range" &&
      !("from" in this.currentRange && this.currentRange.from)
    ) {
      this.gitService
        .getBaseCommitRef()
        .then((baseRef) => {
          this.currentRange = { type: "range", from: baseRef, to: "HEAD" };
          this.loadDiffData();
        })
        .catch((error) => {
          console.error("Error getting base commit ref:", error);
          // Use default range
          this.loadDiffData();
        });
    } else {
      this.loadDiffData();
    }
  }

  // Toggle hideUnchangedRegions setting
  @state()
  private hideUnchangedRegionsEnabled: boolean = true;

  // Toggle hideUnchangedRegions setting
  private toggleHideUnchangedRegions() {
    this.hideUnchangedRegionsEnabled = !this.hideUnchangedRegionsEnabled;

    // Get the Monaco view component
    const monacoView = this.shadowRoot?.querySelector("sketch-monaco-view");
    if (monacoView) {
      (monacoView as any).toggleHideUnchangedRegions(
        this.hideUnchangedRegionsEnabled,
      );
    }
  }

  render() {
    return html`
      <div class="controls">
        <div class="controls-container">
          <div class="range-row">
            <sketch-diff-range-picker
              .gitService="${this.gitService}"
              @range-change="${this.handleRangeChange}"
            ></sketch-diff-range-picker>
          </div>

          <div class="file-row">
            <sketch-diff-file-picker
              .files="${this.files}"
              .selectedPath="${this.selectedFilePath}"
              @file-selected="${this.handleFileSelected}"
            ></sketch-diff-file-picker>

            <div style="display: flex; gap: 8px;">
              <button
                class="view-toggle-button"
                @click="${this.toggleHideUnchangedRegions}"
                title="${this.hideUnchangedRegionsEnabled
                  ? "Expand All: Show all lines including unchanged regions"
                  : "Collapse Expanded Lines: Hide unchanged regions to focus on changes"}"
              >
                ${this.hideUnchangedRegionsEnabled
                  ? this.renderExpandAllIcon()
                  : this.renderCollapseIcon()}
              </button>
            </div>
          </div>
        </div>
      </div>

      <div class="diff-container">
        <div class="diff-content">${this.renderDiffContent()}</div>
      </div>
    `;
  }

  renderDiffContent() {
    if (this.loading) {
      return html`<div class="loading">Loading diff...</div>`;
    }

    if (this.error) {
      return html`<div class="error">${this.error}</div>`;
    }

    if (this.files.length === 0) {
      return html`<sketch-diff-empty-view></sketch-diff-empty-view>`;
    }

    if (!this.selectedFilePath) {
      return html`<div class="loading">Select a file to view diff</div>`;
    }

    return html`
      <sketch-monaco-view
        .originalCode="${this.originalCode}"
        .modifiedCode="${this.modifiedCode}"
        .originalFilename="${this.selectedFilePath}"
        .modifiedFilename="${this.selectedFilePath}"
        ?readOnly="${!this.isRightEditable}"
        ?editable-right="${this.isRightEditable}"
        @monaco-comment="${this.handleMonacoComment}"
        @monaco-save="${this.handleMonacoSave}"
      ></sketch-monaco-view>
    `;
  }

  /**
   * Load diff data for the current range
   */
  async loadDiffData() {
    this.loading = true;
    this.error = null;

    try {
      // Initialize files as empty array if undefined
      if (!this.files) {
        this.files = [];
      }

      // Load diff data based on the current range type
      if (this.currentRange.type === "single") {
        this.files = await this.gitService.getCommitDiff(
          this.currentRange.commit,
        );
      } else {
        this.files = await this.gitService.getDiff(
          this.currentRange.from,
          this.currentRange.to,
        );
      }

      // Ensure files is always an array, even when API returns null
      if (!this.files) {
        this.files = [];
      }

      // If we have files, select the first one and load its content
      if (this.files.length > 0) {
        const firstFile = this.files[0];
        this.selectedFilePath = firstFile.path;

        // Directly load the file content, especially important when there's only one file
        // as sometimes the file-selected event might not fire in that case
        this.loadFileContent(firstFile);
      } else {
        // No files to display - reset the view to initial state
        this.selectedFilePath = "";
        this.originalCode = "";
        this.modifiedCode = "";
      }
    } catch (error) {
      console.error("Error loading diff data:", error);
      this.error = `Error loading diff data: ${error.message}`;
      // Ensure files is an empty array when an error occurs
      this.files = [];
      // Reset the view to initial state
      this.selectedFilePath = "";
      this.originalCode = "";
      this.modifiedCode = "";
    } finally {
      this.loading = false;
    }
  }

  /**
   * Load the content of the selected file
   */
  async loadFileContent(file: GitDiffFile) {
    this.loading = true;
    this.error = null;

    try {
      let fromCommit: string;
      let toCommit: string;
      let isUnstagedChanges = false;

      // Determine the commits to compare based on the current range
      if (this.currentRange.type === "single") {
        fromCommit = `${this.currentRange.commit}^`;
        toCommit = this.currentRange.commit;
      } else {
        fromCommit = this.currentRange.from;
        toCommit = this.currentRange.to;
        // Check if this is an unstaged changes view
        isUnstagedChanges = toCommit === "";
      }

      // Set editability based on whether we're showing uncommitted changes
      this.isRightEditable = isUnstagedChanges;

      // Load the original code based on file status
      if (file.status === "A") {
        // Added file: empty original
        this.originalCode = "";
      } else {
        // For modified, renamed, or deleted files: load original content
        this.originalCode = await this.gitService.getFileContent(
          file.old_hash || "",
        );
      }

      // For modified code, always use working copy when editable
      if (this.isRightEditable) {
        try {
          // Always use working copy when editable, regardless of diff status
          // This ensures we have the latest content even if the diff hasn't been refreshed
          this.modifiedCode = await this.gitService.getWorkingCopyContent(
            file.path,
          );
        } catch (error) {
          if (file.status === "D") {
            // For deleted files, silently use empty content
            console.warn(
              `Could not get working copy for deleted file ${file.path}, using empty content`,
            );
            this.modifiedCode = "";
          } else {
            // For any other file status, propagate the error
            console.error(
              `Failed to get working copy for ${file.path}:`,
              error,
            );
            throw error; // Rethrow to be caught by the outer try/catch
          }
        }
      } else {
        // For non-editable view, use git content based on file status
        if (file.status === "D") {
          // Deleted file: empty modified
          this.modifiedCode = "";
        } else {
          // Added/modified/renamed: use the content from git
          this.modifiedCode = await this.gitService.getFileContent(
            file.new_hash || "",
          );
        }
      }

      // Don't make deleted files editable
      if (file.status === "D") {
        this.isRightEditable = false;
      }
    } catch (error) {
      console.error("Error loading file content:", error);
      this.error = `Error loading file content: ${error.message}`;
      this.isRightEditable = false;
    } finally {
      this.loading = false;
    }
  }

  /**
   * Handle range change event from the range picker
   */
  handleRangeChange(event: CustomEvent) {
    const { range } = event.detail;
    console.log("Range changed:", range);
    this.currentRange = range;

    // Load diff data for the new range
    this.loadDiffData();
  }

  /**
   * Handle file selection event from the file picker
   */
  handleFileSelected(event: CustomEvent) {
    const file = event.detail.file as GitDiffFile;
    this.selectedFilePath = file.path;
    this.loadFileContent(file);
  }

  /**
   * Render expand all icon (dotted line with arrows pointing away)
   */
  renderExpandAllIcon() {
    return html`
      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
        <!-- Dotted line in the middle -->
        <line
          x1="2"
          y1="8"
          x2="14"
          y2="8"
          stroke="currentColor"
          stroke-width="1"
          stroke-dasharray="2,1"
        />
        <!-- Large arrow pointing up -->
        <path d="M8 2 L5 6 L11 6 Z" fill="currentColor" />
        <!-- Large arrow pointing down -->
        <path d="M8 14 L5 10 L11 10 Z" fill="currentColor" />
      </svg>
    `;
  }

  /**
   * Render collapse icon (arrows pointing towards dotted line)
   */
  renderCollapseIcon() {
    return html`
      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
        <!-- Dotted line in the middle -->
        <line
          x1="2"
          y1="8"
          x2="14"
          y2="8"
          stroke="currentColor"
          stroke-width="1"
          stroke-dasharray="2,1"
        />
        <!-- Large arrow pointing down towards line -->
        <path d="M8 6 L5 2 L11 2 Z" fill="currentColor" />
        <!-- Large arrow pointing up towards line -->
        <path d="M8 10 L5 14 L11 14 Z" fill="currentColor" />
      </svg>
    `;
  }

  /**
   * Refresh the diff view by reloading commits and diff data
   *
   * This is called when the Monaco diff tab is activated to ensure:
   * 1. Branch information from git/recentlog is current (branches can change frequently)
   * 2. The diff content is synchronized with the latest repository state
   * 3. Users always see up-to-date information without manual refresh
   */
  refreshDiffView() {
    // First refresh the range picker to get updated branch information
    const rangePicker = this.shadowRoot?.querySelector(
      "sketch-diff-range-picker",
    );
    if (rangePicker) {
      (rangePicker as any).loadCommits();
    }

    if (this.commit) {
      this.currentRange = { type: "single", commit: this.commit };
    }

    // Then reload diff data based on the current range
    this.loadDiffData();
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "sketch-diff2-view": SketchDiff2View;
  }
}