/**
 * ds-system-log.js
 * System health dashboard with DSS status, MCP health, and compiler metrics
 */

import toolBridge from '../../services/tool-bridge.js';
import { ComponentHelpers } from '../../utils/component-helpers.js';

class DSSystemLog extends HTMLElement {
  constructor() {
    super();
    this.status = null;
    this.autoRefresh = false;
    this.refreshInterval = null;
  }

  connectedCallback() {
    this.render();
    this.setupEventListeners();
    this.loadStatus();
  }

  disconnectedCallback() {
    if (this.refreshInterval) {
      clearInterval(this.refreshInterval);
    }
  }

  setupEventListeners() {
    const refreshBtn = this.querySelector('#system-refresh-btn');
    if (refreshBtn) {
      refreshBtn.addEventListener('click', () => this.loadStatus());
    }

    const autoRefreshToggle = this.querySelector('#system-auto-refresh');
    if (autoRefreshToggle) {
      autoRefreshToggle.addEventListener('change', (e) => {
        this.autoRefresh = e.target.checked;
        if (this.autoRefresh) {
          this.refreshInterval = setInterval(() => this.loadStatus(), 5000);
        } else {
          if (this.refreshInterval) {
            clearInterval(this.refreshInterval);
            this.refreshInterval = null;
          }
        }
      });
    }
  }

  async loadStatus() {
    const content = this.querySelector('#system-content');
    if (!content) return;

    // Only show loading on first load
    if (!this.status) {
      content.innerHTML = ComponentHelpers.renderLoading('Loading system status...');
    }

    try {
      const result = await toolBridge.getDSSStatus('json');

      if (result) {
        this.status = result;
        this.renderStatus();
      } else {
        content.innerHTML = ComponentHelpers.renderEmpty('No status data available', '📊');
      }
    } catch (error) {
      console.error('Failed to load system status:', error);
      content.innerHTML = ComponentHelpers.renderError('Failed to load system status', error);
    }
  }

  getHealthBadge(isHealthy) {
    return isHealthy
      ? ComponentHelpers.createBadge('Healthy', 'success')
      : ComponentHelpers.createBadge('Degraded', 'error');
  }

  renderStatus() {
    const content = this.querySelector('#system-content');
    if (!content || !this.status) return;

    const health = this.status.health || {};
    const config = this.status.configuration || {};
    const metrics = this.status.metrics || {};
    const recommendations = this.status.recommendations || [];

    content.innerHTML = `
      <div style="display: grid; gap: 16px;">
        <!-- Overall Health Card -->
        <div style="background-color: var(--vscode-sidebar); border: 1px solid var(--vscode-border); border-radius: 4px; padding: 16px;">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
            <h3 style="font-size: 14px; font-weight: 600;">System Health</h3>
            ${this.getHealthBadge(health.overall)}
          </div>
          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;">
            <div>
              <div style="font-size: 11px; color: var(--vscode-text-dim); margin-bottom: 4px;">MCP Server</div>
              <div style="font-size: 12px;">${this.getHealthBadge(health.mcp_server)}</div>
            </div>
            <div>
              <div style="font-size: 11px; color: var(--vscode-text-dim); margin-bottom: 4px;">Context Compiler</div>
              <div style="font-size: 12px;">${this.getHealthBadge(health.context_compiler)}</div>
            </div>
            <div>
              <div style="font-size: 11px; color: var(--vscode-text-dim); margin-bottom: 4px;">Browser Connection</div>
              <div style="font-size: 12px;">${this.getHealthBadge(health.browser_connection)}</div>
            </div>
            <div>
              <div style="font-size: 11px; color: var(--vscode-text-dim); margin-bottom: 4px;">Dependencies</div>
              <div style="font-size: 12px;">${this.getHealthBadge(health.dependencies)}</div>
            </div>
          </div>
        </div>

        <!-- Configuration Card -->
        <div style="background-color: var(--vscode-sidebar); border: 1px solid var(--vscode-border); border-radius: 4px; padding: 16px;">
          <h3 style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">Configuration</h3>
          <div style="display: grid; gap: 8px; font-size: 12px;">
            <div style="display: flex; justify-content: space-between;">
              <span style="color: var(--vscode-text-dim);">Base Theme:</span>
              <span style="font-family: 'Courier New', monospace;">${ComponentHelpers.escapeHtml(config.base_theme || 'N/A')}</span>
            </div>
            <div style="display: flex; justify-content: space-between;">
              <span style="color: var(--vscode-text-dim);">Active Skin:</span>
              <span style="font-family: 'Courier New', monospace;">${ComponentHelpers.escapeHtml(config.skin || 'None')}</span>
            </div>
            <div style="display: flex; justify-content: space-between;">
              <span style="color: var(--vscode-text-dim);">Project Name:</span>
              <span style="font-family: 'Courier New', monospace;">${ComponentHelpers.escapeHtml(config.project_name || 'N/A')}</span>
            </div>
            <div style="display: flex; justify-content: space-between;">
              <span style="color: var(--vscode-text-dim);">Cache Enabled:</span>
              <span>${config.cache_enabled ? '✓ Yes' : '✗ No'}</span>
            </div>
          </div>
        </div>

        <!-- Metrics Card -->
        ${metrics.token_count !== undefined ? `
          <div style="background-color: var(--vscode-sidebar); border: 1px solid var(--vscode-border); border-radius: 4px; padding: 16px;">
            <h3 style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">Metrics</h3>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;">
              <div style="text-align: center; padding: 12px; background-color: var(--vscode-bg); border-radius: 4px;">
                <div style="font-size: 24px; font-weight: 600; color: var(--vscode-accent);">${metrics.token_count || 0}</div>
                <div style="font-size: 11px; color: var(--vscode-text-dim); margin-top: 4px;">Design Tokens</div>
              </div>
              <div style="text-align: center; padding: 12px; background-color: var(--vscode-bg); border-radius: 4px;">
                <div style="font-size: 24px; font-weight: 600; color: var(--vscode-accent);">${metrics.component_count || 0}</div>
                <div style="font-size: 11px; color: var(--vscode-text-dim); margin-top: 4px;">Components</div>
              </div>
              <div style="text-align: center; padding: 12px; background-color: var(--vscode-bg); border-radius: 4px;">
                <div style="font-size: 24px; font-weight: 600; color: var(--vscode-accent);">${metrics.theme_count || 0}</div>
                <div style="font-size: 11px; color: var(--vscode-text-dim); margin-top: 4px;">Themes</div>
              </div>
              ${metrics.compilation_time ? `
                <div style="text-align: center; padding: 12px; background-color: var(--vscode-bg); border-radius: 4px;">
                  <div style="font-size: 24px; font-weight: 600; color: var(--vscode-accent);">${Math.round(metrics.compilation_time)}ms</div>
                  <div style="font-size: 11px; color: var(--vscode-text-dim); margin-top: 4px;">Compilation Time</div>
                </div>
              ` : ''}
            </div>
          </div>
        ` : ''}

        <!-- Recommendations Card -->
        ${recommendations.length > 0 ? `
          <div style="background-color: var(--vscode-sidebar); border: 1px solid var(--vscode-border); border-radius: 4px; padding: 16px;">
            <h3 style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">Recommendations</h3>
            <div style="display: flex; flex-direction: column; gap: 8px;">
              ${recommendations.map(rec => `
                <div style="display: flex; align-items: start; gap: 8px; padding: 8px; background-color: var(--vscode-bg); border-radius: 2px;">
                  <span style="font-size: 16px;">💡</span>
                  <div style="flex: 1;">
                    <div style="font-size: 12px; margin-bottom: 2px;">${ComponentHelpers.escapeHtml(rec.title || rec)}</div>
                    ${rec.description ? `
                      <div style="font-size: 11px; color: var(--vscode-text-dim);">${ComponentHelpers.escapeHtml(rec.description)}</div>
                    ` : ''}
                  </div>
                </div>
              `).join('')}
            </div>
          </div>
        ` : ''}

        <!-- Last Updated -->
        <div style="font-size: 11px; color: var(--vscode-text-dim); text-align: center; padding-top: 8px;">
          Last updated: ${ComponentHelpers.formatTimestamp(new Date())}
          ${this.autoRefresh ? '• Auto-refreshing every 5s' : ''}
        </div>
      </div>
    `;
  }

  render() {
    this.innerHTML = `
      <div style="padding: 16px; height: 100%; display: flex; flex-direction: column;">
        <div style="margin-bottom: 16px; display: flex; gap: 12px; align-items: center; justify-content: flex-end;">
          <label style="display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--vscode-text);">
            <input type="checkbox" id="system-auto-refresh" />
            Auto-refresh
          </label>
          <button id="system-refresh-btn" class="button" style="padding: 4px 12px; font-size: 11px;">
            🔄 Refresh
          </button>
        </div>
        <div id="system-content" style="flex: 1; overflow-y: auto;">
          ${ComponentHelpers.renderLoading('Initializing...')}
        </div>
      </div>
    `;
  }
}

customElements.define('ds-system-log', DSSystemLog);

export default DSSystemLog;