---

const taskInput = document.getElementById("task-input");
const addBtn = document.getElementById("add-btn");
const taskList = document.getElementById("task-list");
const taskCounter = document.getElementById("task-counter");
const emptyState = document.getElementById("empty-state");
const clearCompletedBtn = document.getElementById("clear-completed");

// Загружаем сохраненные задачи из памяти браузера (или создаем пустой массив)
let tasks = JSON.parse(localStorage.getItem("tasks")) || [];

// Сохранение в localStorage и обновление экрана
function saveAndRender() {
    localStorage.setItem("tasks", JSON.stringify(tasks));
    renderTasks();
}

// Отрисовка списка задач
function renderTasks() {
    taskList.innerHTML = "";

    tasks.forEach((task, index) => {
        const li = document.createElement("li");
        li.className = `task-item ${task.completed ? "completed" : ""}`;

        // Левая часть: кружок + текст
        const contentDiv = document.createElement("div");
        contentDiv.className = "task-content";

        const checkbox = document.createElement("div");
        checkbox.className = "checkbox";

        const span = document.createElement("span");
        span.textContent = task.text;

        contentDiv.appendChild(checkbox);
        contentDiv.appendChild(span);

        // Клик по задаче отмечает её выполненной
        li.onclick = () => toggleTask(index);

        // Кнопка удаления
        const deleteBtn = document.createElement("button");
        deleteBtn.textContent = "✕";
        deleteBtn.className = "delete-btn";
        deleteBtn.onclick = (e) => {
            e.stopPropagation(); // чтобы не срабатывало зачеркивание при удалении
            deleteTask(index);
        };

        li.appendChild(contentDiv);
        li.appendChild(deleteBtn);
        taskList.appendChild(li);
    });

    updateUI();
}

// Обновление счётчика и пустых состояний
function updateUI() {
    const activeCount = tasks.filter(t => !t.completed).length;
    const completedCount = tasks.length - activeCount;

    taskCounter.textContent = `${activeCount} активных`;

    // Показываем или прячем надпись "Список задач пуст"
    emptyState.classList.toggle("hidden", tasks.length > 0);
    
    // Показываем кнопку "Удалить выполненные", если есть хотя бы одна завершенная
    clearCompletedBtn.classList.toggle("hidden", completedCount === 0);
}

// Добавление новой задачи
function addTask() {
    const text = taskInput.value.trim();

    if (text === "") {
        // Вместо скучного alert трясем поле ввода и подсвечиваем красным
        taskInput.classList.add("error");
        setTimeout(() => taskInput.classList.remove("error"), 400);
        taskInput.focus();
        return;
    }

    tasks.push({ text: text, completed: false });
    taskInput.value = "";
    taskInput.focus();
    saveAndRender();
}

// Переключение статуса задачи (выполнена / не выполнена)
function toggleTask(index) {
    tasks[index].completed = !tasks[index].completed;
    saveAndRender();
}

// Удаление одной задачи
function deleteTask(index) {
    tasks.splice(index, 1);
    saveAndRender();
}

// Очистка всех выполненных задач
clearCompletedBtn.onclick = () => {
    tasks = tasks.filter(t => !t.completed);
    saveAndRender();
};

// События
addBtn.onclick = addTask;

taskInput.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
        addTask();
    }
});

// Запускаем отрисовку при открытии страницы
renderTasks();