class TaskManager {
  constructor() {
    this.tasks = [];
    this.load();
    this.render();
    this.attachEventListeners();
  }

  load() {
    try {
      const stored = localStorage.getItem('focusdeskTasks');
      this.tasks = stored ? JSON.parse(stored) : [];
    } catch {
      this.tasks = [];
      localStorage.removeItem('focusdeskTasks');
    }
  }

  save() {
    localStorage.setItem('focusdeskTasks', JSON.stringify(this.tasks));
  }

  generateId() {
    return Date.now() + Math.random().toString(36).substr(2, 9);
  }

  addTask(title, notes, priority, due) {
    const trimmed = title.trim();
    if (!trimmed) return false;

    this.tasks.unshift({
      id: this.generateId(),
      title: trimmed,
      notes: notes.trim(),
      priority,
      due,
      completed: false,
      created: new Date().toISOString()
    });

    this.save();
    return true;
  }

  deleteTask(id) {
    this.tasks = this.tasks.filter(t => t.id !== id);
    this.save();
  }

  toggleTask(id) {
    const task = this.tasks.find(t => t.id === id);
    if (task) {
      task.completed = !task.completed;
      this.save();
    }
  }

  updateTask(id, updates) {
    const task = this.tasks.find(t => t.id === id);
    if (task) {
      Object.assign(task, updates);
      this.save();
    }
  }

  getFilteredTasks() {
    const search = document.getElementById('searchInput').value.toLowerCase();
    const statusFilter = document.getElementById('statusFilter').value;
    const priorityFilter = document.getElementById('priorityFilter').value;

    return this.tasks.filter(task => {
      const matchesSearch =
        task.title.toLowerCase().includes(search) ||
        task.notes.toLowerCase().includes(search);

      const matchesStatus =
        statusFilter === 'all' ||
        (statusFilter === 'active' && !task.completed) ||
        (statusFilter === 'completed' && task.completed);

      const matchesPriority =
        priorityFilter === 'all' ||
        task.priority === priorityFilter;

      return matchesSearch && matchesStatus && matchesPriority;
    });
  }

  updateCounts() {
    const total = this.tasks.length;
    const active = this.tasks.filter(t => !t.completed).length;
    const completed = this.tasks.filter(t => t.completed).length;

    document.querySelector('[data-testid="count-total"]').textContent = total;
    document.querySelector('[data-testid="count-active"]').textContent = active;
    document.querySelector('[data-testid="count-completed"]').textContent = completed;
  }

  formatDate(dateStr) {
    if (!dateStr) return '';
    const d = new Date(dateStr);
    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
  }

  renderTaskItem(task) {
    const div = document.createElement('div');
    div.className = `task-item ${task.completed ? 'completed' : ''}`;
    div.data-testid = 'task-item';
    div.dataset.taskId = task.id;

    const dueHtml = task.due ? `<div class="task-due">📅 ${this.formatDate(task.due)}</div>` : '';
    const notesHtml = task.notes ? `<div class="task-notes">${this.escapeHtml(task.notes)}</div>` : '';

    div.innerHTML = `
      <input
        type="checkbox"
        class="task-checkbox"
        data-testid="task-toggle"
        ${task.completed ? 'checked' : ''}
        aria-label="Toggle task completion"
      >
      <div class="task-content">
        <div class="task-header">
          <span class="task-title">${this.escapeHtml(task.title)}</span>
          <span class="task-priority ${task.priority}">${task.priority}</span>
        </div>
        ${notesHtml}
        <div class="task-meta">
          ${dueHtml}
        </div>
        <div class="task-actions">
          <button class="btn btn-secondary" data-testid="task-edit" aria-label="Edit task">Edit</button>
          <button class="btn btn-danger" data-testid="task-delete" aria-label="Delete task">Delete</button>
        </div>
      </div>
    `;

    const checkbox = div.querySelector('[data-testid="task-toggle"]');
    checkbox.addEventListener('change', () => {
      this.toggleTask(task.id);
      this.render();
    });

    const editBtn = div.querySelector('[data-testid="task-edit"]');
    editBtn.addEventListener('click', () => this.showEditForm(task));

    const deleteBtn = div.querySelector('[data-testid="task-delete"]');
    deleteBtn.addEventListener('click', () => {
      this.deleteTask(task.id);
      this.render();
    });

    return div;
  }

  showEditForm(task) {
    const backdrop = document.createElement('div');
    backdrop.style.cssText = `
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.3); display: flex; align-items: center;
      justify-content: center; z-index: 1000;
    `;

    const modal = document.createElement('div');
    modal.style.cssText = `
      background: white; padding: 24px; border-radius: 8px;
      max-width: 90%; width: 100%; max-height: 90vh; overflow-y: auto;
      box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    `;

    modal.innerHTML = `
      <h2 style="margin-bottom: 16px; font-size: 18px; font-weight: 700;">Edit Task</h2>
      <div style="display: flex; flex-direction: column; gap: 12px;">
        <input
          type="text"
          placeholder="Title"
          id="editTitle"
          data-testid="edit-title"
          style="padding: 10px 12px; border: 1px solid #e0e3e8; border-radius: 6px; font-size: 14px; font-family: inherit;"
          value="${this.escapeHtml(task.title)}"
        >
        <textarea
          placeholder="Notes"
          id="editNotes"
          style="padding: 10px 12px; border: 1px solid #e0e3e8; border-radius: 6px; font-size: 14px; font-family: inherit; resize: vertical; min-height: 60px;"
        >${this.escapeHtml(task.notes)}</textarea>
        <select id="editPriority" style="padding: 10px 12px; border: 1px solid #e0e3e8; border-radius: 6px; font-size: 14px; font-family: inherit;">
          <option value="low" ${task.priority === 'low' ? 'selected' : ''}>Low</option>
          <option value="medium" ${task.priority === 'medium' ? 'selected' : ''}>Medium</option>
          <option value="high" ${task.priority === 'high' ? 'selected' : ''}>High</option>
        </select>
        <input
          type="date"
          id="editDue"
          style="padding: 10px 12px; border: 1px solid #e0e3e8; border-radius: 6px; font-size: 14px; font-family: inherit;"
          value="${task.due || ''}"
        >
        <div style="display: flex; gap: 12px;">
          <button id="saveBtn" data-testid="save-edit" style="flex: 1; padding: 10px 16px; background: #5b4db8; color: white; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer;">Save</button>
          <button id="cancelBtn" style="flex: 1; padding: 10px 16px; background: #f5f5f5; border: 1px solid #e0e3e8; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer;">Cancel</button>
        </div>
      </div>
    `;

    backdrop.appendChild(modal);
    document.body.appendChild(backdrop);

    const titleInput = modal.querySelector('#editTitle');
    titleInput.focus();

    modal.querySelector('#saveBtn').addEventListener('click', () => {
      const newTitle = titleInput.value.trim();
      if (!newTitle) {
        titleInput.focus();
        return;
      }

      this.updateTask(task.id, {
        title: newTitle,
        notes: modal.querySelector('#editNotes').value.trim(),
        priority: modal.querySelector('#editPriority').value,
        due: modal.querySelector('#editDue').value
      });

      document.body.removeChild(backdrop);
      this.render();
    });

    modal.querySelector('#cancelBtn').addEventListener('click', () => {
      document.body.removeChild(backdrop);
    });

    backdrop.addEventListener('click', (e) => {
      if (e.target === backdrop) {
        document.body.removeChild(backdrop);
      }
    });
  }

  escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
  }

  render() {
    this.updateCounts();

    const filtered = this.getFilteredTasks();
    const taskList = document.querySelector('[data-testid="task-list"]');
    const emptyState = document.querySelector('[data-testid="empty-state"]');

    taskList.innerHTML = '';

    if (filtered.length === 0) {
      emptyState.hidden = false;
    } else {
      emptyState.hidden = true;
      filtered.forEach(task => {
        taskList.appendChild(this.renderTaskItem(task));
      });
    }
  }

  attachEventListeners() {
    document.getElementById('createForm').addEventListener('submit', (e) => {
      e.preventDefault();
      const title = document.getElementById('taskTitle').value;
      const notes = document.getElementById('taskNotes').value;
      const priority = document.getElementById('taskPriority').value;
      const due = document.getElementById('taskDue').value;

      if (this.addTask(title, notes, priority, due)) {
        document.getElementById('taskTitle').value = '';
        document.getElementById('taskNotes').value = '';
        document.getElementById('taskPriority').value = 'medium';
        document.getElementById('taskDue').value = '';
        this.render();
      }
    });

    document.getElementById('searchInput').addEventListener('input', () => this.render());
    document.getElementById('statusFilter').addEventListener('change', () => this.render());
    document.getElementById('priorityFilter').addEventListener('change', () => this.render());
  }
}

document.addEventListener('DOMContentLoaded', () => {
  new TaskManager();
});