popup.js

// ============================================
// CONSTANTS & CONFIGURATION
// ============================================
const CONFIG = {
  AUDIO_VOLUME: 0.5,
  TAG_MAX_LENGTH: 22,
  DEBOUNCE_DELAY: 300,
  TRASH_CAP: 50,           // max items kept in the trash (oldest are purged)
  UNDO_DURATION: 2500,     // how long the undo toast stays up (ms)
  DONATE_PROMPT_CHANCE: 0.35,                // chance to show the donate callout on open
  DONATE_PROMPT_COOLDOWN: 3 * 60 * 60 * 1000, // min time between prompts (ms)
  STORAGE_KEYS: {
    VIDEOS: 'savedVideos',
    DELETED: 'deletedVideos',
    SOUND: 'soundEnabled',
    SUPPORTER: 'supporter',
    LAST_PROMPT: 'lastDonatePrompt',
    HIDE_JM_BANNER: 'hideJobsMatchBanner',
    REV: 'wleRev'
  },
  WRITE_ATTEMPTS: 6,
  // Peppered SHA-256 of supporter unlock material. Plaintext is not in this repository.
  UNLOCK: {
    p: '13c7fd3a9477bf036da5c0d02bb1dc85',
    d: ['5fa8fb99e05a8273b4214a4ca1e2ad01', '4916f0d411ef0b67ac58851273d0363a']
  }
};

// ============================================
// AUDIO MANAGEMENT (Singleton Pattern)
// ============================================
const AudioManager = {
  clickAudio: null,

  init() {
    if (!this.clickAudio) {
      this.clickAudio = new Audio('sounds/click.wav');
      this.clickAudio.volume = CONFIG.AUDIO_VOLUME;
    }
    return this.clickAudio;
  },

  play(soundEnabled) {
    if (!soundEnabled) return;

    const audio = this.init();
    audio.currentTime = 0;
    audio.play().catch(e => console.warn("Audio play blocked:", e));
  },

  cleanup() {
    if (this.clickAudio) {
      this.clickAudio.pause();
      this.clickAudio.currentTime = 0;
      this.clickAudio = null;
    }
  }
};

// ============================================
// DOM ELEMENT CACHE
// ============================================
const DOMCache = {
  soundBtn: null,
  tagSearchInput: null,
  videoList: null,
  tutorial: null,
  settingsModal: null,
  viewTabs: null,
  toast: null,
  trashActions: null,
  emptyTrashBtn: null,
  searchWrap: null,
  donateBtn: null,
  donateCallout: null,
  scrollContainer: null,
  jmBanner: null,
  hideBannerRow: null,
  hideBannerSwitch: null,
  hideBannerHint: null,
  supporterUnlock: null,
  supporterCodeInput: null,
  supporterUnlockBtn: null,
  supporterUnlockStatus: null,

  init() {
    this.soundBtn = document.getElementById('toggle-sound');
    this.tagSearchInput = document.getElementById('tag-search');
    this.videoList = document.getElementById('video-list');
    this.tutorial = document.getElementById('tutorial');
    this.settingsModal = document.getElementById('settings-modal');
    this.viewTabs = document.getElementById('view-tabs');
    this.toast = document.getElementById('wle-toast');
    this.trashActions = document.getElementById('trash-actions');
    this.emptyTrashBtn = document.getElementById('empty-trash');
    this.searchWrap = document.querySelector('.searchbar-wrap');
    this.donateBtn = document.getElementById('ko-fi-button');
    this.donateCallout = document.getElementById('donate-callout');
    this.scrollContainer = document.querySelector('main');
    this.jmBanner = document.getElementById('jobsmatch-banner');
    this.hideBannerRow = document.getElementById('hide-banner-row');
    this.hideBannerSwitch = document.getElementById('toggle-hide-banner');
    this.hideBannerHint = document.getElementById('hide-banner-hint');
    this.supporterUnlock = document.getElementById('supporter-unlock');
    this.supporterCodeInput = document.getElementById('supporter-code');
    this.supporterUnlockBtn = document.getElementById('supporter-unlock-btn');
    this.supporterUnlockStatus = document.getElementById('supporter-unlock-status');
  }
};

// ============================================
// STATE MANAGEMENT
// ============================================
const AppState = {
  soundEnabled: true,
  tagQuery: '',
  tagQueryMode: 'contains',
  draggedItemIndex: null,
  view: 'active', // 'active' | 'archive' | 'trash'
  supporter: false,
  hideJobsMatchBanner: false,

  setSoundEnabled(value) {
    this.soundEnabled = value;
    chrome.storage.local.set({ [CONFIG.STORAGE_KEYS.SOUND]: value });
  },

  setTagQuery(value, mode = 'contains') {
    this.tagQuery = value.trim().toLowerCase();
    this.tagQueryMode = mode;
  },

  setView(view) {
    this.view = view;
  }
};

// ============================================
// DRAG AUTO-SCROLL
// Native HTML5 drag doesn't scroll the list; when the pointer nears the top
// or bottom edge of the scroll container we nudge it, so items can be dragged
// beyond the currently visible area.
// ============================================
const DragScroller = {
  raf: null,
  pointerY: 0,
  active: false,
  EDGE: 55,     // px hot-zone at top/bottom
  SPEED: 14,    // max px scrolled per frame

  start() {
    if (this.active) return;
    this.active = true;
    this.raf = requestAnimationFrame(() => this.tick());
  },

  update(y) {
    this.pointerY = y;
  },

  stop() {
    this.active = false;
    if (this.raf) {
      cancelAnimationFrame(this.raf);
      this.raf = null;
    }
  },

  tick() {
    if (!this.active) {
      this.raf = null;
      return;
    }

    const c = DOMCache.scrollContainer;
    if (c) {
      const rect = c.getBoundingClientRect();

      // The top of the list is overlaid by the sticky tabs + searchbar, so the
      // real top boundary of the hot-zone is the BOTTOM of that sticky header —
      // otherwise the upper hot-zone hides behind it and never triggers.
      let topBound = rect.top;
      const header = (DOMCache.searchWrap && DOMCache.searchWrap.offsetParent !== null)
        ? DOMCache.searchWrap
        : DOMCache.viewTabs;
      if (header) {
        topBound = Math.max(topBound, header.getBoundingClientRect().bottom);
      }

      const top = this.pointerY - topBound;
      const bottom = rect.bottom - this.pointerY;
      let dy = 0;

      if (top < this.EDGE) {
        dy = -Math.ceil(Math.min(1, (this.EDGE - top) / this.EDGE) * this.SPEED);
      } else if (bottom < this.EDGE) {
        dy = Math.ceil(Math.min(1, (this.EDGE - bottom) / this.EDGE) * this.SPEED);
      }

      if (dy) c.scrollTop += dy;
    }

    this.raf = requestAnimationFrame(() => this.tick());
  }
};

// ============================================
// UTILITY FUNCTIONS
// ============================================
const Utils = {
  colorFromTagName(name) {
    const s = String(name || '').trim().toLowerCase();
    let hash = 0;
    for (let i = 0; i < s.length; i++) {
      hash = (hash * 31 + s.charCodeAt(i)) | 0;
    }
    const h = Math.abs(hash) % 360;
    return `hsl(${h} 70% 45%)`;
  },

  /**
   * Normalize video object structure.
   * IMPORTANT: tag colors are ALWAYS recomputed from the tag name and never
   * trusted from storage — this keeps imported data safe (a hostile `color`
   * field such as `url(...)` could otherwise trigger a network request).
   * Uses Utils.colorFromTagName (not this.) because it runs as a .map() callback.
   */
  normalizeVideo(video) {
    if (!video || typeof video !== 'object') {
      return null;
    }

    const tags = Array.isArray(video?.tags) ? video.tags : [];
    const normalizedTags = tags
      .filter((t) => t && typeof t.name === 'string' && t.name.trim().length > 0)
      .map((t) => ({
        name: String(t.name).trim(),
        color: Utils.colorFromTagName(t.name),
      }));

    return {
      ...video,
      title: video.title || 'Untitled Video',
      url: video.url || '',
      tags: normalizedTags,
      watched: video.watched === true,
      watchedAt: typeof video.watchedAt === 'number' ? video.watchedAt : null,
      savedAt: typeof video.savedAt === 'number' ? video.savedAt : null,
    };
  },

  debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
      const later = () => {
        clearTimeout(timeout);
        func(...args);
      };
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
    };
  },

  createBtnIcon(src, alt = '') {
    const img = document.createElement('img');
    img.className = 'btn-icon';
    img.src = src;
    img.alt = alt;
    img.decoding = 'async';
    img.loading = 'lazy';
    return img;
  }
};

// ============================================
// STORAGE OPERATIONS
// ============================================
const StorageManager = {
  _queue: Promise.resolve(),

  enqueue(fn) {
    const next = this._queue.then(fn, fn);
    this._queue = next.catch((error) => {
      console.error('Storage queue error:', error);
    });
    return next;
  },

  getRaw(defaults) {
    return new Promise((resolve, reject) => {
      chrome.storage.local.get(defaults, (data) => {
        if (chrome.runtime.lastError) reject(chrome.runtime.lastError);
        else resolve(data);
      });
    });
  },

  setRaw(values) {
    return new Promise((resolve, reject) => {
      chrome.storage.local.set(values, () => {
        if (chrome.runtime.lastError) reject(chrome.runtime.lastError);
        else resolve();
      });
    });
  },

  normalizeList(videos) {
    return (videos || [])
      .map((v) => Utils.normalizeVideo(v))
      .filter((v) => v !== null);
  },

  normalizeDeleted(deleted) {
    return (deleted || [])
      .map((v) => {
        const norm = Utils.normalizeVideo(v);
        if (!norm) return null;
        norm.deletedAt = typeof v.deletedAt === 'number' ? v.deletedAt : Date.now();
        norm._idx = typeof v._idx === 'number' ? v._idx : null;
        return norm;
      })
      .filter((v) => v !== null);
  },

  async getVideos() {
    try {
      const data = await this.getRaw({ [CONFIG.STORAGE_KEYS.VIDEOS]: [] });
      return this.normalizeList(data[CONFIG.STORAGE_KEYS.VIDEOS]);
    } catch (error) {
      console.error('Storage read error:', error);
      return [];
    }
  },

  async getDeleted() {
    try {
      const data = await this.getRaw({ [CONFIG.STORAGE_KEYS.DELETED]: [] });
      return this.normalizeDeleted(data[CONFIG.STORAGE_KEYS.DELETED]);
    } catch (error) {
      console.error('Storage read error:', error);
      return [];
    }
  },

  notifyWriteError(error) {
    console.error('Storage write error:', error);
    const msg = String(error && (error.message || error));
    showToast(/quota/i.test(msg) ? 'Could not save — storage may be full' : 'Could not save list');
  },

  /**
   * Read-modify-write both lists in one set(). Retries if another writer
   * changed storage between the snapshot and the write.
   */
  async mutateLists(mutator) {
    return this.enqueue(async () => {
      const keys = {
        [CONFIG.STORAGE_KEYS.VIDEOS]: [],
        [CONFIG.STORAGE_KEYS.DELETED]: [],
        [CONFIG.STORAGE_KEYS.REV]: 0
      };

      for (let attempt = 0; attempt < CONFIG.WRITE_ATTEMPTS; attempt++) {
        const data = await this.getRaw(keys);
        const snapV = JSON.stringify(data[CONFIG.STORAGE_KEYS.VIDEOS] || []);
        const snapD = JSON.stringify(data[CONFIG.STORAGE_KEYS.DELETED] || []);
        const rev = data[CONFIG.STORAGE_KEYS.REV] || 0;

        const ctx = {
          videos: this.normalizeList(data[CONFIG.STORAGE_KEYS.VIDEOS]),
          deleted: this.normalizeDeleted(data[CONFIG.STORAGE_KEYS.DELETED]),
          result: undefined
        };
        mutator(ctx);

        const latest = await this.getRaw(keys);
        if (
          JSON.stringify(latest[CONFIG.STORAGE_KEYS.VIDEOS] || []) !== snapV ||
          JSON.stringify(latest[CONFIG.STORAGE_KEYS.DELETED] || []) !== snapD ||
          (latest[CONFIG.STORAGE_KEYS.REV] || 0) !== rev
        ) {
          await new Promise((r) => setTimeout(r, 16 * (attempt + 1)));
          continue;
        }

        await this.setRaw({
          [CONFIG.STORAGE_KEYS.VIDEOS]: ctx.videos,
          [CONFIG.STORAGE_KEYS.DELETED]: ctx.deleted,
          [CONFIG.STORAGE_KEYS.REV]: rev + 1
        });
        return ctx.result;
      }

      throw new Error('Storage write conflict');
    });
  },

  async updateVideoByUrl(url, updates) {
    try {
      return await this.mutateLists((ctx) => {
        const idx = ctx.videos.findIndex((v) => v.url === url);
        if (idx === -1) {
          ctx.result = false;
          return;
        }
        ctx.videos[idx] = { ...ctx.videos[idx], ...updates };
        ctx.result = true;
      });
    } catch (error) {
      this.notifyWriteError(error);
      return false;
    }
  },

  async toggleWatched(url) {
    try {
      return await this.mutateLists((ctx) => {
        const idx = ctx.videos.findIndex((v) => v.url === url);
        if (idx === -1) {
          ctx.result = { ok: false };
          return;
        }
        const watched = !ctx.videos[idx].watched;
        ctx.videos[idx] = {
          ...ctx.videos[idx],
          watched,
          watchedAt: watched ? Date.now() : null
        };
        ctx.result = { ok: true, watched };
      });
    } catch (error) {
      this.notifyWriteError(error);
      return { ok: false };
    }
  },

  async softDelete(urls) {
    try {
      return await this.mutateLists((ctx) => {
        const urlSet = new Set(urls);
        const now = Date.now();
        const moved = [];
        const remaining = [];
        ctx.videos.forEach((v, i) => {
          if (urlSet.has(v.url)) {
            moved.push({ ...v, deletedAt: now, _idx: i });
          } else {
            remaining.push(v);
          }
        });
        if (moved.length === 0) {
          ctx.result = [];
          return;
        }
        ctx.videos = remaining;
        ctx.deleted = [...moved, ...ctx.deleted].slice(0, CONFIG.TRASH_CAP);
        ctx.result = moved.map((m) => m.url);
      });
    } catch (error) {
      this.notifyWriteError(error);
      return [];
    }
  },

  async restore(urls) {
    try {
      return await this.mutateLists((ctx) => {
        const urlSet = new Set(urls);
        const toRestore = ctx.deleted.filter((d) => urlSet.has(d.url));
        const remainingTrash = ctx.deleted.filter((d) => !urlSet.has(d.url));

        toRestore.sort((a, b) => (a._idx ?? Number.MAX_SAFE_INTEGER) - (b._idx ?? Number.MAX_SAFE_INTEGER));

        toRestore.forEach((d) => {
          const clean = { ...d };
          delete clean.deletedAt;
          delete clean._idx;
          const pos = typeof d._idx === 'number'
            ? Math.min(Math.max(d._idx, 0), ctx.videos.length)
            : ctx.videos.length;
          ctx.videos.splice(pos, 0, clean);
        });

        ctx.deleted = remainingTrash;
        ctx.result = true;
      });
    } catch (error) {
      this.notifyWriteError(error);
      return false;
    }
  },

  async permanentDelete(urls) {
    try {
      return await this.mutateLists((ctx) => {
        const urlSet = new Set(urls);
        ctx.deleted = ctx.deleted.filter((d) => !urlSet.has(d.url));
        ctx.result = true;
      });
    } catch (error) {
      this.notifyWriteError(error);
      return false;
    }
  },

  async emptyTrash() {
    try {
      return await this.mutateLists((ctx) => {
        ctx.deleted = [];
        ctx.result = true;
      });
    } catch (error) {
      this.notifyWriteError(error);
      return false;
    }
  },

  async reorder(fromIndex, toIndex) {
    try {
      return await this.mutateLists((ctx) => {
        if (
          fromIndex < 0 ||
          toIndex < 0 ||
          fromIndex >= ctx.videos.length
        ) {
          ctx.result = false;
          return;
        }
        const [item] = ctx.videos.splice(fromIndex, 1);
        if (!item) {
          ctx.result = false;
          return;
        }
        const dest = Math.min(toIndex, ctx.videos.length);
        ctx.videos.splice(dest, 0, item);
        ctx.result = true;
      });
    } catch (error) {
      this.notifyWriteError(error);
      return false;
    }
  },

  async getAllTagNames() {
    const videos = await this.getVideos();
    const seen = new Map();
    videos.forEach((v) => {
      (v.tags || []).forEach((t) => {
        const key = t.name.toLowerCase();
        if (!seen.has(key)) seen.set(key, t.name);
      });
    });
    return [...seen.values()];
  }
};

// ============================================
// VIDEO ITEM CREATION
// ============================================
const VideoItemFactory = {
  /**
   * @param {object} video
   * @param {number} index  position in the full saved-videos array (for drag reorder)
   * @param {'active'|'archive'|'trash'} mode
   */
  create(video, index, mode = 'active') {
    const li = document.createElement('li');
    li.className = 'video-item';
    li.dataset.url = video.url;
    li.dataset.index = String(index);

    const editable = mode !== 'trash';
    const canDrag = mode === 'active' && !AppState.tagQuery;
    li.draggable = canDrag;
    if (mode === 'active' && AppState.tagQuery) li.classList.add('drag-disabled');

    const { row, tagAddBtn } = this.createVideoRow(video, index, mode, canDrag);
    li.appendChild(row);

    if (editable) {
      const tagRow = this.createTagRow(video, li, tagAddBtn);
      li.appendChild(tagRow);
    } else if (Array.isArray(video.tags) && video.tags.length) {
      // Read-only tags in the trash view
      const tagRow = document.createElement('div');
      tagRow.className = 'tag-row';
      video.tags.forEach((tag) => tagRow.appendChild(this.createReadonlyPill(tag)));
      li.appendChild(tagRow);
    }

    if (canDrag) this.attachDragListeners(li);

    return li;
  },

  createVideoRow(video, index, mode, canDrag) {
    const row = document.createElement('div');
    row.className = 'video-row';

    const left = document.createElement('div');
    left.className = 'video-left';

    if (canDrag) {
      left.appendChild(this.createDragHandle());
    }

    left.appendChild(this.createTitle(video.title));

    const { actions, tagAddBtn } = this.createActions(index, mode, video);
    row.append(left, actions);

    return { row, tagAddBtn };
  },

  createDragHandle() {
    const handle = document.createElement('div');
    handle.className = 'drag-handle';
    handle.title = AppState.tagQuery ? 'Clear search to reorder' : 'Hold and drag to reorder';
    handle.appendChild(Utils.createBtnIcon('icons/buttons/menu-burger.svg', ''));
    return handle;
  },

  createTitle(title) {
    const titleEl = document.createElement('span');
    titleEl.className = 'video-title';
    titleEl.textContent = title;
    return titleEl;
  },

  makeIconButton(className, iconSrc, title) {
    const btn = document.createElement('button');
    btn.className = `icon-btn ${className}`;
    btn.type = 'button';
    btn.title = title;
    btn.setAttribute('aria-label', title);
    btn.appendChild(Utils.createBtnIcon(iconSrc, ''));
    return btn;
  },

  createActions(index, mode, video) {
    const actions = document.createElement('div');
    actions.className = 'video-actions';
    let tagAddBtn = null;

    if (mode === 'trash') {
      const restoreBtn = this.makeIconButton('restore-btn', 'icons/buttons/rotate-left.svg', 'Restore video');
      const permaBtn = this.makeIconButton('perma-delete-btn', 'icons/buttons/trash-xmark.svg', 'Delete permanently');
      actions.append(restoreBtn, permaBtn);
      return { actions, tagAddBtn };
    }

    // active / archive
    if (mode === 'archive') {
      const unwatchBtn = this.makeIconButton('watch-toggle-btn', 'icons/buttons/rotate-left.svg', 'Move back to To Watch');
      actions.appendChild(unwatchBtn);
    } else {
      const watchedBtn = this.makeIconButton('watch-toggle-btn', 'icons/buttons/check.svg', 'Mark as watched');
      actions.appendChild(watchedBtn);
    }

    tagAddBtn = this.makeIconButton('tag-add-btn', 'icons/buttons/tags.svg', 'Add tag');
    actions.appendChild(tagAddBtn);

    const delBtn = this.makeIconButton('delete-btn', 'icons/buttons/cross-small.svg', 'Remove video');
    delBtn.dataset.index = String(index);
    actions.appendChild(delBtn);

    return { actions, tagAddBtn };
  },

  createTagRow(video, li, tagAddBtn) {
    const tagRow = document.createElement('div');
    tagRow.className = 'tag-row';

    const tags = Array.isArray(video.tags) ? video.tags : [];

    tags.forEach(tag => {
      const pill = this.createTagPill(tag, li);
      tagRow.appendChild(pill);
    });

    const tagEditor = this.createTagInput(li, tagAddBtn, video);
    tagRow.appendChild(tagEditor);

    return tagRow;
  },

  createReadonlyPill(tag) {
    const pill = document.createElement('span');
    pill.className = 'tag-pill tag-pill-readonly';
    pill.style.background = tag.color;
    const pillText = document.createElement('span');
    pillText.className = 'tag-pill-text';
    pillText.textContent = tag.name;
    pill.appendChild(pillText);
    return pill;
  },

  createTagPill(tag, li) {
    const pill = document.createElement('span');
    pill.className = 'tag-pill';
    pill.style.background = tag.color;
    pill.title = `Filter by "${tag.name}"`;

    const pillText = document.createElement('span');
    pillText.className = 'tag-pill-text';
    pillText.textContent = tag.name;

    const pillRemove = document.createElement('button');
    pillRemove.className = 'tag-pill-remove';
    pillRemove.type = 'button';
    pillRemove.title = 'Remove tag';
    pillRemove.textContent = '×';

    pill.append(pillText, pillRemove);

    pill.addEventListener('click', (e) => {
      if (e.target?.closest('.tag-pill-remove')) return;
      e.preventDefault();
      e.stopPropagation();

      if (DOMCache.tagSearchInput) {
        DOMCache.tagSearchInput.value = tag.name;
      }
      AppState.setTagQuery(tag.name, 'exact');
      displayVideos();
    });

    pillRemove.addEventListener('click', async (e) => {
      e.preventDefault();
      e.stopPropagation();

      try {
        const videos = await StorageManager.getVideos();
        const video = videos.find((v) => v.url === li.dataset.url);

        if (!video) return;

        const nextTags = (video.tags || []).filter(
          (t) => t.name.toLowerCase() !== tag.name.toLowerCase()
        );

        await StorageManager.updateVideoByUrl(video.url, { tags: nextTags });
        displayVideos();
      } catch (error) {
        console.error('Error removing tag:', error);
      }
    });

    return pill;
  },

  /**
   * Add a tag (by name) to a video. Returns true on success or if it already
   * exists. Shared by the Enter key and the autocomplete suggestions.
   */
  async addTag(videoUrl, name) {
    const clean = (name || '').trim();
    if (!clean || !videoUrl) return false;

    try {
      const videos = await StorageManager.getVideos();
      const video = videos.find((v) => v.url === videoUrl);
      if (!video) return false;

      const existing = video.tags || [];
      if (existing.some((t) => t.name.toLowerCase() === clean.toLowerCase())) {
        return true; // already present — treat as success
      }

      const newTag = { name: clean, color: Utils.colorFromTagName(clean) };
      return await StorageManager.updateVideoByUrl(videoUrl, {
        tags: [...existing, newTag]
      });
    } catch (error) {
      console.error('Error adding tag:', error);
      return false;
    }
  },

  createTagInput(li, tagAddBtn, video) {
    const wrap = document.createElement('span');
    wrap.className = 'tag-input-wrap';
    wrap.style.display = 'none';

    const tagInput = document.createElement('input');
    tagInput.className = 'tag-input';
    tagInput.type = 'text';
    tagInput.placeholder = 'Tag…';
    tagInput.maxLength = CONFIG.TAG_MAX_LENGTH;

    const suggestions = document.createElement('div');
    suggestions.className = 'tag-suggestions';
    suggestions.hidden = true;

    wrap.append(tagInput, suggestions);

    let tagUniverse = [];
    const existingLower = () => new Set((video.tags || []).map((t) => t.name.toLowerCase()));

    const closeEditor = () => {
      wrap.style.display = 'none';
      tagInput.value = '';
      suggestions.hidden = true;
      suggestions.textContent = '';
    };

    const openEditor = async () => {
      wrap.style.display = 'inline-flex';
      tagInput.value = '';
      suggestions.hidden = true;
      suggestions.textContent = '';
      tagInput.focus();
      tagUniverse = await StorageManager.getAllTagNames();
    };

    const commit = async (name) => {
      const clean = (name || '').trim();
      if (!clean) { closeEditor(); return; }
      const ok = await VideoItemFactory.addTag(li.dataset.url, clean);
      if (ok) {
        displayVideos(); // rebuilds the list (editor closes with it)
      } else {
        closeEditor();
      }
    };

    const renderSuggestions = (query) => {
      const q = query.trim().toLowerCase();
      suggestions.textContent = '';
      if (!q) { suggestions.hidden = true; return; }

      const exclude = existingLower();
      const matches = tagUniverse
        .filter((n) => n.toLowerCase().includes(q) && !exclude.has(n.toLowerCase()))
        .slice(0, 6);

      if (matches.length === 0) { suggestions.hidden = true; return; }

      matches.forEach((name) => {
        const item = document.createElement('button');
        item.type = 'button';
        item.className = 'tag-suggestion';

        const dot = document.createElement('span');
        dot.className = 'tag-suggestion-dot';
        dot.style.background = Utils.colorFromTagName(name);

        const label = document.createElement('span');
        label.className = 'tag-suggestion-label';
        label.textContent = name;

        item.append(dot, label);
        // mousedown (not click): fires before the input's blur tears the list down
        item.addEventListener('mousedown', (e) => {
          e.preventDefault();
          commit(name);
        });
        suggestions.appendChild(item);
      });

      suggestions.hidden = false;
    };

    if (tagAddBtn) {
      tagAddBtn.addEventListener('click', (e) => {
        e.preventDefault();
        e.stopPropagation();
        if (wrap.style.display === 'none') {
          openEditor();
        } else {
          closeEditor();
        }
      });
    }

    wrap.addEventListener('click', (e) => e.stopPropagation());

    tagInput.addEventListener('input', () => renderSuggestions(tagInput.value));

    tagInput.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') {
        e.preventDefault();
        e.stopPropagation();
        closeEditor();
        return;
      }
      if (e.key === 'Enter') {
        e.preventDefault();
        e.stopPropagation();
        commit(tagInput.value);
      }
    });

    // Clicking away (with nothing selected) closes the editor — fix for the
    // input staying open when left empty. The timeout lets a suggestion's
    // mousedown run first.
    tagInput.addEventListener('blur', () => {
      setTimeout(() => {
        if (document.activeElement !== tagInput) closeEditor();
      }, 120);
    });

    return wrap;
  },

  attachDragListeners(li) {
    li.addEventListener('dragstart', () => {
      if (AppState.tagQuery) return;
      AppState.draggedItemIndex = parseInt(li.dataset.index, 10);
      DragScroller.start();
      setTimeout(() => li.classList.add('dragging'), 0);
    });

    li.addEventListener('dragend', () => {
      DragScroller.stop();
      li.classList.remove('dragging');
      document.querySelectorAll('.video-item').forEach(el => el.classList.remove('drop-target'));
    });

    li.addEventListener('dragover', (e) => {
      if (AppState.tagQuery) return;
      e.preventDefault();
      const targetIndex = parseInt(li.dataset.index, 10);
      if (AppState.draggedItemIndex !== null && AppState.draggedItemIndex !== targetIndex) {
        li.classList.add('drop-target');
      }
    });

    li.addEventListener('dragleave', () => {
      li.classList.remove('drop-target');
    });

    li.addEventListener('drop', async (e) => {
      if (AppState.tagQuery) return;
      e.preventDefault();
      li.classList.remove('drop-target');

      const targetIndex = parseInt(li.dataset.index, 10);
      if (AppState.draggedItemIndex === null || AppState.draggedItemIndex === targetIndex) return;

      try {
        await StorageManager.reorder(AppState.draggedItemIndex, targetIndex);
        displayVideos();
      } catch (error) {
        console.error('Error reordering videos:', error);
      }
    });
  }
};

// ============================================
// DISPLAY LOGIC
// ============================================
async function displayVideos() {
  try {
    if (!DOMCache.videoList || !DOMCache.tutorial) {
      console.error('Required DOM elements not found');
      return;
    }

    const [savedVideos, deletedVideos] = await Promise.all([
      StorageManager.getVideos(),
      StorageManager.getDeleted()
    ]);

    const activeVideos = savedVideos.filter((v) => !v.watched);
    const archivedVideos = savedVideos.filter((v) => v.watched);

    updateTabCounts(activeVideos.length, archivedVideos.length, deletedVideos.length);

    // Tag search only applies to active/archive; the "Empty trash" bar only
    // shows in the trash view (so there is no single control wiping everything).
    if (DOMCache.searchWrap) DOMCache.searchWrap.style.display = AppState.view === 'trash' ? 'none' : '';
    if (DOMCache.trashActions) {
      DOMCache.trashActions.classList.toggle('visible', AppState.view === 'trash' && deletedVideos.length > 0);
    }

    DOMCache.videoList.textContent = '';

    // ---- TRASH VIEW ----
    if (AppState.view === 'trash') {
      if (deletedVideos.length === 0) {
        showTutorial('Trash is empty', 'Deleted videos appear here so you can restore them. Items are removed automatically once the trash is full.');
        return;
      }
      DOMCache.tutorial.style.display = 'none';
      const frag = document.createDocumentFragment();
      deletedVideos.forEach((video) => {
        frag.appendChild(VideoItemFactory.create(video, -1, 'trash'));
      });
      DOMCache.videoList.appendChild(frag);
      return;
    }

    // ---- ACTIVE / ARCHIVE VIEWS ----
    const source = AppState.view === 'archive' ? archivedVideos : activeVideos;

    if (source.length === 0) {
      if (AppState.view === 'archive') {
        showTutorial('No watched videos yet', 'Mark a video as watched (✓) to move it here.');
      } else {
        showTutorial('How to use', 'Hold the <b>Alt</b> key and <b>Click</b> on any YouTube video to save it instantly.', true);
      }
      return;
    }

    const filteredVideos = AppState.tagQuery
      ? source.filter((v) =>
          (v.tags || []).some((t) => {
            const n = t.name.toLowerCase();
            return AppState.tagQueryMode === 'exact' ? n === AppState.tagQuery : n.includes(AppState.tagQuery);
          })
        )
      : source;

    if (filteredVideos.length === 0) {
      showTutorial('No results', 'No videos match this tag search.');
      return;
    }

    DOMCache.tutorial.style.display = 'none';

    const frag = document.createDocumentFragment();
    filteredVideos.forEach((video) => {
      // Index into the FULL saved array, so drag reorder stays correct
      const index = savedVideos.findIndex((v) => v.url === video.url);
      frag.appendChild(VideoItemFactory.create(video, index, AppState.view));
    });

    DOMCache.videoList.appendChild(frag);
  } catch (error) {
    console.error('Error displaying videos:', error);
    showTutorial('Error', 'Failed to load videos. Please try refreshing.');
  }
}

function showTutorial(title, message, showHint = false) {
  if (!DOMCache.tutorial) return;

  DOMCache.tutorial.style.display = 'block';

  const titleEl = document.getElementById('tutorial-title');
  const textEl = document.getElementById('tutorial-text');
  const visualEl = document.getElementById('tutorial-visual');

  if (titleEl) titleEl.textContent = title;
  if (textEl) {
    textEl.innerHTML = message;
  }
  // The keyboard/mouse "ALT + LEFT CLICK" hint only makes sense on the
  // "How to use" empty state — hide it for Archive / Trash / no-results.
  if (visualEl) visualEl.style.display = showHint ? '' : 'none';
}

function updateTabCounts(active, archive, trash) {
  const set = (view, n) => {
    const el = document.querySelector(`.view-tab-count[data-count-for="${view}"]`);
    if (el) el.textContent = n > 0 ? String(n) : '';
  };
  set('active', active);
  set('archive', archive);
  set('trash', trash);
}

// ============================================
// TOAST (undo notifications)
// ============================================
let toastTimeout = null;

function showToast(message, actionLabel, actionFn) {
  const el = DOMCache.toast;
  if (!el) return;

  el.textContent = '';

  const msg = document.createElement('span');
  msg.className = 'wle-toast-msg';
  msg.textContent = message;
  el.appendChild(msg);

  if (actionLabel && typeof actionFn === 'function') {
    const btn = document.createElement('button');
    btn.className = 'wle-toast-action';
    btn.type = 'button';
    btn.textContent = actionLabel;
    btn.addEventListener('click', async () => {
      hideToast();
      await actionFn();
    });
    el.appendChild(btn);
  }

  el.classList.add('visible');
  if (toastTimeout) clearTimeout(toastTimeout);
  toastTimeout = setTimeout(hideToast, CONFIG.UNDO_DURATION);
}

function hideToast() {
  const el = DOMCache.toast;
  if (!el) return;
  el.classList.remove('visible');
  if (toastTimeout) {
    clearTimeout(toastTimeout);
    toastTimeout = null;
  }
}

// ============================================
// EVENT HANDLERS (Event Delegation)
// ============================================
function setupVideoListHandlers() {
  if (!DOMCache.videoList) return;

  DOMCache.videoList.addEventListener('click', async (e) => {
    const li = e.target.closest('.video-item');
    if (!li) return;
    const url = li.dataset.url;

    // Mark watched / move back to To Watch
    if (e.target.closest('.watch-toggle-btn')) {
      e.stopPropagation();
      if (!url) return;
      AudioManager.play(AppState.soundEnabled);
      const result = await StorageManager.toggleWatched(url);
      displayVideos();
      if (!result || !result.ok) return;
      showToast(
        result.watched ? 'Moved to Archive' : 'Moved to To Watch',
        'Undo',
        async () => { await StorageManager.toggleWatched(url); displayVideos(); }
      );
      return;
    }

    // Restore from trash
    if (e.target.closest('.restore-btn')) {
      e.stopPropagation();
      if (!url) return;
      AudioManager.play(AppState.soundEnabled);
      await StorageManager.restore([url]);
      displayVideos();
      return;
    }

    // Permanently delete from trash
    if (e.target.closest('.perma-delete-btn')) {
      e.stopPropagation();
      if (!url) return;
      AudioManager.play(AppState.soundEnabled);
      if (!confirm('Permanently delete this video?')) return;
      await StorageManager.permanentDelete([url]);
      displayVideos();
      return;
    }

    // Soft delete (active/archive) → trash, with undo
    if (e.target.closest('.delete-btn')) {
      e.stopPropagation();
      if (!url) return;
      AudioManager.play(AppState.soundEnabled);
      const moved = await StorageManager.softDelete([url]);
      displayVideos();
      if (moved.length) {
        showToast('Video moved to trash', 'Undo', async () => {
          await StorageManager.restore(moved);
          displayVideos();
        });
      }
      return;
    }

    if (e.target.closest('.tag-add-btn')) return;
    if (e.target.closest('.tag-row')) return;
    if (e.target.closest('.video-actions')) return;
    if (e.target.closest('.drag-handle')) return;

    if (e.target.closest('.video-left')) {
      if (WLEUrl.isSafeOpenUrl(url)) {
        AudioManager.play(AppState.soundEnabled);
        window.open(url, '_blank', 'noopener,noreferrer');
      }
    }
  });
}

// ============================================
// VIEW TABS
// ============================================
function setupViewTabs() {
  if (!DOMCache.viewTabs) return;

  DOMCache.viewTabs.addEventListener('click', (e) => {
    const tab = e.target.closest('.view-tab');
    if (!tab) return;

    const view = tab.dataset.view;
    if (!view || view === AppState.view) return;

    AppState.setView(view);

    DOMCache.viewTabs.querySelectorAll('.view-tab').forEach((t) => {
      t.classList.toggle('active', t === tab);
      t.setAttribute('aria-selected', t === tab ? 'true' : 'false');
    });

    AudioManager.play(AppState.soundEnabled);
    displayVideos();
  });
}

// ============================================
// DRAG AUTO-SCROLL WIRING
// ============================================
function setupDragAutoScroll() {
  if (!DOMCache.scrollContainer) return;
  DOMCache.scrollContainer.addEventListener('dragover', (e) => {
    if (DragScroller.active) DragScroller.update(e.clientY);
  });
}

// ============================================
// SOUND MANAGEMENT
// ============================================
function updateSoundIcon() {
  if (!DOMCache.soundBtn) return;

  DOMCache.soundBtn.classList.toggle('muted', !AppState.soundEnabled);
  const icon = DOMCache.soundBtn.querySelector('img.btn-icon');

  if (icon) {
    icon.src = AppState.soundEnabled
      ? 'icons/buttons/volume.svg'
      : 'icons/buttons/volume-mute.svg';
  }
}

function setupSoundToggle() {
  if (!DOMCache.soundBtn) return;

  DOMCache.soundBtn.addEventListener('click', () => {
    AppState.setSoundEnabled(!AppState.soundEnabled);
    updateSoundIcon();
    if (AppState.soundEnabled) {
      AudioManager.play(true);
    }
  });
}

// ============================================
// SEARCH HANDLING
// ============================================
function setupSearch() {
  if (!DOMCache.tagSearchInput) return;

  const debouncedSearch = Utils.debounce((value) => {
    AppState.setTagQuery(value, 'contains');
    displayVideos();
  }, CONFIG.DEBOUNCE_DELAY);

  DOMCache.tagSearchInput.addEventListener('input', (e) => {
    debouncedSearch(e.target.value || '');
  });
}

// ============================================
// MODAL HANDLING
// ============================================
function setupModal() {
  const openBtn = document.getElementById('open-settings');
  const closeBtn = document.getElementById('close-settings');

  if (openBtn && DOMCache.settingsModal) {
    openBtn.addEventListener('click', () => {
      AudioManager.play(AppState.soundEnabled);
      DOMCache.settingsModal.classList.remove('hidden');
    });
  }

  if (closeBtn && DOMCache.settingsModal) {
    closeBtn.addEventListener('click', () => {
      AudioManager.play(AppState.soundEnabled);
      DOMCache.settingsModal.classList.add('hidden');
    });
  }
}

// ============================================
// EMPTY TRASH (trash view only)
// ============================================
function setupTrashActions() {
  if (!DOMCache.emptyTrashBtn) return;

  DOMCache.emptyTrashBtn.addEventListener('click', async () => {
    AudioManager.play(AppState.soundEnabled);
    if (confirm('Permanently empty the trash?')) {
      await StorageManager.emptyTrash();
      displayVideos();
    }
  });
}

// ============================================
// DONATE CALLOUT
// ============================================
function markSupporter() {
  // Set after the thank-you digest matches. Ko-fi clicks do not unlock.
  AppState.supporter = true;
  AppState.hideJobsMatchBanner = true;
  chrome.storage.local.set({
    [CONFIG.STORAGE_KEYS.SUPPORTER]: true,
    [CONFIG.STORAGE_KEYS.HIDE_JM_BANNER]: true
  });
  applyJobsMatchBanner();
}

function positionDonateCallout() {
  const btn = DOMCache.donateBtn;
  const cal = DOMCache.donateCallout;
  if (!btn || !cal) return;

  const r = btn.getBoundingClientRect();
  const calWidth = 230;
  let left = r.left + r.width / 2 - calWidth / 2;
  left = Math.max(8, Math.min(left, window.innerWidth - calWidth - 8));
  cal.style.width = `${calWidth}px`;
  cal.style.left = `${left}px`;
  cal.style.top = `${r.bottom + 10}px`;

  const arrow = cal.querySelector('.donate-callout-arrow');
  if (arrow) {
    const arrowLeft = r.left + r.width / 2 - left - 7;
    arrow.style.left = `${Math.max(12, Math.min(arrowLeft, calWidth - 26))}px`;
  }
}

function showDonateCallout() {
  const cal = DOMCache.donateCallout;
  if (!cal) return;

  positionDonateCallout();
  requestAnimationFrame(() => {
    cal.classList.add('visible');
    if (DOMCache.donateBtn) DOMCache.donateBtn.classList.add('wle-donate-pulse');
  });
  chrome.storage.local.set({ [CONFIG.STORAGE_KEYS.LAST_PROMPT]: Date.now() });
}

function hideDonateCallout() {
  const cal = DOMCache.donateCallout;
  if (!cal) return;
  cal.classList.remove('visible');
  if (DOMCache.donateBtn) DOMCache.donateBtn.classList.remove('wle-donate-pulse');
}

function maybeShowDonateCallout() {
  if (!DOMCache.donateCallout) return;

  chrome.storage.local.get(
    { [CONFIG.STORAGE_KEYS.SUPPORTER]: false, [CONFIG.STORAGE_KEYS.LAST_PROMPT]: 0 },
    (data) => {
      if (data[CONFIG.STORAGE_KEYS.SUPPORTER]) return;
      const last = data[CONFIG.STORAGE_KEYS.LAST_PROMPT] || 0;
      if (Date.now() - last < CONFIG.DONATE_PROMPT_COOLDOWN) return;
      if (Math.random() > CONFIG.DONATE_PROMPT_CHANCE) return;
      showDonateCallout();
    }
  );
}

function setupDonateCallout() {
  const closeBtn = document.getElementById('donate-callout-close');
  const cta = document.getElementById('donate-callout-cta');

  if (closeBtn) closeBtn.addEventListener('click', hideDonateCallout);
  if (cta) cta.addEventListener('click', hideDonateCallout);

  window.addEventListener('resize', () => {
    if (DOMCache.donateCallout && DOMCache.donateCallout.classList.contains('visible')) {
      positionDonateCallout();
    }
  });
}

// ============================================
// JOBSMATCH BANNER
// ============================================
function applyJobsMatchBanner() {
  const banner = DOMCache.jmBanner;
  if (banner) {
    const show = !(AppState.supporter && AppState.hideJobsMatchBanner);
    banner.classList.toggle('hidden', !show);
  }
  updateHideBannerSwitch();
}

function updateHideBannerSwitch() {
  const sw = DOMCache.hideBannerSwitch;
  const hint = DOMCache.hideBannerHint;
  const row = DOMCache.hideBannerRow;
  if (!sw) return;

  const unlocked = !!AppState.supporter;
  sw.disabled = !unlocked;
  sw.setAttribute('aria-checked', (unlocked && AppState.hideJobsMatchBanner) ? 'true' : 'false');
  sw.setAttribute('aria-disabled', unlocked ? 'false' : 'true');
  if (row) row.classList.toggle('locked', !unlocked);
  if (hint) hint.classList.toggle('hidden', unlocked);
  if (DOMCache.supporterUnlock) {
    DOMCache.supporterUnlock.classList.toggle('hidden', unlocked);
  }
}

function promptUnlockBannerHide() {
  AudioManager.play(AppState.soundEnabled);
  showDonateCallout();
}

function toggleHideJobsMatchBanner() {
  if (!AppState.supporter) {
    promptUnlockBannerHide();
    return;
  }
  AudioManager.play(AppState.soundEnabled);
  AppState.hideJobsMatchBanner = !AppState.hideJobsMatchBanner;
  chrome.storage.local.set({
    [CONFIG.STORAGE_KEYS.HIDE_JM_BANNER]: AppState.hideJobsMatchBanner
  });
  applyJobsMatchBanner();
}

function setupJobsMatchBanner() {
  const sw = DOMCache.hideBannerSwitch;
  const row = DOMCache.hideBannerRow;

  if (row) {
    row.addEventListener('click', () => {
      if (AppState.supporter) {
        toggleHideJobsMatchBanner();
        return;
      }
      promptUnlockBannerHide();
    });
  }

  if (sw) {
    sw.addEventListener('click', (e) => {
      e.stopPropagation();
      toggleHideJobsMatchBanner();
    });
  }

  chrome.storage.local.get(
    [CONFIG.STORAGE_KEYS.SUPPORTER, CONFIG.STORAGE_KEYS.HIDE_JM_BANNER],
    (data) => {
      const supporter = !!data[CONFIG.STORAGE_KEYS.SUPPORTER];
      const hasHideKey = Object.prototype.hasOwnProperty.call(
        data,
        CONFIG.STORAGE_KEYS.HIDE_JM_BANNER
      );
      let hide = hasHideKey ? !!data[CONFIG.STORAGE_KEYS.HIDE_JM_BANNER] : false;

      // Existing supporters keep the perk; default hide if the new key is unset.
      if (supporter && !hasHideKey) {
        hide = true;
        chrome.storage.local.set({ [CONFIG.STORAGE_KEYS.HIDE_JM_BANNER]: true });
      }

      AppState.supporter = supporter;
      AppState.hideJobsMatchBanner = hide;
      applyJobsMatchBanner();
    }
  );

  setupSupporterUnlock();
}

async function hashUnlockCandidate(value) {
  const normalized = String(value || '').trim().toUpperCase();
  if (!normalized) return '';
  const payload = `${CONFIG.UNLOCK.p}\0${normalized}`;
  const digest = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(payload));
  return [...new Uint8Array(digest)].map((b) => b.toString(16).padStart(2, '0')).join('');
}

function digestsMatch(a, b) {
  if (!a || !b || a.length !== b.length) return false;
  let diff = 0;
  for (let i = 0; i < a.length; i += 1) {
    diff |= a.charCodeAt(i) ^ b.charCodeAt(i);
  }
  return diff === 0;
}

function setUnlockStatus(message, kind) {
  const el = DOMCache.supporterUnlockStatus;
  if (!el) return;
  el.textContent = message;
  el.classList.toggle('is-error', kind === 'error');
  el.classList.toggle('is-ok', kind === 'ok');
}

async function candidateMatchesUnlock(value) {
  const expected = CONFIG.UNLOCK.d.join('');
  const digest = await hashUnlockCandidate(value);
  return digestsMatch(digest, expected);
}

async function submitSupporterUnlock() {
  const input = DOMCache.supporterCodeInput;
  const raw = input ? input.value : '';
  const tokens = String(raw || '').trim().split(/\s+/).filter(Boolean);
  const candidates = [];
  if (raw && raw.trim()) candidates.push(raw.trim());
  tokens.forEach((token) => {
    if (!candidates.includes(token)) candidates.push(token);
  });

  if (!candidates.length) {
    setUnlockStatus('Paste the code from your Ko-fi thank-you message.', 'error');
    return;
  }

  AudioManager.play(AppState.soundEnabled);

  let matched = false;
  for (const candidate of candidates) {
    if (await candidateMatchesUnlock(candidate)) {
      matched = true;
      break;
    }
  }

  if (!matched) {
    setUnlockStatus('That code is not valid.', 'error');
    return;
  }

  markSupporter();
  if (input) input.value = '';
  setUnlockStatus('Thanks — you can hide the JobsMatch note.', 'ok');
  showToast('Supporter perk unlocked');
}

function setupSupporterUnlock() {
  const btn = DOMCache.supporterUnlockBtn;
  const input = DOMCache.supporterCodeInput;
  if (btn) btn.addEventListener('click', () => { submitSupporterUnlock(); });
  if (input) {
    input.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') {
        e.preventDefault();
        submitSupporterUnlock();
      }
    });
  }
}

function setupStorageSync() {
  let timer = null;
  chrome.storage.onChanged.addListener((changes, area) => {
    if (area !== 'local') return;
    if (!changes[CONFIG.STORAGE_KEYS.VIDEOS] && !changes[CONFIG.STORAGE_KEYS.DELETED]) return;
    clearTimeout(timer);
    timer = setTimeout(() => { displayVideos(); }, 80);
  });
}

// ============================================
// INITIALIZATION
// ============================================
async function init() {
  try {
    DOMCache.init();

    chrome.storage.local.get({ [CONFIG.STORAGE_KEYS.SOUND]: true }, (data) => {
      AppState.soundEnabled = data[CONFIG.STORAGE_KEYS.SOUND];
      updateSoundIcon();
    });

    setupSoundToggle();
    setupSearch();
    setupModal();
    setupTrashActions();
    setupVideoListHandlers();
    setupViewTabs();
    setupDragAutoScroll();
    setupDonateCallout();
    setupJobsMatchBanner();
    setupStorageSync();

    await displayVideos();

    // Give the layout a moment to settle, then maybe nudge for a donation
    setTimeout(maybeShowDonateCallout, 600);
  } catch (error) {
    console.error('Initialization error:', error);
  }
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', init);
} else {
  init();
}

window.addEventListener('unload', () => {
  AudioManager.cleanup();
});