script.js

document.addEventListener('DOMContentLoaded', () => {
  const board = document.getElementById('board');
  const addNoteBtn = document.getElementById('add-note');
  const swatches = document.querySelectorAll('.color-swatch');
  const toggleThemeBtn = document.getElementById('toggle-theme');
  const clearNotesBtn = document.getElementById('clear-notes');
  const completionCat = document.getElementById('completion-cat');
  const catImage = document.getElementById('cat-image');
  const catSleepingSrc = 'sleeping-cat.png';
  const catOpenSrc = 'cat-open-mouth.png';
  const openMouthPreload = new Image();
  openMouthPreload.src = catOpenSrc;
  const completedPanel = document.getElementById('completed-panel');
  const completedList = document.getElementById('completed-list');
  const closeCompletedBtn = document.getElementById('close-completed');
  const clearCompletedBtn = document.getElementById('clear-completed');

  let currentImportance = 'low';
  let nextCompletionIsConfetti = true;
  let noteCounter = 0;
  const SNAP_SIZE = 20;
  const STORAGE_KEY = 'todo-notes-v1';
  const THEME_KEY = 'todo-theme-v1';

  // ---------- theme handling ----------
  function loadTheme() {
    const saved = localStorage.getItem(THEME_KEY);
    if (saved === 'theme-dark') {
      document.body.classList.remove('theme-light');
      document.body.classList.add('theme-dark');
    } else {
      document.body.classList.remove('theme-dark');
      document.body.classList.add('theme-light');
    }
  }

  function toggleTheme() {
    if (document.body.classList.contains('theme-light')) {
      document.body.classList.remove('theme-light');
      document.body.classList.add('theme-dark');
      localStorage.setItem(THEME_KEY, 'theme-dark');
    } else {
      document.body.classList.remove('theme-dark');
      document.body.classList.add('theme-light');
      localStorage.setItem(THEME_KEY, 'theme-light');
    }
  }

  toggleThemeBtn.addEventListener('click', toggleTheme);
  loadTheme();

  // ---------- toolbar importance selection ----------
  function updateImportanceSelection(activeSwatch) {
    swatches.forEach(s => s.classList.toggle('selected', s === activeSwatch));
  }

  swatches.forEach(swatch => {
    swatch.addEventListener('click', () => {
      currentImportance = swatch.dataset.importance;
      updateImportanceSelection(swatch);
    });
  });

  updateImportanceSelection(document.querySelector('.color-swatch.low'));

  if (completionCat) {
    completionCat.addEventListener('click', toggleCompletedPanel);
  }

  if (closeCompletedBtn) {
    closeCompletedBtn.addEventListener('click', () => {
      completedPanel.classList.remove('visible');
      completedPanel.setAttribute('aria-hidden', 'true');
    });
  }

  if (clearCompletedBtn) {
    clearCompletedBtn.addEventListener('click', clearCompletedNotes);
  }

  // ---------- completed storage ----------
  const COMPLETED_KEY = 'todo-completed-v1';
  let completedNotes = [];
  const deletedNoteIds = new Set();

  function saveCompletedNotes() {
    localStorage.setItem(COMPLETED_KEY, JSON.stringify(completedNotes));
  }

  function loadCompletedNotes() {
    const raw = localStorage.getItem(COMPLETED_KEY);
    if (!raw) return;
    try {
      completedNotes = JSON.parse(raw) || [];
    } catch (e) {
      console.error('Failed to parse completed notes', e);
      completedNotes = [];
    }
  }

  function renderCompletedList() {
    if (!completedList) return;
    if (completedNotes.length === 0) {
      completedList.innerHTML = '<div class="completed-empty">No completed items yet.</div>';
      return;
    }

    completedList.innerHTML = completedNotes.map(item => {
      const formatted = new Date(item.completedAt).toLocaleString();
      return `
        <div class="completed-entry ${item.importance}">
          <div class="completed-text">${item.text || '<em>Empty note</em>'}</div>
          <div class="completed-meta">
            <span>${item.importance}</span>
            <span>${formatted}</span>
          </div>
        </div>
      `;
    }).join('');
  }

  function addCompletedItem(note) {
    const content = note.querySelector('.content');
    if (!content) return;
    const importance = ['low', 'medium', 'high'].find(level => note.classList.contains(level)) || 'low';
    completedNotes.unshift({
      id: note.dataset.id,
      importance,
      text: content.value,
      completedAt: Date.now()
    });
    saveCompletedNotes();
    renderCompletedList();
  }

  function clearCompletedNotes() {
    completedNotes = [];
    saveCompletedNotes();
    renderCompletedList();
  }

  function toggleCompletedPanel() {
    if (!completedPanel) return;
    const isVisible = completedPanel.classList.toggle('visible');
    completedPanel.setAttribute('aria-hidden', String(!isVisible));
  }

  loadCompletedNotes();
  renderCompletedList();

  // ---------- localStorage helpers ----------
  function saveNotes() {
    const notes = [];
    board.querySelectorAll('.note').forEach(note => {
      // Skip notes that are being completed
      if (note.dataset.completing === 'true') return;
      
      const content = note.querySelector('.content');
      const rect = note.getBoundingClientRect();
      const boardRect = board.getBoundingClientRect();

      const importance = ['low', 'medium', 'high'].find(level =>
        note.classList.contains(level)
      );

      notes.push({
        id: note.dataset.id,
        importance,
        text: content.value,
        x: note.offsetLeft,
        y: note.offsetTop,
        width: note.offsetWidth,
        height: note.offsetHeight
      });
    });

    localStorage.setItem(STORAGE_KEY, JSON.stringify(notes));
  }

  function loadNotes() {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (!raw) return;

    try {
      const notes = JSON.parse(raw);
      notes.forEach(noteData => {
        createNote(noteData);
        noteCounter = Math.max(noteCounter, (parseInt(noteData.id, 10) || 0) + 1);
      });
    } catch (e) {
      console.error('Failed to parse saved notes', e);
    }
  }

  clearNotesBtn.addEventListener('click', () => {
    localStorage.removeItem(STORAGE_KEY);
    board.innerHTML = '';
    noteCounter = 0;
  });

  // ---------- create new note ----------
  addNoteBtn.addEventListener('click', () => {
    const id = String(noteCounter++);
    createNote({
      id,
      importance: currentImportance,
      x: 40 + noteCounter * 20,
      y: 40 + noteCounter * 20,
      text: '',
      width: 180,
      height: 120
    });
    saveNotes();
  });

  function createNote({ id, importance, x, y, text, width, height }) {
    // Skip if this note has been deleted/completed
    if (deletedNoteIds.has(id)) return;
    
    const note = document.createElement('div');
    note.className = `note ${importance}`;
    note.style.left = `${x}px`;
    note.style.top = `${y}px`;
    if (width) note.style.width = `${width}px`;
    if (height) note.style.height = `${height}px`;
    note.dataset.id = id;

    const header = document.createElement('div');
    header.className = 'header';

    const title = document.createElement('div');
    title.className = 'title';
    title.textContent = 'Item';

    const actions = document.createElement('div');
    actions.className = 'actions';

    const importanceBtn = document.createElement('button');
    importanceBtn.textContent = '⚑';

    const completeBtn = document.createElement('button');
    completeBtn.className = 'complete';
    completeBtn.textContent = '✔';

    const deleteBtn = document.createElement('button');
    deleteBtn.className = 'delete';
    deleteBtn.textContent = '✕';

    actions.appendChild(importanceBtn);
    actions.appendChild(completeBtn);
    actions.appendChild(deleteBtn);

    header.appendChild(title);
    header.appendChild(actions);

    const content = document.createElement('textarea');
    content.className = 'content';
    content.value = text || '';

    const resizeHandle = document.createElement('div');
    resizeHandle.className = 'resize-handle';

    note.appendChild(header);
    note.appendChild(content);
    note.appendChild(resizeHandle);
    board.appendChild(note);

    setupDragging(note, note);
    setupAutoResize(content);
    setupDelete(deleteBtn, note);
    setupImportanceToggle(importanceBtn, note);
    setupComplete(completeBtn, note);
    setupResizing(note, resizeHandle);
  }

  // ---------- drag logic with snapping ----------
  function setupDragging(note, dragHandle) {
    let offsetX = 0;
    let offsetY = 0;
    let isDragging = false;

    dragHandle.style.touchAction = 'none';

    function startDrag(clientX, clientY) {
      isDragging = true;
      note.style.cursor = 'grabbing';
      document.body.style.userSelect = 'none';
      offsetX = clientX - note.offsetLeft;
      offsetY = clientY - note.offsetTop;
    }

    function moveDrag(clientX, clientY) {
      if (!isDragging) return;
      const x = clientX - offsetX;
      const y = clientY - offsetY;
      note.style.left = `${x}px`;
      note.style.top = `${y}px`;
    }

    function endDrag() {
      if (!isDragging) return;
      isDragging = false;
      note.style.cursor = 'grab';
      document.body.style.userSelect = '';

      const snappedX = Math.round(note.offsetLeft / SNAP_SIZE) * SNAP_SIZE;
      const snappedY = Math.round(note.offsetTop / SNAP_SIZE) * SNAP_SIZE;
      note.style.left = `${snappedX}px`;
      note.style.top = `${snappedY}px`;

      document.removeEventListener('pointermove', onPointerMove);
      document.removeEventListener('pointerup', onPointerUp);
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);

      saveNotes();
    }

    function shouldBlockDrag(target) {
      return target.closest('.content, .resize-handle, button');
    }

    function onPointerDown(e) {
      if (shouldBlockDrag(e.target)) return;
      if (e.pointerType === 'mouse' && e.button !== 0) return;
      e.preventDefault();
      startDrag(e.clientX, e.clientY);
      if (typeof dragHandle.setPointerCapture === 'function') {
        dragHandle.setPointerCapture(e.pointerId);
      }
      document.addEventListener('pointermove', onPointerMove);
      document.addEventListener('pointerup', onPointerUp);
    }

    function onPointerMove(e) {
      moveDrag(e.clientX, e.clientY);
    }

    function onPointerUp() {
      endDrag();
    }

    function onMouseDown(e) {
      if (shouldBlockDrag(e.target)) return;
      if (e.button !== 0) return;
      e.preventDefault();
      startDrag(e.clientX, e.clientY);
      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('mouseup', onMouseUp);
    }

    function onMouseMove(e) {
      moveDrag(e.clientX, e.clientY);
    }

    function onMouseUp() {
      endDrag();
    }

    dragHandle.addEventListener('pointerdown', onPointerDown);
    dragHandle.addEventListener('mousedown', onMouseDown);
    dragHandle.addEventListener('touchstart', (e) => {
      if (shouldBlockDrag(e.target)) return;
      const touch = e.touches[0];
      if (!touch) return;
      e.preventDefault();
      startDrag(touch.clientX, touch.clientY);
      document.addEventListener('touchmove', onTouchMove, { passive: false });
      document.addEventListener('touchend', onTouchEnd);
    }, { passive: false });

    function onTouchMove(e) {
      if (!e.touches[0]) return;
      moveDrag(e.touches[0].clientX, e.touches[0].clientY);
    }

    function onTouchEnd() {
      endDrag();
      document.removeEventListener('touchmove', onTouchMove);
      document.removeEventListener('touchend', onTouchEnd);
    }
  }

  // ---------- auto-expanding textarea ----------
  function setupAutoResize(textarea) {
    const resize = () => {
      textarea.style.height = 'auto';
      textarea.style.height = textarea.scrollHeight + 'px';
      saveNotes();
    };
    textarea.addEventListener('input', resize);
    resize();
  }

  // ---------- delete note ----------
  function setupDelete(button, note) {
    button.addEventListener('click', () => {
      note.remove();
      saveNotes();
    });
  }

  // ---------- per-note importance toggle ----------
  function setupImportanceToggle(button, note) {
    const order = ['low', 'medium', 'high'];
    button.addEventListener('click', () => {
      const current = order.find(level => note.classList.contains(level));
      const next = order[(order.indexOf(current) + 1) % order.length];
      order.forEach(level => note.classList.remove(level));
      note.classList.add(next);
      saveNotes();
    });
  }

  function setupComplete(button, note) {
    button.addEventListener('click', () => {
      completeNote(note);
    });
  }

  function completeNote(note) {
    if (!completionCat || note.dataset.completing === 'true') return;
    note.dataset.completing = 'true';
    deletedNoteIds.add(note.dataset.id);
    addCompletedItem(note);
    const type = nextCompletionIsConfetti ? 'confetti' : 'flowers';
    nextCompletionIsConfetti = !nextCompletionIsConfetti;
    showCompletionParticles(note, type);
    showCatOpenMouth();
    animateNoteIntoCat(note);
    window.setTimeout(() => {
      if (catImage) catImage.src = catSleepingSrc;
    }, 1400);
  }

  function showCatOpenMouth() {
    if (!catImage) return;
    catImage.src = catOpenSrc;
  }

  function showCompletionParticles(note, type) {
    const boardRect = board.getBoundingClientRect();
    const noteRect = note.getBoundingClientRect();
    const centerX = noteRect.left - boardRect.left + noteRect.width / 2;
    const centerY = noteRect.top - boardRect.top + noteRect.height / 2;
    const colors = ['#f43f5e', '#22c55e', '#fb7185', '#60a5fa', '#f59e0b'];

    for (let i = 0; i < 16; i++) {
      const piece = document.createElement('span');
      piece.className = `animation-piece ${type}`;
      piece.textContent = type === 'confetti' ? '🎉' : '❀';
      const angle = Math.random() * Math.PI * 2;
      const distance = 40 + Math.random() * 60;
      const dx = Math.cos(angle) * distance;
      const dy = Math.sin(angle) * distance - 12;
      piece.style.left = `${centerX}px`;
      piece.style.top = `${centerY}px`;
      piece.style.setProperty('--dx', `${dx}px`);
      piece.style.setProperty('--dy', `${dy}px`);
      piece.style.setProperty('--rotate', `${Math.round(Math.random() * 360)}deg`);
      piece.style.color = colors[i % colors.length];
      piece.style.fontSize = `${14 + Math.random() * 10}px`;
      board.appendChild(piece);
      piece.addEventListener('animationend', () => piece.remove());
    }
  }

  function animateNoteIntoCat(note) {
    const noteId = note.dataset.id;
    const noteRect = note.getBoundingClientRect();
    const catRect = completionCat.getBoundingClientRect();
    
    // Calculate distance to cat
    const dx = catRect.left + catRect.width / 2 - (noteRect.left + noteRect.width / 2);
    const dy = catRect.top + catRect.height / 2 - (noteRect.top + noteRect.height / 2);

    // Mark as deleted and remove from board
    deletedNoteIds.add(noteId);
    note.style.visibility = 'hidden';
    
    // Create a fresh overlay element for animation
    const overlay = document.createElement('div');
    overlay.style.cssText = `
      position: fixed;
      left: ${noteRect.left}px;
      top: ${noteRect.top}px;
      width: ${noteRect.width}px;
      height: ${noteRect.height}px;
      background: white;
      border: 1px solid #ccc;
      border-radius: 16px;
      z-index: 9999;
      pointer-events: none;
      margin: 0;
      padding: 16px 18px;
      box-sizing: border-box;
      transition: transform 1.4s ease-out, opacity 1.4s ease-out;
      transform: translate(0, 0) scale(1);
      opacity: 1;
      will-change: transform, opacity;
    `;
    
    document.body.appendChild(overlay);

    completionCat.classList.add('active');
    window.setTimeout(() => completionCat.classList.remove('active'), 450);

    // Trigger animation after a minimal delay to ensure transition is active
    setTimeout(() => {
      overlay.style.transform = `translate(${dx}px, ${dy}px) scale(0.18)`;
      overlay.style.opacity = '0';
    }, 10);

    // Clean up
    const cleanup = () => {
      overlay.remove();
      note.remove();
      saveNotes();
    };

    overlay.addEventListener('transitionend', cleanup, { once: true });
    setTimeout(cleanup, 1600);
  }

  // ---------- resizing ----------
  function setupResizing(note, handle) {
    let isResizing = false;
    let startX = 0;
    let startY = 0;
    let startWidth = 0;
    let startHeight = 0;

    handle.addEventListener('mousedown', (e) => {
      e.stopPropagation();
      isResizing = true;
      startX = e.clientX;
      startY = e.clientY;
      startWidth = note.offsetWidth;
      startHeight = note.offsetHeight;

      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('mouseup', onMouseUp);
    });

    function onMouseMove(e) {
      if (!isResizing) return;
      const dx = e.clientX - startX;
      const dy = e.clientY - startY;
      const newWidth = Math.max(140, startWidth + dx);
      const newHeight = Math.max(80, startHeight + dy);
      note.style.width = `${newWidth}px`;
      note.style.height = `${newHeight}px`;
    }

    function onMouseUp() {
      if (!isResizing) return;
      isResizing = false;
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
      saveNotes();
    }
  }

  // ---------- initial load ----------
  loadNotes();
});