@php
    $faceVerification = $user->latestFaceVerification;
    $faceStatus = $faceVerification?->status ?? 'not_submitted';
    $faceLabel = match ($faceStatus) {
        'approved' => 'Verified',
        'pending' => 'Pending review',
        'duplicate_review' => 'Duplicate review',
        'rejected' => 'Rejected',
        default => 'Not enrolled',
    };
    $faceClass = match ($faceStatus) {
        'approved' => 'success',
        'pending', 'duplicate_review' => 'warning',
        'rejected' => 'danger',
        default => '',
    };
    $totpSetup = session('totp_setup');
@endphp

<div class="modal fade" id="profileSettingsModal" tabindex="-1" aria-labelledby="profileSettingsTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl modal-dialog-scrollable">
        <div class="modal-content loot-profile-settings-modal">
            <div class="modal-header">
                <div class="d-flex align-items-center gap-1">
                    <div class="loot-profile-avatar small">
                        <img src="{{ $user->avatar() }}" alt="{{ $user->username }}">
                    </div>
                    <div>
                        <h4 class="modal-title loot-section-title mb-0" id="profileSettingsTitle">{{ $user->username }}</h4>
                        <p class="loot-muted mb-0">Profile and account settings</p>
                    </div>
                </div>
                <button type="button" class="btn-close loot-modal-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            @if(session('success'))
                <div class="alert alert-success m-2 mb-0"><div class="alert-body">{{ session('success') }}</div></div>
            @endif
            @if(session('error'))
                <div class="alert alert-danger m-2 mb-0" role="alert"><div class="alert-body">{{ session('error') }}</div></div>
            @endif
            @if($errors->any())
                <div class="alert alert-danger m-2 mb-0"><div class="alert-body">{{ $errors->first() }}</div></div>
            @endif

            <form method="POST" action="{{ route('user.settings.update') }}" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="profile_settings_form" value="1">
                <div class="modal-body">
                    <div class="loot-profile-settings-grid">
                        <section class="loot-profile-settings-card">
                            <h3>Information</h3>
                            <div class="loot-settings-row"><span>User ID</span><strong>#{{ $user->id }}</strong></div>
                            <div class="loot-settings-row"><span>Email</span><strong class="text-break">{{ $user->email }}</strong></div>
                            <div class="loot-settings-row"><span>Referral earnings</span><strong>{{ format_coins_as_usd($stats['referral_earnings']) }}</strong></div>
                            <div class="loot-settings-row"><span>Date joined</span><strong>{{ $user->created_at->format('M d, Y') }}</strong></div>
                            <div class="loot-settings-row"><span>Face verification</span><span class="loot-status {{ $faceClass }}">{{ $faceLabel }}</span></div>
                        </section>

                        <section class="loot-profile-settings-card">
                            <h3>Profile</h3>
                            <label class="form-label" for="profile-avatar">Avatar</label>
                            <input id="profile-avatar" type="file" class="form-control mb-1" accept="image/jpeg,image/png,image/gif,image/svg+xml" name="image">

                            <label class="form-label" for="profile-password">New password</label>
                            <input id="profile-password" type="password" class="form-control mb-1" name="password" minlength="8" autocomplete="new-password" placeholder="Leave blank to keep current password">

                            <label class="loot-switch-card" for="profile-private-switch">
                                <div><strong>Public profile</strong><span>Show your username and avatar in public activity.</span></div>
                                <input type="hidden" name="is_profile_private" value="1">
                                <input class="form-check-input" type="checkbox" id="profile-private-switch" name="is_profile_private" value="0" {{ $user->is_profile_private ? '' : 'checked' }}>
                            </label>

                            <label class="loot-switch-card" for="balance-display-switch">
                                <div><strong>Show USD balance</strong><span>1,000 coins equals $1.00 throughout the dashboard.</span></div>
                                <input type="hidden" name="balance_display" value="coins">
                                <input class="form-check-input" type="checkbox" id="balance-display-switch" name="balance_display" value="usd" {{ $balanceMode === 'usd' ? 'checked' : '' }}>
                            </label>
                        </section>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-loot">Save changes</button>
                </div>
            </form>

            @if(site_bool('two_factor_site_enabled', false))
                <section class="loot-profile-settings-card m-2 mt-0">
                    <div class="d-flex flex-wrap justify-content-between align-items-center gap-1">
                        <div>
                            <h3 class="mb-25">Two-factor authentication</h3>
                            <p class="loot-muted mb-0">{{ $user->two_factor_enabled ? 'Enabled with '.($user->two_factor_method === 'totp' ? 'an authenticator app' : 'email codes').'.' : 'Add another check when signing in.' }}</p>
                        </div>
                        <div class="d-flex flex-wrap gap-1">
                            @if($user->two_factor_enabled)
                                <form method="POST" action="{{ route('user.2fa.disable') }}">@csrf<button class="btn btn-outline-danger">Disable 2FA</button></form>
                            @else
                                <form method="POST" action="{{ route('user.2fa.email') }}">@csrf<button class="btn btn-outline-light">Email codes</button></form>
                                <form method="POST" action="{{ route('user.2fa.totp.setup') }}">@csrf<button class="btn btn-outline-light">Authenticator app</button></form>
                            @endif
                        </div>
                    </div>
                    @if($totpSetup)
                        <div class="alert alert-info mt-1 mb-0"><div class="alert-body">
                            <strong>Authenticator secret:</strong> <code>{{ $totpSetup['secret'] }}</code>
                            <form method="POST" action="{{ route('user.2fa.totp.confirm') }}" class="d-flex flex-wrap gap-1 align-items-end mt-1">
                                @csrf
                                <div><label class="form-label" for="totp-code">6-digit code</label><input id="totp-code" class="form-control" type="text" inputmode="numeric" autocomplete="one-time-code" pattern="[0-9]{6}" name="code" maxlength="6" required></div>
                                <button class="btn btn-loot">Confirm</button>
                            </form>
                        </div></div>
                    @endif
                </section>
            @endif
        </div>
    </div>
</div>
