import React from 'react';
import ChatWindow from '../../../chat/components/ChatWindow';

const ChatTracker = ({ 
    agent, 
    chatHistory, 
    handleClearHistory, 
    handleAction, 
    clearing, 
    editConfig,
    currentAction,
    lastAction,
    lastActionDuration,
    runningSeconds
}) => {
    return (
        <div className="flex flex-col bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800/80 rounded-xl overflow-hidden relative shadow-lg h-full">
            <div className="px-4 py-2 border-b border-gray-200 dark:border-gray-800/80 bg-gray-50 dark:bg-gray-900/50 backdrop-blur-md flex justify-between items-center shrink-0">
                <span className="text-[10px] uppercase tracking-[0.2em] font-black text-indigo-700 dark:text-indigo-400 flex items-center gap-2">
                   <div className="w-1.5 h-1.5 bg-indigo-600 rounded-full animate-pulse shadow-[0_0_8px_rgba(99,102,241,0.5)]"></div>
                   Live Thought Process
                </span>
                {agent?.session_id && (
                    <button
                        onClick={handleClearHistory}
                        disabled={clearing || editConfig?.is_locked}
                        className="text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded border border-red-500/30 text-red-500 hover:bg-red-500/10 transition-colors disabled:opacity-50"
                    >
                        {clearing ? 'Clearing...' : editConfig?.is_locked ? "🔒 Locked" : "Clear History"}
                    </button>
                )}
            </div>

            <div className="flex-1 overflow-hidden relative">
                 {/* Error Bar Overlay */}
                 {agent?.status === 'error_suspended' && agent?.last_error && (
                     <div className="absolute top-0 inset-x-0 z-20 p-4 bg-rose-600 dark:bg-rose-700 text-white shadow-xl flex items-start gap-4 animate-in slide-in-from-top duration-300">
                         <div className="shrink-0 mt-1">
                             <svg className="w-6 h-6 text-rose-100" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                             </svg>
                         </div>
                         <div className="flex-1 min-w-0">
                             <h4 className="text-xs font-black uppercase tracking-widest mb-1 text-rose-100">Agent Lifecycle Suspended</h4>
                             <p className="text-sm font-mono font-bold leading-snug break-words drop-shadow-sm">{agent.last_error}</p>
                             <div className="mt-3 flex gap-2">
                                 <button 
                                     onClick={() => handleAction('idle')}
                                     className="px-4 py-1.5 bg-white/20 hover:bg-white/30 rounded-lg text-xs font-black uppercase tracking-wider transition-all border border-white/20 backdrop-blur-md"
                                 >
                                     Acknowledge & Reset
                                 </button>
                             </div>
                         </div>
                     </div>
                 )}

                <ChatWindow 
                    chatHistory={chatHistory} 
                    evaluationMetadata={{
                        status: agent?.evaluation_status,
                        score: agent?.latest_quality_score
                    }}
                />

                {/* Tracking HUD Overlay */}
                <div className="absolute bottom-4 left-4 right-4 h-16 pointer-events-none flex items-end gap-3 z-10 transition-all">
                    {currentAction && (
                       <div className="flex-1 bg-white/90 dark:bg-gray-800/90 backdrop-blur-xl p-3 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-2xl flex items-center justify-between pointer-events-auto group hover:translate-y-[-4px] transition-all duration-300">
                           <div className="flex items-center gap-3 w-full">
                               <div className="animate-spin-slow w-4 h-4 border-2 border-indigo-500/30 border-t-indigo-500 rounded-full"></div>
                               <div className="flex flex-col min-w-0 flex-1">
                                    <span className="text-[11px] font-black tracking-tight text-indigo-700 dark:text-indigo-400 uppercase truncate">
                                        {currentAction.display}
                                    </span>
                                    <div className="flex items-center gap-2">
                                        <div className="h-1 flex-1 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                                            <div className="h-full bg-indigo-500 animate-[loading-bar_2s_infinite]"></div>
                                        </div>
                                        <span className="font-mono text-[9px] text-gray-400 shrink-0 font-bold">{runningSeconds}s</span>
                                    </div>
                               </div>
                           </div>
                       </div>
                    )}
                </div>
            </div>
            
            {/* Quick Summary Footer */}
            <div className="shrink-0 bg-gray-50 dark:bg-gray-900/80 border-t border-gray-200 dark:border-gray-800 p-3 flex justify-between items-center select-none backdrop-blur-sm">
                 <div className="flex items-center gap-4">
                     <div className="flex flex-col">
                         <span className="text-[8px] font-black uppercase tracking-widest text-gray-400">Total Loop Time</span>
                         <span className="text-[10px] font-mono font-bold text-gray-600 dark:text-emerald-500">{runningSeconds}s spent in active session</span>
                     </div>
                     <div className="h-4 w-px bg-gray-200 dark:bg-gray-800"></div>
                     <div className="flex flex-col">
                         <span className="text-[8px] font-black uppercase tracking-widest text-gray-400">Memory Chunks</span>
                         <span className="text-[10px] font-mono font-bold text-gray-600 dark:text-gray-300">{chatHistory.length} messages in context</span>
                     </div>
                 </div>
                 <div className="flex items-center gap-2">
                     <div className={`px-2 py-0.5 rounded text-[9px] font-black uppercase tracking-widest ${agent?.status === 'active' ? 'bg-emerald-500/10 text-emerald-500 border border-emerald-500/20' : 'bg-gray-100 dark:bg-gray-800 text-gray-400 border border-transparent'}`}>
                         {agent?.status || 'IDLE'}
                     </div>
                 </div>
            </div>
        </div>
    );
};

export default ChatTracker;