@extends('layouts.app')

@section('content')
    @php
        $authUser = $user ?? auth()->user();
    @endphp

    <div class="space-y-6">
        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                <div>
                    <h1 class="text-2xl font-semibold text-gray-800 dark:text-white/90">
                        User Dashboard
                    </h1>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                        This page displays the scopes, permissions, roles, and registered alts currently assigned to your services account.
                    </p>
                </div>

                <div class="flex flex-wrap items-center gap-3">
                    <div class="rounded-xl bg-gray-100 px-4 py-2 text-sm text-gray-700 dark:bg-gray-800 dark:text-gray-300">
                        Character: <span class="font-semibold">{{ $authUser->character_name }}</span>
                    </div>

                    <div class="rounded-xl bg-gray-100 px-4 py-2 text-sm text-gray-700 dark:bg-gray-800 dark:text-gray-300">
                        Character ID: <span class="font-semibold">{{ $authUser->character_id }}</span>
                    </div>

                    <div class="rounded-xl bg-gray-100 px-4 py-2 text-sm text-gray-700 dark:bg-gray-800 dark:text-gray-300">
                        Primary Role: <span class="font-semibold">{{ $role ?? 'None' }}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-4">
            <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
                <p class="text-sm text-gray-500 dark:text-gray-400">Scopes</p>
                <h3 class="mt-2 text-3xl font-bold text-gray-800 dark:text-white/90">{{ $scopeCount }}</h3>
            </div>

            <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
                <p class="text-sm text-gray-500 dark:text-gray-400">Permissions</p>
                <h3 class="mt-2 text-3xl font-bold text-gray-800 dark:text-white/90">{{ $permissionCount }}</h3>
            </div>

            <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
                <p class="text-sm text-gray-500 dark:text-gray-400">Roles</p>
                <h3 class="mt-2 text-3xl font-bold text-gray-800 dark:text-white/90">{{ $roleCount }}</h3>
            </div>

            <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
                <p class="text-sm text-gray-500 dark:text-gray-400">Registered Alts</p>
                <h3 class="mt-2 text-3xl font-bold text-gray-800 dark:text-white/90">{{ $altCount }}</h3>
            </div>
        </div>

        <div class="grid grid-cols-1 gap-6 xl:grid-cols-3">
            <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                <div class="border-b border-gray-100 px-5 py-4 dark:border-gray-800">
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-white/90">Scopes</h2>
                </div>

                <div class="p-5">
                    <div class="overflow-x-auto">
                        <table class="min-w-full">
                            <thead>
                                <tr class="border-b border-gray-100 dark:border-gray-800">
                                    <th class="px-3 py-2 text-left text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
                                        Scope
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($scopes as $scope)
                                    <tr class="border-b border-gray-100 last:border-b-0 dark:border-gray-800">
                                        <td class="px-3 py-3 text-sm text-gray-700 dark:text-gray-300">
                                            {{ $scope->scope }}
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td class="px-3 py-3 text-sm text-gray-500 dark:text-gray-400">
                                            No scopes assigned.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                <div class="border-b border-gray-100 px-5 py-4 dark:border-gray-800">
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-white/90">Permissions</h2>
                </div>

                <div class="p-5">
                    <div class="overflow-x-auto">
                        <table class="min-w-full">
                            <thead>
                                <tr class="border-b border-gray-100 dark:border-gray-800">
                                    <th class="px-3 py-2 text-left text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
                                        Permission
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($permissions as $permission)
                                    <tr class="border-b border-gray-100 last:border-b-0 dark:border-gray-800">
                                        <td class="px-3 py-3 text-sm text-gray-700 dark:text-gray-300">
                                            {{ $permission->permission }}
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td class="px-3 py-3 text-sm text-gray-500 dark:text-gray-400">
                                            No permissions assigned.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                <div class="border-b border-gray-100 px-5 py-4 dark:border-gray-800">
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-white/90">Roles</h2>
                </div>

                <div class="p-5">
                    <div class="overflow-x-auto">
                        <table class="min-w-full">
                            <thead>
                                <tr class="border-b border-gray-100 dark:border-gray-800">
                                    <th class="px-3 py-2 text-left text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
                                        Role
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($roles as $assignedRole)
                                    <tr class="border-b border-gray-100 last:border-b-0 dark:border-gray-800">
                                        <td class="px-3 py-3 text-sm text-gray-700 dark:text-gray-300">
                                            {{ $assignedRole->role }}
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td class="px-3 py-3 text-sm text-gray-500 dark:text-gray-400">
                                            No roles assigned.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="border-b border-gray-100 px-5 py-4 dark:border-gray-800">
                <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <h2 class="text-lg font-semibold text-gray-800 dark:text-white/90">Registered Alts</h2>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            These alts are attached to your main character for services features such as SRP management.
                        </p>
                    </div>
                </div>
            </div>

            <div class="p-5">
                <div class="overflow-x-auto">
                    <table class="min-w-full">
                        <thead>
                            <tr class="border-b border-gray-100 dark:border-gray-800">
                                <th class="px-3 py-2 text-left text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
                                    Alt Name
                                </th>
                                <th class="px-3 py-2 text-left text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
                                    Character ID
                                </th>
                                <th class="px-3 py-2 text-left text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
                                    Owner Hash
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($alts as $alt)
                                <tr class="border-b border-gray-100 last:border-b-0 dark:border-gray-800">
                                    <td class="px-3 py-3 text-sm text-gray-700 dark:text-gray-300">
                                        {{ $alt->name }}
                                    </td>
                                    <td class="px-3 py-3 text-sm text-gray-700 dark:text-gray-300">
                                        {{ $alt->character_id }}
                                    </td>
                                    <td class="px-3 py-3 text-sm text-gray-700 dark:text-gray-300">
                                        {{ $alt->owner_hash }}
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3" class="px-3 py-3 text-sm text-gray-500 dark:text-gray-400">
                                        No alts registered.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white/90">JWT Status</h2>

            <div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-3">
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Issued At</p>
                    <p class="mt-1 text-sm font-medium text-gray-800 dark:text-white/90">
                        {{ optional($authUser->user_jwt_issued_at)?->toDateTimeString() ?? 'N/A' }}
                    </p>
                </div>

                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Expires At</p>
                    <p class="mt-1 text-sm font-medium text-gray-800 dark:text-white/90">
                        {{ optional($authUser->user_jwt_expires_at)?->toDateTimeString() ?? 'N/A' }}
                    </p>
                </div>

                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Privileges Version</p>
                    <p class="mt-1 text-sm font-medium text-gray-800 dark:text-white/90">
                        {{ $authUser->privileges_version ?? 1 }}
                    </p>
                </div>
            </div>

            <div class="mt-4">
                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Current JWT</label>
                <textarea
                    rows="8"
                    readonly
                    class="w-full rounded-xl border border-gray-300 bg-gray-50 px-4 py-3 text-sm text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300"
                >{{ $authUser->user_jwt }}</textarea>
            </div>
        </div>
    </div>
@endsection