<!--
  Mudabbir - Crew Task List Component

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

  Features:
  - Task filter buttons (All, In Progress, Inbox, Done)
  - Compact table layout with columns: Status, Title, Priority, Assignee, Status Badge, Time, Actions
  - Empty state with create task button
  - Run/Stop/Edit/Delete actions per task
-->

<!-- Left: Tasks Panel -->
<div class="flex-1 flex flex-col border-r border-white/5 min-w-0">

    <!-- Task Filters -->
    <div class="flex items-center gap-1 px-4 py-2 border-b border-white/5">
        <button
            class="px-3 py-1 rounded-md text-xs font-medium transition-all"
            :class="missionControl.taskFilter === 'all' ? 'bg-white/10 text-white' : 'text-white/40 hover:text-white/70'"
            @click="missionControl.taskFilter = 'all'"
        >All</button>
        <button
            class="px-3 py-1 rounded-md text-xs font-medium transition-all flex items-center gap-1.5"
            :class="missionControl.taskFilter === 'in_progress' ? 'bg-amber-500/20 text-amber-400' : 'text-white/40 hover:text-white/70'"
            @click="missionControl.taskFilter = 'in_progress'"
        >
            <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
            In Progress
        </button>
        <button
            class="px-3 py-1 rounded-md text-xs font-medium transition-all flex items-center gap-1.5"
            :class="missionControl.taskFilter === 'inbox' ? 'bg-blue-500/20 text-blue-400' : 'text-white/40 hover:text-white/70'"
            @click="missionControl.taskFilter = 'inbox'"
        >
            <span class="w-1.5 h-1.5 rounded-full bg-blue-500"></span>
            Inbox
        </button>
        <button
            class="px-3 py-1 rounded-md text-xs font-medium transition-all flex items-center gap-1.5"
            :class="missionControl.taskFilter === 'done' ? 'bg-green-500/20 text-green-400' : 'text-white/40 hover:text-white/70'"
            @click="missionControl.taskFilter = 'done'"
        >
            <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
            Done
        </button>
    </div>

    <!-- Task List -->
    <div class="flex-1 overflow-y-auto">
        <!-- Empty State -->
        <div x-show="getFilteredMCTasks().length === 0" class="flex flex-col items-center justify-center h-full text-white/30 p-8">
            <i data-lucide="inbox" class="w-12 h-12 mb-4 opacity-40"></i>
            <p class="text-sm font-medium">No tasks yet</p>
            <p class="text-xs mt-1">Create a task to get your agents working</p>
            <button
                class="mt-4 flex items-center gap-2 px-4 py-2 text-sm font-medium text-accent bg-accent/10 hover:bg-accent/20 rounded-lg transition-all"
                @click="missionControl.showCreateTask = true"
            >
                <i data-lucide="plus" class="w-4 h-4"></i>
                Create Task
            </button>
        </div>

        <!-- Table Header -->
        <div class="flex items-center px-4 py-2 border-b border-white/10 bg-white/[0.02] text-[10px] font-semibold text-white/40 uppercase tracking-wider">
            <div class="w-8"></div>
            <div class="flex-1 min-w-0">Task</div>
            <div class="w-20 text-center hidden sm:block">Priority</div>
            <div class="w-24 text-center hidden md:block">Assignee</div>
            <div class="w-20 text-center hidden lg:block">Status</div>
            <div class="w-20 text-right">Time</div>
            <div class="w-24 text-right">Actions</div>
        </div>

        <!-- Task Items -->
        <template x-for="task in getFilteredMCTasks()" :key="task.id">
            <div
                class="group flex items-center px-4 py-2.5 border-b border-white/5 hover:bg-white/[0.03] cursor-pointer transition-all"
                @click="selectMCTask(task)"
                :class="missionControl.selectedTask?.id === task.id ? 'bg-accent/5 border-l-2 border-l-accent' : ''"
            >
                <!-- Status Checkbox -->
                <div class="w-8 shrink-0">
                    <div
                        class="w-4 h-4 rounded border-2 flex items-center justify-center cursor-pointer transition-all hover:scale-110"
                        :class="{
                            'border-blue-500/50 bg-blue-500/10': task.status === 'inbox',
                            'border-cyan-500/50 bg-cyan-500/10': task.status === 'assigned',
                            'border-amber-500 bg-amber-500/20': task.status === 'in_progress',
                            'border-purple-500/50 bg-purple-500/10': task.status === 'review',
                            'border-green-500 bg-green-500': task.status === 'done',
                            'border-red-500/50 bg-red-500/10': task.status === 'blocked'
                        }"
                        @click.stop="updateMCTaskStatus(task.id, task.status === 'done' ? 'inbox' : 'done')"
                        :title="task.status === 'done' ? 'Mark incomplete' : 'Mark complete'"
                    >
                        <i x-show="task.status === 'done'" data-lucide="check" class="w-2.5 h-2.5 text-white"></i>
                        <div x-show="task.status === 'in_progress'" class="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse"></div>
                    </div>
                </div>

                <!-- Title + Tags -->
                <div class="flex-1 min-w-0 flex items-center gap-2">
                    <span
                        class="text-sm truncate"
                        :class="task.status === 'done' ? 'text-white/40 line-through' : 'text-white font-medium'"
                        x-text="task.title"
                    ></span>
                    <!-- Running indicator inline -->
                    <span
                        x-show="isMCTaskRunning(task.id)"
                        class="shrink-0 flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium bg-green-500/20 text-green-400 rounded"
                    >
                        <span class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></span>
                        Running
                    </span>
                    <!-- Tags inline -->
                    <template x-for="tag in (task.tags || []).slice(0, 2)" :key="tag">
                        <span class="shrink-0 text-[10px] text-white/30 bg-white/5 px-1.5 py-0.5 rounded hidden xl:inline" x-text="'#' + tag"></span>
                    </template>
                </div>

                <!-- Priority -->
                <div class="w-20 shrink-0 text-center hidden sm:block">
                    <span
                        x-show="task.priority === 'urgent'"
                        class="inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-bold uppercase bg-red-500/20 text-red-400 rounded"
                    >
                        <i data-lucide="alert-triangle" class="w-3 h-3"></i>
                        Urgent
                    </span>
                    <span
                        x-show="task.priority === 'high'"
                        class="inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-bold uppercase bg-amber-500/20 text-amber-400 rounded"
                    >
                        <i data-lucide="arrow-up" class="w-3 h-3"></i>
                        High
                    </span>
                    <span
                        x-show="task.priority === 'medium'"
                        class="inline-block px-2 py-0.5 text-[10px] text-white/40 bg-white/5 rounded"
                    >Med</span>
                    <span
                        x-show="task.priority === 'low'"
                        class="inline-block px-2 py-0.5 text-[10px] text-white/30 bg-white/5 rounded"
                    >Low</span>
                </div>

                <!-- Assignee -->
                <div class="w-24 shrink-0 flex justify-center hidden md:flex">
                    <template x-if="task.assignee_ids && task.assignee_ids.length > 0">
                        <div class="flex -space-x-1.5">
                            <template x-for="assigneeId in (task.assignee_ids || []).slice(0, 3)" :key="assigneeId">
                                <div
                                    class="w-6 h-6 rounded-full bg-gradient-to-br from-accent to-purple-500 ring-2 ring-[#1c1c1e] flex items-center justify-center text-[9px] font-bold text-white"
                                    x-text="getAgentInitial(assigneeId)"
                                    :title="getAgentName(assigneeId)"
                                ></div>
                            </template>
                        </div>
                    </template>
                    <span x-show="!task.assignee_ids || task.assignee_ids.length === 0" class="text-[10px] text-white/20">—</span>
                </div>

                <!-- Status Badge -->
                <div class="w-20 shrink-0 text-center hidden lg:block">
                    <span
                        class="inline-block px-2 py-0.5 text-[10px] font-medium rounded capitalize"
                        :class="{
                            'bg-blue-500/20 text-blue-400': task.status === 'inbox',
                            'bg-cyan-500/20 text-cyan-400': task.status === 'assigned',
                            'bg-amber-500/20 text-amber-400': task.status === 'in_progress',
                            'bg-purple-500/20 text-purple-400': task.status === 'review',
                            'bg-green-500/20 text-green-400': task.status === 'done',
                            'bg-red-500/20 text-red-400': task.status === 'blocked'
                        }"
                        x-text="task.status.replace('_', ' ')"
                    ></span>
                </div>

                <!-- Time -->
                <div class="w-20 shrink-0 text-right">
                    <span class="text-[11px] text-white/30" x-text="formatMCDate(task.created_at)"></span>
                </div>

                <!-- Actions -->
                <div class="w-24 shrink-0 flex items-center justify-end gap-0.5" :class="isMCTaskRunning(task.id) ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'" style="transition: opacity 0.15s;">
                    <!-- Run Button -->
                    <button
                        x-show="task.assignee_ids && task.assignee_ids.length > 0 && !isMCTaskRunning(task.id) && task.status !== 'done'"
                        class="p-1.5 text-green-400/70 hover:text-green-400 hover:bg-green-500/10 rounded transition-all"
                        @click.stop="runMCTask(task.id, task.assignee_ids[0])"
                        title="Run Task"
                    >
                        <i data-lucide="play" class="w-3.5 h-3.5"></i>
                    </button>
                    <!-- Stop Button -->
                    <button
                        x-show="isMCTaskRunning(task.id)"
                        class="p-1.5 text-red-400/70 hover:text-red-400 hover:bg-red-500/10 rounded transition-all"
                        @click.stop="stopMCTask(task.id)"
                        title="Stop Task"
                    >
                        <i data-lucide="square" class="w-3.5 h-3.5"></i>
                    </button>
                    <!-- Edit Button -->
                    <button
                        x-show="!isMCTaskRunning(task.id)"
                        class="p-1.5 text-white/30 hover:text-white hover:bg-white/10 rounded transition-all"
                        @click.stop="selectMCTask(task)"
                        title="View Details"
                    >
                        <i data-lucide="eye" class="w-3.5 h-3.5"></i>
                    </button>
                    <!-- Delete Button -->
                    <button
                        x-show="!isMCTaskRunning(task.id)"
                        class="p-1.5 text-white/30 hover:text-red-400 hover:bg-red-500/10 rounded transition-all"
                        @click.stop="deleteMCTask(task.id)"
                        title="Delete"
                    >
                        <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
                    </button>
                </div>
            </div>
        </template>
    </div>
</div>
