{# LOGIN MODAL #}
<div id="login-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[100] p-4">
    <div class="modal-backdrop fixed inset-0 bg-black/40 modal-transition z-[99]"></div>
    <div class="modal-content glass-modal p-8 w-full max-w-md modal-content-transition relative z-[100]">
        <button onclick="closeModalAnimation(document.getElementById('login-modal'))" type="button"
            class="absolute top-4 right-4 text-zinc-500 hover:text-white transition-colors">
            <i data-lucide="x" class="h-5 w-5"></i>
        </button>

        <div class="text-center mb-8">
            <h1 class="text-3xl font-extrabold text-white flex items-center justify-center tracking-tight">
                <i data-lucide="git-branch" class="mr-3 h-7 w-7 text-blue-400"></i>
                {{ brand_name }}
            </h1>
            <p class="mt-2 text-zinc-500 text-sm">Sign in to your account</p>
        </div>

        <form id="login-form" class="space-y-5" action="{{ url_for('login') }}" method="POST">
            <div class="space-y-2">
                <label for="login-username"
                    class="block text-xs font-bold uppercase tracking-widest text-zinc-500 ml-1">Username</label>
                <input type="text" id="login-username" name="username" required
                    class="w-full glass-search-input rounded-xl py-3 px-4 text-sm focus:outline-none transition bg-white/5 border border-white/10 text-white placeholder-zinc-500 focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/50">
            </div>

            <div id="login-password-container" class="space-y-2">
                <label for="login-password"
                    class="block text-xs font-bold uppercase tracking-widest text-zinc-500 ml-1">Password</label>
                <input type="password" id="login-password" name="password" required
                    class="w-full glass-search-input rounded-xl py-3 px-4 text-sm focus:outline-none transition bg-white/5 border border-white/10 text-white placeholder-zinc-500 focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/50">
            </div>

            <button type="submit"
                class="w-full glass-button no-hover-lift text-white font-bold py-3 px-4 rounded-xl text-sm mt-6 transition-colors">
                Sign in
            </button>
        </form>

        {% if g.registration_enabled %}
        <p class="mt-6 text-center text-sm text-zinc-500">
            Don't have an account?
            <button type="button"
                onclick="closeModalAnimation(document.getElementById('login-modal')); setTimeout(() => openModalAnimation(document.getElementById('register-modal')), 300)"
                class="font-bold text-blue-400 hover:text-blue-300 transition-colors">
                Register here
            </button>
        </p>
        {% endif %}
    </div>
</div>

{# REGISTER MODAL #}
<div id="register-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[100] p-4">
    <div class="modal-backdrop fixed inset-0 bg-black/40 modal-transition z-[99]"></div>
    <div class="modal-content glass-modal p-8 w-full max-w-md modal-content-transition relative z-[100]">
        <button onclick="closeModalAnimation(document.getElementById('register-modal'))" type="button"
            class="absolute top-4 right-4 text-zinc-500 hover:text-white transition-colors">
            <i data-lucide="x" class="h-5 w-5"></i>
        </button>

        <div class="text-center mb-8">
            <h1 class="text-3xl font-extrabold text-white flex items-center justify-center tracking-tight">
                <i data-lucide="git-merge" class="mr-3 h-7 w-7 text-blue-400"></i>
                Join {{ brand_name }}
            </h1>
            <p class="mt-2 text-zinc-500 text-sm">Create your account</p>
        </div>

        <form id="register-form" class="space-y-5" action="{{ url_for('register') }}" method="POST">
            <div class="space-y-2">
                <label for="register-username"
                    class="block text-xs font-bold uppercase tracking-widest text-zinc-500 ml-1">Username</label>
                <input type="text" id="register-username" name="username" required
                    value="{{ request.form.username if request.form else '' }}"
                    class="w-full glass-search-input rounded-xl py-3 px-4 text-sm focus:outline-none transition bg-white/5 border border-white/10 text-white placeholder-zinc-500 focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/50">
            </div>

            <div id="register-email-container" class="space-y-2">
                <label for="register-email"
                    class="block text-xs font-bold uppercase tracking-widest text-zinc-500 ml-1">Email</label>
                <input type="email" id="register-email" name="email" required
                    value="{{ request.form.email if request.form else '' }}"
                    class="w-full glass-search-input rounded-xl py-3 px-4 text-sm focus:outline-none transition bg-white/5 border border-white/10 text-white placeholder-zinc-500 focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/50">
            </div>

            <div id="register-password-container" class="space-y-2">
                <label for="register-password"
                    class="block text-xs font-bold uppercase tracking-widest text-zinc-500 ml-1">Password</label>
                <input type="password" id="register-password" name="password" required autocomplete="new-password"
                    value="{{ request.form.password if request.form else '' }}"
                    class="w-full glass-search-input rounded-xl py-3 px-4 text-sm focus:outline-none transition bg-white/5 border border-white/10 text-white placeholder-zinc-500 focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/50">
            </div>

            <div id="register-confirm-password-container" class="space-y-2">
                <label for="register-confirm-password"
                    class="block text-xs font-bold uppercase tracking-widest text-zinc-500 ml-1">Confirm
                    Password</label>
                <input type="password" id="register-confirm-password" name="confirm_password" required autocomplete="new-password"
                    value="{{ request.form.password if request.form else '' }}"
                    class="w-full glass-search-input rounded-xl py-3 px-4 text-sm focus:outline-none transition bg-white/5 border border-white/10 text-white placeholder-zinc-500 focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/50">
            </div>

            <button type="submit"
                class="w-full glass-button no-hover-lift text-white font-bold py-3 px-4 rounded-xl text-sm mt-6 transition-colors">
                Create Account
            </button>
        </form>

        <p class="mt-6 text-center text-sm text-zinc-500">
            Already have an account?
            <button type="button"
                onclick="closeModalAnimation(document.getElementById('register-modal')); setTimeout(() => openModalAnimation(document.getElementById('login-modal')), 300)"
                class="font-bold text-blue-400 hover:text-blue-300 transition-colors">
                Sign in
            </button>
        </p>
    </div>
</div>

{# VERIFY 2FA MODAL #}
<div id="verify-2fa-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[100] p-4">
    <div class="modal-backdrop fixed inset-0 bg-black/40 modal-transition z-[99]"></div>
    <div
        class="modal-content glass-modal p-8 w-full max-w-md modal-content-transition relative z-[100] border border-white/10 shadow-3xl text-center">
        <button onclick="closeModalAnimation(document.getElementById('verify-2fa-modal'))" type="button"
            class="absolute top-4 right-4 text-zinc-500 hover:text-white transition-colors z-50">
            <i data-lucide="x" class="h-5 w-5"></i>
        </button>

        <div class="absolute top-0 right-0 p-8 opacity-5 pointer-events-none">
            <i data-lucide="shield-check" class="h-32 w-32 text-blue-400"></i>
        </div>

        <div class="relative z-10 flex flex-col items-center">
            <div
                class="p-4 bg-blue-500/10 rounded-2xl mb-6 shadow-sm border border-blue-500/20 inline-flex items-center justify-center">
                <i data-lucide="lock" class="h-8 w-8 text-blue-400"></i>
            </div>

            <h2 class="text-3xl font-extrabold text-white mb-2 tracking-tight">Two-Factor Auth</h2>
            <p id="verify-2fa-message"
                class="text-xs text-zinc-400 font-bold uppercase tracking-widest leading-relaxed mb-8">
                Verify your identity to proceed.
            </p>

            <form action="{{ url_for('verify_2fa') }}" method="POST" class="w-full flex flex-col items-center"
                id="verify-2fa-form">
                <input type="hidden" name="auth_action" id="verify-2fa-action" value="login">

                <div class="flex gap-2 justify-center mb-8" id="otp-container">
                    <input type="text" maxlength="1" class="otp-input" required autocomplete="off">
                    <input type="text" maxlength="1" class="otp-input" required autocomplete="off">
                    <input type="text" maxlength="1" class="otp-input" required autocomplete="off">
                    <input type="text" maxlength="1" class="otp-input" required autocomplete="off">
                    <input type="text" maxlength="1" class="otp-input" required autocomplete="off">
                    <input type="text" maxlength="1" class="otp-input" required autocomplete="off">
                </div>
                <!-- Hidden input that submits the actual full code -->
                <input type="hidden" name="code" id="full-code" required>

                <button type="submit"
                    class="w-full glass-button no-hover-lift text-white font-bold py-3 px-4 rounded-xl text-sm transition-colors">
                    Verify Code
                </button>

                <div class="mt-6 flex flex-col items-center gap-2">
                    <button type="button"
                        onclick="closeModalAnimation(document.getElementById('verify-2fa-modal')); setTimeout(() => openModalAnimation(document.getElementById('login-modal')), 300)"
                        class="text-[10px] text-zinc-500 font-bold uppercase tracking-widest hover:text-white transition-colors">Return
                        to Login</button>
                    <!-- Provide a cancel route to clear the session if they want -->
                    <a href="{{ url_for('cancel_2fa') }}"
                        class="text-[10px] text-red-500 font-bold uppercase tracking-widest hover:text-red-400 transition-colors mt-2">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</div>


<style>
    .hidden-field {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
    }

    .visible-field {
        max-height: 100px;
        opacity: 1;
        transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
    }

    /* Modern styling for the 2FA input */
    .otp-input {
        width: 3rem;
        height: 3.5rem;
        text-align: center;
        font-size: 1.5rem;
        font-weight: bold;
        background: rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0.75rem;
        color: white;
        transition: all 0.2s;
    }

    .otp-input:focus {
        outline: none;
        border-color: rgba(59, 130, 246, 0.5);
        /* blue-500 */
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

    /* Hide generic number arrows */
    .otp-input::-webkit-outer-spin-button,
    .otp-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
</style>

<script>
    window.start2faPendingSocket = function (channelToken) {
        if (!channelToken || typeof io === 'undefined') return;
        window._2faActiveChannelToken = channelToken;
        if (!window._appSocket) {
            window._appSocket = io({ transports: ['polling'] });
        }
        var sock = window._appSocket;
        if (!sock._opengit2faJoinHooked) {
            sock._opengit2faJoinHooked = true;
            sock.on('connect', function () {
                if (window._2faActiveChannelToken) {
                    sock.emit('join_2fa_pending', { channel_token: window._2faActiveChannelToken });
                }
            });
        }
        if (sock.connected) {
            sock.emit('join_2fa_pending', { channel_token: channelToken });
        }
        sock.off('2fa_redeem_ready');
        sock.on('2fa_redeem_ready', async function (payload) {
            var rt = payload && payload.redeem_token;
            if (!rt) return;
            try {
                var r = await fetch('/api/2fa/redeem', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
                    credentials: 'same-origin',
                    body: JSON.stringify({ redeem_token: rt })
                });
                var d = await r.json().catch(function () { return {}; });
                if (d.success && d.redirect) {
                    window.location.href = d.redirect;
                } else if (window.createToast) {
                    window.createToast(Date.now(), 'Error', d.error || 'Could not complete sign-in.', false);
                }
            } catch (e) {
                if (window.createToast) window.createToast(Date.now(), 'Error', 'Network error.', false);
            }
        });
    };

    document.addEventListener('DOMContentLoaded', () => {
        // After email magic-link login/register, strip ?session_sync=1 and notify other tabs to reload (drops stale 2FA modal).
        try {
            const p = new URLSearchParams(window.location.search);
            if (p.get('session_sync') === '1') {
                localStorage.setItem('opengit_2fa_done', String(Date.now()));
                p.delete('session_sync');
                const s = p.toString();
                history.replaceState({}, '', window.location.pathname + (s ? '?' + s : '') + window.location.hash);
            }
        } catch (e) {}
        window.addEventListener('storage', function (e) {
            if (e.key !== 'opengit_2fa_done' || !e.newValue) return;
            const fa = document.getElementById('verify-2fa-modal');
            if (fa && !fa.classList.contains('hidden')) {
                window.location.reload();
            }
        });

        // --- OTP Logic ---
        const inputs = document.querySelectorAll('.otp-input');
        const hiddenCode = document.getElementById('full-code');
        const form = document.getElementById('verify-2fa-form');

        // --- Form Submission Overrides (AJAX) ---
        async function handleAuthSubmit(e, formElement) {
            e.preventDefault();
            const formData = new FormData(formElement);

            // Add custom header so backend knows we want JSON back
            const originalButton = formElement.querySelector('button[type="submit"]');
            const originalText = originalButton.innerHTML;
            originalButton.innerHTML = `<i data-lucide="loader-2" class="h-4 w-4 animate-spin text-white"></i>`;
            originalButton.disabled = true;
            if (lucide) lucide.createIcons();

            try {
                const response = await fetch(formElement.getAttribute('action'), {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'Accept': 'application/json'
                    }
                });

                const data = await response.json();

                if (data.success) {
                    if (data.action === '2fa') {
                        // Close current modal, open 2FA modal
                        const currentModal = formElement.closest('.fixed.inset-0:not(.hidden)');
                        if (currentModal) closeModalAnimation(currentModal);

                        setTimeout(() => {
                            const faModal = document.getElementById('verify-2fa-modal');
                            if (faModal) {
                                openModalAnimation(faModal);
                                document.getElementById('verify-2fa-action').value = data.type;
                                document.getElementById('verify-2fa-message').innerText = data.message || 'Verification required.';
                                if (data.channel_token && typeof window.start2faPendingSocket === 'function') {
                                    window.start2faPendingSocket(data.channel_token);
                                }
                            }
                        }, 300);
                    } else if (data.redirect) {
                        window.location.href = data.redirect;
                    } else {
                        window.location.reload();
                    }
                } else {
                    // Show error toast
                    if (window.createToast) {
                        window.createToast(Date.now(), 'Error', data.error || 'Something went wrong.', false);
                    } else {
                        alert(data.error);
                    }
                }
            } catch (error) {
                if (window.createToast) {
                    window.createToast(Date.now(), 'Error', 'Network error occurred.', false);
                }
            } finally {
                originalButton.innerHTML = originalText;
                originalButton.disabled = false;
            }
        }

        const loginForm = document.getElementById('login-form');
        if (loginForm) {
            loginForm.addEventListener('submit', (e) => handleAuthSubmit(e, loginForm));
        }

        const registerForm = document.getElementById('register-form');
        if (registerForm) {
            registerForm.addEventListener('submit', (e) => handleAuthSubmit(e, registerForm));
        }

        if (inputs.length && form) {
            inputs.forEach((input, index) => {
                input.addEventListener('input', (e) => {
                    // Numbers only
                    e.target.value = e.target.value.replace(/[^0-9]/g, '');
                    if (e.target.value && index < inputs.length - 1) {
                        inputs[index + 1].focus();
                    }
                    updateHiddenCode();
                });

                input.addEventListener('keydown', (e) => {
                    if (e.key === 'Backspace' && !e.target.value && index > 0) {
                        inputs[index - 1].focus();
                    }
                });

                input.addEventListener('paste', (e) => {
                    e.preventDefault();
                    const pasteData = e.clipboardData.getData('text').replace(/[^0-9]/g, '').slice(0, inputs.length);
                    pasteData.split('').forEach((char, i) => {
                        inputs[i].value = char;
                    });
                    if (pasteData.length > 0) {
                        inputs[Math.min(pasteData.length, inputs.length - 1)].focus();
                    }
                    updateHiddenCode();
                });
            });

            function updateHiddenCode() {
                hiddenCode.value = Array.from(inputs).map(i => i.value).join('');
            }

            form.addEventListener('submit', (e) => {
                updateHiddenCode();
                if (hiddenCode.value.length !== 6) {
                    e.preventDefault();
                    if (window.createToast) {
                        window.createToast(Date.now(), 'Incomplete', 'Please fill all 6 digits.', false);
                    } else {
                        alert('Please fill all 6 digits.');
                    }
                    return;
                }

                // Submit via AJAX to handle toasts without closing modal
                handleAuthSubmit(e, form);
            });
        }

        // --- Auto-open 2FA modal if session requires it ---
        {% if session.get('pending_registration') %}
        setTimeout(() => {
            const faModal = document.getElementById('verify-2fa-modal');
            if (faModal) {
                openModalAnimation(faModal);
                document.getElementById('verify-2fa-action').value = 'register';
                document.getElementById('verify-2fa-message').innerText = 'We\'ve sent a verification link and 6-digit code to your email. Keep this page open — after you confirm the link, you\'ll be signed in here.';
                {% if session.get('2fa_channel_token') %}
                if (typeof window.start2faPendingSocket === 'function') {
                    window.start2faPendingSocket({{ session.get('2fa_channel_token')|tojson }});
                }
                {% endif %}
            }
        }, 300);
        {% elif session.get('pending_login_user_db_id') %}
        setTimeout(() => {
            const faModal = document.getElementById('verify-2fa-modal');
            if (faModal) {
                openModalAnimation(faModal);
                document.getElementById('verify-2fa-action').value = 'login';
                document.getElementById('verify-2fa-message').innerText = 'New device: use the link or code in your email. Keep this page open — after you confirm the link, you\'ll be signed in here.';
                {% if session.get('2fa_channel_token') %}
                if (typeof window.start2faPendingSocket === 'function') {
                    window.start2faPendingSocket({{ session.get('2fa_channel_token')|tojson }});
                }
                {% endif %}
            }
        }, 300);
        {% endif %}
    });

    // Global handling for modal backdrops (backdrop is direct child of modal container)
    document.addEventListener('click', (e) => {
        if (e.target.classList.contains('modal-backdrop')) {
            const modal = e.target.parentElement;
            if (modal && modal.id) {
                if (modal.id === 'verify-2fa-modal') return;
                // Welcome and Terms modals cannot be closed by backdrop in onboarding
                if (modal.id === 'welcome-modal') return;
                if (modal.id === 'terms-of-service-modal' && modal.dataset.viewOnly !== '1') return;
                closeModalAnimation(modal);
            }
        }
    });
</script>