{% extends 'lms/base.html' %}

{% block title %}{{ assignment.title }} | ЕГЭ LMS{% endblock %}

{% block content %}
<div class="mb-8">
    <a href="{% url 'lms:dashboard' %}" class="text-blue-600 hover:underline mb-4 inline-block">&larr; Назад к списку</a>
    <h1 class="text-3xl font-bold text-gray-900">{{ assignment.title }}</h1>
    <div class="mt-2 text-sm text-gray-500 flex gap-4">
        <span>Предмет: {{ assignment.subject.name }}</span>
    </div>
</div>

<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-8">
    <h3 class="text-xl font-semibold mb-4">Описание задания</h3>
    <div class="prose max-w-none text-gray-700">
        {{ assignment.description|safe }}
    </div>

</div>

<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
    <h3 class="text-xl font-semibold mb-4">Ваш ответ</h3>
    
    {% if submission and submission.status != 'IN_PROGRESS' %}
        <div class="mb-6 p-4 rounded-lg border {% if submission.status == 'GRADED' %}bg-green-50 text-green-800 border-green-200{% else %}bg-yellow-50 text-yellow-800 border-yellow-200{% endif %}">
            {% if submission.status == 'GRADED' %}
                <h4 class="font-bold mb-2">Оценка: {{ submission.grade|default:"Не выставлена" }}</h4>
            {% else %}
                <p>Ваша работа отправлена и ожидает проверки.</p>
            {% endif %}
            
            {% if submission.teacher_feedback %}
                <p class="mt-2"><strong>Общий комментарий:</strong> {{ submission.teacher_feedback }}</p>
            {% endif %}
        </div>
        
        <h4 class="font-bold mb-4 text-gray-800">Ваши ответы на задачи:</h4>
        <div class="space-y-4">
            {% for answer in submission.answers.all %}
            <div class="p-4 bg-gray-50 border rounded-lg">
                <h5 class="font-medium text-sm text-gray-500 mb-2">Задача {{ forloop.counter }}: {{ answer.question.text|striptags|truncatewords:10 }}</h5>
                {% if answer.question.question_type == 'TEXT_AUTO' %}
                    <p class="text-gray-800"><strong>Ваш ответ:</strong> {{ answer.text_answer|default:"Нет" }}</p>
                    <p class="text-sm mt-1 {% if answer.is_correct %}text-green-600{% elif answer.is_correct == False %}text-red-600{% else %}text-gray-500{% endif %}">
                        {% if answer.is_correct %}
                            <span class="material-icons text-[14px] align-middle">check_circle</span> Верно
                        {% elif answer.is_correct == False %}
                            <span class="material-icons text-[14px] align-middle">cancel</span> Неверно
                        {% else %}
                            <span class="material-icons text-[14px] align-middle">help_outline</span> Ожидает проверки
                        {% endif %}
                    </p>
                {% elif answer.question.question_type == 'TABLE_AUTO' %}
                    <p class="text-gray-800 mb-2"><strong>Ваш ответ:</strong></p>
                    {% load lms_tags %}
                    {% with table_data=answer.text_answer|parse_json %}
                    {% if table_data %}
                        <table class="w-full border-collapse border border-gray-300 mb-4 text-sm bg-white">
                            {% for row in table_data %}
                            <tr>
                                <td class="border border-gray-300 p-2">{{ row.0 }}</td>
                                <td class="border border-gray-300 p-2">{{ row.1 }}</td>
                            </tr>
                            {% endfor %}
                        </table>
                    {% else %}
                        <p class="text-gray-800">Нет ответа</p>
                    {% endif %}
                    {% endwith %}
                    <p class="text-sm mt-1 {% if answer.is_correct %}text-green-600{% elif answer.is_correct == False %}text-red-600{% else %}text-gray-500{% endif %}">
                        {% if answer.is_correct %}
                            <span class="material-icons text-[14px] align-middle">check_circle</span> Верно
                        {% elif answer.is_correct == False %}
                            <span class="material-icons text-[14px] align-middle">cancel</span> Неверно
                        {% else %}
                            <span class="material-icons text-[14px] align-middle">help_outline</span> Ожидает проверки
                        {% endif %}
                    </p>
                {% else %}
                    {% if answer.file_answer %}
                        <p class="text-gray-800"><strong>Прикрепленный файл:</strong> <a href="{{ answer.file_answer.url }}" class="text-blue-600 hover:underline">Скачать</a></p>
                    {% else %}
                        <p class="text-gray-500">Файл не прикреплен</p>
                    {% endif %}
                {% endif %}
                
                {% if answer.points is not None %}
                    <p class="mt-2 text-sm text-blue-800 font-medium">Баллы: {{ answer.points }}</p>
                {% endif %}
                {% if answer.comment %}
                    <p class="mt-1 text-sm text-gray-700 bg-white p-2 rounded border"><strong>Комментарий:</strong> {{ answer.comment }}</p>
                {% endif %}
            </div>
            {% endfor %}
        </div>
    {% elif needs_start %}
        <div class="mb-6 p-8 text-center rounded-2xl border bg-indigo-50 border-indigo-200">
            <span class="material-icons text-indigo-500 text-6xl mb-4">hourglass_top</span>
            <h4 class="text-2xl font-bold mb-2 text-indigo-900">Задание на время</h4>
            <p class="text-indigo-800 text-lg mb-6">На выполнение этого задания отводится <strong>{{ assignment.time_limit }} минут(ы)</strong>. Как только вы нажмете кнопку ниже, запустится обратный отсчет. По истечении времени ваши ответы будут отправлены автоматически.</p>
            
            <form method="post">
                {% csrf_token %}
                <input type="hidden" name="action" value="start">
                <button type="submit" class="px-8 py-4 bg-indigo-600 text-white text-lg font-bold rounded-xl shadow hover:bg-indigo-700 transition">
                    Начать выполнение
                </button>
            </form>
        </div>
    {% elif not can_submit %}
        <div class="mb-6 p-4 rounded-lg border bg-red-50 text-red-800 border-red-200">
            <h4 class="font-bold mb-2">Прием ответов завершен</h4>
            <p>Вы больше не можете отправлять ответы, так как дедлайн истек или время на выполнение закончилось.</p>
        </div>
    {% else %}
        {% if time_left_seconds is not None %}
        <div id="timer-banner" class="sticky top-4 z-50 mb-6 p-4 rounded-xl border bg-indigo-600 text-white shadow-lg flex justify-between items-center">
            <div class="flex items-center gap-2">
                <span class="material-icons animate-pulse">timer</span>
                <span class="font-medium text-lg">Осталось времени:</span>
            </div>
            <div class="text-2xl font-mono font-bold tracking-wider" id="countdown-display">
                --:--:--
            </div>
        </div>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                let timeLeft = {{ time_left_seconds }};
                const display = document.getElementById('countdown-display');
                const form = document.getElementById('assignment-form');
                
                function updateTimer() {
                    if (timeLeft <= 0) {
                        display.textContent = '00:00:00';
                        display.classList.add('text-red-300');
                        // Auto submit
                        if (form) {
                            // Prevent multiple submissions
                            form.onsubmit = null;
                            const btn = form.querySelector('button[type="submit"]');
                            if (btn) btn.disabled = true;
                            
                            // Append a hidden flag
                            const input = document.createElement('input');
                            input.type = 'hidden';
                            input.name = 'auto_submit';
                            input.value = '1';
                            form.appendChild(input);
                            
                            form.submit();
                        }
                        return;
                    }
                    
                    const h = Math.floor(timeLeft / 3600);
                    const m = Math.floor((timeLeft % 3600) / 60);
                    const s = timeLeft % 60;
                    display.textContent = 
                        (h > 0 ? (h < 10 ? '0' + h : h) + ':' : '') + 
                        (m < 10 ? '0' + m : m) + ':' + 
                        (s < 10 ? '0' + s : s);
                        
                    if (timeLeft < 60) {
                        display.classList.add('text-red-300', 'animate-pulse');
                    }
                    
                    timeLeft--;
                    setTimeout(updateTimer, 1000);
                }
                
                if (timeLeft > 0) {
                    updateTimer();
                }
            });
        </script>
        {% endif %}
        
        <form id="assignment-form" method="post" enctype="multipart/form-data" class="space-y-6">
            {% csrf_token %}
            
            {% for q, field_type, field in question_fields %}
            <div class="p-5 border rounded-xl bg-gray-50 border-gray-200">
                <h4 class="font-semibold text-lg mb-2 text-gray-800">Задача {{ forloop.counter }}</h4>
                <div class="prose max-w-none text-gray-700 mb-4">
                    {{ q.text|safe }}
                </div>
                
                {% if q.attached_file %}
                <div class="mb-4">
                    <a href="{{ q.attached_file.url }}" class="inline-flex items-center px-3 py-1.5 bg-white border text-gray-700 rounded hover:bg-gray-50 transition text-sm" target="_blank">
                        <span class="material-icons mr-1 text-[16px]">attach_file</span> Скачать файл к задаче
                    </a>
                </div>
                {% endif %}
                
                <div class="bg-white p-4 rounded-lg border border-gray-200">
                    {% if field_type == 'table' %}
                        <p class="block text-sm font-medium text-gray-700 mb-2">Заполните таблицу:</p>
                        <table class="w-full border-collapse border border-gray-300 mb-4">
                            {% for row_fields in field %}
                            <tr>
                                <td class="border border-gray-300 p-2">{{ row_fields.0 }}</td>
                                <td class="border border-gray-300 p-2">{{ row_fields.1 }}</td>
                            </tr>
                            {% endfor %}
                        </table>
                    {% else %}
                        <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">{{ field.label }}</label>
                        {{ field }}
                        {% if field.errors %}
                        <p class="mt-1 text-sm text-red-600">{{ field.errors.0 }}</p>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
            {% endfor %}
            
            <div class="pt-4">
                <button type="submit" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition font-medium">
                    Отправить ответ
                </button>
            </div>
        </form>
    {% endif %}
</div>
{% endblock %}