@extends('layouts.dashboard')

@section('title', trans('dashboard.nav_subscription'))
@section('header_title', trans('dashboard.nav_subscription'))

@section('content')
<div class="space-y-8">
    {{-- Current Plan Status Card --}}
    <div class="p-6 rounded-2xl bg-navy-900 dark:bg-navy-900 bg-white border border-slate-800 dark:border-slate-800 border-slate-200 shadow-xl">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div>
                <div class="text-xs font-semibold text-slate-400 uppercase tracking-wider">{{ trans('dashboard.current_plan') }}</div>
                <div class="text-2xl font-black dark:text-white text-slate-900 mt-1 flex items-center gap-3">
                    <span>{{ ucfirst($tenant->plan) }}</span>
                    <span class="px-2.5 py-0.5 rounded-full bg-slate-700/40 text-slate-300 text-[11px] font-bold">{{ $currentInterval->label() }}</span>
                    @if($tenant->is_active)
                        <span class="px-2.5 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 text-xs font-bold">{{ trans('admin.active') }}</span>
                    @else
                        <span class="px-2.5 py-0.5 rounded-full bg-rose-500/10 text-rose-400 text-xs font-bold">{{ trans('admin.inactive') }}</span>
                    @endif
                </div>
            </div>
            <div class="text-start sm:text-end">
                <div class="text-xs text-slate-400">{{ trans('admin.env_label') }}</div>
                <span class="inline-block mt-1 px-3 py-1 rounded-full text-xs font-bold {{ $tenant->is_sandbox ? 'bg-amber-500/10 text-amber-400' : 'bg-emerald-500/10 text-emerald-400' }}">
                    {{ $tenant->is_sandbox ? trans('dashboard.env_sandbox') : trans('dashboard.env_production') }}
                </span>
            </div>
        </div>

        <div class="mt-6">
            <div class="flex justify-between text-xs font-semibold text-slate-300 mb-2">
                <span>{{ trans('dashboard.package_usage', ['used' => $used, 'limit' => $limit]) }}</span>
                <span class="code-font text-purple-400">{{ $limit > 0 ? min(100, round(($used / $limit) * 100)) : 0 }}%</span>
            </div>
            <div class="w-full bg-slate-800 h-2.5 rounded-full overflow-hidden">
                <div class="bg-gradient-to-r from-purple-500 to-indigo-500 h-full rounded-full transition-all duration-500"
                     style="width: {{ $limit > 0 ? min(100, round(($used / $limit) * 100)) : 0 }}%"></div>
            </div>
            <div class="flex justify-between items-center text-[11px] text-slate-400 mt-2">
                <span>{{ trans('dashboard.documents_remaining', ['remaining' => $remaining]) }}</span>
                @if($tenant->plan_expires_at)
                    <span>{{ trans('admin.expires_at') }}: {{ $tenant->plan_expires_at->format('Y-m-d') }}</span>
                @endif
            </div>
        </div>
    </div>

    {{-- Pending Upgrade Request Notice --}}
    @if($pendingRequest)
        <div class="p-4 rounded-2xl bg-amber-500/5 border border-amber-500/30 flex items-start gap-3">
            <div class="w-9 h-9 rounded-xl bg-amber-500/10 flex items-center justify-center shrink-0">
                <i class="fa-solid fa-clock text-amber-400"></i>
            </div>
            <div class="flex-1 min-w-0">
                <div class="text-xs font-bold text-amber-300">{{ trans('dashboard.pending_upgrade_request_badge') }}</div>
                <div class="text-xs text-slate-400 mt-0.5">
                    {{ trans('dashboard.pending_upgrade_notice', ['plan' => ucfirst($pendingRequest->requested_plan)]) }}
                    @if($pendingRequest->billing_interval)
                        — {{ $pendingRequest->billing_interval->label() }}
                    @endif
                </div>
            </div>
            <form method="POST"
                  action="{{ route('dashboard.subscription.cancel_upgrade', $pendingRequest->id) }}"
                  onsubmit="return confirm('{{ trans('dashboard.cancel_upgrade_confirm') }}')">
                @csrf
                @method('DELETE')
                <button type="submit"
                        class="px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-rose-600/20 text-slate-300 hover:text-rose-400 text-[11px] font-bold transition border border-slate-700 hover:border-rose-500/30 shrink-0">
                    {{ trans('dashboard.cancel_upgrade_request_btn') }}
                </button>
            </form>
        </div>
    @endif

    {{-- Available Plans --}}
    <div>
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-4">
            <h3 class="text-base font-bold dark:text-white text-slate-900">
                {{ trans('dashboard.choose_plan') }}
            </h3>
            <div class="inline-flex rounded-full bg-slate-100 dark:bg-navy-950 border border-slate-200 dark:border-slate-800 p-1 text-xs font-bold">
                <a href="{{ route('dashboard.subscription.show', ['interval' => 'monthly']) }}"
                   class="px-4 py-1.5 rounded-full {{ $interval->value === 'monthly' ? 'bg-emerald-600 text-white' : 'text-slate-500' }}">
                    {{ trans('admin.monthly') }}
                </a>
                <a href="{{ route('dashboard.subscription.show', ['interval' => 'yearly']) }}"
                   class="px-4 py-1.5 rounded-full {{ $interval->value === 'yearly' ? 'bg-emerald-600 text-white' : 'text-slate-500' }}">
                    {{ trans('admin.yearly') }}
                </a>
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            @forelse($plans as $plan)
                @php
                    $isCurrent = $tenant->plan === $plan->slug && $currentInterval === $interval;
                    $planName = $plan->displayName();
                    $planPrice = $plan->formattedPriceFor($interval);
                    $invoiceLimit = $plan->monthly_invoice_limit;
                    $deviceLimit = $plan->device_limit;
                    $features = is_array($plan->features) ? $plan->features : [];
                    $isPopular = $plan->is_popular;
                    $isPendingTarget = $pendingRequest
                        && $pendingRequest->requested_plan === $plan->slug
                        && optional($pendingRequest->billing_interval)->value === $interval->value;
                    $checkoutUrl = route('dashboard.subscription.checkout', ['plan' => $plan->slug, 'interval' => $interval->value]);
                @endphp
                <div class="relative p-6 rounded-2xl bg-navy-900 dark:bg-navy-900 bg-white border flex flex-col justify-between transition-all duration-200
                    {{ $isCurrent ? 'border-emerald-500 shadow-lg shadow-emerald-500/10 ring-1 ring-emerald-500' :
                       ($isPendingTarget ? 'border-amber-500/50 shadow-lg shadow-amber-500/5' :
                       ($isPopular ? 'border-indigo-500/60 shadow-md' : 'border-slate-800 dark:border-slate-800 border-slate-200 hover:border-slate-700')) }}">

                    @if($isPopular)
                        <div class="absolute -top-3 end-4 px-2.5 py-0.5 rounded-full bg-gradient-to-r from-emerald-600 to-teal-600 text-white text-[10px] font-black uppercase tracking-wider shadow">
                            {{ trans('dashboard.popular_badge') }}
                        </div>
                    @endif

                    @if($isPendingTarget)
                        <div class="absolute -top-3 start-4 px-2.5 py-0.5 rounded-full bg-amber-500/20 border border-amber-500/40 text-amber-400 text-[10px] font-bold">
                            {{ trans('dashboard.upgrade_req_pending') }}
                        </div>
                    @endif

                    <div>
                        <div class="flex items-center justify-between">
                            <h4 class="text-base font-black dark:text-white text-slate-900">{{ $planName }}</h4>
                            @if($isCurrent)
                                <span class="px-2 py-0.5 rounded-md bg-emerald-500/20 text-emerald-300 text-[10px] font-bold">
                                    {{ trans('dashboard.current_plan') }}
                                </span>
                            @endif
                        </div>

                        <div class="my-4">
                            <div class="text-2xl font-black text-emerald-400 code-font">{{ $planPrice }}</div>
                            <div class="text-[11px] text-slate-400 mt-0.5">
                                {{ $interval->value === 'yearly' ? trans('dashboard.billed_yearly') : trans('dashboard.billed_monthly') }}
                            </div>
                        </div>

                        <div class="p-3 rounded-xl bg-navy-950/60 dark:bg-navy-950/60 bg-slate-50 border border-slate-800/80 dark:border-slate-800/80 border-slate-200 mb-4 space-y-1.5 text-xs">
                            <div class="flex items-center justify-between dark:text-slate-300 text-slate-600">
                                <span>{{ trans('dashboard.invoice_limit_label') }}</span>
                                <strong class="dark:text-white text-slate-900 code-font">{{ $invoiceLimit < 0 ? trans('dashboard.unlimited') : number_format($invoiceLimit) }}</strong>
                            </div>
                            @if($deviceLimit)
                                <div class="flex items-center justify-between dark:text-slate-300 text-slate-600">
                                    <span>{{ trans('dashboard.devices_limit_label') }}</span>
                                    <strong class="dark:text-white text-slate-900 code-font">{{ $deviceLimit < 0 ? trans('dashboard.unlimited') : $deviceLimit }}</strong>
                                </div>
                            @endif
                        </div>

                        @if(count($features) > 0)
                            <ul class="space-y-2 mb-6 text-xs dark:text-slate-300 text-slate-600">
                                @foreach($features as $feat)
                                    <li class="flex items-start gap-2">
                                        <span class="text-emerald-400 text-xs font-bold">✓</span>
                                        <span>{{ $feat }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                    </div>

                    <div class="pt-4 border-t border-slate-800 dark:border-slate-800 border-slate-200">
                        @if($isCurrent)
                            <button type="button" disabled class="w-full py-2.5 rounded-xl bg-emerald-600 text-white text-xs font-bold cursor-default">
                                {{ trans('dashboard.plan_selected') }}
                            </button>
                        @elseif($isPendingTarget)
                            <button type="button" disabled class="w-full py-2.5 rounded-xl bg-amber-500/10 text-amber-400 text-xs font-bold cursor-default border border-amber-500/20">
                                <i class="fa-solid fa-clock me-1 text-[10px]"></i>
                                {{ trans('dashboard.upgrade_req_pending') }}
                            </button>
                        @elseif($pendingRequest)
                            <button type="button" disabled class="w-full py-2.5 rounded-xl bg-slate-800/50 text-slate-500 text-xs font-bold cursor-not-allowed">
                                {{ trans('dashboard.pending_request_exists') }}
                            </button>
                        @else
                            <a href="{{ $checkoutUrl }}"
                               class="block text-center w-full py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold transition">
                                {{ trans('dashboard.select_this_plan') }}
                            </a>
                        @endif
                    </div>
                </div>
            @empty
                <div class="col-span-4 p-8 text-center text-slate-500 bg-navy-900 border border-slate-800 rounded-2xl">
                    {{ trans('dashboard.no_plans_available') }}
                </div>
            @endforelse
        </div>
    </div>

    {{-- Upgrade Request History --}}
    @if($upgradeRequests->isNotEmpty())
        <div>
            <h3 class="text-base font-bold dark:text-white text-slate-900 mb-4">{{ trans('dashboard.upgrade_request_history_title') }}</h3>
            <div class="bg-navy-900 dark:bg-navy-900 bg-white border border-slate-800 dark:border-slate-800 border-slate-200 rounded-2xl overflow-hidden shadow-lg">
                <div class="overflow-x-auto">
                    <table class="w-full text-xs">
                        <thead class="dark:bg-navy-950/60 bg-slate-50 dark:text-slate-400 text-slate-500 border-b dark:border-slate-800 border-slate-200">
                            <tr>
                                <th class="p-4 text-start">{{ trans('dashboard.upgrade_req_date') }}</th>
                                <th class="p-4 text-start">{{ trans('dashboard.upgrade_req_from') }}</th>
                                <th class="p-4 text-start">{{ trans('dashboard.upgrade_req_to') }}</th>
                                <th class="p-4 text-start">{{ trans('dashboard.billing_interval') }}</th>
                                <th class="p-4 text-start">{{ trans('dashboard.upgrade_req_notes') }}</th>
                                <th class="p-4 text-start">{{ trans('dashboard.upgrade_req_status') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y dark:divide-slate-800/60 divide-slate-200 dark:text-slate-300 text-slate-600">
                            @foreach($upgradeRequests as $req)
                                <tr class="dark:hover:bg-navy-950/40 hover:bg-slate-50 transition">
                                    <td class="p-4 code-font">{{ $req->created_at->format('Y-m-d') }}</td>
                                    <td class="p-4">
                                        <span class="px-2 py-0.5 rounded-full dark:bg-slate-700/60 bg-slate-100 dark:text-slate-300 text-slate-600 text-[10px] font-bold uppercase">
                                            {{ $req->current_plan }}
                                        </span>
                                    </td>
                                    <td class="p-4">
                                        <span class="px-2 py-0.5 rounded-full bg-brand-500/10 text-brand-400 text-[10px] font-bold uppercase">
                                            {{ $req->requested_plan }}
                                        </span>
                                    </td>
                                    <td class="p-4">{{ $req->billing_interval?->label() ?? '—' }}</td>
                                    <td class="p-4 dark:text-slate-400 text-slate-500 max-w-[200px]">
                                        <span class="line-clamp-1">{{ $req->client_notes ?: '—' }}</span>
                                    </td>
                                    <td class="p-4">
                                        @php
                                            $statusColors = [
                                                'pending' => 'bg-amber-500/10 text-amber-400',
                                                'approved' => 'bg-emerald-500/10 text-emerald-400',
                                                'rejected' => 'bg-rose-500/10 text-rose-400',
                                                'cancelled' => 'bg-slate-700/40 text-slate-400',
                                            ];
                                        @endphp
                                        <span class="px-2 py-1 rounded-full text-[10px] font-bold {{ $statusColors[$req->status] ?? 'bg-slate-700 text-slate-300' }}">
                                            {{ $req->statusLabel() }}
                                        </span>
                                        @if($req->admin_notes)
                                            <div class="text-[10px] dark:text-slate-500 text-slate-400 mt-1 italic line-clamp-1">
                                                {{ $req->admin_notes }}
                                            </div>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    @endif
</div>
@endsection