@extends('layouts.dashboard')
@section('title', __('Security'))
@section('page_title', __('Account Security'))

@section('content')
    @include('partials.how-it-works', ['key' => 'security.index'])

    @if($forced)
        <div class="alert alert-warning d-flex align-items-center gap-2"><i class="bi bi-shield-exclamation fs-5"></i><div>{{ __('Your administrator requires two-factor authentication for admin accounts. Set it up below to regain access to the rest of the panel.') }}</div></div>
    @endif

    @if($justEnabledCodes)
        <div class="card mb-3 border-success">
            <div class="card-header text-success"><i class="bi bi-key-fill me-2"></i>{{ __('Your recovery codes') }}</div>
            <div class="card-body">
                <p class="small text-muted">{{ __('Each code can be used once if you lose access to your authenticator app. Store them somewhere safe — they will not be shown again.') }}</p>
                <div class="row g-2 font-monospace">
                    @foreach($justEnabledCodes as $c)<div class="col-6 col-md-3"><div class="border rounded-3 px-3 py-2 text-center fw-bold">{{ $c }}</div></div>@endforeach
                </div>
                <button class="btn btn-light btn-sm mt-3" type="button" onclick="navigator.clipboard.writeText(@json(implode("\n", $justEnabledCodes)));this.innerHTML='<i class=\'bi bi-check2 me-1\'></i>{{ __('Copied') }}'"><i class="bi bi-clipboard me-1"></i>{{ __('Copy codes') }}</button>
            </div>
        </div>
    @endif

    <div class="row g-3">
        <div class="col-lg-7">
            {{-- 2FA --}}
            <div class="card mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span><i class="bi bi-shield-lock text-primary me-2"></i>{{ __('Two-factor authentication') }}</span>
                    <span class="badge {{ $user->hasTwoFactor() ? 'bg-success' : 'bg-secondary' }}">{{ $user->hasTwoFactor() ? __('Enabled') : __('Off') }}</span>
                </div>
                <div class="card-body">
                    @if($user->hasTwoFactor())
                        <p class="text-muted small">{{ __('Signing in requires your password and a code from your authenticator app. Enabled :date.', ['date' => $user->two_factor_confirmed_at->format('M d, Y')]) }}</p>
                        <p class="small mb-3"><i class="bi bi-key me-1"></i>{{ trans_choice(':count recovery code left|:count recovery codes left', count($user->two_factor_recovery_codes ?? []), ['count' => count($user->two_factor_recovery_codes ?? [])]) }}</p>
                        <div class="d-flex flex-wrap gap-2">
                            <button class="btn btn-light" data-bs-toggle="modal" data-bs-target="#codesModal"><i class="bi bi-arrow-repeat me-1"></i>{{ __('New recovery codes') }}</button>
                            <button class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#disableModal"><i class="bi bi-x-circle me-1"></i>{{ __('Turn off 2FA') }}</button>
                        </div>
                    @elseif($pending)
                        <div class="row g-4 align-items-center">
                            <div class="col-md-5 text-center">
                                <div class="d-inline-block p-2 bg-white rounded-4 border">{!! $qr !!}</div>
                                <div class="small text-muted mt-2">{{ __("Can't scan? Enter this key:") }}</div>
                                <code class="user-select-all">{{ chunk_split($pending, 4, ' ') }}</code>
                            </div>
                            <div class="col-md-7">
                                <ol class="small text-muted ps-3 mb-3">
                                    <li>{{ __('Install Google Authenticator, Authy, 1Password or Microsoft Authenticator.') }}</li>
                                    <li>{{ __('Scan the QR code (or type the key).') }}</li>
                                    <li>{{ __('Enter the 6-digit code shown in the app.') }}</li>
                                </ol>
                                <form action="{{ route('security.2fa.confirm') }}" method="POST" class="d-flex gap-2">@csrf
                                    <input type="text" name="code" class="form-control fw-bold text-center @error('code') is-invalid @enderror" style="letter-spacing:.3em;max-width:180px" inputmode="numeric" placeholder="000000" autocomplete="one-time-code" required autofocus>
                                    <button class="btn btn-primary">{{ __('Activate') }}</button>
                                </form>
                                @error('code')<div class="text-danger small mt-2">{{ $message }}</div>@enderror
                                <form action="{{ route('security.2fa.cancel') }}" method="POST" class="mt-2">@csrf<button class="btn btn-link btn-sm text-muted p-0">{{ __('Cancel setup') }}</button></form>
                            </div>
                        </div>
                    @else
                        <p class="text-muted small">{{ __('Add a second layer of protection: after your password, you will be asked for a 6-digit code from an authenticator app on your phone.') }}</p>
                        <form action="{{ route('security.2fa.enable') }}" method="POST">@csrf<button class="btn btn-primary"><i class="bi bi-qr-code me-1"></i>{{ __('Set up two-factor authentication') }}</button></form>
                    @endif
                </div>
            </div>

            {{-- Login history --}}
            <div class="card">
                <div class="card-header"><i class="bi bi-clock-history text-primary me-2"></i>{{ __('Recent sign-ins') }}</div>
                <div class="table-responsive">
                    <table class="table table-hover mb-0 align-middle">
                        <thead><tr><th>{{ __('When') }}</th><th>{{ __('Device') }}</th><th>{{ __('IP address') }}</th></tr></thead>
                        <tbody>
                            @forelse($logins as $l)
                                <tr><td>{{ optional($l->logged_in_at)->format('M d, Y H:i') }} <span class="text-muted small">({{ optional($l->logged_in_at)->diffForHumans() }})</span></td><td><i class="bi bi-{{ in_array($l->device, ['iPhone','Android','iPad']) ? 'phone' : 'laptop' }} me-1"></i>{{ $l->device ? __($l->device) : '—' }}</td><td class="font-monospace small">{{ $l->ip_address }}</td></tr>
                            @empty
                                <tr><td colspan="3"><div class="lf-empty"><i class="bi bi-clock-history"></i>{{ __('No sign-ins recorded yet.') }}</div></td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- Known devices --}}
            <div class="card mt-3">
                <div class="card-header d-flex justify-content-between align-items-center"><span><i class="bi bi-laptop text-primary me-2"></i>{{ __('Known devices') }}</span><form action="{{ route('security.sessions.revoke-others') }}" method="POST" class="m-0" data-confirm="{{ __('Sign out every other session?') }}">@csrf<button class="btn btn-sm btn-outline-danger">{{ __('Sign out others') }}</button></form></div>
                <div class="table-responsive">
                    <table class="table table-hover mb-0 align-middle">
                        <thead><tr><th>{{ __('Device') }}</th><th>{{ __('Last seen') }}</th><th>{{ __('IP address') }}</th></tr></thead>
                        <tbody>
                            @forelse($devices ?? [] as $d)
                                <tr><td><i class="bi bi-{{ in_array($d->device_label, ['iPhone','Android','iPad']) ? 'phone' : 'laptop' }} me-1"></i>{{ __($d->device_label) }}</td><td>{{ optional($d->last_seen_at)->format('M d, Y H:i') }} <span class="text-muted small">({{ optional($d->last_seen_at)->diffForHumans() }})</span></td><td class="font-monospace small">{{ $d->ip_address }}</td></tr>
                            @empty
                                <tr><td colspan="3"><div class="lf-empty"><i class="bi bi-laptop"></i>{{ __('No devices recorded yet — they appear here on your next sign-in.') }}</div></td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-lg-5">
            {{-- Changing the password lives here, and only here, because this is
                 the one screen that can ask for the current one first. --}}
            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-key text-primary me-2"></i>{{ __('Password') }}</div>
                <form method="POST" action="{{ route('security.password') }}" class="card-body">
                    @csrf
                    <p class="small text-muted">{{ __('Use a long, unique password. You will stay signed in on this device; every other session is signed out.') }}</p>

                    <div class="mb-2">
                        <label class="form-label small mb-1" for="current_password">{{ __('Current password') }}</label>
                        <input type="password" name="current_password" id="current_password" autocomplete="current-password" required
                               class="form-control form-control-sm @error('current_password') is-invalid @enderror">
                        @error('current_password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="mb-2">
                        <label class="form-label small mb-1" for="new_password">{{ __('New password') }}</label>
                        <input type="password" name="password" id="new_password" autocomplete="new-password" required
                               class="form-control form-control-sm @error('password') is-invalid @enderror">
                        @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label small mb-1" for="password_confirmation">{{ __('Confirm new password') }}</label>
                        <input type="password" name="password_confirmation" id="password_confirmation" autocomplete="new-password" required
                               class="form-control form-control-sm">
                    </div>

                    <button class="btn btn-primary btn-sm">{{ __('Change password') }}</button>
                </form>
            </div>
            {{-- GDPR --}}
            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-download text-primary me-2"></i>{{ __('Your data') }}</div>
                <div class="card-body">
                    <p class="small text-muted">{{ __('Download a copy of everything stored about you — profile, enrollments, progress, orders, certificates, notes and activity — as a JSON file.') }}</p>
                    <form action="{{ route('security.export') }}" method="POST">@csrf<button class="btn btn-light"><i class="bi bi-file-earmark-arrow-down me-1"></i>{{ __('Download my data') }}</button></form>
                </div>
            </div>
            <div class="card border-danger-subtle">
                <div class="card-header text-danger"><i class="bi bi-exclamation-octagon me-2"></i>{{ __('Delete account') }}</div>
                <div class="card-body">
                    <p class="small text-muted">{{ __('Permanently anonymises your personal data and closes the account. Purchases remain in the accounting records as required by law, but are no longer linked to you.') }}</p>
                    <button class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#eraseModal">{{ __('Delete my account') }}</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Modals --}}
    <div class="modal fade" id="disableModal" tabindex="-1"><div class="modal-dialog"><form class="modal-content" action="{{ route('security.2fa.disable') }}" method="POST">@csrf
        <div class="modal-header"><h5 class="modal-title">{{ __('Turn off two-factor authentication') }}</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body"><p class="small text-muted">{{ __('Confirm your password to continue.') }}</p><input type="password" name="password" class="form-control" placeholder="{{ __('Current password') }}" required></div>
        <div class="modal-footer"><button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('Cancel') }}</button><button class="btn btn-danger">{{ __('Turn off') }}</button></div>
    </form></div></div>
    <div class="modal fade" id="codesModal" tabindex="-1"><div class="modal-dialog"><form class="modal-content" action="{{ route('security.2fa.codes') }}" method="POST">@csrf
        <div class="modal-header"><h5 class="modal-title">{{ __('Generate new recovery codes') }}</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body"><p class="small text-muted">{{ __('Your existing codes will stop working. Confirm your password to continue.') }}</p><input type="password" name="password" class="form-control" placeholder="{{ __('Current password') }}" required></div>
        <div class="modal-footer"><button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('Cancel') }}</button><button class="btn btn-primary">{{ __('Generate') }}</button></div>
    </form></div></div>
    <div class="modal fade" id="eraseModal" tabindex="-1"><div class="modal-dialog"><form class="modal-content" action="{{ route('security.erase') }}" method="POST">@csrf
        <div class="modal-header"><h5 class="modal-title text-danger">{{ __('Delete my account') }}</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body">
            <p class="small text-muted">{{ __('This cannot be undone. Type DELETE and confirm your password.') }}</p>
            <input type="text" name="confirm" class="form-control mb-2" placeholder="{{ __('DELETE') }}" required>
            <input type="password" name="password" class="form-control" placeholder="{{ __('Current password') }}" required>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('Cancel') }}</button><button class="btn btn-danger">{{ __('Delete permanently') }}</button></div>
    </form></div></div>
@endsection