@extends('register.master')
@section('content')
    <style>
        .processing-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 350px;
            padding: 40px 20px;
            text-align: center;
        }
        .spinner-icon {
            font-size: 80px;
            color: #009da0;
            margin-bottom: 30px;
        }
        .processing-message {
            font-size: 18px;
            color: #009da0;
            font-weight: 500;
            margin-bottom: 20px;
            min-height: 50px;
        }
        .warning-message {
            background: #fff3cd;
            border: 1px solid #ffc107;
            border-radius: 8px;
            padding: 15px 25px;
            margin-top: 20px;
            color: #856404;
            font-size: 14px;
        }
        .warning-message i {
            margin-{{ app()->getLocale() === 'ar' ? 'left' : 'right' }}: 8px;
        }
        .error-container {
            display: none;
            background: #f8d7da;
            border: 1px solid #f5c6cb;
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
            color: #721c24;
            text-align: center;
        }
        .retry-button {
            background: #009da0;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            margin-top: 15px;
        }
        .retry-button:hover {
            background: #007b7d;
        }
    </style>
    
    <div class="signup-login-page-background">
        <div class="signup-login-card-container">
            <div class="container-fluid no-gutters">
                <div class="row no-gutters">
                    <div class="col-lg-4 hidden-on-mobile">
                        <div class="form-image-background form-image-background-image-{{ app()->getLocale() ?? 'ar' }}">
                            <img class="logo" src="{{ asset('register/icons/logo.png') }}" alt="VoM Logo">
                            <h2>@lang('register.register_side_text')</h2>
                            <br>
                            <img class="application-screenshot-{{ app()->getLocale() ?? 'ar' }}"
                                src="{{ asset('register/icons/sign_up_laptop.png') }}" alt="Application Screen shot">
                        </div>
                    </div>
                    <div class="col-lg-8 col-12">
                        <div class="form-content">
                            <h1>@lang('register.creating_company')</h1>
                            <p class="hidden-on-desktop-no-mobile text-center text-muted">@lang('register.register_side_text')</p>
                            <a class="change-language-button-{{ app()->getLocale() ?? 'ar' }}"
                                href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale() === 'en' ? 'ar' : 'en') }}">{{ LaravelLocalization::getCurrentLocale() === 'en' ? 'عربي' : 'English' }}</a>
                            
                            <div class="processing-content">
                                <div id="loading-section">
                                    <i class="fa fa-spinner fa-spin spinner-icon"></i>
                                    <p class="processing-message" id="processing-message"></p>
                                    <div class="warning-message">
                                        <i class="fa fa-exclamation-triangle"></i>
                                        @lang('register.dont_refresh_warning')
                                    </div>
                                </div>
                                
                                <div id="error-container" class="error-container">
                                    <i class="fa fa-times-circle" style="font-size: 40px; margin-bottom: 15px;"></i>
                                    <h3>@lang('register.creation_failed')</h3>
                                    <p id="error-message"></p>
                                    <button class="retry-button" onclick="startCreation()">
                                        <i class="fa fa-refresh"></i> @lang('register.try_again')
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('extra-scripts')
    <script>
        const token = "{{ $token }}";
        const statusUrl = "{{ route('tenants.guest.status', ['token' => $token]) }}";
        const startUrl = "{{ route('tenants.guest.start', ['token' => $token]) }}";
        
        // Same messages as the original register page
        const messages = {
            'en': [
                @json(__('Your company is being created...')),
                @json(__('Setting up everything for you...')),
                @json(__('Hold on just a bit longer...')),
                @json(__('Finalizing the details...')),
                @json(__('Almost there! Thank you for your patience...')),
                @json(__('We are setting up your chart of accounts')),
                @json(__('Linking all system modules together')),
                @json(__('Configuring a smooth experience for you')),
                @json(__('We are configuring all your accounting things')),
                @json(__('Enabling all features for you'))
            ],
            'ar': [
                @json(__('يتم إنشاء شركتك...')),
                @json(__('إعداد كل شيء من أجلك...')),
                @json(__('انتظر قليلاً فقط...')),
                @json(__('إتمام التفاصيل...')),
                @json(__('قريباً جداً! شكراً لصبرك...')),
                @json(__('نقوم بإعداد دليل الحسابات الخاص بك')),
                @json(__('ربط وحدات النظام معاً')),
                @json(__('تهيئة تجربة سلسة لك')),
                @json(__('نقوم بإعداد كل أمورك المحاسبية')),
                @json(__('جاري تمكين جميع الميزات'))
            ]
        };

        let currentLang = "{{ app()->getLocale() }}";
        let messageIndex = 0;
        let currentMessages = messages[currentLang];
        let pollInterval = null;
        let messageInterval = null;

        // Update the rotating message
        function updateMessage() {
            document.getElementById("processing-message").innerText = currentMessages[messageIndex];
            messageIndex = (messageIndex + 1) % currentMessages.length;
        }

        // Show error state
        function showError(message) {
            document.getElementById("loading-section").style.display = "none";
            document.getElementById("error-container").style.display = "block";
            document.getElementById("error-message").innerText = message || "{{ __('An error occurred. Please try again.') }}";
            
            if (pollInterval) clearInterval(pollInterval);
            if (messageInterval) clearInterval(messageInterval);
        }

        // Show loading state
        function showLoading() {
            document.getElementById("loading-section").style.display = "block";
            document.getElementById("error-container").style.display = "none";
        }

        // Cleanup and redirect to tenant
        function redirectToTenant(url) {
            // Clear intervals and set to null so beforeunload doesn't trigger
            if (pollInterval) clearInterval(pollInterval);
            if (messageInterval) clearInterval(messageInterval);
            pollInterval = null;
            messageInterval = null;
            
            // Redirect
            window.location.href = url;
        }

        // Check status via polling
        function checkStatus() {
            fetch(statusUrl, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                
                if (data.status === 'completed' && data.redirect_url) {
                    // Success! Redirect to the new tenant
                    redirectToTenant(data.redirect_url);
                } else if (data.status === 'failed') {
                    showError(data.error);
                }
                // If 'processing' or 'pending', continue polling
            })
            .catch(error => {
                console.error('Status check error:', error);
                // Don't show error on network issues, just continue polling
            });
        }

        // Start the creation process
        function startCreation() {
            showLoading();
            updateMessage();
            
            // Start message rotation
            messageInterval = setInterval(updateMessage, 9000);
            
            // Send start request
            fetch(startUrl, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                
                if (data.status === 'completed' && data.redirect_url) {
                    // Already completed
                    redirectToTenant(data.redirect_url);
                } else if (data.status === 'redirect_to_form' && data.redirect_url) {
                    // Form data missing, redirect back to form
                    redirectToTenant(data.redirect_url);
                } else if (data.status === 'failed') {
                    showError(data.error);
                } else {
                    // Started processing, begin polling
                    pollInterval = setInterval(checkStatus, 10000);
                }
            })
            .catch(error => {
                console.error('Start error:', error);
                showError(error.message);
            });
        }

        // Prevent accidental navigation
        window.addEventListener('beforeunload', function (e) {
            if (pollInterval || messageInterval) {
                e.preventDefault();
                e.returnValue = "{{ __('Your company is still being created. Are you sure you want to leave?') }}";
            }
        });

        // Check initial status on page load
        document.addEventListener('DOMContentLoaded', function() {
            // First check if already completed or in progress
            fetch(statusUrl, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'completed' && data.redirect_url) {
                    redirectToTenant(data.redirect_url);
                } else if (data.status === 'failed') {
                    showError(data.error);
                } else if (data.status === 'processing') {
                    // Already processing, just start polling
                    updateMessage();
                    messageInterval = setInterval(updateMessage, 9000);
                    pollInterval = setInterval(checkStatus, 10000);
                } else {
                    // Not started yet, begin creation
                    startCreation();
                }
            })
            .catch(error => {
                // On error, try to start creation
                startCreation();
            });
        });
    </script>
@endsection