<!--
  Mudabbir - Task Detail Sheet Component

  Created: 2026-02-05
  Updated: 2026-02-12 — Added SKIPPED status support:
    - Skipped option in status dropdown
    - Gray color for status dot and badge

  Features:
  - Full-height right-sliding panel
  - Task title and description
  - Status and priority selectors (including skipped)
  - Assignee management (add/remove agents)
  - Run/Stop task buttons
  - Live output panel during execution
  - Deliverables section
  - Comments/thread section
  - Timestamps
-->

<!-- Task Detail Sheet (Full-height Right Slide) -->
<div
    x-show="missionControl.selectedTask"
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-200"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    class="fixed inset-0 z-50"
    @click.self="missionControl.selectedTask = null"
>
    <!-- Backdrop -->
    <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>

    <!-- Panel -->
    <div
        x-show="missionControl.selectedTask"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="translate-x-full"
        x-transition:enter-end="translate-x-0"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="translate-x-0"
        x-transition:leave-end="translate-x-full"
        class="fixed top-0 right-0 h-full w-full sm:w-[480px] lg:w-[540px] bg-[#1c1c1e] border-l border-white/10 shadow-2xl flex flex-col"
        @click.stop
    >
        <!-- Header -->
        <div class="flex items-center justify-between px-6 py-4 border-b border-white/10">
            <div class="flex items-center gap-3">
                <!-- Status indicator -->
                <div
                    class="w-3 h-3 rounded-full"
                    :class="{
                        'bg-blue-500': missionControl.selectedTask?.status === 'inbox',
                        'bg-cyan-500': missionControl.selectedTask?.status === 'assigned',
                        'bg-amber-500 animate-pulse': missionControl.selectedTask?.status === 'in_progress' || isMCTaskRunning(missionControl.selectedTask?.id),
                        'bg-purple-500': missionControl.selectedTask?.status === 'review',
                        'bg-green-500': missionControl.selectedTask?.status === 'done',
                        'bg-red-500': missionControl.selectedTask?.status === 'blocked',
                        'bg-gray-500': missionControl.selectedTask?.status === 'skipped'
                    }"
                ></div>
                <h3 class="text-base font-semibold text-white">Task Details</h3>
            </div>
            <button
                class="p-2 text-white/50 hover:text-white hover:bg-white/10 rounded-lg transition-all"
                @click="missionControl.selectedTask = null"
            >
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>

        <!-- Body -->
        <div class="flex-1 overflow-y-auto p-6">
            <template x-if="missionControl.selectedTask">
                <div class="space-y-6">
                        <div>
                            <h4 class="font-semibold text-white mb-1" x-text="missionControl.selectedTask.title"></h4>
                            <p class="text-sm text-white/50" x-text="missionControl.selectedTask.description || 'No description'"></p>
                        </div>

                        <!-- Status Selector -->
                        <div class="flex items-center gap-2">
                            <span class="text-xs text-white/40 w-16">Status</span>
                            <select
                                class="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-xs text-white focus:outline-none focus:border-accent"
                                x-model="missionControl.selectedTask.status"
                                @change="updateMCTaskStatus(missionControl.selectedTask.id, missionControl.selectedTask.status)"
                            >
                                <option value="inbox">Inbox</option>
                                <option value="assigned">Assigned</option>
                                <option value="in_progress">In Progress</option>
                                <option value="review">Review</option>
                                <option value="done">Done</option>
                                <option value="blocked">Blocked</option>
                                <option value="skipped">Skipped</option>
                            </select>
                        </div>

                        <!-- Priority -->
                        <div class="flex items-center gap-2">
                            <span class="text-xs text-white/40 w-16">Priority</span>
                            <div class="flex gap-1">
                                <button
                                    class="px-2 py-1 text-[10px] rounded transition-all"
                                    :class="missionControl.selectedTask.priority === 'low' ? 'bg-gray-500/30 text-gray-300' : 'bg-white/5 text-white/40 hover:bg-white/10'"
                                    @click="updateMCTaskPriority(missionControl.selectedTask.id, 'low')"
                                >Low</button>
                                <button
                                    class="px-2 py-1 text-[10px] rounded transition-all"
                                    :class="missionControl.selectedTask.priority === 'medium' ? 'bg-blue-500/30 text-blue-300' : 'bg-white/5 text-white/40 hover:bg-white/10'"
                                    @click="updateMCTaskPriority(missionControl.selectedTask.id, 'medium')"
                                >Medium</button>
                                <button
                                    class="px-2 py-1 text-[10px] rounded transition-all"
                                    :class="missionControl.selectedTask.priority === 'high' ? 'bg-amber-500/30 text-amber-300' : 'bg-white/5 text-white/40 hover:bg-white/10'"
                                    @click="updateMCTaskPriority(missionControl.selectedTask.id, 'high')"
                                >High</button>
                                <button
                                    class="px-2 py-1 text-[10px] rounded transition-all"
                                    :class="missionControl.selectedTask.priority === 'urgent' ? 'bg-red-500/30 text-red-300' : 'bg-white/5 text-white/40 hover:bg-white/10'"
                                    @click="updateMCTaskPriority(missionControl.selectedTask.id, 'urgent')"
                                >Urgent</button>
                            </div>
                        </div>

                        <!-- Assignee Section -->
                        <div class="pt-2">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-xs text-white/40 uppercase tracking-wider font-semibold flex items-center gap-1.5">
                                    <i data-lucide="user" class="w-3.5 h-3.5"></i>
                                    Assignee
                                </span>
                            </div>

                            <!-- Currently Assigned Agents -->
                            <div class="space-y-2 mb-3">
                                <template x-if="!missionControl.selectedTask.assignee_ids || missionControl.selectedTask.assignee_ids.length === 0">
                                    <div class="text-xs text-white/30 py-2">No agent assigned</div>
                                </template>
                                <template x-for="assigneeId in (missionControl.selectedTask.assignee_ids || [])" :key="assigneeId">
                                    <div class="flex items-center justify-between bg-white/5 rounded-lg px-3 py-2 group">
                                        <div class="flex items-center gap-3">
                                            <!-- Agent Avatar -->
                                            <div class="relative">
                                                <div
                                                    class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center text-xs font-bold text-white"
                                                    x-text="getAgentInitial(assigneeId)"
                                                ></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': getAgentById(assigneeId)?.status === 'active',
                                                        'bg-blue-500': getAgentById(assigneeId)?.status === 'idle',
                                                        'bg-amber-500': getAgentById(assigneeId)?.status === 'blocked',
                                                        'bg-gray-500': !getAgentById(assigneeId) || getAgentById(assigneeId)?.status === 'offline'
                                                    }"
                                                ></div>
                                            </div>
                                            <!-- Agent Info -->
                                            <div class="flex flex-col">
                                                <span class="text-sm font-medium text-white" x-text="getAgentName(assigneeId)"></span>
                                                <span class="text-[10px] text-white/40" x-text="getAgentById(assigneeId)?.role || 'Agent'"></span>
                                            </div>
                                        </div>
                                        <!-- Remove Button -->
                                        <button
                                            class="p-1.5 text-white/30 hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-all opacity-0 group-hover:opacity-100"
                                            @click="unassignAgentFromTask(missionControl.selectedTask.id, assigneeId)"
                                            title="Remove assignee"
                                            x-show="!isMCTaskRunning(missionControl.selectedTask.id)"
                                        >
                                            <i data-lucide="user-minus" class="w-4 h-4"></i>
                                        </button>
                                    </div>
                                </template>
                            </div>

                            <!-- Add Agent Dropdown -->
                            <div
                                x-show="getAvailableAgentsForTask(missionControl.selectedTask).length > 0"
                                class="relative"
                            >
                                <select
                                    class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-xs text-white focus:outline-none focus:border-accent appearance-none cursor-pointer"
                                    @change="assignAgentToTask(missionControl.selectedTask.id, $event.target.value); $event.target.value = ''"
                                >
                                    <option value="" class="bg-[#1c1c1e]">+ Add agent...</option>
                                    <template x-for="agent in getAvailableAgentsForTask(missionControl.selectedTask)" :key="agent.id">
                                        <option :value="agent.id" class="bg-[#1c1c1e]" x-text="agent.name + ' (' + agent.role + ')'"></option>
                                    </template>
                                </select>
                                <i data-lucide="chevron-down" class="absolute right-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-white/30 pointer-events-none"></i>
                            </div>

                            <!-- No agents available message -->
                            <div
                                x-show="missionControl.agents.length === 0"
                                class="text-xs text-white/30 py-2"
                            >
                                <a href="#" @click.prevent="missionControl.showCreateAgent = true" class="text-accent hover:underline">Create an agent</a> to assign tasks
                            </div>
                        </div>

                        <!-- Run/Stop Button -->
                        <div class="flex items-center gap-2 pt-2">
                            <button
                                x-show="missionControl.selectedTask.assignee_ids && missionControl.selectedTask.assignee_ids.length > 0 && !isMCTaskRunning(missionControl.selectedTask.id) && missionControl.selectedTask.status !== 'done'"
                                class="flex items-center gap-2 px-4 py-2 bg-green-500/20 hover:bg-green-500/30 text-green-400 rounded-lg text-sm font-medium transition-all"
                                @click="runMCTask(missionControl.selectedTask.id, missionControl.selectedTask.assignee_ids[0])"
                            >
                                <i data-lucide="play" class="w-4 h-4"></i>
                                Run Task
                            </button>
                            <button
                                x-show="isMCTaskRunning(missionControl.selectedTask.id)"
                                class="flex items-center gap-2 px-4 py-2 bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded-lg text-sm font-medium transition-all"
                                @click="stopMCTask(missionControl.selectedTask.id)"
                            >
                                <i data-lucide="square" class="w-4 h-4"></i>
                                Stop
                            </button>
                            <span
                                x-show="!missionControl.selectedTask.assignee_ids || missionControl.selectedTask.assignee_ids.length === 0"
                                class="text-xs text-white/40"
                            >
                                Assign an agent to run this task
                            </span>
                        </div>

                        <!-- Live Output Panel -->
                        <div
                            x-show="isMCTaskRunning(missionControl.selectedTask.id) || missionControl.liveOutput"
                            class="pt-3"
                        >
                            <div class="flex items-center gap-2 mb-2">
                                <div x-show="isMCTaskRunning(missionControl.selectedTask.id)" class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
                                <span class="text-xs text-white/40 uppercase tracking-wider font-semibold">Live Output</span>
                            </div>
                            <div
                                x-ref="liveOutputPanel"
                                class="bg-black/40 rounded-lg p-3 max-h-48 overflow-y-auto font-mono text-xs text-white/70 whitespace-pre-wrap"
                            >
                                <span x-text="missionControl.liveOutput || 'Waiting for output...'"></span>
                                <span x-show="isMCTaskRunning(missionControl.selectedTask.id)" class="inline-block w-2 h-4 bg-green-500 animate-pulse ml-0.5"></span>
                            </div>
                        </div>

                        <!-- Deliverables Section -->
                        <div
                            x-show="missionControl.selectedTask.status === 'done' || missionControl.selectedTask.status === 'skipped'"
                            x-init="$watch('missionControl.selectedTask', (task) => { if (task?.status === 'done' || task?.status === 'skipped') loadTaskDeliverables(task.id); })"
                            class="pt-3"
                        >
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-xs text-white/40 uppercase tracking-wider font-semibold flex items-center gap-1.5">
                                    <i data-lucide="file-text" class="w-3.5 h-3.5"></i>
                                    Deliverables
                                </span>
                                <span
                                    x-show="missionControl.deliverablesLoading"
                                    class="text-[10px] text-white/30"
                                >Loading...</span>
                            </div>
                            <!-- Empty state -->
                            <div
                                x-show="!missionControl.deliverablesLoading && missionControl.taskDeliverables.length === 0"
                                class="text-xs text-white/30 py-2"
                            >No deliverables yet</div>
                            <!-- Deliverables list -->
                            <div class="space-y-2">
                                <template x-for="doc in missionControl.taskDeliverables" :key="doc.id">
                                    <div class="bg-purple-500/10 border border-purple-500/20 rounded-lg p-3">
                                        <div class="flex items-center gap-2 mb-2">
                                            <i data-lucide="file-check" class="w-4 h-4 text-purple-400"></i>
                                            <span class="text-sm font-medium text-white truncate" x-text="doc.title"></span>
                                        </div>
                                        <div class="text-xs text-white/50 line-clamp-3" x-text="doc.content?.substring(0, 200) + (doc.content?.length > 200 ? '...' : '')"></div>
                                        <div class="flex items-center gap-2 mt-2 text-[10px] text-white/30">
                                            <span x-text="formatMCDate(doc.created_at)"></span>
                                            <span class="text-white/20">·</span>
                                            <span x-text="(doc.content?.length || 0) + ' chars'"></span>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>

                        <!-- Comments/Thread Section -->
                        <div
                            class="pt-3"
                            x-init="$watch('missionControl.selectedTask', (task) => { if (task) loadTaskMessages(task.id); })"
                        >
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-xs text-white/40 uppercase tracking-wider font-semibold flex items-center gap-1.5">
                                    <i data-lucide="message-circle" class="w-3.5 h-3.5"></i>
                                    Comments
                                </span>
                                <span
                                    x-show="missionControl.messagesLoading"
                                    class="text-[10px] text-white/30"
                                >Loading...</span>
                            </div>
                            <!-- Messages list -->
                            <div
                                x-ref="taskMessagesPanel"
                                class="max-h-40 overflow-y-auto space-y-2 mb-2"
                            >
                                <template x-for="msg in missionControl.taskMessages" :key="msg.id">
                                    <div class="flex gap-2">
                                        <div
                                            class="shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold"
                                            :class="msg.from_agent_id === 'human' ? 'bg-blue-500/20 text-blue-400' : 'bg-purple-500/20 text-purple-400'"
                                        >
                                            <span x-text="msg.from_agent_id === 'human' ? 'Y' : getAgentInitial(msg.from_agent_id)"></span>
                                        </div>
                                        <div class="min-w-0 flex-1">
                                            <div class="text-xs text-white/70" x-text="msg.content"></div>
                                            <div class="text-[10px] text-white/30 mt-0.5" x-text="formatMCDate(msg.created_at)"></div>
                                        </div>
                                    </div>
                                </template>
                                <!-- Empty state -->
                                <div
                                    x-show="!missionControl.messagesLoading && missionControl.taskMessages.length === 0"
                                    class="text-xs text-white/30 py-2 text-center"
                                >No comments yet</div>
                            </div>
                            <!-- Input field -->
                            <div class="flex gap-2">
                                <input
                                    type="text"
                                    x-model="missionControl.messageInput"
                                    placeholder="Add a comment..."
                                    class="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-xs text-white focus:outline-none focus:border-accent placeholder-white/30"
                                    @keydown.enter="postTaskMessage(missionControl.selectedTask.id)"
                                >
                                <button
                                    class="px-3 py-1.5 bg-accent/20 hover:bg-accent/30 text-accent rounded-lg text-xs font-medium transition-all disabled:opacity-50"
                                    @click="postTaskMessage(missionControl.selectedTask.id)"
                                    :disabled="!missionControl.messageInput.trim()"
                                >
                                    <i data-lucide="send" class="w-3.5 h-3.5"></i>
                                </button>
                            </div>
                        </div>

                    <!-- Timestamps -->
                    <div class="pt-4 border-t border-white/5 text-xs text-white/30 space-y-1">
                        <p>Created <span x-text="formatMCDate(missionControl.selectedTask.created_at)"></span></p>
                        <p x-show="missionControl.selectedTask.started_at">Started <span x-text="formatMCDate(missionControl.selectedTask.started_at)"></span></p>
                        <p x-show="missionControl.selectedTask.completed_at">Completed <span x-text="formatMCDate(missionControl.selectedTask.completed_at)"></span></p>
                    </div>
                </div>
            </template>
        </div>
    </div>
</div>
