import React from 'react';
import { ChatMessage, AppState, AnalysisResult, ExpertResult } from '../types';
import ChatMessageItem from './ChatMessage';
import ProcessFlow from './ProcessFlow';

interface ChatAreaProps {
  messages: ChatMessage[];
  appState: AppState;
  managerAnalysis: AnalysisResult | null;
  experts: ExpertResult[];
  finalOutput: string;
  processStartTime: number | null;
  processEndTime: number | null;
}

const ChatArea = ({
  messages,
  appState,
  managerAnalysis,
  experts,
  finalOutput,
  processStartTime,
  processEndTime
}: ChatAreaProps) => {
  return (
    <div className="flex-1 overflow-y-auto custom-scrollbar scroll-smooth">
      <div className="pb-40">
        {messages.length === 0 && appState === 'idle' && (
           <div className="h-full flex flex-col items-center justify-center pt-32 opacity-50 px-4 text-center">
              <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl mb-6 shadow-lg rotate-3 flex items-center justify-center text-white font-bold text-2xl">
                Pr
              </div>
              <p className="text-lg font-medium">Prisma</p>
              <p className="text-sm">Ask a complex question to start.</p>
           </div>
        )}

        {/* History */}
        {messages.map((msg, idx) => (
          <ChatMessageItem 
            key={msg.id} 
            message={msg} 
            isLast={idx === messages.length - 1} 
          />
        ))}

        {/* Active Generation (Ghost Message) */}
        {appState !== 'idle' && appState !== 'completed' && (
           <div className="group w-full bg-transparent text-slate-800">
              <div className="max-w-6xl mx-auto px-4 py-8 flex gap-6">
                 <div className="flex-shrink-0 w-8 h-8 rounded-full bg-white border border-blue-200 shadow-sm flex items-center justify-center">
                    <div className="animate-spin w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full"></div>
                 </div>
                 <div className="flex-1 min-w-0">
                    <div className="font-semibold text-sm text-slate-900 mb-2">Prisma</div>
                    
                    {/* Active Thinking Process */}
                    <div className="mb-4 bg-white border border-blue-100 rounded-xl p-4 shadow-sm">
                       <ProcessFlow 
                         appState={appState} 
                         managerAnalysis={managerAnalysis} 
                         experts={experts} 
                         processStartTime={processStartTime}
                         processEndTime={processEndTime}
                       />
                    </div>

                    {/* Streaming Output */}
                    {finalOutput && (
                      <div className="prose prose-slate max-w-none">
                         <ChatMessageItem 
                           message={{
                             id: 'streaming', 
                             role: 'model', 
                             content: finalOutput, 
                             isThinking: false
                           }} 
                         />
                      </div>
                    )}
                 </div>
              </div>
           </div>
        )}
      </div>
    </div>
  );
};

export default ChatArea;