@extends('layouts.app')

@section('title', 'Creating Your Website')

@section('content')
<!-- Header Section -->
<section class="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-16">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h1 class="text-4xl md:text-5xl font-heading font-bold mb-4">
            Creating Your Website
        </h1>
        <p class="text-xl text-blue-100 mb-8">
            We're setting up your professional website. This process typically takes 2-5 minutes.
        </p>
        
        <!-- Website Info -->
        <div class="bg-white bg-opacity-10 rounded-lg p-4 max-w-md mx-auto">
            <p class="text-sm text-blue-100 mb-1">Your New Website:</p>
            <p class="font-semibold text-lg">{{ $statusData['company_name'] }}</p>
            <p class="text-sm text-blue-200">{{ $statusData['full_url'] }}</p>
        </div>
    </div>
</section>

<!-- Status Section -->
<section class="py-16 bg-gray-50">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12">
            
            <!-- Progress Bar -->
            <div class="mb-8">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm font-medium text-gray-700">Progress</span>
                    <span id="progress-percentage" class="text-sm font-medium text-blue-600">0%</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-3">
                    <div id="progress-bar" class="bg-gradient-to-r from-blue-600 to-purple-600 h-3 rounded-full transition-all duration-500 ease-out" style="width: 0%"></div>
                </div>
            </div>
            
            <!-- Current Step -->
            <div class="mb-8">
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Current Step</h3>
                <div class="flex items-center">
                    <div id="status-spinner" class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 mr-3"></div>
                    <span id="current-step" class="text-gray-700">Initializing...</span>
                </div>
            </div>
            
            <!-- Status Messages -->
            <div id="status-messages" class="space-y-2 mb-8">
                <div class="flex items-center text-sm text-gray-600">
                    <div class="w-2 h-2 bg-blue-600 rounded-full mr-3"></div>
                    <span>Process started at {{ $statusData['started_at']->format('g:i A') }}</span>
                </div>
            </div>
            
            <!-- Estimated Time -->
            <div class="bg-blue-50 rounded-lg p-4 mb-8">
                <div class="flex items-center">
                    <i class="fas fa-clock text-blue-600 mr-3"></i>
                    <div>
                        <p class="text-sm font-medium text-blue-900">Estimated Time Remaining</p>
                        <p id="estimated-time" class="text-sm text-blue-700">2-5 minutes</p>
                    </div>
                </div>
            </div>
            
            <!-- Error Message (hidden by default) -->
            <div id="error-message" class="bg-red-50 border border-red-200 rounded-lg p-4 mb-8 hidden">
                <div class="flex items-center">
                    <i class="fas fa-exclamation-triangle text-red-600 mr-3"></i>
                    <div>
                        <p class="text-sm font-medium text-red-900">Website Creation Failed</p>
                        <p id="error-text" class="text-sm text-red-700"></p>
                    </div>
                </div>
                <div class="mt-4">
                    <button onclick="retryCreation()" class="bg-red-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-red-700 transition-colors">
                        Try Again
                    </button>
                </div>
            </div>
            
            <!-- Success Message (hidden by default) -->
            <div id="success-message" class="bg-green-50 border border-green-200 rounded-lg p-4 mb-8 hidden">
                <div class="flex items-center">
                    <i class="fas fa-check-circle text-green-600 mr-3"></i>
                    <div>
                        <p class="text-sm font-medium text-green-900">Website Created Successfully!</p>
                        <p class="text-sm text-green-700">Your website is now live and ready to use.</p>
                    </div>
                </div>
                <div class="mt-4 flex space-x-3">
                    <a href="https://{{ $statusData['full_url'] }}" target="_blank" class="bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-green-700 transition-colors">
                        <i class="fas fa-external-link-alt mr-2"></i>View Website
                    </a>
                    <a href="{{ route('home') }}" class="bg-gray-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-700 transition-colors">
                        Create Another
                    </a>
                </div>
            </div>
            
            <!-- Important Notice -->
            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                <div class="flex items-start">
                    <i class="fas fa-info-circle text-yellow-600 mr-3 mt-0.5"></i>
                    <div>
                        <p class="text-sm font-medium text-yellow-900">Please Keep This Window Open</p>
                        <p class="text-sm text-yellow-700">Closing this window will not stop the creation process, but you won't be able to see the progress updates.</p>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</section>

<!-- Debug Section (only show if there's an error) -->
<section id="debug-section" class="py-8 bg-gray-100 hidden">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Debug Information</h3>
            <textarea id="debug-output" class="w-full h-40 p-3 border border-gray-300 rounded-lg text-sm font-mono bg-gray-50" readonly></textarea>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
const subdomain = '{{ $subdomain }}';
let statusCheckInterval;
let hasCompleted = false;

function checkStatus() {
    if (hasCompleted) return;
    
    fetch(`/api/creation-status?subdomain=${subdomain}`)
        .then(response => response.json())
        .then(data => {
            console.log('Status update:', data);
            
            if (data.error) {
                showError(data.error);
                return;
            }
            
            // Update progress bar
            const progress = data.progress || 0;
            document.getElementById('progress-bar').style.width = progress + '%';
            document.getElementById('progress-percentage').textContent = progress + '%';
            
            // Update current step
            document.getElementById('current-step').textContent = data.current_step || 'Processing...';
            
            // Handle completion
            if (data.status === 'completed') {
                hasCompleted = true;
                clearInterval(statusCheckInterval);
                showSuccess();
            } else if (data.status === 'failed') {
                hasCompleted = true;
                clearInterval(statusCheckInterval);
                showError(data.error || 'Unknown error occurred');
                if (data.log_output) {
                    showDebugInfo(data.log_output);
                }
            }
            
            // Update estimated time
            if (progress < 50) {
                document.getElementById('estimated-time').textContent = '3-5 minutes remaining';
            } else if (progress < 80) {
                document.getElementById('estimated-time').textContent = '1-2 minutes remaining';
            } else if (progress < 100) {
                document.getElementById('estimated-time').textContent = 'Almost done...';
            }
        })
        .catch(error => {
            console.error('Status check failed:', error);
            // Continue checking - temporary network issues shouldn't stop us
        });
}

function showSuccess() {
    document.getElementById('status-spinner').classList.add('hidden');
    document.getElementById('success-message').classList.remove('hidden');
    document.getElementById('current-step').textContent = 'Website creation completed!';
    document.getElementById('progress-bar').style.width = '100%';
    document.getElementById('progress-percentage').textContent = '100%';
    document.getElementById('estimated-time').textContent = 'Completed!';
}

function showError(errorMessage) {
    document.getElementById('status-spinner').classList.add('hidden');
    document.getElementById('error-message').classList.remove('hidden');
    document.getElementById('error-text').textContent = errorMessage;
    document.getElementById('current-step').textContent = 'Error occurred';
    document.getElementById('estimated-time').textContent = 'Process failed';
}

function showDebugInfo(logOutput) {
    document.getElementById('debug-section').classList.remove('hidden');
    document.getElementById('debug-output').value = logOutput;
}

function retryCreation() {
    // Redirect back to the form with the same data
    window.location.href = '{{ route("builder.form") }}?' + new URLSearchParams({
        'tpl-name': '{{ $statusData["tpl_name"] ?? "" }}',
        'category': '{{ $statusData["category"] ?? "" }}',
        'subcategory': '{{ $statusData["subcategory"] ?? "" }}',
        'homepage': '{{ $statusData["homepage"] ?? "main" }}'
    });
}

// Start status checking
document.addEventListener('DOMContentLoaded', function() {
    // Check immediately
    checkStatus();
    
    // Then check every 3 seconds
    statusCheckInterval = setInterval(checkStatus, 3000);
    
    // Stop checking after 15 minutes (safety measure)
    setTimeout(() => {
        if (!hasCompleted) {
            clearInterval(statusCheckInterval);
            showError('Process timeout - please try again or contact support');
        }
    }, 15 * 60 * 1000);
});
</script>
@endpush