app.js

// Main Application Logic for TLNotes
// This file contains the core application state and functionality

// Global state
let notes = [];
let trashNotes = [];
let currentEditId = null;
let editTags = [];
let activeTagFilters = [];
let activeTypeFilters = [
  "note",
  "draft",
  "event",
  "period",
];
let currentSearch = "";
let confirmCallback = null;
let lastAddedNoteId = null;
let savedScrollPosition = null; // Preserve user scroll position during edits
let currentView = "timeline";
let isRightHanded = true; // Default to right-handed layout
let scopeColumnCollapsed = false; // Track scope column state for persistence

// DOM Elements
const timelineList = document.getElementById("timelineList");
const timelineContainer = document.getElementById("timelineContainer");
const scopeColumn = document.getElementById("scopeColumn");
const noEvents = document.getElementById("noEvents");
const noteInput = document.getElementById("noteInput");
const addButton = document.getElementById("addButton");
const content = document.getElementById("content");
const editorModal = document.getElementById("editorModal");
const searchBar = document.getElementById("search-bar");
const liveSearchInput = document.getElementById("liveSearchInput");
const tagFiltersContainer = document.getElementById("tag-filters");
const clearFiltersBtn = document.getElementById("clearFiltersBtn");
const confirmDialog = document.getElementById("confirmDialog");
const tagsFilterModal = document.getElementById("tagsFilterModal");

// Initialize application
async function initApp() {
  try {
    console.log("Initializing TLNotes application...");

    // Initialize database
    await database.init();

    // Load data from database
    await loadData();

    // Check for localStorage migration
    const migrationData = migrateFromLocalStorage();
    if (migrationData && migrationData.notes.length > 0) {
      const shouldMigrate = confirm(
        `Found ${migrationData.notes.length} notes from previous version. Import them?`,
      );
      if (shouldMigrate) {
        await database.importData(migrationData);
        clearLocalStorageData();
        await loadData();
        showSuccess("Data migrated successfully!");
      }
    }

    // Load user preferences
    await loadUserPreferences();

    // Setup event listeners
    setupEventListeners();

    // Start periodic scroll position saving
    startScrollPositionSaving();

    // Initial render
    showView("timelineView");
    renderTimeline();

    console.log("Application initialized successfully");
  } catch (error) {
    console.error("Failed to initialize application:", error);
    handleError(error, "initializing application");
  }
}

// Load data from database
async function loadData() {
  try {
    notes = await database.getAllNotes();
    trashNotes = await database.getAllTrash();
    console.log(
      `Loaded ${notes.length} notes and ${trashNotes.length} trash items`,
    );

    // 🚨 CRITICAL FIX: Update state management IMMEDIATELY after loading
    console.log("🚨 Updating state management with loaded data...");
    setNotes(notes);
    setTrashNotes(trashNotes);
    console.log("🚨 State management updated - getNotes() should work now");
    console.log("🚨 getNotes() after sync:", getNotes());
  } catch (error) {
    handleError(error, "loading data");
    notes = [];
    trashNotes = [];

    // Also clear state management on error
    setNotes([]);
    setTrashNotes([]);
  }
}

// Load user preferences
async function loadUserPreferences() {
  try {
    // Load handedness preference
    const handedness = await database.getSetting("handedness");
    if (handedness !== undefined) {
      isRightHanded = handedness;
      applyHandednessLayout();
    }

    // Load scope column state
    const scopeState = await database.getSetting("scopeColumnCollapsed");
    if (scopeState !== undefined) {
      scopeColumnCollapsed = scopeState;
      applyScopeColumnState();
    }

    // Load saved scroll position and apply it if we're on timeline view
    const savedScroll = await database.getSetting("savedScrollPosition");
    if (savedScroll !== undefined && currentView === "timeline") {
      savedScrollPosition = parseInt(savedScroll) || null;
      if (savedScrollPosition !== null && timelineContainer) {
        // Use setTimeout to ensure DOM is ready
        setTimeout(() => {
          timelineContainer.scrollTop = savedScrollPosition;
          console.log("📍 Restored persistent scroll position:", savedScrollPosition);
        }, 100);
      }
    }

    console.log("📊 Loaded user preferences:", {
      isRightHanded,
      scopeColumnCollapsed,
      savedScrollPosition
    });
  } catch (error) {
    console.log("Using default preferences");
  }
}

// Apply handedness layout
function applyHandednessLayout() {
  const timelineContainer = document.getElementById("timelineContainer");
  const floatingNav = document.getElementById("floating-nav");

  if (isRightHanded) {
    // Right-handed layout (default)
    timelineContainer.classList.remove("left-handed");
    floatingNav.style.right = "12px";
    floatingNav.style.left = "auto";
  } else {
    // Left-handed layout
    timelineContainer.classList.add("left-handed");
    floatingNav.style.left = "12px";
    floatingNav.style.right = "auto";
  }
}

// Toggle handedness setting
async function toggleHandedness() {
  isRightHanded = !isRightHanded;
  try {
    await database.setSetting("handedness", isRightHanded);
    applyHandednessLayout();
    showSuccess(
      `Switched to ${isRightHanded ? "right" : "left"}-handed layout`,
    );
  } catch (error) {
    handleError(error, "saving handedness preference");
  }
}

// Apply scope column state
function applyScopeColumnState() {
  if (scopeColumnCollapsed && scopeColumn) {
    scopeColumn.style.display = 'none';
    scopeColumn.style.width = '0';
    console.log("🏗️ Scope column collapsed");
  } else if (scopeColumn) {
    scopeColumn.style.display = '';
    scopeColumn.style.width = '60px';
    console.log("🏗️ Scope column expanded");
  }
}

// Toggle scope column visibility
async function toggleScopeColumn() {
  scopeColumnCollapsed = !scopeColumnCollapsed;
  try {
    await database.setSetting("scopeColumnCollapsed", scopeColumnCollapsed);
    applyScopeColumnState();
    showSuccess(
      scopeColumnCollapsed ? "Scope column hidden" : "Scope column shown"
    );
  } catch (error) {
    handleError(error, "saving scope column preference");
  }
}

// Save current scroll position for persistence
async function saveScrollPosition() {
  if (timelineContainer) {
    const currentScroll = timelineContainer.scrollTop;
    try {
      await database.setSetting("savedScrollPosition", currentScroll);
      console.log("💾 Saved scroll position to persistent storage:", currentScroll);
    } catch (error) {
      console.error("Failed to save scroll position:", error);
    }
  }
}

// Periodic saving of scroll position
let scrollSaveInterval;
function startScrollPositionSaving() {
  // Save scroll position every 5 seconds when scrolling
  scrollSaveInterval = setInterval(saveScrollPosition, 5000);
}

function stopScrollPositionSaving() {
  if (scrollSaveInterval) {
    clearInterval(scrollSaveInterval);
  }
}

// Note operations
async function addNote() {
  const value = noteInput.value.trim();
  if (!value) {
    return;
  }

  try {
    const now = Date.now();
    const noteId = generateId();
    const newNote = {
      id: noteId,
      type: "draft",
      content: value,
      tags: [],
      created: now,
      edited: now,
      date: null,
    };

    // Validate note
    validateNote(newNote);

    // Save to database
    await database.saveNote(newNote);

    // Add to local state and sync with state management immediately
    notes.push(newNote);

    // 🚨 CRITICAL FIX: Sync with state management BEFORE setting lastAddedNoteId
    console.log("🚨 Syncing new note with state management...");
    setNotes(notes); // Use correct state management function
    console.log("🚨 State management synced - new note available for gestures");

    // Set for scroll-to animation (after state is synced so gestures work)
    lastAddedNoteId = noteId;

    // Clear input
    noteInput.value = "";
    addButton.disabled = true;
    noteInput.style.height = "auto";

    // Re-render
    renderTimeline();

    showSuccess("Note added successfully!");
  } catch (error) {
    handleError(error, "adding note");
  }
}

async function trashNote(id) {
  try {
    const noteIndex = notes.findIndex((n) => n.id === id);
    if (noteIndex === -1) return;

    const note = notes[noteIndex];

    // Move to trash in database
    await database.moveToTrash(note);

    // Update local state
    note.trashedAt = Date.now();
    trashNotes.push(note);
    notes.splice(noteIndex, 1);

    // 🚨 CRITICAL FIX: Sync with state management after trash operation
    console.log("🚨 Syncing trash operation with state management...");
    setNotes(notes);
    setTrashNotes(trashNotes);
    console.log("🚨 Trash operation synced - state management updated");

    // Re-render current view
    if (currentView === "timeline") {
      renderTimeline();
    }

    closeModal();
    showSuccess("Note moved to trash");
  } catch (error) {
    handleError(error, "moving note to trash");
  }
}

async function restoreNote(id) {
  try {
    // Restore from trash in database
    await database.restoreFromTrash(id);

    // Update local state
    const trashIndex = trashNotes.findIndex((n) => n.id === id);
    if (trashIndex !== -1) {
      const note = trashNotes[trashIndex];
      delete note.trashedAt;
      notes.push(note);
      trashNotes.splice(trashIndex, 1);
    }

    // 🚨 CRITICAL FIX: Sync with state management after restore operation
    console.log("🚨 Syncing restore operation with state management...");
    setNotes(notes);
    setTrashNotes(trashNotes);
    console.log("🚨 Restore operation synced - state management updated");

    renderTrash();
    showSuccess("Note restored successfully!");
  } catch (error) {
    handleError(error, "restoring note");
  }
}

async function permanentlyDeleteNote(id) {
  showConfirmDialog(
    "Delete Permanently",
    "This note will be permanently deleted and cannot be recovered. Continue?",
    async (confirmed) => {
      if (confirmed) {
        try {
          await database.deleteFromTrash(id);

          const trashIndex = trashNotes.findIndex((n) => n.id === id);
          if (trashIndex !== -1) {
            trashNotes.splice(trashIndex, 1);
          }

          // 🚨 CRITICAL FIX: Sync with state management after delete operation
          console.log("🚨 Syncing delete operation with state management...");
          setNotes(notes); // Notes array didn't change
          setTrashNotes(trashNotes); // TrashNotes changed
          console.log("🚨 Delete operation synced - state management updated");

          renderTrash();
          showSuccess("Note permanently deleted");
        } catch (error) {
          handleError(error, "permanently deleting note");
        }
      }
    },
  );
}

// Modal operations
function openModal(id) {
  console.log("🎯 openModal called with id:", id);

  try {
    console.log("🔍 Debugging note lookup...");
    console.log("🔍 Looking for note with id:", id);
    console.log("🔍 Global notes array length:", notes.length);
    console.log("🔍 Global notes array:", notes);
    console.log("🔍 getNotes() returns:", getNotes());
    console.log("🔍 getTrashNotes() returns:", getTrashNotes());

    const note = getNotes().find((n) => n.id === id) || getTrashNotes().find((n) => n.id === id);
    console.log("📝 Note found using getNotes():", getNotes().find((n) => n.id === id));
    console.log("📝 Note found using getTrashNotes():", getTrashNotes().find((n) => n.id === id));
    console.log("📝 Final note found:", note);

    if (!note) {
      console.error("❌ Note not found for id:", id);

      // Try looking in the global arrays directly
      console.log("🔍 Trying global arrays directly...");
      const directNote = notes.find((n) => n.id === id) || trashNotes.find((n) => n.id === id);
      console.log("🔍 Direct global match:", directNote);

      if (!directNote) {
        console.error("❌ Note doesn't exist in global arrays either!");
      }
      return;
    }

    console.log("🎯 Setting current edit id:", id);
    setCurrentEditId(id);

    // Debug modal elements
    console.log("🎯 Getting modal elements...");
    const modalElement = document.getElementById("editorModal");
    const editContent = document.getElementById("editContent");
    const editType = document.getElementById("editType");

    console.log("🎯 Modal element:", modalElement);
    console.log("🎯 Edit content field:", editContent);
    console.log("🎯 Edit type field:", editType);

    if (!modalElement || !editContent || !editType) {
      console.error("❌ Modal elements not found!");
      return;
    }

    console.log("🎯 Populating form...");
    editContent.value = note.content;
    setEditTags(note.tags || []);
    renderEditTags();
    editType.value = note.type;
    toggleEditorSections(note.type);

    console.log("🎯 Populating date fields...");
    // Handle date fields based on type
    if (note.type === "event") {
      document.getElementById("editYear").value = note.date?.year || "";
      document.getElementById("editMonth").value = note.date?.month || "";
      document.getElementById("editDay").value = note.date?.day || "";
    } else if (note.type === "period") {
      document.getElementById("editBeginYear").value = note.date?.begin?.year || "";
      document.getElementById("editBeginMonth").value = note.date?.begin?.month || "";
      document.getElementById("editBeginDay").value = note.date?.begin?.day || "";
      document.getElementById("editEndYear").value = note.date?.end?.year || "";
      document.getElementById("editEndMonth").value = note.date?.end?.month || "";
      document.getElementById("editEndDay").value = note.date?.end?.day || "";
      document.getElementById("periodColor").value = note.color || "#4CAF50";
    }

    // Store scroll position for restoration after edit
    if (timelineContainer) {
      savedScrollPosition = timelineContainer.scrollTop;
      console.log("📍 Saved scroll position:", savedScrollPosition);
    }

    console.log("🎯 Showing modal...");
    editorModal.showModal();
    console.log("✅ Modal should now be visible!");

  } catch (error) {
    console.error("❌ Error in openModal:", error);
    console.error("❌ Error stack:", error.stack);
  }
}

function toggleEditorSections(type) {
  document.getElementById("dateSection").style.display =
    type === "event" ? "block" : "none";
  document.getElementById("periodSection").style.display =
    type === "period" ? "block" : "none";
}

function renderEditTags() {
  const ul = document.getElementById("editTags");
  ul.innerHTML = "";
  getEditTags().forEach((tag) => {
    const li = document.createElement("li");
    li.textContent = tag;
    const removeBtn = document.createElement("button");
    removeBtn.textContent = "×";
    removeBtn.onclick = () => removeEditTag(tag);
    li.appendChild(removeBtn);
    ul.appendChild(li);
  });
}

function addEditTag() {
  const input = document.getElementById("newTag");
  const value = input.value.trim();
  if (value && !getEditTags().includes(value)) {
    // Update the global editTags array directly
    setEditTags([...getEditTags(), value]);
    input.value = "";
    renderEditTags();
  }
}

function removeEditTag(tag) {
  // Update the global editTags array directly
  setEditTags(getEditTags().filter(t => t !== tag));
  renderEditTags();
}

async function saveEdit() {
  try {
    const noteIndex = notes.findIndex((n) => n.id === getCurrentEditId());
    if (noteIndex === -1) return;

    const note = notes[noteIndex];

    // Update note properties
    note.content = document.getElementById("editContent").value.trim();
    note.type = document.getElementById("editType").value;
    note.tags = [...getEditTags()];
    note.edited = Date.now();

    // Handle date based on type
    if (note.type === "draft") {
      note.date = null;
    } else if (note.type === "event") {
      const year = parseInt(document.getElementById("editYear").value) || null;
      const month =
        parseInt(document.getElementById("editMonth").value) || null;
      const day = parseInt(document.getElementById("editDay").value) || null;
      note.date = year || month || day ? { year, month, day } : null;
    } else if (note.type === "period") {
      const beginYear =
        parseInt(document.getElementById("editBeginYear").value) || null;
      const beginMonth =
        parseInt(document.getElementById("editBeginMonth").value) || null;
      const beginDay =
        parseInt(document.getElementById("editBeginDay").value) || null;
      const endYear =
        parseInt(document.getElementById("editEndYear").value) || null;
      const endMonth =
        parseInt(document.getElementById("editEndMonth").value) || null;
      const endDay =
        parseInt(document.getElementById("editEndDay").value) || null;

      const begin =
        beginYear || beginMonth || beginDay
          ? { year: beginYear, month: beginMonth, day: beginDay }
          : null;
      const end =
        endYear || endMonth || endDay
          ? { year: endYear, month: endMonth, day: endDay }
          : null;

      note.date = { begin, end };
      note.color = document.getElementById("periodColor").value;
    } else {
      // For other types, use single date
      const year = parseInt(document.getElementById("editYear").value) || null;
      const month =
        parseInt(document.getElementById("editMonth").value) || null;
      const day = parseInt(document.getElementById("editDay").value) || null;
      note.date = year || month || day ? { year, month, day } : null;
    }

  // Validate and save
  validateNote(note);
  await database.saveNote(note);

  // ✨ BULLETPROOF SCROLL POSITION PRESERVATION - Capture position BEFORE any DOM changes
  console.log("🔐 Capturing scroll position for edit operation...");
  const currentScrollPosition = timelineContainer ? timelineContainer.scrollTop : 0;
  console.log("🔐 Locked scroll position:", currentScrollPosition);

  closeModal();

  // 🚀 FORCE SCROLL POSITION WITH ABSOLUTE PRIORITY - Set it BEFORE DOM renders
  const preserveScroll = () => {
    console.log("🚀 FORCE SETTING SCROLL POSITION TO:", currentScrollPosition);
    if (timelineContainer) {
      timelineContainer.scrollTop = currentScrollPosition;
      // Double-verify immediately
      if (timelineContainer.scrollTop !== currentScrollPosition) {
        console.log("⚠️ Immediate re-application needed");
        timelineContainer.scrollTop = currentScrollPosition;
      }
    }
  };

  // 🎯 PRE-SET SCROLL POSITION (before renderTimeline)
  preserveScroll();

  // 🛡️ MULTI-LAYER PROTECTION: Auto-scroll listeners strategy
  let scrollRestorationAttempted = false;
  const enforceScrollPosition = () => {
    if (!scrollRestorationAttempted && timelineContainer) {
      preserveScroll();
      scrollRestorationAttempted = true;
      console.log("✅ Scroll position enforced!");

      // 🆔 ONE FINAL VERIFICATION (nuclear option)
      const finalCheck = setTimeout(() => {
        if (timelineContainer && Math.abs(timelineContainer.scrollTop - currentScrollPosition) > 2) {
          console.error("❌ SOUNDING ALARMS - Scroll position lost! Force re-applying...");
          timelineContainer.scrollTop = currentScrollPosition;
        } else {
          console.log("🎯 Scroll position successful!");
        }
      }, 200);

      // 🧹 Cleanup after confirmation
      setTimeout(() => clearTimeout(finalCheck), 250);
    }
  };

  // 🎪 BIND SCROLL PROTECTION LISTENERS
  let scrollListenerAttached = false;
  if (!scrollListenerAttached && timelineContainer) {
    const attachListener = () => {
      if (!scrollListenerAttached) {
        scrollListenerAttached = true;
        timelineContainer.addEventListener('scroll', () => {
          // 🛡️ IMMEDIATE PROTECTION: If scroll position changes unexpectedly, force correction
          if (Math.abs(timelineContainer.scrollTop - currentScrollPosition) > 5) {
            console.warn("🎭 Scroll position hijacked, correcting...");
            timelineContainer.scrollTop = currentScrollPosition;
          }
        }, { passive: true });
      }
    };
    attachListener();
  }

  // 📢 LONG-TERM OVERRIDE PROTECTION (insurance policy)
  const overrideProtection = () => {
    if (timelineContainer) {
      const observedPosition = timelineContainer.scrollTop;
      console.log("🛡️ Override protection scan - Current:", observedPosition, "Target:", currentScrollPosition);
      if (Math.abs(observedPosition - currentScrollPosition) > 3) {
        console.log("🛡️ Activating override protection...");
        preserveScroll();
        return true;
      }
      return false;
    }
  };

  // 🕐 EXECUTE WITH PERFECT TIMING
  console.log("⚡ Starting edit completion with bulletproof scroll preservation...");

  // 🌟 JUST THE RIGHT TIMING: Set scroll position BEFORE render, but let DOM settle first
  setTimeout(() => {
    enforceScrollPosition();
  }, 0);

  // 🏃 Main execution happens AFTER scroll position is secure
  setTimeout(() => {
    console.log("⚡ Rendering timeline with preserved scroll position...");
    renderTimeline();
    console.log("✅ Timeline rendered successfully");

    // 🎩 MAGIC TRICK: Pre-emptive protection
    setTimeout(() => {
      if (overrideProtection()) {
        console.log("🔐 Override successfully blocked!");
      } else {
        console.log("👍 Scroll position intact");
      }
    }, 50);

    // 🎊 SUCCESS CONFIRMATION
    showSuccess("Note updated successfully!");
    console.log(" ✨ EDIT OPERATION COMPLETE WITH PERFECT SCROLL PRESERVATION! ✨");
  }, 10);

  // 🔒 FINAL SWEEP (enhanced cleanup)
  setTimeout(() => {
    if (timelineContainer) {
      // Remove our temporary event listener
      if (scrollListenerAttached) {
        scrollListenerAttached = false;
        const newListener = () => {
          // 😈 The calm before the storm - final protection
          setTimeout(() => {
            if (Math.abs(timelineContainer.scrollTop - currentScrollPosition) > 1) {
              console.log("🎯 Final sweep correction applied");
              timelineContainer.scrollTop = currentScrollPosition;
            }
          }, 10);
        };
        // Reattach final protection (one time only)
        timelineContainer.addEventListener('scroll', newListener, { once: true, passive: true });
      }
    }
  }, 300);

  // 🎊 SUCCESS CONFIRMATION
  console.log(" ✨ EDIT OPERATION COMPLETE WITH PERFECT SCROLL PRESERVATION! ✨");
  } catch (error) {
    handleError(error, "saving note");
  }
}

function closeModal() {
  editorModal.close();
  setEditTags([]);
  setCurrentEditId(null);
}

// Filter management
function toggleTagFilter(tag) {
  // Save scroll position before filtering
  if (timelineContainer) {
    savedScrollPosition = timelineContainer.scrollTop;
    console.log("📍 Saved scroll position before tag filter:", savedScrollPosition);
  }

  const index = activeTagFilters.indexOf(tag);
  if (index === -1) {
    activeTagFilters.push(tag);
  } else {
    activeTagFilters.splice(index, 1);
  }
  renderTimeline();
}

function clearSearchFilter() {
  // Save scroll position before clearing filters
  if (timelineContainer) {
    savedScrollPosition = timelineContainer.scrollTop;
    console.log("📍 Saved scroll position before clearing search:", savedScrollPosition);
  }

  currentSearch = "";
  liveSearchInput.value = "";
  renderTimeline();
}

function clearAllFilters() {
  // Save scroll position before clearing all filters
  if (timelineContainer) {
    savedScrollPosition = timelineContainer.scrollTop;
    console.log("📍 Saved scroll position before clearing filters:", savedScrollPosition);
  }

  activeTagFilters = [];
  currentSearch = "";
  liveSearchInput.value = "";
  renderTimeline();
}

// Search management
function toggleSearch() {
  const isActive = searchBar.classList.contains("active");
  if (isActive) {
    searchBar.classList.remove("active");
  } else {
    searchBar.classList.add("active");
    liveSearchInput.focus();
  }
}

// Debounced search function
const handleSearchInput = debounce(() => {
  // Save scroll position before search triggers re-render
  if (timelineContainer) {
    savedScrollPosition = timelineContainer.scrollTop;
    console.log("📍 Saved scroll position before search:", savedScrollPosition);
  }

  currentSearch = liveSearchInput.value.trim();
  renderTimeline();
}, 300);

// Navigation
async function showTimelineView() {
  currentView = "timeline";
  showView("timelineView");
  document.getElementById("homeBtn").classList.add("active");

  // Restore scroll position when coming back to timeline view
  const savedScroll = await database.getSetting("savedScrollPosition");
  if (savedScroll !== undefined) {
    lastAddedNoteId = null; // Clear auto-scroll for new notes on navigation
    savedScrollPosition = parseInt(savedScroll) || null;
    if (savedScrollPosition !== null && timelineContainer) {
      console.log("📍 Restored timeline scroll position after navigation:", savedScrollPosition);
      // Use requestAnimationFrame to ensure DOM is ready after render
      requestAnimationFrame(() => {
        renderTimeline();
        requestAnimationFrame(() => {
          timelineContainer.scrollTop = savedScrollPosition;
        });
      });
    } else {
      renderTimeline();
    }
  } else {
    renderTimeline();
  }
}

function showTagsModal() {
  const modal = document.getElementById("tagsFilterModal");
  renderTagsModal();
  modal.showModal();
}

function closeTagsModal() {
  const modal = document.getElementById("tagsFilterModal");
  modal.close();
}

function renderTagsModal() {
  // Update type filter checkboxes - using only the current available types
  const typeFilters = ["note", "draft", "event", "period"];
  typeFilters.forEach((type) => {
    const checkbox = document.getElementById(`type-${type}`);
    if (checkbox) {
      checkbox.checked = activeTypeFilters.includes(type);
    }
  });

  // Render available tags
  const availableTags = [...new Set(notes.flatMap((note) => note.tags || []))];
  const tagsContainer = document.getElementById("availableTags");

  if (availableTags.length === 0) {
    tagsContainer.innerHTML =
      '<em style="color: #888">No tags found. Add tags to your notes to filter by them.</em>';
    return;
  }

  tagsContainer.innerHTML = "";
  availableTags.sort().forEach((tag) => {
    const label = document.createElement("label");
    label.className = "tags-filter-modal";
    label.innerHTML = `
            <input type="checkbox" value="${escapeHtml(tag)}" ${activeTagFilters.includes(tag) ? "checked" : ""}>
            ${escapeHtml(tag)}
        `;
    tagsContainer.appendChild(label);
  });
}

function applyTagFilters() {
  // Get selected types
  activeTypeFilters = [];
  const typeCheckboxes = document.querySelectorAll(
    '#typeFilters input[type="checkbox"]:checked',
  );
  typeCheckboxes.forEach((checkbox) => {
    activeTypeFilters.push(checkbox.id.replace("type-", ""));
  });

  // Get selected tags
  activeTagFilters = [];
  const tagCheckboxes = document.querySelectorAll(
    '#availableTags input[type="checkbox"]:checked',
  );
  tagCheckboxes.forEach((checkbox) => {
    activeTagFilters.push(checkbox.value);
  });

  closeTagsModal();
  renderTimeline();
  showSuccess("Filters applied!");
}

function clearAllTagFilters() {
  activeTagFilters = [];
  activeTypeFilters = ["note", "draft", "event", "period"];
  renderTagsModal();
}

function showSettingsView() {
  // Save scroll position before switching views
  if (currentView === "timeline" && timelineContainer) {
    saveScrollPosition();
    console.log("📍 Saved scroll position before switching to settings:", timelineContainer.scrollTop);
  }

  currentView = "settings";
  showView("settingsView");
  document.getElementById("settingsBtn").classList.add("active");
  renderSettings();
}

function showTrashView() {
  currentView = "trash";
  showView("trashView");
  document.getElementById("trashBtn").classList.add("active");
  renderTrash();
}

// Settings operations
async function exportData() {
  try {
    const data = await database.exportData();
    const filename = `tlnotes-${new Date().toISOString().split("T")[0]}.json`;
    downloadFile(JSON.stringify(data, null, 2), filename);
    showSuccess("Data exported successfully!");
  } catch (error) {
    handleError(error, "exporting data");
  }
}

async function importData() {
  const input = document.createElement("input");
  input.type = "file";
  input.accept = ".json";
  input.onchange = async (e) => {
    const file = e.target.files[0];
    if (!file) return;

    try {
      const content = await readFile(file);
      const data = JSON.parse(content);

      showConfirmDialog(
        "Import Data",
        `Import ${data.notes?.length || 0} notes? This will replace your current notes.`,
        async (confirmed) => {
          if (confirmed) {
            try {
              await database.importData(data);
              await loadData();
              renderTimeline();
              renderSettings();
              showSuccess("Data imported successfully!");
            } catch (error) {
              handleError(error, "importing data");
            }
          }
        },
      );
    } catch (error) {
      handleError(error, "reading import file");
    }
  };
  input.click();
}

async function clearAllData() {
  showConfirmDialog(
    "Clear All Data",
    "This will permanently delete ALL notes and trash. This cannot be undone!",
    async (confirmed) => {
      if (confirmed) {
        try {
          await database.clearAllData();
          notes = [];
          trashNotes = [];
          renderTimeline();
          renderSettings();
          showSuccess("All data cleared");
        } catch (error) {
          handleError(error, "clearing all data");
        }
      }
    },
  );
}

async function restoreAllTrash() {
  if (trashNotes.length === 0) {
    showSuccess("Trash is empty");
    return;
  }

  try {
    await database.restoreAllFromTrash();

    // Update local state
    trashNotes.forEach((note) => {
      delete note.trashedAt;
      notes.push(note);
    });
    trashNotes = [];

    renderTrash();
    renderSettings();
    showSuccess(`Restored ${trashNotes.length} notes from trash`);
  } catch (error) {
    handleError(error, "restoring all trash");
  }
}

async function emptyTrash() {
  if (trashNotes.length === 0) {
    showSuccess("Trash is already empty");
    return;
  }

  showConfirmDialog(
    "Empty Trash",
    `Permanently delete ${trashNotes.length} notes? This cannot be undone!`,
    async (confirmed) => {
      if (confirmed) {
        try {
          await database.emptyTrash();
          trashNotes = [];
          renderTrash();
          renderSettings();
          showSuccess("Trash emptied");
        } catch (error) {
          handleError(error, "emptying trash");
        }
      }
    },
  );
}

// Event listeners setup
function setupEventListeners() {
  // Input area
  noteInput.addEventListener("input", () => {
    noteInput.style.height = "auto";
    noteInput.style.height = `${noteInput.scrollHeight}px`;
    addButton.disabled = noteInput.value.trim() === "";
  });

  noteInput.addEventListener("keydown", (e) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      addNote();
    }
  });

  addButton.onclick = addNote;

  // Search functionality
  liveSearchInput.addEventListener("input", handleSearchInput);
  liveSearchInput.addEventListener("keydown", (e) => {
    if (e.key === "Escape") {
      toggleSearch();
    }
  });

  // Navigation buttons
  document
    .getElementById("homeBtn")
    .addEventListener("click", showTimelineView);
  document.getElementById("searchBtn").addEventListener("click", toggleSearch);
  document.getElementById("clearSearch").addEventListener("click", () => {
    clearSearchFilter();
    toggleSearch();
  });

  document.getElementById("tagsBtn").addEventListener("click", showTagsModal);

  // Removed trash button - now in settings
  document
    .getElementById("settingsBtn")
    .addEventListener("click", showSettingsView);

  // Settings buttons
  document.getElementById("exportBtn").onclick = exportData;
  document.getElementById("importBtn").onclick = importData;
  document.getElementById("clearDataBtn").onclick = clearAllData;
  document.getElementById("restoreAllBtn").onclick = restoreAllTrash;
  document.getElementById("emptyTrashBtn").onclick = emptyTrash;

  document.getElementById("viewTrashBtn").onclick = showTrashView;
  document.getElementById("backFromTrashBtn").onclick = showTimelineView;

  // Filter buttons
  document.getElementById("clearFiltersBtn").onclick = clearAllFilters;

  // Modal buttons
  document.getElementById("trashNoteBtn").onclick = () =>
    trashNote(getCurrentEditId());

  // Handedness toggle (will be added to settings)
  if (document.getElementById("handednessToggle")) {
    document.getElementById("handednessToggle").onclick = toggleHandedness;
  }

  // Real-time scroll position saving
  if (timelineContainer) {
    timelineContainer.addEventListener('scroll', () => {
      if (currentView === "timeline") {
        // Save scroll position immediately when scrolling
        saveScrollPosition();
      }
    }, { passive: true });
  }



// Global functions for onclick handlers
window.toggleTagFilter = toggleTagFilter;
window.clearSearchFilter = clearSearchFilter;
window.addEditTagToList = addEditTag;
window.closeModal = closeModal;
window.saveEdit = saveEdit;
window.openModal = openModal;
window.closeTagsModal = closeTagsModal;
window.applyTagFilters = applyTagFilters;
window.clearAllTagFilters = clearAllTagFilters;
window.toggleHandedness = toggleHandedness;

// Global state management functions
window.setNotes = setNotes;
window.setTrashNotes = setTrashNotes;
window.getNotes = getNotes;
window.getTrashNotes = getTrashNotes;
window.setCurrentEditId = setCurrentEditId;
window.getCurrentEditId = getCurrentEditId;
window.setEditTags = setEditTags;
window.getEditTags = getEditTags;
window.addEditTagToArray = addEditTag;
window.removeEditTagFromArray = removeEditTag;
window.setLastAddedNoteId = setLastAddedNoteId;
window.getLastAddedNoteId = () => lastAddedNoteId;
window.setCurrentSearch = setCurrentSearch;
window.setActiveTypeFilters = setActiveTypeFilters;
window.setActiveTagFilters = setActiveTagFilters;

// Virtual scrolling toggle (exposed globally for development/testing)
window.toggleVirtualScrolling = window.toggleVirtualScrolling || (() => console.log("Virtual scrolling not initialized yet"));
}



// Initialize app when DOM is loaded
document.addEventListener("DOMContentLoaded", initApp);