{{--
    Shared Two-Factor Authentication setup panel.

    Expected variables:
      - $twofaEnabled   bool    — whether 2FA is already confirmed for the user
      - $pending2fa     array|null — ['secret' => ..., 'uri' => ...] when setup is pending
      - $confirmRoute   string  — POST endpoint that verifies the first code
      - $disableRoute   string  — POST endpoint that turns 2FA off
      - $recoveryRoute  string  — POST endpoint that regenerates recovery codes

    Uses: FontAwesome + the qrcode.js library loaded from a CDN. Pure client-side,
    no external API call happens for QR rendering — the otpauth:// URI is passed
    straight to the library in the browser.
--}}
@once
@push('styles')
<style>
    /* Self-contained 2FA panel styles so the partial works inside any layout
       (admin settings tab, escrow security page, inventory security page). */
    .twofa-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 1.5rem; }
    .twofa-panel-head { padding: 1.15rem 1.4rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.625rem; font-size: 0.95rem; font-weight: 600; }
    .twofa-panel-head i { color: var(--accent); }
    .twofa-panel-body { padding: 1.4rem; }
    .twofa-status { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: 20px; font-size: 0.72rem; font-weight: 600; margin-left: auto; }
    .twofa-status-on { background: rgba(0,212,170,0.12); color: var(--success, #00d4aa); }
    .twofa-status-off { background: rgba(255,71,87,0.12); color: var(--danger, #ff4757); }
    .twofa-label { display: block; font-size: 0.8rem; font-weight: 500; margin-bottom: 0.4rem; color: var(--text-secondary); text-transform: none; letter-spacing: 0; }
    .twofa-input { width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-primary, #0b1530); color: var(--text-primary); font-family: inherit; font-size: 0.9rem; outline: none; box-sizing: border-box; }
    .twofa-input:focus { border-color: var(--accent); }
    .twofa-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.1rem; }
    .twofa-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border-radius: 8px; font-size: 0.85rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; text-decoration: none; }
    .twofa-btn-primary { background: var(--accent, #10BFFF); color: #fff; }
    .twofa-btn-secondary { background: transparent; color: var(--text-primary); border-color: var(--border); }
    .twofa-btn-danger { background: var(--danger, #ff4757); color: #fff; }
    .twofa-note { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.85rem 1rem; background: rgba(16,191,255,0.08); border-radius: 8px; font-size: 0.82rem; color: var(--accent); margin-bottom: 1.1rem; }
    .twofa-note i { margin-top: 0.15rem; }
    .twofa-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin: 0.5rem 0; }
    .twofa-code { padding: 0.55rem 0.75rem; background: var(--bg-primary, #0b1530); border: 1px solid var(--border); border-radius: 6px; font-family: monospace; font-size: 0.85rem; text-align: center; color: var(--text-primary); }
    .twofa-alert-error { background: rgba(255,71,87,0.08); border: 1px solid rgba(255,71,87,0.3); color: var(--danger, #ff4757); padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.85rem; display: flex; align-items: center; gap: 0.5rem; }
    .twofa-recovery-box { background: rgba(16,191,255,0.08); border: 1px solid rgba(16,191,255,0.35); border-radius: 10px; padding: 1rem 1.2rem; margin-bottom: 1.4rem; }
    .twofa-split { display: flex; flex-wrap: wrap; gap: 1.8rem; align-items: center; justify-content: center; margin: 1rem 0 1.4rem; }
    .twofa-qr { background: #fff; padding: 12px; border-radius: 10px; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; }
    .twofa-secret-col { flex: 1; min-width: 240px; }
    .twofa-secret-box { font-family: 'Courier New', monospace; font-size: 0.95rem; background: var(--bg-primary, #0b1530); border: 1px solid var(--border); border-radius: 8px; padding: 0.65rem 0.85rem; word-break: break-all; color: var(--text-primary); }
    .twofa-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .twofa-card { background: var(--bg-primary, #0b1530); border: 1px solid var(--border); border-radius: 10px; padding: 1.15rem; }
    .twofa-card.danger { border-color: rgba(255,71,87,0.35); }
</style>
@endpush
@endonce
<div class="twofa-panel">
    <div class="twofa-panel-head">
        <i class="fas fa-shield-halved"></i> Two-Factor Authentication
        <span class="twofa-status {{ $twofaEnabled ? 'twofa-status-on' : 'twofa-status-off' }}">
            <i class="fas fa-circle" style="font-size: 0.5rem;"></i>
            {{ $twofaEnabled ? 'Enabled' : 'Disabled' }}
        </span>
    </div>
    <div class="twofa-panel-body">
        @if($errors->any())
            <div class="twofa-alert-error">
                <i class="fas fa-triangle-exclamation"></i> {{ $errors->first() }}
            </div>
        @endif

        @if(session('recovery_codes'))
            <div class="twofa-recovery-box">
                <div style="font-weight:600; color: var(--accent); margin-bottom: 0.5rem;">
                    <i class="fas fa-key"></i> Your recovery codes
                </div>
                <p style="font-size:0.82rem; color: var(--text-secondary); margin: 0 0 0.75rem;">
                    Store these somewhere safe. Each can be used once to sign in if you lose your authenticator device. You won't see them again after leaving this page.
                </p>
                <div class="twofa-codes">
                    @foreach(session('recovery_codes') as $code)
                        <div class="twofa-code">{{ $code }}</div>
                    @endforeach
                </div>
            </div>
        @endif

        @if(!$twofaEnabled && $pending2fa)
            {{-- Setup flow: show QR + manual secret, collect first TOTP --}}
            <p style="font-size: 0.88rem; color: var(--text-secondary); margin-bottom: 1rem; line-height: 1.6;">
                Scan the QR code below with Google Authenticator, Authy, or any compatible app — then enter the 6-digit code to finish enabling 2FA.
            </p>

            <div class="twofa-split">
                <div id="twofaQr" class="twofa-qr"></div>

                <div class="twofa-secret-col">
                    <label class="twofa-label" style="text-transform:uppercase; letter-spacing:0.05em; font-size:0.72rem;">Can't scan? Enter this key</label>
                    <div class="twofa-secret-box">{{ $pending2fa['secret'] }}</div>
                    <small style="display:block; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.4rem;">
                        Type this into your authenticator app manually if the QR won't scan.
                    </small>
                </div>
            </div>

            <form method="POST" action="{{ $confirmRoute }}">
                @csrf
                <div style="margin-bottom: 0.9rem;">
                    <label class="twofa-label" for="twofaCode">6-digit verification code</label>
                    <input type="text" class="twofa-input" id="twofaCode" name="code" inputmode="numeric" maxlength="6" required
                           placeholder="123456"
                           style="font-family: 'Courier New', monospace; font-size: 1.2rem; letter-spacing: 0.3rem; text-align: center;">
                </div>
                <div class="twofa-actions">
                    <button type="submit" class="twofa-btn twofa-btn-primary">
                        <i class="fas fa-check"></i> Verify &amp; Enable
                    </button>
                </div>
            </form>

            <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
            <script>
                (function () {
                    const target = document.getElementById('twofaQr');
                    if (target && typeof QRCode !== 'undefined') {
                        target.innerHTML = '';
                        new QRCode(target, {
                            text: @json($pending2fa['uri']),
                            width: 180,
                            height: 180,
                            colorDark: '#000000',
                            colorLight: '#ffffff',
                            correctLevel: QRCode.CorrectLevel.M,
                        });
                    }
                })();
            </script>
        @elseif($twofaEnabled)
            {{-- 2FA is on: offer disable + recovery regeneration --}}
            <div class="twofa-note">
                <i class="fas fa-shield-halved"></i>
                <span>Two-factor authentication is active on your account. You'll be prompted for a code from your authenticator app each time you sign in.</span>
            </div>

            <div class="twofa-grid">
                <form method="POST" action="{{ $recoveryRoute }}" class="twofa-card">
                    @csrf
                    <div style="font-weight:600; margin-bottom: 0.4rem;"><i class="fas fa-key"></i> Regenerate recovery codes</div>
                    <p style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.9rem;">
                        Creates a fresh set of recovery codes. Your existing codes will stop working immediately.
                    </p>
                    <label class="twofa-label" for="recoveryPwd">Confirm password</label>
                    <input type="password" class="twofa-input" id="recoveryPwd" name="current_password" required autocomplete="current-password">
                    <button type="submit" class="twofa-btn twofa-btn-secondary" style="margin-top: 0.9rem;">
                        <i class="fas fa-rotate"></i> Generate new codes
                    </button>
                </form>

                <form method="POST" action="{{ $disableRoute }}" class="twofa-card danger"
                      data-confirm="With 2FA off, anyone with your password can sign in — no phone required. You can always re-enable it later."
                      data-confirm-type="danger"
                      data-confirm-title="Turn off two-factor auth?"
                      data-confirm-button="Disable 2FA">
                    @csrf
                    <div style="font-weight:600; color: var(--danger, #ff4757); margin-bottom: 0.4rem;"><i class="fas fa-ban"></i> Disable 2FA</div>
                    <p style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.9rem;">
                        Turns off two-factor authentication. You'll be able to sign in with just your password again.
                    </p>
                    <label class="twofa-label" for="disablePwd">Confirm password</label>
                    <input type="password" class="twofa-input" id="disablePwd" name="current_password" required autocomplete="current-password">
                    <button type="submit" class="twofa-btn twofa-btn-danger" style="margin-top: 0.9rem;">
                        <i class="fas fa-shield-xmark"></i> Disable 2FA
                    </button>
                </form>
            </div>
        @else
            <p style="color: var(--text-muted);"><i class="fas fa-info-circle"></i> 2FA setup is temporarily unavailable. Refresh and try again.</p>
        @endif
    </div>
</div>