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

@section('content')
    <main class="flex-grow w-full max-w-[1200px] mx-auto px-6 py-10 lg:py-16">
        <!-- Breadcrumbs -->
        <nav class="flex items-center gap-2 text-xs font-medium text-text-muted mb-6">
            <a class="hover:text-primary" href="{{ route('frontend.subscriptions.index') }}">My Subscriptions</a>
            <span class="material-symbols-outlined text-[14px]">chevron_right</span>
            <span class="text-text-main dark:text-white">#{{$subscription->reference_id}}</span>
        </nav>


        <!-- Variables Setup -->
        @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');
            $expiryDate = $subscription->end_date ?? $subscription->next_billing_date;

            // Status Badge Logic
            if ($isCancelled && $expiryDate > now()) {
                $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

        <!-- Subscription Header -->
        <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-10 pb-8 border-b border-border-light dark:border-border-dark">
            <div>
                <div class="flex items-center gap-3 mb-2">
                    <h1 class="text-3xl font-bold text-text-main dark:text-white tracking-tight">
                        {!! $subscription->name ?? $subscription->reference_id !!}
                    </h1>
                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold {{ $badgeClass }}">
                        <span class="size-1.5 rounded-full bg-current opacity-75"></span>
                        {{ $statusLabel }}
                    </span>
                </div>
                <p class="text-text-muted dark:text-gray-400">
                    {{ __('subscription.Subscription ID') }}: <span class="text-text-main dark:text-white font-mono">#{{ $subscription->reference_id }}</span> •
                    {{ __('subscription.Active since') }} {{ $subscription->created_at->format('F d, Y') }}
                </p>
            </div>
            <div class="flex flex-wrap gap-3">
                {{-- Change Plan Button - Placeholder/Hidden for now --}}
                {{--
                <button class="flex items-center gap-2 px-4 py-2 bg-white dark:bg-surface-dark border border-border-light dark:border-border-dark rounded-xl text-sm font-semibold hover:bg-gray-50 dark:hover:bg-gray-800 transition-all shadow-sm">
                    <span class="material-symbols-outlined text-[20px]">swap_horiz</span>
                    Change Plan
                </button>
                --}}

                @if($isCancelled && $expiryDate > now())
                    <form action="{{ route('frontend.subscriptions.reactive', $subscription->id) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <button type="submit" class="flex items-center gap-2 px-4 py-2 bg-primary text-white border border-primary rounded-xl text-sm font-semibold hover:bg-primary-dark transition-all shadow-sm">
                            <span class="material-symbols-outlined text-[20px]">autorenew</span>
                            {{ __('subscription.Reactivate Subscription') }}
                        </button>
                    </form>
                @endif

                @if(!$isCancelled && $isActive)
                    <form action="{{ route('frontend.subscriptions.cancel', $subscription->id) }}" method="POST" onsubmit="return confirm('{{ __('subscription.Are you sure you want to cancel this subscription?') }}');">
                        @csrf
                        @method('PUT')
                        <button type="submit" class="flex items-center gap-2 px-4 py-2 bg-red-50 text-red-600 dark:bg-red-900/20 dark:text-red-400 border border-red-100 dark:border-red-900/30 rounded-xl text-sm font-semibold hover:bg-red-100 dark:hover:bg-red-900/40 transition-all shadow-sm">
                            <span class="material-symbols-outlined text-[20px]">cancel</span>
                            {{ __('subscription.Cancel Subscription') }}
                        </button>
                    </form>
                @endif
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
            <!-- Left Column: Subscription Components & History -->
            <div class="lg:col-span-2 space-y-8">
                <!-- Active Configuration -->
                <div class="bg-white dark:bg-surface-dark border border-border-light dark:border-border-dark rounded-2xl overflow-hidden shadow-sm">
                    <div class="p-6 border-b border-border-light dark:border-border-dark">
                        <h3 class="font-bold text-text-main dark:text-white flex items-center gap-2">
                            <span class="material-symbols-outlined text-primary">view_in_ar</span>
                            {{ __('subscription.Plan Configuration') }}
                        </h3>
                    </div>
                    <div class="p-6 space-y-6">
                        <!-- Main Plan Card -->
                        <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-background-dark border border-border-light dark:border-border-dark rounded-xl">
                            <div class="flex items-center gap-4">
                                <div class="size-12 bg-primary/10 text-primary rounded-lg flex items-center justify-center">
                                    <span class="material-symbols-outlined text-[28px]">token</span>
                                </div>
                                <div>
                                    <p class="text-sm font-bold text-text-main dark:text-white leading-tight">
                                        {!! $subscription->name !!}
                                    </p>
                                    <p class="text-xs text-text-muted mt-1">{{ __('subscription.Base subscription fee') }}</p>
                                </div>
                            </div>
                            <span class="font-bold text-text-main dark:text-white">
                                {!! ch_format_price($subscription->price) !!} / {{ getConstantLabel('billing_cycle', $subscription->billing_cycle) }}
                            </span>
                        </div>

                        <!-- Recurring Add-ons Section -->
                        @if($subscription->addons && $subscription->addons->count() > 0)
                            <div>
                                <h4 class="text-xs font-bold uppercase tracking-wider text-text-muted mb-4">{{ __('subscription.Recurring Add-ons') }}</h4>
                                <div class="space-y-4">
                                    @foreach($subscription->addons as $addon)
                                        <div class="flex items-center justify-between gap-4">
                                            <div class="flex items-center gap-3">
                                                <div class="size-10 bg-gray-50 dark:bg-background-dark border border-border-light dark:border-border-dark rounded-lg flex items-center justify-center text-text-muted">
                                                    <span class="material-symbols-outlined text-[20px]">extension</span>
                                                </div>
                                                <div>
                                                    <p class="text-sm font-semibold text-text-main dark:text-white">{!! $addon->name !!}</p>
                                                </div>
                                            </div>
                                            <span class="text-sm font-bold text-text-main dark:text-white">
                                                {!! ch_format_price($addon->total_price) !!} / {{ getConstantLabel('billing_cycle', $subscription->billing_cycle) }}
                                            </span>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        <!-- Downloads/Files Section -->
                        @if(isset($productFiles) && count($productFiles) && ($subscription->status == getConstant('SUBSCRIPTION_STATUS_ACTIVE') || $subscription->status == getConstant('SUBSCRIPTION_STATUS_TRIAL')))
                            <div class="pt-6 border-t border-gray-100 dark:border-gray-800">
                                <h4 class="font-bold text-text-main dark:text-white mb-4 flex items-center gap-2">
                                    <span class="material-symbols-outlined text-primary text-[20px]">download</span>
                                    {{ __('subscription.Downloads & Files') }}
                                </h4>
                                <div class="overflow-hidden border border-border-light dark:border-border-dark rounded-xl">
                                    <table class="w-full text-left">
                                        <thead class="bg-gray-50 dark:bg-background-dark border-b border-border-light dark:border-border-dark">
                                            <tr>
                                                <th class="px-4 py-3 text-[10px] font-bold uppercase tracking-widest text-text-muted">{{ __('subscription.Version') }}</th>
                                                <th class="px-4 py-3 text-[10px] font-bold uppercase tracking-widest text-text-muted">{{ __('subscription.File') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody class="divide-y divide-gray-50 dark:divide-gray-800 bg-white dark:bg-surface-dark">
                                            @foreach($productFiles as $productFile)
                                                <tr class="hover:bg-gray-50/50 dark:hover:bg-gray-800/50 transition-colors">
                                                    <td class="px-4 py-3 text-sm font-medium text-text-main dark:text-white">
                                                        {{ $productFile->version ?? 'N/A' }}
                                                        @if($productFile->changelog)
                                                            <span class="block text-xs text-text-muted mt-0.5 truncate max-w-[200px]">{{ $productFile->changelog }}</span>
                                                        @endif
                                                    </td>
                                                    <td class="px-4 py-3 text-sm">
                                                        <ul class="space-y-1">
                                                            @if(!$productFile->support_expired)
                                                                @foreach($productFile->getMedia('product_files') as $file)
                                                                    <li>
                                                                        <a href="{{ $file->getUrl() }}" target="_blank" class="flex items-center gap-2 text-primary hover:text-primary-dark font-medium transition-colors">
                                                                            <span class="material-symbols-outlined text-[16px]">cloud_download</span>
                                                                            {{ $file->name }}
                                                                        </a>
                                                                    </li>
                                                                @endforeach
                                                            @else
                                                                <li class="flex items-center gap-2 text-red-500 text-xs">
                                                                    <span class="material-symbols-outlined text-[16px]">lock</span>
                                                                    {{ __('subscription.Support expired on') }} {{ $productFile->support_expiry_date }}
                                                                </li>
                                                            @endif
                                                        </ul>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Billing History -->
                <div class="bg-white dark:bg-surface-dark border border-border-light dark:border-border-dark rounded-2xl overflow-hidden shadow-sm">
                    <div class="p-6 border-b border-border-light dark:border-border-dark flex items-center justify-between">
                        <h3 class="font-bold text-text-main dark:text-white flex items-center gap-2">
                            <span class="material-symbols-outlined text-primary">history</span>
                            {{ __('subscription.Billing History') }}
                        </h3>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="w-full text-left">
                            <thead class="bg-gray-50 dark:bg-background-dark border-b border-border-light dark:border-border-dark">
                                <tr>
                                    <th class="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-text-muted">{{ __('subscription.Date') }}</th>
                                    <th class="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-text-muted">{{ __('subscription.Order ID') }}</th>
                                    <th class="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-text-muted">{{ __('subscription.Amount') }}</th>
                                    <th class="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-text-muted">{{ __('subscription.Status') }}</th>
                                    <th class="px-6 py-4 text-right"></th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-50 dark:divide-gray-800">
                                @forelse($subscription->orders as $order)
                                    <tr class="hover:bg-gray-50/50 dark:hover:bg-gray-800/50 transition-colors">
                                        <td class="px-6 py-4 text-sm font-medium text-text-main dark:text-white">
                                            {{ $order->created_at->format('F d, Y') }}
                                        </td>
                                        <td class="px-6 py-4 text-sm font-mono text-text-muted">#{{ $order->order_reference }}</td>
                                        <td class="px-6 py-4 text-sm font-bold text-text-main dark:text-white">
                                            {!! ch_format_price($order->total, $order->currency) !!}
                                        </td>
                                        <td class="px-6 py-4">
                                            @php
                                                $orderStatusClass = 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300';
                                                if ($order->status == getConstant('ORDER_STATUS_PAID') || $order->status == getConstant('ORDER_STATUS_COMPLETED')) {
                                                    $orderStatusClass = 'bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-400';
                                                } elseif ($order->status == getConstant('ORDER_STATUS_PENDING')) {
                                                    $orderStatusClass = 'bg-orange-50 text-orange-700 dark:bg-orange-900/20 dark:text-orange-400';
                                                } elseif ($order->status == getConstant('ORDER_STATUS_CANCELLED')) {
                                                    $orderStatusClass = 'bg-red-50 text-red-700 dark:bg-red-900/20 dark:text-red-400';
                                                }
                                            @endphp
                                            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold {{ $orderStatusClass }}">
                                                {{ getConstantLabel('order_status', $order->status) }}
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 text-right">
                                            <a href="{{ route('frontend.subscriptions.orders.show', ['subscription_id' => $subscription->id, 'order_id' => $order->encrypted_id]) }}"
                                               class="text-primary hover:text-primary-dark text-xs font-bold inline-flex items-center gap-1">
                                                <span class="material-symbols-outlined text-[14px]">arrow_forward</span>
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="px-6 py-8 text-center text-text-muted text-sm">
                                            {{ __('subscription.No billing history found.') }}
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Right Column: Next Renewal Breakdown & Payment -->
            <div class="space-y-6">
                <!-- Next Renewal Card -->
                <div class="bg-white dark:bg-surface-dark border border-border-light dark:border-border-dark rounded-2xl p-6 shadow-sm sticky top-24">
                    <h3 class="font-bold text-text-main dark:text-white mb-6">{{ __('subscription.Upcoming Charge') }}</h3>

                    @if($isActive && !$isCancelled)
                        <div class="space-y-4 mb-6">
                            <div class="flex justify-between text-sm">
                                <span class="text-text-muted">{{ __('subscription.Total') }}</span>
                                <span class="font-medium text-text-main dark:text-white">
                                    {!! ch_format_price($subscription->total_price) !!}
                                </span>
                            </div>

                            <div class="pt-4 border-t border-gray-100 dark:border-gray-800 flex justify-between">
                                <div class="flex flex-col">
                                    <span class="font-bold text-text-main dark:text-white text-lg">{{ __('subscription.Next Total') }}</span>
                                    <span class="text-[10px] text-text-muted uppercase font-bold">
                                        {{ __('subscription.Due') }} {{ $subscription->next_billing_date ? $subscription->next_billing_date->format('M d, Y') : 'N/A' }}
                                    </span>
                                </div>
                                <span class="font-bold text-text-main dark:text-white text-2xl font-display tracking-tight">
                                    {!! ch_format_price($subscription->total_price) !!}
                                </span>
                            </div>
                        </div>

                        <div class="p-4 bg-primary/5 rounded-xl border border-primary/10 mb-6">
                            <div class="flex items-start gap-3">
                                <span class="material-symbols-outlined text-[20px] text-primary">info</span>
                                <p class="text-xs text-text-muted leading-relaxed">
                                    {{ __('subscription.Your next automatic renewal will happen in :days days.', ['days' => $subscription->next_billing_date ? ceil(now()->diffInDays($subscription->next_billing_date)) : 0]) }}
                                </p>
                            </div>
                        </div>
                    @else
                        <div class="p-4 bg-gray-50 dark:bg-gray-800 rounded-xl mb-6 text-center">
                            <p class="text-sm text-text-muted">{{ __('subscription.No upcoming charges.') }}</p>
                        </div>
                    @endif

                    <!-- Billing Address (Replaces Payment Method) -->
                    @if(isset($lastOrder->billingInfo))
                        <h4 class="font-bold text-text-main dark:text-white mb-4">{{ __('subscription.Billing Address') }}</h4>
                        <div class="p-4 bg-gray-50 dark:bg-gray-800/50 rounded-xl mb-6">
                            <div class="text-sm text-text-muted space-y-1">
                                <p class="font-bold text-text-main dark:text-white">{{ $lastOrder->billingInfo->full_name_attribute ?? '' }}</p>
                                <p>{{ $lastOrder->billingInfo->address ?? '' }}</p>
                                <p>
                                    {{ $lastOrder->billingInfo->city ?? '' }}
                                    {{ $lastOrder->billingInfo->state->name ?? '' }}
                                    {{ $lastOrder->billingInfo->zip ?? '' }}
                                </p>
                                <p>{{ $lastOrder->billingInfo->country->name ?? '' }}</p>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </main>
@endsection