{% extends "base.html" %}

{% block title %}Sign In - 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">Sign In to 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>

                <!-- Login Form -->
                <form id="loginForm" autocomplete="on">
                    <div class="rc-form-group">
                        <div class="rc-label">Email</div>
                        <input type="email" class="rc-input" id="loginEmail" 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="loginPassword" placeholder="Enter your password" required autocomplete="current-password">
                    </div>
                    <button type="submit" class="rc-btn-block" id="loginBtn">
                        <i class="fas fa-sign-in-alt"></i> Sign In
                    </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">
                    <a href="/register" class="rc-form-link">Don't have an account? Register</a>
                    <button class="rc-form-link" id="forgotBtn">Forgot password?</button>
                </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 loginForm = document.getElementById('loginForm');
    const discordBtn = document.getElementById('discordBtn');
    const forgotBtn = document.getElementById('forgotBtn');
    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;
    }

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

        const email = document.getElementById('loginEmail').value.trim();
        const password = document.getElementById('loginPassword').value;

        if (!email || !password) {
            showError('Please fill in all fields.');
            return;
        }

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

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

        if (error) {
            showError(error.message);
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-sign-in-alt"></i> Sign In';
        } else {
            if (window._isDesktopFlow) {
                showSuccess('Login successful! Returning to app...');
                const session = data && data.session;
                setTimeout(() => { _redirectToDesktop(session); }, 400);
            } else {
                showSuccess('Login successful! Redirecting...');
                setTimeout(() => { window.location.href = '/'; }, 800);
            }
        }
    });

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

    forgotBtn.addEventListener('click', async () => {
        clearMessages();
        const email = document.getElementById('loginEmail').value.trim();
        if (!email) {
            showError('Enter your email address first, then click "Forgot password?"');
            return;
        }

        forgotBtn.disabled = true;
        forgotBtn.textContent = 'Sending...';

        const { error } = await rcResetPassword(email);
        if (error) {
            showError(error.message);
        } else {
            showSuccess('Password reset email sent! Check your inbox.');
        }

        forgotBtn.disabled = false;
        forgotBtn.textContent = 'Forgot password?';
    });

    // 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 %}