@extends('layouts.front.app')

@section('title', __('pages/plans.title'))

@section('content')
<section class="container py-14 sm:py-18" @if($plans->isNotEmpty()) x-data="subscriptionActions" @endif>
    @if($plans->isEmpty())
        <div class="mx-auto max-w-lg">
            <div class="rounded-2xl border border-border bg-card px-6 py-12 text-center shadow-card sm:px-10 sm:py-14">
                <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-muted/60 text-muted-foreground ring-1 ring-inset ring-border">
                    <x-heroicon-o-rectangle-stack class="h-8 w-8" aria-hidden="true" />
                </div>
                <h1 class="mt-6 text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
                    {{ __('pages/plans.empty.title') }}
                </h1>
                <p class="mt-3 text-sm leading-relaxed text-muted-foreground sm:text-base">
                    {{ __('pages/plans.empty.description') }}
                </p>
                <div class="mt-8 flex flex-col items-stretch justify-center gap-3 sm:flex-row sm:items-center">
                    <a
                        href="{{ route('home') }}#contact"
                        class="inline-flex w-full items-center justify-center rounded-xl border border-border bg-background px-5 py-2.5 text-sm font-semibold text-foreground transition-colors hover:bg-muted sm:w-auto">
                        {{ __('pages/plans.empty.contact_support') }}
                    </a>
                    <a
                        href="{{ route('home') }}"
                        class="inline-flex w-full items-center justify-center rounded-xl bg-brand px-5 py-2.5 text-sm font-semibold text-brand-foreground transition-colors hover:bg-brand/90 sm:w-auto">
                        {{ __('pages/plans.empty.return_home') }}
                    </a>
                </div>
            </div>
        </div>
    @else
        <div class="mx-auto max-w-3xl text-center">
            <h1 class="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">{{ __('pages/plans.title') }}</h1>
            <p class="mt-3 text-base text-muted-foreground">
                {{ __('pages/plans.subtitle') }}
            </p>
            @auth('user')
                @if(! ($canAccessSubscriptions ?? true))
                    <div class="mx-auto mt-6 max-w-xl rounded-xl border border-amber-500/30 bg-amber-500/5 px-4 py-3 text-left text-sm text-foreground">
                        {{ __('pages/subscription.access.user_only') }}
                    </div>
                @elseif($onTrial ?? false)
                    <div class="mx-auto mt-6 max-w-xl rounded-xl border border-emerald-500/30 bg-emerald-500/5 px-4 py-3 text-left text-sm text-foreground">
                        {!! __('pages/plans.notices.on_trial', [
                            'change_plan' => '<span class="font-medium">'.e(__('pages/subscription.buttons.change_plan')).'</span>',
                        ]) !!}
                    </div>
                @elseif(($occupiesSubscriptionSlot ?? false) && ($canChangePlan ?? false) && ! ($hasScheduledPlanChange ?? false))
                    <div class="mx-auto mt-6 max-w-xl rounded-xl border border-border bg-muted/30 px-4 py-3 text-left text-sm text-muted-foreground">
                        {!! __('pages/plans.notices.has_subscription_change', [
                            'change_plan' => '<span class="font-medium text-foreground">'.e(__('pages/subscription.buttons.change_plan')).'</span>',
                            'manage_billing' => '<a href="'.e(route('user.subscription.index')).'" class="font-medium text-brand hover:underline">'.e(__('pages/subscription.buttons.manage_billing')).'</a>',
                        ]) !!}
                    </div>
                @elseif(($occupiesSubscriptionSlot ?? false) && ! ($hasScheduledPlanChange ?? false))
                    <div class="mx-auto mt-6 max-w-xl rounded-xl border border-border bg-muted/30 px-4 py-3 text-left text-sm text-muted-foreground">
                        {!! __('pages/plans.notices.has_subscription_wait', [
                            'manage_subscription' => '<a href="'.e(route('user.subscription.index')).'" class="font-medium text-brand hover:underline">'.e(__('pages/subscription.buttons.manage_subscription')).'</a>',
                        ]) !!}
                    </div>
                @endif
                @if($hasScheduledPlanChange ?? false)
                    <div class="mx-auto mt-6 max-w-xl rounded-xl border border-brand/30 bg-brand/5 px-4 py-3 text-left text-sm text-foreground">
                        <p class="font-semibold">{{ __('pages/plans.notices.scheduled_title') }}</p>
                        <p class="mt-1 text-muted-foreground">
                            {{ __('pages/plans.notices.scheduled_body', [
                                'plan' => $pendingPlan?->name,
                                'when' => $activeSubscription?->pending_plan_effective_at
                                    ? __('pages/plans.notices.scheduled_on_date', ['date' => $activeSubscription->pending_plan_effective_at->format('M d, Y')])
                                    : __('pages/plans.notices.scheduled_next_billing'),
                            ]) }}
                        </p>
                    </div>
                @endif
            @endauth
        </div>

        <div class="mt-10 grid items-stretch gap-6 sm:grid-cols-2 lg:grid-cols-3">
            @foreach($plans as $plan)
                @php
                    $price = $plan->price;
                    $isCurrent = isset($currentPlanId) && $currentPlanId && ((int) $currentPlanId === (int) $plan->id);
                    $sub = $activeSubscription ?? null;
                    $isNextPlan = isset($pendingPlanId) && $pendingPlanId && ((int) $pendingPlanId === (int) $plan->id);
                @endphp

                <article class="flex h-full flex-col rounded-2xl border border-border bg-card p-6 shadow-card">
                    <div class="flex flex-1 flex-col">
                        @if(((int) ($plan->trial_days ?? 0)) > 0)
                            <div class="mb-3">
                                <span class="inline-flex items-center rounded-full border border-emerald-500/40 bg-emerald-500/10 px-2.5 py-1 text-xs font-semibold text-emerald-800 dark:text-emerald-200">
                                    @php
                                        $trialCount = (int) $plan->trial_days;
                                        $trialUnit = $trialCount === 1
                                            ? __('pages/plans.duration.day')
                                            : __('pages/plans.duration.days');
                                    @endphp
                                    {{ __('pages/plans.trial_badge', ['count' => $trialCount, 'unit' => $trialUnit]) }}
                                </span>
                            </div>
                        @endif
                        <div class="flex items-start justify-between gap-3">
                            <h2 class="text-lg font-semibold text-foreground">{{ $plan->name }}</h2>
                            @auth('user')
                                @if(($canAccessSubscriptions ?? true) && $isCurrent)
                                    <span class="inline-flex shrink-0 items-center rounded-full border border-border bg-muted px-2.5 py-1 text-xs font-semibold text-foreground">
                                        {{ __('pages/subscription.buttons.current_plan') }}
                                    </span>
                                @elseif(($canAccessSubscriptions ?? true) && $isNextPlan)
                                    <span class="inline-flex shrink-0 items-center rounded-full border border-brand/40 bg-brand/10 px-2.5 py-1 text-xs font-semibold text-foreground">
                                        {{ __('pages/plans.cards.next_plan') }} · {{ $sub?->pending_plan_effective_at?->format('M d') }}
                                    </span>
                                @endif
                            @endauth
                        </div>
                        @if($plan->description)
                            <div class="mt-2 flex-grow text-sm leading-relaxed text-muted-foreground prose prose-sm max-w-none dark:prose-invert">
                                {!! $plan->description !!}
                            </div>
                        @else
                            <div class="flex-grow"></div>
                        @endif

                        <div class="mt-5">
                            @if($price)
                                <x-plan-price :plan="$plan" size="lg" />
                            @else
                                <div class="text-sm text-muted-foreground">{{ __('pages/plans.cards.pricing_unavailable') }}</div>
                            @endif
                        </div>
                    </div>

                    <div class="mt-6 flex min-h-[4.75rem] flex-col justify-end gap-2 pt-2">
                        @if($plan->isPurchasable())
                            @auth('user')
                                @if(! ($canAccessSubscriptions ?? true))
                                    <button type="button" disabled
                                            class="inline-flex w-full items-center justify-center rounded-xl border border-border bg-muted/40 px-6 py-3 text-sm font-semibold text-muted-foreground cursor-not-allowed"
                                            title="{{ __('pages/subscription.access.user_only') }}">
                                        {{ __('pages/subscription.buttons.subscribe') }}
                                    </button>
                                @elseif($isCurrent)
                                    <button type="button" disabled
                                            class="inline-flex w-full items-center justify-center rounded-xl border border-border bg-muted/40 px-6 py-3 text-sm font-semibold text-muted-foreground cursor-not-allowed">
                                        {{ __('pages/subscription.buttons.current_plan') }}
                                    </button>
                                    <a href="{{ route('user.subscription.index') }}"
                                       class="inline-flex w-full items-center justify-center text-center text-xs font-medium text-brand hover:underline">
                                        {{ __('pages/subscription.buttons.manage_subscription') }}
                                    </a>
                                @elseif($isNextPlan)
                                    <button type="button" disabled class="inline-flex w-full items-center justify-center rounded-xl bg-muted px-6 py-3 text-sm font-semibold text-muted-foreground">
                                        {{ __('pages/subscription.buttons.your_next_plan') }}
                                    </button>
                                @elseif($hasScheduledPlanChange ?? false)
                                    <button type="button" disabled class="inline-flex w-full items-center justify-center rounded-xl bg-muted px-6 py-3 text-sm font-semibold text-muted-foreground" title="{{ __('pages/subscription.buttons.switch_unavailable_title') }}">
                                        {{ __('pages/subscription.buttons.switch_unavailable') }}
                                    </button>
                                @elseif($canChangePlan ?? false)
                                    @php
                                        $subForMode = $activeSubscription ?? null;
                                        $switchMode = \App\Support\SubscriptionPlanChange::switchMode($subForMode, $plan);
                                        $changeLabel = \App\Support\SubscriptionPlanChange::changeButtonLabel($subForMode, $plan);
                                    @endphp
                                    <form method="POST" action="{{ route('user.subscription.change', $plan->id) }}" data-plan-change-form>
                                        @csrf
                                        <button
                                            type="button"
                                            class="inline-flex w-full items-center justify-center rounded-xl bg-brand px-6 py-3 text-sm font-semibold text-brand-foreground hover:bg-brand/90"
                                            data-plan-name="{{ $plan->name }}"
                                            data-switch-mode="{{ $switchMode }}"
                                            @click="confirmSwitchPlan($el)">
                                            {{ $changeLabel }}
                                        </button>
                                    </form>
                                @elseif($occupiesSubscriptionSlot ?? false)
                                    <a href="{{ route('user.subscription.index') }}"
                                       class="inline-flex w-full items-center justify-center rounded-xl border border-border bg-card px-6 py-3 text-sm font-semibold text-foreground hover:bg-muted/60">
                                        {{ __('pages/subscription.buttons.manage_subscription') }}
                                    </a>
                                @else
                                    <a href="{{ route('subscription.checkout', $plan->id) }}"
                                       data-checkout-link
                                       @click="beginCheckout($event)"
                                       class="inline-flex w-full items-center justify-center rounded-xl bg-brand px-6 py-3 text-sm font-semibold text-brand-foreground hover:bg-brand/90">
                                        {{ __('pages/subscription.buttons.subscribe') }}
                                    </a>
                                @endif
                            @else
                                <a href="{{ route('subscription.checkout', $plan->id) }}"
                                   data-checkout-link
                                   @click="beginCheckout($event)"
                                   class="inline-flex w-full items-center justify-center rounded-xl bg-brand px-6 py-3 text-sm font-semibold text-brand-foreground hover:bg-brand/90">
                                    {{ __('pages/subscription.buttons.subscribe') }}
                                </a>
                            @endauth
                        @else
                            <button type="button" disabled class="inline-flex w-full items-center justify-center rounded-xl bg-muted px-6 py-3 text-sm font-semibold text-muted-foreground">
                                {{ __('pages/subscription.buttons.subscribe') }}
                            </button>
                        @endif
                    </div>
                </article>
            @endforeach
        </div>
    @endif
</section>

@if($plans->isNotEmpty())
    <x-alert-dialog />
@endif
@endsection

@push('before-app-js')
@if($plans->isNotEmpty())
    <x-subscription.action-messages />
    @vite(['resources/js/user/subscription-actions.js'])
@endif
@endpush