(function () {
  "use strict";

  var STORAGE_KEY = "focus-desk-tasks-v1";
  var tasks = [];
  var editingId = null;

  var $ = function (id) { return document.getElementById(id); };
  var form = $("create-form");
  var listEl = $("task-list");
  var emptyEl = $("empty-state");
  var searchEl = $("search");
  var statusEl = $("status-filter");
  var prioEl = $("priority-filter");

  function uid() {
    return "t" + Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
  }

  function load() {
    try {
      var raw = localStorage.getItem(STORAGE_KEY);
      if (!raw) { tasks = []; return; }
      var parsed = JSON.parse(raw);
      if (!Array.isArray(parsed)) { tasks = []; return; }
      tasks = parsed.filter(function (t) {
        return t && typeof t.id === "string" && typeof t.title === "string";
      }).map(function (t) {
        return {
          id: t.id,
          title: t.title,
          notes: typeof t.notes === "string" ? t.notes : "",
          priority: ["low", "medium", "high"].indexOf(t.priority) >= 0 ? t.priority : "medium",
          due: typeof t.due === "string" ? t.due : "",
          completed: !!t.completed,
          createdAt: typeof t.createdAt === "number" ? t.createdAt : Date.now()
        };
      });
    } catch (e) {
      tasks = [];
    }
  }

  function save() {
    try { localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks)); } catch (e) {}
  }

  function escapeText(s) {
    return String(s).replace(/[&<>"']/g, function (c) {
      return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c];
    });
  }

  function todayStr() {
    var d = new Date();
    var m = String(d.getMonth() + 1).padStart(2, "0");
    var day = String(d.getDate()).padStart(2, "0");
    return d.getFullYear() + "-" + m + "-" + day;
  }

  function isOverdue(due, completed) {
    return due && !completed && due < todayStr();
  }

  function visibleTasks() {
    var q = searchEl.value.trim().toLowerCase();
    var status = statusEl.value;
    var prio = prioEl.value;
    return tasks.filter(function (t) {
      if (status === "active" && t.completed) return false;
      if (status === "completed" && !t.completed) return false;
      if (prio !== "all" && t.priority !== prio) return false;
      if (q) {
        var hay = (t.title + " " + t.notes).toLowerCase();
        if (hay.indexOf(q) === -1) return false;
      }
      return true;
    });
  }

  function updateCounts() {
    var total = tasks.length;
    var completed = tasks.filter(function (t) { return t.completed; }).length;
    $("count-total").textContent = String(total);
    $("count-active").textContent = String(total - completed);
    $("count-completed").textContent = String(completed);
  }

  function render() {
    updateCounts();
    var view = visibleTasks();
    listEl.innerHTML = "";
    if (view.length === 0) {
      emptyEl.hidden = false;
      emptyEl.querySelector("p").textContent =
        tasks.length === 0 ? "No tasks yet. Add your first above." : "No tasks match your view.";
      return;
    }
    emptyEl.hidden = true;

    view.forEach(function (t) {
      var li = document.createElement("li");
      li.className = "task-item" + (t.completed ? " completed" : "");
      li.setAttribute("data-testid", "task-item");
      li.dataset.id = t.id;

      if (editingId === t.id) {
        li.innerHTML = editMarkup(t);
        bindEdit(li, t);
      } else {
        li.innerHTML = viewMarkup(t);
        bindItem(li, t);
      }
      listEl.appendChild(li);
    });
  }

  function viewMarkup(t) {
    var parts = [];
    parts.push('<input type="checkbox" class="task-toggle" data-testid="task-toggle"' +
      (t.completed ? " checked" : "") + ' aria-label="Toggle complete">');
    var body = '<div class="task-body">';
    body += '<div class="task-title-text"></div>';
    if (t.notes) body += '<div class="task-notes-text"></div>';
    var meta = '<div class="task-meta">';
    meta += '<span class="tag ' + escapeText(t.priority) + '">' + escapeText(t.priority) + '</span>';
    if (t.due) {
      var od = isOverdue(t.due, t.completed);
      meta += '<span class="tag ' + (od ? "overdue" : "due") + '">Due ' + escapeText(t.due) + '</span>';
    }
    meta += '</div>';
    body += meta;
    body += '</div>';
    parts.push(body);
    var actions = '<div class="task-actions">' +
      '<button type="button" class="icon-btn" data-testid="task-edit">Edit</button>' +
      '<button type="button" class="icon-btn delete" data-testid="task-delete">Delete</button>' +
      '</div>';
    parts.push(actions);
    return parts.join("");
  }

  function bindItem(li, t) {
    li.querySelector(".task-title-text").textContent = t.title;
    var notesEl = li.querySelector(".task-notes-text");
    if (notesEl) notesEl.textContent = t.notes;
    li.querySelector('[data-testid="task-toggle"]').addEventListener("change", function (e) {
      t.completed = e.target.checked;
      save(); render();
    });
    li.querySelector('[data-testid="task-edit"]').addEventListener("click", function () {
      editingId = t.id; render();
    });
    li.querySelector('[data-testid="task-delete"]').addEventListener("click", function () {
      tasks = tasks.filter(function (x) { return x.id !== t.id; });
      if (editingId === t.id) editingId = null;
      save(); render();
    });
  }

  function editMarkup(t) {
    return '<form class="edit-form" data-edit-form>' +
      '<div class="field"><label>Edit title</label>' +
      '<input type="text" data-testid="edit-title" maxlength="200" required></div>' +
      '<div class="field"><label>Notes</label>' +
      '<textarea data-testid="edit-notes" rows="2" maxlength="1000"></textarea></div>' +
      '<div class="field-row"><div class="field"><label>Priority</label>' +
      '<select data-testid="edit-priority"><option value="low">Low</option><option value="medium">Medium</option><option value="high">High</option></select></div>' +
      '<div class="field"><label>Due date</label>' +
      '<input type="date" data-testid="edit-due"></div></div>' +
      '<div class="task-actions"><button type="submit" class="btn btn-primary" data-testid="save-edit">Save</button>' +
      '<button type="button" class="btn btn-ghost" data-testid="cancel-edit">Cancel</button></div>' +
      '</form>';
  }

  function bindEdit(li, t) {
    var f = li.querySelector("[data-edit-form]");
    f.querySelector('[data-testid="edit-title"]').value = t.title;
    f.querySelector('[data-testid="edit-notes"]').value = t.notes;
    f.querySelector('[data-testid="edit-priority"]').value = t.priority;
    f.querySelector('[data-testid="edit-due"]').value = t.due;
    f.addEventListener("submit", function (e) {
      e.preventDefault();
      var title = f.querySelector('[data-testid="edit-title"]').value.trim();
      if (!title) return;
      t.title = title;
      t.notes = f.querySelector('[data-testid="edit-notes"]').value;
      t.priority = f.querySelector('[data-testid="edit-priority"]').value;
      t.due = f.querySelector('[data-testid="edit-due"]').value;
      editingId = null;
      save(); render();
    });
    f.querySelector('[data-testid="cancel-edit"]').addEventListener("click", function () {
      editingId = null; render();
    });
  }

  form.addEventListener("submit", function (e) {
    e.preventDefault();
    var title = $("task-title").value.trim();
    if (!title) { $("task-title").focus(); return; }
    var task = {
      id: uid(),
      title: title,
      notes: $("task-notes").value.trim(),
      priority: $("task-priority").value,
      due: $("task-due").value,
      completed: false,
      createdAt: Date.now()
    };
    tasks.unshift(task);
    save();
    form.reset();
    $("task-priority").value = "medium";
    $("task-title").focus();
    render();
  });

  searchEl.addEventListener("input", render);
  statusEl.addEventListener("change", render);
  prioEl.addEventListener("change", render);

  load();
  render();
})();