<x-app-layout>

    <x-module-hero
        title="Active Sessions"
        description="Manage your active login sessions across all devices"
        icon="fa-desktop"
    >
        <x-slot name="tabs">
            <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-user text-sm"></i> Profile
            </a>
            <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>
            @role('Super Manager')
            <a href="{{ route('otp.settings') }}"
               class="module-hero-tab {{ request()->routeIs('otp.settings') ? '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>
            @endrole
            <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>
        </x-slot>
    </x-module-hero>

    <div class="p-6 space-y-6">

        @if(session('success'))
            <div class="p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center gap-3">
                <i class="fas fa-check-circle text-xl"></i>{{ session('success') }}
            </div>
        @endif

        @if(session('error'))
            <div class="p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-center gap-3">
                <i class="fas fa-exclamation-circle text-xl"></i>{{ session('error') }}
            </div>
        @endif

        {{-- Info Notice --}}
        <div class="p-4 bg-blue-50 border border-blue-200 rounded-lg flex items-start gap-3">
            <i class="fas fa-info-circle text-blue-600 mt-0.5 text-lg"></i>
            <div class="text-sm text-blue-700">
                <p class="font-medium">Your current session is highlighted below.</p>
                <p>Logging out other devices will invalidate all other active sessions immediately.</p>
            </div>
        </div>

        {{-- Sessions List --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div class="bg-gray-50 px-6 py-4 border-b border-gray-200 flex items-center justify-between">
                <h3 class="text-lg font-semibold text-gray-900 flex items-center gap-2">
                    <i class="fas fa-list text-purple-600"></i> Active Sessions
                </h3>
                @if(isset($sessions) && $sessions->count() > 1)
                    <span class="text-sm text-gray-500">{{ $sessions->count() }} sessions</span>
                @endif
            </div>
            <div class="divide-y divide-gray-100">
                @if(isset($sessions) && $sessions->count() > 0)
                    @foreach($sessions as $session)
                        @php
                            $isCurrent = $session->id === session()->getId();
                            $agent = $session->user_agent ?? '';
                            $agentLower = strtolower($agent);
                            $isMobile = str_contains($agentLower, 'mobile') || str_contains($agentLower, 'android');
                            $isTablet = str_contains($agentLower, 'tablet') || str_contains($agentLower, 'ipad');
                        @endphp
                        <div class="p-6 flex items-start justify-between {{ $isCurrent ? 'bg-green-50' : '' }}">
                            <div class="flex items-start gap-4">
                                <div class="w-12 h-12 rounded-lg {{ $isCurrent ? 'bg-green-100' : 'bg-gray-100' }} flex items-center justify-center flex-shrink-0">
                                    @if($isMobile)
                                        <i class="fas fa-mobile-alt text-xl {{ $isCurrent ? 'text-green-600' : 'text-gray-500' }}"></i>
                                    @elseif($isTablet)
                                        <i class="fas fa-tablet-alt text-xl {{ $isCurrent ? 'text-green-600' : 'text-gray-500' }}"></i>
                                    @else
                                        <i class="fas fa-desktop text-xl {{ $isCurrent ? 'text-green-600' : 'text-gray-500' }}"></i>
                                    @endif
                                </div>
                                <div>
                                    <div class="flex items-center gap-2 mb-1">
                                        <span class="font-semibold text-gray-900 text-sm">
                                            {{ $isMobile ? 'Mobile Device' : ($isTablet ? 'Tablet' : 'Desktop Browser') }}
                                        </span>
                                        @if($isCurrent)
                                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                <i class="fas fa-circle text-green-500 mr-1" style="font-size:6px"></i>
                                                Current Session
                                            </span>
                                        @endif
                                    </div>
                                    <p class="text-xs text-gray-500 mb-1">
                                        <i class="fas fa-map-marker-alt mr-1"></i>
                                        IP: {{ $session->ip_address ?? 'Unknown' }}
                                    </p>
                                    <p class="text-xs text-gray-400">
                                        <i class="fas fa-clock mr-1"></i>
                                        Last active: {{ isset($session->last_activity) ? \Carbon\Carbon::createFromTimestamp($session->last_activity)->diffForHumans() : 'Unknown' }}
                                    </p>
                                    @if($session->user_agent)
                                        <p class="text-xs text-gray-400 mt-1 truncate max-w-xs" title="{{ $session->user_agent }}">
                                            {{ Str::limit($session->user_agent, 60) }}
                                        </p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                @else
                    <div class="p-10 text-center">
                        <i class="fas fa-desktop text-4xl text-gray-300 mb-3"></i>
                        <p class="text-gray-500">No active sessions found.</p>
                    </div>
                @endif
            </div>
        </div>

        {{-- Logout Other Devices --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900 flex items-center gap-2">
                    <i class="fas fa-sign-out-alt text-red-600"></i> Logout Other Devices
                </h3>
            </div>
            <div class="p-6">
                <p class="text-sm text-gray-600 mb-6">
                    If you believe your account has been compromised, or you simply want to log out of all other devices,
                    enter your current password below to confirm and invalidate all other active sessions.
                </p>
                <form method="POST"
                      action="{{ route('settings.sessions.logout-other') }}"
                      x-data="{ loading: false }"
                      @submit="loading = true">
                    @csrf

                    <div class="mb-4 max-w-sm">
                        <label for="password" class="block text-sm font-medium text-gray-700 mb-2">
                            Current Password <span class="text-red-500">*</span>
                        </label>
                        <input type="password"
                               id="password" name="password"
                               required
                               placeholder="Enter your current password"
                               class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent transition @error('password') border-red-500 @enderror">
                        @error('password')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <button type="submit" :disabled="loading"
                            class="px-6 py-3 bg-red-600 text-white font-semibold rounded-lg hover:bg-red-700 transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2">
                        <i x-show="!loading" class="fas fa-sign-out-alt"></i>
                        <i x-show="loading" class="fas fa-spinner fa-spin"></i>
                        <span x-text="loading ? 'Processing...' : 'Logout Other Devices'"></span>
                    </button>
                </form>
            </div>
        </div>

    </div>

</x-app-layout>
