(() => {
  'use strict';
  const KEY = 'focusdesk_tasks';

  function load() {
    try {
      const raw = localStorage.getItem(KEY);
      if (!raw) return [];
      const p = JSON.parse(raw);
      if (!Array.isArray(p)) return [];
      return p.filter(t => t && typeof t.id === 'string' && typeof t.title === 'string');
    } catch { return []; }
  }
  const save = ts => localStorage.setItem(KEY, JSON.stringify(ts));
  const uid = () => Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
  function fmtDate(iso) {
    if (!iso) return '';
    const [y,m,d] = iso.split('-').map(Number);
    return new Date(y,m-1,d).toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'});
  }
  function overdue(iso) {
    if (!iso) return false;
    const t = new Date(); t.setHours(0,0,0,0);
    const [y,m,d] = iso.split('-').map(Number);
    return new Date(y,m-1,d) < t;
  }

  let tasks = load(), editingId = null;

  const $ = id => document.getElementById(id);
  const $t = s => document.querySelector(`[data-testid="${s}"]`);

  const createForm   = $('create-form');
  const titleInput   = $t('task-title');
  const notesInput   = $t('task-notes');
  const priorityInput= $t('task-priority');
  const dueInput     = $t('task-due');
  const titleError   = $('title-error');
  const searchInput  = $t('search');
  const statusFilter = $t('status-filter');
  const priFilter    = $t('priority-filter');
  const taskList     = $t('task-list');
  const emptyState   = $t('empty-state');
  const emptyMsg     = $('empty-message');
  const emptySub     = $('empty-sub');
  const cTotal       = $t('count-total');
  const cActive      = $t('count-active');
  const cDone        = $t('count-completed');
  const editModal    = $('edit-modal');
  const editForm     = $('edit-form');
  const editTitle    = $t('edit-title');
  const editNotes    = $('edit-notes-input');
  const editPri      = $('edit-priority-input');
  const editDue      = $('edit-due-input');
  const editTitleErr = $('edit-title-error');
  const cancelBtn    = $('cancel-edit');

  function getFiltered() {
    const q = searchInput.value.trim().toLowerCase();
    const st = statusFilter.value, pr = priFilter.value;
    return tasks.filter(t => {
      if (st === 'active' && t.completed) return false;
      if (st === 'completed' && !t.completed) return false;
      if (pr !== 'all' && t.priority !== pr) return false;
      if (q && !t.title.toLowerCase().includes(q) && !(t.notes||'').toLowerCase().includes(q)) return false;
      return true;
    });
  }

  function render() {
    const filtered = getFiltered();
    const done = tasks.filter(t => t.completed).length;
    cTotal.textContent = tasks.length;
    cActive.textContent = tasks.length - done;
    cDone.textContent = done;
    taskList.innerHTML = '';

    if (!filtered.length) {
      emptyState.hidden = false;
      const filtering = searchInput.value.trim() || statusFilter.value !== 'all' || priFilter.value !== 'all';
      if (!tasks.length) { emptyMsg.textContent = 'No tasks yet'; emptySub.textContent = 'Add your first task to get started.'; }
      else if (filtering) { emptyMsg.textContent = 'No matching tasks'; emptySub.textContent = 'Try adjusting your search or filters.'; }
      else { emptyMsg.textContent = 'All done!'; emptySub.textContent = 'Great work – nothing left to show.'; }
      return;
    }
    emptyState.hidden = true;

    const PL = {low:'Low',medium:'Medium',high:'High'};
    filtered.forEach(task => {
      const li = document.createElement('li');
      li.className = 'task-item' + (task.completed ? ' completed' : '');
      li.dataset.testid = 'task-item';
      li.dataset.priority = task.priority;
      const dueHtml = task.due
        ? `<span class="badge badge-due${overdue(task.due)?' overdue':''}">${fmtDate(task.due)}</span>` : '';
      li.innerHTML = `
        <input type="checkbox" class="task-toggle" data-testid="task-toggle"
          aria-label="Mark task ${task.completed?'incomplete':'complete'}" ${task.completed?'checked':''}>
        <div class="task-body">
          <div class="task-main-title"></div>
          ${task.notes?'<div class="task-notes-text"></div>':''}
          <div class="task-meta">
            <span class="badge badge-priority-${task.priority}">${PL[task.priority]||task.priority}</span>
            ${dueHtml}
          </div>
        </div>
        <div class="task-actions">
          <button class="btn btn--icon" data-testid="task-edit" aria-label="Edit task" title="Edit">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
          </button>
          <button class="btn btn--icon danger" data-testid="task-delete" aria-label="Delete task" title="Delete">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/></svg>
          </button>
        </div>`;
      li.querySelector('.task-main-title').textContent = task.title;
      if (task.notes) li.querySelector('.task-notes-text').textContent = task.notes;
      li.querySelector('[data-testid="task-toggle"]').addEventListener('change', () => { tasks = tasks.map(t=>t.id===task.id?{...t,completed:!t.completed}:t); save(tasks); render(); });
      li.querySelector('[data-testid="task-edit"]').addEventListener('click', () => openEdit(task.id));
      li.querySelector('[data-testid="task-delete"]').addEventListener('click', () => { tasks = tasks.filter(t=>t.id!==task.id); save(tasks); render(); });
      taskList.appendChild(li);
    });
  }

  function openEdit(id) {
    const t = tasks.find(x=>x.id===id); if (!t) return;
    editingId = id;
    editTitle.value = t.title; editNotes.value = t.notes||'';
    editPri.value = t.priority; editDue.value = t.due||'';
    editTitleErr.textContent = '';
    editModal.hidden = false; editTitle.focus();
  }
  function closeEdit() { editModal.hidden = true; editingId = null; }

  createForm.addEventListener('submit', e => {
    e.preventDefault();
    const v = titleInput.value;
    if (!v.trim()) { titleError.textContent = 'Title is required.'; titleInput.focus(); return; }
    titleError.textContent = '';
    tasks.unshift({id:uid(), title:v.trim(), notes:notesInput.value.trim(), priority:priorityInput.value, due:dueInput.value||'', completed:false, createdAt:Date.now()});
    save(tasks); createForm.reset(); titleInput.focus(); render();
  });
  titleInput.addEventListener('input', () => { if (titleInput.value.trim()) titleError.textContent = ''; });

  editForm.addEventListener('submit', e => {
    e.preventDefault();
    const v = editTitle.value;
    if (!v.trim()) { editTitleErr.textContent = 'Title is required.'; editTitle.focus(); return; }
    editTitleErr.textContent = '';
    tasks = tasks.map(t => t.id===editingId ? {...t, title:v.trim(), notes:editNotes.value.trim(), priority:editPri.value, due:editDue.value||''} : t);
    save(tasks); closeEdit(); render();
  });
  cancelBtn.addEventListener('click', closeEdit);
  editModal.addEventListener('click', e => { if (e.target===editModal) closeEdit(); });
  document.addEventListener('keydown', e => { if (e.key==='Escape' && !editModal.hidden) closeEdit(); });
  searchInput.addEventListener('input', render);
  statusFilter.addEventListener('change', render);
  priFilter.addEventListener('change', render);

  render();
})();