script.ts

interface Task {
    id: number;
    title: string;
    priority: 'low' | 'medium' | 'high';
    completed: boolean;
    createdAt: Date;
}

let tasks: Task[] = [];
let currentFilter: string = 'all';
let taskIdCounter: number = 1;

const taskInput = document.getElementById('taskInput') as HTMLInputElement;
const prioritySelect = document.getElementById('prioritySelect') as HTMLSelectElement;
const addBtn = document.getElementById('addBtn') as HTMLButtonElement;
const tasksContainer = document.getElementById('tasksContainer') as HTMLDivElement;

function updateStats(): void {
    const total = tasks.length;
    const completed = tasks.filter(t => t.completed).length;
    const pending = total - completed;
    const rate = total > 0 ? Math.round((completed / total) * 100) : 0;

    document.getElementById('totalTasks')!.textContent = total.toString();
    document.getElementById('completedTasks')!.textContent = completed.toString();
    document.getElementById('pendingTasks')!.textContent = pending.toString();
    document.getElementById('completionRate')!.textContent = `${rate}%`;
}

function addTask(): void {
    const title = taskInput.value.trim();
    if (!title) return;

    const priority = prioritySelect.value as 'low' | 'medium' | 'high';

    const newTask: Task = {
        id: taskIdCounter++,
        title: title,
        priority: priority,
        completed: false,
        createdAt: new Date()
    };

    tasks.push(newTask);
    taskInput.value = '';
    renderTasks();
    updateStats();
}

function toggleTask(id: number): void {
    const task = tasks.find(t => t.id === id);
    if (task) {
        task.completed = !task.completed;
        renderTasks();
        updateStats();
    }
}

function deleteTask(id: number): void {
    tasks = tasks.filter(t => t.id !== id);
    renderTasks();
    updateStats();
}

function filterTasks(): Task[] {
    switch (currentFilter) {
        case 'pending':
            return tasks.filter(t => !t.completed);
        case 'completed':
            return tasks.filter(t => t.completed);
        case 'high':
            return tasks.filter(t => t.priority === 'high');
        default:
            return tasks;
    }
}

function renderTasks(): void {
    const filteredTasks = filterTasks();
    
    if (filteredTasks.length === 0) {
        tasksContainer.innerHTML = '<div class="empty-state">No tasks to display.</div>';
        return;
    }

    tasksContainer.innerHTML = filteredTasks.map(task => `
        <div class="task-card">
            <input type="checkbox" class="task-checkbox" 
                   ${task.completed ? 'checked' : ''} 
                   onchange="toggleTask(${task.id})">
            <div class="task-content">
                <div class="task-title ${task.completed ? 'completed' : ''}">${task.title}</div>
                <div class="task-meta">
                    <span class="priority-badge priority-${task.priority}">
                        ${task.priority.toUpperCase()}
                    </span>
                    <span>${task.createdAt.toLocaleDateString()}</span>
                </div>
            </div>
            <button class="delete-btn" onclick="deleteTask(${task.id})">Delete</button>
        </div>
    `).join('');
}

addBtn.addEventListener('click', addTask);

taskInput.addEventListener('keypress', (e: KeyboardEvent) => {
    if (e.key === 'Enter') addTask();
});

const filterBtns = document.querySelectorAll('.filter-btn');

filterBtns.forEach(btn => {
    btn.addEventListener('click', function(this: HTMLButtonElement) {
        filterBtns.forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        currentFilter = this.dataset.filter || 'all';
        renderTasks();
    });
});

(window as any).toggleTask = toggleTask;
(window as any).deleteTask = deleteTask;