<!--
  Mudabbir - Project Detail Sheet Component

  Created: 2026-02-12
  Updated: 2026-02-12 — Added "Add Task" button in task breakdown section
    and inline create-project-task modal for manually adding tasks to a project.

  Full-height right-sliding panel for Deep Work project details.
  Shows project info, PRD, task breakdown with dependencies, team,
  and progress. Includes approve/pause/resume actions.
-->

<!-- Project Detail Sheet (Full-height Right Slide) -->
<div
    x-show="missionControl.showProjectDetail && missionControl.selectedProject"
    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.showProjectDetail = false"
>
    <!-- Backdrop -->
    <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>

    <!-- Panel -->
    <div
        x-show="missionControl.showProjectDetail && missionControl.selectedProject"
        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-[540px] lg:w-[640px] 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">
                <div
                    class="w-3 h-3 rounded-full"
                    :class="{
                        'bg-gray-500': missionControl.selectedProject?.status === 'draft',
                        'bg-blue-500 animate-pulse': missionControl.selectedProject?.status === 'planning',
                        'bg-amber-500': missionControl.selectedProject?.status === 'awaiting_approval',
                        'bg-green-500 animate-pulse': missionControl.selectedProject?.status === 'executing',
                        'bg-orange-500': missionControl.selectedProject?.status === 'paused',
                        'bg-emerald-500': missionControl.selectedProject?.status === 'completed',
                        'bg-red-500': missionControl.selectedProject?.status === 'failed'
                    }"
                ></div>
                <h3 class="text-base font-semibold text-white">Project Details</h3>
            </div>
            <button
                class="p-2 text-white/50 hover:text-white hover:bg-white/10 rounded-lg transition-all"
                @click="missionControl.showProjectDetail = false"
            >
                <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.selectedProject">
                <div class="space-y-6">
                    <!-- Title + Status -->
                    <div>
                        <div class="flex items-center gap-2 mb-2">
                            <span
                                class="px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider rounded-full"
                                :class="getProjectStatusColor(missionControl.selectedProject.status)"
                                x-text="getProjectStatusLabel(missionControl.selectedProject.status)"
                            ></span>
                        </div>
                        <h4 class="text-lg font-semibold text-white mb-1" x-text="missionControl.selectedProject.title"></h4>
                        <p class="text-sm text-white/50" x-text="missionControl.selectedProject.description"></p>
                    </div>

                    <!-- Action Buttons -->
                    <div class="flex items-center gap-2">
                        <button
                            x-show="missionControl.selectedProject.status === 'awaiting_approval'"
                            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="approveProject(missionControl.selectedProject.id)"
                        >
                            <i data-lucide="check-circle" class="w-4 h-4"></i>
                            Approve & Start Execution
                        </button>
                        <button
                            x-show="missionControl.selectedProject.status === 'executing'"
                            class="flex items-center gap-2 px-4 py-2 bg-orange-500/20 hover:bg-orange-500/30 text-orange-400 rounded-lg text-sm font-medium transition-all"
                            @click="pauseProject(missionControl.selectedProject.id)"
                        >
                            <i data-lucide="pause" class="w-4 h-4"></i>
                            Pause
                        </button>
                        <button
                            x-show="missionControl.selectedProject.status === 'paused'"
                            class="flex items-center gap-2 px-4 py-2 bg-accent/20 hover:bg-accent/30 text-accent rounded-lg text-sm font-medium transition-all"
                            @click="resumeProject(missionControl.selectedProject.id)"
                        >
                            <i data-lucide="play" class="w-4 h-4"></i>
                            Resume
                        </button>
                    </div>

                    <!-- Progress -->
                    <div x-show="missionControl.projectProgress">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-xs text-white/40 uppercase tracking-wider font-semibold">Progress</span>
                            <span class="text-sm text-white/50">
                                <span class="text-white font-semibold" x-text="missionControl.projectProgress?.completed || 0"></span>
                                / <span x-text="missionControl.projectProgress?.total || 0"></span> tasks completed
                            </span>
                        </div>
                        <div class="h-2 rounded-full bg-white/5 overflow-hidden">
                            <div
                                class="h-full rounded-full transition-all duration-500"
                                :class="missionControl.selectedProject.status === 'completed' ? 'bg-emerald-500' : 'bg-accent'"
                                :style="'width: ' + (missionControl.projectProgress?.percent || 0) + '%'"
                            ></div>
                        </div>
                    </div>

                    <!-- PRD Document -->
                    <div x-show="missionControl.projectPrd">
                        <div class="flex items-center gap-2 mb-3">
                            <i data-lucide="file-text" class="w-4 h-4 text-white/40"></i>
                            <span class="text-xs text-white/40 uppercase tracking-wider font-semibold">PRD Document</span>
                        </div>
                        <div class="bg-black/30 rounded-xl p-4 max-h-64 overflow-y-auto border border-white/5">
                            <div class="prose prose-invert prose-sm text-sm text-white/70 leading-relaxed" x-html="typeof marked !== 'undefined' ? DOMPurify.sanitize(marked.parse(missionControl.projectPrd?.content || '')) : (missionControl.projectPrd?.content || '')"></div>
                        </div>
                    </div>

                    <!-- Team -->
                    <div x-show="missionControl.selectedProject.team_agent_ids && missionControl.selectedProject.team_agent_ids.length > 0">
                        <div class="flex items-center gap-2 mb-3">
                            <i data-lucide="users" class="w-4 h-4 text-white/40"></i>
                            <span class="text-xs text-white/40 uppercase tracking-wider font-semibold">Team</span>
                        </div>
                        <div class="flex flex-wrap gap-2">
                            <template x-for="agentId in missionControl.selectedProject.team_agent_ids" :key="agentId">
                                <div class="flex items-center gap-2 px-3 py-2 bg-white/5 rounded-lg">
                                    <div
                                        class="w-7 h-7 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="getAgentInitial(agentId)"
                                    ></div>
                                    <div class="flex flex-col">
                                        <span class="text-xs font-medium text-white/80" x-text="getAgentName(agentId)"></span>
                                        <span class="text-[10px] text-white/40" x-text="getAgentById(agentId)?.role || 'Agent'"></span>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>

                    <!-- Task Breakdown -->
                    <div>
                        <div class="flex items-center justify-between mb-3">
                            <div class="flex items-center gap-2">
                                <i data-lucide="list-checks" class="w-4 h-4 text-white/40"></i>
                                <span class="text-xs text-white/40 uppercase tracking-wider font-semibold">
                                    Task Breakdown
                                    <span class="text-white/30 normal-case" x-text="'(' + missionControl.projectTasks.length + ')'"></span>
                                </span>
                            </div>
                            <button
                                class="flex items-center gap-1.5 px-2.5 py-1 text-[11px] font-medium text-accent hover:text-white bg-accent/10 hover:bg-accent/20 rounded-lg transition-all"
                                @click="missionControl.showCreateProjectTask = true"
                            >
                                <i data-lucide="plus" class="w-3 h-3"></i>
                                Add Task
                            </button>
                        </div>
                        <div class="space-y-2">
                            <template x-for="task in missionControl.projectTasks" :key="task.id">
                                <div
                                    class="flex items-start gap-3 p-3 rounded-lg bg-white/[0.02] border border-white/5 hover:border-white/10 transition-all cursor-pointer"
                                    @click="selectMCTask(task); missionControl.showProjectDetail = false"
                                >
                                    <!-- Status indicator -->
                                    <div
                                        class="mt-1 w-3 h-3 rounded-full shrink-0"
                                        :class="{
                                            'bg-blue-500': task.status === 'inbox',
                                            'bg-cyan-500': task.status === 'assigned',
                                            'bg-amber-500 animate-pulse': task.status === 'in_progress',
                                            'bg-purple-500': task.status === 'review',
                                            'bg-green-500': task.status === 'done',
                                            'bg-red-500': task.status === 'blocked'
                                        }"
                                    ></div>
                                    <div class="flex-1 min-w-0">
                                        <div class="flex items-center gap-2 mb-0.5">
                                            <span
                                                class="text-sm font-medium"
                                                :class="task.status === 'done' ? 'text-white/40 line-through' : 'text-white'"
                                                x-text="task.title"
                                            ></span>
                                        </div>
                                        <p x-show="task.description" class="text-xs text-white/40 line-clamp-2" x-text="task.description"></p>
                                        <!-- Tags row -->
                                        <div class="flex items-center gap-2 mt-1.5">
                                            <!-- Type badge -->
                                            <span
                                                x-show="task.task_type && task.task_type !== 'agent'"
                                                class="text-[9px] px-1.5 py-0.5 rounded font-medium"
                                                :class="task.task_type === 'human' ? 'bg-amber-500/20 text-amber-400' : 'bg-purple-500/20 text-purple-400'"
                                                x-text="task.task_type"
                                            ></span>
                                            <!-- Priority -->
                                            <span
                                                x-show="task.priority === 'urgent' || task.priority === 'high'"
                                                class="text-[9px] px-1.5 py-0.5 rounded font-medium"
                                                :class="task.priority === 'urgent' ? 'bg-red-500/20 text-red-400' : 'bg-amber-500/20 text-amber-400'"
                                                x-text="task.priority"
                                            ></span>
                                            <!-- Blocked by count -->
                                            <span
                                                x-show="task.blocked_by && task.blocked_by.length > 0 && task.status !== 'done'"
                                                class="text-[9px] text-white/30"
                                            >
                                                blocked by <span x-text="task.blocked_by.length"></span>
                                            </span>
                                            <!-- Estimated time -->
                                            <span
                                                x-show="task.estimated_minutes"
                                                class="text-[9px] text-white/30"
                                                x-text="'~' + task.estimated_minutes + 'min'"
                                            ></span>
                                        </div>
                                    </div>
                                    <!-- Assignee avatar -->
                                    <div
                                        x-show="task.assignee_ids && task.assignee_ids.length > 0"
                                        class="w-6 h-6 shrink-0 rounded-full bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center text-[9px] font-bold text-white"
                                        x-text="getAgentInitial(task.assignee_ids?.[0])"
                                        :title="getAgentName(task.assignee_ids?.[0])"
                                    ></div>
                                </div>
                            </template>
                        </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.selectedProject.created_at)"></span></p>
                        <p x-show="missionControl.selectedProject.started_at">Started <span x-text="formatMCDate(missionControl.selectedProject.started_at)"></span></p>
                        <p x-show="missionControl.selectedProject.completed_at">Completed <span x-text="formatMCDate(missionControl.selectedProject.completed_at)"></span></p>
                    </div>
                </div>
            </template>
        </div>
    </div>

    <!-- Add Task to Project Modal (overlays project detail) -->
    <div
        x-show="missionControl.showCreateProjectTask"
        x-transition.opacity
        class="absolute inset-0 z-10 flex items-center justify-center bg-black/60 backdrop-blur-sm"
        @click.self="missionControl.showCreateProjectTask = false"
    >
        <div
            class="w-full max-w-md bg-[#1c1c1e] border border-white/10 rounded-2xl shadow-2xl mx-4"
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="scale-95 opacity-0"
            x-transition:enter-end="scale-100 opacity-100"
            @click.stop
        >
            <div class="flex items-center justify-between px-5 py-3 border-b border-white/5">
                <h3 class="text-sm font-semibold text-white">Add Task to Project</h3>
                <button class="p-1.5 text-white/50 hover:text-white hover:bg-white/10 rounded-lg" @click="missionControl.showCreateProjectTask = false">
                    <i data-lucide="x" class="w-4 h-4"></i>
                </button>
            </div>
            <div class="p-5 space-y-3">
                <input
                    type="text"
                    x-model="missionControl.projectTaskForm.title"
                    placeholder="Task title"
                    class="w-full bg-white/5 border border-white/10 rounded-xl py-2.5 px-4 text-sm text-white focus:outline-none focus:border-accent placeholder-white/30"
                    @keydown.enter="createProjectTask()"
                >
                <textarea
                    x-model="missionControl.projectTaskForm.description"
                    placeholder="Description (optional)"
                    rows="3"
                    class="w-full bg-white/5 border border-white/10 rounded-xl py-2.5 px-4 text-sm text-white focus:outline-none focus:border-accent placeholder-white/30 resize-none"
                ></textarea>
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="text-[10px] text-white/40 uppercase tracking-wider mb-1.5 block">Priority</label>
                        <select
                            x-model="missionControl.projectTaskForm.priority"
                            class="w-full bg-white/5 border border-white/10 rounded-lg py-2 px-3 text-sm text-white focus:outline-none focus:border-accent"
                        >
                            <option value="low">Low</option>
                            <option value="medium">Medium</option>
                            <option value="high">High</option>
                            <option value="urgent">Urgent</option>
                        </select>
                    </div>
                    <div>
                        <label class="text-[10px] text-white/40 uppercase tracking-wider mb-1.5 block">Assign to</label>
                        <select
                            x-model="missionControl.projectTaskForm.assignee"
                            class="w-full bg-white/5 border border-white/10 rounded-lg py-2 px-3 text-sm text-white focus:outline-none focus:border-accent"
                        >
                            <option value="">Unassigned</option>
                            <template x-for="agent in missionControl.agents" :key="agent.id">
                                <option :value="agent.id" x-text="agent.name"></option>
                            </template>
                        </select>
                    </div>
                </div>
                <input
                    type="text"
                    x-model="missionControl.projectTaskForm.tags"
                    placeholder="Tags (comma-separated)"
                    class="w-full bg-white/5 border border-white/10 rounded-xl py-2.5 px-4 text-sm text-white focus:outline-none focus:border-accent placeholder-white/30"
                >
                <button
                    class="w-full py-2.5 bg-accent hover:bg-accent/90 text-white font-medium rounded-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed text-sm"
                    @click="createProjectTask()"
                    :disabled="!missionControl.projectTaskForm.title"
                >
                    Add Task
                </button>
            </div>
        </div>
    </div>
</div>
