script.js

// ── STATE ──
let notes = [];
let activeId = null;
let filter = 'all';
let tagFilter = null;
let saveTimer = null;

// ── DOM ──
const $list      = document.getElementById('list');
const $titleInp  = document.getElementById('note-title');
const $bodyInp   = document.getElementById('note-body');
const $tagInp    = document.getElementById('tag-inp');
const $activeTags= document.getElementById('active-tags');
const $tagsBar   = document.getElementById('tags-bar-list');
const $count     = document.getElementById('count');
const $search    = document.getElementById('search');
const $stWords   = document.getElementById('st-words');
const $stChars   = document.getElementById('st-chars');
const $stSaved   = document.getElementById('st-saved');
const $pinBtn    = document.getElementById('pin-btn');
const $overlay   = document.getElementById('overlay');
const $toast     = document.getElementById('toast');
const $edEmpty   = document.getElementById('editor-empty');
const $edNote    = document.getElementById('editor-note');

// ── STORAGE ──
function persist() {
  localStorage.setItem('notes_v2', JSON.stringify(notes));
  flashSaved();
}
function hydrate() {
  try { notes = JSON.parse(localStorage.getItem('notes_v2')) || []; }
  catch { notes = []; }
}

// ── TOAST ──
let toastT;
function toast(msg, type = 'blue') {
  $toast.textContent = msg;
  $toast.className = 'toast show ' + type;
  clearTimeout(toastT);
  toastT = setTimeout(() => $toast.className = 'toast', 2000);
}

// ── SAVED ──
function flashSaved() {
  $stSaved.textContent = '✦ saved';
  clearTimeout(saveTimer);
  saveTimer = setTimeout(() => $stSaved.textContent = '', 1800);
}

// ── HELPERS ──
function uid() { return Date.now().toString(36) + Math.random().toString(36).slice(2); }
function relTime(iso) {
  const d = (Date.now() - new Date(iso)) / 1000;
  if (d < 60)    return 'just now';
  if (d < 3600)  return Math.floor(d / 60) + 'm ago';
  if (d < 86400) return Math.floor(d / 3600) + 'h ago';
  return new Date(iso).toLocaleDateString('en-GB', { day:'2-digit', month:'short' });
}

// ── CREATE ──
function newNote() {
  const n = { id: uid(), title: '', body: '', tags: [], pinned: false, updatedAt: new Date().toISOString() };
  notes.unshift(n);
  persist();
  render();
  open(n.id);
  $titleInp.focus();
  toast('New note', 'blue');
}

// ── OPEN ──
function open(id) {
  activeId = id;
  const n = notes.find(x => x.id === id);
  if (!n) return;
  $edEmpty.style.display = 'none';
  $edNote.style.display  = 'flex';
  $titleInp.value = n.title;
  $bodyInp.value  = n.body;
  renderActiveTags(n.tags);
  updateStatus(n.body);
  syncPinBtn(n.pinned);
  render();
}

// ── UPDATE ──
function patch(field, val) {
  const n = notes.find(x => x.id === activeId);
  if (!n) return;
  n[field] = val;
  n.updatedAt = new Date().toISOString();
  persist();
}

// ── PIN ──
function togglePin() {
  const n = notes.find(x => x.id === activeId);
  if (!n) return;
  n.pinned = !n.pinned;
  persist();
  syncPinBtn(n.pinned);
  render();
  toast(n.pinned ? '📌 Pinned' : 'Unpinned', 'blue');
}
function syncPinBtn(pinned) {
  $pinBtn.textContent = pinned ? '📌 Pinned' : '📌 Pin';
  $pinBtn.classList.toggle('pinned', pinned);
}

// ── DELETE ──
let pendingDel = null;
function askDelete() { pendingDel = activeId; $overlay.classList.add('open'); }
function cancelDel() { pendingDel = null; $overlay.classList.remove('open'); }
function confirmDel() {
  notes = notes.filter(x => x.id !== pendingDel);
  if (activeId === pendingDel) {
    activeId = null;
    $edNote.style.display  = 'none';
    $edEmpty.style.display = 'flex';
  }
  persist(); render(); cancelDel();
  toast('Note deleted', 'blue');
}

// ── TAGS ──
function renderActiveTags(tags) {
  $activeTags.innerHTML = '';
  tags.forEach(t => {
    const s = document.createElement('span');
    s.className = 'note-tag-active';
    s.innerHTML = `${t}<button onclick="removeTag('${t}')">×</button>`;
    $activeTags.appendChild(s);
  });
}
function addTag(raw) {
  const t = raw.trim().toLowerCase().replace(/\s+/g, '-');
  if (!t) return;
  const n = notes.find(x => x.id === activeId);
  if (!n || n.tags.includes(t)) return;
  n.tags.push(t);
  n.updatedAt = new Date().toISOString();
  persist();
  renderActiveTags(n.tags);
  render();
  renderTagsBar();
}
function removeTag(t) {
  const n = notes.find(x => x.id === activeId);
  if (!n) return;
  n.tags = n.tags.filter(x => x !== t);
  persist();
  renderActiveTags(n.tags);
  render();
  renderTagsBar();
}
function allTags() {
  return [...new Set(notes.flatMap(n => n.tags))];
}
function renderTagsBar() {
  const tags = allTags();
  $tagsBar.innerHTML = '';
  if (!tags.length) { $tagsBar.innerHTML = '<span class="tags-none">No tags yet</span>'; return; }
  tags.forEach(t => {
    const el = document.createElement('span');
    el.className = 'tb-tag' + (tagFilter === t ? ' active' : '');
    el.textContent = t;
    el.onclick = () => { tagFilter = tagFilter === t ? null : t; render(); renderTagsBar(); };
    $tagsBar.appendChild(el);
  });
}

// ── FILTERED LIST ──
function filtered() {
  const q = $search.value.trim().toLowerCase();
  let list = [...notes];
  if (filter === 'pinned') list = list.filter(n => n.pinned);
  if (tagFilter) list = list.filter(n => n.tags.includes(tagFilter));
  if (q) list = list.filter(n => n.title.toLowerCase().includes(q) || n.body.toLowerCase().includes(q));
  return list.sort((a, b) => (b.pinned ? 1 : 0) - (a.pinned ? 1 : 0));
}

// ── RENDER LIST ──
function render() {
  const list = filtered();
  $count.textContent = list.length + ' note' + (list.length !== 1 ? 's' : '');
  $list.innerHTML = '';
  if (!list.length) {
    $list.innerHTML = `<div class="list-empty"><div class="list-empty-icon">✦</div>Nothing here yet.</div>`;
    return;
  }
  list.forEach((n, i) => {
    const el = document.createElement('div');
    el.className = 'card' + (n.id === activeId ? ' active' : '') + (n.pinned ? ' pinned' : '');
    el.style.animationDelay = (i * 0.035) + 's';
    const tagsHtml = n.tags.map(t => `<span class="card-tag">${t}</span>`).join('');
    el.innerHTML = `
      <div class="card-top">
        ${n.pinned ? '<span class="card-pin">📌</span>' : ''}
        <span class="card-title">${n.title || 'Untitled'}</span>
      </div>
      <div class="card-preview">${n.body.slice(0, 90) || 'No content yet…'}</div>
      <div class="card-foot">
        <div class="card-tags">${tagsHtml}</div>
        <span class="card-date">${relTime(n.updatedAt)}</span>
      </div>`;
    el.onclick = () => open(n.id);
    $list.appendChild(el);
  });
}

// ── STATUS ──
function updateStatus(text) {
  const w = text.trim() ? text.trim().split(/\s+/).length : 0;
  $stWords.textContent = w + ' words';
  $stChars.textContent = text.length + ' chars';
}

// ── FILTER CHIPS ──
document.querySelectorAll('.chip').forEach(c => {
  c.addEventListener('click', () => {
    filter = c.dataset.f;
    document.querySelectorAll('.chip').forEach(x => x.classList.remove('active'));
    c.classList.add('active');
    render();
  });
});

// ── INPUT EVENTS ──
$titleInp.addEventListener('input', () => { patch('title', $titleInp.value); render(); });
$bodyInp.addEventListener('input',  () => { patch('body', $bodyInp.value); updateStatus($bodyInp.value); render(); });
$search.addEventListener('input', render);
$tagInp.addEventListener('keydown', e => {
  if (e.key === 'Enter' || e.key === ',') { e.preventDefault(); addTag($tagInp.value); $tagInp.value = ''; }
});

// ── GLOBAL BINDINGS ──
window.newNote    = newNote;
window.togglePin  = togglePin;
window.askDelete  = askDelete;
window.cancelDel  = cancelDel;
window.confirmDel = confirmDel;
window.removeTag  = removeTag;

// ── KEYBOARD ──
document.addEventListener('keydown', e => {
  if ((e.ctrlKey || e.metaKey) && e.key === 'n') { e.preventDefault(); newNote(); }
});

// ── BOOT ──
hydrate();
render();
renderTagsBar();
$edEmpty.style.display = 'flex';
$edNote.style.display  = 'none';