<!--
  Mudabbir - Start Deep Work Project Modal

  Two-step flow:
    1) Describe goal + Analyze
    2) Review structured analysis + Start planning (or edit/skip)
-->

<div
    x-show="missionControl.showStartProject"
    x-transition.opacity
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4"
    @click.self="missionControl.showStartProject = false; resetGoalAnalysis(true)"
>
    <div
        class="w-full max-w-lg bg-[#1c1c1e] border border-white/10 rounded-2xl shadow-2xl"
        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
    >
        <!-- Header -->
        <div class="flex items-center justify-between px-6 py-4 border-b border-white/5">
            <div class="flex items-center gap-3">
                <div class="w-8 h-8 rounded-lg bg-accent/10 flex items-center justify-center">
                    <i data-lucide="rocket" class="w-4 h-4 text-accent"></i>
                </div>
                <div>
                    <h3 class="text-base font-semibold text-white">Start a Project</h3>
                    <p
                        class="text-[11px] text-white/40"
                        x-text="missionControl.goalAnalysisStep === 'review' ? 'Review analysis before planning' : 'Describe what you want to build'"
                    ></p>
                </div>
            </div>
            <button
                class="p-2 text-white/50 hover:text-white hover:bg-white/10 rounded-lg"
                @click="missionControl.showStartProject = false; resetGoalAnalysis(true)"
                :disabled="missionControl.projectStarting"
            >
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>
        </div>

        <!-- Body -->
        <div class="p-6 space-y-4">
            <!-- Step 1: Input -->
            <template x-if="missionControl.goalAnalysisStep === 'input'">
                <div class="space-y-4">
                    <div>
                        <label class="block text-[10px] text-white/40 uppercase tracking-wider mb-2 font-semibold">Project Description</label>
                        <textarea
                            x-model="missionControl.projectInput"
                            placeholder="Describe what you want to build in natural language..."
                            rows="5"
                            class="w-full bg-white/5 border border-white/10 rounded-xl py-3 px-4 text-sm text-white focus:outline-none focus:border-accent placeholder-white/20 resize-none leading-relaxed"
                            :disabled="missionControl.goalAnalyzing || missionControl.projectStarting"
                            @keydown.meta.enter="analyzeGoal()"
                            @keydown.ctrl.enter="analyzeGoal()"
                        ></textarea>
                        <p class="text-[10px] text-white/30 mt-1.5">
                            We'll analyze your goal first, then start planning.
                            <span class="text-white/40">Cmd+Enter to analyze.</span>
                        </p>
                    </div>

                    <div x-show="missionControl.goalAnalyzing" class="bg-accent/5 border border-accent/20 rounded-xl p-4">
                        <div class="flex items-center gap-3">
                            <div class="w-5 h-5 border-2 border-accent/30 border-t-accent rounded-full animate-spin"></div>
                            <span class="text-sm text-accent">Analyzing your goal...</span>
                        </div>
                    </div>

                    <div class="flex gap-2">
                        <button
                            class="flex-1 py-3 bg-accent hover:bg-accent/90 text-white font-medium rounded-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                            @click="analyzeGoal()"
                            :disabled="!missionControl.projectInput.trim() || missionControl.projectInput.trim().length < 10 || missionControl.goalAnalyzing"
                        >
                            <i data-lucide="target" class="w-4 h-4"></i>
                            Analyze Goal
                        </button>
                        <button
                            class="px-4 py-3 bg-white/5 hover:bg-white/10 text-white/60 hover:text-white font-medium rounded-xl transition-all disabled:opacity-50 border border-white/10"
                            @click="startDeepWork()"
                            :disabled="!missionControl.projectInput.trim() || missionControl.projectInput.trim().length < 10 || missionControl.goalAnalyzing"
                            title="Skip analysis and start planning directly"
                        >
                            Skip
                        </button>
                    </div>
                </div>
            </template>

            <!-- Step 2: Review -->
            <template x-if="missionControl.goalAnalysisStep === 'review' && missionControl.goalAnalysis">
                <div class="space-y-4">
                    <div class="bg-white/5 border border-white/10 rounded-xl p-4">
                        <p class="text-sm text-white leading-relaxed" x-text="missionControl.goalAnalysis.goal"></p>
                    </div>

                    <div class="flex gap-3">
                        <div class="flex-1 rounded-xl border border-white/10 p-3">
                            <div class="text-[10px] text-white/40 uppercase tracking-wider mb-1.5 font-semibold">Domain</div>
                            <div class="flex items-center gap-2">
                                <div class="w-7 h-7 rounded-lg flex items-center justify-center" :class="getDomainInfo(missionControl.goalAnalysis.domain).color">
                                    <i :data-lucide="getDomainInfo(missionControl.goalAnalysis.domain).icon" class="w-3.5 h-3.5"></i>
                                </div>
                                <span class="text-sm text-white font-medium" x-text="getDomainInfo(missionControl.goalAnalysis.domain).label"></span>
                            </div>
                            <div x-show="missionControl.goalAnalysis.sub_domains && missionControl.goalAnalysis.sub_domains.length > 0" class="flex flex-wrap gap-1 mt-2">
                                <template x-for="sub in (missionControl.goalAnalysis.sub_domains || []).slice(0, 4)" :key="sub">
                                    <span class="text-[10px] px-1.5 py-0.5 rounded bg-white/5 text-white/40" x-text="sub"></span>
                                </template>
                            </div>
                        </div>

                        <div class="w-28 rounded-xl border border-white/10 p-3">
                            <div class="text-[10px] text-white/40 uppercase tracking-wider mb-1.5 font-semibold">Complexity</div>
                            <div class="flex items-center gap-2">
                                <span class="text-lg font-bold px-2 py-0.5 rounded-lg border" :class="getComplexityInfo(missionControl.goalAnalysis.complexity).color" x-text="missionControl.goalAnalysis.complexity"></span>
                            </div>
                            <div class="text-[10px] text-white/30 mt-1" x-text="'~' + missionControl.goalAnalysis.estimated_phases + ' phases'"></div>
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-3">
                        <div class="rounded-xl border border-white/10 p-3">
                            <div class="text-[10px] text-white/40 uppercase tracking-wider mb-2 font-semibold flex items-center gap-1.5">
                                <i data-lucide="bot" class="w-3 h-3"></i> AI handles
                            </div>
                            <ul class="space-y-1">
                                <template x-for="cap in (missionControl.goalAnalysis.ai_capabilities || []).slice(0, 4)" :key="cap">
                                    <li class="text-[11px] text-white/60 leading-tight" x-text="cap"></li>
                                </template>
                            </ul>
                        </div>
                        <div class="rounded-xl border border-white/10 p-3">
                            <div class="text-[10px] text-white/40 uppercase tracking-wider mb-2 font-semibold flex items-center gap-1.5">
                                <i data-lucide="user" class="w-3 h-3"></i> You handle
                            </div>
                            <ul class="space-y-1">
                                <template x-for="req in (missionControl.goalAnalysis.human_requirements || []).slice(0, 4)" :key="req">
                                    <li class="text-[11px] text-white/60 leading-tight" x-text="req"></li>
                                </template>
                            </ul>
                        </div>
                    </div>

                    <div x-show="missionControl.goalAnalysis.clarifications_needed && missionControl.goalAnalysis.clarifications_needed.length > 0">
                        <div class="bg-amber-500/5 border border-amber-500/20 rounded-xl p-3">
                            <div class="text-[10px] text-amber-400 uppercase tracking-wider mb-2 font-semibold flex items-center gap-1.5">
                                <i data-lucide="help-circle" class="w-3 h-3"></i> Consider before starting
                            </div>
                            <ul class="space-y-1.5">
                                <template x-for="q in missionControl.goalAnalysis.clarifications_needed" :key="q">
                                    <li class="text-[11px] text-amber-200/60 leading-tight" x-text="q"></li>
                                </template>
                            </ul>
                        </div>
                    </div>

                    <!-- Research Depth -->
                    <div>
                        <label class="block text-[10px] text-white/40 uppercase tracking-wider mb-2 font-semibold">Research Depth</label>
                        <div class="flex gap-2">
                            <button
                                class="flex-1 flex flex-col items-center gap-1 px-3 py-2 rounded-xl border text-center transition-all"
                                :class="missionControl.researchDepth === 'none' ? 'bg-white/10 border-white/30 text-white/80' : 'bg-white/[0.02] border-white/10 text-white/40 hover:border-white/20 hover:text-white/60'"
                                @click="missionControl.researchDepth = 'none'"
                                :disabled="missionControl.projectStarting"
                            >
                                <i data-lucide="circle-off" class="w-3.5 h-3.5"></i>
                                <span class="text-[11px] font-medium">None</span>
                            </button>
                            <button
                                class="flex-1 flex flex-col items-center gap-1 px-3 py-2 rounded-xl border text-center transition-all"
                                :class="missionControl.researchDepth === 'quick' ? 'bg-green-500/10 border-green-500/30 text-green-400' : 'bg-white/[0.02] border-white/10 text-white/40 hover:border-white/20 hover:text-white/60'"
                                @click="missionControl.researchDepth = 'quick'"
                                :disabled="missionControl.projectStarting"
                            >
                                <i data-lucide="zap" class="w-3.5 h-3.5"></i>
                                <span class="text-[11px] font-medium">Quick</span>
                            </button>
                            <button
                                class="flex-1 flex flex-col items-center gap-1 px-3 py-2 rounded-xl border text-center transition-all"
                                :class="missionControl.researchDepth === 'standard' ? 'bg-accent/10 border-accent/30 text-accent' : 'bg-white/[0.02] border-white/10 text-white/40 hover:border-white/20 hover:text-white/60'"
                                @click="missionControl.researchDepth = 'standard'"
                                :disabled="missionControl.projectStarting"
                            >
                                <i data-lucide="search" class="w-3.5 h-3.5"></i>
                                <span class="text-[11px] font-medium">Standard</span>
                            </button>
                            <button
                                class="flex-1 flex flex-col items-center gap-1 px-3 py-2 rounded-xl border text-center transition-all"
                                :class="missionControl.researchDepth === 'deep' ? 'bg-purple-500/10 border-purple-500/30 text-purple-400' : 'bg-white/[0.02] border-white/10 text-white/40 hover:border-white/20 hover:text-white/60'"
                                @click="missionControl.researchDepth = 'deep'"
                                :disabled="missionControl.projectStarting"
                            >
                                <i data-lucide="globe" class="w-3.5 h-3.5"></i>
                                <span class="text-[11px] font-medium">Deep</span>
                            </button>
                        </div>
                    </div>

                    <div class="flex items-center justify-between text-[10px] text-white/30">
                        <span>Confidence: <span class="text-white/50" x-text="Math.round((missionControl.goalAnalysis.confidence || 0) * 100) + '%'">0%</span></span>
                        <button class="text-white/40 hover:text-white/60 underline" @click="resetGoalAnalysis()">Edit description</button>
                    </div>

                    <div x-show="(missionControl.goalAnalysis.confidence || 0) < 0.7" class="bg-amber-500/5 border border-amber-500/20 rounded-xl p-3">
                        <div class="flex items-center gap-2 text-[11px] text-amber-300/70">
                            <i data-lucide="alert-triangle" class="w-3.5 h-3.5 shrink-0"></i>
                            <span>Low confidence in analysis. Consider adding more detail.</span>
                        </div>
                    </div>

                    <div x-show="missionControl.projectStarting" class="bg-blue-500/5 border border-blue-500/20 rounded-xl p-4">
                        <div class="flex items-center gap-3 mb-3">
                            <div class="w-6 h-6 border-2 border-blue-500/30 border-t-blue-500 rounded-full animate-spin"></div>
                            <span class="text-sm text-blue-400 font-medium" x-text="getPlanningPhaseInfo().label + '...'"></span>
                        </div>
                        <p class="text-xs text-white/40" x-text="missionControl.planningMessage || 'This may take a minute...'"></p>
                        <div class="flex items-center gap-2 mt-3 flex-wrap">
                            <template x-for="(phase, i) in ['Goal', 'Research', 'PRD', 'Tasks', 'Team']" :key="phase">
                                <div class="flex items-center gap-1">
                                    <div class="w-1.5 h-1.5 rounded-full transition-all" :class="getPlanningPhaseInfo().step > i ? 'bg-blue-400' : (getPlanningPhaseInfo().step === i ? 'bg-blue-400 animate-pulse' : 'bg-white/10')"></div>
                                    <span class="text-[9px] transition-all" :class="getPlanningPhaseInfo().step >= i ? 'text-blue-400' : 'text-white/20'" x-text="phase"></span>
                                </div>
                            </template>
                        </div>
                    </div>

                    <div class="flex gap-2">
                        <button
                            class="flex-1 py-3 bg-accent hover:bg-accent/90 text-white font-medium rounded-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                            @click="startDeepWork()"
                            :disabled="missionControl.projectStarting"
                        >
                            <template x-if="!missionControl.projectStarting">
                                <span class="flex items-center gap-2">
                                    <i data-lucide="rocket" class="w-4 h-4"></i>
                                    Start Planning
                                </span>
                            </template>
                            <template x-if="missionControl.projectStarting">
                                <span class="flex items-center gap-2">
                                    <div class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
                                    Planning...
                                </span>
                            </template>
                        </button>
                    </div>
                </div>
            </template>
        </div>
    </div>
</div>
