<!--
  Mudabbir - Crew Agents Sidebar Component

  Created: 2026-02-05
  Extracted from missions.html as part of template componentization.

  Features:
  - Agents section with status indicators
  - Delete agent on hover
  - Activity feed with recent activities
-->

<!-- Right: Activity & Agents Panel -->
<div class="w-80 lg:w-96 flex flex-col bg-black/20 overflow-hidden">

    <!-- Agents Section -->
    <div class="p-4 border-b border-white/5">
        <h3 class="text-xs font-semibold text-white/40 uppercase tracking-wider mb-3">Agents</h3>
        <div class="flex flex-wrap gap-2">
            <template x-for="agent in missionControl.agents" :key="agent.id">
                <div
                    class="flex items-center gap-2 px-2.5 py-1.5 rounded-lg transition-all cursor-pointer group"
                    :class="agent.status === 'active' ? 'bg-green-500/10 ring-1 ring-green-500/30' : 'bg-white/5 hover:bg-white/10'"
                    :title="agent.role + (agent.status === 'active' ? ' (Running)' : '')"
                >
                    <div class="relative">
                        <div
                            class="w-6 h-6 rounded-full bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center text-[10px] font-bold text-white"
                            x-text="agent.name.charAt(0)"
                        ></div>
                        <div
                            class="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-[#1c1c1e]"
                            :class="{
                                'bg-green-500 animate-pulse': agent.status === 'active',
                                'bg-blue-500': agent.status === 'idle',
                                'bg-amber-500': agent.status === 'blocked',
                                'bg-gray-500': agent.status === 'offline'
                            }"
                        ></div>
                    </div>
                    <div class="flex flex-col">
                        <span class="text-xs font-medium text-white/70 group-hover:text-white leading-tight" x-text="agent.name"></span>
                        <span
                            x-show="agent.status === 'active'"
                            class="text-[9px] text-green-400 leading-tight"
                        >Working...</span>
                    </div>
                    <button
                        class="ml-auto opacity-0 group-hover:opacity-100 p-0.5 text-white/30 hover:text-red-400 transition-all"
                        @click.stop="deleteMCAgent(agent.id)"
                        x-show="agent.status !== 'active'"
                    >
                        <i data-lucide="x" class="w-3 h-3"></i>
                    </button>
                </div>
            </template>
            <!-- Empty State -->
            <div x-show="missionControl.agents.length === 0" class="w-full text-center py-3 text-white/30 text-xs">
                No agents yet
            </div>
        </div>
    </div>

    <!-- Activity Feed -->
    <div class="flex-1 flex flex-col overflow-hidden">
        <h3 class="text-xs font-semibold text-white/40 uppercase tracking-wider px-4 py-3 border-b border-white/5">Activity</h3>
        <div class="flex-1 overflow-y-auto p-4 space-y-3">
            <!-- Empty State -->
            <div x-show="missionControl.activities.length === 0" class="flex flex-col items-center justify-center h-32 text-white/30">
                <i data-lucide="activity" class="w-8 h-8 mb-2 opacity-40"></i>
                <p class="text-xs">No activity yet</p>
            </div>

            <template x-for="activity in missionControl.activities.slice(0, 20)" :key="activity.id">
                <div class="flex gap-3 animate-[fadeIn_0.3s_ease-out]">
                    <div
                        class="mt-1 w-6 h-6 rounded-full flex items-center justify-center shrink-0"
                        :class="{
                            'bg-green-500/20 text-green-400': activity.type.includes('created'),
                            'bg-blue-500/20 text-blue-400': activity.type.includes('updated') || activity.type.includes('status'),
                            'bg-purple-500/20 text-purple-400': activity.type.includes('message'),
                            'bg-amber-500/20 text-amber-400': activity.type.includes('assigned')
                        }"
                    >
                        <i
                            :data-lucide="activity.type.includes('created') ? 'plus' : activity.type.includes('message') ? 'message-circle' : 'refresh-cw'"
                            class="w-3 h-3"
                        ></i>
                    </div>
                    <div class="min-w-0">
                        <p class="text-xs text-white/70 leading-relaxed" x-text="activity.message"></p>
                        <span class="text-[10px] text-white/30" x-text="formatMCDate(activity.created_at)"></span>
                    </div>
                </div>
            </template>
        </div>
    </div>

</div>
