{% extends "layouts/base.html" %}
{% block title %}Register - UdeS team manager{% endblock %}
{% block auth_content %}
<form method="POST" action="{{ url_for('auth.register') }}" class="auth-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>

    <!-- ==================== Personal Info ==================== -->
    <h4 class="section-title"><i class="fas fa-id-card"></i> Personal Information</h4>
    <div class="form-group">
        <label for="full_name"><i class="fas fa-id-card"></i> Full Name</label>
        <input type="text" id="full_name" name="full_name" placeholder="Enter your full name"
               value="{{ form_data.get('full_name', '') }}" required>
    </div>
    <div class="form-group">
        <label for="username"><i class="fas fa-user"></i> Username</label>
        <input type="text" id="username" name="username" placeholder="Choose a username"
               value="{{ form_data.get('username', '') }}" required>
    </div>
    <div class="form-group">
        <label for="email"><i class="fas fa-envelope"></i> Email</label>
        <input type="email" id="email" name="email" placeholder="Enter your email"
               value="{{ form_data.get('email', '') }}" required>
    </div>
    <div class="form-group">
        <label for="phone"><i class="fas fa-phone"></i> Phone (Optional)</label>
        <input type="tel" id="phone" name="phone" placeholder="Enter your phone number"
               value="{{ form_data.get('phone', '') }}">
    </div>

    <hr class="section-divider">

    <!-- ==================== Discord Connection (before games) ==================== -->
    <h4 class="section-title"><i class="fab fa-discord"></i> Discord Connection</h4>
    <p class="text-muted small">Connect your Discord account to automatically fill your gamertags from your connected game accounts.</p>

    {% set discord_data = session.get('discord_oauth') %}
    {% if discord_data %}
    <div class="form-group discord-connected">
        <div class="discord-connection-card">
            <div class="discord-user-display">
                {% if discord_data.avatar %}
                {% set avatar_url = 'https://cdn.discordapp.com/avatars/' + discord_data.id|string + '/' + discord_data.avatar + '.png?size=64' %}
                <img src="{{ avatar_url }}" alt="Discord Avatar" class="discord-avatar" width="48" height="48">
                {% else %}
                <div class="discord-avatar-placeholder">
                    <i class="fab fa-discord"></i>
                </div>
                {% endif %}
                <div class="discord-user-info">
                    <span class="discord-username">{{ discord_data.username }}</span>
                    <span class="discord-connected-label text-success">
                        <i class="fas fa-check-circle"></i> Connected
                    </span>
                </div>
            </div>
            <a href="{{ url_for('auth.discord_login') }}" class="btn btn-sm btn-outline discord-reconnect" onclick="saveFormDraft()">
                <i class="fas fa-sync-alt"></i> Reconnect
            </a>
        </div>
        <input type="hidden" name="discord_username" value="{{ discord_data.username }}">
        <input type="hidden" name="discord_user_id" value="{{ discord_data.id }}">
        <small class="form-text text-success">
            <i class="fas fa-check-circle"></i> Discord connected. Game connections have been used to pre-fill your profile below.
        </small>
    </div>
    {% else %}
    <div class="form-group discord-connect-section">
        <a href="{{ url_for('auth.discord_login') }}" class="btn btn-discord btn-block" onclick="saveFormDraft()">
            <i class="fab fa-discord"></i> Connect Discord Account
        </a>
        <small class="form-text text-muted">Connect to pre-fill your gamertags from Steam, Battle.net, Xbox, etc.</small>
    </div>
    <div class="form-group">
        <label for="discord_username"><i class="fab fa-discord"></i> Discord Username (Manual)</label>
        <input type="text" id="discord_username" name="discord_username" placeholder="e.g. YourName"
               value="{{ form_data.get('discord_username', '') }}">
    </div>
    {% endif %}

    <hr class="section-divider">

    <!-- ==================== E-Sports Profile ==================== -->
    <h4 class="section-title"><i class="fas fa-gamepad"></i> E-Sports Profile</h4>
    <p class="text-muted small">Set up your competitive gaming profile for tryouts.</p>

    <div class="form-group">
        <label><i class="fas fa-headset"></i> Games You Play</label>
        <div class="checkbox-grid">
            {% set selected_games = form_data.get('games', []) %}
            {% set auto_select = session.get('discord_oauth', {}).get('auto_select_games', []) %}
            {% for game in esport_games %}
            {% set is_checked = game in selected_games or (not form_data and game in auto_select) %}
            <label class="checkbox-label">
                <input type="checkbox" name="games" value="{{ game }}"
                       {% if is_checked %}checked{% endif %}
                       onchange="toggleGamertagInput(this)">
                <span>{{ game }}</span>
            </label>
            {% endfor %}
        </div>
        <small class="form-text text-muted">Select all games you're signing in for.</small>
    </div>

    <!-- Gamertag fields per game -->
    {% set discord_suggestions = session.get('discord_oauth', {}).get('gamertag_suggestions', {}) %}
    {% for game in esport_games %}
    {% set game_id = game|replace(' ', '_') %}
    {% set form_gamertag = form_data.get('gamertag_' ~ game, '') if form_data else '' %}
    {% set suggested = discord_suggestions.get(game, '') %}
    {% set gamertag_val = form_gamertag if form_gamertag else suggested %}
    {% set game_checked = (form_data and game in selected_games) or (not form_data and game in auto_select) %}
    {% set is_visible = gamertag_val or game_checked %}
    <div class="form-group gamertag-group" id="gamertag_group_{{ game_id }}"
         style="{% if is_visible %}display:block{% else %}display:none{% endif %}">
        <label for="gamertag_{{ game }}"><i class="fas fa-gamepad"></i> {{ game }} Gamertag</label>
        <input type="text" id="gamertag_{{ game }}" name="gamertag_{{ game }}"
               placeholder="Enter your {{ game }} username"
               value="{{ gamertag_val }}">
        <small class="form-text text-muted">
            Your in-game name for {{ game }}.
            {% if suggested and not form_gamertag %}
            <span class="text-success">Pre-filled from Discord connections.</span>
            {% endif %}
        </small>
    </div>
    {% endfor %}

    <div class="form-group">
        <label for="league_os_profile"><i class="fas fa-link"></i> League OS Connection (Optional)</label>
        <input type="text" id="league_os_profile" name="league_os_profile"
               placeholder="League OS profile link or ID"
               value="{{ form_data.get('league_os_profile', '') }}">
        <small class="form-text text-muted">Connect your League OS profile for organized play.</small>
    </div>

    <hr class="section-divider">
    <h4 class="section-title"><i class="fas fa-shield-alt"></i> Security</h4>
    <div class="form-group">
        <label for="password"><i class="fas fa-lock"></i> Password</label>
        <input type="password" id="password" name="password" placeholder="Create a password"
               required minlength="6">
    </div>
    <div class="form-group">
        <label for="confirm_password"><i class="fas fa-check-circle"></i> Confirm Password</label>
        <input type="password" id="confirm_password" name="confirm_password" placeholder="Confirm your password"
               required>
    </div>

    <div class="form-group">
        <label for="captcha_answer"><i class="fas fa-calculator"></i> {{ captcha.question }}</label>
        <input type="number" id="captcha_answer" name="captcha_answer" placeholder="Answer" required autocomplete="off">
    </div>

    <button type="submit" class="btn btn-primary btn-block">Create Account</button>
    <p class="auth-link">Already have an account? <a href="{{ url_for('auth.login') }}">Sign in</a></p>
</form>

<script>
// Toggle gamertag input visibility when a game checkbox is checked/unchecked
function toggleGamertagInput(checkbox) {
    var game = checkbox.value.replace(/ /g, '_');
    var group = document.getElementById('gamertag_group_' + game);
    if (group) {
        group.style.display = checkbox.checked ? 'block' : 'none';
    }
}

// Save form draft to sessionStorage before navigating to Discord OAuth
function saveFormDraft() {
    var draft = {};
    var form = document.querySelector('.auth-form');
    if (!form) return;
    var inputs = form.querySelectorAll('input, select, textarea');
    inputs.forEach(function(input) {
        if (!input.name) return;
        if (input.type === 'checkbox') {
            if (!draft[input.name]) draft[input.name] = [];
            if (input.checked) draft[input.name].push(input.value);
        } else if (input.type === 'password') {
            // Never save passwords
        } else {
            draft[input.name] = input.value;
        }
    });
    sessionStorage.setItem('register_form_draft', JSON.stringify(draft));
}

// Restore form draft from sessionStorage on page load
function restoreFormDraft() {
    var saved = sessionStorage.getItem('register_form_draft');
    if (!saved) return;
    try {
        var draft = JSON.parse(saved);
        var hasServerData = document.querySelector('.auth-form input[name="full_name"]').value !== '';
        if (hasServerData) return;
        for (var key in draft) {
            if (key === 'games') {
                var values = draft[key];
                var checkboxes = document.querySelectorAll('input[name="games"]');
                checkboxes.forEach(function(cb) {
                    cb.checked = values.indexOf(cb.value) !== -1;
                    toggleGamertagInput(cb);
                });
            } else if (key === 'csrf_token' || key === 'captcha_answer' || key.indexOf('password') !== -1) {
                // Skip CSRF token, CAPTCHA, and passwords
            } else {
                var input = document.querySelector('input[name="' + key + '"], textarea[name="' + key + '"]');
                if (input) input.value = draft[key];
            }
        }
    } catch(e) {
        // Invalid JSON, ignore
    }
}

// Clear draft on successful form submission
document.querySelector('.auth-form').addEventListener('submit', function() {
    sessionStorage.removeItem('register_form_draft');
});

// On page load, ensure gamertag groups match checkbox state and restore draft
document.addEventListener('DOMContentLoaded', function() {
    restoreFormDraft();
    var checkboxes = document.querySelectorAll('input[name="games"]');
    checkboxes.forEach(function(checkbox) {
        toggleGamertagInput(checkbox);
    });
});
</script>

<style>
/* Discord Connection Card */
.discord-connection-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #2f3136;
    border: 1px solid #40444b;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 4px;
}
.discord-user-display {
    display: flex;
    align-items: center;
    gap: 12px;
}
.discord-avatar {
    border-radius: 50%;
    border: 2px solid #5865F2;
}
.discord-avatar-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #5865F2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
}
.discord-user-info {
    display: flex;
    flex-direction: column;
}
.discord-username {
    font-weight: 600;
    font-size: 15px;
    color: #fff;
}
.discord-connected-label {
    font-size: 12px;
    font-weight: 500;
}
.discord-connect-section {
    background: #2f3136;
    border: 1px dashed #5865F2;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}
.discord-connect-section label {
    display: block;
    margin-bottom: 8px;
}
.btn-discord {
    background-color: #5865F2;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s;
    width: 100%;
}
.btn-discord:hover {
    background-color: #4752C4;
    color: #fff;
}
.btn-outline {
    background: transparent;
    color: #5865F2;
    border: 1px solid #5865F2;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background-color 0.2s;
    white-space: nowrap;
}
.btn-outline:hover {
    background-color: #5865F2;
    color: #fff;
}
.discord-reconnect {
    font-size: 11px;
}
.btn-sm {
    padding: 4px 8px;
    font-size: 12px;
}
.gamertag-group {
    margin-bottom: 12px;
}
.gamertag-group label {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
}
.text-success {
    color: #57F287 !important;
}
</style>
{% endblock %}