import React from 'react';
import BuddyAvatar from '../BuddyAvatar';

const DrillDownHeader = ({ agent, onNavigate, nodes }) => {
    const currentNode = nodes.find(n => n.id === agent?.mesh_node_id);
    const nodeName = currentNode?.name || agent?.mesh_node_id || 'unassigned';
    
    return (
        <div className="border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-800 px-6 py-4 flex items-center justify-between z-10 shrink-0 shadow-sm">
            <div className="flex items-center space-x-2 md:space-x-4">
                <button onClick={() => onNavigate('/agents')} className="text-gray-500 hover:text-gray-900 dark:hover:text-white transition-colors p-2 -ml-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
                    <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>
                </button>
                <div>
                    <h2 className="text-lg md:text-xl font-bold tracking-tight truncate max-w-[120px] md:max-w-none">{agent?.id?.split('-')[0]}</h2>
                    <div className="flex items-center space-x-2">
                        <span className="flex h-2 w-2 relative">
                            {(agent?.status === 'active' || agent?.status === 'starting') && <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>}
                            <span className={`relative inline-flex rounded-full h-2 w-2 ${(agent?.status === 'active' || agent?.status === 'starting') ? 'bg-emerald-500' : 'bg-amber-500'}`}></span>
                        </span>
                        <span className="text-[8px] md:text-[10px] text-gray-900 dark:text-gray-400 uppercase tracking-widest font-black whitespace-nowrap">Status: {agent?.status}</span>
                    </div>
                </div>
                {agent && (
                    <div className="hidden sm:block">
                        <BuddyAvatar 
                            score={agent.latest_quality_score || 0} 
                            status={agent.evaluation_status || 'idle'} 
                        />
                    </div>
                )}
            </div>
            <div className="hidden md:flex items-center space-x-4 font-mono text-[10px] text-gray-900 dark:text-gray-400">
                <span>Node: <span className="text-indigo-700 dark:text-indigo-400 font-bold">{nodeName}</span></span>
                <span>Jail Path: <span className="text-pink-700 dark:text-pink-400 font-bold">{agent?.current_workspace_jail || '/tmp'}</span></span>
                <span>Synced Workspace: <span className="text-emerald-700 dark:text-emerald-400 font-bold">{agent?.session?.sync_workspace_id || agent?.session_id || 'not-bound'}</span></span>
            </div>
        </div>
    );
};

export default DrillDownHeader;