script.js

/* global idb, Fuse, Sortable, mammoth, SongBinderSupabase */
// ==== THEME HANDLING ====
function updateLogoForTheme(theme) {
    const nextSrc = theme === 'light' ? 'logoLight' : 'logoDark';
    document.querySelectorAll('img[data-logo-light][data-logo-dark]').forEach((logo) => {
        const src = logo.dataset[nextSrc];
        if (src) {
            logo.setAttribute('src', src);
        }
    });
}

function applyTheme(theme) {
    const nextTheme = theme === 'light' ? 'light' : 'dark';
    document.documentElement.dataset.theme = nextTheme;
    updateLogoForTheme(nextTheme);
}

document.addEventListener('DOMContentLoaded', function() {
    // Initialize theme with strict dark/light only
    let savedTheme = localStorage.getItem('theme');
    if (savedTheme !== 'dark' && savedTheme !== 'light') {
        savedTheme = 'dark';
        localStorage.setItem('theme', 'dark');
    }
    applyTheme(savedTheme);
    InstallPrompt.init();
});

async function ensurePersistentStorage() {
  try {
    if (!navigator.storage || !navigator.storage.persist) return;
    const alreadyPersisted = await navigator.storage.persisted?.();
    if (alreadyPersisted) return;
    const granted = await navigator.storage.persist();
    if (!granted) {
      console.warn('Persistent storage request was denied; data may be evicted under pressure.');
    }
  } catch (err) {
    console.warn('Unable to request persistent storage', err);
  }
}
ensurePersistentStorage();

// Register Service Worker without inline scripts (for CSP)
try {
  if ('serviceWorker' in navigator) {
    const showSwUpdateBanner = (registration) => {
      if (document.getElementById('sw-update-banner')) return;
      const banner = document.createElement('div');
      banner.id = 'sw-update-banner';
      banner.className = 'sw-update-banner';
      banner.innerHTML = `
        <span>Update available.</span>
        <button type="button" class="btn sw-update-btn">Reload</button>
      `;
      banner.querySelector('.sw-update-btn')?.addEventListener('click', () => {
        try { registration.waiting?.postMessage({ type: 'SKIP_WAITING' }); } catch {}
      });
      document.body.appendChild(banner);
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.addEventListener('controllerchange', () => {
          window.location.reload();
        });
      }
    };
    const swUrl = (() => {
      try {
        return new URL('sw.js', window.location.href).href;
      } catch {
        return 'sw.js';
      }
    })();
    window.addEventListener('load', () => {
      navigator.serviceWorker.register(swUrl).then((registration) => {
        if (registration.waiting) {
          showSwUpdateBanner(registration);
        }
        registration.addEventListener('updatefound', () => {
          const worker = registration.installing;
          if (!worker) return;
          worker.addEventListener('statechange', () => {
            if (worker.state === 'installed' && navigator.serviceWorker.controller) {
              showSwUpdateBanner(registration);
            }
          });
        });
      }).catch(() => {});
    });
  }
} catch {}

// Small utility
function debounce(fn, delay = 200) {
  let t;
  return function debounced(...args) {
    clearTimeout(t);
    t = setTimeout(() => fn.apply(this, args), delay);
  };
}

// Basic HTML escaping to prevent XSS when injecting user text
function escapeHTML(s) {
  return String(s == null ? '' : s)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

function safeJSONParse(value, fallback) {
  if (!value) return fallback;
  try {
    return JSON.parse(value);
  } catch {
    return fallback;
  }
}

function safeParseFromStorage(key, fallback) {
  let raw = null;
  try {
    raw = localStorage.getItem(key);
  } catch {
    return { value: fallback, valid: false, raw: null };
  }
  if (!raw) return { value: fallback, valid: true, raw };
  try {
    return { value: JSON.parse(raw), valid: true, raw };
  } catch {
    return { value: fallback, valid: false, raw };
  }
}

const UI_TRANSITION_MS = 180;

function navigateWithTransition(url) {
  document.body?.classList.add('page-transitioning');
  window.setTimeout(() => {
    window.location.href = url;
  }, UI_TRANSITION_MS);
}

function showAnimatedModal(modal) {
  if (!modal) return;
  clearTimeout(modal.__hideTimer);
  modal.style.display = 'flex';
  modal.classList.remove('is-closing');
  requestAnimationFrame(() => {
    modal.classList.add('is-visible');
  });
}

function hideAnimatedModal(modal) {
  if (!modal) return;
  modal.classList.remove('is-visible');
  modal.classList.add('is-closing');
  clearTimeout(modal.__hideTimer);
  modal.__hideTimer = window.setTimeout(() => {
    if (modal.classList.contains('is-visible')) return;
    modal.style.display = 'none';
    modal.classList.remove('is-closing');
  }, UI_TRANSITION_MS);
}

function setGlobalBusyIndicator(isVisible, message = 'Syncing with cloud...') {
  const indicator = document.getElementById('global-busy-indicator');
  const text = document.getElementById('global-busy-text');
  if (!indicator) return;
  clearTimeout(indicator.__hideTimer);
  if (text) text.textContent = message;
  if (isVisible) {
    indicator.hidden = false;
    requestAnimationFrame(() => {
      indicator.classList.add('is-visible');
    });
    return;
  }
  indicator.classList.remove('is-visible');
  indicator.__hideTimer = window.setTimeout(() => {
    if (indicator.classList.contains('is-visible')) return;
    indicator.hidden = true;
  }, UI_TRANSITION_MS);
}

const InstallPrompt = (() => {
  let deferredPrompt = null;
  let dismissedForSession = false;

  const ui = {
    banner: () => document.getElementById('install-banner'),
    title: () => document.getElementById('install-banner-title'),
    text: () => document.getElementById('install-banner-text'),
    action: () => document.getElementById('install-banner-action'),
    dismiss: () => document.getElementById('install-banner-dismiss'),
  };

  function isInstalled() {
    try {
      return window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true;
    } catch {
      return false;
    }
  }

  function isIosSafari() {
    const ua = window.navigator.userAgent || '';
    const isIos = /iphone|ipad|ipod/i.test(ua);
    const isSafari = /safari/i.test(ua) && !/crios|fxios|edgios|chrome|android/i.test(ua);
    return isIos && isSafari;
  }

  function showBanner({ title, text, actionLabel, manual = false }) {
    const banner = ui.banner();
    const action = ui.action();
    if (!banner || !action || dismissedForSession || isInstalled()) return;
    ui.title().textContent = title;
    ui.text().textContent = text;
    action.textContent = actionLabel;
    action.dataset.manual = manual ? '1' : '0';
    banner.hidden = false;
    requestAnimationFrame(() => {
      banner.classList.add('is-visible');
    });
  }

  function hideBanner() {
    const banner = ui.banner();
    if (!banner) return;
    banner.classList.remove('is-visible');
    window.setTimeout(() => {
      if (banner.classList.contains('is-visible')) return;
      banner.hidden = true;
    }, UI_TRANSITION_MS);
  }

  async function handleInstallAction() {
    if (isInstalled()) {
      hideBanner();
      return;
    }
    if (deferredPrompt) {
      const promptEvent = deferredPrompt;
      deferredPrompt = null;
      await promptEvent.prompt();
      try {
        await promptEvent.userChoice;
      } catch {}
      if (!isInstalled()) {
        showDefaultBanner();
      }
      return;
    }
    if (isIosSafari()) {
      showBanner({
        title: 'Install SongBinder',
        text: 'Tap Share, then choose Add to Home Screen.',
        actionLabel: 'Got it',
        manual: true,
      });
      return;
    }
    showBanner({
      title: 'Install SongBinder',
      text: 'Use your browser menu to install this app on your device.',
      actionLabel: 'Got it',
      manual: true,
    });
  }

  function showDefaultBanner() {
    if (deferredPrompt) {
      showBanner({
        title: 'Install SongBinder',
        text: 'Add SongBinder to your device for a faster app-like experience.',
        actionLabel: 'Install',
      });
      return;
    }
    if (isIosSafari()) {
      showBanner({
        title: 'Install SongBinder',
        text: 'Tap Share, then choose Add to Home Screen.',
        actionLabel: 'How to install',
        manual: true,
      });
      return;
    }
    showBanner({
      title: 'Install SongBinder',
      text: 'Use your browser menu to install this app on your device.',
      actionLabel: 'How to install',
      manual: true,
    });
  }

  function init() {
    ui.action()?.addEventListener('click', () => {
      handleInstallAction().catch((error) => {
        console.warn('Install prompt failed', error);
      });
    });
    ui.dismiss()?.addEventListener('click', () => {
      dismissedForSession = true;
      hideBanner();
    });

    window.addEventListener('beforeinstallprompt', (event) => {
      event.preventDefault();
      deferredPrompt = event;
      showDefaultBanner();
    });

    window.addEventListener('appinstalled', () => {
      deferredPrompt = null;
      hideBanner();
    });

    if (!isInstalled()) {
      window.setTimeout(() => {
        if (!deferredPrompt && !dismissedForSession && !isInstalled()) {
          showDefaultBanner();
        }
      }, 900);
    }
  }

  return { init };
})();

const AuthGate = (() => {
  const ACCESS_MODE_KEY = 'songbinderAccessMode';
  let client = null;
  let appRef = null;
  let started = false;
  let currentSession = null;
  let isAuthReady = false;

  const ui = {
    splash: () => document.getElementById('startup-splash'),
    landing: () => document.getElementById('landing-screen'),
    appShell: () => document.getElementById('app-shell'),
    signInBtn: () => document.getElementById('google-signin-btn'),
    offlineBtn: () => document.getElementById('continue-offline-btn'),
    feedback: () => document.getElementById('auth-feedback'),
    logoutBtn: () => document.getElementById('logout-btn'),
  };

  function isSupabaseConfigured() {
    return !!window.SongBinderSupabase?.isConfigured?.();
  }

  function getRedirectUrl() {
    return window.SongBinderSupabase?.getRedirectUrl?.() || window.location.href;
  }

  function getStoredMode() {
    try {
      return localStorage.getItem(ACCESS_MODE_KEY) || '';
    } catch {
      return '';
    }
  }

  function setStoredMode(mode) {
    try {
      if (mode) localStorage.setItem(ACCESS_MODE_KEY, mode);
      else localStorage.removeItem(ACCESS_MODE_KEY);
    } catch {}
  }

  function setFeedback(message, type = 'info') {
    const feedback = ui.feedback();
    if (!feedback) return;
    feedback.textContent = message;
    feedback.dataset.state = type;
  }

  function setSession(session) {
    currentSession = session || null;
  }

  function setAuthReady(ready) {
    isAuthReady = !!ready;
    const splash = ui.splash();
    document.body?.classList.toggle('auth-resolving', !ready);
    if (splash) splash.hidden = !!ready;
  }

  function setLoading(isLoading) {
    const signInBtn = ui.signInBtn();
    const offlineBtn = ui.offlineBtn();
    if (signInBtn) signInBtn.disabled = !!isLoading;
    if (offlineBtn) offlineBtn.disabled = !!isLoading;
  }

  function updateLogoutButton(mode, session) {
    const logoutBtn = ui.logoutBtn();
    if (!logoutBtn) return;
    if (mode !== 'authenticated' || !session?.user) {
      logoutBtn.hidden = true;
      return;
    }
    logoutBtn.hidden = false;
    logoutBtn.addEventListener('click', async () => {
      if (!client) return;
      setLoading(true);
      try {
        await client.auth.signOut();
        setSession(null);
        setStoredMode('');
        window.location.reload();
      } catch (err) {
        console.error('Sign out failed', err);
        setFeedback('Unable to sign out right now.', 'error');
      } finally {
        setLoading(false);
      }
    });
  }

  async function startApp(mode, session = null) {
    setSession(session);
    setAuthReady(true);
    if (started) {
      updateLogoutButton(mode, session);
      return;
    }
    started = true;
    updateLogoutButton(mode, session);
    const landing = ui.landing();
    const shell = ui.appShell();
    if (landing) landing.hidden = true;
    if (shell) shell.hidden = false;
    if (appRef && typeof appRef.init === 'function') {
      await appRef.init();
    }
  }

  function showLanding(message, type = 'info') {
    setAuthReady(true);
    updateLogoutButton('', null);
    const landing = ui.landing();
    const shell = ui.appShell();
    if (shell) shell.hidden = true;
    if (landing) landing.hidden = false;
    setFeedback(message, type);
  }

  function ensureClient() {
    if (client || !isSupabaseConfigured()) return client;
    client = window.SongBinderSupabase?.getClient?.() || null;
    return client;
  }

  async function continueOffline() {
    setStoredMode('offline');
    await startApp('offline');
  }

  async function signInWithGoogle() {
    const supabaseClient = ensureClient();
    if (!supabaseClient) {
      setFeedback('Google sign-in is not configured yet. Generate env.js from SUPABASE_URL and SUPABASE_ANON_KEY.', 'error');
      return;
    }
    setLoading(true);
    setFeedback('Redirecting to Google sign-in…');
    try {
      const { error } = await supabaseClient.auth.signInWithOAuth({
        provider: 'google',
        options: {
          redirectTo: getRedirectUrl(),
        },
      });
      if (error) throw error;
    } catch (err) {
      console.error('Google sign-in failed', err);
      setFeedback('Unable to start Google sign-in. Check your Supabase config and redirect URL.', 'error');
      setLoading(false);
    }
  }

  async function bootstrap(app) {
    appRef = app;
    setAuthReady(false);
    ui.signInBtn()?.addEventListener('click', () => {
      signInWithGoogle();
    });
    ui.offlineBtn()?.addEventListener('click', () => {
      continueOffline();
    });

    if (!isSupabaseConfigured()) {
      ui.signInBtn()?.setAttribute('disabled', 'disabled');
      if (getStoredMode() === 'offline') {
        await startApp('offline');
        return;
      }
      showLanding('Google sign-in is available once env.js is generated from SUPABASE_URL and SUPABASE_ANON_KEY.');
      return;
    }

    const supabaseClient = ensureClient();
    supabaseClient.auth.onAuthStateChange((_event, session) => {
      if (!isAuthReady) {
        setSession(session);
        return;
      }
      setSession(session);
      if (session) {
        setStoredMode('authenticated');
        startApp('authenticated', session);
        return;
      }
      if (getStoredMode() === 'offline') {
        startApp('offline');
        return;
      }
      showLanding('Sign in with Google or continue offline on this device.');
    });

    try {
      const { data, error } = await supabaseClient.auth.getSession();
      if (error) throw error;
      if (data?.session) {
        setSession(data.session);
        setStoredMode('authenticated');
        await startApp('authenticated', data.session);
        return;
      }
    } catch (err) {
      console.error('Session bootstrap failed', err);
      showLanding('Sign-in is unavailable right now. You can still continue offline.', 'error');
      return;
    }

    if (getStoredMode() === 'offline') {
      await startApp('offline');
      return;
    }

    showLanding('Sign in with Google or continue offline on this device.');
  }

  return {
    bootstrap,
    getSession: () => currentSession,
    getUser: () => currentSession?.user || null,
    isAuthenticated: () => !!currentSession?.user,
  };
})();

// ==== DB MODULE (IndexedDB via idb) ====
/* global idb */
const DB = (() => {
  const DB_NAME = 'hrr-setlist-db';
  const DB_VERSION = 2; // bump when schema changes
  const REQUIRED_STORES = ['songs', 'setlists', 'meta'];
  let _db;
  let _dbWasReset = false;

  const hasRequiredStores = (db) =>
    REQUIRED_STORES.every((name) => db.objectStoreNames.contains(name));

  const upgradeSchema = (db) => {
    if (!db.objectStoreNames.contains('songs')) {
      const songs = db.createObjectStore('songs', { keyPath: 'id' });
      if (songs.createIndex) songs.createIndex('title', 'title', { unique: false });
    }
    if (!db.objectStoreNames.contains('setlists')) {
      const setlists = db.createObjectStore('setlists', { keyPath: 'id' });
      if (setlists.createIndex) setlists.createIndex('name', 'name', { unique: false });
    }
    if (!db.objectStoreNames.contains('meta')) {
      db.createObjectStore('meta'); // for flags like 'migrated'
    }
  };

  async function backupExistingData(db) {
    const backup = { songs: [], setlists: [] };
    try {
      const storeNames = Array.from(db.objectStoreNames);
      if (storeNames.includes('songs')) backup.songs = await db.getAll('songs');
      if (storeNames.includes('setlists')) backup.setlists = await db.getAll('setlists');
    } catch (e) {
      console.warn('Failed to backup data before DB reset', e);
    }
    return backup;
  }

  async function restoreBackup(db, backup) {
    if (!backup) return;
    try {
      if (Array.isArray(backup.songs) && backup.songs.length) {
        const tx = db.transaction('songs', 'readwrite');
        for (const song of backup.songs) await tx.store.put(song);
        await tx.done;
      }
    } catch (e) {
      console.warn('Failed to restore songs after DB reset', e);
    }
    try {
      if (Array.isArray(backup.setlists) && backup.setlists.length) {
        const tx = db.transaction('setlists', 'readwrite');
        for (const setlist of backup.setlists) await tx.store.put(setlist);
        await tx.done;
      }
    } catch (e) {
      console.warn('Failed to restore setlists after DB reset', e);
    }
  }

  async function open() {
    if (_db) return _db;
    _db = await idb.openDB(DB_NAME, DB_VERSION, {
      upgrade(db) {
        upgradeSchema(db);
      }
    });
    if (!hasRequiredStores(_db)) {
      const backup = await backupExistingData(_db);
      try {
        _db.close();
        await idb.deleteDB(DB_NAME);
        _db = await idb.openDB(DB_NAME, DB_VERSION, { upgrade: upgradeSchema });
        _dbWasReset = true;
      } catch (e) {
        console.error('Failed to repair DB', e);
      }
      try {
        await restoreBackup(_db, backup);
      } catch (e) {
        console.warn('Failed to restore DB backup', e);
      }
    }
    return _db;
  }

  async function getMeta(key) {
    const db = await open();
    return db.get('meta', key);
  }
  async function setMeta(key, val) {
    const db = await open();
    return db.put('meta', val, key);
  }

  // Songs
  async function getAllSongs() {
    const db = await open();
    return db.getAll('songs');
  }
  async function putSong(song) {
    const db = await open();
    return db.put('songs', song);
  }
  async function putSongs(songs) {
    const db = await open();
    const tx = db.transaction('songs', 'readwrite');
    for (const s of songs) await tx.store.put(s);
    await tx.done;
  }
  async function deleteSong(id) {
    const db = await open();
    return db.delete('songs', id);
  }
  async function clearSongs() {
    const db = await open();
    const tx = db.transaction('songs', 'readwrite');
    await tx.store.clear();
    await tx.done;
  }

  // Setlists
  async function getAllSetlists() {
    const db = await open();
    return db.getAll('setlists');
  }
  async function getSetlist(id) {
    const db = await open();
    return db.get('setlists', id);
  }
  async function putSetlist(setlist) {
    const db = await open();
    return db.put('setlists', setlist);
  }
  async function deleteSetlist(id) {
    const db = await open();
    return db.delete('setlists', id);
  }

  return {
    getMeta, setMeta,
    getAllSongs, putSong, putSongs, deleteSong, clearSongs,
    getAllSetlists, getSetlist, putSetlist, deleteSetlist,
    wasReset: () => _dbWasReset,
  };
})();

// ==== SETLIST MANAGER MODULE 
function normalizeSmartQuotes(input) {
    return String(input == null ? '' : input)
        .replace(/[\u2018\u2019\u201A\u201B]/g, "'")
        .replace(/[\u201C\u201D\u2033]/g, '"')
        .replace(/[\u2013\u2014\u2212]/g, '-');
}

function normalizeSetlistName(name) {
    let trimmed = normalizeSmartQuotes(name).replace(/\.[^.\s]+$/, '');
    trimmed = trimmed.replace(/_/g, ' ');
    trimmed = trimmed.replace(/\s+/g, ' ');
    trimmed = trimmed.replace(/[\u0000-\u001F\u007F]/g, '');
    trimmed = trimmed.trim();
    if (!trimmed) return 'Untitled Setlist';
    trimmed = trimmed.replace(/([a-z])([A-Z])/g, '$1 $2');
    trimmed = trimmed.replace(/\w\S*/g, (word) =>
        word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
    );
    return trimmed;
}

function normalizeSongTitleValue(title) {
    let t = normalizeSmartQuotes(title).replace(/\.[^.\s]+$/, '');
    t = t.replace(/_/g, ' ');
    t = t.replace(/\s+/g, ' ');
    t = t.replace(/[\u0000-\u001F\u007F]/g, '');
    t = t.trim();
    if (!t) return '';
    t = t.replace(/([a-z])([A-Z])/g, '$1 $2');
    t = t.replace(/\w\S*/g, (word) =>
        word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
    );
    return t;
}

function stripDuplicateTitleFromLyrics(title, text) {
    const normalizedTitle = String(title || '').trim().replace(/\s+/g, ' ').toLowerCase();
    if (!normalizedTitle) return String(text || '').replace(/\r\n?/g, '\n');
    const lines = String(text || '').replace(/\r\n?/g, '\n').split('\n');
    let idx = 0;
    while (idx < lines.length && lines[idx].trim() === '') idx++;
    if (idx < lines.length) {
        const first = lines[idx].trim().replace(/\s+/g, ' ').toLowerCase();
        if (first === normalizedTitle) {
            lines.splice(idx, 1);
            while (idx < lines.length && lines[idx].trim() === '') {
                lines.splice(idx, 1);
            }
        }
    }
    return lines.join('\n');
}

function normalizeLyricsBlock(title, lyrics) {
    const normalized = String(lyrics || '')
        .replace(/\r\n?/g, '\n')
        .replace(/\u00A0/g, ' ')
        .replace(/[ \t]+\n/g, '\n')
        .replace(/\n{3,}/g, '\n\n')
        .trimEnd();
    return stripDuplicateTitleFromLyrics(title, normalized);
}

// ==== TOASTS ====
function showToast(message, type = 'success', timeout = 2500) {
  const toast = document.createElement('div');
  toast.className = `toast toast-${type} show`;
  toast.textContent = message;
  document.body.appendChild(toast);
  requestAnimationFrame(() => {
    toast.style.opacity = '1';
    toast.style.transform = 'translateX(0)';
  });
  setTimeout(() => {
    toast.style.opacity = '0';
    toast.style.transform = 'translateX(100%)';
    setTimeout(() => toast.remove(), 300);
  }, timeout);
}

function confirmDialog(message, onYes, onNo) {
  const modal = document.createElement('div');
  modal.className = 'modal';
  modal.style.display = 'flex';
  const content = document.createElement('div');
  content.className = 'modal-content';
  const h2 = document.createElement('h2');
  h2.textContent = 'Confirm';
  const p = document.createElement('p');
  p.textContent = String(message || 'Are you sure?');
  const actions = document.createElement('div');
  actions.className = 'modal-actions';
  const yes = document.createElement('button'); yes.className = 'btn'; yes.id = 'confirm-yes'; yes.textContent = 'Yes';
  const no = document.createElement('button'); no.className = 'btn'; no.id = 'confirm-no'; no.textContent = 'No';
  actions.appendChild(yes); actions.appendChild(no);
  content.appendChild(h2); content.appendChild(p); content.appendChild(actions);
  modal.appendChild(content);
  document.body.appendChild(modal);
  yes.onclick = () => { modal.remove(); onYes && onYes(); };
  no.onclick = () => { modal.remove(); onNo && onNo(); };
}

// Toast with optional action button for undo
function showActionToast(message, { actionText, onAction, timeout = 4000, type = 'info' } = {}) {
  const toast = document.createElement('div');
  toast.className = `toast toast-${type} show`;
  const span = document.createElement('span');
  span.textContent = String(message || '');
  toast.appendChild(span);
  if (actionText && typeof onAction === 'function') {
    const btn = document.createElement('button');
    btn.className = 'btn toast-action';
    btn.type = 'button';
    btn.textContent = actionText;
    btn.addEventListener('click', () => { try { onAction(); } finally { toast.remove(); } });
    toast.appendChild(btn);
  }
  document.body.appendChild(toast);
  requestAnimationFrame(() => { toast.style.opacity = '1'; toast.style.transform = 'translateX(0)'; });
  setTimeout(() => { toast.style.opacity = '0'; toast.style.transform = 'translateX(100%)'; setTimeout(() => toast.remove(), 300); }, timeout);
}

const SetlistsManager = (() => {
    let setlists = new Map();

    async function load() {
        try {
            const arr = await DB.getAllSetlists();
            const repaired = [];
            for (const obj of (arr || [])) {
                const fixed = { ...obj };
                // Repair missing or malformed fields from older local data
                if (!fixed || typeof fixed !== 'object') continue;
                if (!fixed.id) {
                    fixed.id = (Date.now().toString() + Math.random().toString(16).slice(2));
                    fixed.updatedAt = Date.now();
                    try { await DB.putSetlist(fixed); } catch {}
                }
                if (!Array.isArray(fixed.songs)) fixed.songs = [];
                repaired.push(fixed);
            }
            setlists = new Map(repaired.map(obj => [obj.id, obj]));
        } catch (error) {
            console.error('Failed loading setlists from DB', error);
            setlists = new Map();
        }
    }

    function save() { /* no-op; per-change writes to DB */ }

    function getAllSetlists() {
        return Array.from(setlists.values()).sort((a, b) => a.name.localeCompare(b.name));
    }

    function getSetlistById(id) {
        return setlists.get(id) || null;
    }

    function addSetlist(name, songIds = []) {
        const normalized = normalizeSetlistName(name);
        const existing = Array.from(setlists.values()).find(s => 
            s.name.toLowerCase() === normalized.toLowerCase()
        );
        let finalName = normalized;
        if (existing) {
            let counter = 1;
            while (Array.from(setlists.values()).find(s => 
                s.name.toLowerCase() === `${normalized} (${counter})`.toLowerCase()
            )) { counter++; }
            finalName = `${normalized} (${counter})`;
        }
        const setlist = {
            id: (Date.now().toString() + Math.random().toString(16).slice(2)), 
            name: finalName,
            songs: [...songIds],
            createdAt: Date.now(),
            updatedAt: Date.now()
        };
        setlists.set(setlist.id, setlist);
        DB.putSetlist(setlist);
        return setlist;
    }

    function renameSetlist(id, newName) {
        const setlist = setlists.get(id);
        if (setlist) {
            const normalized = normalizeSetlistName(newName);
            const existing = Array.from(setlists.values()).find(s => 
                s.id !== id && s.name.toLowerCase() === normalized.toLowerCase()
            );
            if (existing) throw new Error(`A setlist named "${normalized}" already exists`);
            setlist.name = normalized;
            setlist.updatedAt = Date.now();
            DB.putSetlist(setlist);
            return setlist;
        }
        return null;
    }

    function duplicateSetlist(id) {
        const orig = getSetlistById(id);
        if (orig) return addSetlist(orig.name + ' Copy', orig.songs);
        return null;
    }

    function deleteSetlist(id) {
        const deleted = setlists.delete(id);
        if (deleted) DB.deleteSetlist(id);
        return deleted;
    }

    function updateSetlistSongs(id, songIds) {
        const setlist = setlists.get(id);
        if (setlist) {
            setlist.songs = [...songIds];
            setlist.updatedAt = Date.now();
            DB.putSetlist(setlist);
            return setlist;
        }
        return null;
    }

    function addSongToSetlist(setlistId, songId) {
        const setlist = setlists.get(setlistId);
        if (setlist && !setlist.songs.includes(songId)) {
            setlist.songs.push(songId);
            setlist.updatedAt = Date.now();
            DB.putSetlist(setlist);
            return setlist;
        }
        return null;
    }

    function removeSongFromSetlist(setlistId, songId) {
        const setlist = setlists.get(setlistId);
        if (setlist) {
            const index = setlist.songs.indexOf(songId);
            if (index > -1) {
                setlist.songs.splice(index, 1);
                setlist.updatedAt = Date.now();
                DB.putSetlist(setlist);
                return setlist;
            }
        }
        return null;
    }

    function moveSongInSetlist(setlistId, songId, direction) {
        const setlist = setlists.get(setlistId);
        if (!setlist) return null;
        const currentIndex = setlist.songs.indexOf(songId);
        if (currentIndex === -1) return null;
        const newIndex = currentIndex + direction;
        if (newIndex < 0 || newIndex >= setlist.songs.length) return null;
        [setlist.songs[currentIndex], setlist.songs[newIndex]] = 
        [setlist.songs[newIndex], setlist.songs[currentIndex]];
        setlist.updatedAt = Date.now();
        DB.putSetlist(setlist);
        return setlist;
    }

   function importSetlistFromText(name, text, allSongs) {
    // Normalize and trim setlist name
    const normalizedName = String(name||'').trim();
    if (!normalizedName) { showToast('Setlist name cannot be empty.', 'error'); return null; }

    // Helpers for OCR cleanup and normalization
    const cleanLine = (s) => String(s||'')
      .replace(/[\u2018\u2019\u201A\u2032\u00B4]/g, "'")
      .replace(/[\u201C\u201D\u2033]/g, '"')
      .replace(/[\u2013\u2014\u2212]/g, '-')
      .replace(/[\u2022\u2023\u25E6\u2043\u2219\u00B7]/g, '') // bullets/middots
      .replace(/^\s*[•*\-–—]\s*/, '') // leading bullets/dashes
      .replace(/^\s*\d+[\).\:\-]?\s*/, '') // leading numbering
      .replace(/\s{2,}/g, ' ')
      .trim();
    const normalize = (s) => cleanLine(s)
      .normalize('NFD')
      .replace(/\p{Diacritic}+/gu, '')
      .toLowerCase()
      .replace(/[“”‘’]/g, '')
      .replace(/[^a-z0-9\s]/g, ' ')
      .replace(/\b0\b/g, 'o')
      .replace(/\b1\b/g, 'l')
      .replace(/\s{2,}/g, ' ')
      .trim();
    const isChordToken = (tok) => /^[A-G](#|b)?(maj|min|m|sus|add|dim|aug)?\d*(\/[A-G](#|b)?)?$/.test(tok);
    const isChordLine = (line) => {
      const toks = cleanLine(line).split(/\s+/).filter(Boolean);
      if (toks.length < 2 || toks.length > 8) return false;
      const chordCount = toks.filter(isChordToken).length;
      return chordCount >= Math.max(2, Math.ceil(toks.length * 0.6));
    };
    const isProbableTitle = (line) => {
      const t = cleanLine(line);
      if (!t) return false;
      if (t.length < 2 || t.length > 64) return false;
      const letters = (t.match(/[A-Za-z]/g)||[]).length;
      const digits = (t.match(/\d/g)||[]).length;
      const ratio = letters / Math.max(1, t.length);
      if (ratio < 0.35) return false;
      if (digits > letters) return false;
      if (isChordLine(t)) return false;
      return true;
    };

    // Build a search index with normalized titles alongside originals (no DB change)
    const indexed = (allSongs||[]).map(s => ({ item: s, title: s.title || '', _n: normalize(s.title||'') }));
    const fuse = new Fuse(indexed, {
        keys: [
          { name: 'title', weight: 0.65 },
          { name: '_n', weight: 0.35 }
        ],
        threshold: 0.45,
        includeScore: true,
        ignoreLocation: true,
        minMatchCharLength: 2,
        shouldSort: true,
    });

    // Split text into lines, filter likely titles, dedupe
    let lines = String(text||'').split(/\r?\n/)
      .map(cleanLine)
      .filter(Boolean)
      .filter(isProbableTitle);
    // Dedupe nearby duplicates
    const seen = new Set();
    lines = lines.filter(l => { const k = normalize(l); if (seen.has(k)) return false; seen.add(k); return true; });

    const songIds = [];
    const notFound = [];

    const tryMatch = (q) => {
      const results = fuse.search(q);
      if (!results.length) return null;
      const best = results[0];
      // Accept if reasonably close; calibrate using score and length
      if (best.score <= 0.5) return best.item.item.id;
      return null;
    };

    for (const line of lines) {
      // Try original, then normalized, then with common OCR digit->letter swaps
      const variants = [line, normalize(line), normalize(line).replace(/0/g,'o').replace(/1/g,'l').replace(/5/g,'s')];
      let matchedId = null;
      for (const v of variants) { matchedId = tryMatch(v); if (matchedId) break; }
      if (matchedId) songIds.push(matchedId); else notFound.push(line);
    }

    if (songIds.length === 0) { showToast('No matching songs found to import.', 'info'); return null; }

    // Add setlist with fuzzy matched songs
    let setlist;
    try {
        setlist = SetlistsManager.addSetlist(normalizedName, songIds);
    } catch (err) { showToast(err.message || 'Failed to create setlist.', 'error'); return null; }

    // Notify user of any missing songs
    if (notFound.length > 0) { showToast(`${notFound.length} titles not found.`, 'info', 3500); }

    return { setlist, imported: songIds.length, notFound };
}


    function exportSetlist(setlistId, allSongs, format = 'json') {
        const setlist = getSetlistById(setlistId);
        if (!setlist) return null;
        const songs = setlist.songs
            .map(songId => allSongs.find(s => s.id === songId))
            .filter(song => song !== undefined);
        switch (format) {
            case 'json':
                return JSON.stringify({ setlist, songs }, null, 2);
            case 'txt':
                return songs.map(song => song.title).join('\n');
            case 'csv': {
                const header = 'Title,Lyrics\n';
                const rows = songs.map(song => {
                    const t = String(song.title || '').replace(/"/g, '""');
                    const l = String(song.lyrics || '').replace(/"/g, '""');
                    return `"${t}","${l}"`;
                }).join('\n');
                return header + rows;
            }
            default:
                return null;
        }
    }

    // initial load triggered by app.init()

    return {
        getAllSetlists,
        getSetlistById,
        addSetlist,
        renameSetlist,
        duplicateSetlist,
        deleteSetlist,
        updateSetlistSongs,
        addSongToSetlist,
        removeSongFromSetlist,
        moveSongInSetlist,
        importSetlistFromText,
        exportSetlist,
        load,
        save,
    };
})();

document.addEventListener('DOMContentLoaded', () => {
    async function migrateIfNeeded() {
        try {
            const migrated = await DB.getMeta('migrated');
            if (migrated === true) return;
            const backupLegacy = (key, raw) => {
                if (!raw) return;
                const stamp = new Date().toISOString().replace(/[:.]/g, '-');
                try { localStorage.setItem(`legacy_backup_${key}_${stamp}`, raw); } catch {}
                try { localStorage.removeItem(key); } catch {}
            };
            const songsParsed = safeParseFromStorage('songs', []);
            const setlistsParsed = safeParseFromStorage('setlists', []);
            if (!songsParsed.valid) backupLegacy('songs', songsParsed.raw);
            if (!setlistsParsed.valid) backupLegacy('setlists', setlistsParsed.raw);
            const songs = songsParsed.value;
            const setlists = setlistsParsed.value;
            if (songs && songs.length) {
                await DB.putSongs(songs);
            }
            if (setlists && setlists.length) {
                for (const s of setlists) await DB.putSetlist(s);
            }
            try { localStorage.removeItem('songs'); } catch {}
            try { localStorage.removeItem('setlists'); } catch {}
            await DB.setMeta('migrated', true);
        } catch (e) {
            console.error('Migration failed', e);
        }
    }
  const app = {
        normalizeTitle(title) {
            return normalizeSongTitleValue(title);
        },

        cleanLyricsForStorage(title, lyrics) {
            return normalizeLyricsBlock(title, lyrics);
        },

        isDuplicateTitle(title) {
            const normalized = title.trim().toLowerCase();
            return this.songs.some(song => song.title.trim().toLowerCase() === normalized);
        },

        // DOM Elements
        navButtons: document.querySelectorAll('.nav-button'),
        tabs: document.querySelectorAll('.tab'),
        songList: document.getElementById('song-list'),
        addSongBtn: document.getElementById('add-song-btn'),
        deleteAllSongsBtn: document.getElementById('delete-all-songs-btn'),
        songModal: document.getElementById('song-modal'),
        songModalTitle: document.getElementById('song-modal-title'),
        saveSongBtn: document.getElementById('save-song-btn'),
        cancelSongBtn: document.getElementById('cancel-song-btn'),
        songTitleInput: document.getElementById('song-title-input'),
        songLyricsInput: document.getElementById('song-lyrics-input'),
        songSearchInput: document.getElementById('song-search-input'),
        songUploadInput: document.getElementById('song-upload-input'),
        setlistSelect: document.getElementById('setlist-select'),
        newSetlistBtn: document.getElementById('new-setlist-btn'),
        renameSetlistBtn: document.getElementById('rename-setlist-btn'),
        duplicateSetlistBtn: document.getElementById('duplicate-setlist-btn'),
        deleteSetlistBtn: document.getElementById('delete-setlist-btn'),
        availableSongsContainer: document.getElementById('available-songs'),
        currentSetlistSongsContainer: document.getElementById('current-setlist-songs'),
        currentSetlistTitle: document.getElementById('current-setlist-title'),
        setlistModal: document.getElementById('setlist-modal'),
        setlistModalTitle: document.getElementById('setlist-modal-title'),
        setlistNameInput: document.getElementById('setlist-name-input'),
        saveSetlistBtn: document.getElementById('save-setlist-btn'),
        cancelSetlistBtn: document.getElementById('cancel-setlist-btn'),
        performanceSetlistSelect: document.getElementById('performance-setlist-select'),
        performanceSongSearch: document.getElementById('performance-song-search'),
        startPerformanceBtn: document.getElementById('start-performance-btn'),
        performanceSongList: document.getElementById('performance-song-list'),
        // Preferences
        sortMode: localStorage.getItem('songSortMode') || 'alpha-asc',

        // Tab Toolbars
        tabToolbars: {
            songs: `
                <div class="search-group">
                  <button id="song-voice-btn" class="search-icon-btn" title="Voice search" aria-label="Voice search"><i class="fas fa-microphone"></i></button>
                  <input type="text" id="song-search-input" class="search-input" placeholder="Search songs..." aria-label="Search songs">
                  <button id="song-search-clear" class="search-clear-btn" type="button" title="Clear search" aria-label="Clear search">
                    <i class="fas fa-times-circle" aria-hidden="true"></i>
                  </button>
                  <select id="song-sort-select" class="song-sort-select inside" title="Sort" aria-label="Sort songs">
                      <option value="alpha-asc">A → Z</option>
                      <option value="alpha-desc">Z → A</option>
                      <option value="edited-desc">Newest</option>
                      <option value="edited-asc">Oldest</option>
                  </select>
                </div>
                <div class="toolbar-buttons-group">
                    <label title="Favorites only" class="btn" style="display:inline-flex;align-items:center;gap:0.35rem;">
                      <input type="checkbox" id="song-fav-filter" ${localStorage.getItem('songsFavoritesOnly')==='1' ? 'checked' : ''} aria-label="Show favorites only">
                      <span><i class="fas fa-star"></i></span>
                    </label>
                    <label for="song-upload-input" class="btn" title="Upload"><i class="fas fa-upload"></i></label>
                    <button id="add-song-btn" class="btn" title="Add Song"><i class="fas fa-plus"></i></button>
                    <button id="delete-all-songs-btn" class="btn danger" title="Delete All"><i class="fas fa-trash"></i></button>
                </div>
                <input type="file" id="song-upload-input" multiple accept=".txt,.docx,.json,.csv" class="hidden-file">
            `,
            setlists: `
                <select id="setlist-select" class="setlist-select"></select>
                <div class="toolbar-buttons-group">
                    <button id="new-setlist-btn" class="btn" title="New Setlist"><i class="fas fa-plus"></i></button>
                    <button id="edit-setlist-btn" class="btn" title="Edit Setlist"><i class="fas fa-pen-to-square"></i></button>
                    <button id="import-export-btn" class="btn" title="Import/Export"><i class="fas fa-file-upload"></i></button>
                </div>
                <input type="file" id="import-setlist-image" accept="image/*" class="hidden-file">
            `,
            performance: `
                <select id="performance-setlist-select" class="setlist-select"></select>
                <div class="search-group no-sort">
                  <button id="performance-voice-btn" class="search-icon-btn" title="Voice search" aria-label="Voice search"><i class="fas fa-microphone"></i></button>
                  <input type="text" id="performance-song-search" class="search-input" placeholder="Find any song..." aria-label="Find any song">
                  <button id="performance-search-clear" class="search-clear-btn" type="button" title="Clear search" aria-label="Clear search">
                    <i class="fas fa-times-circle" aria-hidden="true"></i>
                  </button>
                </div>
                <button id="start-performance-btn" class="btn primary"><i class="fas fa-play"></i> Start</button>
            `
        },

        // State
        songs: [],
        currentSongId: null,
        currentSetlistId: null,
        performanceSetlistId: null,
        activeRecognition: null,
        modalMode: null,
        sortableSetlist: null,
        lastPerformance: null,
        backupReminderEnabled: false,
        backupReminderDays: 30,

        // Render the toolbar for the given tab and attach event listeners
        renderToolbar(tab) {
            const toolbarDiv = document.getElementById('tab-toolbar');
            if (!toolbarDiv) {
                console.error('Tab toolbar element not found');
                return;
            }
            // Stop any active speech recognition when switching toolbars
            if (this.activeRecognition && typeof this.activeRecognition.stop === 'function') {
                try { this.activeRecognition.stop(); } catch {}
                this.activeRecognition = null;
            }
            toolbarDiv.innerHTML = this.tabToolbars[tab] || '';
            
            if (tab === 'setlists' || tab === 'performance') {
                this.setlistSelect = document.getElementById('setlist-select');
                this.performanceSetlistSelect = document.getElementById('performance-setlist-select');
            }

            if (tab === 'songs') {
                this.songSearchInput = document.getElementById('song-search-input');
                this.songSortSelect = document.getElementById('song-sort-select');
                this.addSongBtn = document.getElementById('add-song-btn');
                this.deleteAllSongsBtn = document.getElementById('delete-all-songs-btn');
                this.songUploadInput = document.getElementById('song-upload-input');

                this.songSearchInput.addEventListener('input', debounce(() => this.renderSongs(), 120));
                const songVoiceBtn = document.getElementById('song-voice-btn');
                this.setupSpeechToText(this.songSearchInput, songVoiceBtn, () => this.renderSongs());
                const songClearBtn = document.getElementById('song-search-clear');
                this.attachSearchClear(this.songSearchInput, songClearBtn);
                if (this.songSortSelect) {
                    this.songSortSelect.value = this.sortMode;
                    this.songSortSelect.addEventListener('change', () => {
                        this.sortMode = this.songSortSelect.value;
                        localStorage.setItem('songSortMode', this.sortMode);
                        this.renderSongs();
                    });
                }
                const favFilter = document.getElementById('song-fav-filter');
                if (favFilter) {
                    favFilter.addEventListener('change', () => {
                        localStorage.setItem('songsFavoritesOnly', favFilter.checked ? '1' : '0');
                        this.renderSongs();
                    });
                }
                this.addSongBtn.addEventListener('click', () => this.openSongModal());
                this.deleteAllSongsBtn.addEventListener('click', () => {
                    confirmDialog('Delete ALL songs? This cannot be undone!', async () => {
                        this.songs = [];
                        try { await DB.clearSongs(); } catch {}
                        await this.saveData();
                        const impactedSetlists = SetlistsManager.getAllSetlists().filter(sl => Array.isArray(sl.songs) && sl.songs.length);
                        for (const sl of impactedSetlists) {
                            SetlistsManager.updateSetlistSongs(sl.id, []);
                        }
                        if (impactedSetlists.length) this.renderSetlists();
                        this.renderSongs();
                        const extras = impactedSetlists.length ? ` Cleared ${impactedSetlists.length} setlist(s).` : '';
                        showToast(`Deleted all songs.${extras}`, 'success');
                    });
                });
                this.songUploadInput.addEventListener('change', (e) => this.handleFileUpload(e));
            } else if (tab === 'setlists') {
                this.setlistSelect = document.getElementById('setlist-select');
                this.newSetlistBtn = document.getElementById('new-setlist-btn');
                this.renameSetlistBtn = document.getElementById('rename-setlist-btn');
                this.duplicateSetlistBtn = document.getElementById('duplicate-setlist-btn');
                this.deleteSetlistBtn = document.getElementById('delete-setlist-btn');
                this.setlistSelect.addEventListener('change', (e) => this.handleSetlistSelectChange(e));
                this.newSetlistBtn.addEventListener('click', () => this.openSetlistModal());
                document.getElementById('edit-setlist-btn').addEventListener('click', () => this.openEditSetlistModal());
                document.getElementById('import-export-btn').addEventListener('click', () => this.openImportExportModal());
                // Edit setlist modal actions
                document.getElementById('rename-setlist-action-btn').addEventListener('click', () => {
                    this.closeEditSetlistModal();
                    this.openSetlistModal('rename');
                });
                document.getElementById('duplicate-setlist-action-btn').addEventListener('click', () => {
                    this.closeEditSetlistModal();
                    this.handleDuplicateSetlist();
                });
                document.getElementById('delete-setlist-action-btn').addEventListener('click', () => {
                    this.closeEditSetlistModal();
                    this.handleDeleteSetlist();
                });
                document.getElementById('cancel-edit-setlist-btn').addEventListener('click', () => this.closeEditSetlistModal());
            } else if (tab === 'performance') {
                this.performanceSetlistSelect = document.getElementById('performance-setlist-select');
                this.performanceSongSearch = document.getElementById('performance-song-search');
                this.startPerformanceBtn = document.getElementById('start-performance-btn');
                this.performanceSetlistSelect.addEventListener('change', () => this.handlePerformanceSetlistChange());
                this.performanceSongSearch.addEventListener('input', debounce(() => this.handlePerformanceSongSearch(), 120));
                const perfVoiceBtn = document.getElementById('performance-voice-btn');
                this.setupSpeechToText(this.performanceSongSearch, perfVoiceBtn, () => this.handlePerformanceSongSearch());
                const perfClearBtn = document.getElementById('performance-search-clear');
                this.attachSearchClear(this.performanceSongSearch, perfClearBtn);
                this.startPerformanceBtn.addEventListener('click', () => this.handleStartPerformance());
            }
        },

        async handleImportSetlistImage(event) {
            try {
                const input = event.target;
                const file = input?.files?.[0];
                if (!file) return;
                if (!window.Tesseract || !window.Tesseract.recognize) {
                    showToast('OCR not available (Tesseract failed to load).', 'error', 3500);
                    return;
                }
                showToast('Running OCR on image…', 'info', 2000);
                const tessBase = (() => {
                    try {
                        return new URL('lib/tesseract/', window.location.href).href.replace(/\/$/, '');
                    } catch {
                        return `${window.location.origin}/lib/tesseract`;
                    }
                })();
                // Proactively check headers; choose CDN first if local looks mis-served
                const hdr = await this.checkTesseractLangHeaders(tessBase);
                let data;
                // Prefer CDN lang first if local headers look wrong
                const attemptConfigs = (hdr && hdr.ok) ? [
                  { workerPath: `${tessBase}/worker.min.js`, corePath: `${tessBase}/tesseract-core-simd.wasm.js`, langPath: `${tessBase}` },
                  { workerPath: `${tessBase}/worker.min.js`, corePath: `${tessBase}/tesseract-core-simd.wasm.js`, langPath: 'https://tessdata.projectnaptha.com/4.0.0' }
                ] : [
                  { workerPath: `${tessBase}/worker.min.js`, corePath: `${tessBase}/tesseract-core-simd.wasm.js`, langPath: 'https://tessdata.projectnaptha.com/4.0.0' },
                  { workerPath: `${tessBase}/worker.min.js`, corePath: `${tessBase}/tesseract-core-simd.wasm.js`, langPath: `${tessBase}` }
                ];
                let lastErr;
                for (const cfg of attemptConfigs) {
                  try {
                    ({ data } = await Tesseract.recognize(file, 'eng', cfg));
                    lastErr = null;
                    break;
                  } catch (e) { lastErr = e; }
                }
                if (lastErr) throw lastErr;
                let text = (data && data.text) ? data.text : '';
                text = String(text).replace(/\r/g, '\n').replace(/\n{3,}/g, '\n\n');
                if (!text.trim()) { showToast('No text detected in image.', 'info'); return; }

                const suggested = this.normalizeTitle(file.name.replace(/\.[^.]+$/, '')) || 'New Setlist';
                const name = prompt('Name for this setlist:', suggested);
                if (!name) { showToast('Import cancelled.', 'info'); return; }

                const result = SetlistsManager.importSetlistFromText(name, text, this.songs);
                if (!result) return; // Import function shows its own toasts
                // Switch to new setlist
                this.currentSetlistId = result.setlist.id;
                await this.saveData();
                this.renderSetlists();
                showToast(`Imported ${result.imported} songs from image.`, 'success');
            } catch (e) {
                console.error('OCR import failed', e);
                showToast('Failed to import from image.', 'error');
            } finally {
                // Reset file input for subsequent imports
                const el = document.getElementById('import-setlist-image');
                if (el) el.value = '';
            }
        },

        // Verify headers for local eng.traineddata.gz to avoid OCR failures
        async checkTesseractLangHeaders(tessBase) {
            try {
                const url = `${tessBase}/eng.traineddata.gz`;
                const res = await fetch(url, { method: 'HEAD', cache: 'no-store' });
                if (!res.ok) return { ok: false, reason: 'not-ok' };
                const enc = (res.headers.get('content-encoding') || '').toLowerCase();
                const type = (res.headers.get('content-type') || '').toLowerCase();
                if (enc.includes('gzip')) {
                    console.warn('eng.traineddata.gz is served with Content-Encoding:gzip. Serve it without Content-Encoding.');
                    showToast('OCR note: fix eng.traineddata.gz headers (no Content-Encoding).', 'info', 4500);
                    return { ok: false, reason: 'encoded-gzip' };
                }
                if (type && (type.includes('text') || type.includes('html'))) {
                    console.warn('eng.traineddata.gz served with text/* Content-Type. Prefer application/octet-stream.');
                }
                return { ok: true };
            } catch (_) { return { ok: false, reason: 'head-failed' }; }
        },

        attachSearchClear(inputEl, btnEl) {
            if (!inputEl || !btnEl) return;
            const toggle = () => {
                const hasValue = inputEl.value && inputEl.value.length > 0;
                btnEl.classList.toggle('visible', hasValue);
            };
            toggle();
            btnEl.addEventListener('click', () => {
                if (!inputEl) return;
                if (inputEl.value) {
                    inputEl.value = '';
                    inputEl.dispatchEvent(new Event('input', { bubbles: true }));
                }
                inputEl.focus();
            });
            inputEl.addEventListener('input', toggle);
        },

        // Attach speech-to-text to an input + button pair
        setupSpeechToText(inputEl, btnEl, onChange) {
            if (!inputEl || !btnEl) return;
            const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
            if (!SR) { btnEl.style.display = 'none'; return; }

            const recognition = new SR();
            recognition.lang = navigator.language || 'en-US';
            recognition.continuous = false;
            recognition.interimResults = true;
            recognition.maxAlternatives = 1;

            let finalTranscript = '';

            const setActive = (active) => {
                btnEl.classList.toggle('recording', !!active);
            };

            recognition.onstart = () => {
                this.activeRecognition = recognition;
                finalTranscript = '';
                setActive(true);
            };
            recognition.onerror = () => {
                setActive(false);
            };
            recognition.onend = () => {
                setActive(false);
                if (this.activeRecognition === recognition) this.activeRecognition = null;
            };
            recognition.onresult = (event) => {
                let interim = '';
                for (let i = event.resultIndex; i < event.results.length; i++) {
                    const res = event.results[i];
                    if (res.isFinal) finalTranscript += res[0].transcript;
                    else interim += res[0].transcript;
                }
                const value = (finalTranscript || interim).trim();
                if (value) {
                    inputEl.value = value;
                    if (typeof onChange === 'function') onChange();
                    else inputEl.dispatchEvent(new Event('input', { bubbles: true }));
                }
            };

            btnEl.addEventListener('click', () => {
                // Toggle recognition; ensure we stop other active instance
                if (this.activeRecognition && this.activeRecognition !== recognition) {
                    try { this.activeRecognition.stop(); } catch {}
                    this.activeRecognition = null;
                }
                try {
                    if (btnEl.classList.contains('recording')) recognition.stop();
                    else recognition.start();
                } catch (e) {
                    // Some browsers may throw if called too quickly
                }
            });
        },

        // Core App Initialization
        async init() {
            await migrateIfNeeded();
            try {
                if (DB.wasReset && DB.wasReset() && !sessionStorage.getItem('dbResetToastShown')) {
                    showToast('Storage was reset; please re-import your backup.', 'info', 5000);
                    sessionStorage.setItem('dbResetToastShown', '1');
                }
            } catch {}
            this.loadData();
            // Determine initial tab from URL hash or saved preference
            const hashTab = (location.hash || '').replace('#','');
            const savedTab = (localStorage.getItem('lastActiveTab') || '').trim();
            const initialTab = ['songs','setlists','performance'].includes(hashTab)
                ? hashTab
                : (['songs','setlists','performance'].includes(savedTab) ? savedTab : 'songs');
            this.renderToolbar(initialTab);
            this.setlistSelect = document.getElementById('setlist-select');
            this.performanceSetlistSelect = document.getElementById('performance-setlist-select');
            this.setupEventListeners();
            this.updateCloudActionState();
            // Ensure nav button active state matches initialTab
            try {
                if (initialTab !== 'songs') {
                    const btn = Array.from(this.navButtons).find(b => b.dataset.tab === initialTab);
                    btn?.click();
                }
            } catch {}
            // Load from IDB
            try {
                const rawSongs = await DB.getAllSongs();
                const { sanitizedSongs, changed } = this.sanitizeSongs(rawSongs || []);
                this.songs = sanitizedSongs;
                if (changed) {
                    try { await DB.putSongs(this.songs); } catch (err) {
                        console.error('Failed to persist song cleanups', err);
                    }
                }
            } catch (e) {
                console.error('Failed to load songs from DB', e);
                this.songs = [];
            }
            await SetlistsManager.load();
            // Render content for chosen tab
            if (initialTab === 'songs') this.renderSongs();
            if (initialTab === 'setlists') this.renderSetlists();
            if (initialTab === 'performance') this.renderPerformanceTab();
            try {
                if (!sessionStorage.getItem('songsLoadedToastShown')) {
                    const count = Array.isArray(this.songs) ? this.songs.length : 0;
                    showToast(`Loaded ${count} song(s).`, 'info', 2500);
                    sessionStorage.setItem('songsLoadedToastShown', '1');
                }
            } catch {}
            try { this.checkBackupReminder(); } catch {}

        },

        // Data Management
        loadData() {
            this.songs = safeJSONParse(localStorage.getItem('songs'), []);
            const theme = (localStorage.getItem('theme') === 'light') ? 'light' : 'dark';
            applyTheme(theme);
        },

        async saveData() {
            // Bulk write as a fallback for places still calling saveData
            try { await DB.putSongs(this.songs); } catch (e) { console.error('saveData failed', e); }
        },

        // Lyrics Management
        getAllLyrics() {
            return this.songs;
        },

        getLyricById(id) {
            return this.songs.find(song => song.id === id);
        },

        async addLyric(song) {
            this.songs.push(song);
            try { await DB.putSong(song); } catch (e) { console.error('putSong failed', e); }
            await this.saveData();
        },

        async removeLyric(id) {
            this.songs = this.songs.filter(song => song.id !== id);
            try { await DB.deleteSong(id); } catch (e) { console.error('deleteSong failed', e); }
            await this.saveData();
        },

        _ensureFuse() {
            const count = Array.isArray(this.songs) ? this.songs.length : 0;
            if (!this._fuse || this._fuseCount !== count) {
                try {
                    this._fuse = new Fuse(this.songs, {
                        keys: [
                            { name: 'title', weight: 0.75 },
                            { name: 'lyrics', weight: 0.25 }
                        ],
                        includeScore: true,
                        threshold: 0.35,
                        ignoreLocation: true,
                        minMatchCharLength: 2,
                    });
                    this._fuseCount = count;
                } catch (e) {
                    this._fuse = null; this._fuseCount = 0;
                }
            }
        },

        searchLyrics(query) {
            const q = String(query || '').trim();
            if (!q) return this.songs.slice();
            // Use Fuse.js for fuzzy search across title and lyrics
            try {
                this._ensureFuse();
                if (!this._fuse) throw new Error('Fuse unavailable');
                return this._fuse.search(q).map(r => r.item);
            } catch (e) {
                // Fallback to simple includes if Fuse isn't available
                const low = q.toLowerCase();
                return this.songs.filter(song =>
                    song.title.toLowerCase().includes(low) ||
                    (song.lyrics && song.lyrics.toLowerCase().includes(low))
                );
            }
        },

        renameLyric(id, newTitle) {
            const song = this.getLyricById(id);
            if (song) {
                song.title = newTitle;
                this.saveData();
            }
        },

        editLyric(id, newLyrics) {
            const song = this.getLyricById(id);
            if (song) {
                song.lyrics = newLyrics;
                this.saveData();
            }
        },

        normalizeSongRecord(entry) {
            const clone = { ...(entry || {}) };
            let changed = false;
            const normalizedTitle = normalizeSongTitleValue(clone.title || '');
            const safeTitle = normalizedTitle || 'Untitled';
            if (safeTitle !== (clone.title || '')) {
                clone.title = safeTitle;
                changed = true;
            }
            const normalizedLyrics = normalizeLyricsBlock(clone.title, clone.lyrics || '');
            if (normalizedLyrics !== (clone.lyrics || '')) {
                clone.lyrics = normalizedLyrics;
                changed = true;
            }
            return { song: clone, changed };
        },

        sanitizeSongs(rawSongs) {
            const sanitized = [];
            let changed = false;
            for (const entry of rawSongs || []) {
                if (!entry || typeof entry !== 'object') continue;
                const { song, changed: songChanged } = this.normalizeSongRecord(entry);
                sanitized.push(song);
                if (songChanged) changed = true;
            }
            return { sanitizedSongs: sanitized, changed };
        },

        getSongTimestamp(song) {
            const raw = song?.lastEditedAt || song?.updatedAt || song?.createdAt || song?.updated_at || song?.created_at || 0;
            const numeric = typeof raw === 'number' ? raw : Date.parse(raw);
            return Number.isFinite(numeric) ? numeric : 0;
        },

        adaptRemoteSong(remoteSong) {
            const localSong = {
                id: String(remoteSong?.legacy_id || remoteSong?.id || '').trim(),
                title: String(remoteSong?.title || '').trim() || 'Untitled',
                lyrics: String(remoteSong?.lyrics || ''),
                createdAt: remoteSong?.created_at || remoteSong?.createdAt || new Date().toISOString(),
                lastEditedAt:
                    remoteSong?.updated_at ||
                    remoteSong?.lastEditedAt ||
                    remoteSong?.updatedAt ||
                    remoteSong?.created_at ||
                    remoteSong?.createdAt ||
                    new Date().toISOString(),
            };
            const { song: normalizedSong } = this.normalizeSongRecord(localSong);
            return normalizedSong;
        },

        mergeRemoteSongsIntoLocal(remoteSongs) {
            const mergedSongs = this.songs.map((song) => ({ ...song }));
            const songIndexById = new Map(mergedSongs.map((song, index) => [String(song.id || '').trim(), index]));
            let changed = false;

            for (const remoteSong of remoteSongs || []) {
                const adaptedSong = this.adaptRemoteSong(remoteSong);
                if (!adaptedSong.id) continue;

                if (!songIndexById.has(adaptedSong.id)) {
                    songIndexById.set(adaptedSong.id, mergedSongs.length);
                    mergedSongs.push(adaptedSong);
                    changed = true;
                    continue;
                }

                const existingIndex = songIndexById.get(adaptedSong.id);
                const existingSong = mergedSongs[existingIndex];
                if (this.getSongTimestamp(adaptedSong) <= this.getSongTimestamp(existingSong)) {
                    continue;
                }

                mergedSongs[existingIndex] = {
                    ...existingSong,
                    title: adaptedSong.title,
                    lyrics: adaptedSong.lyrics,
                    createdAt: adaptedSong.createdAt || existingSong.createdAt,
                    lastEditedAt: adaptedSong.lastEditedAt || existingSong.lastEditedAt,
                };
                changed = true;
            }

            return { mergedSongs, changed };
        },

        getSetlistTimestamp(setlist) {
            const raw = setlist?.updatedAt || setlist?.createdAt || setlist?.updated_at || setlist?.created_at || 0;
            const numeric = typeof raw === 'number' ? raw : Date.parse(raw);
            return Number.isFinite(numeric) ? numeric : 0;
        },

        adaptRemoteSetlist(remoteSetlist, remoteSongIdToLocalId = new Map()) {
            return {
                id: String(remoteSetlist?.legacy_id || remoteSetlist?.id || '').trim(),
                name: normalizeSetlistName(remoteSetlist?.name || 'Imported Setlist'),
                songs: Array.isArray(remoteSetlist?.songs)
                    ? remoteSetlist.songs
                        .map((songId) => remoteSongIdToLocalId.get(String(songId || '').trim()) || String(songId || '').trim())
                        .filter(Boolean)
                    : [],
                createdAt: remoteSetlist?.created_at || remoteSetlist?.createdAt || Date.now(),
                updatedAt: remoteSetlist?.updated_at || remoteSetlist?.updatedAt || remoteSetlist?.created_at || remoteSetlist?.createdAt || Date.now(),
            };
        },

        mergeRemoteSetlistsIntoLocal(remoteSetlists, localSetlists, remoteSongIdToLocalId = new Map()) {
            const mergedSetlists = (localSetlists || []).map((setlist) => ({ ...setlist }));
            const setlistIndexById = new Map(mergedSetlists.map((setlist, index) => [String(setlist.id || '').trim(), index]));
            let changed = false;

            for (const remoteSetlist of remoteSetlists || []) {
                const adaptedSetlist = this.adaptRemoteSetlist(remoteSetlist, remoteSongIdToLocalId);
                if (!adaptedSetlist.id) continue;

                if (!setlistIndexById.has(adaptedSetlist.id)) {
                    setlistIndexById.set(adaptedSetlist.id, mergedSetlists.length);
                    mergedSetlists.push(adaptedSetlist);
                    changed = true;
                    continue;
                }

                const existingIndex = setlistIndexById.get(adaptedSetlist.id);
                const existingSetlist = mergedSetlists[existingIndex];
                if (this.getSetlistTimestamp(adaptedSetlist) <= this.getSetlistTimestamp(existingSetlist)) {
                    continue;
                }

                mergedSetlists[existingIndex] = {
                    ...existingSetlist,
                    name: adaptedSetlist.name,
                    songs: adaptedSetlist.songs,
                    createdAt: adaptedSetlist.createdAt || existingSetlist.createdAt,
                    updatedAt: adaptedSetlist.updatedAt || existingSetlist.updatedAt,
                };
                changed = true;
            }

            return { mergedSetlists, changed };
        },

        updateCloudActionState() {
            const isSignedIn = AuthGate.isAuthenticated();
            const email = AuthGate.getUser()?.email || '';
            const importBtn = document.getElementById('import-cloud-btn');
            const exportBtn = document.getElementById('export-cloud-btn');
            const importNote = document.getElementById('import-cloud-note');
            const exportNote = document.getElementById('export-cloud-note');

            if (importBtn) importBtn.disabled = !isSignedIn;
            if (exportBtn) exportBtn.disabled = !isSignedIn;

            if (importNote) {
                importNote.textContent = isSignedIn
                    ? `Pull songs and setlists from Supabase for ${email || 'your account'}.`
                    : 'Sign in to pull songs and setlists from the cloud into this device.';
            }
            if (exportNote) {
                exportNote.textContent = isSignedIn
                    ? `Push this device's songs and setlists to Supabase for ${email || 'your account'}.`
                    : 'Sign in to push your local songs and setlists to the cloud.';
            }
            this.updateSyncStatusText();
        },

        formatSyncTimestamp(value) {
            if (!value) return '';
            const parsed = Date.parse(value);
            if (Number.isNaN(parsed)) return '';
            try {
                return new Date(parsed).toLocaleString();
            } catch {
                return '';
            }
        },

        updateSyncStatusText() {
            const lastPulled = this.formatSyncTimestamp(localStorage.getItem('songbinderLastPulledAt'));
            const lastPushed = this.formatSyncTimestamp(localStorage.getItem('songbinderLastPushedAt'));
            const importStatus = document.getElementById('import-sync-status');
            const exportStatus = document.getElementById('export-sync-status');

            if (importStatus) {
                importStatus.textContent = lastPulled ? `Last pulled: ${lastPulled}` : 'No cloud pull yet on this device.';
            }
            if (exportStatus) {
                exportStatus.textContent = lastPushed ? `Last pushed: ${lastPushed}` : 'No cloud push yet from this device.';
            }
        },

        getCloudActionUi(action) {
            if (action === 'push') {
                return {
                    button: document.getElementById('export-cloud-btn'),
                    status: document.getElementById('export-sync-status'),
                    idleLabel: 'Push to Cloud',
                    loadingLabel: 'Pushing...',
                };
            }
            if (action === 'pull') {
                return {
                    button: document.getElementById('import-cloud-btn'),
                    status: document.getElementById('import-sync-status'),
                    idleLabel: 'Pull from Cloud',
                    loadingLabel: 'Pulling...',
                };
            }
            return null;
        },

        setCloudActionLoading(action, isLoading) {
            const ui = this.getCloudActionUi(action);
            if (!ui?.button) return;

            ui.button.disabled = isLoading;
            ui.button.classList.toggle('is-loading', isLoading);
            ui.button.setAttribute('aria-busy', isLoading ? 'true' : 'false');
            ui.button.innerHTML = isLoading
                ? `<span class="btn-spinner" aria-hidden="true"></span><span>${ui.loadingLabel}</span>`
                : ui.idleLabel;
            setGlobalBusyIndicator(isLoading, 'Syncing with cloud...');
        },

        showCloudActionFeedback(action, message, type = 'success', duration = 2400) {
            const ui = this.getCloudActionUi(action);
            if (!ui?.status) return;

            this.cloudActionFeedbackTimers = this.cloudActionFeedbackTimers || {};
            const existingTimer = this.cloudActionFeedbackTimers[action];
            if (existingTimer) {
                clearTimeout(existingTimer);
            }

            ui.status.textContent = message;
            ui.status.classList.remove('is-success', 'is-error', 'is-fading');
            ui.status.classList.add(type === 'error' ? 'is-error' : 'is-success');

            this.cloudActionFeedbackTimers[action] = setTimeout(() => {
                ui.status.classList.add('is-fading');
                this.cloudActionFeedbackTimers[action] = setTimeout(() => {
                    ui.status.classList.remove('is-success', 'is-error', 'is-fading');
                    this.updateSyncStatusText();
                    this.cloudActionFeedbackTimers[action] = null;
                }, 220);
            }, duration);
        },

        async pullFromCloud() {
            const user = AuthGate.getUser();
            if (!user?.id) throw new Error('Sign in with Google before pulling from the cloud.');

            console.info('[SongSync] Manual pull start', { userId: user.id });

            let remoteSongs = [];
            let remoteSetlists = [];
            try {
                try {
                    await window.SongBinderSupabase?.upsertProfile?.(user);
                } catch (error) {
                    console.warn('[SongSync] Profile upsert skipped or failed', { userId: user.id, error });
                }

                remoteSongs = await window.SongBinderSupabase?.fetchSongsForUser?.(user.id) || [];
                remoteSetlists = await window.SongBinderSupabase?.fetchSetlistsForUser?.(user.id) || [];
                console.info('[SongSync] Remote fetch success', {
                    userId: user.id,
                    songs: remoteSongs.length,
                    setlists: remoteSetlists.length,
                });
            } catch (error) {
                console.error('[SongSync] Remote fetch failure', { userId: user.id, error });
                throw error;
            }

            const localSetlists = SetlistsManager.getAllSetlists();
            const { mergedSongs, changed: songsChanged } = this.mergeRemoteSongsIntoLocal(remoteSongs);
            const remoteSongIdToLocalId = new Map(
                (remoteSongs || []).map((song) => [String(song?.id || '').trim(), String(song?.legacy_id || song?.id || '').trim()]).filter(([remoteId, localId]) => remoteId && localId)
            );
            const { mergedSetlists, changed: setlistsChanged } = this.mergeRemoteSetlistsIntoLocal(remoteSetlists, localSetlists, remoteSongIdToLocalId);

            if (songsChanged) {
                this.songs = mergedSongs;
                await DB.putSongs(this.songs);
            }
            if (setlistsChanged) {
                for (const setlist of mergedSetlists) {
                    await DB.putSetlist(setlist);
                }
            }
            if (setlistsChanged) {
                await SetlistsManager.load();
            }

            this.renderSongs();
            this.renderSetlists();

            console.info('[SongSync] Manual pull end', {
                userId: user.id,
                songsChanged,
                setlistsChanged,
            });

            return {
                songsPulled: remoteSongs.length,
                setlistsPulled: remoteSetlists.length,
                songsChanged,
                setlistsChanged,
            };
        },

        async pushToCloud() {
            const user = AuthGate.getUser();
            if (!user?.id) throw new Error('Sign in with Google before pushing to the cloud.');

            console.info('[SongSync] Manual push start', { userId: user.id });

            try {
                try {
                    await window.SongBinderSupabase?.upsertProfile?.(user);
                } catch (error) {
                    console.warn('[SongSync] Profile upsert skipped or failed', { userId: user.id, error });
                }

                const localSetlists = SetlistsManager.getAllSetlists();
                await Promise.all(this.songs.map((song) => window.SongBinderSupabase?.upsertSongToSupabase?.(song, user.id)));
                await Promise.all(localSetlists.map((setlist) => window.SongBinderSupabase?.upsertSetlistToSupabase?.(setlist, user.id)));
                const remoteSongs = await window.SongBinderSupabase?.fetchSongsForUser?.(user.id) || [];
                const remoteSetlists = await window.SongBinderSupabase?.fetchSetlistsForUser?.(user.id) || [];
                const localToRemoteSongId = new Map(
                    remoteSongs.map((song) => [String(song?.legacy_id || song?.id || '').trim(), String(song?.id || '').trim()]).filter(([localId, remoteId]) => localId && remoteId)
                );
                const localToRemoteSetlistId = new Map(
                    remoteSetlists.map((setlist) => [String(setlist?.legacy_id || setlist?.id || '').trim(), String(setlist?.id || '').trim()]).filter(([localId, remoteId]) => localId && remoteId)
                );
                await Promise.all(localSetlists.map(async (setlist) => {
                    const remoteSetlistId = localToRemoteSetlistId.get(String(setlist.id || '').trim());
                    const localSongIds = (setlist.songs || []).map((songId) => String(songId || '').trim()).filter(Boolean);
                    const remoteSongIds = localSongIds.map((songId) => localToRemoteSongId.get(songId)).filter(Boolean);
                    if (!remoteSetlistId) {
                        console.warn('[SongSync] Missing remote setlist mapping for legacy_id', { localSetlistId: setlist.id });
                        throw new Error(`Cloud push could not map setlist "${setlist.name || 'Untitled Setlist'}" to a remote record.`);
                    }
                    if (localSongIds.length !== remoteSongIds.length) {
                        const missingCount = localSongIds.length - remoteSongIds.length;
                        console.warn('[SongSync] Missing remote song mappings for setlist membership push', {
                            localSetlistId: setlist.id,
                            missingCount,
                            localSongIds,
                            remoteSongIds,
                        });
                        throw new Error(`Cloud push could not map ${missingCount} song(s) in setlist "${setlist.name || 'Untitled Setlist'}" to remote song records.`);
                    }
                    const membershipResult = await window.SongBinderSupabase?.replaceSetlistSongsInSupabase?.(remoteSetlistId, remoteSongIds, user.id);
                    if (membershipResult?.skipped) {
                        throw new Error('Cloud setlist membership sync is unavailable because the setlist_songs table or required schema is missing.');
                    }
                    return membershipResult;
                }));

                console.info('[SongSync] Manual push end', {
                    userId: user.id,
                    songsPushed: this.songs.length,
                    setlistsPushed: localSetlists.length,
                });

                return {
                    songsPushed: this.songs.length,
                    setlistsPushed: localSetlists.length,
                };
            } catch (error) {
                console.error('[SongSync] Manual push failure', { userId: user.id, error });
                throw error;
            }
        },

        // Event Listeners

        setupEventListeners() {
            const activateTab = (btn) => {
                this.tabs.forEach(tab => tab.classList.remove('active'));
                this.navButtons.forEach(b => { b.classList.remove('active'); b.setAttribute('aria-selected','false'); b.setAttribute('tabindex','-1'); });
                btn.classList.add('active');
                btn.setAttribute('aria-selected','true');
                btn.setAttribute('tabindex','0');
                const tabName = btn.getAttribute('data-tab');
                document.getElementById(tabName).classList.add('active');
                this.renderToolbar(tabName);
                if (tabName === 'songs') this.renderSongs();
                if (tabName === 'setlists') this.renderSetlists();
                if (tabName === 'performance') this.renderPerformanceTab();
                try { localStorage.setItem('lastActiveTab', tabName); } catch {}
                btn.focus();
            };
            this.navButtons.forEach((btn, idx) => {
                btn.addEventListener('click', () => activateTab(btn));
                btn.addEventListener('keydown', (e) => {
                    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
                        e.preventDefault();
                        const buttons = Array.from(this.navButtons);
                        const dir = e.key === 'ArrowRight' ? 1 : -1;
                        const next = buttons[(idx + dir + buttons.length) % buttons.length];
                        activateTab(next);
                    }
                });
            });

            this.saveSongBtn.onclick = () => this.saveSong();
            this.cancelSongBtn.onclick = () => this.closeSongModal();
            this.saveSetlistBtn.addEventListener('click', () => this.saveSetlist());
            this.cancelSetlistBtn.addEventListener('click', () => this.closeSetlistModal());
            this.availableSongsContainer.addEventListener('click', (e) => this.handleAvailableSongsClick(e));
            this.currentSetlistSongsContainer.addEventListener('click', (e) => this.handleCurrentSetlistSongsClick(e));
            this.performanceSongList.addEventListener('click', (e) => this.handlePerformanceSongClick(e));
            // Add theme toggle button handler
            document.getElementById('theme-toggle-btn')?.addEventListener('click', () => {
                const current = document.documentElement.dataset.theme === 'light' ? 'light' : 'dark';
                const next = current === 'dark' ? 'light' : 'dark';
                applyTheme(next);
                localStorage.setItem('theme', next);
            });

            // Export modal controls
            const exportModal = document.getElementById('export-modal');
            if (exportModal) {
                exportModal.addEventListener('click', (e)=>{ if (e.target === exportModal) hideAnimatedModal(exportModal); });
                document.getElementById('export-cancel-btn')?.addEventListener('click', ()=> hideAnimatedModal(exportModal));
                document.querySelectorAll('input[name="export-what"]').forEach(r=> r.addEventListener('change', ()=> this.updateExportFormatOptions()));
                document.getElementById('export-download-btn')?.addEventListener('click', ()=> this.handleExportDownload());
                document.getElementById('export-cloud-btn')?.addEventListener('click', async ()=> {
                    const button = document.getElementById('export-cloud-btn');
                    if (button?.disabled) return;
                    this.setCloudActionLoading('push', true);
                    try {
                        const result = await this.pushToCloud();
                        localStorage.setItem('songbinderLastPushedAt', new Date().toISOString());
                        this.updateSyncStatusText();
                        this.showCloudActionFeedback('push', 'Push complete', 'success');
                        showToast(`Pushed ${result.songsPushed} song(s) and ${result.setlistsPushed} setlist(s) to the cloud.`, 'success', 4500);
                    } catch (error) {
                        this.showCloudActionFeedback('push', error?.message || 'Cloud push failed.', 'error');
                        showToast(error?.message || 'Cloud push failed.', 'error', 4500);
                    } finally {
                        this.setCloudActionLoading('push', false);
                    }
                });
                const reminderToggle = document.getElementById('backup-reminder-toggle');
                const reminderDays = document.getElementById('backup-reminder-days');
                this.loadBackupReminderSettings();
                reminderToggle?.addEventListener('change', () => {
                    this.saveBackupReminderSettings(reminderToggle.checked, reminderDays?.value);
                });
                reminderDays?.addEventListener('change', () => {
                    this.saveBackupReminderSettings(reminderToggle?.checked, reminderDays.value);
                });
            }

            // Import modal controls
            const importModal = document.getElementById('import-modal');
            if (importModal) {
                importModal.addEventListener('click', (e)=>{ if (e.target === importModal) hideAnimatedModal(importModal); });
                document.getElementById('import-cancel-btn')?.addEventListener('click', ()=> hideAnimatedModal(importModal));
                document.getElementById('import-run-btn')?.addEventListener('click', ()=> this.handleImportRun());
                document.getElementById('import-cloud-btn')?.addEventListener('click', async ()=> {
                    const button = document.getElementById('import-cloud-btn');
                    if (button?.disabled) return;
                    this.setCloudActionLoading('pull', true);
                    try {
                        const result = await this.pullFromCloud();
                        localStorage.setItem('songbinderLastPulledAt', new Date().toISOString());
                        this.updateSyncStatusText();
                        this.showCloudActionFeedback('pull', 'Pull complete', 'success');
                        showToast(`Pulled ${result.songsPulled} song(s) and ${result.setlistsPulled} setlist(s) from the cloud.`, 'success', 4500);
                    } catch (error) {
                        this.showCloudActionFeedback('pull', error?.message || 'Cloud pull failed.', 'error');
                        showToast(error?.message || 'Cloud pull failed.', 'error', 4500);
                    } finally {
                        this.setCloudActionLoading('pull', false);
                    }
                });
                document.querySelectorAll('input[name="import-type"]').forEach(r=> r.addEventListener('change', ()=> this.updateImportOptionsVisibility()));
                this.updateImportOptionsVisibility();
            }

            // Global keyboard shortcuts
            document.addEventListener('keydown', (e) => {
                const activeTab = document.querySelector('.nav-button.active')?.dataset.tab;
                // Focus search with '/'
                if (e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey) {
                    const input = activeTab === 'songs' ? document.getElementById('song-search-input')
                                 : activeTab === 'performance' ? document.getElementById('performance-song-search')
                                 : null;
                    if (input) {
                        e.preventDefault();
                        input.focus();
                    }
                }
                // Ctrl/Cmd+E to open export modal
                if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key.toLowerCase() === 'e') {
                    const m = document.getElementById('export-modal');
                    if (m) {
                        e.preventDefault();
                        showAnimatedModal(m);
                        this.updateCloudActionState();
                        this.updateExportFormatOptions();
                    }
                }
                // Ctrl/Cmd+N to add song (Songs tab only)
                if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key.toLowerCase() === 'n') {
                    if (activeTab === 'songs') {
                        e.preventDefault();
                        this.openSongModal();
                    }
                }
            });
        },

        showEditChoice(id) {
            const modal = document.createElement('div');
            modal.className = 'modal';
            modal.style.display = 'flex';
            const s = this.getLyricById(id);
            const isFav = !!(s && s.favorite);
            const favLabel = isFav ? 'Remove Favorite' : 'Add to Favorites';
            modal.innerHTML = `
              <div class="modal-content edit-options-modal">
                <h2>Edit Options</h2>
                <div class="modal-actions edit-options-actions">
                  <button class="btn" id="copy-song">Copy Title + Lyrics</button>
                  <button class="btn" id="toggle-favorite">${favLabel}</button>
                  <button class="btn" id="edit-quick">Quick Edit</button>
                  <button class="btn primary" id="edit-full">Full Editor</button>
                  <button class="btn danger" id="delete-song">Delete</button>
                  <button class="btn" id="edit-cancel">Cancel</button>
                </div>
              </div>`;
            document.body.appendChild(modal);
            const close = ()=> modal.remove();
            modal.addEventListener('click', (e)=> { if (e.target === modal) close(); });
            // Copy button handler
            const copyBtn = modal.querySelector('#copy-song');
            if (copyBtn) {
                copyBtn.onclick = async () => {
                    try {
                        const song = this.getLyricById(id);
                        if (!song) { close(); return; }
                        const text = `${song.title || ''}\n\n${song.lyrics || ''}`;
                        if (navigator.clipboard && window.isSecureContext) {
                            await navigator.clipboard.writeText(text);
                        } else {
                            const ta = document.createElement('textarea');
                            ta.value = text; ta.style.position='fixed'; ta.style.left='-9999px';
                            document.body.appendChild(ta); ta.focus(); ta.select();
                            document.execCommand('copy'); ta.remove();
                        }
                        showToast('Copied song (title + lyrics).', 'success');
                    } catch (err) {
                        console.error('Copy failed', err);
                        showToast('Copy failed.', 'error');
                    } finally { close(); }
                };
            }
            modal.querySelector('#edit-quick').onclick = () => { close(); this.openSongModal(id); };
            modal.querySelector('#edit-full').onclick = () => { close(); navigateWithTransition(`editor/editor.html?songId=${encodeURIComponent(id)}`); };
            const favBtn = modal.querySelector('#toggle-favorite');
            if (favBtn) {
                favBtn.onclick = async () => {
                    try {
                        const song = this.getLyricById(id);
                        if (!song) { close(); return; }
                        song.favorite = !song.favorite;
                        await DB.putSong(song);
                        await this.saveData();
                        this.renderSongs();
                        showToast(song.favorite ? 'Added to favorites' : 'Removed from favorites', 'success');
                    } catch (e) { showToast('Failed to update favorite', 'error'); }
                    finally { close(); }
                };
            }
            const delBtn = modal.querySelector('#delete-song');
            if (delBtn) {
                delBtn.onclick = () => { close(); this.deleteSong(id); };
            }
            modal.querySelector('#edit-cancel').onclick = () => close();
        },

        updateExportFormatOptions() {
            const what = (document.querySelector('input[name="export-what"]:checked')?.value)||'current';
            const options = document.getElementById('export-format-options');
            if (!options) return;
            if (what === 'everything') {
                options.innerHTML = '<label><input type="radio" name="export-format" value="json" checked> JSON (songs + setlists)</label> <label><input type="radio" name="export-format" value="json-songs"> Songs only (JSON)</label>';
            } else if (what === 'songs') {
                options.innerHTML = '<label><input type="radio" name="export-format" value="json" checked> JSON (array)</label> <label><input type="radio" name="export-format" value="json-lyricsmith"> JSON (library format)</label> <label><input type="radio" name="export-format" value="csv"> CSV</label> <label><input type="radio" name="export-format" value="txt"> TXT (one file)</label> <label><input type="radio" name="export-format" value="txt-separate"> TXT (separate files)</label> <label><input type="radio" name="export-format" value="pdf"> PDF</label>';
            } else {
                options.innerHTML = [
                  '<label><input type="radio" name="export-format" value="json" checked> JSON</label>',
                  '<label><input type="radio" name="export-format" value="txt-list"> TXT (track list)</label>',
                  '<label><input type="radio" name="export-format" value="txt-lyrics"> TXT (track list + lyrics)</label>',
                  '<label><input type="radio" name="export-format" value="pdf"> PDF</label>'
                ].join(' ');
            }
        },

        loadBackupReminderSettings() {
            const enabled = localStorage.getItem('backupReminderEnabled') === '1';
            const days = Number(localStorage.getItem('backupReminderDays')) || 30;
            this.backupReminderEnabled = enabled;
            this.backupReminderDays = days;
            const toggle = document.getElementById('backup-reminder-toggle');
            const select = document.getElementById('backup-reminder-days');
            if (toggle) toggle.checked = enabled;
            if (select) select.value = String(days);
        },

        saveBackupReminderSettings(enabled, days) {
            this.backupReminderEnabled = !!enabled;
            this.backupReminderDays = Number(days) || 30;
            localStorage.setItem('backupReminderEnabled', this.backupReminderEnabled ? '1' : '0');
            localStorage.setItem('backupReminderDays', String(this.backupReminderDays));
        },

        checkBackupReminder() {
            if (!this.backupReminderEnabled) return;
            if (sessionStorage.getItem('backupReminderShown') === '1') return;
            const last = Number(localStorage.getItem('lastExportAt')) || 0;
            const ageDays = last ? (Date.now() - last) / (1000 * 60 * 60 * 24) : Infinity;
            if (ageDays >= this.backupReminderDays) {
                showToast('Backup reminder: export a full backup to keep your data safe.', 'info', 4500);
                sessionStorage.setItem('backupReminderShown', '1');
            }
        },

        recordFullBackupExport() {
            localStorage.setItem('lastExportAt', String(Date.now()));
        },

        handleExportDownload() {
            const what = (document.querySelector('input[name="export-what"]:checked')?.value)||'current';
            const format = (document.querySelector('input[name="export-format"]:checked')?.value)||'json';
            try {
                let exportedSongsCount = 0;
                let isFullBackup = false;
                if (what === 'everything') {
                    if (format === 'json-songs') {
                        const payload = { songs: this.songs };
                        exportedSongsCount = this.songs.length;
                        this.downloadFile('lyricsmith-library.json', JSON.stringify(payload, null, 2), 'application/json');
                    } else {
                        const blob = this.exportEverything();
                        exportedSongsCount = this.songs.length;
                        this.downloadFile('setlist-backup.json', blob, 'application/json');
                        isFullBackup = true;
                    }
                } else if (what === 'songs') {
                    if (format === 'pdf') {
                        exportedSongsCount = this.songs.length;
                        this.exportSongsPDF();
                    } else if (format === 'txt-separate') {
                        exportedSongsCount = this.songs.length;
                        this.exportSongsAsSeparateTxt();
                    } else {
                        const { content, mime, ext } = this.exportSongs({ format });
                        exportedSongsCount = this.songs.length;
                        this.downloadFile(`songs.${ext}`, content, mime);
                    }
                } else {
                    if (format === 'pdf') {
                        this.exportSetlistsPDF({ which: what });
                    } else {
                        const { content, mime, ext, name } = this.exportSetlists({ which: what, format });
                        this.downloadFile(`${name}.${ext}`, content, mime);
                        if (what === 'current') {
                            const sl = this.currentSetlistId ? SetlistsManager.getSetlistById(this.currentSetlistId) : null;
                            exportedSongsCount = sl ? (sl.songs||[]).length : 0;
                        } else {
                            // all setlists export: count unique song ids across setlists
                            const lists = SetlistsManager.getAllSetlists();
                            const ids = new Set();
                            for (const s of lists) (s.songs||[]).forEach(id => ids.add(id));
                            exportedSongsCount = ids.size;
                        }
                        if (what === 'all-setlists' && format === 'json') isFullBackup = true;
                    }
                }
                if (isFullBackup) this.recordFullBackupExport();
                const countMsg = exportedSongsCount ? ` (${exportedSongsCount} song(s))` : '';
                showToast(`Export ready${countMsg}.`, 'success');
                const m = document.getElementById('export-modal'); if (m) hideAnimatedModal(m);
            } catch (e) {
                console.error(e); showToast('Export failed.', 'error');
            }
        },

        // Export songs to a print-friendly PDF with per-page autofit
        exportSongsPDF() {
            const songs = this.songs.slice();
            const escapeHTML = (s) => String(s||'')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#39;');

            const htmlParts = [];
            htmlParts.push(`<!DOCTYPE html><html><head><meta charset="utf-8">`);
            htmlParts.push(`<title>Songs - PDF</title>`);
            htmlParts.push(`<style>
                @page { size: A4; margin: 0.75in; }
                body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #000; }
                .song { break-before: page; page-break-before: always; font-size: 14pt; text-align: left; }
                .song:first-child { break-before: auto; page-break-before: auto; }
                h1 { font-weight: 700; margin: 0 0 0.6em; line-height: 1.15; }
                .lyrics { white-space: pre-wrap; line-height: 1.4; overflow-wrap: anywhere; hyphens: auto; }
                @media screen { body { background:#f5f5f5; } .song { box-sizing: border-box; width: 8.27in; margin: 12px auto; background:#fff; border: 1px solid #ddd; padding: 0.75in; } }
            </style></head><body>`);
            for (const s of songs) {
                const title = escapeHTML(s.title || 'Untitled');
                const lyrics = escapeHTML(s.lyrics || '');
                htmlParts.push(`<section class="song"><h1>${title}</h1><div class="lyrics">${lyrics}</div></section>`);
            }
            htmlParts.push(`<script>
              window.addEventListener('load', () => {
                try { window.focus(); window.print(); } catch(e){}
              });
            </script>`);
            htmlParts.push(`</body></html>`);
            const html = htmlParts.join('');

            const win = window.open('', '_blank');
            if (!win) { alert('Popup blocked: allow popups to export PDF.'); return; }
            try { win.opener = null; } catch {}
            win.document.open();
            win.document.write(html);
            win.document.close();
            // Printing will be triggered by the injected script after autofit.
        },

        exportSongs({ format }) {
            const songs = this.songs.slice();
            if (format === 'json') return { content: JSON.stringify(songs, null, 2), mime: 'application/json', ext: 'json' };
            if (format === 'json-lyricsmith') {
                const payload = {
                    version: '1.0',
                    exportDate: new Date().toISOString(),
                    songCount: songs.length,
                    songs
                };
                return { content: JSON.stringify(payload, null, 2), mime: 'application/json', ext: 'json' };
            }
            if (format === 'csv') {
                const header = 'Title,Lyrics\n';
                const esc = (s)=> '"'+String(s||'').replace(/"/g,'""')+'"';
                const rows = songs.map(s=> `${esc(s.title)},${esc(s.lyrics)}`).join('\n');
                return { content: header+rows, mime: 'text/csv', ext: 'csv' };
            }
            // txt concatenation
            const txt = songs.map(s=> `${s.title}\n\n${s.lyrics}`).join('\n\n-----\n\n');
            return { content: txt, mime: 'text/plain', ext: 'txt' };
        },

        exportSetlists({ which, format }) {
            const all = SetlistsManager.getAllSetlists();
            const current = which === 'current' ? all.find(s=> s.id === this.currentSetlistId) : null;
            if (which === 'current' && !current) throw new Error('No setlist selected');
            const setlists = which === 'current' ? [current] : all;
            if (format === 'json') {
                const data = setlists.map(sl=> ({ setlist: sl, songs: sl.songs.map(id=> this.songs.find(s=> s.id===id)).filter(Boolean) }));
                const name = which === 'current' ? (current.name || 'setlist') : 'setlists';
                return { content: JSON.stringify(data, null, 2), mime: 'application/json', ext: 'json', name: name.replace(/\s+/g,'_') };
            }
            const name = which === 'current' ? (current.name || 'setlist') : 'setlists';
            if (format === 'txt-list') {
                // Just the track list (titles) per setlist
                const content = setlists.map(sl=> `# ${sl.name}\n` + sl.songs.map(id=> (this.songs.find(s=> s.id===id)?.title)||'').filter(Boolean).join('\n')).join('\n\n');
                return { content, mime: 'text/plain', ext: 'txt', name: name.replace(/\s+/g,'_') };
            }
            if (format === 'txt-lyrics') {
                // Track list with lyrics combined
                const sections = [];
                for (const sl of setlists) {
                    const lines = [`# ${sl.name}`];
                    for (const id of sl.songs) {
                        const s = this.songs.find(x=> x.id === id);
                        if (!s) continue;
                        lines.push(`${s.title}`);
                        lines.push('');
                        lines.push(String(s.lyrics || ''));
                        lines.push('');
                        lines.push('-----');
                        lines.push('');
                    }
                    sections.push(lines.join('\n'));
                }
                const content = sections.join('\n');
                return { content, mime: 'text/plain', ext: 'txt', name: name.replace(/\s+/g,'_') };
            }
            // Default: legacy text list (titles)
            const content = setlists.map(sl=> `# ${sl.name}\n` + sl.songs.map(id=> (this.songs.find(s=> s.id===id)?.title)||'').filter(Boolean).join('\n')).join('\n\n');
            return { content, mime: 'text/plain', ext: 'txt', name: name.replace(/\s+/g,'_') };
        },

        exportEverything() {
            const setlists = SetlistsManager.getAllSetlists();
            const data = { songs: this.songs, setlists };
            return JSON.stringify(data, null, 2);
        },

        openImportModal(type = 'songs') {
            const modal = document.getElementById('import-modal');
            if (!modal) return;
            const radio = document.querySelector(`input[name="import-type"][value="${type}"]`);
            if (radio) radio.checked = true;
            this.updateCloudActionState();
            this.updateImportOptionsVisibility();
            showAnimatedModal(modal);
        },

        openEditSetlistModal() {
            const modal = document.getElementById('edit-setlist-modal');
            if (!modal) return;
            showAnimatedModal(modal);
        },

        closeEditSetlistModal() {
            const modal = document.getElementById('edit-setlist-modal');
            if (!modal) return;
            hideAnimatedModal(modal);
        },

        openImportExportModal() {
            // Show a simple choice modal
            const choiceModal = document.createElement('div');
            choiceModal.className = 'modal';
            choiceModal.style.display = 'flex';
            choiceModal.innerHTML = `
                <div class="modal-content">
                    <h2>Import or Export</h2>
                    <div class="modal-section">
                        <button id="choice-import-btn" class="btn" style="width:100%;margin-bottom:0.5rem"><i class="fas fa-file-import"></i> Import</button>
                        <button id="choice-export-btn" class="btn" style="width:100%"><i class="fas fa-file-export"></i> Export</button>
                    </div>
                    <div class="modal-actions">
                        <button id="choice-cancel-btn" class="btn">Cancel</button>
                    </div>
                </div>
            `;
            document.body.appendChild(choiceModal);
            choiceModal.querySelector('#choice-import-btn').addEventListener('click', () => {
                choiceModal.remove();
                this.openImportModal('setlist');
            });
            choiceModal.querySelector('#choice-export-btn').addEventListener('click', () => {
                choiceModal.remove();
                const m = document.getElementById('export-modal');
                showAnimatedModal(m);
                this.updateCloudActionState();
                this.updateExportFormatOptions();
            });
            choiceModal.querySelector('#choice-cancel-btn').addEventListener('click', () => {
                choiceModal.remove();
            });
        },

        // Export songs as separate .txt files (bundled into a ZIP)
        exportSongsAsSeparateTxt() {
            const sanitizeFilename = (name) => {
                const base = String(name || 'Untitled').replace(/[\\/:*?"<>|]+/g, '').trim().replace(/\s+/g, '_');
                return base.slice(0, 80) || 'song';
            };
            const encoder = new TextEncoder();
            const files = this.songs.map(s => {
                const title = s.title || 'Untitled';
                const text = `${title}\n\n${s.lyrics || ''}`;
                return { name: sanitizeFilename(title) + '.txt', bytes: encoder.encode(text) };
            });
            const blob = this._buildZipFromFiles(files);
            this.downloadFile('songs_txt_bundle.zip', blob, 'application/zip');
        },

        // Minimal ZIP builder (store mode, no compression)
        _buildZipFromFiles(files) {
            const makeUint8 = (len) => new Uint8Array(len);
            const writeU16 = (arr, off, val) => { arr[off] = val & 0xff; arr[off+1] = (val >>> 8) & 0xff; };
            const writeU32 = (arr, off, val) => { arr[off] = val & 0xff; arr[off+1] = (val >>> 8) & 0xff; arr[off+2] = (val >>> 16) & 0xff; arr[off+3] = (val >>> 24) & 0xff; };
            const dosDateTime = (d) => {
                const year = d.getFullYear();
                const month = d.getMonth() + 1; // 1-12
                const day = d.getDate();
                const hours = d.getHours();
                const minutes = d.getMinutes();
                const seconds = Math.floor(d.getSeconds() / 2);
                const dt = ((year - 1980) << 9) | (month << 5) | day;
                const tm = (hours << 11) | (minutes << 5) | seconds;
                return { dt, tm };
            };
            // CRC32 table
            const crcTable = (() => {
                const table = new Uint32Array(256);
                for (let n = 0; n < 256; n++) {
                    let c = n;
                    for (let k = 0; k < 8; k++) c = (c & 1) ? (0xedb88320 ^ (c >>> 1)) : (c >>> 1);
                    table[n] = c >>> 0;
                }
                return table;
            })();
            const crc32 = (bytes) => {
                let c = 0xffffffff;
                for (let i = 0; i < bytes.length; i++) c = crcTable[(c ^ bytes[i]) & 0xff] ^ (c >>> 8);
                return (c ^ 0xffffffff) >>> 0;
            };

            const parts = [];
            const central = [];
            let offset = 0;
            const now = new Date();
            const { dt, tm } = dosDateTime(now);
            for (const f of files) {
                const nameBytes = new TextEncoder().encode(f.name);
                const data = f.bytes instanceof Uint8Array ? f.bytes : new Uint8Array(f.bytes);
                const crc = crc32(data);
                // Local file header
                const lf = makeUint8(30 + nameBytes.length);
                writeU32(lf, 0, 0x04034b50);
                writeU16(lf, 4, 20); // version needed
                writeU16(lf, 6, 0);  // flags
                writeU16(lf, 8, 0);  // compression (0=store)
                writeU16(lf, 10, tm);
                writeU16(lf, 12, dt);
                writeU32(lf, 14, crc);
                writeU32(lf, 18, data.length);
                writeU32(lf, 22, data.length);
                writeU16(lf, 26, nameBytes.length);
                writeU16(lf, 28, 0); // extra len
                lf.set(nameBytes, 30);
                parts.push(lf, data);
                const localOffset = offset;
                offset += lf.length + data.length;
                // Central directory header
                const cf = makeUint8(46 + nameBytes.length);
                writeU32(cf, 0, 0x02014b50);
                writeU16(cf, 4, 20); // version made by
                writeU16(cf, 6, 20); // version needed
                writeU16(cf, 8, 0);  // flags
                writeU16(cf, 10, 0); // compression
                writeU16(cf, 12, tm);
                writeU16(cf, 14, dt);
                writeU32(cf, 16, crc);
                writeU32(cf, 20, data.length);
                writeU32(cf, 24, data.length);
                writeU16(cf, 28, nameBytes.length);
                writeU16(cf, 30, 0); // extra len
                writeU16(cf, 32, 0); // comment len
                writeU16(cf, 34, 0); // disk number
                writeU16(cf, 36, 0); // internal attrs
                writeU32(cf, 38, 0); // external attrs
                writeU32(cf, 42, localOffset);
                cf.set(nameBytes, 46);
                central.push(cf);
            }
            const centralStart = offset;
            for (const c of central) { parts.push(c); offset += c.length; }
            const centralSize = offset - centralStart;
            // End of central directory
            const eocd = makeUint8(22);
            writeU32(eocd, 0, 0x06054b50);
            writeU16(eocd, 4, 0); // disk
            writeU16(eocd, 6, 0); // start disk
            writeU16(eocd, 8, files.length);
            writeU16(eocd, 10, files.length);
            writeU32(eocd, 12, centralSize);
            writeU32(eocd, 16, centralStart);
            writeU16(eocd, 20, 0); // comment len
            parts.push(eocd);
            return new Blob(parts, { type: 'application/zip' });
        },

        // Export current/all setlists to a print-friendly PDF with per-page autofit
        exportSetlistsPDF({ which }) {
            const all = SetlistsManager.getAllSetlists();
            const current = which === 'current' ? all.find(s=> s.id === this.currentSetlistId) : null;
            if (which === 'current' && !current) { alert('No setlist selected.'); return; }
            const setlists = which === 'current' ? [current] : all;

            const songsInOrder = [];
            for (const sl of setlists) {
                for (const id of sl.songs) {
                    const song = this.songs.find(s=> s.id === id);
                    if (song) songsInOrder.push(song);
                }
            }

            const escapeHTML = (s) => String(s||'')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#39;');

            const htmlParts = [];
            htmlParts.push(`<!DOCTYPE html><html><head><meta charset="utf-8">`);
            const titleBase = which === 'current' ? (current?.name || 'Setlist') : 'All Setlists';
            htmlParts.push(`<title>${escapeHTML(titleBase)} - PDF</title>`);
            htmlParts.push(`<style>
                @page { size: A4; margin: 0.75in; }
                html, body { height: 100%; }
                body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #000; }
                .song { page-break-after: always; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; height: calc(100vh - 1.5in); box-sizing: border-box; padding: 0.75in; overflow: hidden; font-size: 14pt; text-align: left; }
                .song:last-child { page-break-after: auto; }
                h1 { font-weight: 700; margin: 0 0 0.6em; line-height: 1.15; }
                .lyrics { white-space: pre-wrap; line-height: 1.4; overflow-wrap: anywhere; hyphens: auto; }
                @media screen { body { background:#f5f5f5; } .song { box-sizing: border-box; width: 8.27in; height: 11.69in; margin: 12px auto; background:#fff; border: 1px solid #ddd; padding: 0.75in; } }
            </style></head><body>`);
            for (const s of songsInOrder) {
                const title = escapeHTML(s.title || 'Untitled');
                const lyrics = escapeHTML(s.lyrics || '');
                htmlParts.push(`<section class="song"><h1>${title}</h1><div class="lyrics">${lyrics}</div></section>`);
            }
            htmlParts.push(`<script>
              (function(){
                function fits(page){
                  return page.scrollHeight <= page.clientHeight - 1;
                }
                function applySizes(page, tSize, lSize, lHeight){
                  const title = page.querySelector('h1');
                  const lyrics = page.querySelector('.lyrics');
                  if (title) title.style.fontSize = tSize + 'pt';
                  if (lyrics) { lyrics.style.fontSize = lSize + 'pt'; lyrics.style.lineHeight = lHeight; }
                  void page.offsetHeight;
                }
                function fitPage(page){
                  const titleMin = 16;
                  let titleSize = 26;
                  let lyricsLow = 9, lyricsHigh = 20;
                  let lyricsSize = lyricsHigh;
                  let lineHeight = 1.4;
                  applySizes(page, titleSize, lyricsSize, lineHeight);
                  if (!fits(page)){
                    let low = lyricsLow, high = lyricsHigh;
                    for (let i=0; i<14; i++){
                      const mid = Math.floor((low + high) / 2);
                      applySizes(page, titleSize, mid, lineHeight);
                      if (fits(page)) { lyricsSize = mid; low = mid; }
                      else { high = mid - 1; }
                      if (high <= low) break;
                    }
                    applySizes(page, titleSize, lyricsSize, lineHeight);
                  }
                  while (!fits(page) && titleSize > titleMin){
                    titleSize -= 2;
                    applySizes(page, titleSize, lyricsSize, lineHeight);
                  }
                  if (!fits(page)){
                    lineHeight = 1.28;
                    applySizes(page, titleSize, lyricsSize, lineHeight);
                  }
                  if (!fits(page)){
                    page.style.padding = '0.6in';
                    void page.offsetHeight;
                  }
                }
                function fitAll(){
                  const pages = document.querySelectorAll('.song');
                  pages.forEach(p => {
                    p.removeAttribute('style');
                    const t = p.querySelector('h1'); const l = p.querySelector('.lyrics');
                    if (t) t.removeAttribute('style'); if (l) l.removeAttribute('style');
                  });
                  requestAnimationFrame(() => {
                    pages.forEach(p => fitPage(p));
                    setTimeout(() => { try { window.focus(); window.print(); } catch(e){} }, 200);
                  });
                }
                if (document.readyState === 'complete') fitAll();
                else window.addEventListener('load', fitAll);
              })();
            </script>`);
            htmlParts.push(`</body></html>`);
            const html = htmlParts.join('');

            const win = window.open('', '_blank');
            if (!win) { alert('Popup blocked: allow popups to export PDF.'); return; }
            win.document.open();
            win.document.write(html);
            win.document.close();
            // Printing will be triggered by the injected script after autofit.
        },

        updateImportOptionsVisibility() {
            const type = (document.querySelector('input[name="import-type"]:checked')?.value)||'songs';
            const dup = document.getElementById('songs-dup-label');
            const legacyNote = document.getElementById('legacy-import-note');
            const filesInput = document.getElementById('import-file-input');
            if (dup) dup.style.display = type === 'songs' ? 'block' : 'none';
            if (legacyNote) legacyNote.hidden = type !== 'legacy-supabase';
            if (filesInput) {
                filesInput.multiple = type === 'songs' || type === 'setlist';
                if (type === 'legacy-supabase' || type === 'restore') {
                    filesInput.accept = '.json,application/json';
                } else if (type === 'setlist') {
                    filesInput.accept = '.txt,.docx,.json';
                } else {
                    filesInput.accept = '.txt,.docx,.json,.csv';
                }
            }
        },

        async handleImportRun() {
            const type = (document.querySelector('input[name="import-type"]:checked')?.value)||'songs';
            const filesInput = document.getElementById('import-file-input');
            const files = filesInput?.files;
            if (!files || !files.length) { showToast('Choose file(s) to import', 'info'); return; }
            try {
                if (type === 'songs') {
                    const mode = document.getElementById('songs-dup-mode')?.value || 'skip';
                    const result = await this.importSongs(files, mode);
                    showToast(`Imported ${result.added} songs (${result.skipped} skipped).`, 'success');
                } else if (type === 'setlist') {
                    const result = await this.importSetlistFiles(files);
                    if (result && result.setlist) {
                        this.currentSetlistId = result.setlist.id;
                        this.renderSetlists();
                    }
                } else if (type === 'legacy-supabase') {
                    const result = await this.importLegacyBackupToSupabase(files[0]);
                    showToast(result.message, result.imported ? 'success' : 'info', 4500);
                } else {
                    const before = this.songs.length;
                    const result = await this.restoreFromJSON(files[0]);
                    if (result) {
                        this.songs = await DB.getAllSongs();
                        await SetlistsManager.load();
                        this.renderSongs();
                        this.renderSetlists();
                        const after = this.songs.length;
                        const delta = Math.max(0, after - before);
                        showToast(`Restore complete (${delta} song(s) imported).`, 'success');
                    }
                }
                const m = document.getElementById('import-modal'); if (m) hideAnimatedModal(m);
                filesInput.value = '';
            } catch (e) {
                console.error(e);
                showToast(e?.message || 'Import failed.', 'error');
            }
        },

        async importLegacyBackupToSupabase(file) {
            const supabaseClient = window.SongBinderSupabase?.getClient?.();
            const user = AuthGate.getUser();

            if (!supabaseClient || !user) {
                throw new Error('Sign in with Google before importing to Supabase.');
            }

            const text = await file.text();
            let parsed;
            try {
                parsed = JSON.parse(text);
            } catch {
                throw new Error('That file is not valid JSON.');
            }

            if (!parsed || !Array.isArray(parsed.songs)) {
                throw new Error('Legacy backup must contain a top-level songs array.');
            }

            const normalizedSongs = parsed.songs
                .filter((song) => song && typeof song === 'object')
                .map((song) => ({
                    id: String(song.id || '').trim(),
                    title: normalizeSongTitleValue(song.title || ''),
                    lyrics: normalizeLyricsBlock(song.title || '', song.lyrics || ''),
                }))
                .filter((song) => song.id && song.title);

            if (!normalizedSongs.length) {
                throw new Error('No valid songs were found in that backup file.');
            }

            const { data: existingSongs, error: existingError } = await supabaseClient
                .from('songs')
                .select('id,title,lyrics')
                .eq('user_id', user.id);

            if (existingError) throw existingError;

            const existingIds = new Set((existingSongs || []).map((song) => String(song.id || '').trim()).filter(Boolean));
            const existingContent = new Set(
                (existingSongs || []).map((song) => `${String(song.title || '').trim().toLowerCase()}::${String(song.lyrics || '').trim()}`)
            );
            const seenImportIds = new Set();
            const seenImportContent = new Set();
            const rowsToInsert = [];
            let skipped = 0;

            for (const song of normalizedSongs) {
                const contentKey = `${song.title.trim().toLowerCase()}::${song.lyrics.trim()}`;
                if (
                    existingIds.has(song.id) ||
                    existingContent.has(contentKey) ||
                    seenImportIds.has(song.id) ||
                    seenImportContent.has(contentKey)
                ) {
                    skipped += 1;
                    continue;
                }
                seenImportIds.add(song.id);
                seenImportContent.add(contentKey);
                rowsToInsert.push({
                    id: song.id,
                    user_id: user.id,
                    title: song.title,
                    lyrics: song.lyrics,
                });
            }

            if (!rowsToInsert.length) {
                return {
                    imported: 0,
                    skipped,
                    message: 'No new songs to import. That backup already appears to be in Supabase.',
                };
            }

            const { error: insertError } = await supabaseClient.from('songs').insert(rowsToInsert);
            if (insertError) throw insertError;

            const imported = rowsToInsert.length;
            const message = skipped
                ? `Imported ${imported} song(s) to Supabase. Skipped ${skipped} duplicate song(s).`
                : `Imported ${imported} song(s) to Supabase.`;

            return { imported, skipped, message };
        },

        async importSongs(fileList, dupMode) {
            let added=0, skipped=0;
            const titleKey = (s)=> (s.title||'').trim().toLowerCase();
            const existing = new Map(this.songs.map(s=> [titleKey(s), 1]));
            const ensureUniqueTitle = (t)=>{
                if (dupMode === 'copy') {
                    let base=t, n=1; let cand=base;
                    while (existing.has(cand.trim().toLowerCase())) { n++; cand = `${base} (Copy ${n})`; }
                    return cand;
                }
                return t;
            };
            const addOne = async (song)=>{
                const key = titleKey(song);
                if (existing.has(key) && dupMode==='skip') { skipped++; return; }
                const title = ensureUniqueTitle(song.title||'Untitled');
                const s = { id: song.id || (Date.now().toString()+Math.random().toString(16).slice(2)), title, lyrics: song.lyrics||'' };
                this.songs.push(s); existing.set(title.trim().toLowerCase(),1); added++;
                await DB.putSong(s);
            };
            for (const file of fileList) {
                if (/\.json$/i.test(file.name)) {
                    const text = await file.text();
                    let parsed;
                    try { parsed = JSON.parse(text); } catch { parsed = null; }
                    if (!parsed) continue;
                    // Accept multiple formats:
                    // - Array of songs [{ title, lyrics, ... }]
                    // - Object with { songs: [...] } (library export or full backups)
                    // - Object with { setlist, songs } or Array of such (import just the songs)
                    let songsToAdd = [];
                    if (Array.isArray(parsed)) {
                        // Could be an array of songs, or an array of { setlist, songs }
                        if (parsed.length && parsed[0] && typeof parsed[0] === 'object' && 'setlist' in parsed[0] && 'songs' in parsed[0]) {
                            for (const entry of parsed) { if (entry && Array.isArray(entry.songs)) songsToAdd.push(...entry.songs); }
                        } else {
                            songsToAdd = parsed;
                        }
                    } else if (parsed && typeof parsed === 'object') {
                        if (Array.isArray(parsed.songs)) {
                            songsToAdd = parsed.songs;
                        }
                    }
                    for (const s of songsToAdd) await addOne(s);
                } else if (/\.csv$/i.test(file.name)) {
                    const text = await file.text();
                    const rows = this.parseCSV(text);
                    for (let i=1;i<rows.length;i++){ const [Title, Lyrics] = rows[i]; if (!Title) continue; await addOne({ title: Title, lyrics: Lyrics||'' }); }
                } else if (/\.txt$/i.test(file.name)) {
                    const text = await file.text();
                    const title = this.normalizeTitle(file.name);
                    await addOne({ title, lyrics: text });
                } else if (/\.docx$/i.test(file.name)) {
                    const buf = await file.arrayBuffer();
                    const result = await mammoth.extractRawText({ arrayBuffer: buf });
                    const title = this.normalizeTitle(file.name);
                    await addOne({ title, lyrics: result.value });
                }
            }
            await this.saveData();
            this.renderSongs();
            return { added, skipped };
        },

        async importSetlistFiles(fileList) {
            const file = fileList[0]; if (!file) return null;
            if (/\.json$/i.test(file.name)) {
                const text = await file.text();
                const obj = JSON.parse(text);
                if (Array.isArray(obj)) {
                    // array of { setlist, songs }
                    let last=null;
                    for (const entry of obj) {
                        const { setlist, songs } = entry;
                        if (songs && songs.length) await this.mergeSongsByTitle(songs, 'skip');
                        last = SetlistsManager.addSetlist(setlist.name, (setlist.songs||[]).filter(Boolean));
                    }
                    return { setlist: last };
                } else if (obj && obj.setlist) {
                    if (obj.songs && obj.songs.length) await this.mergeSongsByTitle(obj.songs, 'skip');
                    const sl = SetlistsManager.addSetlist(obj.setlist.name, (obj.setlist.songs||[]).filter(Boolean));
                    return { setlist: sl };
                }
                return null;
            }
            // txt/docx flow with fuzzy matching
            if (/\.docx$/i.test(file.name)) {
                const buf = await file.arrayBuffer();
                const result = await mammoth.extractRawText({ arrayBuffer: buf });
                return finishImportSetlist(file.name.replace(/\.[^/.]+$/, ''), result.value);
            } else {
                const text = await file.text();
                return finishImportSetlist(file.name.replace(/\.[^/.]+$/, ''), text);
            }
        },

        async restoreFromJSON(file) {
            const text = await file.text();
            const obj = JSON.parse(text);
            if (!obj || (!Array.isArray(obj.songs) && !Array.isArray(obj.setlists))) return false;
            if (Array.isArray(obj.songs)) {
                await this.mergeSongsByTitle(obj.songs, 'skip');
            }
            if (Array.isArray(obj.setlists)) {
                for (const s of obj.setlists) {
                    // de-dup setlist names
                    let name = s.name?.trim() || 'Imported';
                    const existing = SetlistsManager.getAllSetlists().map(x=>x.name.toLowerCase());
                    let base=name, n=1; while (existing.includes(name.toLowerCase())) { name = `${base} (Imported ${n++})`; }
                    const sl = { id: s.id || (Date.now().toString()+Math.random().toString(16).slice(2)), name, songs: (s.songs||[]).filter(Boolean), createdAt: Date.now(), updatedAt: Date.now() };
                    await DB.putSetlist(sl);
                }
                await SetlistsManager.load();
            }
            return true;
        },

        async mergeSongsByTitle(incoming, dupMode) {
            const titleKey = (s)=> (s.title||'').trim().toLowerCase();
            const existing = new Map(this.songs.map(s=> [titleKey(s), s]));
            for (const s of incoming) {
                const k = titleKey(s);
                if (existing.has(k) && dupMode==='skip') continue;
                let title = s.title || 'Untitled';
                if (existing.has(k) && dupMode==='copy') {
                    let base=title, n=1; let cand=base;
                    while (existing.has(cand.trim().toLowerCase())) { n++; cand = `${base} (Copy ${n})`; }
                    title = cand;
                }
                const rawSong = { id: s.id || (Date.now().toString()+Math.random().toString(16).slice(2)), title, lyrics: s.lyrics||'' };
                const { song: normalizedSong } = this.normalizeSongRecord(rawSong);
                this.songs.push(normalizedSong);
                existing.set((normalizedSong.title || '').trim().toLowerCase(), normalizedSong);
                await DB.putSong(normalizedSong);
            }
            await this.saveData();
        },

        parseCSV(text) {
            const rows = [];
            let i=0, field='', row=[], inq=false; const push=()=>{ row.push(field); field=''; };
            while (i<text.length){
                const c=text[i++];
                if (inq){
                    if (c==='"'){ if (text[i]==='"'){ field+='"'; i++; } else { inq=false; } }
                    else field+=c;
                } else {
                    if (c===','){ push(); }
                    else if (c==='\n'){ push(); rows.push(row); row=[]; }
                    else if (c==='\r'){ /* ignore */ }
                    else if (c==='"'){ inq=true; }
                    else field+=c;
                }
            }
            push(); rows.push(row); return rows;
        },

        // Song UI and Actions
        renderSongs() {
            // Empty state when there are no songs in the DB
            if (!Array.isArray(this.songs) || this.songs.length === 0) {
                this.songList.innerHTML = `
                    <div class="empty-message">
                      <p>Add your first song to get started.</p>
                      <div style="display:flex; gap:0.5rem; flex-wrap:wrap; justify-content:center;">
                        <button id="new-song-btn" class="btn primary"><i class="fas fa-plus"></i> New Song</button>
                        <button id="upload-hint-btn" class="btn"><i class="fas fa-upload"></i> Upload Songs (.txt, .docx, .json, .csv)</button>
                      </div>
                    </div>
                `;
                // Wire the hint button to the hidden file input
                const hintBtn = document.getElementById('upload-hint-btn');
                if (hintBtn) {
                    hintBtn.addEventListener('click', () => {
                        document.getElementById('song-upload-input')?.click();
                    });
                }
                const newBtn = document.getElementById('new-song-btn');
                if (newBtn) {
                    newBtn.addEventListener('click', async () => {
                        try {
                            const id = Date.now().toString() + Math.random().toString(16).slice(2);
                            const song = { id, title: 'New Song', lyrics: '' };
                            await DB.putSong(song);
                            this.songs = await DB.getAllSongs();
                            navigateWithTransition(`editor/editor.html?songId=${encodeURIComponent(id)}`);
                        } catch (e) { console.error('Failed to create new song', e); }
                    });
                }
                return;
            }

            const query = (this.songSearchInput?.value || '').trim();
            let filteredSongs = this.searchLyrics(query);
            const favOnly = (localStorage.getItem('songsFavoritesOnly') === '1');
            if (favOnly) filteredSongs = filteredSongs.filter(s => !!s.favorite);
            filteredSongs = this.applySongSort(filteredSongs);
            this.songList.innerHTML = filteredSongs.map(song => `
                <div class="song-item" data-id="${song.id}">
                    <span class="song-title">${escapeHTML(song.title)}</span>
                    <div class="song-actions">
                        <button class="song-menu-btn" title="Song options" aria-label="Song options">
                            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
                        </button>
                    </div>
                </div>
            `).join('');

            document.querySelectorAll('.song-menu-btn').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    const id = e.target.closest('.song-item').dataset.id;
                    this.showEditChoice(id);
                });
            });

            // No inline delete or favorite here; both are in the edit options modal now.

            // Long-press to copy title + lyrics with section labels
            const LONG_PRESS_MS = 650;
            let pressTimer = null;
            let pressTargetId = null;
            let moved = false;
            const onTouchStart = (e) => {
                const item = e.currentTarget; // bound element
                // Ignore long-press if starting on action buttons/icons
                const target = e.target;
                if (target && (target.closest('.song-actions') || target.closest('.btn'))) {
                    return;
                }
                pressTargetId = item.dataset.id;
                moved = false;
                clearTimeout(pressTimer);
                pressTimer = setTimeout(async () => {
                    const song = this.getLyricById(pressTargetId);
                    if (!song) return;
                    const text = `${song.title || ''}\n\n${song.lyrics || ''}`;
                    try {
                        if (navigator.clipboard && window.isSecureContext) {
                            await navigator.clipboard.writeText(text);
                        } else {
                            const ta = document.createElement('textarea');
                            ta.value = text; ta.className = 'visually-hidden-clipboard';
                            document.body.appendChild(ta); ta.focus(); ta.select();
                            document.execCommand('copy'); ta.remove();
                        }
                        showToast('Copied song (title + lyrics).', 'success');
                    } catch { showToast('Copy failed.', 'error'); }
                }, LONG_PRESS_MS);
            };
            const onTouchEnd = () => { clearTimeout(pressTimer); pressTargetId = null; };
            const onTouchMove = () => { moved = true; clearTimeout(pressTimer); };
            this.songList.querySelectorAll('.song-item').forEach(item => {
                item.addEventListener('touchstart', onTouchStart, { passive: true });
                item.addEventListener('touchend', onTouchEnd);
                item.addEventListener('touchcancel', onTouchEnd);
                item.addEventListener('touchmove', onTouchMove, { passive: true });
            });
        },

        applySongSort(list) {
            const arr = (list || []).slice();
            const mode = this.sortMode || 'alpha-asc';
            const byTitle = (a, b) => (a.title||'').localeCompare(b.title||'');
            const getEdited = (s)=> {
                const t = s.lastEditedAt || s.updatedAt || s.createdAt || 0;
                const n = typeof t === 'string' ? Date.parse(t) : t;
                return isNaN(n) ? 0 : n;
            };
            const byEditedDesc = (a, b) => getEdited(b) - getEdited(a);
            const byEditedAsc = (a, b) => getEdited(a) - getEdited(b);
            switch (mode) {
                case 'alpha-desc': arr.sort((a,b)=> byTitle(b,a)); break;
                case 'edited-desc': arr.sort(byEditedDesc); break;
                case 'edited-asc': arr.sort(byEditedAsc); break;
                case 'alpha-asc':
                default: arr.sort(byTitle); break;
            }
            return arr;
        },

        openSongModal(id = null) {
            this.currentSongId = id;
            if (id) {
                const song = this.getLyricById(id);
                this.songModalTitle.textContent = 'Edit Song';
                this.songTitleInput.value = song.title;
                this.songLyricsInput.value = song.lyrics;
            } else {
                this.songModalTitle.textContent = 'Add Song';
                this.songTitleInput.value = '';
                this.songLyricsInput.value = '';
            }
            this.songModal.style.display = 'block';
        },

        closeSongModal() {
            this.songModal.style.display = 'none';
        },

        async saveSong() {
            const title = this.normalizeTitle(this.songTitleInput.value.trim());
            const lyrics = this.songLyricsInput.value.trim();
            if (!title) return;
            const sanitizedLyrics = this.cleanLyricsForStorage(title, lyrics);
            if (this.currentSongId) {
                const song = this.songs.find(s => s.id === this.currentSongId);
                if (!song) return;
                song.title = title;
                song.lyrics = sanitizedLyrics;
                song.lastEditedAt = new Date().toISOString();
                const { song: normalizedSong } = this.normalizeSongRecord(song);
                Object.assign(song, normalizedSong);
                try { await DB.putSong(song); } catch (e) {}
            } else {
                if (this.isDuplicateTitle(title)) {
                    this.closeSongModal();
                    return;
                }
                let newSong = {
                    id: Date.now().toString(),
                    title,
                    lyrics: sanitizedLyrics,
                    createdAt: new Date().toISOString(),
                    lastEditedAt: new Date().toISOString(),
                };
                const { song: normalizedSong } = this.normalizeSongRecord(newSong);
                newSong = normalizedSong;
                this.songs.push(newSong);
                try { await DB.putSong(newSong); } catch (e) {}
            }
            await this.saveData();
            this.renderSongs();
            this.closeSongModal();
        },

        deleteSong(id) {
            const inSetlists = SetlistsManager.getAllSetlists().filter(s => s.songs.includes(id));
            const count = inSetlists.length;
            const msg = count ? `Delete this song and update ${count} setlist(s)?` : 'Delete this song?';
            confirmDialog(msg, async () => {
                const song = this.getLyricById(id);
                const affected = inSetlists.map(s => s.id);
                await this.removeLyric(id);
                inSetlists.forEach(s => SetlistsManager.removeSongFromSetlist(s.id, id));
                this.renderSongs();
                this.renderSetlists();
                let undone = false;
                showActionToast(count ? `Deleted song and updated ${count} setlists.` : 'Deleted song.', {
                    type: 'success',
                    actionText: 'Undo',
                    onAction: async () => {
                        if (undone) return; undone = true;
                        if (song) {
                            try { await DB.putSong(song); } catch {}
                            this.songs.push(song);
                            for (const sid of affected) {
                                SetlistsManager.addSongToSetlist(sid, song.id);
                            }
                            await this.saveData();
                            this.renderSongs();
                            this.renderSetlists();
                        }
                    },
                    timeout: 8000
                });
            });
        },

        async handleFileUpload(event) {
            const files = Array.from(event.target.files || []);
            if (!files.length) return;

            let imported = 0, skipped = 0, failed = 0;

            const readAsArrayBuffer = (file) => new Promise((resolve, reject) => {
                const r = new FileReader();
                r.onerror = () => reject(new Error('read-failed'));
                r.onload = () => resolve(r.result);
                r.readAsArrayBuffer(file);
            });
            const readAsText = (file) => new Promise((resolve, reject) => {
                const r = new FileReader();
                r.onerror = () => reject(new Error('read-failed'));
                r.onload = () => resolve(r.result);
                r.readAsText(file);
            });

            const tasks = files.map(async (file) => {
                try {
                    if (/\.json$/i.test(file.name)) {
                        // Restore from backup JSON (songs + setlists)
                        const before = this.songs.length;
                        const ok = await this.restoreFromJSON(file);
                        if (ok) {
                            this.songs = await DB.getAllSongs();
                            try { await SetlistsManager.load(); } catch {}
                            try { this.renderSetlists(); } catch {}
                            const after = this.songs.length;
                            const delta = Math.max(0, after - before);
                            imported += delta;
                        } else {
                            failed++;
                        }
                    } else {
                        const title = this.normalizeTitle(file.name);
                        if (this.isDuplicateTitle(title)) { skipped++; return; }
                        let lyrics = '';
                        if (/\.docx$/i.test(file.name)) {
                            const buf = await readAsArrayBuffer(file);
                            const res = await mammoth.extractRawText({ arrayBuffer: buf });
                            lyrics = String(res?.value || '');
                        } else if (/\.csv$/i.test(file.name)) {
                            const text = await readAsText(file);
                            const rows = this.parseCSV(text);
                            for (let i=1;i<rows.length;i++){ const [Title, Lyrics] = rows[i]; if (!Title) continue; const s = { id: Date.now().toString()+Math.random().toString(16).slice(2), title: Title, lyrics: Lyrics||'' }; this.songs.push(s); try{ await DB.putSong(s); }catch{} imported++; }
                            return;
                        } else {
                            lyrics = String(await readAsText(file));
                        }
                        const s = { id: Date.now().toString() + Math.random().toString(16).slice(2), title, lyrics };
                        this.songs.push(s);
                        try { await DB.putSong(s); } catch {}
                        imported++;
                    }
                } catch (e) {
                    console.warn('Upload import failed for', file?.name, e);
                    failed++;
                }
            });

            await Promise.all(tasks);
            try { await this.saveData(); } catch {}
            this.renderSongs();

            // Reset input for subsequent imports
            event.target.value = '';

            const parts = [];
            if (imported) parts.push(`${imported} song(s) imported`);
            if (skipped) parts.push(`${skipped} skipped (duplicates)`);
            if (failed) parts.push(`${failed} failed`);
            const msg = parts.length ? `Upload complete: ${parts.join(', ')}.` : 'No files were imported.';
            showToast(msg, imported ? 'success' : 'info', 4000);
        },

        // Setlist Management
        renderSetlists() {
            const setlists = SetlistsManager.getAllSetlists();
            if (this.setlistSelect) {
                this.setlistSelect.innerHTML = '<option value="">Select a setlist...</option>';
            }
            if (this.performanceSetlistSelect) {
                let prev = this.performanceSetlistSelect.value || this.performanceSetlistId || '';
                // Restore from last performance or last active selection when available
                if (!prev) {
                    try {
                        const lpRaw = localStorage.getItem('lastPerformance');
                        const lp = lpRaw ? JSON.parse(lpRaw) : null;
                        if (lp && lp.setlistId) prev = lp.setlistId;
                        const las = localStorage.getItem('lastActiveSetlistId');
                        if (!prev && las) prev = las;
                    } catch {}
                }
                this.performanceSetlistSelect.innerHTML = '<option value="">All Songs</option>';
                this.performanceSetlistSelect.dataset.prevValue = prev;
            }

            setlists.forEach(s => {
                if (this.setlistSelect) {
                    const opt = document.createElement('option');
                    opt.value = s.id;
                    opt.textContent = s.name;
                    this.setlistSelect.appendChild(opt);
                }
                if (this.performanceSetlistSelect) {
                    const perfOpt = document.createElement('option');
                    perfOpt.value = s.id || '';
                    perfOpt.textContent = s.name;
                    this.performanceSetlistSelect.appendChild(perfOpt);
                }
            });

            if (this.performanceSetlistSelect) {
                const restore = this.performanceSetlistSelect.dataset.prevValue || '';
                if (restore) this.performanceSetlistSelect.value = restore;
            }

            if (setlists.length && this.currentSetlistId) {
                if (this.setlistSelect) this.setlistSelect.value = this.currentSetlistId;
                this.renderSetlistSongs();
            } else if (setlists.length > 0) {
                this.currentSetlistId = setlists[0].id;
                if (this.setlistSelect) this.setlistSelect.value = this.currentSetlistId;
                this.renderSetlistSongs();
            } else {
                this.currentSetlistId = null;
                this.availableSongsContainer.innerHTML = '<p>No songs available</p>';
                this.currentSetlistSongsContainer.innerHTML = '<p>No setlist selected</p>';
                this.currentSetlistTitle.textContent = 'Current Setlist';
            }
        },

        renderSetlistSongs() {
            const setlist = SetlistsManager.getSetlistById(this.currentSetlistId);
            const allSongs = this.songs;

            if (!setlist) {
                this.availableSongsContainer.innerHTML = '<p>No setlist selected</p>';
                this.currentSetlistSongsContainer.innerHTML = '<p>No setlist selected</p>';
                return;
            }

            const availableSongs = allSongs
                .filter(s => !setlist.songs.includes(s.id))
                .sort((a, b) => a.title.localeCompare(b.title));
            this.availableSongsContainer.innerHTML = availableSongs.length > 0 
                ? availableSongs.map(s =>
                    `<div class="song-item" data-id="${s.id}">
                        <span>${escapeHTML(s.title)}</span>
                        <button class="btn add-to-setlist-btn" title="Add to Setlist"><i class="fas fa-arrow-right"></i></button>
                    </div>`
                ).join('')
                : '<p>All songs are in this setlist</p>';

            const setlistSongs = setlist.songs.map(id => allSongs.find(s => s.id === id)).filter(Boolean);
            this.currentSetlistSongsContainer.innerHTML = setlistSongs.length > 0
                ? setlistSongs.map(s =>
                    `<div class="song-item sortable-setlist-song" data-id="${s.id}">
                        <span class="drag-handle" title="Drag to reorder"><i class="fas fa-grip-vertical"></i></span>
                        <span class="song-title">${escapeHTML(s.title)}</span>
                        <div>
                            <button class="btn move-up-btn" title="Move Up"><i class="fas fa-arrow-up"></i></button>
                            <button class="btn move-down-btn" title="Move Down"><i class="fas fa-arrow-down"></i></button>
                            <button class="btn remove-from-setlist-btn" title="Remove from Setlist"><i class="fas fa-times"></i></button>
                        </div>
                    </div>`
                ).join('')
                : '<p>No songs in this setlist</p>';

            if (this.sortableSetlist) {
                this.sortableSetlist.destroy();
            }
            // Gracefully handle environments where SortableJS failed to load (e.g., offline without CDN)
            if (typeof Sortable === 'undefined') {
                try { showToast('Drag-to-reorder unavailable (SortableJS not loaded).', 'info', 3000); } catch {}
                return;
            }
            this.sortableSetlist = Sortable.create(this.currentSetlistSongsContainer, {
                animation: 150,
                handle: '.drag-handle',
                ghostClass: 'drag-ghost',
                delay: 0,
                touchStartThreshold: 2,
                onEnd: (evt) => {
                    const newOrder = Array.from(this.currentSetlistSongsContainer.querySelectorAll('.song-item')).map(item => item.dataset.id);
                    SetlistsManager.updateSetlistSongs(this.currentSetlistId, newOrder);
                    this.renderSetlistSongs();
                }
            });
        },

        openSetlistModal(mode = 'add') {
            this.modalMode = mode;
            if (mode === 'rename' && this.currentSetlistId) {
                const setlist = SetlistsManager.getSetlistById(this.currentSetlistId);
                this.setlistModalTitle.textContent = 'Rename Setlist';
                this.setlistNameInput.value = setlist?.name || '';
            } else {
                this.setlistModalTitle.textContent = 'New Setlist';
                this.setlistNameInput.value = '';
            }
            this.setlistModal.style.display = 'block';
            this.setlistNameInput.focus();
        },

        closeSetlistModal() {
            this.setlistModal.style.display = 'none';
            this.modalMode = null;
        },

        saveSetlist() {
            const name = this.setlistNameInput.value.trim();
            if (!name) {
                showToast('Please enter a setlist name', 'error');
                return;
            }

            try {
                if (this.modalMode === 'rename' && this.currentSetlistId) {
                    SetlistsManager.renameSetlist(this.currentSetlistId, name);
                } else {
                    const setlist = SetlistsManager.addSetlist(name, []);
                    this.currentSetlistId = setlist.id;
                }
            } catch (err) {
                showToast(err.message || 'Could not save setlist.', 'error');
                return;
            }
            this.renderSetlists();
            this.closeSetlistModal();
        },

        handleDuplicateSetlist() {
            if (!this.currentSetlistId) return;
            const newSetlist = SetlistsManager.duplicateSetlist(this.currentSetlistId);
            if (newSetlist) {
                this.currentSetlistId = newSetlist.id;
                this.renderSetlists();
            }
        },

        handleDeleteSetlist() {
            if (!this.currentSetlistId) return;
            confirmDialog('Delete this setlist?', () => {
                SetlistsManager.deleteSetlist(this.currentSetlistId);
                this.currentSetlistId = null;
                this.renderSetlists();
                showToast('Deleted setlist.', 'success');
            });
        },

        handleSetlistSelectChange(e) {
            this.currentSetlistId = e.target.value || null;
            this.renderSetlistSongs();
        },

        handleAvailableSongsClick(e) {
            if (!e.target.closest('.add-to-setlist-btn')) return;
            const songItem = e.target.closest('.song-item');
            if (!songItem || !this.currentSetlistId) return;
            const id = songItem.dataset.id;
            SetlistsManager.addSongToSetlist(this.currentSetlistId, id);
            this.renderSetlistSongs();
        },

        handleCurrentSetlistSongsClick(e) {
            const songItem = e.target.closest('.song-item');
            if (!songItem || !this.currentSetlistId) return;
            const id = songItem.dataset.id;
            if (e.target.closest('.remove-from-setlist-btn')) {
                SetlistsManager.removeSongFromSetlist(this.currentSetlistId, id);
                this.renderSetlistSongs();
            } else if (e.target.closest('.move-up-btn')) {
                SetlistsManager.moveSongInSetlist(this.currentSetlistId, id, -1);
                this.renderSetlistSongs();
            } else if (e.target.closest('.move-down-btn')) {
                SetlistsManager.moveSongInSetlist(this.currentSetlistId, id, 1);
                this.renderSetlistSongs();
            }
        },

        // Performance Mode
        renderPerformanceTab() {
            this.renderSetlists();
            this.handlePerformanceSetlistChange();
        },

        handlePerformanceSetlistChange() {
            this.performanceSetlistId = this.performanceSetlistSelect.value || null;
            try { localStorage.setItem('lastActiveSetlistId', this.performanceSetlistId || ''); } catch {}
            this.renderPerformanceSongList();
        },

        handlePerformanceSongSearch() {
            this.renderPerformanceSongList();
        },

        renderPerformanceSongList() {
            let songs = [];
            const query = (this.performanceSongSearch?.value || '').trim();

            if (this.performanceSetlistId) {
                const setlist = SetlistsManager.getSetlistById(this.performanceSetlistId);
                if (setlist) {
                    songs = setlist.songs.map(id => this.songs.find(s => s.id === id)).filter(Boolean);
                }
            } else {
                songs = this.songs.slice();
            }

            if (query) {
                try {
                    const fuse = new Fuse(songs, {
                        keys: [
                            { name: 'title', weight: 0.85 },
                            { name: 'lyrics', weight: 0.15 }
                        ],
                        includeScore: true,
                        threshold: 0.35,
                        ignoreLocation: true,
                        minMatchCharLength: 2,
                    });
                    songs = fuse.search(query).map(r => r.item);
                } catch (e) {
                    const low = query.toLowerCase();
                    songs = songs.filter(song =>
                        song.title.toLowerCase().includes(low) ||
                        (song.lyrics && song.lyrics.toLowerCase().includes(low))
                    );
                }
            }

            // When showing "All Songs", present the list alphabetically by title if no query
            if (!this.performanceSetlistId && !query) {
                songs.sort((a, b) => a.title.localeCompare(b.title));
            }

            this.performanceSongList.innerHTML = songs.map(song => `
                <div class="song-item" data-id="${song.id}">
                    <span>${escapeHTML(song.title)}</span>
                    <button class="btn primary perform-song-btn" title="Perform This Song"><i class="fas fa-play"></i></button>
                </div>
            `).join('');
        },

        handlePerformanceSongClick(e) {
            if (!e.target.closest('.perform-song-btn')) return;
            const songItem = e.target.closest('.song-item');
            if (!songItem) return;
            const songId = songItem.dataset.id;
            this.startPerformanceWithSong(songId);
        },

        handleStartPerformance() {
            if (this.performanceSetlistId) {
                const setlist = SetlistsManager.getSetlistById(this.performanceSetlistId);
                if (setlist && setlist.songs.length > 0) {
                    this.startPerformanceWithSong(setlist.songs[0]);
                } else {
                    showToast('No songs in selected setlist', 'info');
                }
            } else {
                if (this.songs.length > 0) {
                    const firstId = this.songs
                        .slice()
                        .sort((a, b) => a.title.localeCompare(b.title))[0].id;
                    this.startPerformanceWithSong(firstId);
                } else {
                    showToast('No songs available', 'info');
                }
            }
        },

        startPerformanceWithSong(songId) {
            const params = new URLSearchParams();
            // Choose a setlist if none selected: prefer last active setlist containing the song,
            // then any setlist containing it.
            let chosenSetlistId = this.performanceSetlistId || null;
            if (!chosenSetlistId) {
                try {
                    const las = localStorage.getItem('lastActiveSetlistId');
                    if (las) {
                        const sl = SetlistsManager.getSetlistById(las);
                        if (sl && Array.isArray(sl.songs) && sl.songs.includes(songId)) chosenSetlistId = las;
                    }
                } catch {}
                if (!chosenSetlistId) {
                    const all = SetlistsManager.getAllSetlists();
                    const found = all.find(sl => Array.isArray(sl.songs) && sl.songs.includes(songId));
                    if (found) chosenSetlistId = found.id;
                }
            }
            if (chosenSetlistId) {
                params.set('setlistId', chosenSetlistId);
                try { localStorage.setItem('lastActiveSetlistId', chosenSetlistId); } catch {}
                const setlist = SetlistsManager.getSetlistById(chosenSetlistId);
                if (setlist && Array.isArray(setlist.songs) && setlist.songs.length) {
                    // Compact encode: comma-separated IDs
                    try { params.set('ids', setlist.songs.join(',')); } catch (_) {}
                }
            }
            params.set('songId', songId);
            navigateWithTransition(`performance/performance.html?${params.toString()}`);
        },

 // Helper for downloading a file
        downloadFile(filename, content, mime = "text/plain") {
            const blob = new Blob([content], { type: mime });
            const link = document.createElement("a");
            link.href = URL.createObjectURL(blob);
            link.download = filename;
            document.body.appendChild(link);
            link.click();
            setTimeout(() => {
                URL.revokeObjectURL(link.href);
                document.body.removeChild(link);
            }, 150);
        }
    };

    AuthGate.bootstrap(app).catch((err) => {
        console.error('App bootstrap failed', err);
        showToast('Unable to start SongBinder.', 'error', 4000);
    });

    function finishImportSetlist(name, text) {
        const result = SetlistsManager.importSetlistFromText(name, text, app.songs);
        if (result) {
            app.currentSetlistId = result.setlist.id;
            app.renderSetlists();
            const skipped = result.notFound.length;
            showToast(`Imported ${result.imported} songs${skipped ? ` (${skipped} not found)` : ''}.`, skipped ? 'info' : 'success');
        } else {
            showToast('Import failed.', 'error');
        }
    }
});