import { useChatStore } from '../stores/chatStore';
import { CheckCircle2, Loader2, Brain } from 'lucide-react';
import { clsx } from 'clsx';

const AGENT_DISPLAY_NAMES: Record<string, string> = {
  policy: '政策专家',
  assessment: '评估专家',
  strategy: '策略顾问',
  objection: '异议处理专家',
  case_analysis: '案例分析师',
  memory: '记忆管理',
};

const PHASE_DISPLAY: Record<string, string> = {
  analyzing: '正在分析问题...',
  orchestrating: '正在协调专家团队...',
  synthesizing: '正在综合分析结果...',
};

export function AgentStatusIndicator() {
  const { activeAgents, completedAgents, coordinatorPhase, coordinatorMessage } = useChatStore();

  const hasActivity = activeAgents.length > 0 || coordinatorPhase !== null;

  if (!hasActivity) return null;

  return (
    <div className="agent-status-enter max-w-3xl mx-auto mb-3">
      <div className="rounded-xl border border-secondary-200 bg-secondary-50 px-4 py-3 space-y-2">
        {/* Coordinator phase */}
        {coordinatorPhase && (
          <div className="flex items-center gap-2 text-sm text-secondary-600">
            <Brain className="w-4 h-4 text-primary-500 agent-pulse" />
            <span className="font-medium text-primary-600">
              {PHASE_DISPLAY[coordinatorPhase] || coordinatorMessage}
            </span>
          </div>
        )}

        {/* Active agents */}
        {activeAgents.length > 0 && (
          <div className="space-y-1.5">
            {activeAgents.map((agent) => (
              <div
                key={`${agent.messageId}-${agent.agentType}`}
                className="agent-enter flex items-center gap-2 text-sm"
              >
                <Loader2 className="w-3.5 h-3.5 text-primary-500 animate-spin flex-shrink-0" />
                <span className="text-secondary-700">
                  <span className="font-medium text-secondary-800">
                    {AGENT_DISPLAY_NAMES[agent.agentType] || agent.agentName}
                  </span>
                  {agent.description && (
                    <span className="text-secondary-500 ml-1">- {agent.description}</span>
                  )}
                </span>
              </div>
            ))}
          </div>
        )}

        {/* Recently completed agents (shown inline) */}
        {completedAgents.length > 0 && activeAgents.length > 0 && (
          <div className="flex flex-wrap gap-2 pt-1 border-t border-secondary-200">
            {completedAgents.map((agent) => (
              <div
                key={`${agent.messageId}-${agent.agentType}-done`}
                className={clsx(
                  'flex items-center gap-1 text-xs px-2 py-0.5 rounded-full',
                  agent.success
                    ? 'bg-green-50 text-green-600'
                    : 'bg-red-50 text-red-500',
                )}
              >
                <CheckCircle2 className="w-3 h-3" />
                <span>{AGENT_DISPLAY_NAMES[agent.agentType] || agent.agentName}</span>
                {agent.durationMs > 0 && (
                  <span className="text-secondary-400 ml-0.5">
                    {(agent.durationMs / 1000).toFixed(1)}s
                  </span>
                )}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
