@php
    $sessions = $sessions ?? collect();
@endphp

<x-layouts.app title="Sitzungen & 2FA" userRole="{{ auth()->user()->isDistrictUser() ? 'Bezirksstelle' : 'Ortstelle' }}">
    <div class="flex flex-col gap-4">

        <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
            <div>
                <div class="text-xl font-semibold">Sitzungen</div>
                <div class="mt-1 text-sm text-rk-slate">Aktive Login-Sitzungen verwalten.</div>
            </div>

            <a href="{{ route('security.2fa.index') }}" class="btn-rk-soft-warning">
                2FA verwalten
            </a>
        </div>

        <div class="rounded-3xl bg-white border border-rk p-6 shadow-sm">
            <div class="text-sm font-semibold">Andere Sitzungen abmelden</div>
            <div class="mt-1 text-xs text-rk-slate">Sicherheitsmaßnahme: Passwort erforderlich.</div>

            <form method="POST" action="{{ route('security.sessions.logout_others') }}"
                class="mt-4 flex flex-col sm:flex-row gap-3">
                @csrf
                <input type="password" name="password" required
                    class="w-full sm:w-80 rounded-2xl border border-rk bg-white px-4 py-3 text-sm focus:ring-2 ring-rk focus:border-transparent"
                    placeholder="Passwort bestätigen">
                <button
                    class="rounded-2xl bg-rk-red px-4 py-3 text-sm font-semibold text-white hover:bg-rk-red-dark transition-rk hover:shadow-button">
                    Andere abmelden
                </button>
            </form>
            @error('password')
                <div class="mt-2 text-xs text-red-600">{{ $message }}</div>
            @enderror
        </div>

        <div class="rounded-3xl bg-white border border-rk shadow-sm overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="text-xs text-rk-slate/80 uppercase tracking-wider bg-neutral-50">
                        <tr class="border-t border-b border-rk">
                            <th class="py-3 px-5 text-left">Session</th>
                            <th class="py-3 px-5 text-left">Letzte Aktivität</th>
                            <th class="py-3 px-5 text-left">IP</th>
                            <th class="py-3 px-5 text-left">User-Agent</th>
                            <th class="py-3 px-5 text-right">Aktion</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-[color:var(--rk-border)]">
                        @forelse($sessions as $s)
                            <tr class="hover:bg-neutral-50">
                                <td class="py-4 px-5">
                                    @if ($s->is_current)
                                        <span
                                            class="inline-flex items-center rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700 border border-emerald-200">
                                            Aktuell
                                        </span>
                                    @else
                                        <span
                                            class="inline-flex items-center rounded-full bg-neutral-100 px-3 py-1 text-xs font-semibold text-rk-slate border border-rk">
                                            Aktiv
                                        </span>
                                    @endif
                                    <div class="mt-2 text-xs text-rk-slate font-mono break-all">{{ $s->id }}
                                    </div>
                                </td>
                                <td class="py-4 px-5 text-rk-slate whitespace-nowrap">
                                    {{ optional($s->last_activity_dt)->format('d.m.Y H:i') }}
                                </td>
                                <td class="py-4 px-5 text-rk-slate whitespace-nowrap">{{ $s->ip_address ?? '—' }}</td>
                                <td class="py-4 px-5 text-xs text-rk-slate">
                                    {{ \Illuminate\Support\Str::limit((string) ($s->user_agent ?? ''), 110) ?: '—' }}
                                </td>
                                <td class="py-4 px-5 text-right">
                                    @if (!$s->is_current)
                                        <form method="POST" action="{{ route('security.sessions.destroy', $s->id) }}"
                                            onsubmit="return confirm('Diese Sitzung wirklich entfernen?')">
                                            @csrf
                                            @method('DELETE')
                                            <button class="text-rk-red font-semibold hover:underline">Entfernen</button>
                                        </form>
                                    @else
                                        <span class="text-xs text-rk-slate">—</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="py-10 px-5 text-center text-rk-slate">Keine Sitzungen.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</x-layouts.app>