@extends('layouts.front.app')

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

@section('content')
<x-layouts.user.dashboard>
    <div class="animate-fade-in" x-data="subscriptionActions">
        <header class="mb-5 sm:mb-6 lg:mb-8">
            <p class="text-xs font-medium uppercase tracking-wider text-muted-foreground">{{ __('pages/subscription.dashboard.billing') }}</p>
            <h1 class="mt-1 text-xl font-bold tracking-tight text-foreground sm:text-2xl lg:text-3xl">
                {{ __('pages/subscription.dashboard.title') }}
            </h1>
            <p class="mt-2 max-w-2xl text-sm leading-relaxed text-muted-foreground">
                {{ __('pages/subscription.dashboard.subtitle') }}
            </p>
        </header>

        <div class="space-y-6">
            <section class="overflow-hidden rounded-2xl border border-border/80 bg-card shadow-card dark:shadow-soft">
                <div class="border-b border-border/80 px-5 py-4 sm:px-6">
                    <h2 class="text-base font-semibold text-foreground">{{ __('pages/subscription.dashboard.current.title') }}</h2>
                    <p class="mt-0.5 text-sm text-muted-foreground">
                        @if($activeSubscription)
                            {{ __('pages/subscription.dashboard.current.subtitle_active') }}
                        @else
                            {{ __('pages/subscription.dashboard.current.subtitle_empty') }}
                        @endif
                    </p>
                </div>

                <div class="px-5 py-5 sm:px-6">
                    @if($activeSubscription)
                        @if($onTrial ?? false)
                            <div class="mb-4 rounded-xl border border-emerald-500/30 bg-emerald-500/5 px-4 py-3 text-sm text-foreground">
                                {!! __('pages/subscription.dashboard.current.trial_ends', [
                                    'date' => '<span class="font-semibold">'.e($trialEndsAt?->format('M d, Y') ?? __('pages/common.empty')).'</span>',
                                ]) !!}
                            </div>
                        @endif

                        @if($pendingPlan ?? null)
                            <div class="mb-4 rounded-xl border border-brand/30 bg-brand/5 px-4 py-3 text-sm text-foreground">
                                {!! __('pages/subscription.dashboard.current.pending_switch', [
                                    'plan' => '<span class="font-semibold">'.e($pendingPlan->name).'</span>',
                                    'date' => '<span class="font-semibold">'.e($activeSubscription->pending_plan_effective_at?->format('M d, Y') ?? __('pages/subscription.dashboard.current.next_billing_fallback')).'</span>',
                                    'current' => '<span class="font-semibold">'.e($currentPlan?->name ?? __('pages/subscription.dashboard.current.current_plan_fallback')).'</span>',
                                ]) !!}
                            </div>
                        @endif

                        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                            <div class="rounded-xl bg-muted/30 px-4 py-3">
                                <div class="text-2xs font-medium uppercase tracking-wide text-muted-foreground">{{ __('pages/subscription.buttons.current_plan') }}</div>
                                <div class="mt-1 text-sm font-semibold text-foreground">{{ $currentPlan?->name ?? __('pages/common.empty') }}</div>
                            </div>
                            @if($pendingPlan ?? null)
                                <div class="rounded-xl border border-brand/30 bg-brand/5 px-4 py-3">
                                    <div class="text-2xs font-medium uppercase tracking-wide text-muted-foreground">{{ __('pages/plans.cards.next_plan') }}</div>
                                    <div class="mt-1 text-sm font-semibold text-foreground">{{ $pendingPlan->name }}</div>
                                    <div class="mt-1 text-xs text-muted-foreground">
                                        {{ __('pages/subscription.dashboard.current.labels.starts', [
                                            'date' => $activeSubscription->pending_plan_effective_at?->format('M d, Y') ?? __('pages/subscription.dashboard.current.next_billing_date_fallback'),
                                        ]) }}
                                    </div>
                                </div>
                            @endif
                            <div class="rounded-xl bg-muted/30 px-4 py-3">
                                <div class="text-2xs font-medium uppercase tracking-wide text-muted-foreground">{{ __('form.label.status') }}</div>
                                <div class="mt-1 text-sm font-semibold text-foreground">{{ \App\Support\SubscriptionStatusLabel::for($activeSubscription->stripe_status) }}</div>
                            </div>
                            <div class="rounded-xl bg-muted/30 px-4 py-3">
                                <div class="text-2xs font-medium uppercase tracking-wide text-muted-foreground">
                                    {{ ($onTrial ?? false) ? __('pages/subscription.dashboard.current.labels.first_charge') : __('pages/subscription.dashboard.current.labels.next_billing') }}
                                </div>
                                <div class="mt-1 text-sm font-semibold text-foreground">
                                    {{ $nextBilling?->format('M d, Y') ?? __('pages/common.empty') }}
                                </div>
                            </div>
                            <div class="rounded-xl bg-muted/30 px-4 py-3">
                                <div class="text-2xs font-medium uppercase tracking-wide text-muted-foreground">{{ __('pages/subscription.dashboard.current.labels.amount') }}</div>
                                <div class="mt-1 text-sm font-semibold text-foreground">
                                    @if($currentPrice && $currentPlan)
                                        <x-plan-price :plan="$currentPlan" />
                                    @else
                                        {{ __('pages/common.empty') }}
                                    @endif
                                </div>
                            </div>
                            <div class="rounded-xl bg-muted/30 px-4 py-3">
                                <div class="text-2xs font-medium uppercase tracking-wide text-muted-foreground">{{ __('pages/subscription.dashboard.current.labels.started') }}</div>
                                <div class="mt-1 text-sm font-semibold text-foreground">
                                    {{ $activeSubscription->created_at?->format('M d, Y') ?? __('pages/common.empty') }}
                                </div>
                            </div>
                            @if($activeSubscription->onGracePeriod())
                                <div class="rounded-xl bg-muted/30 px-4 py-3">
                                    <div class="text-2xs font-medium uppercase tracking-wide text-muted-foreground">{{ __('pages/subscription.dashboard.current.labels.access_until') }}</div>
                                    <div class="mt-1 text-sm font-semibold text-foreground">
                                        {{ $activeSubscription->ends_at?->format('M d, Y') ?? __('pages/common.empty') }}
                                    </div>
                                </div>
                            @endif
                        </div>

                        <div class="mt-5 flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
                            @if($activeSubscription->valid() && ! $activeSubscription->canceled())
                                <form method="POST" action="{{ route('user.subscription.cancel') }}" x-ref="cancelForm">
                                    @csrf
                                    <button
                                        type="button"
                                        class="inline-flex w-full items-center justify-center rounded-xl bg-amber-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-amber-700 sm:w-auto"
                                        @click="confirmCancelSubscription()">
                                        {{ __('pages/subscription.buttons.cancel_subscription') }}
                                    </button>
                                </form>
                            @endif

                            @if($activeSubscription->onGracePeriod())
                                <form method="POST" action="{{ route('user.subscription.resume') }}" x-ref="resumeForm">
                                    @csrf
                                    <button
                                        type="button"
                                        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 hover:bg-brand/90 sm:w-auto"
                                        @click="confirmResumeSubscription()">
                                        {{ __('pages/subscription.buttons.resume_subscription') }}
                                    </button>
                                </form>
                            @endif
                        </div>

                        @if($activeSubscription->onGracePeriod())
                            <div class="mt-4 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-200">
                                {!! __('pages/subscription.dashboard.current.grace_period_notice', [
                                    'date' => '<span class="font-semibold">'.e($activeSubscription->ends_at?->format('M d, Y') ?? __('pages/subscription.dashboard.current.grace_period_fallback')).'</span>',
                                ]) !!}
                            </div>
                        @endif
                    @else
                        <div class="flex flex-col items-center justify-center px-4 py-10 text-center sm:py-12">
                            <div class="flex h-12 w-12 items-center justify-center rounded-full bg-muted/60">
                                <x-heroicon-o-credit-card class="h-6 w-6 text-muted-foreground" />
                            </div>
                            <h3 class="mt-4 text-base font-semibold text-foreground">{{ __('pages/subscription.dashboard.current.empty.title') }}</h3>
                            <p class="mt-2 max-w-sm text-sm leading-relaxed text-muted-foreground">
                                {{ __('pages/subscription.dashboard.current.empty.description') }}
                            </p>
                            <a href="{{ route('plans.index') }}"
                               class="mt-6 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 sm:w-auto">
                                {{ __('pages/subscription.buttons.choose_plan') }}
                            </a>
                        </div>
                    @endif
                </div>
            </section>

            @if($activeSubscription)
                <section class="overflow-hidden rounded-2xl border border-border/80 bg-card shadow-card dark:shadow-soft">
                    <div class="border-b border-border/80 px-5 py-4 sm:px-6">
                        <h2 class="text-base font-semibold text-foreground">{{ __('pages/subscription.dashboard.change_plan.title') }}</h2>
                        <p class="mt-0.5 text-sm text-muted-foreground">
                            @if($onTrial ?? false)
                                {{ __('pages/subscription.dashboard.change_plan.subtitle_trial') }}
                            @elseif($hasScheduledPlanChange ?? false)
                                {{ __('pages/subscription.dashboard.change_plan.subtitle_scheduled') }}
                            @elseif($activeSubscription->onGracePeriod())
                                {{ __('pages/subscription.dashboard.change_plan.subtitle_grace') }}
                            @elseif($canChangePlan ?? false)
                                {{ __('pages/subscription.dashboard.change_plan.subtitle_available') }}
                            @else
                                {{ __('pages/subscription.dashboard.change_plan.subtitle_unavailable') }}
                            @endif
                        </p>
                    </div>
                    <div class="px-5 py-5 sm:px-6">
                        @if($hasScheduledPlanChange ?? false)
                            <div class="rounded-xl border border-border/70 bg-muted/20 px-4 py-4 text-sm text-muted-foreground">
                                <p>
                                    {{ __('pages/subscription.dashboard.change_plan.scheduled_notice', [
                                        'plan' => $pendingPlan?->name,
                                        'date' => $activeSubscription->pending_plan_effective_at?->format('M d, Y') ?? __('pages/subscription.dashboard.current.next_billing_fallback'),
                                    ]) }}
                                </p>
                                <a href="{{ route('plans.index') }}" class="mt-3 inline-block font-medium text-brand hover:underline">
                                    {{ __('pages/subscription.buttons.view_all_plans') }}
                                </a>
                            </div>
                        @elseif($activeSubscription->onGracePeriod())
                            <div class="rounded-xl border border-border/70 bg-muted/20 px-4 py-4 text-sm text-muted-foreground">
                                <p>
                                    {!! __('pages/subscription.dashboard.change_plan.grace_notice', [
                                        'resume' => '<span class="font-semibold text-foreground">'.e(__('pages/subscription.buttons.resume_subscription')).'</span>',
                                    ]) !!}
                                </p>
                                <a href="{{ route('plans.index') }}" class="mt-3 inline-block font-medium text-brand hover:underline">
                                    {{ __('pages/subscription.buttons.view_plans') }}
                                </a>
                            </div>
                        @elseif(! ($canChangePlan ?? false))
                            <div class="rounded-xl border border-border/70 bg-muted/20 px-4 py-4 text-sm text-muted-foreground">
                                <p>{{ __('pages/subscription.dashboard.change_plan.unavailable_notice') }}</p>
                                <a href="{{ route('plans.index') }}" class="mt-3 inline-block font-medium text-brand hover:underline">
                                    {{ __('pages/subscription.buttons.view_plans') }}
                                </a>
                            </div>
                        @elseif($availablePlans->isEmpty())
                            <p class="text-sm text-muted-foreground">{{ __('pages/subscription.dashboard.change_plan.no_other_plans') }}</p>
                        @else
                            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                                @foreach($availablePlans as $plan)
                                    @php
                                        $switchMode = \App\Support\SubscriptionPlanChange::switchMode($activeSubscription, $plan);
                                        $changeLabel = \App\Support\SubscriptionPlanChange::changeButtonLabel(
                                            $activeSubscription,
                                            $plan,
                                            __('pages/subscription.buttons.switch_plan')
                                        );
                                    @endphp
                                    <article class="flex flex-col rounded-2xl border border-border/70 bg-muted/10 p-4">
                                        <div class="text-sm font-semibold text-foreground">{{ $plan->name }}</div>
                                        <div class="mt-2 text-sm text-muted-foreground">
                                            @if($plan->price)
                                                <x-plan-price :plan="$plan" />
                                            @else
                                                {{ __('pages/common.empty') }}
                                            @endif
                                        </div>
                                        <form method="POST" action="{{ route('user.subscription.change', $plan->id) }}" class="mt-auto pt-4" data-plan-change-form>
                                            @csrf
                                            <button
                                                type="button"
                                                class="inline-flex w-full items-center justify-center rounded-xl border border-border bg-card px-4 py-2.5 text-sm font-semibold text-foreground hover:bg-muted/60"
                                                data-plan-name="{{ $plan->name }}"
                                                data-switch-mode="{{ $switchMode }}"
                                                @click="confirmSwitchPlan($el)">
                                                {{ $changeLabel }}
                                            </button>
                                        </form>
                                    </article>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </section>
            @endif

            <section class="overflow-hidden rounded-2xl border border-border/80 bg-card shadow-card dark:shadow-soft">
                <div class="border-b border-border/80 px-5 py-4 sm:px-6">
                    <h2 class="text-base font-semibold text-foreground">{{ __('pages/subscription.dashboard.history.title') }}</h2>
                    <p class="mt-0.5 text-sm text-muted-foreground">
                        {{ __('pages/subscription.dashboard.history.subtitle') }}
                    </p>
                </div>

                <div class="px-5 py-5 sm:px-6">
                    <h3 class="text-sm font-semibold text-foreground">{{ __('pages/subscription.dashboard.history.subscriptions') }}</h3>
                    <div class="mt-3 overflow-x-auto -mx-5 sm:mx-0">
                        <table class="min-w-full text-left text-sm">
                            <thead class="border-b border-border/80 bg-muted/20 text-xs uppercase tracking-wider text-muted-foreground">
                                <tr>
                                    <th class="px-5 py-3">{{ __('pages/admin/subscription.table.plan') }}</th>
                                    <th class="px-5 py-3">{{ __('form.label.status') }}</th>
                                    <th class="px-5 py-3">{{ __('pages/admin/subscription.table.started') }}</th>
                                    <th class="px-5 py-3">{{ __('pages/admin/subscription.table.ends') }}</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-border/60">
                                @forelse($history as $sub)
                                    @php
                                        $planName = $sub->stripe_price
                                            ? \App\Support\SubscriptionPlanResolver::planForStripePrice($sub->stripe_price)?->name
                                            : null;
                                    @endphp
                                    <tr>
                                        <td class="px-5 py-3 font-medium text-foreground">{{ $planName ?? __('pages/common.empty') }}</td>
                                        <td class="px-5 py-3 text-muted-foreground">{{ \App\Support\SubscriptionStatusLabel::for($sub->stripe_status) }}</td>
                                        <td class="px-5 py-3 text-muted-foreground">{{ $sub->created_at?->format('M d, Y') ?? __('pages/common.empty') }}</td>
                                        <td class="px-5 py-3 text-muted-foreground">{{ $sub->ends_at?->format('M d, Y') ?? __('pages/common.empty') }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="px-5 py-10 text-center text-sm text-muted-foreground">
                                            {{ __('pages/subscription.dashboard.history.empty') }}
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="mt-8 border-t border-border/80 pt-8">
                        <h3 class="text-sm font-semibold text-foreground">{{ __('pages/subscription.dashboard.invoices.title') }}</h3>
                        <p class="mt-1 text-sm text-muted-foreground">
                            {{ __('pages/subscription.dashboard.invoices.subtitle') }}
                        </p>
                        <div class="mt-3 overflow-x-auto -mx-5 sm:mx-0">
                            <table class="min-w-full text-left text-sm">
                                <thead class="border-b border-border/80 bg-muted/20 text-xs uppercase tracking-wider text-muted-foreground">
                                    <tr>
                                        <th class="px-5 py-3">{{ __('pages/subscription.dashboard.invoices.table.invoice') }}</th>
                                        <th class="px-5 py-3">{{ __('pages/subscription.dashboard.invoices.table.date') }}</th>
                                        <th class="px-5 py-3">{{ __('pages/subscription.dashboard.invoices.table.amount') }}</th>
                                        <th class="px-5 py-3">{{ __('form.label.status') }}</th>
                                        <th class="px-5 py-3 text-right">{{ __('pages/subscription.dashboard.invoices.table.pdf') }}</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-border/60">
                                    @forelse($invoices as $invoice)
                                        <tr>
                                            <td class="px-5 py-3 font-medium text-foreground">
                                                {{ $invoice['number'] }}
                                            </td>
                                            <td class="px-5 py-3 text-muted-foreground whitespace-nowrap">
                                                {{ $invoice['billing_date']->format('M d, Y') }}
                                            </td>
                                            <td class="px-5 py-3 text-muted-foreground whitespace-nowrap">
                                                {{ $invoice['amount'] }}
                                            </td>
                                            <td class="px-5 py-3">
                                                @php
                                                    $invoiceStatusClass = match ($invoice['status']) {
                                                        'paid' => 'border-emerald-500/40 bg-emerald-500/10 text-emerald-800 dark:text-emerald-200',
                                                        'open' => 'border-amber-500/40 bg-amber-500/10 text-amber-900 dark:text-amber-200',
                                                        'uncollectible', 'void' => 'border-red-500/40 bg-red-500/10 text-red-800 dark:text-red-200',
                                                        default => 'border-border bg-muted/40 text-muted-foreground',
                                                    };
                                                @endphp
                                                <span class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold {{ $invoiceStatusClass }}">
                                                    {{ $invoice['status_label'] }}
                                                </span>
                                            </td>
                                            <td class="px-5 py-3 text-right">
                                                @if($invoice['can_download'])
                                                    <a href="{{ route('user.subscription.invoice.download', $invoice['id']) }}"
                                                       class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-border bg-card px-3 py-1.5 text-xs font-semibold text-foreground hover:bg-muted/60"
                                                       target="_blank"
                                                       rel="noopener noreferrer">
                                                        <x-heroicon-o-arrow-down-tray class="h-4 w-4 shrink-0" />
                                                        <span class="hidden sm:inline">{{ __('buttons.download') }}</span>
                                                        <span class="sm:hidden">{{ __('pages/subscription.buttons.pdf') }}</span>
                                                    </a>
                                                @else
                                                    <span class="inline-flex cursor-not-allowed items-center justify-center rounded-lg border border-border/60 bg-muted/30 px-3 py-1.5 text-xs font-medium text-muted-foreground"
                                                          title="{{ __('pages/subscription.dashboard.invoices.pdf_unavailable') }}">
                                                        {{ __('pages/common.empty') }}
                                                    </span>
                                                @endif
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="px-5 py-10 text-center text-sm text-muted-foreground">
                                                {{ __('pages/subscription.dashboard.invoices.empty') }}
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</x-layouts.user.dashboard>

<x-alert-dialog />
@endsection

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