script.js

const notesGrid = document.getElementById('notesGrid');
const emptyState = document.getElementById('emptyState');
const modal = document.getElementById('modal');
const modalTitle = document.getElementById('modalTitle');
const noteTitle = document.getElementById('noteTitle');
const noteBody = document.getElementById('noteBody');
const addBtn = document.getElementById('addBtn');
const cancelBtn = document.getElementById('cancelBtn');
const saveBtn = document.getElementById('saveBtn');
const searchInput = document.getElementById('searchInput');

let notes = JSON.parse(localStorage.getItem('notes') || '[]');
let editingId = null;

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

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

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

function renderNotes() {
  const searchTerm = searchInput.value.toLowerCase();
  const filtered = notes.filter(n =>
    n.title.toLowerCase().includes(searchTerm) || n.body.toLowerCase().includes(searchTerm)
  );

  if (filtered.length === 0) {
    notesGrid.innerHTML = '';
    emptyState.style.display = 'block';
    emptyState.querySelector('p').textContent = notes.length === 0 ? 'No notes yet. Click "New Note" to get started!' : 'No notes match your search.';
    return;
  }
  emptyState.style.display = 'none';
  notesGrid.innerHTML = '';
  filtered.forEach(note => {
    const card = document.createElement('div');
    card.className = 'note-card';
    card.innerHTML = `
      <div class="note-title">${escapeHtml(note.title)}</div>
      <div class="note-body">${escapeHtml(note.body)}</div>
      <div class="note-date">${formatDate(note.id)}</div>
      <div class="note-actions">
        <button class="btn-edit" data-id="${note.id}"><i class="fa-solid fa-pen"></i> Edit</button>
        <button class="btn-delete" data-id="${note.id}"><i class="fa-solid fa-trash"></i> Delete</button>
      </div>
    `;
    notesGrid.appendChild(card);
  });
}

function openModal(note = null) {
  editingId = note ? note.id : null;
  modalTitle.textContent = note ? 'Edit Note' : 'New Note';
  noteTitle.value = note ? note.title : '';
  noteBody.value = note ? note.body : '';
  modal.style.display = 'flex';
  noteTitle.focus();
}

function closeModal() {
  modal.style.display = 'none';
  editingId = null;
}

addBtn.addEventListener('click', () => openModal());
cancelBtn.addEventListener('click', closeModal);

saveBtn.addEventListener('click', () => {
  const title = noteTitle.value.trim();
  const body = noteBody.value.trim();
  if (!title && !body) return;
  if (editingId) {
    const note = notes.find(n => n.id === editingId);
    if (note) { note.title = title || 'Untitled'; note.body = body; }
  } else {
    notes.unshift({ id: Date.now(), title: title || 'Untitled', body });
  }
  saveNotes();
  renderNotes();
  closeModal();
});

notesGrid.addEventListener('click', (e) => {
  const editBtn = e.target.closest('.btn-edit');
  const deleteBtn = e.target.closest('.btn-delete');
  if (editBtn) {
    const id = parseInt(editBtn.dataset.id);
    const note = notes.find(n => n.id === id);
    if (note) openModal(note);
  } else if (deleteBtn) {
    const id = parseInt(deleteBtn.dataset.id);
    notes = notes.filter(n => n.id !== id);
    saveNotes();
    renderNotes();
  }
});

searchInput.addEventListener('input', renderNotes);
modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });

renderNotes();