@extends('layouts.app')

@section('title', 'Website Creation in Progress - Website Builder')
@section('description', 'Your website is being created. Please wait while we set up your professional website.')

@push('styles')
<style>
    .progress-bar {
        height: 8px;
        background: #e5e7eb;
        border-radius: 4px;
        overflow: hidden;
    }
    .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #22c55e, #16a34a);
        transition: width 0.5s ease;
        border-radius: 4px;
    }
    .step-item {
        display: flex;
        align-items: center;
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1rem;
        transition: all 0.3s ease;
    }
    .step-item.pending {
        background: #f9fafb;
        border: 1px solid #e5e7eb;
    }
    .step-item.processing {
        background: #fef3c7;
        border: 1px solid #f59e0b;
        animation: pulse 2s infinite;
    }
    .step-item.completed {
        background: #dcfce7;
        border: 1px solid #22c55e;
    }
    .step-item.failed {
        background: #fee2e2;
        border: 1px solid #ef4444;
    }
    .step-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 1rem;
        font-size: 1.2rem;
    }
    .step-icon.pending {
        background: #e5e7eb;
        color: #6b7280;
    }
    .step-icon.processing {
        background: #f59e0b;
        color: white;
        animation: spin 2s linear infinite;
    }
    .step-icon.completed {
        background: #22c55e;
        color: white;
    }
    .step-icon.failed {
        background: #ef4444;
        color: white;
    }
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.8; }
    }
    .countdown-timer {
        font-family: 'Courier New', monospace;
        font-size: 2rem;
        font-weight: bold;
        color: #059669;
    }
</style>
@endpush

@section('content')
<div class="min-h-screen bg-gray-50 py-12">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="text-center mb-12">
            <h1 class="text-3xl md:text-4xl font-heading font-bold text-gray-900 mb-4">
                Creating Your Professional Website
            </h1>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
                Sit back and relax while we build your custom website. This process typically takes 3-5 minutes.
            </p>
            
            <!-- Overall Progress -->
            <div class="max-w-md mx-auto mb-8">
                <div class="flex justify-between items-center mb-2">
                    <span class="text-sm font-medium text-gray-600">Overall Progress</span>
                    <span id="overall-percentage" class="text-sm font-medium text-primary-600">0%</span>
                </div>
                <div class="progress-bar">
                    <div id="overall-progress" class="progress-fill" style="width: 0%"></div>
                </div>
            </div>
            
            <!-- Estimated Time -->
            <div class="bg-white rounded-lg p-6 shadow-lg inline-block mb-8">
                <div class="text-sm text-gray-600 mb-2">Estimated Time Remaining</div>
                <div id="countdown" class="countdown-timer">5:00</div>
            </div>
        </div>

        <!-- Website Information Card -->
        <div class="bg-white rounded-xl shadow-lg p-8 mb-8">
            <h2 class="text-2xl font-heading font-bold text-gray-900 mb-6">Your Website Details</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h3 class="font-semibold text-gray-800 mb-2">Company Name</h3>
                    <p class="text-gray-600">{{ $website->company_name }}</p>
                </div>
                <div>
                    <h3 class="font-semibold text-gray-800 mb-2">Business Type</h3>
                    <p class="text-gray-600">{{ ucfirst(str_replace('_', ' ', $website->business_type)) }}</p>
                </div>
                <div>
                    <h3 class="font-semibold text-gray-800 mb-2">Website Address</h3>
                    <p class="text-gray-600">{{ $website->subdomain }}.find-local-services.com</p>
                </div>
                <div>
                    <h3 class="font-semibold text-gray-800 mb-2">Template</h3>
                    <p class="text-gray-600">{{ $website->template->name ?? 'Default Template' }}</p>
                </div>
            </div>
        </div>

        <!-- Progress Steps -->
        <div class="bg-white rounded-xl shadow-lg p-8 mb-8">
            <h2 class="text-2xl font-heading font-bold text-gray-900 mb-6">Build Progress</h2>
            
            <div id="progress-steps">
                <!-- Steps will be populated here -->
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="text-center">
            <div id="building-actions" class="space-y-4">
                <button id="refresh-status" 
                        class="bg-primary-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-primary-700 transition-colors">
                    <i class="fas fa-sync-alt mr-2"></i>Refresh Status
                </button>
                <div class="text-sm text-gray-500">
                    This page will automatically update every 5 seconds
                </div>
            </div>
            
            <div id="completed-actions" class="hidden space-y-4">
                <a href="{{ route('builder.success', ['website' => $website->id]) }}" 
                   class="inline-block bg-success-600 text-white px-8 py-4 rounded-lg font-semibold text-lg hover:bg-success-700 transition-colors">
                    <i class="fas fa-eye mr-2"></i>View Your Website
                </a>
                <div>
                    <a href="{{ route('home') }}" class="text-primary-600 hover:text-primary-700">
                        Create Another Website
                    </a>
                </div>
            </div>
            
            <div id="failed-actions" class="hidden space-y-4">
                <button id="retry-build" 
                        class="bg-yellow-500 text-white px-6 py-3 rounded-lg font-semibold hover:bg-yellow-600 transition-colors">
                    <i class="fas fa-redo mr-2"></i>Retry Build
                </button>
                <div>
                    <a href="{{ route('builder.create') }}" class="text-primary-600 hover:text-primary-700">
                        Start Over
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Hidden data for JavaScript -->
<script type="application/json" id="website-data">
{
    "id": {{ $website->id }},
    "status": "{{ $website->status }}",
    "progress": {{ $website->progress ?? 0 }},
    "estimated_completion": "{{ $website->estimated_completion ?? '' }}"
}
</script>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const websiteData = JSON.parse(document.getElementById('website-data').textContent);
    let websiteId = websiteData.id;
    let currentProgress = websiteData.progress;
    let estimatedCompletion = websiteData.estimated_completion;
    let refreshInterval;
    let countdownInterval;
    
    const steps = [
        { key: 'validating', label: 'Validating Information', icon: 'fas fa-check-circle' },
        { key: 'creating_subdomain', label: 'Setting Up Domain', icon: 'fas fa-globe' },
        { key: 'generating_content', label: 'Generating Content', icon: 'fas fa-magic' },
        { key: 'building_pages', label: 'Building Pages', icon: 'fas fa-file-alt' },
        { key: 'configuring_hosting', label: 'Configuring Hosting', icon: 'fas fa-server' },
        { key: 'deploying', label: 'Deploying Website', icon: 'fas fa-rocket' },
        { key: 'finalizing', label: 'Final Checks', icon: 'fas fa-check-double' }
    ];
    
    function updateProgress(data) {
        const progress = data.progress || 0;
        const status = data.status;
        const currentStep = data.current_step || 'validating';
        const details = data.details || {};
        
        // Update overall progress
        document.getElementById('overall-progress').style.width = progress + '%';
        document.getElementById('overall-percentage').textContent = Math.round(progress) + '%';
        
        // Update steps
        updateSteps(currentStep, details, status);
        
        // Update countdown
        if (data.estimated_completion) {
            updateCountdown(data.estimated_completion);
        }
        
        // Handle different statuses
        if (status === 'completed') {
            handleCompleted();
        } else if (status === 'failed') {
            handleFailed();
        } else if (status === 'processing') {
            handleProcessing();
        }
    }
    
    function updateSteps(currentStep, details, status) {
        const stepsContainer = document.getElementById('progress-steps');
        const currentStepIndex = steps.findIndex(step => step.key === currentStep);
        
        stepsContainer.innerHTML = steps.map((step, index) => {
            let stepStatus = 'pending';
            let statusIcon = 'fas fa-clock';
            
            if (status === 'failed' && index === currentStepIndex) {
                stepStatus = 'failed';
                statusIcon = 'fas fa-times';
            } else if (index < currentStepIndex) {
                stepStatus = 'completed';
                statusIcon = 'fas fa-check';
            } else if (index === currentStepIndex && status === 'processing') {
                stepStatus = 'processing';
                statusIcon = 'fas fa-spinner';
            }
            
            const stepDetail = details[step.key] || '';
            
            return `
                <div class="step-item ${stepStatus}">
                    <div class="step-icon ${stepStatus}">
                        <i class="${statusIcon}"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="font-semibold text-gray-900">${step.label}</h3>
                        ${stepDetail ? `<p class="text-sm text-gray-600 mt-1">${stepDetail}</p>` : ''}
                    </div>
                </div>
            `;
        }).join('');
    }
    
    function updateCountdown(estimatedCompletion) {
        if (!estimatedCompletion) return;
        
        clearInterval(countdownInterval);
        
        countdownInterval = setInterval(() => {
            const now = new Date().getTime();
            const completion = new Date(estimatedCompletion).getTime();
            const distance = completion - now;
            
            if (distance > 0) {
                const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((distance % (1000 * 60)) / 1000);
                
                document.getElementById('countdown').textContent = 
                    `${minutes}:${seconds.toString().padStart(2, '0')}`;
            } else {
                document.getElementById('countdown').textContent = '0:00';
                clearInterval(countdownInterval);
            }
        }, 1000);
    }
    
    function handleCompleted() {
        clearInterval(refreshInterval);
        clearInterval(countdownInterval);
        
        document.getElementById('countdown').textContent = 'Complete!';
        document.getElementById('building-actions').classList.add('hidden');
        document.getElementById('completed-actions').classList.remove('hidden');
        
        // Show success animation
        showSuccessMessage();
    }
    
    function handleFailed() {
        clearInterval(refreshInterval);
        clearInterval(countdownInterval);
        
        document.getElementById('countdown').textContent = 'Failed';
        document.getElementById('countdown').style.color = '#ef4444';
        document.getElementById('building-actions').classList.add('hidden');
        document.getElementById('failed-actions').classList.remove('hidden');
    }
    
    function handleProcessing() {
        // Continue polling
        if (!refreshInterval) {
            startPolling();
        }
    }
    
    function showSuccessMessage() {
        // Create and show a success notification
        const notification = document.createElement('div');
        notification.className = 'fixed top-4 right-4 bg-green-500 text-white px-6 py-4 rounded-lg shadow-lg z-50';
        notification.innerHTML = `
            <div class="flex items-center">
                <i class="fas fa-check-circle mr-3 text-xl"></i>
                <div>
                    <div class="font-semibold">Website Created Successfully!</div>
                    <div class="text-sm opacity-90">Your website is now live and ready to use.</div>
                </div>
            </div>
        `;
        document.body.appendChild(notification);
        
        setTimeout(() => {
            notification.remove();
        }, 5000);
    }
    
    function fetchStatus() {
        fetch(`/api/websites/${websiteId}/status`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    updateProgress(data.data);
                }
            })
            .catch(error => {
                console.error('Error fetching status:', error);
            });
    }
    
    function startPolling() {
        refreshInterval = setInterval(fetchStatus, 5000); // Poll every 5 seconds
    }
    
    function retryBuild() {
        fetch(`/api/websites/${websiteId}/retry`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Failed to retry build. Please try again.');
            }
        })
        .catch(error => {
            console.error('Error retrying build:', error);
            alert('Failed to retry build. Please try again.');
        });
    }
    
    // Event listeners
    document.getElementById('refresh-status').addEventListener('click', fetchStatus);
    
    const retryButton = document.getElementById('retry-build');
    if (retryButton) {
        retryButton.addEventListener('click', retryBuild);
    }
    
    // Initialize
    updateProgress(websiteData);
    
    if (websiteData.status === 'processing') {
        startPolling();
        
        if (estimatedCompletion) {
            updateCountdown(estimatedCompletion);
        }
    } else if (websiteData.status === 'completed') {
        handleCompleted();
    } else if (websiteData.status === 'failed') {
        handleFailed();
    }
    
    // Cleanup on page unload
    window.addEventListener('beforeunload', function() {
        clearInterval(refreshInterval);
        clearInterval(countdownInterval);
    });
});
</script>
@endpush