app.js

let notes = JSON.parse(localStorage.getItem('noteit_notes') || '[]');
let activeNoteId = null;
let filterTag = 'all';
let searchQuery = '';
let saveTimeout = null;

const notesList = document.getElementById('notesList');
const notesCount = document.getElementById('notesCount');
const newNoteBtn = document.getElementById('newNoteBtn');
const createFirstBtn = document.getElementById('createFirstBtn');
const searchInput = document.getElementById('searchInput');
const editorToolbar = document.getElementById('editorToolbar');
const editorEmpty = document.getElementById('editorEmpty');
const editorWrap = document.getElementById('editorWrap');
const noteTitleInput = document.getElementById('noteTitleInput');
const editorContent = document.getElementById('editorContent');
const editorMeta = document.getElementById('editorMeta');
const deleteNoteBtn = document.getElementById('deleteNoteBtn');
const tagInput = document.getElementById('tagInput');
const addTagBtn = document.getElementById('addTagBtn');
const currentTags = document.getElementById('currentTags');
const tagsRow = document.getElementById('tagsRow');

function generateId() {
  return Date.now().toString(36) + Math.random().toString(36).slice(2, 6);
}

function formatDate(ts) {
  const d = new Date(ts);
  const now = new Date();
  const diff = now - d;
  if (diff < 60000) return 'Just now';
  if (diff < 3600000) return Math.floor(diff / 60000) + 'm ago';
  if (diff < 86400000) return Math.floor(diff / 3600000) + 'h ago';
  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
}

function getTextPreview(html) {
  const tmp = document.createElement('div');
  tmp.innerHTML = html;
  return tmp.textContent.trim().slice(0, 80) || 'Empty note';
}

function getAllTags() {
  const all = new Set();
  notes.forEach(n => (n.tags || []).forEach(t => all.add(t)));
  return [...all];
}

function renderTagsRow() {
  const tags = getAllTags();
  tagsRow.innerHTML = `<button class="tag-filter ${filterTag === 'all' ? 'active' : ''}" data-tag="all">All</button>`;
  tags.forEach(t => {
    const btn = document.createElement('button');
    btn.className = 'tag-filter' + (filterTag === t ? ' active' : '');
    btn.dataset.tag = t;
    btn.textContent = t;
    tagsRow.appendChild(btn);
  });
  tagsRow.querySelectorAll('.tag-filter').forEach(btn => {
    btn.addEventListener('click', () => {
      filterTag = btn.dataset.tag;
      renderTagsRow();
      renderNotesList();
    });
  });
}

function filteredNotes() {
  return notes.filter(n => {
    const matchTag = filterTag === 'all' || (n.tags || []).includes(filterTag);
    const matchSearch = !searchQuery ||
      (n.title || '').toLowerCase().includes(searchQuery) ||
      getTextPreview(n.content || '').toLowerCase().includes(searchQuery);
    return matchTag && matchSearch;
  }).sort((a, b) => b.updatedAt - a.updatedAt);
}

function renderNotesList() {
  const list = filteredNotes();
  notesCount.textContent = `${notes.length} note${notes.length !== 1 ? 's' : ''}`;

  if (!list.length) {
    notesList.innerHTML = '<p class="notes-empty">No notes found.</p>';
    return;
  }

  notesList.innerHTML = list.map(n => `
    <div class="note-item ${n.id === activeNoteId ? 'active' : ''}" data-id="${n.id}">
      <div class="note-item-title">${n.title || 'Untitled'}</div>
      <div class="note-item-preview">${getTextPreview(n.content || '')}</div>
      <div class="note-item-meta">
        <span class="note-item-date">${formatDate(n.updatedAt)}</span>
        <div class="note-item-tags">${(n.tags || []).map(t => `<span class="note-tag">${t}</span>`).join('')}</div>
      </div>
    </div>`).join('');

  notesList.querySelectorAll('.note-item').forEach(item => {
    item.addEventListener('click', () => openNote(item.dataset.id));
  });
}

function openNote(id) {
  const note = notes.find(n => n.id === id);
  if (!note) return;
  activeNoteId = id;

  editorEmpty.style.display = 'none';
  editorWrap.style.display = 'flex';
  editorToolbar.style.display = 'flex';

  noteTitleInput.value = note.title || '';
  editorContent.innerHTML = note.content || '';
  updateEditorMeta(note);
  renderCurrentTags(note.tags || []);
  renderNotesList();
}

function updateEditorMeta(note) {
  editorMeta.textContent = `Last edited ${formatDate(note.updatedAt)}`;
}

function renderCurrentTags(tags) {
  currentTags.innerHTML = tags.map(t =>
    `<span class="editor-tag" data-tag="${t}">${t} x</span>`
  ).join('');
  currentTags.querySelectorAll('.editor-tag').forEach(el => {
    el.addEventListener('click', () => removeTag(el.dataset.tag));
  });
}

function saveActiveNote() {
  if (!activeNoteId) return;
  const idx = notes.findIndex(n => n.id === activeNoteId);
  if (idx === -1) return;
  notes[idx].title = noteTitleInput.value;
  notes[idx].content = editorContent.innerHTML;
  notes[idx].updatedAt = Date.now();
  persist();
  renderNotesList();
  updateEditorMeta(notes[idx]);
}

function scheduleSave() {
  clearTimeout(saveTimeout);
  saveTimeout = setTimeout(saveActiveNote, 600);
}

function createNote() {
  const note = {
    id: generateId(),
    title: '',
    content: '',
    tags: [],
    createdAt: Date.now(),
    updatedAt: Date.now()
  };
  notes.unshift(note);
  persist();
  renderNotesList();
  renderTagsRow();
  openNote(note.id);
  setTimeout(() => noteTitleInput.focus(), 50);
}

function deleteActiveNote() {
  if (!activeNoteId) return;
  if (!confirm('Delete this note?')) return;
  notes = notes.filter(n => n.id !== activeNoteId);
  persist();
  activeNoteId = null;
  editorWrap.style.display = 'none';
  editorToolbar.style.display = 'none';
  editorEmpty.style.display = '';
  renderNotesList();
  renderTagsRow();
}

function addTag() {
  const tag = tagInput.value.trim().toLowerCase().replace(/\s+/g, '-');
  if (!tag || !activeNoteId) { tagInput.value = ''; return; }
  const note = notes.find(n => n.id === activeNoteId);
  if (!note) return;
  if (!(note.tags || []).includes(tag)) {
    note.tags = [...(note.tags || []), tag];
    persist();
    renderCurrentTags(note.tags);
    renderTagsRow();
    renderNotesList();
  }
  tagInput.value = '';
}

function removeTag(tag) {
  const note = notes.find(n => n.id === activeNoteId);
  if (!note) return;
  note.tags = note.tags.filter(t => t !== tag);
  persist();
  renderCurrentTags(note.tags);
  renderTagsRow();
  renderNotesList();
}

function persist() {
  localStorage.setItem('noteit_notes', JSON.stringify(notes));
}

// Toolbar actions
function execFormatCmd(cmd) {
  if (!activeNoteId) return;
  editorContent.focus();
  switch (cmd) {
    case 'bold': document.execCommand('bold'); break;
    case 'italic': document.execCommand('italic'); break;
    case 'h1': document.execCommand('formatBlock', false, '<h1>'); break;
    case 'h2': document.execCommand('formatBlock', false, '<h2>'); break;
    case 'ul': document.execCommand('insertUnorderedList'); break;
    case 'code': {
      const sel = window.getSelection();
      if (sel.rangeCount) {
        const range = sel.getRangeAt(0);
        const code = document.createElement('code');
        try { range.surroundContents(code); } catch {}
      }
      break;
    }
    case 'hr': document.execCommand('insertHorizontalRule'); break;
  }
  scheduleSave();
}

document.querySelectorAll('.tool-btn').forEach(btn => {
  btn.addEventListener('click', () => execFormatCmd(btn.dataset.cmd));
});

noteTitleInput.addEventListener('input', scheduleSave);
editorContent.addEventListener('input', scheduleSave);

newNoteBtn.addEventListener('click', createNote);
createFirstBtn.addEventListener('click', createNote);
deleteNoteBtn.addEventListener('click', deleteActiveNote);

addTagBtn.addEventListener('click', addTag);
tagInput.addEventListener('keydown', e => { if (e.key === 'Enter') addTag(); });

searchInput.addEventListener('input', () => {
  searchQuery = searchInput.value.trim().toLowerCase();
  renderNotesList();
});

// Keyboard shortcut: Ctrl+N
document.addEventListener('keydown', e => {
  if ((e.ctrlKey || e.metaKey) && e.key === 'n') { e.preventDefault(); createNote(); }
});

// Init
renderTagsRow();
renderNotesList();

if (notes.length > 0) {
  openNote(notes.sort((a, b) => b.updatedAt - a.updatedAt)[0].id);
}