app.js

/**
 * TaskFlow - Modern Task Manager
 * Pure HTML, CSS, and Vanilla JavaScript
 */

(function () {
  'use strict';

  // ==========================================================================
  // Sound Effects Engine (Synthesized via Web Audio API)
  // ==========================================================================
  class SoundEngine {
    constructor() {
      this.ctx = null;
      this.enabled = true;
    }

    init() {
      if (!this.ctx) {
        const AudioContext = window.AudioContext || window.webkitAudioContext;
        if (AudioContext) {
          this.ctx = new AudioContext();
        }
      }
      if (this.ctx && this.ctx.state === 'suspended') {
        this.ctx.resume();
      }
    }

    playPop() {
      if (!this.enabled) return;
      this.init();
      if (!this.ctx) return;

      const osc = this.ctx.createOscillator();
      const gain = this.ctx.createGain();
      const now = this.ctx.currentTime;

      osc.type = 'sine';
      osc.frequency.setValueAtTime(400, now);
      osc.frequency.exponentialRampToValueAtTime(750, now + 0.08);

      gain.gain.setValueAtTime(0.2, now);
      gain.gain.exponentialRampToValueAtTime(0.01, now + 0.08);

      osc.connect(gain);
      gain.connect(this.ctx.destination);

      osc.start(now);
      osc.stop(now + 0.09);
    }

    playComplete() {
      if (!this.enabled) return;
      this.init();
      if (!this.ctx) return;

      const notes = [523.25, 659.25, 783.99, 1046.5]; // C5, E5, G5, C6
      const now = this.ctx.currentTime;

      notes.forEach((freq, idx) => {
        const osc = this.ctx.createOscillator();
        const gain = this.ctx.createGain();
        const start = now + idx * 0.06;

        osc.type = 'triangle';
        osc.frequency.setValueAtTime(freq, start);

        gain.gain.setValueAtTime(0.18, start);
        gain.gain.exponentialRampToValueAtTime(0.001, start + 0.25);

        osc.connect(gain);
        gain.connect(this.ctx.destination);

        osc.start(start);
        osc.stop(start + 0.26);
      });
    }

    playDelete() {
      if (!this.enabled) return;
      this.init();
      if (!this.ctx) return;

      const osc = this.ctx.createOscillator();
      const gain = this.ctx.createGain();
      const now = this.ctx.currentTime;

      osc.type = 'sine';
      osc.frequency.setValueAtTime(320, now);
      osc.frequency.exponentialRampToValueAtTime(140, now + 0.12);

      gain.gain.setValueAtTime(0.18, now);
      gain.gain.exponentialRampToValueAtTime(0.01, now + 0.12);

      osc.connect(gain);
      gain.connect(this.ctx.destination);

      osc.start(now);
      osc.stop(now + 0.13);
    }
  }

  // ==========================================================================
  // Confetti Particle Engine
  // ==========================================================================
  class ConfettiEngine {
    constructor(canvasId) {
      this.canvas = document.getElementById(canvasId);
      this.ctx = this.canvas ? this.canvas.getContext('2d') : null;
      this.particles = [];
      this.animationFrame = null;
      this.colors = ['#6366F1', '#8B5CF6', '#EC4899', '#10B981', '#F59E0B', '#3B82F6'];

      this.resize();
      window.addEventListener('resize', () => this.resize());
    }

    resize() {
      if (!this.canvas) return;
      this.canvas.width = window.innerWidth;
      this.canvas.height = window.innerHeight;
    }

    fire(count = 50) {
      if (!this.ctx) return;

      const originX = window.innerWidth / 2;
      const originY = window.innerHeight * 0.35;

      for (let i = 0; i < count; i++) {
        const angle = Math.random() * Math.PI * 2;
        const velocity = 6 + Math.random() * 8;
        this.particles.push({
          x: originX,
          y: originY,
          vx: Math.cos(angle) * velocity,
          vy: Math.sin(angle) * velocity - 3,
          size: 6 + Math.random() * 6,
          color: this.colors[Math.floor(Math.random() * this.colors.length)],
          rotation: Math.random() * 360,
          rotationSpeed: (Math.random() - 0.5) * 10,
          opacity: 1,
          gravity: 0.28,
          friction: 0.98
        });
      }

      if (!this.animationFrame) {
        this.render();
      }
    }

    render() {
      if (!this.ctx || this.particles.length === 0) {
        if (this.ctx) this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.animationFrame = null;
        return;
      }

      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

      for (let i = this.particles.length - 1; i >= 0; i--) {
        const p = this.particles[i];
        p.x += p.vx;
        p.y += p.vy;
        p.vy += p.gravity;
        p.vx *= p.friction;
        p.rotation += p.rotationSpeed;
        p.opacity -= 0.012;

        if (p.opacity <= 0 || p.y > this.canvas.height) {
          this.particles.splice(i, 1);
          continue;
        }

        this.ctx.save();
        this.ctx.translate(p.x, p.y);
        this.ctx.rotate((p.rotation * Math.PI) / 180);
        this.ctx.fillStyle = p.color;
        this.ctx.globalAlpha = Math.max(0, p.opacity);
        this.ctx.fillRect(-p.size / 2, -p.size / 2, p.size, p.size);
        this.ctx.restore();
      }

      this.animationFrame = requestAnimationFrame(() => this.render());
    }
  }

  // ==========================================================================
  // Sample Data
  // ==========================================================================
  const SAMPLE_TASKS = [
    {
      id: 'task-1',
      title: '🚀 Launch TaskFlow application',
      description: 'Review interface aesthetics, mobile layout, and responsiveness.',
      completed: true,
      priority: 'high',
      category: 'Coding',
      dueDate: getRelativeDateString(0),
      starred: true,
      createdAt: Date.now() - 1000 * 60 * 180
    },
    {
      id: 'task-2',
      title: '🎨 Polish UI design & dark/light theme tokens',
      description: 'Ensure vibrant gradient accents, glassmorphic blur, and accessible contrast.',
      completed: true,
      priority: 'medium',
      category: 'Work',
      dueDate: getRelativeDateString(0),
      starred: false,
      createdAt: Date.now() - 1000 * 60 * 120
    },
    {
      id: 'task-3',
      title: '🏃 30-minute cardio & strength routine',
      description: 'Stay energized with a morning jog and core exercises.',
      completed: false,
      priority: 'low',
      category: 'Fitness',
      dueDate: getRelativeDateString(0),
      starred: false,
      createdAt: Date.now() - 1000 * 60 * 60
    },
    {
      id: 'task-4',
      title: '📖 Read Chapter 4 of System Design Handbook',
      description: 'Focus on distributed caching, partition strategies, and CAP theorem.',
      completed: false,
      priority: 'medium',
      category: 'Study',
      dueDate: getRelativeDateString(1),
      starred: true,
      createdAt: Date.now() - 1000 * 60 * 30
    },
    {
      id: 'task-5',
      title: '🛒 Weekly grocery restock',
      description: 'Oat milk, avocados, berries, and sourdough bread.',
      completed: false,
      priority: 'low',
      category: 'Shopping',
      dueDate: getRelativeDateString(2),
      starred: false,
      createdAt: Date.now() - 1000 * 60 * 10
    }
  ];

  function getRelativeDateString(dayOffset) {
    const d = new Date();
    d.setDate(d.getDate() + dayOffset);
    return d.toISOString().split('T')[0];
  }

  // ==========================================================================
  // Main Todo Application
  // ==========================================================================
  class TodoApp {
    constructor() {
      this.tasks = [];
      this.filter = 'all';
      this.categoryFilter = 'all';
      this.searchQuery = '';
      this.sortBy = 'created-desc';
      this.theme = 'dark';
      this.undoBuffer = null;
      this.toastTimeout = null;

      this.sound = new SoundEngine();
      this.confetti = new ConfettiEngine('confetti-canvas');

      this.initDOMElements();
      this.loadSettings();
      this.loadTasks();
      this.bindEvents();
      this.render();
      this.updateDateDisplay();
    }

    initDOMElements() {
      // Header controls
      this.dateDisplay = document.getElementById('current-date-display');
      this.themeToggleBtn = document.getElementById('theme-toggle-btn');
      this.themeIconDark = document.getElementById('theme-icon-dark');
      this.themeIconLight = document.getElementById('theme-icon-light');

      this.soundToggleBtn = document.getElementById('sound-toggle-btn');
      this.soundIconOn = document.getElementById('sound-icon-on');
      this.soundIconOff = document.getElementById('sound-icon-off');

      this.moreActionsBtn = document.getElementById('more-actions-btn');
      this.actionsMenu = document.getElementById('actions-menu');
      this.exportDataBtn = document.getElementById('export-data-btn');
      this.importFileInput = document.getElementById('import-file-input');
      this.clearCompletedBtn = document.getElementById('clear-completed-btn');
      this.resetAllBtn = document.getElementById('reset-all-btn');

      // Stats
      this.statsBadge = document.getElementById('stats-badge-text');
      this.statsMotivation = document.getElementById('stats-motivation-text');
      this.statsCounter = document.getElementById('stats-counter-text');
      this.statsPercentage = document.getElementById('stats-percentage-text');
      this.progressRingCircle = document.getElementById('progress-ring-circle');
      this.progressBarFill = document.getElementById('progress-bar-fill');
      this.urgentCount = document.getElementById('urgent-count');
      this.todayCount = document.getElementById('today-count');
      this.completedCount = document.getElementById('completed-count');

      // Task creation
      this.taskForm = document.getElementById('task-form');
      this.taskTitleInput = document.getElementById('task-title-input');
      this.toggleDetailsBtn = document.getElementById('toggle-details-btn');
      this.creatorDetails = document.getElementById('creator-details');
      this.taskDescInput = document.getElementById('task-desc-input');
      this.taskPrioritySelect = document.getElementById('task-priority-select');
      this.taskCategorySelect = document.getElementById('task-category-select');
      this.taskDueDateInput = document.getElementById('task-due-date-input');

      // Quick date chips
      this.dueTodayBtn = document.getElementById('due-today-btn');
      this.dueTomorrowBtn = document.getElementById('due-tomorrow-btn');
      this.dueWeekendBtn = document.getElementById('due-weekend-btn');
      this.dueClearBtn = document.getElementById('due-clear-btn');

      // Toolbar & filters
      this.searchInput = document.getElementById('search-input');
      this.clearSearchBtn = document.getElementById('clear-search-btn');
      this.sortSelect = document.getElementById('sort-select');
      this.statusTabs = document.querySelectorAll('.tab-btn');
      this.categoryFilterChips = document.getElementById('category-filter-chips');

      // Counts in tabs
      this.countAll = document.getElementById('count-all');
      this.countActive = document.getElementById('count-active');
      this.countCompleted = document.getElementById('count-completed');
      this.countStarred = document.getElementById('count-starred');

      // Task list & empty state
      this.taskList = document.getElementById('task-list');
      this.emptyState = document.getElementById('empty-state');
      this.emptyTitle = document.getElementById('empty-title');
      this.emptyDescription = document.getElementById('empty-description');
      this.emptyAddBtn = document.getElementById('empty-add-btn');
      this.footerSummary = document.getElementById('footer-summary');

      // Modal Dialog
      this.editModal = document.getElementById('edit-modal');
      this.editForm = document.getElementById('edit-form');
      this.editTaskId = document.getElementById('edit-task-id');
      this.editTaskTitle = document.getElementById('edit-task-title');
      this.editTaskDesc = document.getElementById('edit-task-desc');
      this.editTaskPriority = document.getElementById('edit-task-priority');
      this.editTaskCategory = document.getElementById('edit-task-category');
      this.editTaskDueDate = document.getElementById('edit-task-due-date');
      this.closeModalBtn = document.getElementById('close-modal-btn');
      this.cancelEditBtn = document.getElementById('cancel-edit-btn');

      // Toast
      this.toast = document.getElementById('toast');
      this.toastMessage = document.getElementById('toast-message');
      this.toastUndoBtn = document.getElementById('toast-undo-btn');
      this.toastCloseBtn = document.getElementById('toast-close-btn');
    }

    updateDateDisplay() {
      const now = new Date();
      const options = { weekday: 'long', month: 'short', day: 'numeric' };
      this.dateDisplay.textContent = now.toLocaleDateString(undefined, options);
    }

    loadSettings() {
      // Theme
      const savedTheme = localStorage.getItem('taskflow_theme') || 'dark';
      this.setTheme(savedTheme);

      // Sound
      const savedSound = localStorage.getItem('taskflow_sound');
      this.sound.enabled = savedSound !== null ? JSON.parse(savedSound) : true;
      this.updateSoundIcon();

      // Sort
      const savedSort = localStorage.getItem('taskflow_sort');
      if (savedSort) {
        this.sortBy = savedSort;
        this.sortSelect.value = savedSort;
      }
    }

    setTheme(theme) {
      this.theme = theme;
      document.documentElement.setAttribute('data-theme', theme);
      localStorage.setItem('taskflow_theme', theme);

      if (theme === 'dark') {
        this.themeIconDark.classList.remove('hidden');
        this.themeIconLight.classList.add('hidden');
      } else {
        this.themeIconDark.classList.add('hidden');
        this.themeIconLight.classList.remove('hidden');
      }
    }

    toggleTheme() {
      const nextTheme = this.theme === 'dark' ? 'light' : 'dark';
      this.setTheme(nextTheme);
      this.sound.playPop();
    }

    toggleSound() {
      this.sound.enabled = !this.sound.enabled;
      localStorage.setItem('taskflow_sound', JSON.stringify(this.sound.enabled));
      this.updateSoundIcon();
      if (this.sound.enabled) {
        this.sound.playPop();
      }
    }

    updateSoundIcon() {
      if (this.sound.enabled) {
        this.soundIconOn.classList.remove('hidden');
        this.soundIconOff.classList.add('hidden');
      } else {
        this.soundIconOn.classList.add('hidden');
        this.soundIconOff.classList.remove('hidden');
      }
    }

    loadTasks() {
      const stored = localStorage.getItem('taskflow_tasks');
      if (stored) {
        try {
          this.tasks = JSON.parse(stored);
        } catch (e) {
          console.error('Error parsing stored tasks:', e);
          this.tasks = [...SAMPLE_TASKS];
        }
      } else {
        this.tasks = [...SAMPLE_TASKS];
        this.saveTasks();
      }
    }

    saveTasks() {
      localStorage.setItem('taskflow_tasks', JSON.stringify(this.tasks));
      this.render();
    }

    bindEvents() {
      // Theme and Sound
      this.themeToggleBtn.addEventListener('click', () => this.toggleTheme());
      this.soundToggleBtn.addEventListener('click', () => this.toggleSound());

      // More actions menu
      this.moreActionsBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        this.actionsMenu.classList.toggle('hidden');
      });

      document.addEventListener('click', () => {
        this.actionsMenu.classList.add('hidden');
      });

      this.exportDataBtn.addEventListener('click', () => this.exportJSON());
      this.importFileInput.addEventListener('change', (e) => this.importJSON(e));
      this.clearCompletedBtn.addEventListener('click', () => this.clearCompleted());
      this.resetAllBtn.addEventListener('click', () => this.resetToDefaults());

      // Creator collapsible
      this.toggleDetailsBtn.addEventListener('click', () => {
        this.creatorDetails.classList.toggle('collapsed');
      });

      // Quick date buttons
      this.dueTodayBtn.addEventListener('click', () => {
        this.taskDueDateInput.value = getRelativeDateString(0);
      });
      this.dueTomorrowBtn.addEventListener('click', () => {
        this.taskDueDateInput.value = getRelativeDateString(1);
      });
      this.dueWeekendBtn.addEventListener('click', () => {
        const today = new Date();
        const dayOfWeek = today.getDay();
        const daysUntilSaturday = (6 - dayOfWeek + 7) % 7 || 7;
        this.taskDueDateInput.value = getRelativeDateString(daysUntilSaturday);
      });
      this.dueClearBtn.addEventListener('click', () => {
        this.taskDueDateInput.value = '';
      });

      // Task creation form
      this.taskForm.addEventListener('submit', (e) => {
        e.preventDefault();
        this.handleAddTask();
      });

      // Search & Clear
      this.searchInput.addEventListener('input', (e) => {
        this.searchQuery = e.target.value.trim().toLowerCase();
        if (this.searchQuery) {
          this.clearSearchBtn.classList.remove('hidden');
        } else {
          this.clearSearchBtn.classList.add('hidden');
        }
        this.render();
      });

      this.clearSearchBtn.addEventListener('click', () => {
        this.searchInput.value = '';
        this.searchQuery = '';
        this.clearSearchBtn.classList.add('hidden');
        this.render();
      });

      // Sort
      this.sortSelect.addEventListener('change', (e) => {
        this.sortBy = e.target.value;
        localStorage.setItem('taskflow_sort', this.sortBy);
        this.render();
      });

      // Filter tabs
      this.statusTabs.forEach((tab) => {
        tab.addEventListener('click', () => {
          this.statusTabs.forEach((t) => {
            t.classList.remove('active');
            t.setAttribute('aria-selected', 'false');
          });
          tab.classList.add('active');
          tab.setAttribute('aria-selected', 'true');
          this.filter = tab.dataset.filter;
          this.render();
        });
      });

      // Category chips
      this.categoryFilterChips.addEventListener('click', (e) => {
        const chip = e.target.closest('.cat-chip');
        if (!chip) return;
        this.categoryFilterChips.querySelectorAll('.cat-chip').forEach((c) => c.classList.remove('active'));
        chip.classList.add('active');
        this.categoryFilter = chip.dataset.category;
        this.render();
      });

      // Empty state add button
      this.emptyAddBtn.addEventListener('click', () => {
        this.taskTitleInput.focus();
      });

      // Edit Modal
      this.editForm.addEventListener('submit', (e) => {
        e.preventDefault();
        this.handleSaveEdit();
      });
      this.closeModalBtn.addEventListener('click', () => this.editModal.close());
      this.cancelEditBtn.addEventListener('click', () => this.editModal.close());

      // Toast Undo
      this.toastUndoBtn.addEventListener('click', () => this.undoLastDelete());
      this.toastCloseBtn.addEventListener('click', () => this.hideToast());

      // Global keyboard shortcut
      document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
          if (this.editModal.open) this.editModal.close();
          this.actionsMenu.classList.add('hidden');
        }
      });
    }

    handleAddTask() {
      const title = this.taskTitleInput.value.trim();
      if (!title) return;

      const newTask = {
        id: 'task-' + Date.now() + '-' + Math.floor(Math.random() * 1000),
        title: title,
        description: this.taskDescInput.value.trim(),
        completed: false,
        priority: this.taskPrioritySelect.value,
        category: this.taskCategorySelect.value,
        dueDate: this.taskDueDateInput.value,
        starred: false,
        createdAt: Date.now()
      };

      this.tasks.unshift(newTask);
      this.saveTasks();

      // Clear input fields
      this.taskTitleInput.value = '';
      this.taskDescInput.value = '';
      this.taskDueDateInput.value = '';
      this.creatorDetails.classList.add('collapsed');

      this.sound.playPop();
      this.showToast('Task added successfully!');
    }

    toggleTaskStatus(taskId) {
      const task = this.tasks.find((t) => t.id === taskId);
      if (!task) return;

      task.completed = !task.completed;
      if (task.completed) {
        task.completedAt = Date.now();
        this.sound.playComplete();
        this.confetti.fire(45);

        // Check if all are now completed
        const allDone = this.tasks.length > 0 && this.tasks.every((t) => t.completed);
        if (allDone) {
          setTimeout(() => this.confetti.fire(80), 300);
        }
      } else {
        task.completedAt = null;
        this.sound.playPop();
      }

      this.saveTasks();
    }

    toggleTaskStar(taskId) {
      const task = this.tasks.find((t) => t.id === taskId);
      if (!task) return;
      task.starred = !task.starred;
      this.sound.playPop();
      this.saveTasks();
    }

    deleteTask(taskId, taskElement) {
      const index = this.tasks.findIndex((t) => t.id === taskId);
      if (index === -1) return;

      const deletedTask = this.tasks[index];
      this.undoBuffer = { task: deletedTask, index: index };

      if (taskElement) {
        taskElement.classList.add('removing');
        this.sound.playDelete();

        setTimeout(() => {
          this.tasks.splice(index, 1);
          this.saveTasks();
          this.showToast(`Deleted "${deletedTask.title.slice(0, 24)}..."`, true);
        }, 260);
      } else {
        this.tasks.splice(index, 1);
        this.saveTasks();
        this.showToast(`Deleted "${deletedTask.title.slice(0, 24)}..."`, true);
      }
    }

    undoLastDelete() {
      if (!this.undoBuffer) return;
      this.tasks.splice(this.undoBuffer.index, 0, this.undoBuffer.task);
      this.undoBuffer = null;
      this.sound.playPop();
      this.saveTasks();
      this.hideToast();
    }

    openEditModal(taskId) {
      const task = this.tasks.find((t) => t.id === taskId);
      if (!task) return;

      this.editTaskId.value = task.id;
      this.editTaskTitle.value = task.title;
      this.editTaskDesc.value = task.description || '';
      this.editTaskPriority.value = task.priority;
      this.editTaskCategory.value = task.category;
      this.editTaskDueDate.value = task.dueDate || '';

      this.editModal.showModal();
    }

    handleSaveEdit() {
      const taskId = this.editTaskId.value;
      const task = this.tasks.find((t) => t.id === taskId);
      if (!task) return;

      task.title = this.editTaskTitle.value.trim();
      task.description = this.editTaskDesc.value.trim();
      task.priority = this.editTaskPriority.value;
      task.category = this.editTaskCategory.value;
      task.dueDate = this.editTaskDueDate.value;

      this.editModal.close();
      this.sound.playPop();
      this.saveTasks();
      this.showToast('Task updated successfully');
    }

    clearCompleted() {
      const completedTasks = this.tasks.filter((t) => t.completed);
      if (completedTasks.length === 0) {
        this.showToast('No completed tasks to clear.');
        return;
      }

      if (confirm(`Remove all ${completedTasks.length} completed task(s)?`)) {
        this.tasks = this.tasks.filter((t) => !t.completed);
        this.sound.playDelete();
        this.saveTasks();
        this.showToast(`Cleared ${completedTasks.length} completed task(s)`);
      }
    }

    resetToDefaults() {
      if (confirm('Reset your tasks to default demo data?')) {
        this.tasks = [...SAMPLE_TASKS];
        this.sound.playPop();
        this.saveTasks();
        this.showToast('Reset to default tasks');
      }
    }

    exportJSON() {
      const dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(this.tasks, null, 2));
      const downloadAnchor = document.createElement('a');
      downloadAnchor.setAttribute('href', dataStr);
      downloadAnchor.setAttribute('download', `taskflow-backup-${new Date().toISOString().slice(0, 10)}.json`);
      document.body.appendChild(downloadAnchor);
      downloadAnchor.click();
      downloadAnchor.remove();
      this.showToast('Tasks exported as JSON');
    }

    importJSON(event) {
      const file = event.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = (e) => {
        try {
          const imported = JSON.parse(e.target.result);
          if (Array.isArray(imported)) {
            this.tasks = imported;
            this.saveTasks();
            this.showToast(`Imported ${imported.length} tasks!`);
          } else {
            alert('Invalid task file format.');
          }
        } catch (err) {
          alert('Failed to read JSON file.');
        }
        this.importFileInput.value = '';
      };
      reader.readAsText(file);
    }

    showToast(message, allowUndo = false) {
      this.toastMessage.textContent = message;
      if (allowUndo) {
        this.toastUndoBtn.classList.remove('hidden');
      } else {
        this.toastUndoBtn.classList.add('hidden');
      }

      this.toast.classList.remove('hidden');
      if (this.toastTimeout) clearTimeout(this.toastTimeout);

      this.toastTimeout = setTimeout(() => {
        this.hideToast();
      }, 4500);
    }

    hideToast() {
      this.toast.classList.add('hidden');
      if (this.toastTimeout) clearTimeout(this.toastTimeout);
    }

    // ========================================================================
    // Filtering, Sorting & Rendering
    // ========================================================================
    getFilteredTasks() {
      return this.tasks.filter((task) => {
        // Status filter
        if (this.filter === 'active' && task.completed) return false;
        if (this.filter === 'completed' && !task.completed) return false;
        if (this.filter === 'starred' && !task.starred) return false;

        // Category filter
        if (this.categoryFilter !== 'all' && task.category !== this.categoryFilter) return false;

        // Search query
        if (this.searchQuery) {
          const titleMatch = task.title.toLowerCase().includes(this.searchQuery);
          const descMatch = task.description ? task.description.toLowerCase().includes(this.searchQuery) : false;
          if (!titleMatch && !descMatch) return false;
        }

        return true;
      });
    }

    getSortedTasks(tasks) {
      const sorted = [...tasks];
      const priorityWeight = { high: 3, medium: 2, low: 1 };

      switch (this.sortBy) {
        case 'created-asc':
          return sorted.sort((a, b) => a.createdAt - b.createdAt);
        case 'due-asc':
          return sorted.sort((a, b) => {
            if (!a.dueDate) return 1;
            if (!b.dueDate) return -1;
            return a.dueDate.localeCompare(b.dueDate);
          });
        case 'priority-desc':
          return sorted.sort((a, b) => priorityWeight[b.priority] - priorityWeight[a.priority]);
        case 'alpha-asc':
          return sorted.sort((a, b) => a.title.localeCompare(b.title));
        case 'created-desc':
        default:
          return sorted.sort((a, b) => b.createdAt - a.createdAt);
      }
    }

    updateStats() {
      const total = this.tasks.length;
      const completed = this.tasks.filter((t) => t.completed).length;
      const active = total - completed;
      const starred = this.tasks.filter((t) => t.starred).length;

      // Tab counters
      this.countAll.textContent = total;
      this.countActive.textContent = active;
      this.countCompleted.textContent = completed;
      this.countStarred.textContent = starred;

      // Stats card counts
      const urgent = this.tasks.filter((t) => !t.completed && t.priority === 'high').length;
      const todayStr = getRelativeDateString(0);
      const dueToday = this.tasks.filter((t) => !t.completed && t.dueDate === todayStr).length;

      this.urgentCount.textContent = urgent;
      this.todayCount.textContent = dueToday;
      this.completedCount.textContent = completed;
      this.footerSummary.textContent = `${active} task${active === 1 ? '' : 's'} remaining`;

      // Percentage
      const percentage = total === 0 ? 0 : Math.round((completed / total) * 100);
      this.statsPercentage.textContent = `${percentage}%`;
      this.statsCounter.textContent = `${completed} of ${total} tasks completed`;
      this.progressBarFill.style.width = `${percentage}%`;

      // Circular ring progress (circumference ~ 194.78)
      const circumference = 2 * Math.PI * 31;
      const offset = circumference - (percentage / 100) * circumference;
      this.progressRingCircle.style.strokeDashoffset = offset;

      // Dynamic motivation message
      if (total === 0) {
        this.statsBadge.textContent = 'Ready';
        this.statsMotivation.textContent = 'Add your first task to get rolling!';
      } else if (percentage === 100) {
        this.statsBadge.textContent = 'Complete 🎉';
        this.statsMotivation.textContent = 'Incredible work! You crushed every goal today.';
      } else if (percentage >= 60) {
        this.statsBadge.textContent = 'In The Zone';
        this.statsMotivation.textContent = 'Fantastic momentum! Finish the day strong.';
      } else if (percentage > 0) {
        this.statsBadge.textContent = 'In Progress';
        this.statsMotivation.textContent = 'Great start! Keep checking things off.';
      } else {
        this.statsBadge.textContent = 'Focus Time';
        this.statsMotivation.textContent = 'Ready to conquer your to-do list?';
      }
    }

    formatDueDateBadge(dueDate) {
      if (!dueDate) return '';

      const today = new Date();
      today.setHours(0, 0, 0, 0);

      const [year, month, day] = dueDate.split('-').map(Number);
      const due = new Date(year, month - 1, day);
      due.setHours(0, 0, 0, 0);

      const diffDays = Math.round((due - today) / (1000 * 60 * 60 * 24));

      let badgeClass = 'badge-due';
      let badgeLabel = '';

      if (diffDays < 0) {
        badgeClass += ' overdue';
        badgeLabel = `⚠️ Overdue (${Math.abs(diffDays)}d ago)`;
      } else if (diffDays === 0) {
        badgeClass += ' today';
        badgeLabel = '⚡ Due Today';
      } else if (diffDays === 1) {
        badgeLabel = '📅 Tomorrow';
      } else {
        badgeLabel = `📅 ${due.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}`;
      }

      return `<span class="meta-badge ${badgeClass}">${badgeLabel}</span>`;
    }

    render() {
      this.updateStats();

      const filtered = this.getFilteredTasks();
      const sorted = this.getSortedTasks(filtered);

      // Check for empty state
      if (sorted.length === 0) {
        this.taskList.innerHTML = '';
        this.emptyState.classList.remove('hidden');

        if (this.searchQuery) {
          this.emptyTitle.textContent = 'No matching tasks';
          this.emptyDescription.textContent = `No tasks found matching "${this.searchQuery}". Try a different keyword.`;
        } else if (this.filter === 'completed') {
          this.emptyTitle.textContent = 'No completed tasks';
          this.emptyDescription.textContent = 'Finish some tasks to see them celebrated here!';
        } else if (this.filter === 'starred') {
          this.emptyTitle.textContent = 'No starred tasks';
          this.emptyDescription.textContent = 'Click the star icon on any task to bookmark it here.';
        } else {
          this.emptyTitle.textContent = 'All caught up!';
          this.emptyDescription.textContent = 'You have no tasks in this view. Enjoy your day or add a new goal.';
        }
        return;
      }

      this.emptyState.classList.add('hidden');

      // Render tasks list
      this.taskList.innerHTML = sorted
        .map((task) => {
          const priorityIcons = {
            high: '🔴 High',
            medium: '🟡 Medium',
            low: '🟢 Low'
          };

          return `
          <li class="task-item priority-${task.priority} ${task.completed ? 'completed' : ''}" data-id="${task.id}">
            <button class="task-checkbox-btn" aria-label="${task.completed ? 'Mark incomplete' : 'Mark complete'}">
              <div class="checkbox-box">
                <svg class="checkbox-check" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                  <polyline points="20 6 9 17 4 12"></polyline>
                </svg>
              </div>
            </button>

            <div class="task-content">
              <div class="task-title">${this.escapeHTML(task.title)}</div>
              ${task.description ? `<div class="task-description">${this.escapeHTML(task.description)}</div>` : ''}
              <div class="task-meta">
                <span class="meta-badge badge-category">🏷️ ${this.escapeHTML(task.category)}</span>
                <span class="meta-badge badge-priority-${task.priority}">${priorityIcons[task.priority]}</span>
                ${this.formatDueDateBadge(task.dueDate)}
              </div>
            </div>

            <div class="task-actions">
              <button class="action-btn star-btn ${task.starred ? 'starred' : ''}" title="${task.starred ? 'Unstar' : 'Star'}" aria-label="Toggle star">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="${task.starred ? 'currentColor' : 'none'}" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                </svg>
              </button>

              <button class="action-btn edit-btn" title="Edit Task" aria-label="Edit task">
                <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                </svg>
              </button>

              <button class="action-btn delete-btn" title="Delete Task" aria-label="Delete task">
                <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polyline points="3 6 5 6 21 6"></polyline>
                  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                </svg>
              </button>
            </div>
          </li>
        `;
        })
        .join('');

      // Attach task action listeners
      this.taskList.querySelectorAll('.task-item').forEach((item) => {
        const taskId = item.dataset.id;

        item.querySelector('.task-checkbox-btn').addEventListener('click', () => {
          this.toggleTaskStatus(taskId);
        });

        item.querySelector('.star-btn').addEventListener('click', () => {
          this.toggleTaskStar(taskId);
        });

        item.querySelector('.edit-btn').addEventListener('click', () => {
          this.openEditModal(taskId);
        });

        item.querySelector('.delete-btn').addEventListener('click', () => {
          this.deleteTask(taskId, item);
        });
      });
    }

    escapeHTML(str) {
      if (!str) return '';
      return str
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
    }
  }

  // Initialize on DOMContentLoaded
  document.addEventListener('DOMContentLoaded', () => {
    window.app = new TodoApp();
  });
})();