{% extends "base.html" %}

{% block title %}Register - PaddocLabs{% endblock %}

{% block content %}

    <div class="rc-hub-card rc-hub-card-sm rc-fade-in">
        <div class="glass-card">
            <div class="rc-card-header">
                <div style="margin-bottom:16px;">
                    <img src="/static/images/paddoclabs_logo_esteso_w.png" alt="PaddocLabs" style="max-width:200px;height:auto;filter:drop-shadow(0 4px 20px rgba(241,90,36,0.3));animation:logoGlow 3s ease-in-out infinite;margin:0 auto;">
                </div>
                <div class="rc-card-subtitle">Create Your Account</div>
            </div>
            <div class="rc-card-body">
                <!-- Error / Success messages -->
                <div class="rc-form-error" id="authError">
                    <i class="fas fa-exclamation-circle"></i>
                    <span id="authErrorMsg"></span>
                </div>
                <div class="rc-form-success" id="authSuccess">
                    <i class="fas fa-check-circle"></i>
                    <span id="authSuccessMsg"></span>
                </div>

                <!-- Register Form -->
                <form id="registerForm" autocomplete="on">
                    <div class="rc-form-group">
                        <div class="rc-label">Username</div>
                        <input type="text" class="rc-input" id="regUsername" placeholder="Choose a username" required autocomplete="username" minlength="3" maxlength="20">
                    </div>
                    <div class="rc-form-group">
                        <div class="rc-label">Email</div>
                        <input type="email" class="rc-input" id="regEmail" placeholder="your@email.com" required autocomplete="email">
                    </div>
                    <div class="rc-form-group">
                        <div class="rc-label">Password</div>
                        <input type="password" class="rc-input" id="regPassword" placeholder="Min. 8 characters" required autocomplete="new-password" minlength="8">
                    </div>
                    <div class="rc-form-group">
                        <div class="rc-label">Confirm Password</div>
                        <input type="password" class="rc-input" id="regConfirmPassword" placeholder="Repeat your password" required autocomplete="new-password">
                    </div>
                    <button type="submit" class="rc-btn-block" id="registerBtn">
                        <i class="fas fa-user-plus"></i> Create Account
                    </button>
                </form>

                <div class="rc-separator"><span>or</span></div>

                <button class="rc-btn-discord" id="discordBtn">
                    <i class="fab fa-discord"></i> Continue with Discord
                </button>

                <div class="rc-form-links" style="justify-content:center;">
                    <a href="/login" class="rc-form-link">Already have an account? Sign In</a>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script src="/static/js/supabase-auth.js"></script>
<script>
    const registerForm = document.getElementById('registerForm');
    const discordBtn = document.getElementById('discordBtn');
    const errorDiv = document.getElementById('authError');
    const errorMsg = document.getElementById('authErrorMsg');
    const successDiv = document.getElementById('authSuccess');
    const successMsg = document.getElementById('authSuccessMsg');

    function showError(msg) {
        errorDiv.classList.add('visible');
        errorMsg.textContent = msg;
        successDiv.classList.remove('visible');
    }

    function showSuccess(msg) {
        successDiv.classList.add('visible');
        successMsg.textContent = msg;
        errorDiv.classList.remove('visible');
    }

    function clearMessages() {
        errorDiv.classList.remove('visible');
        successDiv.classList.remove('visible');
    }

    // ----------------------------------------------------------------
    // Desktop callback detection
    // ----------------------------------------------------------------
    (function() {
        var _params = new URLSearchParams(window.location.search);
        window._desktopCallback = '';
        window._desktopState    = '';
        window._isDesktopFlow   = false;
        var cb = _params.get('desktop_callback') || '';
        var st = _params.get('state') || '';
        if (cb) {
            try {
                var _cbUrl = new URL(cb);
                var _host  = _cbUrl.hostname;
                if (_host === '127.0.0.1' || _host === 'localhost') {
                    window._desktopCallback = cb;
                    window._desktopState    = st;
                    window._isDesktopFlow   = true;
                }
            } catch(e) { /* malformed URL — ignore */ }
        }
    })();

    function _redirectToDesktop(session) {
        var at  = (session && session.access_token)  || '';
        var rt  = (session && session.refresh_token) || '';
        var url = window._desktopCallback
            + '?access_token='  + encodeURIComponent(at)
            + '&refresh_token=' + encodeURIComponent(rt)
            + '&state='         + encodeURIComponent(window._desktopState);
        window.location.href = url;
    }

    registerForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        clearMessages();

        const username = document.getElementById('regUsername').value.trim();
        const email = document.getElementById('regEmail').value.trim();
        const password = document.getElementById('regPassword').value;
        const confirmPassword = document.getElementById('regConfirmPassword').value;

        const validation = validateRegistration(username, email, password, confirmPassword);
        if (!validation.valid) {
            showError(validation.errors.join(' '));
            return;
        }

        const btn = document.getElementById('registerBtn');
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Creating account...';

        const { data, error } = await rcSignUp(email, password, username);

        if (error) {
            showError(error.message);
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-user-plus"></i> Create Account';
        } else if (data.user && !data.session) {
            // Email verification required — cannot redirect to desktop yet.
            // Show message regardless of whether this is a desktop flow.
            showSuccess('Account created! Check your email to verify your address, then open the app again to log in.');
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-user-plus"></i> Create Account';
        } else {
            // Session available immediately (email confirmation disabled in Supabase)
            if (window._isDesktopFlow) {
                showSuccess('Account created! Returning to app...');
                const session = data && data.session;
                setTimeout(() => { _redirectToDesktop(session); }, 400);
            } else {
                showSuccess('Account created! Redirecting...');
                setTimeout(() => { window.location.href = '/'; }, 800);
            }
        }
    });

    discordBtn.addEventListener('click', async () => {
        clearMessages();
        const { error } = await rcSignInWithDiscord();
        if (error) showError(error.message);
    });

    // If already logged in, behavior depends on flow:
    //  - desktop flow: immediately return tokens to the desktop app
    //  - web flow: stay on the page (user may want to switch account or logout via navbar)
    document.addEventListener('DOMContentLoaded', async () => {
        const session = await rcGetSession();
        if (session && window._isDesktopFlow) {
            _redirectToDesktop(session);
        }
    });
</script>
{% endblock %}