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

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

{% block content %}
<div class="survey-card">
    <div class="survey-header">
        <h1 class="mb-2">{{ survey.name }}</h1>
        <p class="mb-2 opacity-90">{{ project.name }}</p>
        <small class="opacity-75">Welcome, {{ person.name }}</small>
    </div>
    
    <div class="survey-body">
        <!-- Progress Bar -->
        <div class="progress-bar-container">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <small class="text-muted">{{ t('public.progress') }}</small>
                <small class="text-muted"><span id="currentFeature">1</span> {{ t('public.of') }} {{ survey_data|length }} {{ t('public.sections') }}</small>
            </div>
            <div class="progress">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 0%" id="progressBar"></div>
            </div>
            <!-- Auto-save indicator -->
            <div class="text-end mt-1">
                <small class="text-muted" id="autoSaveIndicator">
                    <i class="fas fa-circle-notch fa-spin" style="display: none;"></i>
                    <i class="fas fa-check-circle text-success" style="display: none;"></i>
                    <span id="autoSaveText"></span>
                </small>
            </div>
        </div>
        
        <form id="surveyForm" method="POST" action="{{ url_for('public.submit_survey', slug=project.slug) }}">
            {% for feature_data in survey_data %}
            <div class="feature-section" data-feature="{{ loop.index }}" {% if loop.index > 1 %}style="display: none;"{% endif %}>
                <div class="feature-header">
                    <h3 class="mb-1">
                        <span class="badge bg-white text-primary me-2">{{ feature_data.feature.position }}</span>
                        {{ feature_data.feature.name }}
                    </h3>
                </div>
                
                {% if feature_data.questions %}
                    <div class="question-card">
                        <h5 class="mb-3">
                            <i class="fas fa-question-circle text-primary me-2"></i>
                            {{ t('public.select_one_option') }}
                        </h5>

                        <div class="options-container">
                            {% set letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' %}
                            {% for question in feature_data.questions %}
                            <div class="option-radio">
                                <div class="form-check">
                                    <input class="form-check-input"
                                           type="radio"
                                           name="feature_{{ feature_data.feature.id }}"
                                           id="f{{ feature_data.feature.id }}_q{{ question.id }}"
                                           value="{{ question.id }}"
                                           required>
                                    <label class="form-check-label" for="f{{ feature_data.feature.id }}_q{{ question.id }}">
                                        {% if question.option_position %}
                                            <strong>{{ letters[question.option_position - 1] }})</strong>
                                        {% endif %}
                                        {{ question.name }}
                                    </label>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                {% else %}
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        {{ t('public.no_questions_feature') }}
                    </div>
                {% endif %}
                
                <!-- Navigation Buttons -->
                <div class="d-flex justify-content-between mt-4">
                    <button type="button"
                            class="btn btn-outline-secondary prev-btn"
                            {% if loop.index == 1 %}style="visibility: hidden;"{% endif %}>
                        <i class="fas fa-arrow-left me-2"></i>{{ t('public.previous') }}
                    </button>

                    {% if loop.index == survey_data|length %}
                        <button type="submit" class="btn btn-success btn-lg" id="submitBtn" disabled>
                            <i class="fas fa-check me-2"></i>{{ t('public.submit_survey') }}
                        </button>
                    {% else %}
                        <button type="button" class="btn btn-survey next-btn" disabled>
                            {{ t('public.next') }}<i class="fas fa-arrow-right ms-2"></i>
                        </button>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </form>
    </div>
</div>

<!-- Confirmation Modal -->
<div class="modal fade" id="submitConfirmModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ t('public.submit_survey_title') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>{{ t('public.confirm_submit') }}</p>
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    {{ t('public.review_answers_info') }}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ t('public.review_answers') }}</button>
                <button type="button" class="btn btn-success" id="confirmSubmit">
                    <i class="fas fa-check me-2"></i>{{ t('public.yes_submit') }}
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('surveyForm');
    const featureSections = document.querySelectorAll('.feature-section');
    const progressBar = document.getElementById('progressBar');
    const currentFeatureSpan = document.getElementById('currentFeature');
    const submitBtn = document.getElementById('submitBtn');
    const confirmSubmitBtn = document.getElementById('confirmSubmit');
    const autoSaveIndicator = document.getElementById('autoSaveIndicator');
    const autoSaveText = document.getElementById('autoSaveText');

    let currentFeature = 1;
    const totalFeatures = featureSections.length;
    const projectSlug = '{{ project.slug }}';
    const personId = '{{ person.id }}';
    const storageKey = `survey_progress_${projectSlug}_${personId}`;

    // Auto-save functions
    function showAutoSaveIndicator(status) {
        const spinner = autoSaveIndicator.querySelector('.fa-circle-notch');
        const check = autoSaveIndicator.querySelector('.fa-check-circle');

        if (status === 'saving') {
            spinner.style.display = 'inline-block';
            check.style.display = 'none';
            autoSaveText.textContent = '{{ t("public.saving") if t("public.saving") else "Guardando..." }}';
        } else if (status === 'saved') {
            spinner.style.display = 'none';
            check.style.display = 'inline-block';
            autoSaveText.textContent = '{{ t("public.saved") if t("public.saved") else "Guardado" }}';
            setTimeout(() => {
                check.style.display = 'none';
                autoSaveText.textContent = '';
            }, 2000);
        }
    }

    function saveProgress() {
        showAutoSaveIndicator('saving');

        const progressData = {
            currentFeature: currentFeature,
            answers: {},
            timestamp: new Date().toISOString()
        };

        // Save all answered questions
        const inputs = form.querySelectorAll('input[type="radio"]:checked');
        inputs.forEach(input => {
            progressData.answers[input.name] = input.value;
        });

        localStorage.setItem(storageKey, JSON.stringify(progressData));
        showAutoSaveIndicator('saved');
    }

    function restoreProgress() {
        const savedData = localStorage.getItem(storageKey);
        if (!savedData) return false;

        try {
            const progressData = JSON.parse(savedData);

            // Restore answers
            Object.entries(progressData.answers).forEach(([name, value]) => {
                const input = form.querySelector(`input[name="${name}"][value="${value}"]`);
                if (input) {
                    input.checked = true;
                }
            });

            // Restore current feature position
            if (progressData.currentFeature && progressData.currentFeature > 1) {
                showFeature(progressData.currentFeature);
            }

            return true;
        } catch (e) {
            console.error('Error restoring progress:', e);
            return false;
        }
    }

    function clearProgress() {
        localStorage.removeItem(storageKey);
    }
    
    // Update progress
    function updateProgress() {
        const progress = (currentFeature / totalFeatures) * 100;
        progressBar.style.width = progress + '%';
        currentFeatureSpan.textContent = currentFeature;
    }
    
    // Check if current feature is complete
    function checkFeatureComplete(featureIndex) {
        const section = featureSections[featureIndex - 1];
        const radios = section.querySelectorAll('input[name^="feature_"]');
        // A section is complete if at least one radio of its group is selected
        const groupName = radios.length ? radios[0].name : null;
        if (!groupName) return false;
        const isAnswered = Array.from(section.querySelectorAll(`input[name="${groupName}"]`)).some(input => input.checked);
        return isAnswered;
    }
    
    // Update navigation buttons
    function updateNavigation() {
        featureSections.forEach((section, index) => {
            const nextBtn = section.querySelector('.next-btn');
            const isComplete = checkFeatureComplete(index + 1);
            
            if (nextBtn) {
                nextBtn.disabled = !isComplete;
            }
            
            if (index + 1 === totalFeatures) {
                if (submitBtn) {
                    submitBtn.disabled = !isComplete;
                }
            }
        });
    }
    
    // Show feature section
    function showFeature(featureIndex) {
        featureSections.forEach((section, index) => {
            section.style.display = (index + 1 === featureIndex) ? 'block' : 'none';
        });
        currentFeature = featureIndex;
        updateProgress();
        updateNavigation();
        saveProgress(); // Auto-save when changing sections

        // Scroll to top
        window.scrollTo(0, 0);
    }
    
    // Next button handlers
    document.querySelectorAll('.next-btn').forEach((btn, index) => {
        btn.addEventListener('click', function() {
            if (checkFeatureComplete(index + 1)) {
                showFeature(index + 2);
            }
        });
    });
    
    // Previous button handlers
    document.querySelectorAll('.prev-btn').forEach((btn, index) => {
        btn.addEventListener('click', function() {
            showFeature(index);
        });
    });
    
    // Listen for answer changes
    form.addEventListener('change', function(e) {
        updateNavigation();
        // Auto-save when answer changes
        if (e.target.type === 'radio') {
            saveProgress();
        }
    });
    
    // Submit with confirmation
    if (submitBtn) {
        submitBtn.addEventListener('click', function(e) {
            e.preventDefault();
            const modal = new bootstrap.Modal(document.getElementById('submitConfirmModal'));
            modal.show();
        });
    }
    
    // Confirm submit
    confirmSubmitBtn.addEventListener('click', function() {
        // Collect all form data
        const formData = new FormData(form);
        const answers = {};
        
        for (let [key, value] of formData.entries()) {
            answers[key] = value;
        }
        
        // Show loading
        Swal.fire({
            title: '{{ t("public.submitting_survey") }}',
            text: '{{ t("public.wait_save") }}',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });
        
        // Submit via fetch
        fetch(form.action, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(answers)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Mark survey as completed in localStorage
                const completedSurveys = JSON.parse(localStorage.getItem('completedSurveys') || '[]');

                if (!completedSurveys.includes(projectSlug)) {
                    completedSurveys.push(projectSlug);
                    localStorage.setItem('completedSurveys', JSON.stringify(completedSurveys));
                }

                // Remove current survey person data
                localStorage.removeItem('currentSurveyPerson');

                // Clear progress data
                clearProgress();

                // Redirect to completion page using URL from server
                window.location.href = data.redirect_url;
            } else {
                throw new Error('Submission failed');
            }
        })
        .catch(error => {
            Swal.fire({
                title: '{{ t("public.submission_error") }}',
                text: '{{ t("public.submission_error_message") }}',
                icon: 'error',
                confirmButtonText: 'OK'
            });
        });
    });

    // Initialize - restore progress first, then update UI
    const wasRestored = restoreProgress();
    if (wasRestored) {
        Swal.fire({
            title: '{{ t("public.progress_restored") if t("public.progress_restored") else "Progreso Recuperado" }}',
            text: '{{ t("public.progress_restored_message") if t("public.progress_restored_message") else "Hemos restaurado tus respuestas anteriores. Puedes continuar desde donde lo dejaste." }}',
            icon: 'info',
            confirmButtonText: 'OK',
            timer: 3000
        });
    }

    updateProgress();
    updateNavigation();

    // Track if user is actively trying to leave
    let isLeavingPage = false;
    let shouldPreventLeave = true;

    // Prevent accidental page reload with custom SweetAlert modal
    window.addEventListener('beforeunload', function(e) {
        if (shouldPreventLeave && (currentFeature > 1 || form.querySelector('input:checked'))) {
            e.preventDefault();
            e.returnValue = '';
            return '';
        }
    });

    // Intercept navigation attempts (back button, links, etc.)
    window.addEventListener('popstate', function(e) {
        if (shouldPreventLeave && (currentFeature > 1 || form.querySelector('input:checked'))) {
            e.preventDefault();
            history.pushState(null, null, window.location.href);
            showLeaveConfirmation();
        }
    });

    // Add initial history state
    history.pushState(null, null, window.location.href);

    // Function to show custom leave confirmation
    function showLeaveConfirmation() {
        Swal.fire({
            title: '{{ t("public.leave_page_warning") }}',
            text: '{{ t("public.leave_page_text") }}',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: '{{ t("public.leave_confirm_button") }}',
            cancelButtonText: '{{ t("public.leave_cancel_button") }}',
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {
                shouldPreventLeave = false;
                history.back();
            }
        });
    }

    // Allow form submission without confirmation
    form.addEventListener('submit', function() {
        shouldPreventLeave = false;
    });
});
</script>
{% endblock %}