@extends('theme::layouts.app', ['title' => $title ?? __('subscription.title|Subscriptions')])

@section('content')
    <main class="flex-grow w-full max-w-[1440px] mx-auto px-6 lg:px-10 py-10">
        <div class="flex flex-col lg:flex-row gap-10">
            <!-- Sidebar -->
            <aside class="w-full lg:w-64 flex-shrink-0">
                @include('theme::partials.account.nav')
            </aside>

            <section class="flex-grow">
                @if(isset($pageHeader))
                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-6 mb-8">
                    <div>
                        <h1 class="text-2xl font-bold text-text-main dark:text-white">{{ $pageHeader['title'] }}</h1>
                        <p class="text-text-muted dark:text-gray-400 mt-1">{{ $pageHeader['subtitle'] }}</p>
                    </div>
                </div>
                @endif
                <div class="space-y-4">
                    @forelse ($subscriptions as $subscription)
                        @php
                            $statusDetails = getSubscriptionStatusDetails($subscription->status);
                            $badgeClass = 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400';

                            $isCancelled = !empty($subscription->cancelled_at);
                            $isActive = $subscription->status === getConstant('SUBSCRIPTION_STATUS_ACTIVE');

                            // Determine the effective expiry date (end_date if set, otherwise next_billing_date)
                            $expiryDate = $subscription->end_date ?? $subscription->next_billing_date;

                            // Status Badge Logic
                            if ($isCancelled && $expiryDate > now()) {
                                // Grace period: Cancelled but still has time left
                                $badgeClass = 'bg-orange-50 text-orange-600 dark:bg-orange-900/20 dark:text-orange-400';
                                $statusLabel = __('subscription.Pending Cancellation');
                            } elseif ($statusDetails['class'] == 'bg-success') {
                                $badgeClass = 'bg-green-50 text-green-600 dark:bg-green-900/20 dark:text-green-400';
                                $statusLabel = $statusDetails['label'];
                            } elseif ($statusDetails['class'] == 'bg-danger') {
                                $badgeClass = 'bg-red-50 text-red-600 dark:bg-red-900/10 dark:text-red-500';
                                $statusLabel = $statusDetails['label'];
                            } else {
                                $statusLabel = $statusDetails['label'];
                            }
                        @endphp
                        <div
                            class="group bg-white dark:bg-surface-dark rounded-xl border border-gray-100 dark:border-gray-800 p-4 sm:p-6 hover:shadow-soft transition-all duration-300 {{ $isCancelled ? 'opacity-80 bg-white/60 dark:bg-surface-dark/60' : '' }}">
                            <div class="flex flex-col lg:flex-row lg:items-center gap-6">
                                <div
                                    class="size-16 rounded-xl {{ $isActive ? 'bg-primary/10' : 'bg-gray-100 dark:bg-gray-800' }} flex items-center justify-center flex-shrink-0">
                                    <span class="material-symbols-outlined {{ $isActive ? 'text-primary' : 'text-gray-400' }} text-[32px]">
                                        {{ $isActive ? 'auto_awesome' : 'shield' }}
                                    </span>
                                </div>
                                <div class="flex-grow">
                                    <div class="flex flex-wrap items-center gap-3 mb-2">
                                        <a href="{{ route('frontend.subscriptions.show', [$subscription->id]) }}"
                                           class="text-lg font-bold {{ $isActive ? 'text-text-main dark:text-white hover:text-primary' : 'text-text-muted dark:text-gray-400' }} transition-colors">
                                            {!! $subscription->name !!}
                                        </a>
                                        <span
                                            class="px-2.5 py-1 text-[10px] font-bold rounded-full uppercase tracking-wider {{ $badgeClass }}">
                                            {{ $statusLabel }}
                                        </span>
                                    </div>
                                    <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-4">
                                        <div class="flex flex-col">
                                            <span
                                                class="text-[10px] uppercase font-bold text-text-muted tracking-wider">{{ __('subscription.Subscription Ref') }}</span>
                                            <span class="text-sm font-semibold">{!! $subscription->reference_id !!}</span>
                                        </div>
                                        <div class="flex flex-col">
                                            <span
                                                class="text-[10px] uppercase font-bold text-text-muted tracking-wider">{{ __('subscription.Billing Cycle') }}</span>
                                            <span class="text-sm font-medium">{{ $subscription->billing_cycle_label ?? __('subscription.Monthly') }}</span>
                                        </div>
                                        <div class="flex flex-col">
                                            <span
                                                class="text-[10px] uppercase font-bold text-text-muted tracking-wider">{{ __('subscription.Price') }}</span>
                                            <span class="text-sm font-bold {{ $isActive ? 'text-primary' : 'text-text-muted' }}">
                                                {!! ch_format_price($subscription->total_price) !!}
                                            </span>
                                        </div>
                                        <div class="flex flex-col">
                                            <span
                                                class="text-[10px] uppercase font-bold text-text-muted tracking-wider">
                                                {{ ($isActive && !$isCancelled) ? __('subscription.Next Billing') : __('subscription.Expires On') }}
                                            </span>
                                            <span class="text-sm font-medium">
                                                @if($expiryDate)
                                                    {{ $expiryDate->format('M d, Y') }}
                                                @else
                                                    -
                                                @endif
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div
                                    class="flex flex-col sm:flex-row lg:flex-col gap-2 pt-4 lg:pt-0 border-t lg:border-t-0 border-gray-50 dark:border-gray-800">

                                    @if($isActive)
                                        {{-- Upgrade logic would go here if available --}}
                                        {{--
                                        <button class="flex-1 lg:w-44 px-4 py-2 bg-primary hover:bg-primary-dark text-white rounded-lg font-semibold transition-all shadow-sm text-xs">
                                            Upgrade Plan
                                        </button>
                                        --}}
                                    @endif

                                    @if($isCancelled && $expiryDate > now())
                                        <form action="{{ route('frontend.subscriptions.reactive', $subscription->id) }}" method="POST">
                                            @csrf
                                            @method('PUT')
                                            <button type="submit"
                                                class="flex-1 w-full lg:w-44 px-4 py-2 bg-primary hover:bg-primary-dark text-white rounded-lg font-semibold transition-all shadow-sm text-xs">
                                                {{ __('subscription.Reactivate Plan') }}
                                            </button>
                                        </form>
                                    @endif
                                        <a href="{{ route('frontend.subscriptions.show', [$subscription->id]) }}"
                                            class="flex-1 lg:w-44 px-4 py-2 border border-gray-200 dark:border-gray-700 text-center text-text-main dark:text-white rounded-lg font-medium hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors text-xs flex items-center justify-center gap-2">
                                            <span class="material-symbols-outlined text-[16px]">settings</span>
                                            {{ __('subscription.Manage Billing') }}
                                        </a>

                                    @if(!$isCancelled && $isActive)
                                        <form action="{{ route('frontend.subscriptions.cancel', $subscription->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to cancel this subscription?');">
                                            @csrf
                                            @method('PUT')
                                            <button type="submit"
                                                class="flex-1 w-full lg:w-44 px-4 py-2 text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/10 rounded-lg font-medium transition-colors text-xs">
                                                {{ __('subscription.Cancel Subscription') }}
                                            </button>
                                        </form>
                                    @endif

                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="text-center py-10">
                            <h3 class="text-lg font-medium text-text-main dark:text-white">{{ __('subscription.No subscriptions found') }}</h3>
                            <p class="text-text-muted mt-2">{{ __('subscription.You don\'t have any active subscriptions.') }}</p>
                        </div>
                    @endforelse
                </div>
                <div class="mt-10 flex items-center justify-between border-t border-gray-100 dark:border-gray-800 pt-6">
                    <p class="text-sm text-text-muted">{{ __('subscription.Need help?') }} <a class="text-primary font-medium hover:underline"
                                                                     href="#">{{ __('subscription.Contact billing support') }}</a></p>
                    <div class="flex gap-2">
                        {{ $subscriptions->links() }}
                    </div>
                </div>
            </section>
        </div>
    </main>
@endsection