/**
 * admin-workdesk.js
 * Admin Team workdesk - System settings and project management
 */

import BaseWorkdesk from './base-workdesk.js';
import '../components/admin/ds-admin-settings.js';
import '../components/admin/ds-project-list.js';

export default class AdminWorkdesk extends BaseWorkdesk {
  constructor(shell) {
    super(shell);
    this.teamId = 'admin';
    this.teamName = 'Admin';
    this.tools = [
      {
        id: 'settings',
        name: 'System Settings',
        description: 'Configure DSS hostname, port, and setup type',
        component: 'ds-admin-settings'
      },
      {
        id: 'projects',
        name: 'Projects',
        description: 'Create and manage design system projects',
        component: 'ds-project-list'
      }
    ];
    this.currentTab = 'settings';
  }

  /**
   * Admin sidebar shows tab navigation for Settings and Projects
   */
  renderSidebar() {
    const sidebar = this.shell.sidebarContent;
    if (!sidebar) return;

    sidebar.innerHTML = `
      <div style="padding: 12px; display: flex; flex-direction: column; gap: 8px;">
        ${this.tools.map(tool => `
          <button class="tab-btn" data-tab="${tool.id}" style="
            padding: 8px 12px;
            border: 1px solid ${this.currentTab === tool.id ? 'var(--vscode-focusBorder)' : 'var(--vscode-border)'};
            background: ${this.currentTab === tool.id ? 'var(--vscode-selection)' : 'var(--vscode-sidebar)'};
            color: var(--vscode-foreground);
            border-radius: 4px;
            cursor: pointer;
            font-weight: ${this.currentTab === tool.id ? '600' : '500'};
            text-align: left;
            transition: all 0.2s;
          " title="${tool.description}">
            ${tool.name}
          </button>
        `).join('')}
      </div>
    `;

    // Setup tab click handlers
    sidebar.querySelectorAll('.tab-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        const tabId = btn.dataset.tab;
        this.switchTab(tabId);
      });
    });
  }

  /**
   * Admin stage shows tab content - either Settings or Projects
   */
  renderStage() {
    const stage = this.shell.stageContent;
    if (!stage) return;

    stage.innerHTML = `
      <div style="height: 100%; overflow-y: auto;">
        ${this.renderTabContent()}
      </div>
    `;

    // Trigger connectedCallback on custom elements
    this.hydrateComponents();
  }

  /**
   * Render content based on current tab
   */
  renderTabContent() {
    switch (this.currentTab) {
      case 'settings':
        return '<ds-admin-settings></ds-admin-settings>';
      case 'projects':
        return '<ds-project-list></ds-project-list>';
      default:
        return '<ds-admin-settings></ds-admin-settings>';
    }
  }

  /**
   * Switch to a different tab and re-render
   */
  switchTab(tabId) {
    this.currentTab = tabId;
    this.renderSidebar();
    this.renderStage();
  }

  /**
   * Hydrate custom elements after rendering
   */
  hydrateComponents() {
    const stage = this.shell.stageContent;
    if (!stage) return;

    // Find and trigger connectedCallback on custom elements
    stage.querySelectorAll('ds-admin-settings, ds-project-list').forEach(el => {
      // Web components auto-trigger connectedCallback when inserted into DOM
      // No manual trigger needed
    });
  }

  /**
   * Admin panel shows minimal system log
   */
  renderPanel() {
    const panel = this.shell.querySelector('ds-panel');
    if (panel) {
      // Configure panel with admin config
      panel.configure('admin', false);
    }
  }

}