<div>
    <!-- Status Display -->
    <div class="mb-8"></div>

    <!-- Verifying Status -->
    @if ($status === 'verifying')
        <div class="text-center">
            <div class="inline-flex items-center justify-center w-20 h-20 bg-blue-100 dark:bg-blue-900/20 rounded-full mb-4">
                <svg class="w-10 h-10 text-blue-600 dark:text-blue-400 animate-spin-slow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>

            <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">
                {{ $this->statusText }}
            </h2>

            <p class="text-gray-600 dark:text-gray-400 mb-4">
                We're confirming your payment with the provider. This usually takes a few seconds.
            </p>

            <!-- Progress Indicator -->
            <div class="flex items-center justify-center gap-2 mb-4">
                <div class="w-2 h-2 bg-blue-600 rounded-full animate-pulse"></div>
                <div class="w-2 h-2 bg-blue-600 rounded-full animate-pulse" style="animation-delay: 0.2s"></div>
                <div class="w-2 h-2 bg-blue-600 rounded-full animate-pulse" style="animation-delay: 0.4s"></div>
            </div>

            <p class="text-sm text-gray-500 dark:text-gray-500">
                Check {{ $pollCount }} of {{ $maxPolls }} • Retrying in 30 seconds...
            </p>
        </div>
    @endif

    <!-- Activated Status -->
    @if ($status === 'activated')
        <div class="text-center">
            <div class="inline-flex items-center justify-center w-20 h-20 bg-green-100 dark:bg-green-900/20 rounded-full mb-4 success-glow">
                <svg class="w-10 h-10 text-green-600 dark:text-green-400 animate-pulse-scale" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>

            <h2 class="text-2xl font-bold text-green-600 dark:text-green-400 mb-2">
                {{ $this->statusText }}
            </h2>

            <p class="text-gray-600 dark:text-gray-400 mb-6">
                Your subscription is now active and you have access to all premium features!
            </p>

            <!-- Action Buttons -->
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="{{ route('dashboard') }}"
                   class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-medium rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                    </svg>
                    Go to Dashboard
                </a>

                <a href="{{ route('dashboard') }}"
                   class="inline-flex items-center gap-2 px-6 py-3 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 font-medium rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 transition-all duration-200">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                    View Subscription
                </a>
            </div>
        </div>
    @endif

    <!-- Pending Status -->
    @if ($status === 'pending')
        <div class="text-center">
            <div class="inline-flex items-center justify-center w-20 h-20 bg-yellow-100 dark:bg-yellow-900/20 rounded-full mb-4">
                <svg class="w-10 h-10 text-yellow-600 dark:text-yellow-400 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>

            <h2 class="text-2xl font-bold text-yellow-600 dark:text-yellow-400 mb-2">
                {{ $this->statusText }}
            </h2>

            <p class="text-gray-600 dark:text-gray-400 mb-6">
                Your payment is being processed. You'll receive an email once your subscription is active.
            </p>

            <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4 mb-6">
                <div class="flex items-center">
                    <svg class="w-5 h-5 text-yellow-600 dark:text-yellow-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <p class="text-sm text-yellow-800 dark:text-yellow-200">
                        This can take a few minutes. You can check your subscription status from the dashboard.
                    </p>
                </div>
            </div>

            <!-- Action Button -->
            <div class="flex justify-center">
                <a href="{{ route('dashboard') }}"
                   class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-medium rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                    </svg>
                    Continue to Dashboard
                </a>
            </div>
        </div>
    @endif

    <!-- Error Status -->
    @if ($status === 'error')
        <div class="text-center">
            <div class="inline-flex items-center justify-center w-20 h-20 bg-red-100 dark:bg-red-900/20 rounded-full mb-4">
                <svg class="w-10 h-10 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 15.5c-.77.833.192 2.5 1.732 2.5z"></path>
                </svg>
            </div>

            <h2 class="text-2xl font-bold text-red-600 dark:text-red-400 mb-2">
                {{ $this->statusText }}
            </h2>

            @if ($errorMessage)
                <p class="text-gray-600 dark:text-gray-400 mb-6">{{ $errorMessage }}</p>
            @endif

            <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-6">
                <div class="flex items-center">
                    <svg class="w-5 h-5 text-red-600 dark:text-red-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <p class="text-sm text-red-800 dark:text-red-200">
                        If you continue to see this message, please contact our support team.
                    </p>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <button wire:click="checkSubscriptionStatus"
                        class="inline-flex items-center gap-2 px-6 py-3 bg-red-600 text-white font-medium rounded-lg hover:bg-red-700 transition-all duration-200">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                    </svg>
                    Try Again
                </button>

                <a href="{{ route('dashboard') }}"
                   class="inline-flex items-center gap-2 px-6 py-3 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 font-medium rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 transition-all duration-200">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                    </svg>
                    Go to Dashboard
                </a>
            </div>
        </div>
    @endif

    <!-- Subscription Details (if available) -->
    @if ($subscription)
        <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-6 mt-8">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Subscription Details</h3>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">Subscription ID</p>
                    <p class="font-mono text-sm">{{ $subscription->provider_subscription_id }}</p>
                </div>

                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">Provider</p>
                    <p class="font-medium">{{ ucfirst($subscription->provider) }}</p>
                </div>

                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">Status</p>
                    <div class="mt-1">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                              @if ($status === 'activated')
                                  bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400
                              @else
                                  bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400
                              @endif">
                            {{ ucfirst($subscription->status) }}
                        </span>
                    </div>
                </div>

                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">Created</p>
                    <p class="font-medium">{{ $subscription->created_at->format('M j, Y H:i') }}</p>
                </div>
            </div>
        </div>
    @endif

    <!-- Polling Indicator - temporarily disabled -->
    @if ($this->shouldContinuePolling)
        <!-- <div wire:poll.30000ms
             wire:key="subscription-poll-{{ $subscription->id ?? 'none' }}-{{ $pollCount }}">
        </div> -->
    @endif
</div>

<!-- Confetti Script -->
<script>
    @if ($showConfetti)
        console.log('Confetti should be shown - showConfetti is true');

        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM loaded, starting confetti');

            // Check if confetti function is available
            if (typeof confetti === 'function') {
                console.log('Confetti function is available');

                // Create confetti effect
                var duration = 3000;
                var animationEnd = Date.now() + duration;
                var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };

                function randomInRange(min, max) {
                    return Math.random() * (max - min) + min;
                }

                var interval = setInterval(function() {
                    var timeLeft = animationEnd - Date.now();

                    if (timeLeft <= 0) {
                        return clearInterval(interval);
                    }

                    var particleCount = 50 * (timeLeft / duration);

                    // Create two bursts for better effect
                    confetti(Object.assign({}, defaults, { particleCount: particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }));
                    confetti(Object.assign({}, defaults, { particleCount: particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));
                }, 250);

                // Additional celebration burst after 1 second
                setTimeout(function() {
                    confetti({
                        particleCount: 100,
                        spread: 70,
                        origin: { y: 0.6 }
                    });
                }, 1000);
            } else {
                console.error('Confetti function is not available');
            }
        });
    @else
        console.log('Confetti should NOT be shown - showConfetti is false');
    @endif
</script>