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

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

  renderMetricsBar() {
    return `
      <div class="metrics-bar">
        <div class="metric">
          <div class="metric__label">Health Score</div>
          <div class="metric__value" id="metric-health">--%</div>
        </div>
        <div class="metric">
          <div class="metric__label">Quick Wins</div>
          <div class="metric__value" id="metric-quickwins">--</div>
        </div>
        <div class="metric">
          <div class="metric__label">Unused Styles</div>
          <div class="metric__value" id="metric-unused">--</div>
        </div>
        <div class="metric">
          <div class="metric__label">Coverage</div>
          <div class="metric__value" id="metric-coverage">--%</div>
        </div>
      </div>
    `;
  }

  renderActionZone() {
    return `
      <main class="action-zone">
        <div class="action-zone__content">
          <h1 class="action-zone__title">Quality Assurance</h1>
          <p class="action-zone__subtitle">Find issues, validate components, and improve coverage</p>
        </div>
      </main>
    `;
  }

  renderActionDock() {
    return `
      <nav class="action-dock">
        <button class="action-button" data-action="quick-wins">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
          </svg>
          <span class="action-button__label">Quick Wins</span>
        </button>
        <button class="action-button" data-action="find-unused">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="11" cy="11" r="8"/>
            <line x1="21" y1="21" x2="16.65" y2="16.65"/>
            <line x1="8" y1="11" x2="14" y2="11"/>
          </svg>
          <span class="action-button__label">Find Unused</span>
        </button>
        <button class="action-button" data-action="audit-components">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="3" y="3" width="18" height="18" rx="2"/>
            <path d="M3 9h18"/>
            <path d="M9 21V9"/>
          </svg>
          <span class="action-button__label">Audit Components</span>
        </button>
        <button class="action-button" data-action="coverage">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
          </svg>
          <span class="action-button__label">Coverage</span>
        </button>
      </nav>
    `;
  }

  updateMetricsDisplay() {
    const { health, quickWins, unused, coverage } = this.metrics;

    const healthEl = document.getElementById('metric-health');
    const quickWinsEl = document.getElementById('metric-quickwins');
    const unusedEl = document.getElementById('metric-unused');
    const coverageEl = document.getElementById('metric-coverage');

    if (healthEl) {
      healthEl.textContent = `${health || 0}%`;
      healthEl.classList.toggle('metric__value--success', health >= 80);
      healthEl.classList.toggle('metric__value--warning', health < 80 && health >= 60);
    }
    if (quickWinsEl) {
      quickWinsEl.textContent = quickWins || 0;
      quickWinsEl.classList.toggle('metric__value--success', quickWins > 0);
    }
    if (unusedEl) {
      unusedEl.textContent = unused || 0;
      unusedEl.classList.toggle('metric__value--warning', unused > 10);
    }
    if (coverageEl) {
      coverageEl.textContent = `${coverage || 0}%`;
      coverageEl.classList.toggle('metric__value--success', coverage >= 80);
    }
  }

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

    switch (action) {
      case 'quick-wins':
        await this.findQuickWins();
        break;
      case 'find-unused':
        this.showMessage('Find Unused - Coming soon');
        break;
      case 'audit-components':
        await this.auditComponents();
        break;
      case 'coverage':
        this.showMessage('Coverage Analysis - Coming soon');
        break;
    }
  }

  async findQuickWins() {
    this.showLoading('Finding quick wins...');
    try {
      const result = await api.findQuickWins('.');
      const wins = result.quick_wins?.length || 0;
      this.showMessage(`Found ${wins} quick wins`);
      await this.loadMetrics();
    } catch (error) {
      this.showError('Failed to find quick wins');
    }
  }

  async auditComponents() {
    this.showLoading('Auditing components...');
    try {
      const result = await api.auditComponents('.');
      const issues = result.issues?.length || 0;
      this.showMessage(`Audit complete: ${issues} issues found`);
      await this.loadMetrics();
    } catch (error) {
      this.showError('Failed to audit components');
    }
  }

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