class MainPanel extends HTMLElement {
  connectedCallback() {
    if (this._initialized) return;
    this._initialized = true;
    this.className = 'main-panel';
    this.innerHTML = `
      <div id="panel-search" class="panel panel-search">
        <div class="search-container">
          <input type="text" id="query" class="search-input" placeholder="知識を検索..." autocomplete="off">
          <button onclick="search()" class="search-btn">検索</button>
        </div>

        <div id="result" class="results-panel">
          <div class="empty-state">クエリを入力して検索を開始してください</div>
        </div>

        <div class="sidebar-bottom" style="margin-top: auto; border-top: 1px solid var(--border-base);">
          <div class="accordion">
            <button class="accordion-header activity-toggle" aria-expanded="false" style="padding: 12px 16px;">
              MCP ACTIVITY <span id="activity-count" style="font-weight:normal; font-size: 0.65rem; margin-left: 8px;">LISTEN</span>
              <span class="accordion-toggle" style="margin-left: auto;">▸</span>
            </button>
            <div class="accordion-content activity-content" hidden style="padding: 0 16px 16px 16px;">
              <div class="activity-log" style="height: 140px; margin-top: 0; background: rgba(255,255,255,0.02); border-color: var(--border-subtle);">
                <div id="activity-items"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="panel-docs" class="panel panel-docs hidden">
        <h2 style="font-family:Outfit; margin-bottom:12px;">文書管理</h2>
        <div class="empty-state">近日実装予定</div>
      </div>

      <div id="panel-settings" class="panel panel-settings hidden">
        <h2 style="font-family:Outfit; margin-bottom:12px;">設定</h2>
        <div class="empty-state">近日実装予定</div>
      </div>
    `;

    // Handle navigation events from sidebar
    document.addEventListener('navigate-panel', (e) => {
      const target = String(e.detail || 'search');
      this.showPanel(target);
    });

    // Expose showPanel as method
    this.showPanel = (panelId) => {
      const panels = this.querySelectorAll('.panel');
      panels.forEach(p => p.classList.add('hidden'));
      switch (panelId) {
        case 'docs':
          this.querySelector('#panel-docs').classList.remove('hidden');
          break;
        case 'settings':
          this.querySelector('#panel-settings').classList.remove('hidden');
          break;
        default:
          this.querySelector('#panel-search').classList.remove('hidden');
      }
    };
    // default show search
    this.showPanel('search');

    // Activity Log accordion behavior
    const activityToggle = this.querySelector('.activity-toggle');
    const activityContent = this.querySelector('.activity-content');
    if (activityToggle && activityContent) {
      activityToggle.addEventListener('click', () => {
        const expanded = activityToggle.getAttribute('aria-expanded') === 'true';
        activityToggle.setAttribute('aria-expanded', String(!expanded));
        if (expanded) {
          activityContent.hidden = true;
          activityToggle.querySelector('.accordion-toggle').textContent = '▸';
        } else {
          activityContent.hidden = false;
          activityToggle.querySelector('.accordion-toggle').textContent = '▾';
        }
      });
    }
  }
}

customElements.define('main-panel', MainPanel);

export { };