(() => {
  'use strict';

  const STORAGE_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 = {
    effects: [],
    byPath: new Map(),
    categories: [],
    activeCategory: 'all',
    search: '',
    busy: false,
    streamOn: false,
    active: [],
    sets: loadSets(),
    currentSetId: null,
  };

  if (!state.sets.length) state.sets = [{ id: uid(), name: 'Session Favorites', paths: [] }];
  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() {
    try {
      const parsed = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
      return Array.isArray(parsed) ? parsed.filter((s) => s && s.id && s.name && Array.isArray(s.paths)) : [];
    } catch { return []; }
  }

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

  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 visibleEffects() {
    const q = state.search.trim().toLowerCase();
    return state.effects.filter((e) => {
      if (state.activeCategory !== 'all' && e.category !== state.activeCategory) return false;
      if (!q) return true;
      const haystack = `${e.name} ${e.category} ${e.type} ${e.path.replace(/[/.\\_-]+/g, ' ')}`.toLowerCase();
      return haystack.includes(q);
    }).slice(0, 240);
  }

  function tile(effect, { inSetView = false } = {}) {
    const set = currentSet();
    const inSet = set.paths.includes(effect.path);
    return `
      <article class="tile" data-path="${escapeHtml(effect.path)}">
        <button class="play-hit" type="button" data-action="play" title="Play ${escapeHtml(effect.name)}">
          <div class="name">${escapeHtml(effect.name)}</div>
          <div class="meta">
            <span class="tag">${escapeHtml(effect.category)}</span>
            <span class="tag">${escapeHtml(effect.type.toUpperCase())}</span>
          </div>
        </button>
        <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 = visibleEffects();
    els.empty.hidden = filtered.length !== 0;
    els.countLabel.textContent = `${state.effects.length} effects · showing ${filtered.length}`;
    els.grid.innerHTML = filtered.map((e) => tile(e)).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 effects = set.paths.map((p) => state.byPath.get(p)).filter(Boolean);
    els.setTitle.textContent = set.name;
    els.setCount.textContent = `${effects.length} item${effects.length === 1 ? '' : 's'}`;
    els.setEmpty.hidden = effects.length > 0;
    els.setGrid.innerHTML = effects.map((e) => tile(e, { 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">
        <div>
          <strong>${escapeHtml(a.name)}</strong>
          <span>${escapeHtml(a.category)} · ${Math.round((a.ageMs || 0) / 1000)}s</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); }
  }

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

  async function play(effectPath) {
    setStatus('busy', `Injecting — ${effectPath.split('/').pop()}`);
    try {
      const res = await fetchJson('/api/play', {
        method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ path: effectPath }),
      });
      state.active = (res.stream && res.stream.active) || state.active;
      renderActive();
      setStatus('ok', `Injected — ${(res.injected && res.injected.name) || effectPath}`);
    } 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(effectPath) {
    const set = currentSet();
    const idx = set.paths.indexOf(effectPath);
    if (idx >= 0) set.paths.splice(idx, 1); else set.paths.push(effectPath);
    saveSets();
    renderGrid();
  }

  function removeFromSet(effectPath) {
    const set = currentSet();
    set.paths = set.paths.filter((p) => p !== effectPath);
    saveSets();
    renderGrid();
  }

  function newSet() {
    const name = prompt('Set name?', 'New Encounter');
    if (!name) return;
    const set = { id: uid(), name: name.trim(), paths: [] };
    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 path = tileEl.dataset.path;
    if (action.dataset.action === 'play') play(path);
    if (action.dataset.action === 'toggle-set') toggleSet(path);
    if (action.dataset.action === 'remove-set') removeFromSet(path);
  }

  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);
})();