{% extends "base.html" %}

{% block content %}
<div class="space-y-12">
    <!-- Header HUD -->
    <!-- Header HUD -->
    <header class="flex justify-between items-end border-b border-white/5 pb-10">
        <div class="space-y-2">
            <div class="flex items-center gap-3">
                <div class="h-0.5 w-10 bg-primary"></div>
                <span class="font-mono text-[10px] text-primary tracking-[0.4em] uppercase">Conceptual_Core // Focus_Active</span>
            </div>
            <h1 class="text-6xl font-light tracking-tighter text-white uppercase font-neural">{{ idea.title }}</h1>
        </div>
        
        <div class="text-right space-y-4">
            {% set success_runs = runs | selectattr("status", "equalto", "succeeded") | list %}
            {% if success_runs %}
            <a href="/app/reports/{{ idea.id }}" class="glass-panel px-8 py-3 text-[11px] font-mono tracking-[0.2em] text-secondary border-secondary/30 hover:bg-secondary/10 transition-all uppercase flex items-center gap-3 shadow-[0_0_30px_rgba(105,246,184,0.1)]">
                <span class="material-symbols-outlined text-sm">database</span>
                Access_Synthesis_Report
            </a>
            {% endif %}
            <div class="font-mono text-[9px] text-white/30 tracking-widest uppercase">
                ID_NODE: {{ idea.id[:12] }} // STATUS: <span class="text-secondary">LINKED</span>
            </div>
        </div>
    </header>

    <!-- Validation Roadmap HUD -->
    <section class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
        {% set status = idea.status %}
        
        <!-- Graduation Alert -->
        {% if status == 'INTERVIEW_READY' %}
        <div class="col-span-full glass-panel p-6 border-l-4 border-secondary bg-secondary/10 flex items-center justify-between animate-in fade-in slide-in-from-top duration-1000">
            <div class="flex items-center gap-6">
                <div class="w-12 h-12 rounded-full bg-secondary/20 flex items-center justify-center">
                    <span class="material-symbols-outlined text-secondary animate-bounce">celebration</span>
                </div>
                <div>
                    <h4 class="text-secondary font-bold tracking-widest uppercase text-xs">Research Complete // Phase 02 Unlocked</h4>
                    <p class="text-white/60 text-[10px] uppercase font-mono mt-1">Idea has high market signal. Proceed to User Interviews below.</p>
                </div>
            </div>
            <button class="glass-panel px-6 py-2 text-secondary text-[9px] font-mono uppercase tracking-widest hover:bg-secondary/20">View_Interview_Kit</button>
        </div>
        {% elif status == 'EXPERIMENT_READY' %}
        <div class="col-span-full glass-panel p-6 border-l-4 border-orange-400 bg-orange-400/10 flex items-center justify-between animate-in fade-in slide-in-from-top duration-1000">
            <div class="flex items-center gap-6">
                <div class="w-12 h-12 rounded-full bg-orange-400/20 flex items-center justify-center">
                    <span class="material-symbols-outlined text-orange-400 animate-bounce">rocket_launch</span>
                </div>
                <div>
                    <h4 class="text-orange-400 font-bold tracking-widest uppercase text-xs">Strong Validation // Phase 03 Unlocked</h4>
                    <p class="text-white/60 text-[10px] uppercase font-mono mt-1">High confidence detected. Launching Behavioral Experiment is recommended.</p>
                </div>
            </div>
            <button class="glass-panel px-6 py-2 text-orange-400 text-[9px] font-mono uppercase tracking-widest hover:bg-orange-400/20">Setup_Smoke_Test</button>
        </div>
        {% endif %}
        
        <!-- Step 1: Desk Research -->
        <div class="glass-panel p-6 border-l-2 {% if status in ['DESK_RESEARCH', 'INTERVIEW_READY', 'EXPERIMENT_READY', 'VALIDATED', 'PIVOT_RECOMMENDED'] %}border-primary bg-primary/5{% else %}border-white/10 opacity-40{% endif %} transition-all duration-700">
            <div class="flex justify-between items-start mb-4">
                <span class="font-mono text-[9px] tracking-widest uppercase {% if status in ['DESK_RESEARCH', 'INTERVIEW_READY', 'EXPERIMENT_READY', 'VALIDATED', 'PIVOT_RECOMMENDED'] %}text-primary{% else %}text-white/20{% endif %}">Step_01 // Discovery</span>
                {% if status in ['INTERVIEW_READY', 'EXPERIMENT_READY', 'VALIDATED', 'PIVOT_RECOMMENDED'] %}
                <span class="material-symbols-outlined text-secondary text-sm">check_circle</span>
                {% elif status == 'DESK_RESEARCH' %}
                <span class="w-2 h-2 bg-primary rounded-full animate-pulse shadow-[0_0_10px_#a7a5ff]"></span>
                {% endif %}
            </div>
            <h3 class="text-xl font-light tracking-tight text-white mb-2">Desk Research</h3>
            <p class="text-[10px] font-mono text-white/30 uppercase leading-relaxed">Automated signal collection & battle-testing.</p>
        </div>

        <!-- Step 2: User Interviews -->
        <div class="glass-panel p-6 border-l-2 {% if status in ['INTERVIEW_READY', 'EXPERIMENT_READY', 'VALIDATED', 'PIVOT_RECOMMENDED'] %}border-secondary bg-secondary/5{% else %}border-white/10 opacity-40{% endif %} transition-all duration-700">
            <div class="flex justify-between items-start mb-4">
                <span class="font-mono text-[9px] tracking-widest uppercase {% if status in ['INTERVIEW_READY', 'EXPERIMENT_READY', 'VALIDATED', 'PIVOT_RECOMMENDED'] %}text-secondary{% else %}text-white/20{% endif %}">Step_02 // Human_Signal</span>
                {% if status in ['EXPERIMENT_READY', 'VALIDATED', 'PIVOT_RECOMMENDED'] %}
                <span class="material-symbols-outlined text-secondary text-sm">check_circle</span>
                {% elif status == 'INTERVIEW_READY' %}
                <span class="w-2 h-2 bg-secondary rounded-full animate-pulse shadow-[0_0_10px_#69f6b8]"></span>
                {% endif %}
            </div>
            <h3 class="text-xl font-light tracking-tight text-white mb-2">User Interviews</h3>
            <p class="text-[10px] font-mono text-white/30 uppercase leading-relaxed">Qualitative validation & problem-market fit.</p>
        </div>

        <!-- Step 3: Behavioral Test -->
        <div class="glass-panel p-6 border-l-2 {% if status in ['EXPERIMENT_READY', 'VALIDATED', 'PIVOT_RECOMMENDED'] %}border-orange-400 bg-orange-400/5{% else %}border-white/10 opacity-40{% endif %} transition-all duration-700">
            <div class="flex justify-between items-start mb-4">
                <span class="font-mono text-[9px] tracking-widest uppercase {% if status in ['EXPERIMENT_READY', 'VALIDATED', 'PIVOT_RECOMMENDED'] %}text-orange-400{% else %}text-white/20{% endif %}">Step_03 // High_Fidelity</span>
                {% if status in ['VALIDATED', 'PIVOT_RECOMMENDED'] %}
                <span class="material-symbols-outlined text-secondary text-sm">check_circle</span>
                {% elif status == 'EXPERIMENT_READY' %}
                <span class="w-2 h-2 bg-orange-400 rounded-full animate-pulse shadow-[0_0_10px_#fb923c]"></span>
                {% endif %}
            </div>
            <h3 class="text-xl font-light tracking-tight text-white mb-2">Behavioral Test</h3>
            <p class="text-[10px] font-mono text-white/30 uppercase leading-relaxed">Smoke tests & commitment verification.</p>
        </div>
    </section>

    <div class="grid grid-cols-12 gap-10">
        <!-- Main Logic Column -->
        <div class="col-span-12 lg:col-span-8 space-y-10">
            <!-- Content Archive (Form) -->
            <form action="/app/ideas/{{ idea.id }}/update" method="POST" x-data="{ devModal: false }" class="relative glass-panel p-10 group border-l-2 border-primary/40 bg-white/[0.01]">
                <div class="absolute top-0 right-0 p-6 font-mono text-[10px] text-white/10 uppercase tracking-[0.4em]">Definition_Stream_01</div>
                
                <div class="space-y-6">
                    <label class="block font-mono text-[10px] text-primary tracking-[0.3em] uppercase opacity-60">Input_Parameters</label>
                    <textarea name="description" 
                              class="w-full bg-transparent border-none focus:ring-0 text-white font-light text-3xl leading-relaxed resize-none h-80 placeholder:text-white/5 font-neural" 
                              placeholder="Initialize deep dive description here...">{{ idea.description }}</textarea>
                </div>
                
                <div class="flex justify-between items-center mt-10 pt-10 border-t border-white/5">
                    <div class="flex items-center gap-3 px-4 py-1.5 glass-panel rounded-full bg-black/50">
                        <span class="w-1.5 h-1.5 rounded-full bg-secondary animate-pulse"></span>
                        <span class="text-[9px] font-mono text-white/40 uppercase tracking-widest">Auto_Sync: Enabled</span>
                    </div>
                    
                    <div class="flex gap-6">
                        <button type="submit" class="text-primary text-[10px] font-mono uppercase tracking-[0.2em] hover:text-white transition-colors">_PUSH_UPDATE</button>
                        <button @click="devModal = true" type="button" class="text-secondary text-[10px] font-mono uppercase tracking-[0.2em] hover:text-white transition-colors">_BUILD_PROMPT</button>
                        <button type="button" class="text-white/40 text-[10px] font-mono uppercase tracking-[0.2em] hover:text-white transition-colors">_FORK_NODE</button>
                    </div>
                </div>

                <!-- Developer Prompt Modal (Nested inside form for data access, but shown globally via teleport or fixed) -->
                <div x-show="devModal" 
                     class="fixed inset-0 z-[200] flex items-center justify-center p-8 bg-black/95 backdrop-blur-3xl"
                     x-transition:enter="transition ease-out duration-500"
                     x-transition:enter-start="opacity-0 scale-105"
                     x-transition:enter-end="opacity-100 scale-100"
                     style="display: none;">
                    
                    <div class="glass-panel max-w-5xl w-full max-h-[85vh] flex flex-col overflow-hidden border-primary/30 shadow-[0_0_150px_rgba(167,165,255,0.15)]">
                        <div class="p-8 border-b border-white/10 flex justify-between items-center bg-white/[0.02]">
                            <div class="flex items-center gap-4">
                                <span class="material-symbols-outlined text-secondary animate-pulse">terminal</span>
                                <h3 class="font-mono text-xs font-bold tracking-[0.4em] uppercase">Deployment_Scaffold_Payload</h3>
                            </div>
                            <button @click="devModal = false" class="text-white/20 hover:text-white transition-all">
                                <span class="material-symbols-outlined">close</span>
                            </button>
                        </div>
                        
                        <div class="p-12 overflow-y-auto font-mono text-sm space-y-8">
                            <div class="p-4 bg-secondary/5 border-l-2 border-secondary text-[11px] text-secondary/80 leading-relaxed italic">
                                Scaffolding instruction sets for Cursor / Claude / Windsurf. Optimized for Phase_01 development.
                            </div>
                            
                            <div class="relative group">
                                <pre id="devPromptContent" class="bg-black/80 p-10 rounded-xl border border-white/5 text-[12px] leading-loose text-white/90 overflow-x-auto selection:bg-primary/30"># Role: Advanced Systems Architect
# Context: Developing "{{ idea.title }}"

## Objective
Convert conceptual requirements into a production-grade directory structure and core service logic.

## Idea Specification
{{ idea.description }}

## Structural Directives
1. Initialize Next.js 14+ with App Router.
2. Implement Shadcn/UI for consistent design tokens.
3. Scaffold the main {{ idea.title[:15] }} engine services.

Ready for initialization.</pre>
                                <button type="button" 
                                        onclick="copyPrompt()" 
                                        class="absolute top-6 right-6 glass-panel px-6 py-2 text-secondary text-[10px] hover:bg-secondary hover:text-black transition-all uppercase tracking-widest">
                                    Copy_Payload
                                </button>
                            </div>
                        </div>
                        
                        <div class="p-8 border-t border-white/10 bg-white/[0.02] flex justify-end">
                            <button @click="devModal = false" type="button" class="glass-panel px-10 py-3 text-white/60 text-[10px] font-mono tracking-widest uppercase hover:bg-white/10 transition-all border-none">
                                Exit_Deploy_View
                            </button>
                        </div>
                    </div>
                </div>
            </form>

            <!-- Execution History Card -->
            <div class="glass-panel overflow-hidden border-white/5 bg-white/[0.01]">
                <div class="px-8 py-5 border-b border-white/5 flex justify-between items-center bg-white/[0.02]">
                    <h3 class="font-mono text-[10px] font-bold tracking-[0.4em] uppercase text-white/40">Temporal_Logs // Runs</h3>
                    <div class="h-1 w-12 bg-white/10"></div>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-left font-mono text-[10px]">
                        <thead class="text-white/20 border-b border-white/5 uppercase tracking-[0.2em]">
                            <tr>
                                <th class="px-8 py-5 font-normal">Stream_ID</th>
                                <th class="px-8 py-5 font-normal">Status</th>
                                <th class="px-8 py-5 font-normal">Sync_Date</th>
                                <th class="px-8 py-5 font-normal text-right">Pointer</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-white/5">
                            {% for run in runs %}
                            <tr class="hover:bg-white/[0.03] transition-colors group">
                                <td class="px-8 py-5 text-white/60 font-medium">{{ run.id[:10] }}...</td>
                                <td class="px-8 py-5">
                                    <div class="flex items-center gap-2">
                                        <div class="w-1.5 h-1.5 rounded-full {% if run.status == 'succeeded' %}bg-secondary shadow-[0_0_8px_#69f6b8]{% elif run.status == 'failed' %}bg-error shadow-[0_0_8px_#ff6e84]{% else %}bg-primary animate-pulse{% endif %}"></div>
                                        <span class="{% if run.status == 'succeeded' %}text-secondary{% elif run.status == 'failed' %}text-error{% else %}text-primary{% endif %} uppercase tracking-widest">{{ run.status }}</span>
                                    </div>
                                </td>
                                <td class="px-8 py-5 text-white/20">{{ run.created_at }}</td>
                                <td class="px-8 py-5 text-right">
                                    <a href="/app/runs/{{ run.id }}" class="text-primary/60 hover:text-primary transition-colors underline underline-offset-4 decoration-primary/20">ACCESS_RUN</a>
                                </td>
                            </tr>
                            {% else %}
                            <tr>
                                <td colspan="4" class="px-8 py-12 text-center text-white/10 uppercase tracking-[0.5em]">No_Execution_Cycles_Found</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- System Controls Column -->
        <div class="col-span-12 lg:col-span-4 space-y-10">
            <!-- Deployment Console -->
            <div class="glass-panel p-10 relative overflow-hidden bg-black/40 border-primary/20">
                <div class="scanning-line opacity-10"></div>
                <h3 class="font-mono text-xs font-bold tracking-[0.5em] mb-12 border-b border-white/10 pb-6 uppercase text-primary">Ignition_Protocol</h3>
                
                <form action="/app/runs/create" method="POST" class="space-y-10">
                    <input type="hidden" name="idea_id" value="{{ idea.id }}">
                    <input type="hidden" name="mode" value="{{ default_mode }}">
                    
                    <div class="space-y-6">
                        <label class="font-mono text-[9px] text-white/30 tracking-[0.3em] uppercase">Verification_Level</label>
                        <select name="tier" class="w-full bg-black/60 border border-white/10 text-white font-mono text-[10px] py-4 px-4 focus:ring-primary focus:border-primary uppercase tracking-[0.2em] appearance-none">
                            <option value="quick">PROTO_01: QUICK_SCAN</option>
                            <option value="medium" selected>PROTO_02: DEEP_SYNTHESIS</option>
                            <option value="comprehensive">PROTO_03: ABSOLUTE_VAL</option>
                        </select>
                    </div>

                    <div class="space-y-6">
                        <label class="font-mono text-[9px] text-white/30 tracking-[0.3em] uppercase">Intelligence_Grid</label>
                        <div class="space-y-3">
                            <div class="flex items-center justify-between p-5 glass-panel border-primary/40 bg-primary/5">
                                <div>
                                    <p class="text-[10px] font-bold text-white mb-1 tracking-widest">3-NODE_CORE</p>
                                    <p class="text-[9px] text-white/40 uppercase font-mono tracking-tighter">Collector > Analyst > Synth</p>
                                </div>
                                <span class="material-symbols-outlined text-primary text-xl">account_tree</span>
                            </div>
                        </div>
                    </div>

                    <button type="submit" class="w-full bg-primary text-on-primary py-6 text-xs font-bold tracking-[0.6em] relative overflow-hidden group shadow-[0_0_50px_rgba(167,165,255,0.3)] transition-all hover:scale-[1.02] active:scale-95 uppercase">
                        {% if idea.status == 'DESK_RESEARCH' %}
                            IGNITE_RESEARCH
                        {% elif idea.status == 'INTERVIEW_READY' %}
                            IGNITE_INTERVIEWS
                        {% elif idea.status == 'EXPERIMENT_READY' %}
                            IGNITE_EXPERIMENT
                        {% else %}
                            RE_IGNITE_ENGINE
                        {% endif %}
                        <div class="absolute inset-0 bg-white/20 translate-x-full group-hover:translate-x-0 transition-transform duration-700 ease-in-out"></div>
                    </button>
                </form>
                
                <div class="mt-8 flex items-center justify-center gap-3 opacity-40">
                    <span class="w-1.5 h-1.5 rounded-full bg-secondary animate-pulse"></span>
                    <span class="font-mono text-[9px] text-white tracking-[0.4em] uppercase">Power_Nominal</span>
                </div>
            </div>

            <!-- Conceptual Visualizer -->
            <div class="glass-panel overflow-hidden border-white/5 h-80 relative group">
                <div class="absolute inset-0 opacity-10 bg-[url('https://grainy-gradients.vercel.app/noise.svg')]"></div>
                <div class="absolute inset-0 flex items-center justify-center opacity-5 group-hover:opacity-10 transition-opacity duration-1000 scale-150 group-hover:scale-100 ease-out">
                    <span class="material-symbols-outlined text-[200px] text-primary">auto_awesome</span>
                </div>
                <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
                <div class="absolute bottom-0 left-0 p-8 w-full">
                    <p class="font-mono text-[10px] text-white/40 tracking-[0.5em] uppercase mb-2">Neural_Status</p>
                    <div class="h-1 w-full bg-white/5 rounded-full overflow-hidden">
                        <div class="h-full bg-primary w-2/3 shadow-[0_0_10px_#a7a5ff]"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function copyPrompt() {
    const content = document.getElementById('devPromptContent').innerText;
    navigator.clipboard.writeText(content).then(() => {
        const btn = event.currentTarget;
        const originalText = btn.innerText;
        btn.innerText = 'PAYLOAD_COPIED';
        btn.classList.add('bg-secondary', 'text-black');
        setTimeout(() => {
            btn.innerText = originalText;
            btn.classList.remove('bg-secondary', 'text-black');
        }, 3000);
    }).catch(err => {
        console.error('Failed to copy: ', err);
    });
}
</script>
{% endblock %}