{% extends "base.html" %}

{% block content %}
<div class="flex flex-col items-center min-h-screen pb-32">
    <!-- Top HUD / Breadcrumbs -->
    <div class="w-full max-w-4xl flex justify-between items-center mb-12 px-4">
        <div class="flex items-center gap-6">
            {% if not is_shared_view %}
            <a href="/app/reports" class="glass-panel p-2 flex items-center justify-center hover:text-primary transition-all">
                <span class="material-symbols-outlined text-sm">arrow_back</span>
            </a>
            {% else %}
            <div class="glass-panel p-2 flex items-center justify-center text-primary">
                <span class="material-symbols-outlined text-sm">public</span>
            </div>
            {% endif %}
            <div class="flex flex-col">
                <span class="font-mono text-[9px] text-white/40 uppercase tracking-[0.3em]">Neural Archive</span>
                <span class="font-neural text-sm text-white/80 uppercase tracking-widest">Report_ID // {{ report.id[:8] }}</span>
            </div>
        </div>
        
        {% if not is_shared_view %}
        <!-- Focus Mode Toggle -->
        <button @click="focusMode = !focusMode" 
                class="glass-panel px-4 py-2 flex items-center gap-3 hover:bg-white/10 transition-all font-mono text-[10px] tracking-[0.2em] text-white/60">
            <span class="material-symbols-outlined text-sm" x-text="focusMode ? 'fullscreen_exit' : 'fullscreen'"></span>
            <span x-text="focusMode ? 'EXIT_IMMERSION' : 'ENTER_IMMERSION'"></span>
        </button>
        {% else %}
        <a href="/" class="glass-panel px-6 py-2 flex items-center gap-3 bg-primary/20 hover:bg-primary/30 text-primary border-primary/30 transition-all font-neural text-xs tracking-widest uppercase">
            <span class="material-symbols-outlined text-sm">rocket_launch</span>
            Build Your Own
        </a>
        {% endif %}
    </div>

    <!-- Persistent Top Status (Success Toast Moved Here) -->
    <div x-data="{ localForgeSuccess: false }" @forge-complete.window="localForgeSuccess = true; setTimeout(() => localForgeSuccess = false, 5000)">
        <template x-if="localForgeSuccess">
            <div class="mb-8 w-full max-w-4xl glass-panel px-8 py-4 border-secondary/30 flex items-center justify-between animate-pulse">
                <div class="flex items-center gap-4">
                    <span class="material-symbols-outlined text-secondary text-sm">check_circle</span>
                    <span class="font-mono text-[10px] text-secondary tracking-[widest] uppercase">Protocol_Alpha: concept.md forged in root</span>
                </div>
                <div class="font-mono text-[8px] text-white/20 whitespace-nowrap">MISSION_READY</div>
            </div>
        </template>
    </div>


    <!-- Main Report Canvas -->
    <article class="report-container w-full max-w-4xl glass-panel p-16 relative overflow-hidden group shadow-[0_0_100px_rgba(167,165,255,0.05)] border-white/10"
             x-init="setTimeout(() => window.AIdeatorPolish.initReportAnimations(), 500)">
        <!-- Floating Scanline -->
        <div class="scanning-line opacity-20"></div>
        
        <header class="mb-16">
            <div class="flex items-center gap-4 mb-8">
                <div class="h-0.5 w-16 bg-primary shadow-[0_0_10px_#a7a5ff]"></div>
                <span class="font-mono text-[11px] text-primary tracking-[0.5em] uppercase">Intelligence_Sovereignty_Report</span>
            </div>
            
            <h1 class="text-6xl font-light tracking-tighter text-white mb-10 leading-[1.1] uppercase font-neural">
                {{ report.title }}
            </h1>
            
            <div class="flex items-center gap-10 border-y border-white/5 py-8 font-mono text-[10px] text-white/30 uppercase tracking-[0.3em]">
                <div class="flex items-center gap-3">
                    <span class="material-symbols-outlined text-sm text-secondary">verified_user</span>
                    <span>Auth: System_Root</span>
                </div>
                <div class="flex items-center gap-3">
                    <span class="material-symbols-outlined text-sm text-primary">sync</span>
                    <span>Synchronized: {{ report.created_at }}</span>
                </div>
                <div class="flex-1"></div>
                <!-- Concept Shield -->
                <div class="flex items-center gap-3 px-4 py-1.5 border border-white/10 rounded-full bg-white/[0.03]">
                    <div class="w-2.5 h-2.5 rounded-full animate-pulse shadow-[0_0_8px_#a7a5ff]" style="background-color: {{ launcher_data.brand_hex or '#a7a5ff' }}"></div>
                    <span class="font-mono text-[9px] text-white/50 uppercase tracking-widest">{{ launcher_data.tier or 'PRIME' }}</span>
                </div>
            </div>
        </header>

        <!-- Executive Summary -->
        <div class="text-2xl font-light leading-relaxed text-white/90 border-l-2 border-primary pl-10 py-4 bg-primary/5 mb-16 italic font-neural">
            {{ report.summary or "Neural synthesis complete. Initializing executive readout..." }}
        </div>

        <!-- Rendered Content -->
        <div class="prose prose-invert max-w-none text-white/70 leading-relaxed font-light space-y-8 report-content">
            {% if report.content %}
                {{ report.content | safe }}
            {% else %}
                <div class="flex flex-col items-center justify-center p-24 border border-dashed border-white/10 rounded-xl bg-white/[0.01]">
                    <span class="material-symbols-outlined text-4xl text-white/20 mb-4 animate-spin">cyclone</span>
                    <p class="font-mono text-[10px] text-white/40 tracking-[0.2em] uppercase">Processing Data Stream...</p>
                </div>
            {% endif %}
        </div>

        <!-- End of Transmission -->
        <div class="mt-24 flex items-center gap-6">
            <div class="font-mono text-[9px] text-white/20 tracking-[0.4em] uppercase">End of_Archive_Node // Vault_Service</div>
            <div class="flex-1 h-[1px] bg-white/5"></div>
        </div>
    </article>

    <!-- Floating Action HUD -->
    <div class="fixed bottom-12 left-1/2 -translate-x-1/2 z-[100] flex items-center gap-3 p-2 glass-panel rounded-full shadow-2xl scale-110" 
         x-data="{ 
            forging: false, 
            forgeSuccess: false,
            async triggerForge() {
                this.forging = true;
                try {
                    const res = await fetch('/api/forge', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ idea_id: '{{ report.id }}' })
                    });
                    const data = await res.json();
                    if(data.success) {
                        this.forgeSuccess = true;
                        window.dispatchEvent(new CustomEvent('forge-complete'));
                        setTimeout(() => this.forgeSuccess = false, 5000);
                    }
                } finally {
                    this.forging = false;
                }
            }
         }">
        
        {% if not is_shared_view %}
        <button @click="triggerForge()" 
                :disabled="forging"
                class="px-8 py-3 rounded-full bg-primary text-on-primary font-mono text-[10px] tracking-[0.3em] uppercase flex items-center gap-3 hover:scale-105 transition-all shadow-[0_0_20px_rgba(167,165,255,0.4)] relative overflow-hidden group">
            <div x-show="forging" class="absolute inset-0 bg-primary-fixed overflow-hidden">
                <div class="scanning-line"></div>
            </div>
            <span class="material-symbols-outlined text-sm" x-text="forging ? 'bolt' : (forgeSuccess ? 'done_all' : 'diamond')"></span>
            <span x-text="forging ? 'FORGING...' : (forgeSuccess ? 'FORGE_SUCCESSFUL' : 'FORGE_LOCAL_FILE')"></span>
        </button>
        {% endif %}

        <a href="/app/reports/{{ report.id }}/pdf" class="p-3 rounded-full hover:bg-white/10 transition-all text-white/60 hover:text-white">
            <span class="material-symbols-outlined text-sm">picture_as_pdf</span>
        </a>

        <div class="w-[1px] h-6 bg-white/10 flex-shrink-0"></div>

        {% if not is_shared_view %}
        <button class="px-6 py-3 rounded-full hover:bg-white/5 transition-all font-mono text-[10px] text-white/40 tracking-widest uppercase flex items-center gap-3">
             <span class="material-symbols-outlined text-sm">ios_share</span>
             Share_Vault
        </button>
        {% else %}
        <div class="flex items-center gap-4 px-4">
            <span class="font-mono text-[8px] text-white/20 uppercase tracking-widest">Broadcast_to:</span>
            <a href="https://twitter.com/intent/tweet?text=Check out this AI-validated business idea: {{ report.title }}&url={{ request.url }}" 
               target="_blank" class="p-2 rounded-full hover:bg-white/10 text-white/40 hover:text-[#1DA1F2] transition-all">
                <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.84 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
            </a>
            <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ request.url }}" 
               target="_blank" class="p-2 rounded-full hover:bg-white/10 text-white/40 hover:text-[#0077b5] transition-all">
                <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.2225 0z"/></svg>
            </a>
        </div>
        {% endif %}

    </div>
</div>
{% endblock %}

{% block extra_head %}
<style>
    .report-content h1 { @apply text-3xl font-light text-white mb-8 mt-16 uppercase tracking-tight; }
    .report-content h2 { @apply text-xl font-medium text-primary mb-6 mt-12 uppercase tracking-widest; }
    .report-content p { @apply mb-6 leading-relaxed text-white/70 font-light; }
    .report-content ul { @apply list-none space-y-4 mb-8; }
    .report-content li { @apply flex items-start gap-4 before:content-['_>>'] before:text-primary before:font-mono before:text-[10px]; }
    .report-content strong { @apply text-white font-normal; }
    .report-content blockquote { @apply border-l-2 border-secondary/30 pl-8 italic text-secondary/60 my-10; }
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
    // Inject Copy Buttons into Toolkit Sections
    const headers = document.querySelectorAll('.report-content h3, .report-content h2');
    headers.forEach(header => {
        const text = header.innerText.toLowerCase();
        if (text.includes('script') || text.includes('template') || text.includes('copy') || text.includes('outreach') || text.includes('blueprint')) {
            const btn = document.createElement('button');
            btn.innerHTML = '<span class="material-symbols-outlined text-sm">content_copy</span>';
            btn.className = 'ml-4 p-2 glass-panel hover:bg-primary/20 hover:text-primary transition-all text-white/20 inline-flex items-center justify-center rounded-md';
            btn.title = 'Copy Section Content';
            
            btn.onclick = (e) => {
                e.preventDefault();
                e.stopPropagation();
                let content = '';
                let next = header.nextElementSibling;
                while (next && !['H1', 'H2', 'H3'].includes(next.tagName)) {
                    content += next.innerText + '\n\n';
                    next = next.nextElementSibling;
                }
                
                navigator.clipboard.writeText(content.trim()).then(() => {
                    const icon = btn.querySelector('.material-symbols-outlined');
                    icon.innerText = 'check';
                    btn.classList.add('text-secondary');
                    setTimeout(() => {
                        icon.innerText = 'content_copy';
                        btn.classList.remove('text-secondary');
                    }, 2000);
                });
            };
            
            header.appendChild(btn);
            header.classList.add('flex', 'items-center', 'justify-between', 'group');
        }
    });
});
</script>
{% endblock %}