{% extends "base.html" %}

{% block title %}Analyzing Website - Tailwind Site Rebuilder{% endblock %}

{% block content %}
<div class="card" x-data="{ progress: {{ analysis.progress }}, status: '{{ analysis.status }}', message: '{{ analysis.message }}', domain: '{{ analysis.domain }}' }" x-init="updateProgress()">
    <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-2">Analyzing Website</h1>
        <p class="text-lg text-gray-600" x-text="message">{{ analysis.message }}</p>
    </div>
    
    <div class="mb-8">
        <div class="w-full bg-gray-200 rounded-full h-2.5">
            <div class="bg-primary-600 h-2.5 rounded-full" x-bind:style="'width: ' + progress + '%'"></div>
        </div>
        <p class="text-right mt-2 text-sm font-medium text-gray-600" x-text="progress + '%'">{{ analysis.progress }}%</p>
    </div>
    
    <div class="text-center">
        <div class="animate-pulse-slow" x-show="status === 'running'">
            <i class="fas fa-spinner fa-spin text-4xl text-primary-500 mb-4"></i>
            <p class="text-gray-600">This may take a few moments...</p>
        </div>
        
        <div x-show="status === 'completed'" style="display: none;">
            <i class="fas fa-check-circle text-4xl text-green-500 mb-4"></i>
            <p class="text-gray-600 mb-4">Analysis complete!</p>
            <a x-bind:href="'/results/' + domain" class="btn-primary">
                <i class="fas fa-eye mr-2"></i>View Results
            </a>
        </div>
        
        <div x-show="status === 'failed'" style="display: none;">
            <i class="fas fa-exclamation-circle text-4xl text-red-500 mb-4"></i>
            <p class="text-gray-600 mb-4">Analysis failed: <span x-text="message"></span></p>
            <a href="{{ url_for('index') }}" class="btn-primary">
                <i class="fas fa-home mr-2"></i>Return to Home
            </a>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function updateProgress() {
        const intervalId = setInterval(() => {
            fetch('/api/analysis_progress/{{ session_id }}')
                .then(response => response.json())
                .then(data => {
                    this.progress = data.progress;
                    this.status = data.status;
                    this.message = data.message;
                    this.domain = data.domain;
                    
                    if (data.status === 'completed' || data.status === 'failed') {
                        clearInterval(intervalId);
                        
                        if (data.status === 'completed') {
                            // Redirect after a short delay
                            setTimeout(() => {
                                window.location.href = '/results/' + data.domain;
                            }, 1500);
                        }
                    }
                })
                .catch(error => {
                    console.error('Error fetching progress:', error);
                    this.message = 'Error checking progress';
                });
        }, 1000);
    }
</script>
{% endblock %}