<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register - MHA Flow</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Inter', sans-serif;
        }
        .register-container {
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            max-width: 500px;
            width: 100%;
            padding: 3rem;
        }
        .brand-section {
            text-align: center;
            margin-bottom: 2rem;
        }
        .brand-logo {
            font-size: 3rem;
            margin-bottom: 1rem;
        }
        .brand-title {
            font-size: 1.8rem;
            font-weight: 700;
            color: #333;
            margin-bottom: 0.5rem;
        }
        .brand-subtitle {
            color: #666;
            font-size: 0.95rem;
        }
        .form-group {
            margin-bottom: 1.5rem;
        }
        .form-label {
            font-weight: 600;
            color: #333;
            margin-bottom: 0.5rem;
        }
        .form-control {
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            padding: 0.75rem 1rem;
            font-size: 1rem;
            transition: all 0.3s ease;
        }
        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
        .btn-register {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 8px;
            padding: 0.75rem 1.5rem;
            font-size: 1rem;
            font-weight: 600;
            color: white;
            width: 100%;
            transition: all 0.3s ease;
        }
        .btn-register:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
        }
        .password-strength {
            margin-top: 0.5rem;
            height: 5px;
            border-radius: 3px;
            background: #e0e0e0;
            overflow: hidden;
        }
        .password-strength-bar {
            height: 100%;
            width: 0%;
            background: #dc3545;
            transition: width 0.3s ease;
        }
        .password-strength-bar.fair {
            background: #ffc107;
            width: 33%;
        }
        .password-strength-bar.good {
            background: #17a2b8;
            width: 66%;
        }
        .password-strength-bar.strong {
            background: #28a745;
            width: 100%;
        }
        .auth-links {
            text-align: center;
            margin-top: 2rem;
        }
        .auth-links a {
            color: #667eea;
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
        }
        .auth-links a:hover {
            color: #764ba2;
        }
        .alert {
            border-radius: 8px;
            border: none;
            margin-bottom: 1.5rem;
        }
    </style>
</head>
<body>
    <div class="register-container">
        <!-- Brand Section -->
        <div class="brand-section">
            <div class="brand-logo">
                <i class="fas fa-brain"></i>
            </div>
            <h1 class="brand-title">MHA Flow</h1>
            <p class="brand-subtitle">Create Your Account</p>
        </div>

        <!-- Alert Messages -->
        <div id="alertContainer"></div>

        <!-- Registration Form -->
        <form id="registerForm">
            <div class="form-group">
                <label for="username" class="form-label">
                    <i class="fas fa-user me-2"></i> Username
                </label>
                <input type="text" class="form-control" id="username" name="username" 
                       placeholder="Choose a username (min 3 chars)" required minlength="3">
                <small class="text-muted">Must be unique and at least 3 characters</small>
            </div>

            <div class="form-group">
                <label for="email" class="form-label">
                    <i class="fas fa-envelope me-2"></i> Email
                </label>
                <input type="email" class="form-control" id="email" name="email" 
                       placeholder="Your email address">
            </div>

            <div class="form-group">
                <label for="password" class="form-label">
                    <i class="fas fa-lock me-2"></i> Password
                </label>
                <input type="password" class="form-control" id="password" name="password" 
                       placeholder="Choose a strong password (min 6 chars)" required minlength="6">
                <div class="password-strength">
                    <div class="password-strength-bar" id="strengthBar"></div>
                </div>
                <small class="text-muted" id="strengthText">Weak password</small>
            </div>

            <div class="form-group">
                <label for="confirmPassword" class="form-label">
                    <i class="fas fa-check-circle me-2"></i> Confirm Password
                </label>
                <input type="password" class="form-control" id="confirmPassword" 
                       placeholder="Confirm your password" required>
            </div>

            <div class="form-check mb-3">
                <input type="checkbox" class="form-check-input" id="agreeTerms" required>
                <label class="form-check-label" for="agreeTerms">
                    I agree to the terms and conditions
                </label>
            </div>

            <button type="submit" class="btn btn-register" id="registerBtn">
                <i class="fas fa-user-plus me-2"></i> Create Account
            </button>
        </form>

        <!-- Login Link -->
        <div class="auth-links">
            <p class="mb-0">Already have an account? <a href="/login">Sign in here</a></p>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        const registerForm = document.getElementById('registerForm');
        const passwordInput = document.getElementById('password');
        const confirmPasswordInput = document.getElementById('confirmPassword');
        const strengthBar = document.getElementById('strengthBar');
        const strengthText = document.getElementById('strengthText');
        const alertContainer = document.getElementById('alertContainer');

        // Password strength indicator
        passwordInput.addEventListener('input', () => {
            const password = passwordInput.value;
            let strength = 0;

            if (password.length >= 6) strength += 1;
            if (password.length >= 10) strength += 1;
            if (/[A-Z]/.test(password) && /[0-9]/.test(password)) strength += 1;
            if (/[!@#$%^&*]/.test(password)) strength += 1;

            const bar = strengthBar;
            const text = strengthText;

            bar.classList.remove('fair', 'good', 'strong');
            
            if (strength <= 1) {
                text.textContent = 'Weak password';
                text.className = 'text-muted';
                // bar stays red
            } else if (strength === 2) {
                bar.classList.add('fair');
                text.textContent = 'Fair password';
                text.className = 'text-warning';
            } else if (strength === 3) {
                bar.classList.add('good');
                text.textContent = 'Good password';
                text.className = 'text-info';
            } else {
                bar.classList.add('strong');
                text.textContent = 'Strong password';
                text.className = 'text-success';
            }
        });

        // Form submission
        registerForm.addEventListener('submit', async (e) => {
            e.preventDefault();

            const username = document.getElementById('username').value;
            const email = document.getElementById('email').value;
            const password = passwordInput.value;
            const confirmPassword = confirmPasswordInput.value;
            const registerBtn = document.getElementById('registerBtn');

            // Validate passwords match
            if (password !== confirmPassword) {
                showAlert('danger', 'Passwords do not match');
                return;
            }

            // Show loading state
            registerBtn.disabled = true;
            registerBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i> Creating Account...';

            try {
                const response = await fetch('/api/auth/register', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        username: username,
                        email: email,
                        password: password
                    })
                });

                const data = await response.json();

                if (response.ok) {
                    showAlert('success', 'Account created successfully! Redirecting...');
                    setTimeout(() => {
                        localStorage.setItem('username', username);
                        window.location.href = '/dashboard';
                    }, 1500);
                } else {
                    showAlert('danger', data.error || 'Registration failed');
                }
            } catch (error) {
                showAlert('danger', 'Connection error. Please try again.');
                console.error('Registration error:', error);
            } finally {
                registerBtn.disabled = false;
                registerBtn.innerHTML = '<i class="fas fa-user-plus me-2"></i> Create Account';
            }
        });

        function showAlert(type, message) {
            const alert = document.createElement('div');
            alert.className = `alert alert-${type} alert-dismissible fade show`;
            alert.innerHTML = `
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            alertContainer.innerHTML = '';
            alertContainer.appendChild(alert);
        }
    </script>
</body>
</html>
