@extends('layouts.app')

@section('title', 'Security')

@push('styles')
<style>
    .security-page h1 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 2rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .security-page h1 i { color: var(--accent); }

    /* Tabs */
    .security-tabs {
        display: flex;
        gap: 0;
        border-bottom: 2px solid var(--border);
        margin-bottom: 2rem;
    }

    .security-tab {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--text-secondary);
        cursor: pointer;
        border: none;
        background: none;
        font-family: inherit;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        transition: all var(--transition);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .security-tab:hover { color: var(--text-primary); }

    .security-tab.active {
        color: var(--accent);
        border-bottom-color: var(--accent);
    }

    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    /* Sections */
    .security-section {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        overflow: hidden;
    }

    .security-section-header {
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 0.625rem;
        font-size: 0.95rem;
        font-weight: 600;
    }

    .security-section-header i { color: var(--accent); }

    .security-section-body { padding: 1.5rem; }

    /* Form */
    .form-group { margin-bottom: 1.25rem; }
    .form-group:last-child { margin-bottom: 0; }

    .form-label {
        display: block;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-secondary);
        margin-bottom: 0.5rem;
    }

    .form-input {
        width: 100%;
        padding: 0.75rem 1rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--text-primary);
        font-family: inherit;
        font-size: 0.9rem;
        outline: none;
        transition: border-color var(--transition);
    }

    .form-input:focus { border-color: var(--accent); }

    .form-error {
        display: block;
        font-size: 0.75rem;
        color: var(--danger);
        margin-top: 0.375rem;
    }

    .form-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border);
    }

    /* Password input with toggle */
    .password-wrapper {
        position: relative;
    }

    .password-wrapper .form-input {
        padding-right: 3rem;
    }

    .password-toggle {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: 0.25rem;
        font-size: 0.9rem;
    }

    .password-toggle:hover { color: var(--text-primary); }

    /* Password strength */
    .password-requirements {
        margin-top: 0.75rem;
        padding: 0.875rem;
        background: var(--bg-secondary);
        border-radius: var(--radius-sm);
        border: 1px solid var(--border);
    }

    .password-requirements p {
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--text-secondary);
        margin-bottom: 0.5rem;
    }

    .password-requirements li {
        font-size: 0.78rem;
        color: var(--text-muted);
        padding: 0.2rem 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        list-style: none;
    }

    .password-requirements li i { font-size: 0.7rem; }
    .password-requirements li.met { color: var(--success); }
    .password-requirements li.met i { color: var(--success); }

    /* PIN input */
    .pin-inputs {
        display: flex;
        gap: 0.75rem;
        justify-content: center;
        margin: 1.5rem 0;
    }

    .pin-input {
        width: 56px;
        height: 56px;
        text-align: center;
        font-size: 1.5rem;
        font-weight: 700;
        background: var(--bg-secondary);
        border: 2px solid var(--border);
        border-radius: var(--radius-md);
        color: var(--text-primary);
        outline: none;
        transition: border-color var(--transition);
    }

    .pin-input:focus { border-color: var(--accent); }

    .pin-status {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.875rem 1rem;
        background: var(--bg-secondary);
        border-radius: var(--radius-sm);
        border: 1px solid var(--border);
        margin-bottom: 1.25rem;
    }

    .pin-status i { font-size: 1.1rem; }
    .pin-status.active { border-color: var(--success); }
    .pin-status.active i { color: var(--success); }
    .pin-status.inactive { border-color: var(--warning); }
    .pin-status.inactive i { color: var(--warning); }

    .info-note {
        display: flex;
        align-items: flex-start;
        gap: 0.625rem;
        padding: 0.875rem 1rem;
        background: var(--accent-light);
        border-radius: var(--radius-sm);
        font-size: 0.82rem;
        color: var(--accent);
        margin-bottom: 1.25rem;
    }

    .info-note i { margin-top: 0.1rem; }

    /* 2FA */
    .twofa-toggle-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        margin-bottom: 1.25rem;
    }

    .twofa-toggle-info { flex: 1; }

    .twofa-toggle-label {
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--text-primary);
    }

    .twofa-toggle-desc {
        font-size: 0.8rem;
        color: var(--text-muted);
        margin-top: 0.125rem;
    }

    .toggle-switch {
        position: relative;
        width: 48px;
        height: 26px;
        flex-shrink: 0;
    }

    .toggle-switch input { opacity: 0; width: 0; height: 0; }

    .toggle-slider {
        position: absolute;
        cursor: pointer;
        inset: 0;
        background: var(--border);
        border-radius: 26px;
        transition: 0.3s;
    }

    .toggle-slider::before {
        content: '';
        position: absolute;
        height: 20px;
        width: 20px;
        left: 3px;
        bottom: 3px;
        background: #fff;
        border-radius: 50%;
        transition: 0.3s;
    }

    .toggle-switch input:checked + .toggle-slider { background: var(--accent); }
    .toggle-switch input:checked + .toggle-slider::before { transform: translateX(22px); }

    .qr-placeholder {
        width: 200px;
        height: 200px;
        background: var(--bg-secondary);
        border: 2px dashed var(--border);
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 1.5rem auto;
        color: var(--text-muted);
        font-size: 0.85rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    .qr-placeholder i { font-size: 2rem; opacity: 0.4; }

    .backup-codes {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        margin: 1.25rem 0;
    }

    .backup-code {
        padding: 0.5rem 0.75rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        font-family: monospace;
        font-size: 0.85rem;
        color: var(--text-primary);
        text-align: center;
    }

    .status-indicator {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.25rem 0.625rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 500;
    }

    .status-enabled { background: var(--success-light); color: var(--success); }
    .status-disabled { background: var(--danger-light); color: var(--danger); }

    /* Alert */
    .alert-success {
        background: var(--success-light);
        border: 1px solid rgba(0, 212, 170, 0.3);
        border-radius: var(--radius-md);
        padding: 1rem 1.25rem;
        margin-bottom: 1.5rem;
        color: var(--success);
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 0.625rem;
    }

    @media (max-width: 640px) {
        .form-row { grid-template-columns: 1fr; }
        .security-tabs { overflow-x: auto; }
        .security-tab { white-space: nowrap; padding: 0.75rem 1rem; font-size: 0.82rem; }
        .backup-codes { grid-template-columns: 1fr; }
    }
</style>
@endpush

@section('content')
    <div class="security-page">
        <h1><i class="fas fa-shield-halved"></i> Security</h1>

        @if(session('success'))
            <div class="alert-success">
                <i class="fas fa-check-circle"></i> {{ session('success') }}
            </div>
        @endif

        {{-- Tabs --}}
        <div class="security-tabs">
            <button class="security-tab active" data-tab="password">
                <i class="fas fa-key"></i> Password
            </button>
            <button class="security-tab" data-tab="pin">
                <i class="fas fa-lock"></i> Transaction PIN
            </button>
            <button class="security-tab" data-tab="twofa">
                <i class="fas fa-shield-halved"></i> Two-Factor Auth
            </button>
        </div>

        {{-- Password Tab --}}
        <div class="tab-panel active" id="tab-password">
            <div class="security-section">
                <div class="security-section-header">
                    <i class="fas fa-key"></i> Change Password
                </div>
                <div class="security-section-body">
                    <form method="POST" action="{{ route('escrow.security.password') }}">
                        @csrf

                        <div class="form-group">
                            <label class="form-label" for="current_password">Current Password</label>
                            <div class="password-wrapper">
                                <input type="password" class="form-input" id="current_password" name="current_password" required>
                                <button type="button" class="password-toggle" onclick="togglePassword('current_password')">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                            @error('current_password')
                                <span class="form-error">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label" for="new_password">New Password</label>
                                <div class="password-wrapper">
                                    <input type="password" class="form-input" id="new_password" name="password" required>
                                    <button type="button" class="password-toggle" onclick="togglePassword('new_password')">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                                @error('password')
                                    <span class="form-error">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="password_confirmation">Confirm New Password</label>
                                <div class="password-wrapper">
                                    <input type="password" class="form-input" id="password_confirmation" name="password_confirmation" required>
                                    <button type="button" class="password-toggle" onclick="togglePassword('password_confirmation')">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="password-requirements">
                            <p>Password must contain:</p>
                            <ul>
                                <li id="req-length"><i class="fas fa-circle"></i> At least 8 characters</li>
                                <li id="req-upper"><i class="fas fa-circle"></i> One uppercase letter</li>
                                <li id="req-lower"><i class="fas fa-circle"></i> One lowercase letter</li>
                                <li id="req-number"><i class="fas fa-circle"></i> One number</li>
                                <li id="req-special"><i class="fas fa-circle"></i> One special character (!@#$%^&*)</li>
                            </ul>
                        </div>

                        <div class="form-group" style="margin-top:1rem; padding:1rem; background:var(--bg-secondary, rgba(0,0,0,0.03)); border:1px solid var(--border); border-radius:var(--radius-sm);">
                            <label class="form-label" for="otp">Email Verification Code</label>
                            <div style="display:flex; gap:0.5rem; align-items:stretch;">
                                <input type="text" class="form-input" id="otp" name="otp" maxlength="6" inputmode="numeric" placeholder="6-digit code" required style="flex:1; font-family:monospace; letter-spacing:0.25em;">
                                <button type="button" class="btn btn-secondary" onclick="requestPasswordOtp(this)">
                                    <i class="fas fa-paper-plane"></i> Send Code
                                </button>
                            </div>
                            <small style="display:block; color:var(--text-muted); font-size:0.78rem; margin-top:0.375rem;">A verification code will be sent to your account email. Expires in 10 minutes.</small>
                            @error('otp')<span class="form-error">{{ $message }}</span>@enderror
                        </div>

                        <form id="otpRequestForm" method="POST" action="{{ route('escrow.security.password.otp') }}" style="display:none;">@csrf</form>

                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary"><i class="fas fa-key"></i> Update Password</button>
                        </div>
                    </form>

                    <script>
                        function requestPasswordOtp(btn) {
                            const original = btn.innerHTML;
                            btn.disabled = true;
                            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending...';
                            document.getElementById('otpRequestForm').submit();
                        }
                    </script>
                </div>
            </div>
        </div>

        {{-- Transaction PIN Tab --}}
        <div class="tab-panel" id="tab-pin">
            <div class="security-section">
                <div class="security-section-header">
                    <i class="fas fa-lock"></i> Transaction PIN
                </div>
                <div class="security-section-body">
                    <div class="pin-status {{ auth()->user()->has_pin ?? false ? 'active' : 'inactive' }}">
                        <i class="fas {{ auth()->user()->has_pin ?? false ? 'fa-check-circle' : 'fa-exclamation-circle' }}"></i>
                        <div>
                            <div style="font-size: 0.9rem; font-weight: 500;">
                                PIN Status: {{ auth()->user()->has_pin ?? false ? 'Active' : 'Not Set' }}
                            </div>
                            <div style="font-size: 0.8rem; color: var(--text-muted);">
                                {{ auth()->user()->has_pin ?? false ? 'Your transaction PIN is set and active.' : 'You have not set a transaction PIN yet.' }}
                            </div>
                        </div>
                    </div>

                    <div class="info-note">
                        <i class="fas fa-info-circle"></i>
                        <span>PIN is required for wallet operations including transfers, withdrawals, and escrow releases.</span>
                    </div>

                    <form method="POST" action="{{ route('escrow.security.pin') }}">
                        @csrf

                        @if(auth()->user()->transaction_pin)
                        <div class="form-group">
                            <label class="form-label" for="current_pin">Current PIN</label>
                            <div class="pin-inputs">
                                <input type="password" class="pin-input" maxlength="1" inputmode="numeric" data-current-pin="1" required>
                                <input type="password" class="pin-input" maxlength="1" inputmode="numeric" data-current-pin="2" required>
                                <input type="password" class="pin-input" maxlength="1" inputmode="numeric" data-current-pin="3" required>
                                <input type="password" class="pin-input" maxlength="1" inputmode="numeric" data-current-pin="4" required>
                            </div>
                            <input type="hidden" name="current_pin" id="currentPinValue">
                            @error('current_pin')
                                <span class="form-error" style="text-align: center; display: block;">{{ $message }}</span>
                            @enderror
                        </div>
                        @endif

                        <label class="form-label" style="text-align: center;">Enter 4-digit PIN</label>
                        <div class="pin-inputs">
                            <input type="password" class="pin-input" maxlength="1" inputmode="numeric" data-pin="1" required>
                            <input type="password" class="pin-input" maxlength="1" inputmode="numeric" data-pin="2" required>
                            <input type="password" class="pin-input" maxlength="1" inputmode="numeric" data-pin="3" required>
                            <input type="password" class="pin-input" maxlength="1" inputmode="numeric" data-pin="4" required>
                        </div>
                        <input type="hidden" name="pin" id="pinValue">

                        <label class="form-label" style="text-align: center;">Confirm PIN</label>
                        <div class="pin-inputs">
                            <input type="password" class="pin-input" maxlength="1" inputmode="numeric" data-confirm-pin="1" required>
                            <input type="password" class="pin-input" maxlength="1" inputmode="numeric" data-confirm-pin="2" required>
                            <input type="password" class="pin-input" maxlength="1" inputmode="numeric" data-confirm-pin="3" required>
                            <input type="password" class="pin-input" maxlength="1" inputmode="numeric" data-confirm-pin="4" required>
                        </div>
                        <input type="hidden" name="pin_confirmation" id="pinConfirmValue">

                        @error('pin')
                            <span class="form-error" style="text-align: center; display: block;">{{ $message }}</span>
                        @enderror

                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-lock"></i> {{ auth()->user()->has_pin ?? false ? 'Update PIN' : 'Set PIN' }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Two-Factor Auth Tab --}}
        <div class="tab-panel" id="tab-twofa">
            @include('auth.partials.two-factor-panel', [
                'twofaEnabled' => $user->hasTwoFactorEnabled(),
                'pending2fa'   => $pending2fa ?? null,
                'confirmRoute' => route('escrow.security.2fa.confirm'),
                'disableRoute' => route('escrow.security.2fa.disable'),
                'recoveryRoute'=> route('escrow.security.2fa.recovery'),
            ])
        </div>
    </div>
@endsection

@push('scripts')
<script>
    // Tab switching
    document.querySelectorAll('.security-tab').forEach(tab => {
        tab.addEventListener('click', () => {
            document.querySelectorAll('.security-tab').forEach(t => t.classList.remove('active'));
            document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
            tab.classList.add('active');
            document.getElementById('tab-' + tab.dataset.tab).classList.add('active');
        });
    });

    // Password visibility toggle
    function togglePassword(id) {
        const input = document.getElementById(id);
        const icon = input.parentElement.querySelector('.password-toggle i');
        if (input.type === 'password') {
            input.type = 'text';
            icon.className = 'fas fa-eye-slash';
        } else {
            input.type = 'password';
            icon.className = 'fas fa-eye';
        }
    }

    // Password strength checker
    const newPassword = document.getElementById('new_password');
    if (newPassword) {
        newPassword.addEventListener('input', function() {
            const val = this.value;
            toggleReq('req-length', val.length >= 8);
            toggleReq('req-upper', /[A-Z]/.test(val));
            toggleReq('req-lower', /[a-z]/.test(val));
            toggleReq('req-number', /[0-9]/.test(val));
            toggleReq('req-special', /[!@#$%^&*]/.test(val));
        });
    }

    function toggleReq(id, met) {
        const el = document.getElementById(id);
        if (met) {
            el.classList.add('met');
            el.querySelector('i').className = 'fas fa-check-circle';
        } else {
            el.classList.remove('met');
            el.querySelector('i').className = 'fas fa-circle';
        }
    }

    // PIN input auto-advance
    document.querySelectorAll('.pin-input').forEach(input => {
        input.addEventListener('input', function() {
            if (this.value.length === 1) {
                const next = this.nextElementSibling;
                if (next && next.classList.contains('pin-input')) next.focus();
            }
        });
        input.addEventListener('keydown', function(e) {
            if (e.key === 'Backspace' && !this.value) {
                const prev = this.previousElementSibling;
                if (prev && prev.classList.contains('pin-input')) prev.focus();
            }
        });
    });

    // Collect PIN values before submit
    document.querySelectorAll('form').forEach(form => {
        form.addEventListener('submit', function() {
            const currentPins = document.querySelectorAll('[data-current-pin]');
            const pins = document.querySelectorAll('[data-pin]');
            const confirmPins = document.querySelectorAll('[data-confirm-pin]');
            if (currentPins.length) {
                let currentPin = '';
                currentPins.forEach(p => currentPin += p.value);
                document.getElementById('currentPinValue').value = currentPin;
            }
            if (pins.length) {
                let pin = '';
                pins.forEach(p => pin += p.value);
                document.getElementById('pinValue').value = pin;
            }
            if (confirmPins.length) {
                let confirm = '';
                confirmPins.forEach(p => confirm += p.value);
                document.getElementById('pinConfirmValue').value = confirm;
            }
        });
    });

    /* 2FA setup UI is rendered by the shared auth.partials.two-factor-panel
       partial and brings its own QR-rendering script. */
</script>
@endpush