document.addEventListener('DOMContentLoaded', function () {
    console.log('main.js: DOMContentLoaded event fired.');
    const themeToggle = document.getElementById('theme-toggle');
    const sidebarToggle = document.getElementById('sidebar-toggle');
    const sidebar = document.querySelector('.sidebar');
    const mainContent = document.querySelector('.main-content');
    const currentTheme = localStorage.getItem('theme');

    if (currentTheme) {
        document.body.classList.add(currentTheme);
        if (currentTheme === 'dark-mode') {
            themeToggle.checked = true;
        }
    }

    themeToggle.addEventListener('change', function () {
        if (this.checked) {
            document.body.classList.remove('light-mode');
            document.body.classList.add('dark-mode');
            localStorage.setItem('theme', 'dark-mode');
        } else {
            document.body.classList.remove('dark-mode');
            document.body.classList.add('light-mode');
            localStorage.setItem('theme', 'light-mode');
        }
    });

    sidebarToggle.addEventListener('click', function () {
        sidebar.classList.toggle('collapsed');
        // Adjust main content margin only if not on mobile
        if (window.innerWidth > 768) {
            mainContent.classList.toggle('expanded');
        }
    });

    const addTaskForm = document.getElementById('addTaskForm');
    if (addTaskForm) {
        addTaskForm.addEventListener('submit', async function (e) {
            console.log('main.js: addTaskForm submitted.');
            e.preventDefault();

            const formData = new FormData(this);
            formData.append('action', 'addTask');

            try {
                const response = await fetch('index.php', {
                    method: 'POST',
                    body: formData
                });
                const result = await response.json();

                if (result.success) {
                    alert(result.message);
                    this.reset(); // Clear form fields
                    // Close modal
                    const addTaskModal = bootstrap.Modal.getInstance(document.getElementById('addTaskModal'));
                    if (addTaskModal) {
                        addTaskModal.hide();
                    }
                    loadTasks(); // Refresh tasks list
                } else {
                    alert('Error: ' + result.message);
                }
            } catch (error) {
                console.error('Error adding task:', error);
                alert('An unexpected error occurred while adding the task. Check console for details.');
            }
        });
    }

    // Function to load and display tasks
    async function loadTasks() {
        console.log('main.js: loadTasks() called.');
        const tasksListDiv = document.getElementById('tasksList');
        if (!tasksListDiv) return;

        tasksListDiv.innerHTML = '<div class="text-center p-5">Loading tasks...</div>'; // Loading indicator

        try {
            const response = await fetch('index.php?action=getTasks');
            const result = await response.json();

            if (result.success && result.tasks) {
                tasksListDiv.innerHTML = ''; // Clear loading indicator
                if (result.tasks.length === 0) {
                    tasksListDiv.innerHTML = '<div class="col-12"><p class="text-center">No tasks yet. Add one!</p></div>';
                    return;
                }
                result.tasks.forEach(task => {
                    const taskCard = `
                        <div class="col-md-4 mb-4">
                            <div class="card surface h-100">
                                <div class="card-body">
                                    <h5 class="card-title">${task.title}</h5>
                                    <p class="card-text">${task.description}</p>
                                    <span class="badge bg-primary">${task.status}</span>
                                </div>
                                <div class="card-footer text-muted">
                                    Created: ${new Date(task.created_at).toLocaleDateString()}
                                </div>
                            </div>
                        </div>
                    `;
                    tasksListDiv.innerHTML += taskCard;
                });
            } else {
                tasksListDiv.innerHTML = '<div class="col-12 text-danger text-center"><p>Error loading tasks: ' + (result.message || 'Unknown error') + '</p></div>';
            }
        } catch (error) {
            console.error('Error fetching tasks:', error);
            tasksListDiv.innerHTML = '<div class="col-12 text-danger text-center"><p>An unexpected error occurred while fetching tasks. Check console for details.</p></div>';
        }
    }

    // Initial load of tasks
    loadTasks();
});