<!--
Copyright (C) 2026 Stefy Lanza <stefy@nexlab.net>

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.
-->
{% extends "base.html" %}

{% block title %}Sign Up - AISBF{% endblock %}

{% block content %}
<div style="max-width: 500px; margin: 50px auto;">
    <h2 style="margin-bottom: 30px; text-align: center;" data-i18n="signup_page.title">Create Account</h2>
    
    {% if error %}
    <div class="alert alert-error">{{ error }}</div>
    {% endif %}
    
    {% if success %}
    <div class="alert alert-success">{{ success }}</div>
    {% else %}
    <form method="POST" action="{{ url_for(request, '/dashboard/signup') }}">
        <div class="form-group">
            <label for="username" data-i18n="signup_page.username">Username</label>
            <input type="text" id="username" name="username" required autofocus
                   pattern="[a-zA-Z0-9_.-]+"
                   title="Username can only contain letters, numbers, underscores, hyphens, and dots"
                   minlength="3" maxlength="50">
            <small style="color: #666; display: block; margin-top: 5px;" data-i18n="signup_page.username_hint">
                3-50 characters, letters, numbers, underscores, hyphens, and dots only
            </small>
        </div>
        
        <div class="form-group">
            <label for="email" data-i18n="signup_page.email">Email Address</label>
            <input type="email" id="email" name="email" required>
            <small style="color: #666; display: block; margin-top: 5px;" data-i18n="signup_page.email_hint">
                You will receive a verification email at this address
            </small>
        </div>
        
        <div class="form-group">
            <label for="password" data-i18n="signup_page.password">Password</label>
            <input type="password" id="password" name="password" required 
                   minlength="8"
                   pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}"
                   title="Password must be at least 8 characters and contain at least one uppercase letter, one lowercase letter, and one number">
            <small style="color: #666; display: block; margin-top: 5px;" data-i18n="signup_page.password_hint">
                At least 8 characters with uppercase, lowercase, and numbers
            </small>
        </div>
        
        <div class="form-group">
            <label for="confirm_password" data-i18n="signup_page.confirm_password">Confirm Password</label>
            <input type="password" id="confirm_password" name="confirm_password" required>
        </div>
        
        <div class="form-group">
            <label style="display: flex; align-items: center; cursor: pointer;">
                <input type="checkbox" id="terms" name="terms" required style="width: auto; margin-right: 10px;">
                I agree to the Terms of Service and Privacy Policy
            </label>
        </div>
        
        <button type="submit" class="btn" style="width: 100%;" data-i18n="signup_page.submit">Create Account</button>
        
        <div style="text-align: center; margin-top: 20px;">
            <p><span data-i18n="signup_page.have_account">Already have an account?</span> <a href="{{ url_for(request, '/dashboard/login') }}" style="color: var(--color-link);" data-i18n="signup_page.login">Login here</a></p>
        </div>
    </form>

{% if config.oauth2 and ((config.oauth2.google and config.oauth2.google.enabled) or (config.oauth2.github and config.oauth2.github.enabled)) %}
    <div style="margin: 25px 0; text-align: center; position: relative;">
        <hr style="border: none; border-top: 1px solid #0f3460; margin: 0;">
        <span style="background: var(--bg-panel); padding: 0 15px; position: relative; top: -13px; color: var(--color-muted);">or sign up with</span>
    </div>
    
    <div style="display: flex; flex-direction: column; gap: 12px;">
        {% if config.oauth2.google and config.oauth2.google.enabled %}
        <button onclick="openOAuthPopup('/auth/oauth2/google')" style="display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--bg-page); color: var(--color-text); font-weight: 500; text-decoration: none; transition: background 0.2s; cursor: pointer; width: 100%;">
            <svg viewBox="0 0 24 24" width="20" height="20">
                <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
            </svg>
            Sign up with Google
        </button>
        {% endif %}
        
        {% if config.oauth2.github and config.oauth2.github.enabled %}
        <button onclick="openOAuthPopup('/auth/oauth2/github')" style="display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border: 1px solid var(--color-border); border-radius: 4px; background: #24292e; color: #ffffff; font-weight: 500; text-decoration: none; transition: background 0.2s; cursor: pointer; width: 100%;">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
            </svg>
            Sign up with GitHub
        </button>
        {% endif %}
    </div>
{% endif %}
    {% endif %}
</div>

<script>
// Client-side password validation
document.querySelector('form')?.addEventListener('submit', function(e) {
    const password = document.getElementById('password').value;
    const confirmPassword = document.getElementById('confirm_password').value;
    
    const check = (msg) => { e.preventDefault(); showAlert(msg, 'Validation Error', '⚠️', 'warn'); return false; };
    
    if (password !== confirmPassword) return check('Passwords do not match!');
    if (password.length < 8) return check('Password must be at least 8 characters long!');
    if (!/[a-z]/.test(password)) return check('Password must contain at least one lowercase letter!');
    if (!/[A-Z]/.test(password)) return check('Password must contain at least one uppercase letter!');
    if (!/\d/.test(password)) return check('Password must contain at least one number!');
    
    return true;
});

// OAuth2 Popup Handling
function openOAuthPopup(url) {
    // Add popup parameter to URL
    const separator = url.includes('?') ? '&' : '?';
    const popupUrl = url + separator + 'popup=1';

    // Calculate popup position (center screen)
    const width = 500;
    const height = 650;
    const left = (window.innerWidth / 2) - (width / 2);
    const top = (window.innerHeight / 2) - (height / 2);

    // Open popup window
    const popup = window.open(
        popupUrl,
        'OAuth2 Authentication',
        `width=${width},height=${height},top=${top},left=${left},resizable=no,scrollbars=yes,status=no`
    );
    
    // Listen for popup messages
    const messageListener = function(event) {
        if (event.data.type === 'oauth2_complete') {
            // Close popup
            popup.close();
            
            // Remove listener
            window.removeEventListener('message', messageListener);
            
            // Redirect to dashboard
            window.location.href = event.data.redirect_url || '/dashboard';
        } else if (event.data.type === 'oauth2_error') {
            // Close popup
            popup.close();
            
            // Remove listener
            window.removeEventListener('message', messageListener);
            
            // Show error
            showAlert(event.data.error || 'Authentication failed', 'Authentication Error', '❌', 'danger');
        }
    };
    
    window.addEventListener('message', messageListener);
    
    // Fallback if popup is blocked or closed manually
    const popupCheck = setInterval(function() {
        if (popup.closed) {
            clearInterval(popupCheck);
            window.removeEventListener('message', messageListener);
        }
    }, 500);
}
</script>
{% endblock %}
