// Получение элементов из HTML
const taskForm = document.getElementById("task-form");
const taskInput = document.getElementById("task-input");
const taskList = document.getElementById("task-list");
const filterButtons = document.querySelectorAll(".filter");

// Загрузка задач из LocalStorage
let tasks = JSON.parse(localStorage.getItem("tasks")) || [];

// Переменная для отслеживания перетаскиваемой задачи
let draggedTaskIndex = null;

// Функция для отображения задач
function displayTasks(filter = "all") {
    taskList.innerHTML = "";
    const filteredTasks = tasks.filter(task => 
        filter === "all" || (filter === "active" && !task.completed) || (filter === "completed" && task.completed)
    );

    filteredTasks.forEach((task, index) => {
        const taskItem = document.createElement("li");
        taskItem.classList.add("task-item");
        taskItem.draggable = true; // Сделать элемент перетаскиваемым

        if (task.completed) taskItem.classList.add("completed");

        taskItem.innerHTML = `
            <span>${task.text}</span>
            <div class="task-actions">
                <button class="complete-btn" onclick="toggleComplete('${task.id}')">✓</button>
                <button class="delete-btn" onclick="deleteTask('${task.id}')">✗</button>
            </div>
        `;

        // Добавление событий для drag-and-drop
        taskItem.addEventListener("dragstart", () => handleDragStart(index));
        taskItem.addEventListener("dragover", (e) => handleDragOver(e));
        taskItem.addEventListener("drop", () => handleDrop(index));
        taskItem.addEventListener("dragend", handleDragEnd);

        taskList.appendChild(taskItem);
    });
}

// Обработчик начала перетаскивания
function handleDragStart(index) {
    draggedTaskIndex = index;
}

// Обработчик, предотвращающий действия по умолчанию (нужен для drop)
function handleDragOver(e) {
    e.preventDefault();
}

// Обработчик окончания перетаскивания
function handleDrop(index) {
    if (draggedTaskIndex !== null && draggedTaskIndex !== index) {
        const draggedTask = tasks[draggedTaskIndex];
        tasks.splice(draggedTaskIndex, 1);
        tasks.splice(index, 0, draggedTask);
        saveTasks();
        displayTasks();
    }
    draggedTaskIndex = null;
}

// Обработчик окончания перетаскивания
function handleDragEnd() {
    draggedTaskIndex = null;
}

// Добавление новой задачи
taskForm.addEventListener("submit", (e) => {
    e.preventDefault();
    const taskText = taskInput.value.trim();
    if (!taskText) return;

    const newTask = {
        id: Date.now().toString(),
        text: taskText,
        completed: false
    };
    tasks.push(newTask);
    saveTasks();
    displayTasks();
    taskInput.value = "";
});

// Переключение статуса задачи на выполнено
function toggleComplete(taskId) {
    tasks = tasks.map(task => 
        task.id === taskId ? { ...task, completed: !task.completed } : task
    );
    saveTasks();
    displayTasks();
}

// Удаление задачи
function deleteTask(taskId) {
    tasks = tasks.filter(task => task.id !== taskId);
    saveTasks();
    displayTasks();
}

// Сохранение задач в LocalStorage
function saveTasks() {
    localStorage.setItem("tasks", JSON.stringify(tasks));
}

// Добавление события для фильтров
filterButtons.forEach(button => {
    button.addEventListener("click", () => {
        filterButtons.forEach(btn => btn.classList.remove("active"));
        button.classList.add("active");
        displayTasks(button.dataset.filter);
    });
});

// Инициализация
displayTasks();