/**
 * Phase 2: 聊天模式选择器（侧边栏）
 */

import { useEffect } from 'react'
import { ChatPageState, ChatBaseMode, KnowledgeBaseMode } from '../../types/chat'
import { useKnowledgeBaseStore } from '../../stores/useKnowledgeBaseStore'
import './ModeSelector.css'

interface ModeSelectorProps {
  state: ChatPageState
  onModeChange: (mode: ChatBaseMode) => void
  onKbSelect: (kbId: string) => void
  onKbModeChange: (mode: KnowledgeBaseMode) => void
}

export function ModeSelector({
  state,
  onModeChange,
  onKbSelect,
  onKbModeChange,
}: ModeSelectorProps) {
  const { knowledgeBases, fetchKnowledgeBases } = useKnowledgeBaseStore()

  useEffect(() => {
    fetchKnowledgeBases()
  }, [fetchKnowledgeBases])

  return (
    <div className="mode-selector">
      {/* 基础模式选择 */}
      <div className="mode-section">
        <h3 className="mode-section-title">对话模式</h3>
        
        <button
          className={`mode-button ${state.baseMode === 'general' ? 'active' : ''}`}
          onClick={() => onModeChange('general')}
        >
          <span className="mode-icon">⚪</span>
          <span>通用对话</span>
        </button>
        
        <button
          className={`mode-button ${state.baseMode === 'knowledge_base' ? 'active' : ''}`}
          onClick={() => onModeChange('knowledge_base')}
        >
          <span className="mode-icon">📚</span>
          <span>知识库模式</span>
        </button>
      </div>

      {/* 知识库模式选项 */}
      {state.baseMode === 'knowledge_base' && (
        <>
          <div className="mode-section">
            <h3 className="mode-section-title">知识库选择</h3>
            <select
              className="kb-select"
              value={state.selectedKbId || ''}
              onChange={(e) => e.target.value && onKbSelect(e.target.value)}
            >
              <option value="">选择知识库...</option>
              {knowledgeBases.map(kb => (
                <option key={kb.id} value={kb.id}>
                  {kb.name} ({kb.fileCount}篇)
                </option>
              ))}
            </select>
          </div>

          {state.selectedKbId && (
            <div className="mode-section">
              <h3 className="mode-section-title">工作模式</h3>
              
              <button
                className={`mode-button ${state.kbMode === 'full_text' ? 'active' : ''}`}
                onClick={() => onKbModeChange('full_text')}
              >
                <span className="mode-icon">🌍</span>
                <div className="mode-button-content">
                  <div>全文阅读</div>
                  <div className="mode-hint">35-50篇文献综合分析</div>
                </div>
              </button>
              
              <button
                className={`mode-button ${state.kbMode === 'deep_read' ? 'active' : ''}`}
                onClick={() => onKbModeChange('deep_read')}
              >
                <span className="mode-icon">🔍</span>
                <div className="mode-button-content">
                  <div>逐篇精读</div>
                  <div className="mode-hint">1-5篇文献深度分析</div>
                </div>
              </button>
              
              <button
                className={`mode-button ${state.kbMode === 'batch' ? 'active' : ''}`}
                onClick={() => onKbModeChange('batch')}
              >
                <span className="mode-icon">📦</span>
                <div className="mode-button-content">
                  <div>批处理</div>
                  <div className="mode-hint">3-50篇文献批量提取</div>
                </div>
              </button>
            </div>
          )}
        </>
      )}
    </div>
  )
}

