class MainPanel extends HTMLElement {
  connectedCallback() {
    if (this._initialized) return;
    this._initialized = true;
    this.className = 'main-panel';
    this.innerHTML = `
      <div class="glass-panel">
        <div id="panel-search" class="panel panel-search">
          <header>
            <div class="stats">
              <div id="model-name-display" class="model-name" title="現在使用中のモデル" style="margin-right:12px;">判定中...</div>
              <div class="status-badge">
                <span id="llama-status-dot" class="status-dot idle"></span>
                <span id="llama-status-text">LSA Search</span>
              </div>
              <div class="status-badge">
                <span class="accent-purple">◆</span>
                <span id="doc-count-value">--</span> docs
              </div>
            </div>
          </header>

          <div class="panel-body">
            <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="activity-log">
              <div class="activity-log-title">
                <span>MCP Activity Log</span>
                <span id="activity-count" style="font-weight:normal; font-size: 0.7rem;">Listening...</span>
              </div>
              <div id="activity-items">
                <div style="text-align:center; color:#475569; padding:10px; font-size:0.8rem;">Waiting for MCP calls...</div>
              </div>
            </div>

            <div class="actions">
              <button id="show-mcp-btn" class="secondary-btn">MCP Config</button>
              <button id="copy-mcp-btn" class="secondary-btn hidden">Copy Schema</button>
              <button id="reindex-btn" class="secondary-btn warning-btn" onclick="reindex()">Re-index</button>
            </div>
          </div>
        </div>

        <div id="panel-docs" class="panel panel-docs hidden">
          <header>
            <h2>文書管理</h2>
          </header>
          <div class="panel-body docs-content">
            <p class="empty-state">文書の一覧やインポート・削除などをここに表示します（仮実装）。</p>
          </div>
        </div>

        <div id="panel-settings" class="panel panel-settings hidden">
          <header>
            <h2>設定</h2>
          </header>
          <div class="panel-body settings-content">
            <p class="empty-state">アプリの設定（ダミー）。</p>
          </div>
        </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');
  }
}

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

export { };