@extends('layouts.front.app')

@section('title', __('pages/subscription.verify.page_title'))

@section('content')
<section class="container py-14 sm:py-18">
    <div
        class="mx-auto max-w-lg rounded-2xl border border-border bg-card p-8 shadow-card sm:p-10"
        x-data="subscriptionVerifyPage({
            statusUrl: @js(route('subscription.status')),
            dashboardUrl: @js(route('user.subscription.index')),
            plansUrl: @js(route('plans.index')),
            planName: @js($plan?->name),
            messages: @js(trans('pages/subscription.verify')),
        })"
        x-init="start()"
    >
        <div class="text-center">
            <div
                x-show="showSpinner"
                x-cloak
                class="mx-auto flex h-20 w-20 items-center justify-center"
                role="status"
                aria-live="polite"
            >
                <div class="relative h-16 w-16">
                    <div class="absolute inset-0 rounded-full border-4 border-muted/80"></div>
                    <div class="absolute inset-0 animate-spin rounded-full border-4 border-transparent border-t-brand"></div>
                </div>
                <span class="sr-only">{{ __('pages/subscription.verify.sr_confirming') }}</span>
            </div>

            <div
                x-show="showSuccess"
                x-cloak
                class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-emerald-500/15 text-emerald-600 dark:text-emerald-400"
            >
                <x-heroicon-o-check-circle class="h-10 w-10" />
            </div>

            <div
                x-show="phase === 'timeout' || phase === 'failed'"
                x-cloak
                class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-amber-500/15 text-amber-700 dark:text-amber-300"
            >
                <x-heroicon-o-exclamation-triangle class="h-10 w-10" />
            </div>

            <h1 class="mt-6 text-2xl font-bold tracking-tight text-foreground" x-text="headline"></h1>
            <p class="mt-2 text-sm leading-relaxed text-muted-foreground" x-text="subtext"></p>

            <p
                x-show="phase === 'pending'"
                class="mt-3 text-sm font-medium text-foreground"
            >
                {{ __('pages/subscription.verify.do_not_close') }}
            </p>

            @if($plan)
                <p class="mt-4 text-sm text-muted-foreground">
                    {{ __('pages/subscription.verify.plan_label') }}
                    <span class="font-semibold text-foreground">{{ $plan->name }}</span>
                </p>
            @endif

            <div class="mt-8" x-show="phase === 'pending' || phase === 'confirmed'">
                <div class="h-2 overflow-hidden rounded-full bg-muted/80">
                    <div
                        class="h-full rounded-full bg-brand transition-all duration-500 ease-out"
                        :style="`width: ${progress}%`"
                        role="progressbar"
                        :aria-valuenow="Math.round(progress)"
                        aria-valuemin="0"
                        aria-valuemax="100"
                    ></div>
                </div>
                <p
                    x-show="phase === 'pending'"
                    class="mt-3 text-xs text-muted-foreground"
                >
                    {{ __('pages/subscription.verify.checking_account') }}<span x-text="animatedDots"></span>
                </p>
            </div>

            <div
                x-show="phase === 'timeout'"
                x-cloak
                class="mt-8 flex flex-col gap-3 sm:flex-row sm:justify-center"
            >
                <button
                    type="button"
                    class="inline-flex items-center justify-center rounded-xl bg-brand px-5 py-2.5 text-sm font-semibold text-brand-foreground hover:bg-brand/90"
                    @click="retry()"
                >
                    {{ __('pages/subscription.verify.try_again') }}
                </button>
                <a
                    href="{{ route('plans.index') }}"
                    class="inline-flex items-center justify-center rounded-xl border border-border bg-background px-5 py-2.5 text-sm font-semibold text-foreground hover:bg-muted"
                >
                    {{ __('pages/subscription.verify.back_to_plans') }}
                </a>
            </div>

            <p
                x-show="phase === 'timeout'"
                x-cloak
                class="mt-4 text-xs text-muted-foreground"
            >
                {{ __('pages/subscription.verify.timeout_support') }}
            </p>

            <div
                x-show="phase === 'failed'"
                x-cloak
                class="mt-8 flex flex-col gap-3 sm:flex-row sm:justify-center"
            >
                <a
                    href="{{ route('plans.index') }}"
                    class="inline-flex items-center justify-center rounded-xl bg-brand px-5 py-2.5 text-sm font-semibold text-brand-foreground hover:bg-brand/90"
                >
                    {{ __('pages/subscription.verify.view_plans') }}
                </a>
                <a
                    href="{{ route('user.dashboard') }}"
                    class="inline-flex items-center justify-center rounded-xl border border-border bg-background px-5 py-2.5 text-sm font-semibold text-foreground hover:bg-muted"
                >
                    {{ __('pages/subscription.verify.go_to_dashboard') }}
                </a>
            </div>
        </div>
    </div>
</section>
@endsection

@push('before-app-js')
@vite(['resources/js/user/subscription-verify.js'])
@endpush