/**
 * Phase 2: 全文阅读模式主组件（优化版 - 移除顶部Header）
 */

import { FullTextModeState } from '../../types/chat'
import MessageList from './MessageList'
import MessageInput from './MessageInput'
import './FullTextMode.css'

interface FullTextModeProps {
  state: FullTextModeState
  onSendMessage: (content: string) => void
  messages: any[]
  loading: boolean
  streamingContent?: string
}

export function FullTextMode({
  state,
  onSendMessage,
  messages,
  loading,
  streamingContent,
}: FullTextModeProps) {
  return (
    <div className="fulltext-mode">
      {/* 聊天区域 */}
      <div className="fulltext-chat">
        {messages.length === 0 && !loading ? (
          <div className="fulltext-empty">
            <div className="empty-icon">🌍</div>
            <div className="empty-title">全文阅读模式已就绪</div>
            <div className="empty-desc">
              已加载 <strong>{state.selectedFiles}</strong> 篇文献，可进行跨文献综合分析
            </div>
            <div className="empty-hint">
              💡 点击右上角"用量说明"按钮查看详细信息
            </div>
            <div className="example-queries">
              <div className="example-title">示例问题：</div>
              <div className="example-item">
                💡 这些文献的主要研究方向是什么？
              </div>
              <div className="example-item">
                📊 总结这些研究的主要发现和结论
              </div>
              <div className="example-item">
                🔍 这些文献中有哪些研究方法？
              </div>
            </div>
          </div>
        ) : (
          <MessageList
            messages={messages}
            loading={loading}
            streamingContent={streamingContent}
          />
        )}
      </div>

      {/* 消息输入 */}
      <div className="fulltext-input">
        <MessageInput
          onSend={(content) => onSendMessage(content)}
          loading={loading}
          knowledgeBases={[]}
          placeholder={`基于${state.selectedFiles}篇文献提问...`}
        />
      </div>
    </div>
  )
}

