@extends('layouts.dashboard')

@section('title', 'Admin · Übersicht · TacForce Pro')

@php
    // Plan → Balken-/Badge-Farbe (Design 04).
    $planColors = [
        'free'    => ['bar' => 'bg-zinc-400 dark:bg-zinc-500', 'dot' => 'bg-zinc-400 dark:bg-zinc-500'],
        'starter' => ['bar' => 'bg-sky-500',                   'dot' => 'bg-sky-500'],
        'pro'     => ['bar' => 'bg-blue-600',                  'dot' => 'bg-blue-600'],
        'elite'   => ['bar' => 'bg-violet-500',               'dot' => 'bg-violet-500'],
        'custom'  => ['bar' => 'bg-amber-500',                'dot' => 'bg-amber-500'],
    ];
    $planTotal = max(1, array_sum($plans));
@endphp

@section('content')
    <div class="space-y-8">
        {{-- Kopf --}}
        <div class="flex flex-wrap items-end justify-between gap-4">
            <div>
                <h1 class="text-2xl font-semibold tracking-tight">Operator-Übersicht</h1>
                <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
                    Globale Kennzahlen über alle Server, Nutzer und Bots.
                </p>
            </div>
            <a href="{{ route('admin.bots') }}"
               class="inline-flex items-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium px-4 py-2.5 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500">
                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" y1="16" x2="8" y2="16"/><line x1="16" y1="16" x2="16" y2="16"/></svg>
                Bots verwalten
            </a>
        </div>

        {{-- Stat-Cards --}}
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
            @php
                $cards = [
                    ['label' => 'Nutzer gesamt',            'value' => $userCount,        'accent' => 'text-blue-600 dark:text-blue-400',    'ring' => 'bg-blue-500/10',    'icon' => 'users'],
                    ['label' => 'Server gesamt',            'value' => $guildCount,       'accent' => 'text-violet-600 dark:text-violet-400','ring' => 'bg-violet-500/10',  'icon' => 'server'],
                    ['label' => 'Bots aktiv',               'value' => $activeBots,       'accent' => 'text-emerald-600 dark:text-emerald-400','ring' => 'bg-emerald-500/10','icon' => 'bot'],
                    ['label' => 'Tickets / Bewerbungen',    'value' => $ticketCount + $applicationCount, 'accent' => 'text-amber-600 dark:text-amber-400', 'ring' => 'bg-amber-500/10', 'icon' => 'inbox'],
                ];
            @endphp
            @foreach ($cards as $card)
                <div class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-5">
                    <div class="flex items-center justify-between">
                        <span class="text-xs font-medium uppercase tracking-wide text-zinc-500">{{ $card['label'] }}</span>
                        <span class="inline-flex h-9 w-9 items-center justify-center rounded-lg {{ $card['ring'] }} {{ $card['accent'] }}">
                            @switch($card['icon'])
                                @case('users')
                                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                                    @break
                                @case('server')
                                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>
                                    @break
                                @case('bot')
                                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" y1="16" x2="8" y2="16"/><line x1="16" y1="16" x2="16" y2="16"/></svg>
                                    @break
                                @case('inbox')
                                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
                                    @break
                            @endswitch
                        </span>
                    </div>
                    <div class="mt-4 text-3xl font-bold tracking-tight">{{ number_format($card['value'], 0, ',', '.') }}</div>
                </div>
            @endforeach
        </div>

        {{-- Server nach Plan --}}
        <div class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
            <div class="px-5 py-4 border-b border-zinc-200 dark:border-zinc-800 flex items-center justify-between">
                <h2 class="text-sm font-semibold">Server nach Plan</h2>
                <span class="text-xs text-zinc-500">{{ number_format($guildCount, 0, ',', '.') }} gesamt</span>
            </div>
            <div class="p-5 space-y-5">
                {{-- Gestapelter Balken --}}
                <div class="flex h-3 w-full overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800">
                    @foreach ($plans as $key => $count)
                        @if ($count > 0)
                            <div class="{{ $planColors[$key]['bar'] ?? 'bg-zinc-400' }}"
                                 style="width: {{ round($count / $planTotal * 100, 2) }}%"
                                 title="{{ ucfirst($key) }}: {{ $count }}"></div>
                        @endif
                    @endforeach
                </div>
                {{-- Legende --}}
                <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
                    @foreach ($plans as $key => $count)
                        <div class="flex items-center gap-2.5">
                            <span class="h-2.5 w-2.5 rounded-full {{ $planColors[$key]['dot'] ?? 'bg-zinc-400' }}"></span>
                            <div class="min-w-0">
                                <div class="text-sm font-medium capitalize truncate">{{ $key }}</div>
                                <div class="text-xs text-zinc-500">{{ number_format($count, 0, ',', '.') }} Server</div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Neueste Nutzer + Server --}}
        <div class="grid grid-cols-1 gap-6 xl:grid-cols-2">
            {{-- Neueste Nutzer --}}
            <div class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
                <div class="px-5 py-4 border-b border-zinc-200 dark:border-zinc-800 flex items-center justify-between">
                    <h2 class="text-sm font-semibold">Neueste Anmeldungen</h2>
                    <a href="{{ route('admin.users') }}" class="text-xs font-medium text-blue-600 dark:text-blue-400 hover:underline">Alle Nutzer</a>
                </div>
                @if ($latestUsers->isEmpty())
                    <div class="px-5 py-10 text-center">
                        <p class="text-sm text-zinc-500">Noch keine Nutzer registriert.</p>
                    </div>
                @else
                    <div class="divide-y divide-zinc-100 dark:divide-zinc-800">
                        @foreach ($latestUsers as $user)
                            <div class="flex items-center gap-3 px-5 py-3">
                                @include('admin.partials.avatar', ['url' => $user->avatar_url, 'name' => $user->username, 'size' => 'h-9 w-9'])
                                <div class="min-w-0 flex-1">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm font-medium truncate">{{ $user->global_name ?: $user->username }}</span>
                                        @if ($user->is_admin)
                                            <span class="inline-flex items-center gap-1 rounded-full bg-blue-500/10 text-blue-600 dark:text-blue-400 ring-1 ring-blue-500/20 px-2 py-0.5 text-[11px] font-medium">Admin</span>
                                        @endif
                                    </div>
                                    <div class="text-xs text-zinc-500 truncate">ID {{ $user->discord_id }}</div>
                                </div>
                                <span class="text-xs text-zinc-400 whitespace-nowrap">{{ optional($user->created_at)->format('d.m.Y') }}</span>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

            {{-- Neueste Server --}}
            <div class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
                <div class="px-5 py-4 border-b border-zinc-200 dark:border-zinc-800 flex items-center justify-between">
                    <h2 class="text-sm font-semibold">Neueste Server</h2>
                    <a href="{{ route('admin.guilds') }}" class="text-xs font-medium text-blue-600 dark:text-blue-400 hover:underline">Alle Server</a>
                </div>
                @if ($latestGuilds->isEmpty())
                    <div class="px-5 py-10 text-center">
                        <p class="text-sm text-zinc-500">Noch keine Server verbunden.</p>
                    </div>
                @else
                    <div class="divide-y divide-zinc-100 dark:divide-zinc-800">
                        @foreach ($latestGuilds as $guild)
                            <div class="flex items-center gap-3 px-5 py-3">
                                @include('admin.partials.avatar', ['url' => $guild->icon_url, 'name' => $guild->name, 'size' => 'h-9 w-9', 'rounded' => 'rounded-lg'])
                                <div class="min-w-0 flex-1">
                                    <div class="text-sm font-medium truncate">{{ $guild->name }}</div>
                                    <div class="text-xs text-zinc-500 truncate">{{ $guild->tickets_count }} Tickets</div>
                                </div>
                                <span class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium capitalize {{ $planColors[$guild->plan]['dot'] ?? 'bg-zinc-400' }} bg-opacity-10 text-zinc-600 dark:text-zinc-300 ring-1 ring-zinc-500/20">{{ $guild->plan }}</span>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection