<x-app-layout>

    <x-module-hero
        title="Profile: {{ $user->name }}"
        description="View user profile information and details"
        icon="fa-user-circle"
    >
        <x-slot name="backButton">
            @can('view users')
                <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>
            @endcan
        </x-slot>
        <x-slot name="tabs">
            <a href="{{ route('profile.show', $user) }}"
               class="module-hero-tab {{ request()->routeIs('profile.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>
            @if(auth()->id() === $user->id)
                <a href="{{ route('profile.edit') }}"
                   class="module-hero-tab {{ request()->routeIs('profile.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 Profile
                </a>
                @if(Route::has('settings.security'))
                    <a href="{{ route('settings.security') }}"
                       class="module-hero-tab {{ request()->routeIs('settings.security') ? '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-lock text-sm"></i> Security
                    </a>
                @endif
                @if(auth()->user()->hasRole('Super Manager'))
                    @if(Route::has('otp.settings'))
                        <a href="{{ route('otp.settings') }}"
                           class="module-hero-tab {{ request()->routeIs('otp.*') ? '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-shield-alt text-sm"></i> OTP Settings
                        </a>
                    @endif
                @endif
                @if(Route::has('settings.sessions'))
                    <a href="{{ route('settings.sessions') }}"
                       class="module-hero-tab {{ request()->routeIs('settings.sessions') ? '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-desktop text-sm"></i> Sessions
                    </a>
                @endif
            @endif
        </x-slot>
        <x-slot name="actions">
            @if(auth()->id() === $user->id)
                <a href="{{ route('profile.edit') }}" class="inline-flex items-center gap-2 px-4 py-2 bg-white text-[#1e293b] rounded-lg hover:bg-gray-100 transition font-medium text-sm shadow">
                    <i class="fas fa-edit"></i> Edit Profile
                </a>
            @endif
            @can('view users')
                <a href="{{ route('users.index') }}" class="inline-flex items-center gap-2 px-4 py-2 bg-[#e2e8f0] text-[#1e293b] border border-[#cbd5e1] rounded-lg hover:bg-[#cbd5e1] transition font-medium text-sm">
                    <i class="fas fa-users"></i> All Users
                </a>
            @endcan
        </x-slot>
    </x-module-hero>

    {{-- Main Content Area --}}
    <div class="p-6">
        <div class="max-w-7xl mx-auto">
            
            {{-- Success Message --}}
            @if(session('success'))
                <div class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg">
                    <i class="fas fa-check-circle mr-2"></i>
                    {{ session('success') }}
                </div>
            @endif

            <div class="theme-card overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    
                    {{-- Profile Header --}}
                    <div class="flex flex-col sm:flex-row items-start sm:items-center mb-8 pb-6 border-b border-gray-200 gap-4">
                        <div class="w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-blue-500 to-purple-500 rounded-full flex items-center justify-center text-white text-2xl sm:text-3xl font-bold">
                            {{ strtoupper(substr($user->name, 0, 2)) }}
                        </div>
                        <div class="flex-1">
                            <h2 class="text-xl sm:text-2xl font-bold text-gray-900 mb-2">{{ $user->name }}</h2>
                            <p class="text-gray-600 mb-2 break-all">
                                <i class="fas fa-envelope mr-2"></i>
                                {{ $user->email }}
                            </p>
                            @if($user->email_verified_at)
                                <span class="inline-flex items-center px-3 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full">
                                    <i class="fas fa-check-circle mr-1"></i>
                                    Email Verified
                                </span>
                            @else
                                <span class="inline-flex items-center px-3 py-1 text-xs font-semibold text-yellow-800 bg-yellow-100 rounded-full">
                                    <i class="fas fa-exclamation-circle mr-1"></i>
                                    Email Not Verified
                                </span>
                            @endif
                        </div>
                    </div>

                    {{-- Profile Information Grid --}}
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        
                        {{-- Basic Information Card --}}
                        <div class="border-2 theme-divider rounded-lg p-6 theme-card">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                                <i class="fas fa-info-circle mr-2 text-blue-500"></i>
                                Basic Information
                            </h3>
                            <dl class="space-y-3">
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Full Name</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ $user->name }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Email Address</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ $user->email }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Member Since</dt>
                                    <dd class="mt-1 text-sm text-gray-900">
                                        {{ $user->created_at->format('F j, Y') }}
                                        <span class="text-gray-500">({{ $user->created_at->diffForHumans() }})</span>
                                    </dd>
                                </div>
                            </dl>
                        </div>

                        {{-- Roles and Permissions Card --}}
                        <div class="border-2 theme-divider rounded-lg p-6 theme-card">
                            <h3 class="text-lg font-semibold text-theme-heading mb-4 flex items-center">
                                <i class="fas fa-shield-alt mr-2 text-purple-500"></i>
                                Roles & Permissions
                            </h3>
                            <dl class="space-y-3">
                                <div>
                                    <dt class="text-sm font-medium text-gray-500 mb-2">Assigned Roles</dt>
                                    <dd class="mt-1">
                                        @forelse($user->roles as $role)
                                            <span class="inline-flex items-center px-3 py-1 mr-2 mb-2 text-xs font-semibold text-purple-800 bg-purple-100 rounded-full">
                                                <i class="fas fa-user-tag mr-1"></i>
                                                {{ $role->name }}
                                            </span>
                                        @empty
                                            <span class="text-sm text-gray-500">No roles assigned</span>
                                        @endforelse
                                    </dd>
                                </div>
                                
                                {{-- Show status only for admin viewers --}}
                                @can('view users')
                                    <div>
                                        <dt class="text-sm font-medium text-gray-500">Account Status</dt>
                                        <dd class="mt-1">
                                            @if($user->is_active)
                                                <span class="inline-flex items-center px-3 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full">
                                                    <i class="fas fa-check-circle mr-1"></i>
                                                    Active
                                                </span>
                                            @else
                                                <span class="inline-flex items-center px-3 py-1 text-xs font-semibold text-red-800 bg-red-100 rounded-full">
                                                    <i class="fas fa-times-circle mr-1"></i>
                                                    Inactive
                                                </span>
                                            @endif
                                        </dd>
                                    </div>
                                @endcan
                            </dl>
                        </div>

                    </div>

                    {{-- Admin Actions (only for users with edit permission) --}}
                    @can('edit users')
                        @if(auth()->id() !== $user->id)
                            <div class="mt-8 pt-6 border-t border-gray-200">
                                <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                                    <i class="fas fa-tools mr-2 text-gray-500"></i>
                                    Administrative Actions
                                </h3>
                                <div class="flex flex-wrap gap-3">
                                    <a href="{{ route('users.edit', $user) }}" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition font-medium">
                                        <i class="fas fa-edit mr-2"></i>
                                        Edit User
                                    </a>
                                    
                                    @can('manage users')
                                        <form action="{{ route('users.toggleActive', $user) }}" method="POST" class="inline">
                                            @csrf
                                            @method('PATCH')
                                            @if($user->is_active)
                                                <button type="submit" class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition font-medium">
                                                    <i class="fas fa-ban mr-2"></i>
                                                    Deactivate User
                                                </button>
                                            @else
                                                <button type="submit" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition font-medium">
                                                    <i class="fas fa-check mr-2"></i>
                                                    Activate User
                                                </button>
                                            @endif
                                        </form>
                                    @endcan
                                </div>
                            </div>
                        @endif
                    @endcan

                </div>
            </div>
        </div>
    </div>
</x-app-layout>
