<x-app-layout>
    <x-slot name="header">
        <div>
            <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200 leading-tight">
                <i class="fas fa-laptop mr-2 text-cyan-500"></i>Sesiuni & Securitate
            </h2>
            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                Gestionează sesiunile active și vezi istoricul de autentificare
            </p>
        </div>
    </x-slot>

    <div class="py-6">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">

            {{-- Sesiuni Active --}}
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
                <div class="p-6 border-b border-gray-200 dark:border-gray-700">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                                <i class="fas fa-signal text-green-500 mr-2"></i>
                                Sesiuni Active
                            </h3>
                            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                                Dispozitivele pe care ești autentificat în acest moment
                            </p>
                        </div>
                        @if($sessions->count() > 1)
                            <form method="POST" action="{{ route('sessions.revoke-all') }}"
                                  onsubmit="return confirm('Vei fi deconectat de pe toate celelalte dispozitive. Continuă?')">
                                @csrf
                                <button type="submit" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-lg transition">
                                    <i class="fas fa-sign-out-alt mr-2"></i>
                                    Deconectează toate
                                </button>
                            </form>
                        @endif
                    </div>
                </div>

                <div class="divide-y divide-gray-200 dark:divide-gray-700">
                    @forelse($sessions as $session)
                        <div class="p-4 flex items-center justify-between {{ $session->is_current ? 'bg-green-50 dark:bg-green-900/20' : '' }}">
                            <div class="flex items-center gap-4">
                                {{-- Icon dispozitiv --}}
                                <div class="w-12 h-12 rounded-xl flex items-center justify-center
                                    {{ $session->is_current ? 'bg-green-100 dark:bg-green-900/50' : 'bg-gray-100 dark:bg-gray-700' }}">
                                    <i class="{{ $session->device['icon'] ?? 'fas fa-desktop' }} text-xl
                                        {{ $session->is_current ? 'text-green-600 dark:text-green-400' : 'text-gray-500 dark:text-gray-400' }}"></i>
                                </div>

                                {{-- Detalii --}}
                                <div>
                                    <div class="flex items-center gap-2">
                                        <span class="font-medium text-gray-900 dark:text-white">
                                            {{ $session->device['browser'] ?? 'Browser necunoscut' }} pe {{ $session->device['os'] ?? 'OS necunoscut' }}
                                        </span>
                                        @if($session->is_current)
                                            <span class="px-2 py-0.5 text-xs bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 rounded-full">
                                                Sesiunea curentă
                                            </span>
                                        @endif
                                    </div>
                                    <div class="mt-1 flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
                                        <span>
                                            <i class="fas fa-globe mr-1"></i>
                                            {{ $session->ip_address }}
                                            @if($session->location)
                                                ({{ $session->location }})
                                            @endif
                                        </span>
                                        <span>
                                            <i class="fas fa-clock mr-1"></i>
                                            Ultima activitate: {{ $session->last_activity->diffForHumans() }}
                                        </span>
                                    </div>
                                </div>
                            </div>

                            {{-- Acțiuni --}}
                            @if(!$session->is_current)
                                <form method="POST" action="{{ route('sessions.revoke', $session->id) }}"
                                      onsubmit="return confirm('Această sesiune va fi închisă. Continuă?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="p-2 text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-lg transition" title="Revocă sesiunea">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </form>
                            @endif
                        </div>
                    @empty
                        <div class="p-8 text-center">
                            <i class="fas fa-laptop text-gray-400 text-3xl mb-3"></i>
                            <p class="text-gray-500 dark:text-gray-400">Nu există sesiuni active</p>
                        </div>
                    @endforelse
                </div>
            </div>

            {{-- Istoric Login --}}
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
                <div class="p-6 border-b border-gray-200 dark:border-gray-700">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                        <i class="fas fa-history text-amber-500 mr-2"></i>
                        Istoric Autentificări
                    </h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                        Ultimele 20 de încercări de autentificare
                    </p>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-gray-50 dark:bg-gray-700/50">
                            <tr class="text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                <th class="px-4 py-3">Data/Ora</th>
                                <th class="px-4 py-3">Status</th>
                                <th class="px-4 py-3">Dispozitiv</th>
                                <th class="px-4 py-3">IP</th>
                                <th class="px-4 py-3">Locație</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                            @forelse($loginHistory as $login)
                                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                                    <td class="px-4 py-3 text-sm text-gray-900 dark:text-white">
                                        {{ $login->logged_in_at->format('d.m.Y H:i') }}
                                        <span class="block text-xs text-gray-500 dark:text-gray-400">
                                            {{ $login->logged_in_at->diffForHumans() }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3">
                                        @if($login->is_successful)
                                            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-green-500 text-white">
                                                <i class="fas fa-check mr-1"></i> Succes
                                            </span>
                                        @else
                                            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-red-500 text-white">
                                                <i class="fas fa-times mr-1"></i> Eșuat
                                            </span>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
                                        <div class="flex items-center gap-2">
                                            @php
                                                $deviceIcon = match($login->device_type) {
                                                    'mobile' => 'fas fa-mobile-alt',
                                                    'tablet' => 'fas fa-tablet-alt',
                                                    default => 'fas fa-desktop'
                                                };
                                            @endphp
                                            <i class="{{ $deviceIcon }}"></i>
                                            <span>{{ $login->browser ?? 'Necunoscut' }} / {{ $login->os ?? 'Necunoscut' }}</span>
                                        </div>
                                    </td>
                                    <td class="px-4 py-3 text-sm font-mono text-gray-600 dark:text-gray-400">
                                        {{ $login->ip_address }}
                                    </td>
                                    <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
                                        @if($login->location)
                                            <i class="fas fa-map-marker-alt mr-1"></i>
                                            {{ $login->location }}
                                        @else
                                            <span class="text-gray-400">-</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
                                        Nu există istoric de autentificare
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- Dispozitive de încredere 2FA --}}
            @if($trustedDevices->count() > 0)
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
                    <div class="p-6 border-b border-gray-200 dark:border-gray-700">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                            <i class="fas fa-shield-alt text-purple-500 mr-2"></i>
                            Dispozitive de Încredere (2FA)
                        </h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                            Dispozitivele pe care ai selectat "Nu întreba din nou pe acest dispozitiv"
                        </p>
                    </div>

                    <div class="divide-y divide-gray-200 dark:divide-gray-700">
                        @foreach($trustedDevices as $device)
                            <div class="p-4 flex items-center justify-between">
                                <div class="flex items-center gap-4">
                                    <div class="w-10 h-10 rounded-lg bg-purple-100 dark:bg-purple-900/50 flex items-center justify-center">
                                        <i class="fas fa-check-circle text-purple-600 dark:text-purple-400"></i>
                                    </div>
                                    <div>
                                        <p class="font-medium text-gray-900 dark:text-white">{{ $device->device_name ?? 'Dispozitiv necunoscut' }}</p>
                                        <p class="text-sm text-gray-500 dark:text-gray-400">
                                            Adăugat: {{ $device->created_at->format('d.m.Y') }} •
                                            IP: {{ $device->ip_address }}
                                        </p>
                                    </div>
                                </div>
                                <form method="POST" action="{{ route('auth.two-factor.revoke-device', $device) }}">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-sm text-red-600 hover:text-red-700 hover:underline">
                                        Revocă
                                    </button>
                                </form>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            {{-- Sfaturi de securitate --}}
            <div class="bg-blue-50 dark:bg-blue-900/20 rounded-xl border border-blue-200 dark:border-blue-800 p-6">
                <h4 class="font-semibold text-blue-900 dark:text-blue-100 mb-3">
                    <i class="fas fa-lightbulb mr-2"></i>Sfaturi de Securitate
                </h4>
                <ul class="space-y-2 text-sm text-blue-800 dark:text-blue-200">
                    <li class="flex items-start gap-2">
                        <i class="fas fa-check text-blue-600 mt-0.5"></i>
                        <span>Revocă sesiunile de pe dispozitivele pe care nu le mai folosești</span>
                    </li>
                    <li class="flex items-start gap-2">
                        <i class="fas fa-check text-blue-600 mt-0.5"></i>
                        <span>Verifică periodic istoricul de login pentru activități suspecte</span>
                    </li>
                    <li class="flex items-start gap-2">
                        <i class="fas fa-check text-blue-600 mt-0.5"></i>
                        <span>Activează autentificarea în doi pași (2FA) pentru securitate sporită</span>
                    </li>
                    <li class="flex items-start gap-2">
                        <i class="fas fa-check text-blue-600 mt-0.5"></i>
                        <span>Folosește o parolă puternică și unică pentru acest cont</span>
                    </li>
                </ul>
                <div class="mt-4">
                    <a href="{{ route('auth.two-factor.index') }}" class="inline-flex items-center text-sm font-medium text-blue-700 dark:text-blue-300 hover:underline">
                        <i class="fas fa-shield-alt mr-2"></i>
                        Configurează 2FA
                        <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
