{% extends "base.html" %}
{% block title %}جاري التحليل...{% endblock %}
{% block content %}
<div class="min-h-[80vh] flex flex-col items-center justify-center relative overflow-hidden">
    <!-- Animated Background -->
    <div class="absolute inset-0 bg-[url('/static/grid.svg')] opacity-5"></div>
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-gold-500/5 rounded-full blur-[100px] animate-pulse-slow"></div>

    <!-- Loader Core -->
    <div class="relative w-48 h-48 mb-12">
        <div class="absolute inset-0 border-4 border-white/5 rounded-full"></div>
        <div class="absolute inset-0 border-4 border-t-gold-500 border-r-transparent border-b-transparent border-l-transparent rounded-full animate-spin"></div>
        <div class="absolute inset-4 border-4 border-white/5 rounded-full"></div>
        <div class="absolute inset-4 border-4 border-l-emerald-500 border-t-transparent border-r-transparent border-b-transparent rounded-full animate-spin" style="animation-direction: reverse; animation-duration: 2s;"></div>
        
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
            <span class="text-3xl font-serif font-bold text-white block animate-pulse">AI</span>
        </div>
    </div>

    <!-- Status Text -->
    <h2 class="text-3xl font-serif font-bold text-white mb-4 tracking-wide" id="status-title">ANALYZING MARKET DATA</h2>
    <div class="max-w-md w-full text-center">
        <p class="text-gold-400 font-mono text-sm tracking-widest uppercase mb-8" id="status-detail">Processing Data Points...</p>
        
        <!-- Progress Bar -->
        <div class="h-1 bg-white/10 rounded-full overflow-hidden w-full max-w-sm mx-auto">
            <div id="progress-bar" class="h-full bg-gradient-to-r from-gold-400 to-emerald-500 w-0 transition-all duration-300 ease-out"></div>
        </div>
    </div>
    
    <!-- Steps -->
    <div class="mt-12 grid grid-cols-2 md:grid-cols-4 gap-8 text-center opacity-50" id="steps-container">
        <div class="step-item transition duration-500" data-step="1">
            <div class="w-2 h-2 bg-blue-500 rounded-full mx-auto mb-2"></div>
            <div class="text-[10px] font-mono text-white">MARKET RESEARCH</div>
        </div>
        <div class="step-item transition duration-500" data-step="2">
            <div class="w-2 h-2 bg-emerald-500 rounded-full mx-auto mb-2"></div>
            <div class="text-[10px] font-mono text-white">FINANCIAL MODEL</div>
        </div>
        <div class="step-item transition duration-500" data-step="3">
            <div class="w-2 h-2 bg-purple-500 rounded-full mx-auto mb-2"></div>
            <div class="text-[10px] font-mono text-white">STRATEGY</div>
        </div>
        <div class="step-item transition duration-500" data-step="4">
            <div class="w-2 h-2 bg-gold-500 rounded-full mx-auto mb-2"></div>
            <div class="text-[10px] font-mono text-white">GENERATING PDF</div>
        </div>
    </div>
</div>

<script>
    const reportId = "{{ report.id }}";
    
    // Fake progress animation
    const steps = [
        { progress: 15, title: "Analyzing Market Trends", detail: "Scanning global databases..." },
        { progress: 30, title: "Identifying Competitors", detail: "Mapping competitive landscape..." },
        { progress: 45, title: "Building Financial Model", detail: "Calculating CAPEX, OPEX, and Revenue..." },
        { progress: 60, title: "Simulating Scenarios", detail: "Running Monte Carlo simulations..." },
        { progress: 75, title: "Drafting Strategy", detail: "Formulating SWOT and Go-to-Market..." },
        { progress: 90, title: "Finalizing Report", detail: "Formatting document..." },
        { progress: 95, title: "Finishing Up", detail: "Almost there..." }
    ];

    let currentStepIndex = 0;
    
    function updateVisuals() {
        if (currentStepIndex >= steps.length) return;
        
        const step = steps[currentStepIndex];
        document.getElementById('progress-bar').style.width = step.progress + '%';
        document.getElementById('status-title').textContent = step.title.toUpperCase();
        document.getElementById('status-detail').textContent = step.detail.toUpperCase();
        
        // Highlight active step icons
        const stepEls = document.querySelectorAll('.step-item');
        stepEls.forEach((el, idx) => {
            if (idx <= (currentStepIndex / 2)) {
                el.classList.remove('opacity-50');
                el.classList.add('opacity-100', 'scale-110');
            }
        });

        currentStepIndex++;
    }

    // Advance visuals every 4 seconds (approx 30s total)
    const visualInterval = setInterval(updateVisuals, 4000);

    // Trigger Generation
    fetch(`/study/api/generate/${reportId}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        clearInterval(visualInterval);
        document.getElementById('progress-bar').style.width = '100%';
        if (data.status === 'done' && data.redirect) {
            window.location.href = data.redirect;
        } else {
            console.error(data);
            alert('Error generating report: ' + (data.message || 'Unknown error'));
            window.location.href = '/dashboard';
        }
    })
    .catch(err => {
        console.error(err);
        alert('Network error. Please try again.');
        window.location.href = '/dashboard';
    });
</script>
{% endblock %}