document.addEventListener('DOMContentLoaded', () => {
    const taskInput = document.getElementById('taskInput');
    const submitTaskBtn = document.getElementById('submitTaskBtn');
    const taskList = document.getElementById('taskList');
    const taskCount = document.getElementById('taskCount');
    const clearCompletedBtn = document.getElementById('clearCompletedBtn');
    const filterButtons = document.querySelectorAll('.filter-btn');
    const addTaskBtn = document.getElementById('addTaskBtn');

    let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    let currentFilter = 'all';

    // Initialize the app
    function init() {
        renderTasks();
        updateTaskCount();
        addTaskBtn.addEventListener('click', () => {
            taskInput.focus();
        });
    }

    // Add a new task
    function addTask() {
        const text = taskInput.value.trim();
        if (text) {
            const newTask = {
                id: Date.now(),
                text,
                completed: false,
                createdAt: new Date().toISOString()
            };
            tasks.unshift(newTask);
            saveTasks();
            renderTasks();
            updateTaskCount();
            taskInput.value = '';
        }
    }

    // Save tasks to localStorage
    function saveTasks() {
        localStorage.setItem('tasks', JSON.stringify(tasks));
    }

    // Render tasks based on current filter
    function renderTasks() {
        taskList.innerHTML = '';
        
        const filteredTasks = tasks.filter(task => {
            if (currentFilter === 'all') return true;
            if (currentFilter === 'active') return !task.completed;
            if (currentFilter === 'completed') return task.completed;
            return true;
        });

        if (filteredTasks.length === 0) {
            const emptyState = document.createElement('div');
            emptyState.className = 'p-8 text-center text-gray-500';
            emptyState.innerHTML = `
                <i data-feather="check-circle" class="w-12 h-12 mx-auto text-gray-300 mb-4"></i>
                <p>No tasks found</p>
            `;
            taskList.appendChild(emptyState);
            feather.replace();
            return;
        }

        filteredTasks.forEach(task => {
            const todoItem = document.createElement('todo-item');
            todoItem.setAttribute('task-id', task.id);
            todoItem.setAttribute('text', task.text);
            todoItem.setAttribute('completed', task.completed);
            todoItem.addEventListener('toggle', (e) => {
                toggleTaskComplete(e.detail.id, e.detail.completed);
            });
            todoItem.addEventListener('delete', (e) => {
                deleteTask(e.detail.id);
            });
            todoItem.addEventListener('edit', (e) => {
                editTask(e.detail.id, e.detail.newText);
            });
            taskList.appendChild(todoItem);
        });
    }

    // Toggle task completion status
    function toggleTaskComplete(id, completed) {
        const taskIndex = tasks.findIndex(task => task.id === id);
        if (taskIndex !== -1) {
            tasks[taskIndex].completed = completed;
            saveTasks();
            updateTaskCount();
        }
    }

    // Delete a task
    function deleteTask(id) {
        tasks = tasks.filter(task => task.id !== id);
        saveTasks();
        renderTasks();
        updateTaskCount();
    }

    // Edit a task
    function editTask(id, newText) {
        const taskIndex = tasks.findIndex(task => task.id === id);
        if (taskIndex !== -1 && newText.trim()) {
            tasks[taskIndex].text = newText.trim();
            saveTasks();
        }
    }

    // Update the task counter
    function updateTaskCount() {
        const activeTasks = tasks.filter(task => !task.completed).length;
        taskCount.textContent = `${activeTasks} ${activeTasks === 1 ? 'task' : 'tasks'} remaining`;
    }

    // Clear completed tasks
    function clearCompleted() {
        tasks = tasks.filter(task => !task.completed);
        saveTasks();
        renderTasks();
        updateTaskCount();
    }

    // Set filter
    function setFilter(filter) {
        currentFilter = filter;
        filterButtons.forEach(btn => {
            btn.classList.toggle('active', btn.dataset.filter === filter);
        });
        renderTasks();
    }

    // Event listeners
    submitTaskBtn.addEventListener('click', addTask);
    taskInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') addTask();
    });
    clearCompletedBtn.addEventListener('click', clearCompleted);
    filterButtons.forEach(btn => {
        btn.addEventListener('click', () => setFilter(btn.dataset.filter));
    });

    init();
});