(() => {
  'use strict';

  // Bumped: v3 stores group ids (with optional variant id) instead of raw paths.
  const STORAGE_KEY = 'arcana-fx-sets-v3';
  const LEGACY_KEY = 'arcana-fx-sets-v2';

  const els = {
    grid: document.getElementById('grid'),
    setGrid: document.getElementById('set-grid'),
    setEmpty: document.getElementById('set-empty'),
    empty: document.getElementById('empty'),
    search: document.getElementById('search'),
    categories: document.getElementById('categories'),
    status: document.getElementById('status'),
    statusText: document.getElementById('status-text'),
    refresh: document.getElementById('refresh-btn'),
    stop: document.getElementById('stop-btn'),
    stream: document.getElementById('stream-btn'),
    streamStop: document.getElementById('stream-stop-btn'),
    now: document.getElementById('now-btn'),
    nowCount: document.getElementById('now-count'),
    entityLabel: document.getElementById('entity-label'),
    countLabel: document.getElementById('count-label'),
    setSelect: document.getElementById('set-select'),
    newSet: document.getElementById('new-set-btn'),
    renameSet: document.getElementById('rename-set-btn'),
    deleteSet: document.getElementById('delete-set-btn'),
    setTitle: document.getElementById('set-title'),
    setCount: document.getElementById('set-count'),
    drawer: document.getElementById('now-drawer'),
    backdrop: document.getElementById('drawer-backdrop'),
    drawerClose: document.getElementById('drawer-close'),
    drawerStopAll: document.getElementById('drawer-stop-all'),
    activeList: document.getElementById('active-list'),
    activeEmpty: document.getElementById('active-empty'),
  };

  const state = {
    groups: [],
    groupsById: new Map(),
    pathToGroup: new Map(), // legacy path -> { groupId, variantId }
    categories: [],
    activeCategory: 'all',
    search: '',
    busy: false,
    streamOn: false,
    active: [],
    sets: [],
    currentSetId: null,
    lastVariantPerGroup: new Map(), // anti-immediate-repeat memory
  };

  state.sets = loadSets();
  if (!state.sets.length) state.sets = [{ id: uid(), name: 'Session Favorites', items: [] }];
  state.currentSetId = state.sets[0].id;

  function uid() { return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`; }
  function currentSet() { return state.sets.find((s) => s.id === state.currentSetId) || state.sets[0]; }

  function setStatus(kind, text) {
    els.status.classList.remove('ok', 'busy', 'err');
    if (kind) els.status.classList.add(kind);
    els.statusText.textContent = text;
  }

  function escapeHtml(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
  }

  function loadSets() {
    // Prefer v3. If absent but v2 exists, migrate later (after groups load).
    try {
      const raw = localStorage.getItem(STORAGE_KEY);
      if (raw) {
        const parsed = JSON.parse(raw);
        if (Array.isArray(parsed)) {
          return parsed.filter((s) => s && s.id && s.name && Array.isArray(s.items));
        }
      }
    } catch { /* fall through */ }
    return [];
  }

  function saveSets() { localStorage.setItem(STORAGE_KEY, JSON.stringify(state.sets)); }

  /**
   * Migrate v2 (path-based) favourites to v3 (group/variant-based) using
   * the path index from the freshly-loaded groups. Drops items that no
   * longer resolve (effect was renamed or removed from the share).
   */
  function migrateLegacySetsIfNeeded() {
    if (state.sets.some((s) => s.items && s.items.length)) return; // already populated
    if (localStorage.getItem(STORAGE_KEY)) return; // v3 already present
    let legacy;
    try {
      const raw = localStorage.getItem(LEGACY_KEY);
      if (!raw) return;
      legacy = JSON.parse(raw);
    } catch { return; }
    if (!Array.isArray(legacy) || !legacy.length) return;

    const migrated = legacy.map((s) => {
      const items = Array.isArray(s.paths) ? s.paths
        .map((p) => state.pathToGroup.get(p))
        .filter(Boolean)
        // de-dup: same group+variant pair shouldn't appear twice
        .filter((ref, i, arr) => arr.findIndex((r) => r.groupId === ref.groupId && r.variantId === ref.variantId) === i)
        : [];
      return { id: s.id || uid(), name: s.name || 'Set', items };
    }).filter((s) => s.name);

    if (migrated.length) {
      state.sets = migrated;
      state.currentSetId = state.sets[0].id;
      saveSets();
    }
  }

  async function fetchJson(url, opts) {
    const res = await fetch(url, opts);
    const text = await res.text();
    let body = null;
    if (text) { try { body = JSON.parse(text); } catch { body = { error: text }; } }
    if (!res.ok) {
      const err = new Error((body && body.error) || `${res.status} ${res.statusText}`);
      err.status = res.status;
      throw err;
    }
    return body || {};
  }

  function renderCategories() {
    const all = ['all', ...state.categories];
    els.categories.innerHTML = all.map((c) => {
      const active = state.activeCategory === c ? ' active' : '';
      const label = c === 'all' ? 'All' : c;
      return `<button class="chip${active}" data-cat="${escapeHtml(c)}" type="button">${escapeHtml(label)}</button>`;
    }).join('');
  }

  function groupMatches(group, q) {
    if (!q) return true;
    const variantNames = group.variants.map((v) => v.name).join(' ');
    const variantPaths = group.variants.flatMap((v) => v.allPaths || []).join(' ');
    const tagText = (group.tags || []).join(' ');
    const haystack = `${group.name} ${group.category} ${tagText} ${variantNames} ${variantPaths}`
      .replace(/[/.\\_-]+/g, ' ')
      .toLowerCase();
    return haystack.includes(q);
  }

  function visibleGroups() {
    const q = state.search.trim().toLowerCase();
    return state.groups.filter((g) => {
      if (state.activeCategory !== 'all' && g.category !== state.activeCategory) return false;
      return groupMatches(g, q);
    }).slice(0, 240);
  }

  function groupInCurrentSet(groupId) {
    const set = currentSet();
    return set.items.some((it) => it.groupId === groupId);
  }

  function variantsButtons(group) {
    if (!group.hasNumberedVariants) return '';
    const buttons = group.variants
      .filter((v) => v.number != null)
      .map((v) => `<button class="variant-btn" type="button" data-action="play-variant" data-variant="${escapeHtml(v.id)}" title="Play take ${v.number}">${v.number}</button>`)
      .join('');
    return `<div class="variant-row">${buttons}</div>`;
  }

  function tile(group, { inSetView = false } = {}) {
    const inSet = groupInCurrentSet(group.id);
    const variantTagText = group.hasNumberedVariants ? `${group.variantCount} takes` : null;
    const tags = [
      group.category,
      group.isLoop ? 'LOOP' : null,
      variantTagText,
    ].filter(Boolean);
    const tagHtml = tags.map((t) => `<span class="tag${t === 'LOOP' ? ' tag-loop' : ''}">${escapeHtml(t)}</span>`).join('');
    return `
      <article class="tile${group.isLoop ? ' is-loop' : ''}" data-group-id="${escapeHtml(group.id)}">
        <button class="play-hit" type="button" data-action="play" title="Play ${escapeHtml(group.name)}">
          <div class="name">${escapeHtml(group.name)}${group.isLoop ? ' <span class="loop-glyph" aria-hidden="true">∞</span>' : ''}</div>
          <div class="meta">${tagHtml}</div>
        </button>
        ${variantsButtons(group)}
        <div class="tile-actions">
          ${inSetView
            ? `<button class="mini danger" data-action="remove-set" type="button">Remove</button>`
            : `<button class="mini ${inSet ? 'ok' : ''}" data-action="toggle-set" type="button">${inSet ? 'In set' : '+ Set'}</button>`}
        </div>
      </article>`;
  }

  function renderGrid() {
    const filtered = visibleGroups();
    els.empty.hidden = filtered.length !== 0;
    els.countLabel.textContent = `${state.groups.length} sounds · showing ${filtered.length}`;
    els.grid.innerHTML = filtered.map((g) => tile(g)).join('');
    renderSet();
  }

  function renderSetsSelect() {
    els.setSelect.innerHTML = state.sets.map((s) => `<option value="${escapeHtml(s.id)}">${escapeHtml(s.name)}</option>`).join('');
    els.setSelect.value = state.currentSetId;
  }

  function renderSet() {
    renderSetsSelect();
    const set = currentSet();
    const groups = set.items
      .map((it) => state.groupsById.get(it.groupId))
      .filter(Boolean);
    els.setTitle.textContent = set.name;
    els.setCount.textContent = `${groups.length} item${groups.length === 1 ? '' : 's'}`;
    els.setEmpty.hidden = groups.length > 0;
    els.setGrid.innerHTML = groups.map((g) => tile(g, { inSetView: true })).join('');
  }

  function renderActive() {
    els.nowCount.textContent = String(state.active.length);
    els.activeEmpty.hidden = state.active.length > 0;
    els.activeList.innerHTML = state.active.map((a) => `
      <div class="active-row${a.loop ? ' is-loop' : ''}">
        <div>
          <strong>${escapeHtml(a.name)}${a.loop ? ' <span class="loop-glyph">∞</span>' : ''}</strong>
          <span>${escapeHtml(a.category || '')} · ${Math.round((a.ageMs || 0) / 1000)}s${a.loop ? ' · looping' : ''}</span>
          ${a.error ? `<em>${escapeHtml(a.error)}</em>` : ''}
        </div>
        <button class="mini danger" data-stop-id="${escapeHtml(a.id)}">Stop</button>
      </div>`).join('');
  }

  async function loadConfig() {
    try {
      const cfg = await fetchJson('/api/config');
      if (cfg.mediaPlayer) els.entityLabel.textContent = cfg.mediaPlayer;
    } catch (err) { console.warn('config load failed', err); }
  }

  function indexGroups(groups) {
    state.groups = groups;
    state.groupsById = new Map(groups.map((g) => [g.id, g]));
    state.pathToGroup = new Map();
    for (const g of groups) {
      for (const v of g.variants) {
        for (const p of (v.allPaths || [])) {
          state.pathToGroup.set(p, { groupId: g.id, variantId: v.id });
        }
      }
    }
  }

  async function loadEffects({ force = false } = {}) {
    setStatus('busy', force ? 'Rescanning library…' : 'Loading effects…');
    try {
      const data = await fetchJson(force ? '/api/effects?refresh=1' : '/api/effects');
      indexGroups(Array.isArray(data.groups) ? data.groups : []);
      state.categories = Array.isArray(data.categories) ? data.categories : [];
      if (!state.categories.includes(state.activeCategory) && state.activeCategory !== 'all') state.activeCategory = 'all';
      migrateLegacySetsIfNeeded();
      renderCategories();
      renderGrid();
      setStatus('ok', `Ready — ${state.groups.length} sounds (${data.count} files)`);
    } catch (err) {
      console.error(err);
      setStatus('err', `Load failed: ${err.message}`);
    }
  }

  /**
   * Picks a variant for a group, biased away from the last one played from
   * the same group, so consecutive presses don't trigger the same take.
   */
  function pickVariantForGroup(group) {
    const variants = group.variants;
    if (!variants.length) return null;
    if (variants.length === 1) return variants[0];
    const last = state.lastVariantPerGroup.get(group.id);
    const pool = variants.filter((v) => v.id !== last);
    const picked = pool[Math.floor(Math.random() * pool.length)] || variants[0];
    state.lastVariantPerGroup.set(group.id, picked.id);
    return picked;
  }

  async function playGroup(groupId, variantId) {
    const group = state.groupsById.get(groupId);
    if (!group) { setStatus('err', 'Group not found'); return; }
    let chosenVariantId = variantId;
    if (!chosenVariantId) {
      const picked = pickVariantForGroup(group);
      if (!picked) { setStatus('err', 'No variants'); return; }
      chosenVariantId = picked.id;
    } else {
      state.lastVariantPerGroup.set(groupId, chosenVariantId);
    }
    const label = group.name + (group.isLoop ? ' (loop)' : '');
    setStatus('busy', `Injecting — ${label}`);
    try {
      const res = await fetchJson('/api/play', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ groupId, variantId: chosenVariantId }),
      });
      state.active = (res.stream && res.stream.active) || state.active;
      renderActive();
      setStatus('ok', `Injected — ${(res.injected && res.injected.name) || label}`);
    } catch (err) {
      console.error(err);
      setStatus('err', `Play failed: ${err.message}`);
    }
  }

  async function startStream() {
    if (state.busy) return;
    state.busy = true;
    setStatus('busy', 'Starting continuous device stream…');
    try {
      await fetchJson('/api/stream/start', { method: 'POST' });
      state.streamOn = true;
      els.stream.textContent = 'Restart device stream';
      setStatus('ok', 'Device stream running — clicks will mix instead of replacing playback');
    } catch (err) {
      console.error(err);
      setStatus('err', `Stream start failed: ${err.message}`);
    } finally { state.busy = false; }
  }

  async function stopDeviceStream() {
    setStatus('busy', 'Stopping device stream…');
    try {
      await fetchJson('/api/stream/stop', { method: 'POST' });
      state.streamOn = false;
      state.active = [];
      els.stream.textContent = 'Start device stream';
      renderActive();
      setStatus('ok', 'Device stream stopped');
    } catch (err) { setStatus('err', `Stop failed: ${err.message}`); }
  }

  async function stopEffects() {
    try {
      const res = await fetchJson('/api/stop', { method: 'POST' });
      state.active = (res.stream && res.stream.active) || [];
      renderActive();
      setStatus('ok', 'Stopped all injected effects');
    } catch (err) { setStatus('err', `Stop failed: ${err.message}`); }
  }

  async function refreshActive() {
    try {
      const res = await fetchJson('/api/stream/status');
      state.active = (res.stream && res.stream.active) || [];
      renderActive();
    } catch { /* status polling is best-effort */ }
  }

  function toggleSet(groupId) {
    const set = currentSet();
    const idx = set.items.findIndex((it) => it.groupId === groupId);
    if (idx >= 0) set.items.splice(idx, 1);
    else set.items.push({ groupId });
    saveSets();
    renderGrid();
  }

  function removeFromSet(groupId) {
    const set = currentSet();
    set.items = set.items.filter((it) => it.groupId !== groupId);
    saveSets();
    renderGrid();
  }

  function newSet() {
    const name = prompt('Set name?', 'New Encounter');
    if (!name) return;
    const set = { id: uid(), name: name.trim(), items: [] };
    state.sets.push(set);
    state.currentSetId = set.id;
    saveSets();
    renderGrid();
  }

  function renameSet() {
    const set = currentSet();
    const name = prompt('Rename set:', set.name);
    if (!name) return;
    set.name = name.trim();
    saveSets();
    renderGrid();
  }

  function deleteSet() {
    if (state.sets.length === 1) return alert('Keep at least one set.');
    const set = currentSet();
    if (!confirm(`Delete set "${set.name}"?`)) return;
    state.sets = state.sets.filter((s) => s.id !== set.id);
    state.currentSetId = state.sets[0].id;
    saveSets();
    renderGrid();
  }

  function openDrawer() { els.drawer.removeAttribute('aria-hidden'); els.backdrop.hidden = false; refreshActive(); }
  function closeDrawer() { els.drawer.setAttribute('aria-hidden', 'true'); els.backdrop.hidden = true; }

  function gridClick(e) {
    const action = e.target.closest('[data-action]');
    const tileEl = e.target.closest('.tile');
    if (!action || !tileEl) return;
    const groupId = tileEl.dataset.groupId;
    if (!groupId) return;
    const a = action.dataset.action;
    if (a === 'play') playGroup(groupId);
    else if (a === 'play-variant') playGroup(groupId, action.dataset.variant);
    else if (a === 'toggle-set') toggleSet(groupId);
    else if (a === 'remove-set') removeFromSet(groupId);
  }

  els.grid.addEventListener('click', gridClick);
  els.setGrid.addEventListener('click', gridClick);
  els.categories.addEventListener('click', (e) => {
    const btn = e.target.closest('.chip'); if (!btn) return;
    state.activeCategory = btn.dataset.cat || 'all'; renderCategories(); renderGrid();
  });
  let searchTimer = null;
  els.search.addEventListener('input', () => {
    clearTimeout(searchTimer);
    searchTimer = setTimeout(() => { state.search = els.search.value; renderGrid(); }, 80);
  });
  els.refresh.addEventListener('click', () => loadEffects({ force: true }));
  els.stop.addEventListener('click', stopEffects);
  els.stream.addEventListener('click', startStream);
  els.streamStop.addEventListener('click', stopDeviceStream);
  els.drawerStopAll.addEventListener('click', stopEffects);
  els.now.addEventListener('click', openDrawer);
  els.drawerClose.addEventListener('click', closeDrawer);
  els.backdrop.addEventListener('click', closeDrawer);
  els.setSelect.addEventListener('change', () => { state.currentSetId = els.setSelect.value; renderGrid(); });
  els.newSet.addEventListener('click', newSet);
  els.renameSet.addEventListener('click', renameSet);
  els.deleteSet.addEventListener('click', deleteSet);
  els.activeList.addEventListener('click', async (e) => {
    const btn = e.target.closest('[data-stop-id]'); if (!btn) return;
    await fetchJson('/api/play/stop', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: btn.dataset.stopId }) });
    refreshActive();
  });

  loadConfig();
  loadEffects();
  renderSetsSelect();
  renderActive();
  setInterval(refreshActive, 1500);
})();