@php
    $enabled = $enabled ?? false;
    $pending = $pending ?? false;
    $qrSvg = $qrSvg ?? null;
    $recoveryCodes = $recoveryCodes ?? [];
@endphp

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

        <div class="flex items-end justify-between gap-3">
            <div>
                <div class="text-xl font-semibold">2FA (Authenticator)</div>
                <div class="mt-1 text-sm text-rk-slate">TOTP via App (Google/Microsoft/Authy).</div>
            </div>
            <a href="{{ route('security.sessions.index') }}" class="btn-rk-soft">
                Zurück zu Sitzungen
            </a>
        </div>

        <div class="grid grid-cols-1 xl:grid-cols-3 gap-4">

            <div class="rounded-3xl bg-white border border-rk p-6 shadow-sm">
                <div class="text-sm font-semibold">Status</div>

                <div class="mt-4">
                    @if ($enabled)
                        <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">
                            Aktiv
                        </span>
                    @elseif($pending)
                        <span
                            class="inline-flex items-center rounded-full bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-700 border border-amber-200">
                            Setup offen
                        </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">
                            Inaktiv
                        </span>
                    @endif
                </div>

                <div class="mt-6 space-y-2">
                    @if (!$enabled && !$pending)
                        <form method="POST" action="{{ route('security.2fa.enable') }}">
                            @csrf
                            <button
                                class="w-full rounded-2xl bg-rk-red px-4 py-3 text-sm font-semibold text-white hover:bg-rk-red-dark">
                                2FA aktivieren
                            </button>
                        </form>
                    @endif

                    @if ($enabled || $pending)
                        <form method="POST" action="{{ route('security.2fa.disable') }}"
                            onsubmit="return confirm('2FA wirklich deaktivieren?')">
                            @csrf
                            @method('DELETE')
                            <button
                                class="w-full rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm font-semibold text-red-700 hover:bg-red-100">
                                2FA deaktivieren
                            </button>
                        </form>
                    @endif
                </div>

                <div class="mt-6 text-xs text-rk-slate">
                    Empfehlung: 2FA für alle Bezirksstellen-Accounts verpflichtend.
                </div>
            </div>

            <div class="xl:col-span-2 rounded-3xl bg-white border border-rk p-6 shadow-sm">
                @if ($pending)
                    <div class="text-sm font-semibold">Setup</div>
                    <div class="mt-1 text-xs text-rk-slate">QR-Code scannen und 6-stelligen Code bestätigen.</div>

                    @if ($pending)
                        <div
                            class="mt-4 rounded-2xl border border-rk bg-neutral-50 p-4 flex items-center justify-center">
                            <div class="bg-white rounded-xl p-3 border border-rk shadow-sm">
                                {!! $qrSvg !!}
                            </div>
                        </div>
                    @endif

                    <form method="POST" action="{{ route('security.2fa.confirm') }}"
                        class="mt-4 flex flex-col sm:flex-row gap-3">
                        @csrf
                        <input name="code" inputmode="numeric" autocomplete="one-time-code"
                            class="w-full sm:w-56 rounded-2xl border border-rk bg-white px-4 py-3 text-sm focus:ring-2 ring-rk focus:border-transparent"
                            placeholder="123456">
                        <button
                            class="rounded-2xl bg-rk-red px-4 py-3 text-sm font-semibold text-white hover:bg-rk-red-dark">
                            Bestätigen
                        </button>
                    </form>
                    @error('code')
                        <div class="mt-2 text-xs text-red-600">{{ $message }}</div>
                    @enderror
                @elseif($enabled)
                    <div class="flex items-start justify-between gap-3">
                        <div>
                            <div class="text-sm font-semibold">Recovery Codes</div>
                            <div class="mt-1 text-xs text-rk-slate">Einmal-Codes für Notfallzugang. Sicher speichern.
                            </div>
                        </div>
                        <form method="POST" action="{{ route('security.2fa.recovery') }}"
                            onsubmit="return confirm('Neue Codes generieren? Alte werden ungültig.')">
                            @csrf
                            <button
                                class="rounded-2xl border border-rk bg-white px-3 py-2 text-xs font-semibold hover:bg-neutral-50">
                                Neu generieren
                            </button>
                        </form>
                    </div>

                    <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
                        @forelse($recoveryCodes as $c)
                            <div class="rounded-2xl border border-rk bg-neutral-50 p-3 font-mono text-xs text-rk-slate">
                                {{ $c }}
                            </div>
                        @empty
                            <div class="text-sm text-rk-slate">Keine Codes vorhanden.</div>
                        @endforelse
                    </div>
                @else
                    <div class="text-sm font-semibold">2FA ist deaktiviert</div>
                    <div class="mt-1 text-xs text-rk-slate">Aktiviere 2FA, um dein Konto zu schützen.</div>
                @endif
            </div>

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