// UX Team Dashboard
import { BaseDashboard } from './BaseDashboard.js';
import { api } from '../core/api.js';

export class UXDashboard extends BaseDashboard {
  constructor(team) {
    super(team);
  }

  renderMetricsBar() {
    return `
      <div class="metrics-bar">
        <div class="metric">
          <div class="metric__label">Consistency</div>
          <div class="metric__value" id="metric-consistency">--%</div>
        </div>
        <div class="metric">
          <div class="metric__label">Violations</div>
          <div class="metric__value" id="metric-violations">--</div>
        </div>
        <div class="metric">
          <div class="metric__label">Patterns</div>
          <div class="metric__value" id="metric-patterns">--</div>
        </div>
        <div class="metric">
          <div class="metric__label">Tokens</div>
          <div class="metric__value" id="metric-tokens">--</div>
        </div>
      </div>
    `;
  }

  renderActionZone() {
    return `
      <main class="action-zone">
        <div class="action-zone__content">
          <h1 class="action-zone__title">Design Consistency</h1>
          <p class="action-zone__subtitle">Validate tokens, analyze patterns, and ensure brand compliance</p>
        </div>
      </main>
    `;
  }

  renderActionDock() {
    return `
      <nav class="action-dock">
        <button class="action-button" data-action="validate-tokens">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
            <polyline points="22 4 12 14.01 9 11.01"/>
          </svg>
          <span class="action-button__label">Validate Tokens</span>
        </button>
        <button class="action-button" data-action="analyze-patterns">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M21 21H3"/>
            <path d="M21 21V9l-9-6-9 6v12"/>
            <path d="M9 21V12h6v9"/>
          </svg>
          <span class="action-button__label">Style Patterns</span>
        </button>
        <button class="action-button" data-action="check-naming">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 2L2 7l10 5 10-5-10-5z"/>
            <path d="M2 17l10 5 10-5"/>
            <path d="M2 12l10 5 10-5"/>
          </svg>
          <span class="action-button__label">Check Naming</span>
        </button>
        <button class="action-button" data-action="export-report">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
            <polyline points="14 2 14 8 20 8"/>
            <line x1="16" y1="13" x2="8" y2="13"/>
            <line x1="16" y1="17" x2="8" y2="17"/>
          </svg>
          <span class="action-button__label">Export Report</span>
        </button>
      </nav>
    `;
  }

  updateMetricsDisplay() {
    const { consistency, violations, patterns, tokens } = this.metrics;

    const consistencyEl = document.getElementById('metric-consistency');
    const violationsEl = document.getElementById('metric-violations');
    const patternsEl = document.getElementById('metric-patterns');
    const tokensEl = document.getElementById('metric-tokens');

    if (consistencyEl) {
      consistencyEl.textContent = `${consistency || 0}%`;
      consistencyEl.classList.toggle('metric__value--success', consistency >= 80);
      consistencyEl.classList.toggle('metric__value--warning', consistency < 80 && consistency >= 60);
    }
    if (violationsEl) {
      violationsEl.textContent = violations || 0;
      violationsEl.classList.toggle('metric__value--warning', violations > 0);
    }
    if (patternsEl) patternsEl.textContent = patterns || 0;
    if (tokensEl) tokensEl.textContent = tokens || 0;
  }

  async handleAction(action) {
    console.log(`[UX Dashboard] Action: ${action}`);

    switch (action) {
      case 'validate-tokens':
        await this.validateTokens();
        break;
      case 'analyze-patterns':
        await this.analyzePatterns();
        break;
      case 'check-naming':
        this.showMessage('Naming Check - Coming soon');
        break;
      case 'export-report':
        this.showMessage('Export Report - Coming soon');
        break;
    }
  }

  async validateTokens() {
    this.showLoading('Validating tokens...');
    try {
      const result = await api.analyzeProject('.');
      const violations = result.issues?.length || 0;
      this.showMessage(`Found ${violations} validation issues`);
      await this.loadMetrics();
    } catch (error) {
      this.showError('Failed to validate tokens');
    }
  }

  async analyzePatterns() {
    this.showLoading('Analyzing patterns...');
    try {
      const result = await api.analyzeProject('.');
      const patterns = result.patterns?.length || 0;
      this.showMessage(`Found ${patterns} style patterns`);
      await this.loadMetrics();
    } catch (error) {
      this.showError('Failed to analyze patterns');
    }
  }

  showLoading(message) {
    const zone = document.querySelector('.action-zone__content');
    if (zone) {
      zone.innerHTML = `
        <div class="loading">
          <div class="loading__spinner"></div>
          <span>${message}</span>
        </div>
      `;
    }
  }

  showMessage(message) {
    const zone = document.querySelector('.action-zone__content');
    if (zone) {
      zone.innerHTML = `
        <h1 class="action-zone__title">${message}</h1>
      `;
    }
  }

  showError(message) {
    const zone = document.querySelector('.action-zone__content');
    if (zone) {
      zone.innerHTML = `
        <h1 class="action-zone__title" style="color: var(--dss-accent-error)">${message}</h1>
      `;
    }
  }
}

export default UXDashboard;
