{% extends 'auth/base.html' %}
{% load static %}

{% block title %}Register - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
    .register-container {
        min-height: 100vh;
        background: linear-gradient(135deg, var(--primary-color, #667eea) 0%, var(--secondary-color, #764ba2) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 1rem;
        position: relative;
        overflow: hidden;
    }
    
    .register-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
        opacity: 0.3;
    }
    
    .register-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
        width: 100%;
        max-width: 650px;
        position: relative;
        z-index: 1;
        animation: slideUp 0.8s ease-out;
    }
    
    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .logo-container {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .logo-container i {
        color: var(--primary-color, #667eea);
        margin-bottom: 1rem;
    }
    
    .logo-container h2 {
        color: #2d3748;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    
    .logo-container p {
        color: #6c757d;
        margin: 0;
    }
    
    .form-floating {
        position: relative;
        margin-bottom: 1.5rem;
    }
    
    .form-floating > .form-control {
        height: 3.5rem;
        padding: 1rem 0.75rem;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.9);
        transition: all 0.3s ease;
    }
    
    .form-floating > .form-control:focus {
        border-color: var(--primary-color, #667eea);
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        background: rgba(255, 255, 255, 1);
    }
    
    .form-floating > label {
        color: #6c757d;
        font-weight: 500;
    }
    
    .btn-register {
        background-color: var(--primary-color, #667eea);
        border-color: var(--primary-color, #667eea);
        color: white;
        font-weight: 600;
        padding: 0.875rem 2rem;
        border-radius: 12px;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    
    .btn-register:hover {
        background-color: #5a6fd8;
        border-color: #5a6fd8;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    }
    
    .divider {
        text-align: center;
        margin: 2rem 0;
        position: relative;
    }
    
    .divider::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(to right, transparent, #e2e8f0, transparent);
    }
    
    .divider span {
        background: rgba(255, 255, 255, 0.95);
        padding: 0 1rem;
        color: #6c757d;
        font-size: 0.875rem;
    }
    
    .login-link {
        text-align: center;
        margin-top: 1.5rem;
    }
    
    .login-link a {
        color: var(--primary-color, #667eea);
        text-decoration: none;
        font-weight: 600;
        transition: color 0.3s ease;
    }
    
    .login-link a:hover {
        color: var(--secondary-color, #764ba2);
    }
    
    .error-message {
        background: rgba(220, 53, 69, 0.1);
        border: 1px solid rgba(220, 53, 69, 0.2);
        color: #dc3545;
        padding: 1rem;
        border-radius: 12px;
        margin-bottom: 1.5rem;
        animation: shake 0.5s ease-in-out;
    }
    
    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-5px); }
        75% { transform: translateX(5px); }
    }
    
    .loading {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border-top-color: white;
        animation: spin 1s ease-in-out infinite;
    }
    
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    
    @media (max-width: 768px) {
        .register-container {
            padding: 1rem;
        }
        
        .register-card {
            margin: 1rem;
            border-radius: 16px;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="register-container">
    <div class="register-card">
        <div class="p-5">
                <div class="logo-container">
                <img src="{% static 'images/dark.png' %}" alt="Adtlas Logo" class="logo-img mb-2">
                    <h2>Create Account</h2>
                    <p>Join Adtlas DAI Management System</p>
                </div>
                
                <form method="post" id="registerForm">
                    {% csrf_token %}
                    
                    {% if form.non_field_errors %}
                        <div class="error-message">
                            <i class="fas fa-exclamation-circle me-2"></i>
                            {{ form.non_field_errors.0 }}
                        </div>
                    {% endif %}
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" 
                                       class="form-control {% if form.first_name.errors %}is-invalid{% endif %}" 
                                       id="{{ form.first_name.id_for_label }}"
                                       name="{{ form.first_name.name }}"
                                       value="{{ form.first_name.value|default:'' }}"
                                       placeholder="First Name"
                                       required>
                                <label for="{{ form.first_name.id_for_label }}">
                                    <i class="fas fa-user me-2"></i>First Name
                                </label>
                                {% if form.first_name.errors %}
                                    <div class="invalid-feedback">
                                        {{ form.first_name.errors.0 }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" 
                                       class="form-control {% if form.last_name.errors %}is-invalid{% endif %}" 
                                       id="{{ form.last_name.id_for_label }}"
                                       name="{{ form.last_name.name }}"
                                       value="{{ form.last_name.value|default:'' }}"
                                       placeholder="Last Name"
                                       required>
                                <label for="{{ form.last_name.id_for_label }}">
                                    <i class="fas fa-user me-2"></i>Last Name
                                </label>
                                {% if form.last_name.errors %}
                                    <div class="invalid-feedback">
                                        {{ form.last_name.errors.0 }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-floating">
                        <input type="text" 
                               class="form-control {% if form.username.errors %}is-invalid{% endif %}" 
                               id="{{ form.username.id_for_label }}"
                               name="{{ form.username.name }}"
                               value="{{ form.username.value|default:'' }}"
                               placeholder="Username"
                               required>
                        <label for="{{ form.username.id_for_label }}">
                            <i class="fas fa-at me-2"></i>Username
                        </label>
                        {% if form.username.errors %}
                            <div class="invalid-feedback">
                                {{ form.username.errors.0 }}
                            </div>
                        {% endif %}
                        <div class="form-text mt-1">
                            <i class="fas fa-info-circle me-1"></i>
                            Username must be 3-30 characters long and can contain letters, numbers, dots, hyphens, and underscores.
                        </div>
                        <div id="usernameAvailability" class="mt-1"></div>
                    </div>
                    
                    <div class="form-floating">
                        <input type="email" 
                               class="form-control {% if form.email.errors %}is-invalid{% endif %}" 
                               id="{{ form.email.id_for_label }}"
                               name="{{ form.email.name }}"
                               value="{{ form.email.value|default:'' }}"
                               placeholder="Email Address"
                               required>
                        <label for="{{ form.email.id_for_label }}">
                            <i class="fas fa-envelope me-2"></i>Email Address
                        </label>
                        {% if form.email.errors %}
                            <div class="invalid-feedback">
                                {{ form.email.errors.0 }}
                            </div>
                        {% endif %}
                        <div id="emailAvailability" class="mt-1"></div>
                    </div>
                    
                    <div class="form-floating">
                        <div class="input-group">
                            <input type="password" 
                                   class="form-control {% if form.password1.errors %}is-invalid{% endif %}" 
                                   id="{{ form.password1.id_for_label }}"
                                   name="{{ form.password1.name }}"
                                   placeholder="Password"
                                   required>
                            <button class="btn btn-outline-secondary password-toggle" type="button" id="togglePassword1">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                        <label for="{{ form.password1.id_for_label }}">
                            <i class="fas fa-lock me-2"></i>Password
                        </label>
                        {% if form.password1.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.password1.errors.0 }}
                            </div>
                        {% endif %}
                        <div class="form-text mt-1">
                            <i class="fas fa-shield-alt me-1"></i>
                            Password must be at least 8 characters with uppercase, lowercase, number, and special character.
                        </div>
                        <div id="passwordStrength" class="mt-2"></div>
                    </div>
                    
                    <div class="form-floating">
                        <div class="input-group">
                            <input type="password" 
                                   class="form-control {% if form.password2.errors %}is-invalid{% endif %}" 
                                   id="{{ form.password2.id_for_label }}"
                                   name="{{ form.password2.name }}"
                                   placeholder="Confirm Password"
                                   required>
                            <button class="btn btn-outline-secondary password-toggle" type="button" id="togglePassword2">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                        <label for="{{ form.password2.id_for_label }}">
                            <i class="fas fa-lock me-2"></i>Confirm Password
                        </label>
                        {% if form.password2.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.password2.errors.0 }}
                            </div>
                        {% endif %}
                        <div id="passwordMatch" class="mt-1"></div>
                    </div>
                    
                    <div class="mb-4">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="agreeTerms" required>
                            <label class="form-check-label" for="agreeTerms">
                                I agree to the <a href="#" class="text-decoration-none">Terms of Service</a> 
                                and <a href="#" class="text-decoration-none">Privacy Policy</a>
                            </label>
                        </div>
                    </div>
                    
                    <div class="d-grid mb-4">
                        <button type="submit" class="btn btn-register" id="registerBtn">
                            <span class="btn-text">
                                <i class="fas fa-user-plus me-2"></i>Create Account
                            </span>
                            <span class="btn-loading d-none">
                                <span class="loading me-2"></span>Creating account...
                            </span>
                        </button>
                    </div>
                </form>
                
                <div class="divider">
                    <span>or</span>
                </div>
                
                <div class="text-center">
                    <p class="login-link">Already have an account? 
                        <a href="{% url 'auth:login' %}" class="text-decoration-none">
                            <i class="fas fa-sign-in-alt me-1"></i>Sign In
                        </a>
                    </p>
                </div>
            </div>
        </div>
        
        <!-- Additional Info -->
        <div class="text-center mt-4">
            <small class="text-muted">
                <i class="fas fa-shield-alt me-1"></i>
                Your information is secure and will never be shared
            </small>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const registerForm = document.getElementById('registerForm');
    const registerBtn = document.getElementById('registerBtn');
    const usernameField = document.getElementById('{{ form.username.id_for_label }}');
    const emailField = document.getElementById('{{ form.email.id_for_label }}');
    const password1Field = document.getElementById('{{ form.password1.id_for_label }}');
    const password2Field = document.getElementById('{{ form.password2.id_for_label }}');
    
    // Toggle password visibility
    document.getElementById('togglePassword1').addEventListener('click', function() {
        togglePasswordVisibility(password1Field, this);
    });
    
    document.getElementById('togglePassword2').addEventListener('click', function() {
        togglePasswordVisibility(password2Field, this);
    });
    
    function togglePasswordVisibility(field, button) {
        const type = field.getAttribute('type') === 'password' ? 'text' : 'password';
        field.setAttribute('type', type);
        
        const icon = button.querySelector('i');
        icon.classList.toggle('fa-eye');
        icon.classList.toggle('fa-eye-slash');
    }
    
    // Username availability check
    let usernameTimeout;
    usernameField.addEventListener('input', function() {
        clearTimeout(usernameTimeout);
        const username = this.value.trim();
        
        if (username.length >= 3) {
            usernameTimeout = setTimeout(function() {
                checkUsernameAvailability(username);
            }, 500);
        } else {
            document.getElementById('usernameAvailability').innerHTML = '';
        }
    });
    
    function checkUsernameAvailability(username) {
        fetch(`{% url 'accounts:check_username' %}?username=${encodeURIComponent(username)}`)
            .then(response => response.json())
            .then(data => {
                const availabilityDiv = document.getElementById('usernameAvailability');
                if (data.available) {
                    availabilityDiv.innerHTML = '<small class="text-success"><i class="fas fa-check me-1"></i>Username is available</small>';
                    usernameField.classList.remove('is-invalid');
                    usernameField.classList.add('is-valid');
                } else {
                    availabilityDiv.innerHTML = '<small class="text-danger"><i class="fas fa-times me-1"></i>Username is already taken</small>';
                    usernameField.classList.remove('is-valid');
                    usernameField.classList.add('is-invalid');
                }
            })
            .catch(error => {
                console.error('Error checking username:', error);
            });
    }
    
    // Email availability check
    let emailTimeout;
    emailField.addEventListener('input', function() {
        clearTimeout(emailTimeout);
        const email = this.value.trim();
        
        if (email.includes('@')) {
            emailTimeout = setTimeout(function() {
                checkEmailAvailability(email);
            }, 500);
        } else {
            document.getElementById('emailAvailability').innerHTML = '';
        }
    });
    
    function checkEmailAvailability(email) {
        fetch(`{% url 'accounts:check_email' %}?email=${encodeURIComponent(email)}`)
            .then(response => response.json())
            .then(data => {
                const availabilityDiv = document.getElementById('emailAvailability');
                if (data.available) {
                    availabilityDiv.innerHTML = '<small class="text-success"><i class="fas fa-check me-1"></i>Email is available</small>';
                    emailField.classList.remove('is-invalid');
                    emailField.classList.add('is-valid');
                } else {
                    availabilityDiv.innerHTML = '<small class="text-danger"><i class="fas fa-times me-1"></i>Email is already registered</small>';
                    emailField.classList.remove('is-valid');
                    emailField.classList.add('is-invalid');
                }
            })
            .catch(error => {
                console.error('Error checking email:', error);
            });
    }
    
    // Password strength indicator
    password1Field.addEventListener('input', function() {
        const password = this.value;
        const strengthDiv = document.getElementById('passwordStrength');
        const strength = calculatePasswordStrength(password);
        
        let strengthText = '';
        let strengthClass = '';
        
        if (password.length === 0) {
            strengthDiv.innerHTML = '';
            return;
        }
        
        if (strength < 2) {
            strengthText = 'Weak';
            strengthClass = 'text-danger';
        } else if (strength < 4) {
            strengthText = 'Medium';
            strengthClass = 'text-warning';
        } else {
            strengthText = 'Strong';
            strengthClass = 'text-success';
        }
        
        strengthDiv.innerHTML = `<small class="${strengthClass}"><i class="fas fa-shield-alt me-1"></i>Password strength: ${strengthText}</small>`;
    });
    
    function calculatePasswordStrength(password) {
        let strength = 0;
        
        if (password.length >= 8) strength++;
        if (/[a-z]/.test(password)) strength++;
        if (/[A-Z]/.test(password)) strength++;
        if (/\d/.test(password)) strength++;
        if (/[^\w\s]/.test(password)) strength++;
        
        return strength;
    }
    
    // Password match indicator
    password2Field.addEventListener('input', function() {
        const password1 = password1Field.value;
        const password2 = this.value;
        const matchDiv = document.getElementById('passwordMatch');
        
        if (password2.length === 0) {
            matchDiv.innerHTML = '';
            return;
        }
        
        if (password1 === password2) {
            matchDiv.innerHTML = '<small class="text-success"><i class="fas fa-check me-1"></i>Passwords match</small>';
            this.classList.remove('is-invalid');
            this.classList.add('is-valid');
        } else {
            matchDiv.innerHTML = '<small class="text-danger"><i class="fas fa-times me-1"></i>Passwords do not match</small>';
            this.classList.remove('is-valid');
            this.classList.add('is-invalid');
        }
    });
    
    // Enhanced form submission with loading state and validation
    registerForm.addEventListener('submit', function(e) {
        const btnText = registerBtn.querySelector('.btn-text');
        const btnLoading = registerBtn.querySelector('.btn-loading');
        
        // Validate form before submission
        if (!validateForm()) {
            e.preventDefault();
            return;
        }
        
        // Show loading state with ripple effect
        btnText.classList.add('d-none');
        btnLoading.classList.remove('d-none');
        registerBtn.disabled = true;
        registerBtn.classList.add('loading');
        
        // Add ripple effect
        createRipple(e, registerBtn);
        
        // Re-enable button after 15 seconds (in case of slow response)
        setTimeout(function() {
            btnText.classList.remove('d-none');
            btnLoading.classList.add('d-none');
            registerBtn.disabled = false;
            registerBtn.classList.remove('loading');
        }, 15000);
    });
    
    // Form validation function
    function validateForm() {
        let isValid = true;
        const inputs = registerForm.querySelectorAll('input[required]');
        
        inputs.forEach(input => {
            if (!input.value.trim()) {
                input.classList.add('is-invalid');
                isValid = false;
            } else {
                input.classList.remove('is-invalid');
            }
        });
        
        // Check password match
        if (password1Field.value !== password2Field.value) {
            password2Field.classList.add('is-invalid');
            isValid = false;
        }
        
        // Check terms agreement
        const termsCheckbox = document.getElementById('agreeTerms');
        if (!termsCheckbox.checked) {
            termsCheckbox.classList.add('is-invalid');
            isValid = false;
        }
        
        return isValid;
    }
    
    // Create ripple effect
    function createRipple(event, element) {
        const ripple = document.createElement('span');
        const rect = element.getBoundingClientRect();
        const size = Math.max(rect.width, rect.height);
        const x = event.clientX - rect.left - size / 2;
        const y = event.clientY - rect.top - size / 2;
        
        ripple.style.width = ripple.style.height = size + 'px';
        ripple.style.left = x + 'px';
        ripple.style.top = y + 'px';
        ripple.classList.add('ripple');
        
        element.appendChild(ripple);
        
        setTimeout(() => {
            ripple.remove();
        }, 600);
    }
    
    // Auto-focus on first input
    const firstInput = document.getElementById('{{ form.first_name.id_for_label }}');
    if (firstInput) {
        firstInput.focus();
    }
});
</script>
{% endblock %}