@extends('layouts.admin', ['title' => __('messages.admin_dashboard')])

@section('content')
@php
    $palette = [
        'amber'   => ['bg' => 'bg-teal-500/10',   'text' => 'text-teal-300',   'ring' => 'ring-teal-500/30'],
        'blue'    => ['bg' => 'bg-blue-500/10',    'text' => 'text-blue-300',    'ring' => 'ring-blue-500/30'],
        'emerald' => ['bg' => 'bg-emerald-500/10', 'text' => 'text-emerald-300', 'ring' => 'ring-emerald-500/30'],
        'red'     => ['bg' => 'bg-red-500/10',     'text' => 'text-red-300',     'ring' => 'ring-red-500/30'],
        'violet'  => ['bg' => 'bg-violet-500/10',  'text' => 'text-violet-300',  'ring' => 'ring-violet-500/30'],
        'sky'     => ['bg' => 'bg-sky-500/10',     'text' => 'text-sky-300',     'ring' => 'ring-sky-500/30'],
    ];

    $stat = function ($label, $value, $icon, $color, $highlight = false) use ($palette) {
        $p = $palette[$color];
        return [
            'label' => $label, 'value' => $value, 'icon' => $icon,
            'p' => $p, 'highlight' => $highlight,
        ];
    };

    $row1 = [
        $stat(__('messages.total_users'),         $stats['total_users'],   '👥', 'blue'),
        $stat(__('messages.vip_users'),           $stats['vip_users'],     '👑', 'amber'),
        $stat(__('messages.admin_verifications'), $stats['pending_verif'], '✅', $stats['pending_verif'] > 0 ? 'red' : 'emerald', $stats['pending_verif'] > 0),
        $stat(__('messages.pending_subs_label'),  $stats['pending_subs'],  '💳', $stats['pending_subs'] > 0  ? 'red' : 'emerald', $stats['pending_subs']  > 0),
    ];
    $row2 = [
        $stat(__('messages.verified_accounts'),    $stats['star_verified'],   '🛡', 'emerald'),
        $stat(__('messages.total_referrals'),      $stats['total_referrals'], '🔗', 'violet'),
        $stat(__('messages.confirmed_referrals'),  $stats['confirmed_refs'],  '✓',  'sky'),
        $stat(__('messages.free_users'),           $stats['free_users'],      '🎯', 'blue'),
    ];
@endphp

@foreach([$row1, $row2] as $row)
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mb-4">
        @foreach($row as $s)
            <div class="rounded-2xl bg-cardapp border border-white/5 p-4 sm:p-5 shadow-md hover:border-white/10 transition {{ $s['highlight'] ? 'ring-1 ring-red-500/30' : '' }}">
                <div class="flex items-center justify-between gap-3">
                    <div class="text-xs font-semibold text-gray-400">{{ $s['label'] }}</div>
                    <div class="w-9 h-9 rounded-xl {{ $s['p']['bg'] }} ring-1 {{ $s['p']['ring'] }} flex items-center justify-center text-lg">{{ $s['icon'] }}</div>
                </div>
                <div class="mt-2 text-2xl sm:text-3xl font-extrabold {{ $s['p']['text'] }}">{{ $s['value'] }}</div>
            </div>
        @endforeach
    </div>
@endforeach

<div class="grid lg:grid-cols-2 gap-5 mt-2">
    {{-- Pending verifications --}}
    <section class="rounded-2xl bg-cardapp border border-white/5 shadow-md overflow-hidden">
        <div class="px-5 py-4 border-b border-white/5 flex items-center justify-between">
            <div class="flex items-center gap-2">
                <span class="w-1.5 h-5 rounded-full bg-violet-400"></span>
                <h2 class="font-bold text-white">{{ __('messages.pending_verifs_label') }}</h2>
            </div>
            <a href="{{ route('admin.verifications') }}" class="text-xs text-teal-300 hover:text-teal-200">{{ __('messages.view_all') }} →</a>
        </div>
        <div class="divide-y divide-white/5">
            @forelse($pending_verifs as $v)
                <div class="px-5 py-3 flex items-center gap-3 flex-wrap">
                    <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-violet-500 to-violet-700 text-white text-xs font-bold flex items-center justify-center">
                        {{ mb_substr(optional($v->user)->name ?? '?', 0, 1) }}
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="text-sm font-semibold text-white truncate">{{ optional($v->user)->name ?? '—' }}</div>
                        <div class="text-xs text-gray-400 font-mono truncate" dir="ltr">{{ $v->star_account_id }}</div>
                    </div>
                    <div class="text-xs text-gray-400 font-mono" dir="ltr">{{ $v->whatsapp }}</div>
                    <div class="flex items-center gap-2">
                        <form method="POST" action="{{ route('admin.verif.approve', $v) }}">
                            @csrf
                            <button class="px-2.5 py-1 rounded-md bg-emerald-500/15 text-emerald-300 hover:bg-emerald-500/25 text-xs font-bold transition">{{ __('messages.approve') }}</button>
                        </form>
                        <a href="{{ route('admin.verifications') }}" class="px-2.5 py-1 rounded-md bg-red-500/15 text-red-300 hover:bg-red-500/25 text-xs font-bold transition">{{ __('messages.reject') }}</a>
                    </div>
                </div>
            @empty
                <div class="px-5 py-10 text-center text-sm text-gray-400">{{ __('messages.no_pending_verifs') }}</div>
            @endforelse
        </div>
    </section>

    {{-- Pending subscriptions --}}
    <section class="rounded-2xl bg-cardapp border border-white/5 shadow-md overflow-hidden">
        <div class="px-5 py-4 border-b border-white/5 flex items-center justify-between">
            <div class="flex items-center gap-2">
                <span class="w-1.5 h-5 rounded-full bg-red-400"></span>
                <h2 class="font-bold text-white">{{ __('messages.pending_subs_label') }}</h2>
            </div>
            <a href="{{ route('admin.subscriptions') }}" class="text-xs text-teal-300 hover:text-teal-200">{{ __('messages.view_all') }} →</a>
        </div>
        <div class="divide-y divide-white/5">
            @forelse($pending_subs as $s)
                <div class="px-5 py-3 flex items-center gap-3">
                    <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-red-500 to-red-700 text-white text-xs font-bold flex items-center justify-center">
                        {{ mb_substr(optional($s->user)->name ?? '?', 0, 1) }}
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="text-sm font-semibold text-white truncate">{{ optional($s->user)->name ?? '—' }}</div>
                        <div class="text-xs text-gray-400">{{ $s->created_at?->format('Y-m-d') }}</div>
                    </div>
                    <div class="text-sm font-bold text-teal-300" dir="ltr">${{ number_format($s->amount, 2) }}</div>
                    <form method="POST" action="{{ route('admin.subs.approve', $s) }}">
                        @csrf
                        <button class="px-2.5 py-1 rounded-md btn-teal text-xs">{{ __('messages.activate') }}</button>
                    </form>
                </div>
            @empty
                <div class="px-5 py-10 text-center text-sm text-gray-400">{{ __('messages.no_pending_subs') }}</div>
            @endforelse
        </div>
    </section>
</div>

{{-- Recent users --}}
<section class="mt-5 rounded-2xl bg-cardapp border border-white/5 shadow-md overflow-hidden">
    <div class="px-5 py-4 border-b border-white/5 flex items-center justify-between">
        <div class="flex items-center gap-2">
            <span class="w-1.5 h-5 rounded-full bg-blue-400"></span>
            <h2 class="font-bold text-white">{{ __('messages.recent_users') }}</h2>
        </div>
        <a href="{{ route('admin.users') }}" class="text-xs text-teal-300 hover:text-teal-200">{{ __('messages.view_all') }} →</a>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full text-sm">
            <thead>
                <tr class="text-xs font-semibold text-gray-400 uppercase tracking-wider border-b border-white/5">
                    <th class="text-start px-5 py-2.5">{{ __('messages.name') }}</th>
                    <th class="text-start px-5 py-2.5">{{ __('messages.email') }}</th>
                    <th class="text-start px-5 py-2.5">{{ __('messages.plan') }}</th>
                    <th class="text-start px-5 py-2.5">{{ __('messages.your_points') }}</th>
                    <th class="text-start px-5 py-2.5">{{ __('messages.date') }}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-white/5">
                @forelse($recent_users as $u)
                    <tr class="hover:bg-white/[.03]">
                        <td class="px-5 py-3">
                            <div class="flex items-center gap-2.5">
                                <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-700 text-white text-xs font-bold flex items-center justify-center">
                                    {{ mb_substr($u->name, 0, 1) }}
                                </div>
                                <div class="font-semibold text-white">{{ $u->name }}</div>
                            </div>
                        </td>
                        <td class="px-5 py-3 text-gray-400">{{ $u->email }}</td>
                        <td class="px-5 py-3">
                            @if($u->plan === 'vip')
                                <span class="px-2 py-0.5 rounded-md bg-teal-500/15 text-teal-300 text-xs font-bold">VIP</span>
                            @else
                                <span class="px-2 py-0.5 rounded-md bg-white/5 text-gray-300 text-xs font-bold">Free</span>
                            @endif
                        </td>
                        <td class="px-5 py-3 font-bold text-teal-300">{{ $u->points }}</td>
                        <td class="px-5 py-3 text-gray-400 text-xs">{{ $u->created_at?->format('Y-m-d H:i') }}</td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="px-5 py-10 text-center text-gray-400">{{ __('messages.no_users') }}</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</section>
@endsection