/**
 * Phase 2: 逐篇精读模式主组件
 */

import { DeepReadModeState } from '../../types/chat'
import { DocumentSwitcher } from './DocumentSwitcher'
import MessageList from './MessageList'
import MessageInput from './MessageInput'
import './DeepReadMode.css'

interface DeepReadModeProps {
  state: DeepReadModeState
  kbName: string
  onSwitch: (docId: string) => void
  onSendMessage: (content: string) => void
  loading: boolean
  streamingContent?: string
}

export function DeepReadMode({
  state,
  kbName,
  onSwitch,
  onSendMessage,
  loading,
  streamingContent,
}: DeepReadModeProps) {
  const { selectedDocs, currentDoc, currentConversation } = state

  // 转换消息格式
  const messages = currentConversation.map((msg: any) => ({
    id: msg.id,
    conversationId: 'deep-read',
    role: msg.role as 'user' | 'assistant',
    content: msg.content,
    createdAt: msg.timestamp.toISOString(),
  }))

  return (
    <div className="deep-read-mode">
      {/* 顶部信息栏 */}
      <div className="deep-read-header">
        <div className="mode-info">
          <h2 className="mode-title">
            🔍 逐篇精读模式
            <span className="kb-name-badge">- {kbName}</span>
          </h2>
          <p className="mode-desc">
            已选 <strong>{selectedDocs.length}</strong> 篇文献，可逐篇深度分析
          </p>
        </div>
      </div>

      {/* 文献切换器 */}
      <DocumentSwitcher
        currentDoc={currentDoc}
        selectedDocs={selectedDocs}
        onSwitch={onSwitch}
      />

      {/* 聊天区域 */}
      <div className="deep-read-chat">
        {messages.length === 0 && !loading ? (
          <div className="empty-state">
            <div className="empty-icon">🔍</div>
            <div className="empty-title">开始精读 {currentDoc?.filename}</div>
            <div className="empty-hint">
              针对这篇文献提问，AI将提供详细深入的分析
            </div>
            <div className="empty-features">
              <div className="feature-item">
                ✓ 深度理解文献内容
              </div>
              <div className="feature-item">
                ✓ 精确信息提取
              </div>
              <div className="feature-item">
                ✓ 多轮推理对话
              </div>
            </div>
          </div>
        ) : (
          <MessageList
            messages={messages}
            loading={loading}
            streamingContent={streamingContent}
          />
        )}
      </div>

      {/* 消息输入 */}
      <div className="deep-read-input">
        <MessageInput
          onSend={(content) => onSendMessage(content)}
          loading={loading}
          knowledgeBases={[]}
          placeholder={`关于 ${currentDoc?.filename || '当前文献'} 的问题...`}
        />
      </div>
    </div>
  )
}

