dss/admin-ui/js/components/tools/ds-figma-live-compare.js

/**
 * ds-figma-live-compare.js
 * Side-by-side Figma and Live Application comparison for QA validation
 * QA Team Tool #1
 */

import { createComparisonView, setupComparisonHandlers } from '../../utils/tool-templates.js';
import { ComponentHelpers } from '../../utils/component-helpers.js';
import contextStore from '../../stores/context-store.js';
import apiClient from '../../services/api-client.js';

class DSFigmaLiveCompare extends HTMLElement {
  constructor() {
    super();
    this.figmaUrl = '';
    this.liveUrl = '';
  }

  async connectedCallback() {
    await this.loadProjectConfig();
    this.render();
    this.setupEventListeners();
  }

  async loadProjectConfig() {
    try {
      const context = contextStore.getMCPContext();
      if (!context.project_id) {
        throw new Error('No project selected');
      }

      const project = await apiClient.getProject(context.project_id);
      this.figmaUrl = project.figma_qa_file || project.figma_ui_file || '';
      this.liveUrl = project.live_url || window.location.origin;
    } catch (error) {
      console.error('[DSFigmaLiveCompare] Failed to load project config:', error);
    }
  }

  setupEventListeners() {
    const figmaInput = this.querySelector('#figma-url-input');
    const liveInput = this.querySelector('#live-url-input');
    const loadBtn = this.querySelector('#load-comparison-btn');
    const screenshotBtn = this.querySelector('#take-screenshot-btn');

    if (figmaInput) {
      figmaInput.value = this.figmaUrl;
    }

    if (liveInput) {
      liveInput.value = this.liveUrl;
    }

    if (loadBtn) {
      loadBtn.addEventListener('click', () => this.loadComparison());
    }

    if (screenshotBtn) {
      screenshotBtn.addEventListener('click', () => this.takeScreenshots());
    }

    const comparisonContainer = this.querySelector('#comparison-container');
    if (comparisonContainer) {
      setupComparisonHandlers(comparisonContainer, {});
    }
  }

  loadComparison() {
    const figmaInput = this.querySelector('#figma-url-input');
    const liveInput = this.querySelector('#live-url-input');

    this.figmaUrl = figmaInput?.value || '';
    this.liveUrl = liveInput?.value || '';

    if (!this.figmaUrl || !this.liveUrl) {
      ComponentHelpers.showToast?.('Please enter both Figma and Live URLs', 'error');
      return;
    }

    try {
      new URL(this.figmaUrl);
      new URL(this.liveUrl);
    } catch (error) {
      ComponentHelpers.showToast?.('Invalid URL format', 'error');
      return;
    }

    const comparisonContainer = this.querySelector('#comparison-container');
    if (comparisonContainer) {
      comparisonContainer.innerHTML = createComparisonView({
        leftTitle: 'Figma Design',
        rightTitle: 'Live Application',
        leftSrc: this.figmaUrl,
        rightSrc: this.liveUrl
      });

      setupComparisonHandlers(comparisonContainer, {});
      ComponentHelpers.showToast?.('Comparison loaded', 'success');
    }
  }

  async takeScreenshots() {
    ComponentHelpers.showToast?.('Taking screenshots...', 'info');

    try {
      // Take screenshot of live application via MCP (using authenticated API client)
      const context = contextStore.getMCPContext();
      await apiClient.request('POST', '/qa/screenshot-compare', {
        projectId: context.project_id,
        figmaUrl: this.figmaUrl,
        liveUrl: this.liveUrl
      });

      ComponentHelpers.showToast?.('Screenshots saved to gallery', 'success');

      // Switch to screenshot gallery
      const panel = document.querySelector('ds-panel');
      if (panel) {
        panel.switchTab('screenshots');
      }
    } catch (error) {
      console.error('[DSFigmaLiveCompare] Screenshot failed:', error);
      ComponentHelpers.showToast?.(`Screenshot failed: ${error.message}`, 'error');
    }
  }

  render() {
    this.innerHTML = `
      <div style="display: flex; flex-direction: column; height: 100%;">
        <!-- Configuration Panel -->
        <div style="padding: 16px; border-bottom: 1px solid var(--vscode-border); background: var(--vscode-sidebar);">
          <h3 style="font-size: 12px; font-weight: 600; margin-bottom: 12px;">Figma vs Live QA Comparison</h3>

          <div style="display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 12px; align-items: end;">
            <div>
              <label style="display: block; font-size: 11px; font-weight: 600; margin-bottom: 4px; color: var(--vscode-text-dim);">
                Figma Design URL
              </label>
              <input
                type="url"
                id="figma-url-input"
                placeholder="https://figma.com/file/..."
                class="input"
                style="width: 100%; font-size: 11px;"
              />
            </div>

            <div>
              <label style="display: block; font-size: 11px; font-weight: 600; margin-bottom: 4px; color: var(--vscode-text-dim);">
                Live Component URL
              </label>
              <input
                type="url"
                id="live-url-input"
                placeholder="https://app.example.com/..."
                class="input"
                style="width: 100%; font-size: 11px;"
              />
            </div>

            <button id="load-comparison-btn" class="button" style="font-size: 11px; padding: 6px 16px;">
              🔍 Load
            </button>

            <button id="take-screenshot-btn" class="button" style="font-size: 11px; padding: 6px 16px;">
              📸 Screenshot
            </button>
          </div>

          <div style="margin-top: 8px; font-size: 10px; color: var(--vscode-text-dim);">
            💡 Compare design specifications with live implementation for QA validation
          </div>
        </div>

        <!-- Comparison View -->
        <div id="comparison-container" style="flex: 1; overflow: hidden;">
          ${this.figmaUrl && this.liveUrl ? createComparisonView({
            leftTitle: 'Figma Design',
            rightTitle: 'Live Application',
            leftSrc: this.figmaUrl,
            rightSrc: this.liveUrl
          }) : `
            <div style="display: flex; align-items: center; justify-content: center; height: 100%; text-align: center; padding: 48px;">
              <div>
                <div style="font-size: 48px; margin-bottom: 16px;">✅</div>
                <h3 style="font-size: 14px; font-weight: 600; margin-bottom: 8px;">QA Comparison Tool</h3>
                <p style="font-size: 12px; color: var(--vscode-text-dim);">
                  Enter Figma design and live application URLs to validate implementation against specifications
                </p>
              </div>
            </div>
          `}
        </div>
      </div>
    `;
  }
}

customElements.define('ds-figma-live-compare', DSFigmaLiveCompare);

export default DSFigmaLiveCompare;