<x-app-layout>

    <x-module-hero title="User: {{ $user->name }}" description="View user details, roles, and permissions" icon="fa-user">
        <x-slot name="backButton">
            <a href="{{ route('users.index') }}" class="inline-flex items-center gap-1.5 text-[#475569] hover:text-[#1e293b] text-sm transition">
                <i class="fas fa-arrow-left text-xs"></i> Back to Users
            </a>
        </x-slot>
        <x-slot name="tabs">
            @can('view users')
                <a href="{{ route('users.index') }}"
                   class="module-hero-tab {{ request()->routeIs('users.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                          inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                          md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-list text-sm"></i> All Users
                </a>
            @endcan
            @can('view users')
                <a href="{{ route('users.show', $user) }}"
                   class="module-hero-tab {{ request()->routeIs('users.show') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                          inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                          md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-eye text-sm"></i> View Profile
                </a>
            @endcan
            @can('edit users')
                <a href="{{ route('users.edit', $user) }}"
                   class="module-hero-tab {{ request()->routeIs('users.edit') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                          inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                          md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-edit text-sm"></i> Edit User
                </a>
            @endcan
            @hasRole('Super Manager')
                @if(Route::has('roles.index'))
                    <a href="{{ route('roles.index') }}"
                       class="module-hero-tab {{ request()->routeIs('roles.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                              inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                              md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                        <i class="fas fa-user-tag text-sm"></i> Roles
                    </a>
                @endif
                @if(Route::has('admin.themes.index'))
                    <a href="{{ route('admin.themes.index') }}"
                       class="module-hero-tab {{ request()->routeIs('admin.themes.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                              inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                              md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                        <i class="fas fa-palette text-sm"></i> Themes
                    </a>
                @endif
            @endhasRole
        </x-slot>
        <x-slot name="actions">
            <div class="flex items-center gap-3 px-1 py-2">
                <div class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white font-bold">
                    {{ strtoupper(substr($user->name, 0, 2)) }}
                </div>
                <div class="text-[#1e293b]">
                    <p class="font-bold">{{ $user->name }}</p>
                    <p class="text-sm text-[#475569]">{{ $user->email }}</p>
                </div>
                <div class="ml-4">
                    @if($user->is_active)
                        <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800">
                            <i class="fas fa-check-circle"></i> Active
                        </span>
                    @else
                        <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-800">
                            <i class="fas fa-times-circle"></i> Inactive
                        </span>
                    @endif
                </div>
            </div>
        </x-slot>
    </x-module-hero>

    <div class="p-6">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

            {{-- Left Column --}}
            <div class="lg:col-span-2 space-y-6">

                {{-- Account Information --}}
                <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                    <div class="bg-gray-50 px-5 py-3 border-b border-gray-200">
                        <h3 class="font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-id-card text-purple-600"></i> Account Information
                        </h3>
                    </div>
                    <div class="p-5">
                        <dl class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
                            <div>
                                <dt class="text-xs text-gray-500 uppercase tracking-wide">Full Name</dt>
                                <dd class="mt-1 font-semibold text-gray-900">{{ $user->name }}</dd>
                            </div>
                            <div>
                                <dt class="text-xs text-gray-500 uppercase tracking-wide">Email Address</dt>
                                <dd class="mt-1 text-gray-900">{{ $user->email }}</dd>
                            </div>
                            @if($user->username)
                                <div>
                                    <dt class="text-xs text-gray-500 uppercase tracking-wide">Username</dt>
                                    <dd class="mt-1 font-mono text-gray-900">{{ $user->username }}</dd>
                                </div>
                            @endif
                            <div>
                                <dt class="text-xs text-gray-500 uppercase tracking-wide">Account Status</dt>
                                <dd class="mt-1">
                                    @if($user->is_active)
                                        <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                            <i class="fas fa-check-circle"></i> Active
                                        </span>
                                    @else
                                        <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                            <i class="fas fa-times-circle"></i> Inactive
                                        </span>
                                    @endif
                                </dd>
                            </div>
                            <div>
                                <dt class="text-xs text-gray-500 uppercase tracking-wide">Email Verified</dt>
                                <dd class="mt-1">
                                    @if($user->email_verified_at)
                                        <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                            <i class="fas fa-check"></i> Verified
                                        </span>
                                    @else
                                        <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                            <i class="fas fa-clock"></i> Unverified
                                        </span>
                                    @endif
                                </dd>
                            </div>
                            <div>
                                <dt class="text-xs text-gray-500 uppercase tracking-wide">Joined</dt>
                                <dd class="mt-1 text-gray-900">{{ $user->created_at->format('F d, Y') }}</dd>
                            </div>
                            <div>
                                <dt class="text-xs text-gray-500 uppercase tracking-wide">Last Updated</dt>
                                <dd class="mt-1 text-gray-900">{{ $user->updated_at->format('F d, Y') }}</dd>
                            </div>
                        </dl>
                    </div>
                </div>

                {{-- Assigned Roles --}}
                <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                    <div class="bg-gray-50 px-5 py-3 border-b border-gray-200">
                        <h3 class="font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-user-tag text-purple-600"></i> Assigned Roles
                        </h3>
                    </div>
                    <div class="p-5">
                        @if($user->roles->count() > 0)
                            <div class="flex flex-wrap gap-3">
                                @foreach($user->roles as $role)
                                    <div class="flex items-center gap-2 px-4 py-2 rounded-lg border-2 border-purple-200 bg-purple-50">
                                        <i class="fas fa-shield-alt text-purple-600"></i>
                                        <span class="font-semibold text-purple-800 text-sm">{{ $role->name }}</span>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <p class="text-gray-500 text-sm">No roles assigned to this user.</p>
                        @endif
                    </div>
                </div>

                {{-- Permissions --}}
                <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                    <div class="bg-gray-50 px-5 py-3 border-b border-gray-200">
                        <h3 class="font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-key text-purple-600"></i> Permissions
                        </h3>
                    </div>
                    <div class="p-5">
                        @php $allPermissions = $user->getAllPermissions(); @endphp
                        @if($allPermissions->count() > 0)
                            <p class="text-sm text-gray-600 mb-3">
                                This user has <span class="font-bold text-purple-700">{{ $allPermissions->count() }}</span> permissions via their assigned roles.
                            </p>
                            <div class="flex flex-wrap gap-1.5 max-h-48 overflow-y-auto">
                                @foreach($allPermissions as $permission)
                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-700">
                                        {{ $permission->name }}
                                    </span>
                                @endforeach
                            </div>
                        @else
                            <p class="text-gray-500 text-sm">No permissions found for this user.</p>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Right Sidebar --}}
            <div class="space-y-6">

                {{-- Quick Actions --}}
                @can('edit users')
                    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                        <div class="bg-gray-50 px-5 py-3 border-b border-gray-200">
                            <h3 class="font-semibold text-gray-900 text-sm">Quick Actions</h3>
                        </div>
                        <div class="p-4 space-y-2">
                            <a href="{{ route('users.edit', $user) }}" class="btn-action-edit w-full justify-center">
                                <i class="fas fa-edit"></i> Edit User
                            </a>
                            <a href="{{ route('users.index') }}" class="w-full inline-flex items-center justify-center gap-1 px-3 py-1.5 text-xs font-medium text-gray-700 rounded bg-gray-100 hover:bg-gray-200 transition">
                                <i class="fas fa-list"></i> All Users
                            </a>
                        </div>
                    </div>
                @endcan

                {{-- Account Stats --}}
                <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                    <div class="bg-gray-50 px-5 py-3 border-b border-gray-200">
                        <h3 class="font-semibold text-gray-900 text-sm">Account Stats</h3>
                    </div>
                    <div class="p-4 space-y-3">
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-gray-500">Roles</span>
                            <span class="font-bold text-purple-700">{{ $user->roles->count() }}</span>
                        </div>
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-gray-500">Permissions</span>
                            <span class="font-bold text-purple-700">{{ $user->getAllPermissions()->count() }}</span>
                        </div>
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-gray-500">Member Since</span>
                            <span class="font-medium text-gray-900">{{ $user->created_at->format('M Y') }}</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</x-app-layout>
