let taskTypesConfig = null;
let selectedTaskTypes = new Set();

document.addEventListener('DOMContentLoaded', () => {
    initTaskTypes();
});


async function initTaskTypes() {
    const response = await fetch('/task-types');
    taskTypesConfig = await response.json();
    renderDropdown();
}


function renderDropdown() {
    const dropdown = document.getElementById('taskTypesDropdown');
    dropdown.innerHTML = '';

    dropdown.appendChild(
        createTypeGroup('Классическая вероятность', taskTypesConfig.classic)
    );

    dropdown.appendChild(
        createTypeGroup('Теоремы вероятности', taskTypesConfig.theorems)
    );

    updateSelectedCount();
}

function createTypeGroup(title, types) {
    const group = document.createElement('div');
    group.className = 'type-group';

    const header = document.createElement('div');
    header.className = 'type-group-title';
    header.textContent = title;

    const tags = document.createElement('div');
    tags.className = 'type-tags';

    types.forEach(type => {
        const tag = document.createElement('div');
        tag.className = 'type-tag active';
        tag.textContent = type.name;
        tag.dataset.id = type.id;

        selectedTaskTypes.add(type.id);

        tag.addEventListener('click', () => {
            tag.classList.toggle('active');

            if (selectedTaskTypes.has(type.id)) {
                selectedTaskTypes.delete(type.id);
            } else {
                selectedTaskTypes.add(type.id);
            }

            updateSelectedCount();
        });

        tags.appendChild(tag);
    });

    group.appendChild(header);
    group.appendChild(tags);
    return group;
}


function selectAllTypes() {
    document.querySelectorAll('.type-tag').forEach(tag => {
        tag.classList.add('active');
        selectedTaskTypes.add(Number(tag.dataset.id));
    });
    updateSelectedCount();
}

function clearAllTypes() {
    document.querySelectorAll('.type-tag').forEach(tag => {
        tag.classList.remove('active');
    });
    selectedTaskTypes.clear();
    updateSelectedCount();
}

function updateSelectedCount() {
    document.getElementById('selectedCount').textContent =
        `${selectedTaskTypes.size} выбрано`;
}

function getSelectedTaskTypes() {
    return Array.from(selectedTaskTypes);
}


async function generateTasks() {
    const count = Number(document.getElementById('count').value);
    const complexity = document.getElementById('complexity').value;
    const taskTypes = getSelectedTaskTypes();

    const loading = document.getElementById('loading');
    const error = document.getElementById('error');
    const tasksContainer = document.getElementById('tasks-container');

    tasksContainer.innerHTML = '';
    error.style.display = 'none';

    if (taskTypes.length === 0) {
        error.textContent = 'Выберите хотя бы один тип задач';
        error.style.display = 'block';
        return;
    }

    loading.style.display = 'block';

    const response = await fetch('/generate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ count, complexity, task_types: taskTypes })
    });

    const data = await response.json();
    loading.style.display = 'none';

    displayTasks(data.tasks);
}


function displayTasks(tasks) {
    const container = document.getElementById('tasks-container');

    tasks.forEach((task, index) => {
        const div = document.createElement('div');
        div.className = 'task';

        div.innerHTML = `
            <div class="task-header">
                <div class="task-number">Задача ${index + 1}</div>
                <div class="task-type">${task.type}</div>
            </div>
            <div class="question">${task.question}</div>
            <div class="answer-section">
                <div class="answer-value">${task.answer}</div>
                <div>${task.answer_fraction}</div>
            </div>
            <div class="solution-section">
                <div class="solution-title">Решение</div>
                ${task.steps.map(s => `<div class="step">${s}</div>`).join('')}
            </div>
        `;

        container.appendChild(div);
    });
}