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

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

{% block content %}
<div class="container my-5">
    <!-- Header -->
    <div class="text-center mb-5">
        <div class="mb-3">
            <i class="fas fa-check-circle text-success" style="font-size: 4rem;"></i>
        </div>
        <h1 class="display-4 mb-3">{{ t('public.survey_completed', '¡Survey Completed!') }}</h1>
        <p class="lead text-muted">{{ t('public.thank_you', 'Thank you for your participation') }}, <strong>{{ person.name }}</strong>!</p>
    </div>

    <!-- Results Section -->
    <div class="row g-4">
        <!-- Radar Chart -->
        <div class="col-12 col-lg-6">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-radar me-2"></i>{{ t('public.your_temperament_profile', 'Your Temperament Profile') }}
                    </h5>
                </div>
                <div class="card-body">
                    <canvas id="radarChart" height="300"></canvas>
                </div>
            </div>
        </div>

        <!-- Bar Chart -->
        <div class="col-12 col-lg-6">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-bar me-2"></i>{{ t('public.temperament_breakdown', 'Temperament Breakdown') }}
                    </h5>
                </div>
                <div class="card-body">
                    <canvas id="barChart" height="300"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Temperament Details -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-list-ul me-2"></i>{{ t('public.detailed_scores', 'Detailed Scores') }}
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        {% for temp in temps %}
                        <div class="col-12 col-md-6">
                            <div class="d-flex align-items-center mb-2">
                                <div class="me-3" style="width: 20px; height: 20px; background-color: {{ temp.color }}; border-radius: 4px;"></div>
                                <strong>{{ temp.name }}</strong>
                            </div>
                            <div class="progress" style="height: 25px;">
                                {% set score = scores.get(temp.id, 0) %}
                                {% set total_with_temperament = scores.values()|sum %}
                                {% set percentage = (score / total_with_temperament * 100)|int if total_with_temperament > 0 else 0 %}
                                <div class="progress-bar" role="progressbar"
                                     style="width: {{ percentage }}%; background-color: {{ temp.color }};"
                                     aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100">
                                    {{ score }} ({{ percentage }}%)
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recommendation -->
    {% if recommendation %}
    <div class="row mt-4">
        <div class="col-12">
            <div class="card shadow-sm border-success">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-lightbulb me-2"></i>{{ t('public.recommendation_for_you', 'Recommendation for You') }}
                    </h5>
                </div>
                <div class="card-body">
                    <h4 class="card-title">{{ recommendation.name }}</h4>
                    {% if recommendation.description %}
                    <p class="card-text" style="white-space: pre-line;">{{ recommendation.description }}</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Action Buttons -->
    <div class="text-center mt-5">
        <a href="{{ url_for('public.survey', slug=project.slug) }}" class="btn btn-primary btn-lg">
            <i class="fas fa-home me-2"></i>{{ t('public.back_to_home', 'Back to Home') }}
        </a>
        <button onclick="window.print()" class="btn btn-outline-secondary btn-lg ms-2">
            <i class="fas fa-print me-2"></i>{{ t('public.print_results', 'Print Results') }}
        </button>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
    const temps = {{ temps|tojson }};
    const scores = {{ scores|tojson }};

    // Prepare data
    const labels = temps.map(t => t.name);
    const colors = temps.map(t => t.color || '#888');
    const data = temps.map(t => scores[String(t.id)] || scores[t.id] || 0);

    // Radar Chart
    const radarCtx = document.getElementById('radarChart');
    new Chart(radarCtx, {
        type: 'radar',
        data: {
            labels: labels,
            datasets: [{
                label: '{{ t('charts.temperaments', 'Temperaments') }}',
                data: data,
                backgroundColor: 'rgba(76, 110, 245, 0.2)',
                borderColor: '#4c6ef5',
                pointBackgroundColor: colors,
                pointBorderColor: '#fff',
                pointHoverBackgroundColor: '#fff',
                pointHoverBorderColor: colors
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                r: {
                    beginAtZero: true,
                    ticks: {
                        precision: 0
                    }
                }
            }
        }
    });

    // Bar Chart
    const barCtx = document.getElementById('barChart');
    new Chart(barCtx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: '{{ t('public.count', 'Count') }}',
                data: data,
                backgroundColor: colors,
                borderColor: colors.map(c => c),
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        precision: 0
                    }
                }
            }
        }
    });
});
</script>

<style>
@media print {
    .btn, .card-header {
        display: none !important;
    }
    .card {
        border: 1px solid #ddd !important;
        page-break-inside: avoid;
    }
}
</style>
{% endblock %}