{% extends 'base.html' %}

{% block title %}{{ task.title }} - Python Trainer{% endblock %}

{% block head %}
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/codemirror.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/theme/monokai.min.css" rel="stylesheet">
{% endblock %}

{% block content %}
<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ url_for('teacher.lessons') }}">Уроки</a></li>
        {% if task.lesson.topic %}
        <li class="breadcrumb-item"><a href="{{ url_for('teacher.lessons', topic_id=task.lesson.topic_id) }}">{{ task.lesson.topic.name }}</a></li>
        {% endif %}
        <li class="breadcrumb-item"><a href="{{ url_for('teacher.lesson_edit', lesson_id=task.lesson.id) }}">{{ task.lesson.title }}</a></li>
        <li class="breadcrumb-item active">{{ task.title }}</li>
    </ol>
</nav>

<div class="row">
    <div class="col-lg-8">
        <!-- Редактирование задания -->
        <div class="card shadow-sm mb-4">
            <div class="card-header">
                <h5 class="mb-0">Редактирование задания</h5>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ url_for('teacher.update_task', task_id=task.id) }}" id="taskForm">
                    <div class="mb-3">
                        <label for="taskTitle" class="form-label">Название</label>
                        <input type="text" class="form-control" id="taskTitle" name="title"
                               value="{{ task.title }}" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Описание задания</label>
                        <div id="editor" style="height: 300px;">{% if task.description %}{{ task.description|safe }}{% endif %}</div>
                        <input type="hidden" name="description" id="description">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Код по умолчанию <small class="text-muted">(необязательно)</small></label>
                        <textarea id="defaultCode" name="default_code" style="height: 150px;">{{ task.default_code or '' }}</textarea>
                        <div class="form-text">Этот код будет показан ученику при открытии задания</div>
                    </div>
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="isBonus" name="is_bonus" value="1"
                               {% if task.is_bonus %}checked{% endif %}>
                        <label class="form-check-label" for="isBonus">
                            <i class="bi bi-star text-warning"></i> Дополнительное задание
                        </label>
                        <div class="form-text">Доступно ученикам только после выполнения всех основных заданий</div>
                    </div>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-lg"></i> Сохранить
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <!-- Тесты -->
        <div class="card shadow-sm">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Тесты</h5>
                <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#createTestModal">
                    <i class="bi bi-plus-lg"></i>
                </button>
            </div>
            <div class="card-body" id="testsContainer">
                {% if task.test_cases %}
                {% for test in task.test_cases %}
                <div class="card mb-2 test-card" data-test-id="{{ test.id }}">
                    <div class="card-body py-2">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="fw-bold small">Тест #{{ loop.index }}</span>
                            <div class="d-flex gap-1 align-items-center">
                                <div class="form-check form-check-inline mb-0">
                                    <input class="form-check-input test-hidden" type="checkbox" id="hidden{{ test.id }}"
                                           data-test-id="{{ test.id }}" {% if test.is_hidden %}checked{% endif %}>
                                    <label class="form-check-label small" for="hidden{{ test.id }}">
                                        <i class="bi bi-eye-slash"></i> Скрытый
                                    </label>
                                </div>
                                <form method="POST" action="{{ url_for('teacher.delete_test', test_id=test.id) }}"
                                      style="display: inline;" onsubmit="return confirm('Удалить тест?');">
                                    <button type="submit" class="btn btn-outline-danger btn-sm py-0">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                        <div class="row g-2">
                            <div class="col-6">
                                <label class="form-label small mb-1">Ввод</label>
                                <textarea class="form-control form-control-sm test-input" rows="2"
                                          data-test-id="{{ test.id }}" placeholder="(нет ввода)">{{ test.input_data or '' }}</textarea>
                            </div>
                            <div class="col-6">
                                <label class="form-label small mb-1">Вывод</label>
                                <textarea class="form-control form-control-sm test-output" rows="2"
                                          data-test-id="{{ test.id }}" placeholder="Ожидаемый вывод">{{ test.expected_output }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
                {% else %}
                <p class="text-muted mb-0" id="noTestsMessage">Нет тестов. Добавьте хотя бы один тест.</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Modal: Создать тест -->
<div class="modal fade" id="createTestModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ url_for('teacher.create_test', task_id=task.id) }}">
                <div class="modal-header">
                    <h5 class="modal-title">Добавить тест</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="inputData" class="form-label">Входные данные</label>
                        <textarea class="form-control" id="inputData" name="input_data" rows="3"
                                  placeholder="Каждая строка - отдельный ввод"></textarea>
                        <div class="form-text">Оставьте пустым, если ввод не требуется</div>
                    </div>
                    <div class="mb-3">
                        <label for="expectedOutput" class="form-label">Ожидаемый вывод</label>
                        <textarea class="form-control" id="expectedOutput" name="expected_output" rows="3"
                                  placeholder="Что должна вывести программа" required></textarea>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="isHidden" name="is_hidden" value="1">
                        <label class="form-check-label" for="isHidden">
                            <i class="bi bi-eye-slash"></i> Скрытый тест
                        </label>
                        <div class="form-text">Ученик не увидит входные и выходные данные этого теста</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                    <button type="submit" class="btn btn-primary">Добавить</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/mode/python/python.min.js"></script>
<script>
    // Quill для описания
    const quill = new Quill('#editor', {
        theme: 'snow',
        placeholder: 'Опишите задание для ученика...',
        modules: {
            toolbar: [
                [{ 'header': [1, 2, 3, false] }],
                ['bold', 'italic', 'underline', 'code'],
                [{ 'color': [] }, { 'background': [] }],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                ['code-block'],
                ['clean']
            ]
        }
    });

    // CodeMirror для кода по умолчанию
    const codeEditor = CodeMirror.fromTextArea(document.getElementById('defaultCode'), {
        mode: 'python',
        theme: 'monokai',
        lineNumbers: true,
        indentUnit: 4,
        tabSize: 4,
        indentWithTabs: false,
        extraKeys: {
            'Tab': function(cm) {
                cm.replaceSelection('    ', 'end');
            }
        }
    });

    // Сохранение при submit формы
    document.getElementById('taskForm').addEventListener('submit', function() {
        document.getElementById('description').value = quill.root.innerHTML;
        codeEditor.save();
    });

    // ===== Автосохранение =====
    let saveTimer = null;
    let saving = false;
    const saveUrl = '/teacher/tasks/{{ task.id }}/autosave';
    const statusEl = document.createElement('span');
    statusEl.className = 'text-muted ms-2 small';
    document.querySelector('.card-header h5').appendChild(statusEl);

    function showStatus(text, cls) {
        statusEl.textContent = text;
        statusEl.className = 'ms-2 small ' + cls;
    }

    function scheduleAutosave() {
        if (saveTimer) clearTimeout(saveTimer);
        showStatus('(есть изменения)', 'text-warning ms-2 small');
        saveTimer = setTimeout(doAutosave, 2000);
    }

    function doAutosave() {
        if (saving) return;
        saving = true;
        showStatus('Сохранение...', 'text-info ms-2 small');

        codeEditor.save();
        const data = {
            title: document.getElementById('taskTitle').value,
            description: quill.root.innerHTML,
            default_code: document.getElementById('defaultCode').value,
            is_bonus: document.getElementById('isBonus').checked
        };

        fetch(saveUrl, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        })
        .then(r => r.json())
        .then(res => {
            if (res.success) {
                showStatus('Сохранено', 'text-success ms-2 small');
                setTimeout(() => {
                    if (statusEl.textContent === 'Сохранено') statusEl.textContent = '';
                }, 3000);
            } else {
                showStatus('Ошибка сохранения', 'text-danger ms-2 small');
            }
        })
        .catch(() => showStatus('Ошибка сети', 'text-danger ms-2 small'))
        .finally(() => { saving = false; });
    }

    // Слушаем изменения
    quill.on('text-change', scheduleAutosave);
    codeEditor.on('change', scheduleAutosave);
    document.getElementById('taskTitle').addEventListener('input', scheduleAutosave);
    document.getElementById('isBonus').addEventListener('change', scheduleAutosave);

    // ===== Автосохранение тестов =====
    let testSaveTimer = null;

    function saveTest(testId) {
        const card = document.querySelector(`.test-card[data-test-id="${testId}"]`);
        if (!card) return;

        const inputData = card.querySelector('.test-input').value;
        const expectedOutput = card.querySelector('.test-output').value;
        const isHidden = card.querySelector('.test-hidden').checked;

        showStatus('Сохранение...', 'text-info ms-2 small');
        fetch(`/teacher/tests/${testId}/update`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                input_data: inputData,
                expected_output: expectedOutput,
                is_hidden: isHidden
            })
        })
        .then(r => r.json())
        .then(res => {
            if (res.success) {
                showStatus('Сохранено', 'text-success ms-2 small');
                setTimeout(() => {
                    if (statusEl.textContent === 'Сохранено') statusEl.textContent = '';
                }, 3000);
            }
        })
        .catch(() => showStatus('Ошибка', 'text-danger ms-2 small'));
    }

    document.getElementById('testsContainer').addEventListener('input', function(e) {
        if (e.target.classList.contains('test-input') || e.target.classList.contains('test-output')) {
            const testId = e.target.dataset.testId;
            clearTimeout(testSaveTimer);
            showStatus('(есть изменения)', 'text-warning ms-2 small');
            testSaveTimer = setTimeout(() => saveTest(testId), 1500);
        }
    });

    document.getElementById('testsContainer').addEventListener('change', function(e) {
        if (e.target.classList.contains('test-hidden')) {
            const testId = e.target.dataset.testId;
            saveTest(testId);
        }
    });
</script>
{% endblock %}