{% extends "base.html" %}

{% block title %}Registrarse - TallArt{% endblock %}

{% block extra_css %}
<style>
    /* Contenedor principal con gradient de fondo */
    .auth-container {
        min-height: 100vh;
        background: linear-gradient(135deg, #342a35 0%, #6e6364 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 1rem;
        position: relative;
        overflow: hidden;
    }
    
    /* Partículas flotantes de fondo */
    .auth-container::before {
        content: '';
        position: absolute;
        width: 600px;
        height: 600px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        top: -300px;
        right: -300px;
        animation: float 20s infinite ease-in-out;
    }
    
    .auth-container::after {
        content: '';
        position: absolute;
        width: 400px;
        height: 400px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 50%;
        bottom: -200px;
        left: -200px;
        animation: float 15s infinite ease-in-out reverse;
    }
    
    /* Tarjeta de registro moderna */
    .register-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 24px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        max-width: 520px;
        width: 100%;
        position: relative;
        z-index: 10;
        animation: slideInUp 0.6s ease-out;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .register-card-body {
        padding: 2.5rem 2.5rem;
    }
    
    /* Logo y título */
    .register-header {
        text-align: center;
        margin-bottom: 1.5rem;
    }
    
    .register-logo {
        width: 70px;
        height: 70px;
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        animation: bounceIn 0.8s ease-out;
    }
    
    .register-logo svg {
        width: 35px;
        height: 35px;
        color: white;
    }
    
    .register-title {
        font-size: 1.875rem;
        font-weight: 700;
        color: #2d3748;
        margin-bottom: 0.25rem;
    }
    
    .register-subtitle {
        color: #718096;
        font-size: 0.9rem;
    }
    
    /* Inputs mejorados */
    .form-group {
        margin-bottom: 1.25rem;
        position: relative;
    }
    
    .form-label {
        font-weight: 600;
        color: #4a5568;
        margin-bottom: 0.4rem;
        font-size: 0.875rem;
        display: block;
    }
    
    .form-input,
    .form-select {
        width: 100%;
        padding: 0.75rem 1rem 0.75rem 2.75rem;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        background: white;
        color: #000000;
    }
    
    .form-input:focus,
    .form-select:focus {
        outline: none;
        border-color: #f5576c;
        box-shadow: 0 0 0 3px rgba(245, 87, 108, 0.1);
        transform: translateY(-1px);
    }
    
    .input-icon {
        position: absolute;
        left: 0.875rem;
        top: 50%;
        transform: translateY(-50%);
        color: #a0aec0;
        transition: color 0.3s ease;
        pointer-events: none;
    }
    
    .form-input:focus + .input-icon,
    .form-select:focus + .input-icon {
        color: #f5576c;
    }
    
    .form-text {
        font-size: 0.8rem;
        color: #a0aec0;
        margin-top: 0.25rem;
    }
    
    /* Validación */
    .is-invalid {
        border-color: #fc8181 !important;
    }
    
    .invalid-feedback {
        color: #e53e3e;
        font-size: 0.8rem;
        margin-top: 0.25rem;
        display: block;
    }
    
    /* Checkbox mejorado */
    .form-check-group {
        display: flex;
        align-items: flex-start;
        margin: 1rem 0;
    }
    
    .form-check-group input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin-right: 0.5rem;
        margin-top: 0.125rem;
        cursor: pointer;
        flex-shrink: 0;
    }
    
    .form-check-group label {
        color: #4a5568;
        font-size: 0.875rem;
        cursor: pointer;
        user-select: none;
        line-height: 1.4;
    }
    
    .form-check-group a {
        color: #f5576c;
        text-decoration: none;
        font-weight: 600;
    }
    
    .form-check-group a:hover {
        text-decoration: underline;
    }
    
    /* Botón de registro moderno */
    .btn-register {
        width: 100%;
        padding: 0.875rem;
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        border: none;
        border-radius: 12px;
        color: white;
        font-weight: 600;
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        margin-top: 0.5rem;
    }
    
    .btn-register::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s ease;
    }
    
    .btn-register:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(245, 87, 108, 0.4);
    }
    
    .btn-register:hover::before {
        left: 100%;
    }
    
    .btn-register:active {
        transform: translateY(0);
    }
    
    /* Enlaces */
    .register-links {
        text-align: center;
        margin-top: 1.25rem;
        padding-top: 1rem;
        border-top: 1px solid #e2e8f0;
    }
    
    .register-links p {
        color: #718096;
        font-size: 0.9rem;
        margin: 0;
    }
    
    .register-links a {
        color: #f5576c;
        text-decoration: none;
        font-weight: 600;
        transition: color 0.3s ease;
    }
    
    .register-links a:hover {
        color: #f093fb;
        text-decoration: underline;
    }
    
    /* Alertas mejoradas */
    .alert-modern {
        padding: 0.875rem 1rem;
        border-radius: 12px;
        border: none;
        margin-bottom: 1.25rem;
        animation: slideInDown 0.4s ease-out;
        font-size: 0.9rem;
    }
    
    .alert-danger {
        background: #fed7d7;
        color: #c53030;
    }
    
    .alert-success {
        background: #c6f6d5;
        color: #2f855a;
    }
    
    /* Animaciones */
    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes bounceIn {
        0% {
            opacity: 0;
            transform: scale(0.3);
        }
        50% {
            transform: scale(1.05);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }
    
    @keyframes slideInDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes float {
        0%, 100% {
            transform: translateY(0) rotate(0deg);
        }
        50% {
            transform: translateY(-20px) rotate(180deg);
        }
    }
    
    /* Scrollbar personalizado */
    .register-card::-webkit-scrollbar {
        width: 6px;
    }
    
    .register-card::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }
    
    .register-card::-webkit-scrollbar-thumb {
        background: #f5576c;
        border-radius: 10px;
    }
    
    /* Responsive */
    @media (max-width: 640px) {
        .register-card-body {
            padding: 2rem 1.5rem;
        }
        
        .register-title {
            font-size: 1.625rem;
        }
        
        .form-input,
        .form-select {
            font-size: 0.9rem;
            padding: 0.7rem 0.875rem 0.7rem 2.5rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="auth-container">
    <div class="register-card">
        <div class="register-card-body">
            <!-- Header con logo -->
            <div class="register-header">
                <div class="register-logo">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path>
                    </svg>
                </div>
                <h1 class="register-title">Crear Cuenta</h1>
                <p class="register-subtitle">Únete a la comunidad TallArt</p>
            </div>

            <!-- Alertas -->
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="alert-modern alert-{{ 'danger' if category == 'error' else category }}">
                            {{ message }}
                        </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}

            <!-- Formulario -->
            <form method="POST" action="{{ url_for('auth.register') }}" id="registerForm">
                <!-- Usuario -->
                <div class="form-group">
                    <label for="username" class="form-label">Nombre de Usuario</label>
                    <div style="position: relative;">
                        <input type="text" class="form-input" id="username" name="username" 
                               placeholder="usuario123" required>
                        <svg class="input-icon" style="top: 32px;" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                    </div>
                </div>

                <!-- Nombre Completo -->
                <div class="form-group">
                    <label for="full_name" class="form-label">Nombre Completo</label>
                    <div style="position: relative;">
                        <input type="text" class="form-input" id="full_name" name="full_name" 
                               pattern="^[a-zA-ZáéíóúÁÉÍÓÚñÑüÜ\s]+$"
                               title="Solo letras y espacios"
                               placeholder="Juan Pérez García" required>
                        <svg class="input-icon" style="top: 32px;" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <div class="form-text">Solo letras y espacios</div>
                </div>

                <!-- Email -->
                <div class="form-group">
                    <label for="email" class="form-label">Email de Gmail</label>
                    <div style="position: relative;">
                        <input type="email" class="form-input" id="email" name="email" 
                               placeholder="ejemplo@gmail.com" 
                               pattern="[a-zA-Z0-9._%+-]+@gmail\.com$"
                               title="Debe ser una cuenta de Gmail (@gmail.com)" required>
                        <svg class="input-icon" style="top: 32px;" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                        </svg>
                    </div>
                    <div class="form-text">Solo correos de Gmail (@gmail.com)</div>
                </div>

                <!-- Teléfono -->
                <div class="form-group">
                    <label for="telefono" class="form-label">Teléfono (opcional)</label>
                    <div style="position: relative;">
                        <input type="tel" class="form-input" id="telefono" name="telefono" 
                               placeholder="+52 123 456 7890">
                        <svg class="input-icon" style="top: 32px;" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                        </svg>
                    </div>
                </div>

                <!-- Tipo de Usuario -->
                <div class="form-group">
                    <label for="tipo_usuario" class="form-label">Tipo de Usuario</label>
                    <div style="position: relative;">
                        <select class="form-select" id="tipo_usuario" name="tipo_usuario" required>
                            <option value="cliente" selected>Cliente - Compra productos</option>
                            <option value="empresa">Empresa - Vende productos</option>
                            <option value="administrador">Administrador - Gestiona sistema</option>
                        </select>
                        <svg class="input-icon" style="top: 32px;" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                        </svg>
                    </div>
                    <div class="form-text" id="tipo_usuario_description">
                        Navega el catálogo, agrega favoritos y realiza compras
                    </div>
                </div>

                <!-- Contraseña -->
                <div class="form-group">
                    <label for="password" class="form-label">Contraseña</label>
                    <div style="position: relative;">
                        <input type="password" class="form-input" id="password" name="password" 
                               placeholder="Mínimo 6 caracteres" required>
                        <svg class="input-icon" style="top: 32px;" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                        </svg>
                    </div>
                    <div class="form-text">Mínimo 6 caracteres</div>
                </div>

                <!-- Confirmar Contraseña -->
                <div class="form-group">
                    <label for="confirm_password" class="form-label">Confirmar Contraseña</label>
                    <div style="position: relative;">
                        <input type="password" class="form-input" id="confirm_password" name="confirm_password" 
                               placeholder="Repite tu contraseña" required>
                        <svg class="input-icon" style="top: 32px;" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                </div>

                <!-- Términos y condiciones -->
                <div class="form-check-group">
                    <input type="checkbox" id="terms" name="terms" required>
                    <label for="terms">
                        Acepto los <a href="#">términos y condiciones</a> de TallArt
                    </label>
                </div>

                <button type="submit" class="btn-register">
                    Crear Cuenta
                </button>
            </form>

            <!-- Enlaces -->
            <div class="register-links">
                <p>
                    ¿Ya tienes cuenta? 
                    <a href="{{ url_for('auth.login') }}">Inicia sesión aquí</a>
                </p>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('registerForm');
    const password = document.getElementById('password');
    const confirmPassword = document.getElementById('confirm_password');
    const tipoUsuario = document.getElementById('tipo_usuario');
    const tipoUsuarioDesc = document.getElementById('tipo_usuario_description');
    const emailInput = document.getElementById('email');
    const fullNameInput = document.getElementById('full_name');

    // Descripciones para cada tipo de usuario
    const descriptions = {
        'cliente': 'Navega el catálogo, agrega favoritos y realiza compras',
        'empresa': 'Registra tus productos, gestiona inventario y recibe pedidos',
        'administrador': 'Acceso completo para gestionar usuarios, productos y empresas'
    };

    // Actualizar descripción cuando cambia el tipo de usuario
    tipoUsuario.addEventListener('change', function() {
        tipoUsuarioDesc.textContent = descriptions[this.value];
        tipoUsuarioDesc.style.animation = 'slideInDown 0.3s ease-out';
    });

    // Validar nombre completo en tiempo real
    fullNameInput.addEventListener('input', function() {
        const name = this.value;
        const regex = /^[a-zA-ZáéíóúÁÉÍÓÚñÑüÜ\s]*$/;
        
        if (name && !regex.test(name)) {
            this.classList.add('is-invalid');
            let feedback = this.parentNode.parentNode.querySelector('.invalid-feedback');
            if (!feedback) {
                feedback = document.createElement('div');
                feedback.className = 'invalid-feedback';
                feedback.textContent = 'Solo se permiten letras y espacios';
                this.parentNode.parentNode.appendChild(feedback);
            }
        } else {
            this.classList.remove('is-invalid');
            const feedback = this.parentNode.parentNode.querySelector('.invalid-feedback');
            if (feedback) feedback.remove();
        }
    });

    // Validar email de Gmail en tiempo real
    emailInput.addEventListener('blur', function() {
        const email = this.value.trim();
        if (email && !email.toLowerCase().endsWith('@gmail.com')) {
            this.classList.add('is-invalid');
            let feedback = this.parentNode.parentNode.querySelector('.invalid-feedback');
            if (!feedback) {
                feedback = document.createElement('div');
                feedback.className = 'invalid-feedback';
                feedback.textContent = 'Solo se aceptan correos de Gmail (@gmail.com)';
                this.parentNode.parentNode.appendChild(feedback);
            }
        } else {
            this.classList.remove('is-invalid');
            const feedback = this.parentNode.parentNode.querySelector('.invalid-feedback');
            if (feedback) feedback.remove();
        }
    });

    // Validar coincidencia de contraseñas en tiempo real
    confirmPassword.addEventListener('input', function() {
        if (this.value && this.value !== password.value) {
            this.classList.add('is-invalid');
            let feedback = this.parentNode.parentNode.querySelector('.invalid-feedback');
            if (!feedback) {
                feedback = document.createElement('div');
                feedback.className = 'invalid-feedback';
                feedback.textContent = 'Las contraseñas no coinciden';
                this.parentNode.parentNode.appendChild(feedback);
            }
        } else {
            this.classList.remove('is-invalid');
            const feedback = this.parentNode.parentNode.querySelector('.invalid-feedback');
            if (feedback) feedback.remove();
        }
    });

    // Validación final al enviar
    form.addEventListener('submit', function(e) {
        // Validar nombre completo
        const fullName = fullNameInput.value.trim();
        const nameRegex = /^[a-zA-ZáéíóúÁÉÍÓÚñÑüÜ\s]+$/;
        if (!nameRegex.test(fullName)) {
            e.preventDefault();
            fullNameInput.focus();
            alert('El nombre completo solo puede contener letras y espacios');
            return false;
        }

        // Validar email de Gmail
        const email = emailInput.value.trim().toLowerCase();
        if (!email.endsWith('@gmail.com')) {
            e.preventDefault();
            emailInput.focus();
            alert('Solo se aceptan correos de Gmail (@gmail.com)');
            return false;
        }

        // Validar coincidencia de contraseñas
        if (password.value !== confirmPassword.value) {
            e.preventDefault();
            confirmPassword.focus();
            alert('Las contraseñas no coinciden');
            return false;
        }

        // Validar longitud de contraseña
        if (password.value.length < 6) {
            e.preventDefault();
            password.focus();
            alert('La contraseña debe tener al menos 6 caracteres');
            return false;
        }
    });
});
</script>
{% endblock %}