{% extends 'base.html' %}

{% block title %}{{ lesson.title }} - Python Trainer{% 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 lesson.topic %}
        <li class="breadcrumb-item"><a href="{{ url_for('teacher.lessons', topic_id=lesson.topic.id) }}">{{ lesson.topic.name }}</a></li>
        {% endif %}
        <li class="breadcrumb-item active">{{ lesson.title }}</li>
    </ol>
</nav>

<div class="row">
    <div class="col-lg-8">
        <!-- Настройки урока -->
        <div class="card shadow-sm mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Настройки урока <span id="saveStatus" class="ms-2" style="font-size: 0.75rem;"></span></h5>
                <form method="POST" action="{{ url_for('teacher.delete_lesson', lesson_id=lesson.id) }}"
                      style="display: inline;"
                      onsubmit="return confirm('Удалить урок?');">
                    <button type="submit" class="btn btn-outline-danger btn-sm">
                        <i class="bi bi-trash"></i> Удалить урок
                    </button>
                </form>
            </div>
            <div class="card-body">
                <input type="text" class="form-control" id="lessonTitle" value="{{ lesson.title }}" required>
            </div>
        </div>

        <!-- Задания -->
        <div class="card shadow-sm mb-4">
            <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="#createTaskModal">
                    <i class="bi bi-plus-lg"></i> Добавить задание
                </button>
            </div>
            <div class="card-body">
                {% if lesson.tasks %}
                <div class="list-group" id="tasksList">
                    {% for task in lesson.tasks %}
                    <div class="list-group-item d-flex justify-content-between align-items-center task-item" data-task-id="{{ task.id }}" draggable="true">
                        <div class="d-flex align-items-center">
                            <span class="drag-handle me-2" style="cursor: grab;" title="Перетащите для перестановки">
                                <i class="bi bi-grip-vertical text-muted"></i>
                            </span>
                            <span class="badge bg-secondary me-2 task-order">{{ task.order }}</span>
                            {% if task.task_type == 'quiz' %}
                            <i class="bi bi-question-circle text-info me-1"></i>
                            {% else %}
                            <i class="bi bi-code-slash text-primary me-1"></i>
                            {% endif %}
                            <strong>{{ task.title }}</strong>
                            {% if task.is_bonus %}
                            <span class="badge bg-info ms-1">доп.</span>
                            {% endif %}
                            {% if task.task_type == 'quiz' %}
                            <small class="text-muted ms-2">{{ task.quiz_elements|selectattr('element_type', 'ne', 'text')|list|length }} вопросов</small>
                            {% else %}
                            <small class="text-muted ms-2">{{ task.test_cases|length }} тестов</small>
                            {% endif %}
                        </div>
                        <div class="d-flex gap-1">
                            <button class="btn btn-outline-secondary btn-sm move-btn" data-direction="up" title="Вверх">
                                <i class="bi bi-arrow-up"></i>
                            </button>
                            <button class="btn btn-outline-secondary btn-sm move-btn" data-direction="down" title="Вниз">
                                <i class="bi bi-arrow-down"></i>
                            </button>
                            <a href="{{ url_for('teacher.task_edit', task_id=task.id) }}" class="btn btn-outline-primary btn-sm">
                                <i class="bi bi-pencil"></i>
                            </a>
                            <form method="POST" action="{{ url_for('teacher.delete_task', task_id=task.id) }}"
                                  style="display: inline;"
                                  onsubmit="return confirm('Удалить задание?');">
                                <button type="submit" class="btn btn-outline-danger btn-sm">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <p class="text-muted mb-0">В уроке пока нет заданий.</p>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <!-- Назначение классам -->
        <div class="card shadow-sm">
            <div class="card-header">
                <h5 class="mb-0">Назначить классам</h5>
            </div>
            <div class="card-body">
                {% if classes %}
                {% for class in classes %}
                <div class="form-check mb-2">
                    <input class="form-check-input assign-checkbox" type="checkbox" name="class_ids"
                           value="{{ class.id }}" id="class{{ class.id }}"
                           {% if class.id in assigned_class_ids %}checked{% endif %}>
                    <label class="form-check-label" for="class{{ class.id }}">
                        {{ class.name }} ({{ class.students|length }} уч.)
                    </label>
                </div>
                {% endfor %}
                {% else %}
                <p class="text-muted mb-0">У вас пока нет классов.</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Modal: Создать задание -->
<div class="modal fade" id="createTaskModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ url_for('teacher.create_task', lesson_id=lesson.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="taskTitle" class="form-label">Название задания</label>
                        <input type="text" class="form-control" id="taskTitle" name="title"
                               placeholder="например: Сумма чисел" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Тип задания</label>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="task_type" value="code" id="typeCode" checked>
                            <label class="form-check-label" for="typeCode">
                                <i class="bi bi-code-slash"></i> Программирование
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="task_type" value="quiz" id="typeQuiz">
                            <label class="form-check-label" for="typeQuiz">
                                <i class="bi bi-question-circle"></i> Тест
                            </label>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="is_bonus" id="isBonus">
                            <label class="form-check-label" for="isBonus">
                                Дополнительное задание
                            </label>
                            <div class="form-text">Будет доступно ученику только после выполнения основных заданий</div>
                        </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>
    const lessonId = {{ lesson.id }};
    let saveTimer = null;

    const statusEl = document.getElementById('saveStatus');
    let statusTimer = null;

    function showStatus(icon, cls, tooltip) {
        clearTimeout(statusTimer);
        statusEl.innerHTML = '<i class="bi ' + icon + '" title="' + tooltip + '"></i>';
        statusEl.className = 'ms-2 ' + cls;
        if (icon === 'bi-check-circle-fill') {
            statusTimer = setTimeout(() => { statusEl.innerHTML = ''; }, 3000);
        }
    }

    // Автосохранение названия
    document.getElementById('lessonTitle').addEventListener('input', function() {
        clearTimeout(saveTimer);
        showStatus('bi-pencil-fill', 'text-warning', 'Есть несохранённые изменения');
        saveTimer = setTimeout(() => {
            showStatus('bi-arrow-repeat', 'text-info', 'Сохранение...');
            fetch('/teacher/lessons/' + lessonId + '/autosave', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({title: this.value})
            })
            .then(r => r.json())
            .then(res => {
                if (res.success) showStatus('bi-check-circle-fill', 'text-success', 'Сохранено');
            })
            .catch(() => showStatus('bi-exclamation-triangle-fill', 'text-danger', 'Ошибка сохранения'));
        }, 1500);
    });

    // Автосохранение назначений
    function saveAssignments() {
        const classIds = Array.from(document.querySelectorAll('.assign-checkbox:checked'))
            .map(cb => parseInt(cb.value));

        showStatus('bi-arrow-repeat', 'text-info', 'Сохранение...');
        fetch('/teacher/lessons/' + lessonId + '/assign', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({class_ids: classIds})
        })
        .then(r => r.json())
        .then(res => {
            if (res.success) showStatus('bi-check-circle-fill', 'text-success', 'Сохранено');
        })
        .catch(() => showStatus('bi-exclamation-triangle-fill', 'text-danger', 'Ошибка сохранения'));
    }

    document.querySelectorAll('.assign-checkbox').forEach(cb => {
        cb.addEventListener('change', saveAssignments);
    });

    // ===== Перемещение заданий: кнопки =====
    function renumberTasks() {
        const items = document.querySelectorAll('#tasksList .task-item');
        items.forEach((item, index) => {
            const badge = item.querySelector('.task-order');
            if (badge) badge.textContent = index + 1;
        });
    }

    document.querySelectorAll('.move-btn').forEach(btn => {
        btn.addEventListener('click', async function(e) {
            e.preventDefault();
            const taskItem = this.closest('.task-item');
            const taskId = taskItem.dataset.taskId;
            const direction = this.dataset.direction;

            const response = await fetch(`/teacher/tasks/${taskId}/move`, {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({direction: direction})
            });

            const result = await response.json();
            if (result.success) {
                if (direction === 'up' && taskItem.previousElementSibling) {
                    taskItem.parentNode.insertBefore(taskItem, taskItem.previousElementSibling);
                } else if (direction === 'down' && taskItem.nextElementSibling) {
                    taskItem.parentNode.insertBefore(taskItem.nextElementSibling, taskItem);
                }
                renumberTasks();
                showStatus('bi-check-circle-fill', 'text-success', 'Порядок сохранён');
            }
        });
    });

    // ===== Drag-and-drop =====
    const tasksList = document.getElementById('tasksList');
    if (tasksList) {
        let draggedItem = null;

        tasksList.addEventListener('dragstart', function(e) {
            if (!e.target.classList.contains('task-item')) return;
            draggedItem = e.target;
            draggedItem.style.opacity = '0.4';
            e.dataTransfer.effectAllowed = 'move';
        });

        tasksList.addEventListener('dragend', function(e) {
            if (draggedItem) {
                draggedItem.style.opacity = '1';
                draggedItem = null;
            }
            document.querySelectorAll('.task-item').forEach(item => {
                item.style.borderTop = '';
                item.style.borderBottom = '';
            });
        });

        tasksList.addEventListener('dragover', function(e) {
            e.preventDefault();
            e.dataTransfer.dropEffect = 'move';

            const target = e.target.closest('.task-item');
            if (!target || target === draggedItem) return;

            document.querySelectorAll('.task-item').forEach(item => {
                item.style.borderTop = '';
                item.style.borderBottom = '';
            });

            const rect = target.getBoundingClientRect();
            const midY = rect.top + rect.height / 2;
            if (e.clientY < midY) {
                target.style.borderTop = '2px solid #0d6efd';
            } else {
                target.style.borderBottom = '2px solid #0d6efd';
            }
        });

        tasksList.addEventListener('drop', async function(e) {
            e.preventDefault();
            const target = e.target.closest('.task-item');
            if (!target || !draggedItem || target === draggedItem) return;

            const rect = target.getBoundingClientRect();
            const midY = rect.top + rect.height / 2;
            if (e.clientY < midY) {
                target.parentNode.insertBefore(draggedItem, target);
            } else {
                target.parentNode.insertBefore(draggedItem, target.nextSibling);
            }

            renumberTasks();

            // Сохраняем новый порядок
            const taskIds = Array.from(document.querySelectorAll('#tasksList .task-item'))
                .map(item => parseInt(item.dataset.taskId));

            showStatus('bi-arrow-repeat', 'text-info', 'Сохранение...');
            const response = await fetch(`/teacher/lessons/${lessonId}/tasks/reorder`, {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({task_ids: taskIds})
            });

            const result = await response.json();
            if (result.success) {
                showStatus('bi-check-circle-fill', 'text-success', 'Порядок сохранён');
            } else {
                showStatus('bi-exclamation-triangle-fill', 'text-danger', 'Ошибка сохранения');
            }
        });
    }
</script>
{% endblock %}