search-renderer.js

const { ipcRenderer, clipboard } = require('electron');
const PasswordManager = require('./utils/passwordManager');
const ClipManager = require('./utils/clipManager');
const { TEMPLATES } = require('./utils/noteTemplates');
const { extractTags } = require('./utils/noteTags');
const { fuzzyScore } = require('./utils/fuzzy');
const { escapeHtml } = require('./utils/sanitize');
const { copySecret } = require('./utils/secureClipboard');

// State
let notes = [];
let passwords = [];
let clips = [];
let filteredResults = []; // Combined notes, passwords and clips
let selectedIndex = -1;
let passwordManager = new PasswordManager();
let clipManager = new ClipManager();

// DOM Elements
const searchInput = document.getElementById('search-input');
const resultsContainer = document.getElementById('results-container');

// Initialize
async function init() {
  await applyAppTheme();
  await loadNotes();
  await loadPasswords();
  await loadClips();
  setupEventListeners();
}

// The search window reuses the app theme (Dark/Light/Paper) instead of being
// hardcoded dark — jarring when the rest of the app is in Light/Paper.
async function applyAppTheme() {
  try {
    const settings = await ipcRenderer.invoke('get-settings');
    const theme = (settings && settings.theme) || 'dark';
    document.body.classList.toggle('light-theme', theme === 'light');
    document.body.classList.toggle('paper-theme', theme === 'paper');
  } catch (error) {
    console.error('Failed to load theme for search window:', error);
  }
}

async function loadNotes() {
  notes = await ipcRenderer.invoke('get-notes');
}

async function loadPasswords() {
  passwords = await passwordManager.loadPasswords();
}

async function loadClips() {
  clips = await clipManager.loadClips();
}

function setupEventListeners() {
  // Search input
  searchInput.addEventListener('input', handleSearch);

  // Keyboard navigation
  searchInput.addEventListener('keydown', handleKeyDown);

  // Escape should close the window regardless of what has focus (e.g. after
  // clicking a result item moved focus away from the input), not just when
  // the search input itself is focused.
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      closeWindow();
    }
  });

  // IPC listeners
  ipcRenderer.on('focus-search', async () => {
    // The search window is created once and reused (shown/hidden), so
    // refresh data on every reopen or newly created notes/passwords/clips
    // would stay invisible until the app was restarted. Theme too — it may
    // have changed since the window was created.
    await applyAppTheme();
    await loadNotes();
    await loadPasswords();
    await loadClips();
    searchInput.focus();
    searchInput.select();
  });
}

function handleSearch(e) {
  const query = e.target.value.trim();

  if (!query) {
    showEmptyState();
    return;
  }

  const lowerQuery = query.toLowerCase();

  // ":n" creates a blank note immediately; ":t" instead lists templates to
  // pick from (handled like any other result set, so arrow keys/Enter work).
  if (lowerQuery === ':n') {
    ipcRenderer.send('create-note-from-search');
    closeWindow();
    return;
  }

  if (lowerQuery === ':t') {
    showTemplatePicker();
    return;
  }

  // "tag:xyz" / "title:xyz" filter notes only, bypassing the general
  // title-or-content search below.
  const tagOperator = query.match(/^tag:(\S+)/i);
  if (tagOperator) {
    const tag = tagOperator[1].toLowerCase();
    filteredResults = notes
      .filter(note => extractTags(note.content).includes(tag))
      .map(note => ({ type: 'note', data: note, titleMatch: true }));
    sortResults(filteredResults);
    selectedIndex = filteredResults.length > 0 ? 0 : -1;
    renderResults(query);
    return;
  }

  const titleOperator = query.match(/^title:(.+)/i);
  if (titleOperator) {
    const titleQuery = titleOperator[1].trim().toLowerCase();
    filteredResults = notes
      .filter(note => (note.title || '').toLowerCase().includes(titleQuery))
      .map(note => ({ type: 'note', data: note, titleMatch: true }));
    sortResults(filteredResults);
    selectedIndex = filteredResults.length > 0 ? 0 : -1;
    renderResults(query);
    return;
  }

  // Match notes on title OR content. Track titleMatch so title hits rank first.
  const matchedNotes = notes.reduce((acc, note) => {
    const title = (note.title || '').toLowerCase();
    const content = stripHtml(note.content).toLowerCase();
    const titleMatch = title.includes(lowerQuery);
    const contentMatch = content.includes(lowerQuery);
    if (titleMatch || contentMatch) {
      acc.push({ type: 'note', data: note, titleMatch });
    }
    return acc;
  }, []);

  const matchedPasswords = passwords.filter(password => {
    const label = (password.label || '').toLowerCase();
    return label.includes(lowerQuery);
  }).map(password => ({ type: 'password', data: password, titleMatch: true }));

  const matchedClips = clips.filter(clip => {
    return clip.text.toLowerCase().includes(lowerQuery);
  }).map(clip => ({ type: 'clip', data: clip, titleMatch: false }));

  const matchedLinks = notes.flatMap(extractLinksFromNote)
    .filter(link => link.label.toLowerCase().includes(lowerQuery))
    .map(link => ({ type: 'link', data: link, titleMatch: true }));

  filteredResults = [...matchedLinks, ...matchedNotes, ...matchedPasswords, ...matchedClips];

  // Fuzzy fallback: when plain substring matching finds nothing, try
  // subsequence matching ("wr" → "Weekly Review") before giving up.
  if (filteredResults.length === 0) {
    const fuzzyNotes = notes
      .map(note => ({
        type: 'note',
        data: note,
        titleMatch: true,
        score: Math.max(
          fuzzyScore(lowerQuery, note.title || ''),
          fuzzyScore(lowerQuery, stripHtml(note.content)) * 0.5
        )
      }))
      .filter(r => r.score > 0);

    const fuzzyPasswords = passwords
      .map(p => ({ type: 'password', data: p, titleMatch: true, score: fuzzyScore(lowerQuery, p.label || '') }))
      .filter(r => r.score > 0);

    const fuzzyClips = clips
      .map(c => ({ type: 'clip', data: c, titleMatch: false, score: fuzzyScore(lowerQuery, c.text) }))
      .filter(r => r.score > 0);

    filteredResults = [...fuzzyNotes, ...fuzzyPasswords, ...fuzzyClips];
    filteredResults.sort((a, b) => b.score - a.score);
  }

  sortResults(filteredResults);

  selectedIndex = filteredResults.length > 0 ? 0 : -1;
  renderResults(query);
}

// Sort: pinned first, then favorites, then title matches above content
// matches, then recency. Passwords/clips/links have no isPinned/isFavorite,
// so they naturally fall after any matching pinned/favorite notes.
function sortResults(results) {
  results.sort((a, b) => {
    // Fuzzy-scored results rank purely by match quality.
    if (a.score != null && b.score != null && a.score !== b.score) {
      return b.score - a.score;
    }

    const aPin = a.data.isPinned || false;
    const bPin = b.data.isPinned || false;
    if (aPin && !bPin) return -1;
    if (!aPin && bPin) return 1;

    const aFav = a.data.isFavorite || false;
    const bFav = b.data.isFavorite || false;
    if (aFav && !bFav) return -1;
    if (!aFav && bFav) return 1;

    if (a.titleMatch && !b.titleMatch) return -1;
    if (!a.titleMatch && b.titleMatch) return 1;

    const aDate = new Date(a.data.updated || a.data.created);
    const bDate = new Date(b.data.updated || b.data.created);
    return bDate - aDate;
  });
}

function handleKeyDown(e) {
  switch (e.key) {
    case 'ArrowDown':
      e.preventDefault();
      if (filteredResults.length > 0) {
        selectedIndex = (selectedIndex + 1) % filteredResults.length;
        updateSelection();
      }
      break;
    case 'ArrowUp':
      e.preventDefault();
      if (filteredResults.length > 0) {
        selectedIndex = selectedIndex <= 0 ? filteredResults.length - 1 : selectedIndex - 1;
        updateSelection();
      }
      break;
    case 'Enter':
      e.preventDefault();
      if (selectedIndex >= 0 && filteredResults[selectedIndex]) {
        handleResultAction(filteredResults[selectedIndex]);
      }
      break;
  }
}

function renderResults(query) {
  resultsContainer.innerHTML = '';
  
  if (filteredResults.length === 0) {
    const emptyState = document.createElement('div');
    emptyState.className = 'empty-state';
    emptyState.innerHTML = `
      <div class="empty-state-icon">🔍</div>
      <div class="empty-state-text">No results found</div>
    `;
    resultsContainer.appendChild(emptyState);
    return;
  }
  
  filteredResults.forEach((result, index) => {
    let resultItem;
    if (result.type === 'note') {
      resultItem = createNoteResultItem(result.data, query, index === selectedIndex);
    } else if (result.type === 'password') {
      resultItem = createPasswordResultItem(result.data, query, index === selectedIndex);
    } else if (result.type === 'link') {
      resultItem = createLinkResultItem(result.data, query, index === selectedIndex, index);
    } else {
      resultItem = createClipResultItem(result.data, query, index === selectedIndex);
    }
    resultsContainer.appendChild(resultItem);
  });
}

function handleResultAction(result) {
  if (result.type === 'note') {
    openNote(result.data.id);
  } else if (result.type === 'password') {
    // For passwords, copy to clipboard
    copyPassword(result.data);
  } else if (result.type === 'clip') {
    copyClip(result.data);
  } else if (result.type === 'link') {
    copyLink(result.data);
  } else if (result.type === 'template') {
    useTemplate(result.data.id);
  }
}

function showTemplatePicker() {
  resultsContainer.innerHTML = '';

  const header = document.createElement('div');
  header.className = 'results-section-header';
  header.textContent = 'New note from template';
  resultsContainer.appendChild(header);

  filteredResults = TEMPLATES.map(t => ({ type: 'template', data: t, titleMatch: true }));
  selectedIndex = 0;

  filteredResults.forEach((result, index) => {
    resultsContainer.appendChild(createTemplateResultItem(result.data, index === selectedIndex));
  });
}

function createTemplateResultItem(template, isSelected) {
  const item = document.createElement('div');
  item.className = 'result-item';
  if (isSelected) {
    item.classList.add('selected');
  }

  item.innerHTML = `
    <div class="result-icon">${template.icon}</div>
    <div class="result-details">
      <div class="result-title">${template.label}</div>
      <div class="result-subtitle">Create a new note from this template</div>
    </div>
  `;

  item.addEventListener('click', () => useTemplate(template.id));

  item.addEventListener('mouseenter', () => {
    selectedIndex = filteredResults.findIndex(r => r.type === 'template' && r.data.id === template.id);
    updateSelection();
  });

  return item;
}

function useTemplate(templateId) {
  ipcRenderer.send('create-note-from-template', templateId);
  closeWindow();
}

function copyClip(clip) {
  clipboard.writeText(clip.text);
  showToast('Copied to clipboard');
  setTimeout(() => closeWindow(), 500);
}

function copyLink(link) {
  clipboard.writeText(link.url);
  showToast('Link copied to clipboard');
  setTimeout(() => closeWindow(), 500);
}

function createLinkResultItem(link, query, isSelected, index) {
  const item = document.createElement('div');
  item.className = 'result-item';
  if (isSelected) {
    item.classList.add('selected');
  }

  const label = highlightText(link.label, query);

  item.innerHTML = `
    <div class="result-icon">🔗</div>
    <div class="result-details">
      <div class="result-title">${label}</div>
      <div class="result-subtitle">${escapeHtml(link.url)} — ${escapeHtml(link.noteTitle)}</div>
    </div>
    <button class="copy-password-btn" title="Copy link">📋</button>
  `;

  const copyBtn = item.querySelector('.copy-password-btn');
  copyBtn.addEventListener('click', (e) => {
    e.stopPropagation();
    copyLink(link);
  });

  item.addEventListener('click', () => copyLink(link));

  item.addEventListener('mouseenter', () => {
    selectedIndex = index;
    updateSelection();
  });

  return item;
}

async function copyPassword(password) {
  try {
    const result = await passwordManager.getDecryptedPassword(password.id);
    if (result.success && result.data.password) {
      await copySecret(result.data.password);
      showToast('Password copied — clipboard clears in 30s');
      // Close window after a brief delay
      setTimeout(() => closeWindow(), 500);
    } else {
      showToast('Failed to decrypt password', 'error');
    }
  } catch (error) {
    console.error('Error copying password:', error);
    showToast('Failed to copy password', 'error');
  }
}

function createNoteResultItem(note, query, isSelected) {
  const item = document.createElement('div');
  item.className = 'result-item';
  if (isSelected) {
    item.classList.add('selected');
  }

  const rawTitle = (note.title || '').trim() || 'Untitled';
  // highlightText escapes even without a query — never insert rawTitle raw.
  const title = highlightText(rawTitle, query);

  let snippet = stripHtml(note.content).replace(/\s+/g, ' ').trim();
  if (snippet.length > 120) snippet = snippet.substring(0, 120) + '…';
  if (query && snippet) snippet = highlightText(snippet, query);

  let icon = '📝';
  if (note.isFavorite) {
    icon = '⭐';
  } else if (note.reminders && note.reminders.some(r => r.enabled)) {
    icon = '🔔';
  }

  item.innerHTML = `
    <div class="result-icon">${icon}</div>
    <div class="result-details">
      <div class="result-title">${title}</div>
      ${snippet ? `<div class="result-subtitle">${snippet}</div>` : ''}
    </div>
  `;
  
  // Click handler
  item.addEventListener('click', () => {
    openNote(note.id);
  });
  
  // Hover handler
  item.addEventListener('mouseenter', () => {
    selectedIndex = filteredResults.findIndex(r => r.type === 'note' && r.data.id === note.id);
    updateSelection();
  });
  
  return item;
}

function createPasswordResultItem(password, query, isSelected) {
  const item = document.createElement('div');
  item.className = 'result-item password-result';
  if (isSelected) {
    item.classList.add('selected');
  }
  
  // Get label (highlightText escapes even without a query)
  const label = highlightText(password.label || 'Untitled Password', query);

  // Build icon
  const icon = password.isFavorite ? '⭐' : '🔐';

  // Subtitle - show username if available (escaped — user-controlled text)
  let subtitle = '';
  if (password.username) {
    subtitle = `<div class="result-subtitle">${escapeHtml(password.username)}</div>`;
  }
  
  item.innerHTML = `
    <div class="result-icon">${icon}</div>
    <div class="result-details">
      <div class="result-title">${label}</div>
      ${subtitle}
    </div>
    <button class="copy-password-btn" title="Copy password">📋</button>
  `;
  
  const copyBtn = item.querySelector('.copy-password-btn');
  
  // Click handler for copy button
  copyBtn.addEventListener('click', async (e) => {
    e.stopPropagation();
    await copyPassword(password);
  });
  
  // Click handler for item (also copies)
  item.addEventListener('click', async () => {
    await copyPassword(password);
  });
  
  // Hover handler
  item.addEventListener('mouseenter', () => {
    selectedIndex = filteredResults.findIndex(r => r.type === 'password' && r.data.id === password.id);
    updateSelection();
  });

  return item;
}

function createClipResultItem(clip, query, isSelected) {
  const item = document.createElement('div');
  item.className = 'result-item';
  if (isSelected) {
    item.classList.add('selected');
  }

  let snippet = clip.text.replace(/\s+/g, ' ').trim();
  if (snippet.length > 100) snippet = snippet.substring(0, 100) + '…';
  if (query) snippet = highlightText(snippet, query);

  item.innerHTML = `
    <div class="result-icon">📋</div>
    <div class="result-details">
      <div class="result-content">${snippet}</div>
    </div>
  `;

  item.addEventListener('click', () => copyClip(clip));

  item.addEventListener('mouseenter', () => {
    selectedIndex = filteredResults.findIndex(r => r.type === 'clip' && r.data.id === clip.id);
    updateSelection();
  });

  return item;
}

function updateSelection() {
  const items = resultsContainer.querySelectorAll('.result-item');
  items.forEach((item, index) => {
    if (index === selectedIndex) {
      item.classList.add('selected');
      item.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
    } else {
      item.classList.remove('selected');
    }
  });
}

function openNote(noteId) {
  ipcRenderer.send('open-note-from-search', noteId);
}

function closeWindow() {
  searchInput.value = '';
  showEmptyState();
  ipcRenderer.send('close-search-window');
}

function showEmptyState() {
  resultsContainer.innerHTML = '';

  const recent = [...notes]
    .sort((a, b) => new Date(b.updated || b.created) - new Date(a.updated || a.created))
    .slice(0, 5);

  if (recent.length === 0) {
    resultsContainer.innerHTML = `
      <div class="empty-state">
        <div class="empty-state-icon">📝</div>
        <div class="empty-state-text">No notes yet</div>
      </div>
    `;
    filteredResults = [];
    selectedIndex = -1;
    return;
  }

  const header = document.createElement('div');
  header.className = 'results-section-header';
  header.textContent = 'Recent';
  resultsContainer.appendChild(header);

  filteredResults = recent.map(note => ({ type: 'note', data: note, titleMatch: true }));
  selectedIndex = 0;

  filteredResults.forEach((result, index) => {
    const item = createNoteResultItem(result.data, '', index === selectedIndex);
    resultsContainer.appendChild(item);
  });
}

function showToast(message, type = 'success') {
  const toast = document.createElement('div');
  toast.className = `toast toast-${type}`;
  toast.textContent = message;
  toast.style.position = 'fixed';
  toast.style.top = '20px';
  toast.style.right = '20px';
  toast.style.padding = '12px 20px';
  toast.style.borderRadius = '4px';
  toast.style.backgroundColor = type === 'error' ? '#f44336' : '#4caf50';
  toast.style.color = 'white';
  toast.style.fontSize = '14px';
  toast.style.zIndex = '10000';
  toast.style.boxShadow = '0 2px 8px rgba(0,0,0,0.2)';
  
  document.body.appendChild(toast);
  
  setTimeout(() => {
    toast.remove();
  }, 2000);
}

// Utility functions
function stripHtml(html) {
  const tmp = document.createElement('div');
  tmp.innerHTML = html;
  
  // Handle password fields specially - remove completely from preview
  const passwordFields = tmp.querySelectorAll('.password-field-container');
  passwordFields.forEach(field => {
    field.remove();
  });
  
  // Also remove any stray password field related content
  const passwordFieldElements = tmp.querySelectorAll('[class*="password-field"]');
  passwordFieldElements.forEach(el => {
    el.remove();
  });
  
  return tmp.textContent || tmp.innerText || '';
}

// Pulls every link out of a note so it can be found and copied directly
// from search, without opening the note first. A link's label is its own
// text when it has one (e.g. selecting "docs" before Cmd+K to insert a
// link makes "docs" the label) — otherwise, for a bare auto-linked URL,
// the plain text right before it on the line ("docs: https://…") is used
// as a fallback label so a natural writing style still works.
function extractLinksFromNote(note) {
  const tmp = document.createElement('div');
  tmp.innerHTML = note.content || '';
  tmp.querySelectorAll('.password-field-container, [class*="password-field"]').forEach(el => el.remove());

  const links = [];
  tmp.querySelectorAll('a[href]').forEach(a => {
    const url = a.getAttribute('href');
    if (!url) return;

    let label = (a.textContent || '').trim();
    if (!label || label === url) {
      const prev = a.previousSibling;
      if (prev && prev.nodeType === Node.TEXT_NODE) {
        const match = prev.textContent.match(/([A-Za-z0-9][A-Za-z0-9 _-]{0,40})[:\-–]\s*$/);
        if (match) label = match[1].trim();
      }
    }
    if (!label) label = url;

    links.push({
      label,
      url,
      noteId: note.id,
      noteTitle: note.title || 'Untitled',
      isFavorite: note.isFavorite || false,
      updated: note.updated,
      created: note.created
    });
  });

  return links;
}

// SECURITY: everything returned here is injected via innerHTML, and note
// titles/snippets/usernames are attacker-controlled strings (an imported or
// pasted note can contain literal markup). Escape first, then highlight the
// escaped query — never insert raw text.
function highlightText(text, query) {
  const safeText = escapeHtml(text);
  if (!query) return safeText;

  const safeQuery = escapeHtml(query);
  const regex = new RegExp(`(${escapeRegex(safeQuery)})`, 'gi');
  return safeText.replace(regex, '<span class="highlight">$1</span>');
}

function escapeRegex(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

function formatDate(date) {
  const now = new Date();
  const diff = now - date;
  const seconds = Math.floor(diff / 1000);
  const minutes = Math.floor(seconds / 60);
  const hours = Math.floor(minutes / 60);
  const days = Math.floor(hours / 24);
  
  if (seconds < 60) {
    return 'Just now';
  } else if (minutes < 60) {
    return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
  } else if (hours < 24) {
    return `${hours} hour${hours > 1 ? 's' : ''} ago`;
  } else if (days < 7) {
    return `${days} day${days > 1 ? 's' : ''} ago`;
  } else {
    return date.toLocaleDateString('en-US', { 
      month: 'short', 
      day: 'numeric',
      year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined
    });
  }
}

// Initialize on load
document.addEventListener('DOMContentLoaded', init);