{% extends "public/base.html" %}

{% block title %}{{ t('public.registration') }} - {{ project.name }} - {{ app_settings.title if app_settings else 'Survey Manager' }}{% endblock %}

{% block content %}
<div class="survey-card">
    <div class="survey-header">
        <h1 class="mb-3">{{ t('public.registration') }}</h1>
        <p class="mb-0 opacity-90">{{ project.name }}</p>
    </div>

    <div class="survey-body">
        <div class="mb-4 text-center">
            <i class="fas fa-user-plus fa-3x text-primary mb-3"></i>
            <h4>{{ t('public.provide_information') }}</h4>
            <p class="text-muted">{{ t('public.personalize_experience') }}</p>
        </div>
        
        <form method="POST" id="registrationForm" novalidate>
            <div class="mb-3">
                <label for="name" class="form-label">
                    <i class="fas fa-user me-2"></i>{{ t('public.full_name') }} *
                </label>
                <input type="text"
                       class="form-control"
                       id="name"
                       name="name"
                       placeholder="{{ t('public.full_name_placeholder') }}"
                       required
                       minlength="2"
                       maxlength="100">
                <div class="invalid-feedback">{{ t('public.full_name_required') }}</div>
            </div>

            <div class="mb-3">
                <label for="email" class="form-label">
                    <i class="fas fa-envelope me-2"></i>{{ t('public.email_address') }} *
                </label>
                <input type="email"
                       class="form-control"
                       id="email"
                       name="email"
                       placeholder="{{ t('public.email_placeholder') }}"
                       required
                       maxlength="100">
                <div class="invalid-feedback">{{ t('public.email_required') }}</div>
                <div id="emailExistsMessage" class="text-danger small mt-1" style="display: none;">
                    <i class="fas fa-exclamation-triangle me-1"></i>
                    {{ t('public.email_already_used') }}
                </div>
            </div>

            <div class="mb-4">
                <label for="phone" class="form-label">
                    <i class="fas fa-phone me-2"></i>{{ t('public.phone_optional') }}
                </label>
                <input type="tel"
                       class="form-control"
                       id="phone"
                       name="phone"
                       placeholder="{{ t('public.phone_placeholder') }}"
                       maxlength="20">
            </div>

            <div class="mb-4">
                <div class="form-check">
                    <input class="form-check-input"
                           type="checkbox"
                           id="privacy_agreement"
                           required>
                    <label class="form-check-label" for="privacy_agreement">
                        {{ t('public.privacy_agreement') }}
                    </label>
                    <div class="invalid-feedback">{{ t('public.privacy_required') }}</div>
                </div>
            </div>

            <div class="text-center">
                <button type="submit" class="btn btn-survey btn-lg" id="registerBtn">
                    <i class="fas fa-arrow-right me-2"></i>{{ t('public.continue_survey') }}
                </button>
            </div>

            <div class="text-center mt-3">
                <a href="{{ url_for('public.survey', slug=project.slug) }}" class="text-muted">
                    <i class="fas fa-arrow-left me-1"></i>{{ t('public.back_to_start') }}
                </a>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('registrationForm');
    const emailInput = document.getElementById('email');
    const nameInput = document.getElementById('name');
    const privacyCheckbox = document.getElementById('privacy_agreement');
    const registerBtn = document.getElementById('registerBtn');
    const emailExistsMessage = document.getElementById('emailExistsMessage');
    
    // Check localStorage for existing completion
    const completedSurveys = JSON.parse(localStorage.getItem('completedSurveys') || '[]');
    const projectSlug = '{{ project.slug }}';
    
    if (completedSurveys.includes(projectSlug)) {
        Swal.fire({
            title: '{{ t("public.survey_already_completed") }}',
            text: '{{ t("public.already_completed_message") }}',
            icon: 'info',
            confirmButtonText: 'OK',
            allowOutsideClick: false
        }).then(() => {
            window.location.href = '{{ url_for("public.survey", slug=project.slug) }}';
        });
        return;
    }
    
    // Email validation
    let emailCheckTimeout;
    emailInput.addEventListener('input', function() {
        clearTimeout(emailCheckTimeout);
        emailExistsMessage.style.display = 'none';
        
        if (this.value && this.checkValidity()) {
            emailCheckTimeout = setTimeout(() => {
                checkEmailExists(this.value);
            }, 500);
        }
    });
    
    function checkEmailExists(email) {
        fetch(`/api/check-email/{{ project.slug }}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ email: email })
        })
        .then(response => response.json())
        .then(data => {
            if (data.exists) {
                emailExistsMessage.style.display = 'block';
                registerBtn.disabled = true;
            } else {
                emailExistsMessage.style.display = 'none';
                registerBtn.disabled = false;
            }
        })
        .catch(error => {
            console.error('Error:', error);
        });
    }
    
    // Form validation
    form.addEventListener('submit', function(e) {
        e.preventDefault();

        // Trim values
        const nameValue = nameInput.value.trim();
        const emailValue = emailInput.value.trim();

        // Check all required fields
        const nameValid = nameValue !== '' && nameValue.length >= 2;
        const emailValid = emailValue !== '' && emailInput.checkValidity();
        const privacyValid = privacyCheckbox.checked;
        const emailNotExists = emailExistsMessage.style.display === 'none';

        // Set validation states
        nameInput.classList.toggle('is-invalid', !nameValid);
        emailInput.classList.toggle('is-invalid', !emailValid);
        privacyCheckbox.classList.toggle('is-invalid', !privacyValid);

        // Additional validation: Name should not contain only numbers or special characters
        const namePattern = /^[a-zA-ZáéíóúÁÉÍÓÚñÑüÜ\s'-]+$/;
        const nameHasValidChars = namePattern.test(nameValue);

        if (!nameHasValidChars && nameValue !== '') {
            nameInput.classList.add('is-invalid');
            Swal.fire({
                title: '{{ t("public.check_information") }}',
                text: '{{ t("public.fill_required_fields") }}',
                icon: 'warning',
                confirmButtonText: 'OK'
            });
            return;
        }

        if (nameValid && emailValid && privacyValid && emailNotExists) {
            // Disable button to prevent double submission
            registerBtn.disabled = true;
            registerBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>{{ t("public.continue_survey") }}';

            // Store person info in localStorage
            const personInfo = {
                name: nameValue,
                email: emailValue,
                phone: document.getElementById('phone').value.trim(),
                project_slug: projectSlug
            };

            localStorage.setItem('currentSurveyPerson', JSON.stringify(personInfo));

            // Submit form
            this.submit();
        } else {
            Swal.fire({
                title: '{{ t("public.check_information") }}',
                text: '{{ t("public.fill_required_fields") }}',
                icon: 'warning',
                confirmButtonText: 'OK'
            });
        }
    });
    
    // Show error if email exists (from server-side validation)
    {% if email_exists %}
    emailExistsMessage.style.display = 'block';
    registerBtn.disabled = true;
    {% endif %}
});
</script>
{% endblock %}