@extends('layouts.dashboard')

@section('title', 'Admin · Nutzer · TacForce Pro')

@section('content')
    <div class="space-y-6" x-data="{ confirmUser: null }">
        {{-- Kopf --}}
        <div class="flex flex-wrap items-end justify-between gap-4">
            <div>
                <h1 class="text-2xl font-semibold tracking-tight">Nutzer</h1>
                <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
                    Alle registrierten Konten. Admin-Zugang gewähren oder entziehen.
                </p>
            </div>
            {{-- Suche --}}
            <form method="GET" action="{{ route('admin.users') }}" class="relative">
                <span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-zinc-400">
                    <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"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                </span>
                <input type="search" name="q" value="{{ $search }}"
                       placeholder="Name oder Discord-ID…"
                       class="w-64 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 pl-9 pr-3 py-2 text-sm placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none">
            </form>
        </div>

        {{-- Tabelle --}}
        <div class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 overflow-hidden">
            @if ($users->isEmpty())
                <div class="px-6 py-16 text-center">
                    <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-400">
                        <svg class="h-6 w-6" 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"/></svg>
                    </div>
                    <p class="mt-4 text-sm font-medium">Keine Nutzer gefunden</p>
                    <p class="mt-1 text-sm text-zinc-500">
                        @if ($search !== '')
                            Für „{{ $search }}“ gibt es keine Treffer.
                        @else
                            Sobald sich jemand per Discord anmeldet, erscheint er hier.
                        @endif
                    </p>
                </div>
            @else
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="text-left text-xs font-medium text-zinc-500 uppercase tracking-wide">
                                <th class="px-4 py-3">Nutzer</th>
                                <th class="px-4 py-3">Discord-ID</th>
                                <th class="px-4 py-3">Rolle</th>
                                <th class="px-4 py-3 text-center">Server</th>
                                <th class="px-4 py-3">Beigetreten</th>
                                <th class="px-4 py-3 text-right">Admin</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($users as $user)
                                @php $isSelf = auth()->id() === $user->id; @endphp
                                <tr class="border-t border-zinc-100 dark:border-zinc-800 hover:bg-zinc-50 dark:hover:bg-zinc-800/40">
                                    <td class="px-4 py-3">
                                        <div class="flex items-center gap-3">
                                            @include('admin.partials.avatar', ['url' => $user->avatar_url, 'name' => $user->username, 'size' => 'h-9 w-9'])
                                            <div class="min-w-0">
                                                <div class="font-medium truncate">{{ $user->global_name ?: $user->username }}</div>
                                                <div class="text-xs text-zinc-500 truncate">&#64;{{ $user->username }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-4 py-3 font-mono text-xs text-zinc-500">{{ $user->discord_id }}</td>
                                    <td class="px-4 py-3">
                                        @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.5 py-0.5 text-xs font-medium">
                                                <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                                                Admin
                                            </span>
                                        @else
                                            <span class="inline-flex items-center rounded-full bg-zinc-500/10 text-zinc-500 ring-1 ring-zinc-500/20 px-2.5 py-0.5 text-xs font-medium">Nutzer</span>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 text-center tabular-nums">{{ $user->guilds_count }}</td>
                                    <td class="px-4 py-3 text-zinc-500">{{ optional($user->created_at)->format('d.m.Y') }}</td>
                                    <td class="px-4 py-3">
                                        <div class="flex justify-end">
                                            @if ($isSelf && $user->is_admin)
                                                {{-- Eigenen Admin-Zugang kann man nicht entziehen --}}
                                                <span class="inline-flex items-center gap-1 text-xs text-zinc-400" title="Du kannst dir selbst den Admin-Zugang nicht entziehen">
                                                    <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="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                                                    Du
                                                </span>
                                            @else
                                                <button type="button"
                                                        @click="confirmUser = { id: {{ $user->id }}, name: {{ Illuminate\Support\Js::from($user->global_name ?: $user->username) }}, make: {{ $user->is_admin ? 'false' : 'true' }} }"
                                                        class="relative h-6 w-11 rounded-full transition {{ $user->is_admin ? 'bg-blue-600' : 'bg-zinc-300 dark:bg-zinc-700' }}"
                                                        aria-label="Admin umschalten">
                                                    <span class="absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition {{ $user->is_admin ? 'translate-x-5' : 'translate-x-0.5' }}"></span>
                                                </button>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                {{-- Pagination --}}
                @if ($users->hasPages())
                    <div class="border-t border-zinc-100 dark:border-zinc-800 px-4 py-3">
                        {{ $users->links() }}
                    </div>
                @endif
            @endif
        </div>

        {{-- Bestätigungs-Dialog (Admin-Toggle) --}}
        <div x-cloak x-show="confirmUser !== null"
             class="fixed inset-0 z-50 flex items-center justify-center p-4"
             x-transition.opacity>
            <div class="absolute inset-0 bg-zinc-950/60 backdrop-blur-sm" @click="confirmUser = null"></div>
            <div class="relative w-full max-w-md rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-6 shadow-2xl"
                 x-transition.scale.origin.center>
                <div class="flex items-start gap-4">
                    <span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-blue-500/10 text-blue-600 dark:text-blue-400 shrink-0">
                        <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="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                    </span>
                    <div>
                        <h3 class="text-base font-semibold" x-text="confirmUser?.make ? 'Admin-Zugang gewähren?' : 'Admin-Zugang entziehen?'"></h3>
                        <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
                            <template x-if="confirmUser?.make">
                                <span><strong x-text="confirmUser?.name"></strong> erhält vollen Zugriff auf das Admin-Panel.</span>
                            </template>
                            <template x-if="!confirmUser?.make">
                                <span><strong x-text="confirmUser?.name"></strong> verliert den Zugriff auf das Admin-Panel.</span>
                            </template>
                        </p>
                    </div>
                </div>
                <div class="mt-6 flex justify-end gap-3">
                    <button type="button" @click="confirmUser = null"
                            class="inline-flex items-center gap-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-700 dark:text-zinc-200 text-sm font-medium px-4 py-2.5 transition">
                        Abbrechen
                    </button>
                    <form method="POST" :action="`{{ url('admin/users') }}/${confirmUser?.id}`">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="is_admin" :value="confirmUser?.make ? 1 : 0">
                        <button type="submit"
                                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">
                            Bestätigen
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection