{% extends "global/Page.html" %}
{% load otree %}

{% block title %}
    Результаты
{% endblock %}

{% block content %}
    <style>
        .result-box {
            border: 2px solid #dee2e6;
            border-radius: 8px;
            padding: 25px;
            margin-bottom: 25px;
            background-color: #f8f9fa;
        }
        
        .result-box.correct {
            border-color: #28a745;
            background-color: #d4edda;
        }
        
        .result-box.incorrect {
            border-color: #dc3545;
            background-color: #f8d7da;
        }
        
        .result-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 15px;
        }
        
        .result-item {
            font-size: 16px;
            margin: 10px 0;
            padding: 10px;
            background-color: white;
            border-radius: 5px;
        }
        
        .result-status {
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
        }
        
        .result-status.success {
            background-color: #d4edda;
            color: #155724;
            border: 2px solid #28a745;
        }
        
        .result-status.failure {
            background-color: #f8d7da;
            color: #721c24;
            border: 2px solid #dc3545;
        }
        
        .badge-correct {
            background-color: #28a745;
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: bold;
        }
        
        .badge-incorrect {
            background-color: #dc3545;
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: bold;
        }
    </style>

    <div class="card">
        <div class="card-body">
            <h3 class="text-center mb-4">📊 Ваши результаты</h3>
            
            <!-- Информация о выбранном вопросе -->
            <div class="alert alert-info mb-4">
                <strong>ℹ️ Информация:</strong><br>
                Компьютер случайным образом выбрал 
                {% if selected_question == 1 %}
                    <strong>Вопрос 1</strong> (средний взнос GPT)
                {% else %}
                    <strong>Вопрос 2</strong> (разброс между моделями)
                {% endif %}
                для проверки.
            </div>
            
            <!-- РЕЗУЛЬТАТ ПРОВЕРЕННОГО ВОПРОСА -->
            <div class="result-box {% if is_correct %}correct{% else %}incorrect{% endif %}">
                <div class="result-title">
                    {% if selected_question == 1 %}
                        Вопрос 1: Средний взнос GPT
                    {% else %}
                        Вопрос 2: Разброс между моделями
                    {% endif %}
                    
                    {% if is_correct %}
                        <span class="badge-correct">✓ ВЕРНО</span>
                    {% else %}
                        <span class="badge-incorrect">✗ НЕВЕРНО</span>
                    {% endif %}
                </div>
                
                <div class="result-item">
                    <strong>Вопрос:</strong> 
                    {% if selected_question == 1 %}
                        {{ question_text_1 }}
                    {% else %}
                        {{ question_text_2 }}
                    {% endif %}
                </div>
                
                <div class="result-item">
                    <strong>Ваш ответ:</strong> {{ answer }} долларов
                </div>
                
                <div class="result-item">
                    <strong>Правильный ответ:</strong> {{ correct_answer }} долларов 
                    (допустимое отклонение ±2 долларов)
                </div>
            </div>
            
            <hr>
            
            <!-- ОБЩИЙ РЕЗУЛЬТАТ -->
            {% if is_correct %}
                <div class="result-status success">
                    🎉 ПОЗДРАВЛЯЕМ! 🎉<br>
                    Вы правильно ответили на выбранный вопрос!<br>
                    <div style="margin-top: 15px; font-size: 28px;">
                        Ваше вознаграждение: {{ reward }}
                    </div>
                </div>
            {% else %}
                <div class="result-status failure">
                    К сожалению, ваш ответ не попал в допустимый диапазон.<br>
                    <div style="margin-top: 15px; font-size: 20px;">
                        Вознаграждение: 0 рублей
                    </div>
                </div>
            {% endif %}
            
            <div class="alert alert-info mt-4">
                <strong>📌 Интересные факты о результатах эксперимента:</strong><br>
                • GPT в среднем вносил около 3 долларов в общий фонд<br>
                • Стандартное отклонение между всеми 8 моделями составило около 22 долларов<br>
                • Две модели вели себя как кооператоры (~50 долларов), остальные шесть — как дефекторы (~0 долларов)<br>
                • Разные модели ИИ демонстрируют кардинально различающееся поведение в одной и той же игре!
            </div>
            
            {% next_button %}
        </div>
    </div>
{% endblock %}