document.addEventListener('DOMContentLoaded', function () {
    const todoList = document.getElementById('todo-list');
    const addForm = document.getElementById('add-todo-form');
    const taskInput = document.getElementById('task-input');

    addForm.addEventListener('submit', function (e) {
        e.preventDefault();
        const taskText = taskInput.value.trim();
        if (taskText !== '') {
            fetch('add_task.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `task=${encodeURIComponent(taskText)}`
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const newTodo = document.createElement('li');
                    newTodo.className = 'list-group-item d-flex justify-content-between align-items-center';
                    newTodo.dataset.id = data.id;
                    newTodo.innerHTML = `
                        <span>${escapeHTML(taskText)}</span>
                        <div>
                            <button class="btn btn-success btn-sm done-btn"><i class="fas fa-check"></i></button>
                        </div>
                    `;
                    todoList.prepend(newTodo);
                    taskInput.value = '';
                    addEventListeners(newTodo);
                }
            });
        }
    });

    function addEventListeners(item) {
        const doneBtn = item.querySelector('.done-btn');
        if (doneBtn) {
            doneBtn.addEventListener('click', function () {
                updateTask(item.dataset.id, 1, item);
            });
        }

        const undoBtn = item.querySelector('.undo-btn');
        if (undoBtn) {
            undoBtn.addEventListener('click', function () {
                updateTask(item.dataset.id, 0, item);
            });
        }
    }

    function updateTask(id, isDone, item) {
        fetch('update_task.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `id=${id}&is_done=${isDone}`
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                item.classList.toggle('done');
                const buttonDiv = item.querySelector('div');
                if (isDone) {
                    buttonDiv.innerHTML = '<button class="btn btn-warning btn-sm undo-btn"><i class="fas fa-undo"></i></button>';
                } else {
                    buttonDiv.innerHTML = '<button class="btn btn-success btn-sm done-btn"><i class="fas fa-check"></i></button>';
                }
                addEventListeners(item);
            }
        });
    }

    document.querySelectorAll('.list-group-item').forEach(item => {
        addEventListeners(item);
    });

    function escapeHTML(str) {
        var p = document.createElement("p");
        p.appendChild(document.createTextNode(str));
        return p.innerHTML;
    }
});