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

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

  renderMetricsBar() {
    return `
      <div class="metrics-bar">
        <div class="metric">
          <div class="metric__label">Components</div>
          <div class="metric__value" id="metric-components">--</div>
        </div>
        <div class="metric">
          <div class="metric__label">Tokens</div>
          <div class="metric__value" id="metric-tokens">--</div>
        </div>
        <div class="metric">
          <div class="metric__label">Figma Sync</div>
          <div class="metric__value" id="metric-synced">--</div>
        </div>
        <div class="metric">
          <div class="metric__label">Stories</div>
          <div class="metric__value" id="metric-stories">--</div>
        </div>
      </div>
    `;
  }

  renderActionZone() {
    return `
      <main class="action-zone">
        <div class="action-zone__content">
          <h1 class="action-zone__title">Component Library</h1>
          <p class="action-zone__subtitle">Manage tokens, components, and Figma synchronization</p>
        </div>
      </main>
    `;
  }

  renderActionDock() {
    return `
      <nav class="action-dock">
        <button class="action-button" data-action="extract-tokens">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="10"/>
            <circle cx="12" cy="12" r="4"/>
          </svg>
          <span class="action-button__label">Extract Tokens</span>
        </button>
        <button class="action-button" data-action="sync-figma">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z"/>
            <path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z"/>
            <path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z"/>
            <path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z"/>
            <path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z"/>
          </svg>
          <span class="action-button__label">Sync Figma</span>
        </button>
        <button class="action-button" data-action="generate-code">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="16 18 22 12 16 6"/>
            <polyline points="8 6 2 12 8 18"/>
          </svg>
          <span class="action-button__label">Generate Code</span>
        </button>
        <button class="action-button" data-action="storybook">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
            <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
          </svg>
          <span class="action-button__label">Storybook</span>
        </button>
      </nav>
    `;
  }

  updateMetricsDisplay() {
    const { components, tokens, synced, stories } = this.metrics;

    const componentsEl = document.getElementById('metric-components');
    const tokensEl = document.getElementById('metric-tokens');
    const syncedEl = document.getElementById('metric-synced');
    const storiesEl = document.getElementById('metric-stories');

    if (componentsEl) componentsEl.textContent = components || 0;
    if (tokensEl) tokensEl.textContent = tokens || 0;
    if (syncedEl) {
      syncedEl.textContent = synced ? 'OK' : '--';
      syncedEl.classList.toggle('metric__value--success', synced);
    }
    if (storiesEl) storiesEl.textContent = stories || 0;
  }

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

    switch (action) {
      case 'extract-tokens':
        await this.extractTokens();
        break;
      case 'sync-figma':
        await this.syncFigma();
        break;
      case 'generate-code':
        this.showMessage('Generate Code - Coming soon');
        break;
      case 'storybook':
        window.open('http://localhost:6006', '_blank');
        break;
    }
  }

  async extractTokens() {
    this.showLoading('Extracting tokens...');
    try {
      const result = await api.extractTokens('.', ['css', 'scss']);
      this.showMessage(`Extracted ${result.tokens?.length || 0} tokens`);
      await this.loadMetrics();
    } catch (error) {
      this.showError('Failed to extract tokens');
    }
  }

  async syncFigma() {
    const fileKey = prompt('Enter Figma file key:');
    if (!fileKey) return;

    this.showLoading('Syncing with Figma...');
    try {
      const result = await api.syncFigma(fileKey);
      this.showMessage('Figma sync complete');
      await this.loadMetrics();
    } catch (error) {
      this.showError('Failed to sync Figma');
    }
  }

  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 UIDashboard;
