document.addEventListener('DOMContentLoaded', function() {
    // Task form submission
    const taskForm = document.getElementById('taskForm');
    const taskList = document.getElementById('taskList');
    
    taskForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // Get form values
        const taskName = this.elements[0].value;
        const description = this.elements[1].value;
        const dueDate = this.elements[2].value;
        const recurrence = this.elements[3].value;
        const telegramNotify = this.elements[4].checked;
        
        // Create new task element
        const taskItem = document.createElement('div');
        taskItem.className = 'task-item bg-gray-800 rounded-lg p-4 border border-gray-700 hover:border-secondary transition duration-200';
        
        const formattedDate = new Date(dueDate).toLocaleString('en-US', {
            weekday: 'short',
            month: 'short',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        });
        
        taskItem.innerHTML = `
            <div class="flex justify-between items-start">
                <div class="flex items-start">
                    <input type="checkbox" class="mt-1 h-4 w-4 text-primary focus:ring-primary border-gray-700 rounded">
                    <div class="ml-3">
                        <h3 class="font-medium">${taskName}</h3>
                        <p class="text-sm text-gray-400 mt-1">Due: ${formattedDate}</p>
                        <div class="flex items-center mt-2 text-xs">
                            <span class="bg-gray-700 px-2 py-1 rounded mr-2">${recurrence.charAt(0).toUpperCase() + recurrence.slice(1)}</span>
                            ${telegramNotify ? `<span class="flex items-center text-secondary">
                                <i data-feather="send" class="w-3 h-3 mr-1"></i>
                                Telegram
                            </span>` : ''}
                        </div>
                    </div>
                </div>
                <button class="text-gray-400 hover:text-red-500 delete-task">
                    <i data-feather="trash-2" class="w-4 h-4"></i>
                </button>
            </div>
        `;
        
        // Add to task list
        taskList.prepend(taskItem);
        feather.replace();
        
        // Add event listeners to new task
        taskItem.querySelector('input[type="checkbox"]').addEventListener('change', function() {
            const taskText = this.closest('.flex').querySelector('h3');
            if (this.checked) {
                taskText.classList.add('text-gray-500', 'line-through');
            } else {
                taskText.classList.remove('text-gray-500', 'line-through');
            }
        });
        
        taskItem.querySelector('.delete-task').addEventListener('click', function() {
            taskItem.classList.add('opacity-0');
            setTimeout(() => {
                taskItem.remove();
            }, 300);
        });
        
        // Reset form
        this.reset();
    });
    
    // Add animation to task items on load
    document.querySelectorAll('.task-item').forEach((item, index) => {
        setTimeout(() => {
            item.classList.add('opacity-100');
        }, index * 100);
    });
});