// ── Utility ───────────────────────────────────────────────────────────────

const $ = id => document.getElementById(id);

// ── Voice avatar colors ───────────────────────────────────────────────────
const _AVATAR_COLORS = ['#E57373','#F06292','#BA68C8','#9575CD','#7986CB',
  '#64B5F6','#4DD0E1','#4DB6AC','#81C784','#FFB74D','#FF8A65','#A1887F'];
function avatarColor(id) {
  let h = 0;
  for (let i = 0; i < id.length; i++) h = (h * 31 + id.charCodeAt(i)) & 0xFFFFFF;
  return _AVATAR_COLORS[Math.abs(h) % _AVATAR_COLORS.length];
}

let _toastTimer;
function toast(msg, type = '', ms = 6500) {
  const el = $('toast');
  if (!el) return;
  el.textContent = msg;
  el.setAttribute('role', type === 'error' ? 'alert' : 'status');
  el.setAttribute('aria-live', type === 'error' ? 'assertive' : 'polite');
  el.className = 'show ' + type;
  clearTimeout(_toastTimer);
  _toastTimer = setTimeout(() => el.className = '', ms);
}
function status(msg) {
  ensureStatusBar();
  const el = $('status-message') || $('status-bar');
  if (el) el.textContent = msg;
}

function ensureStatusBar() {
  const bar = $('status-bar');
  if (!bar) return null;
  if (!$('status-message')) {
    const previous = bar.textContent || 'Ready';
    bar.textContent = '';
    const msg = document.createElement('span');
    msg.id = 'status-message';
    msg.textContent = previous;
    bar.appendChild(msg);
  }
  if (!$('status-engines')) {
    const engines = document.createElement('span');
    engines.id = 'status-engines';
    engines.setAttribute('aria-label', 'Active engine status');
    bar.appendChild(engines);
  }
  return bar;
}

const STATUS_LLM_CACHE = { url: '', model: '', ok: false, checked: 0, pending: false };

function statusCleanUrl(url) {
  return String(url || '').trim().replace(/\/+$/, '');
}

function statusShortUrl(url) {
  try {
    const u = new URL(url);
    return u.port ? `${u.hostname}:${u.port}` : u.hostname;
  } catch (_) {
    return statusCleanUrl(url) || 'not configured';
  }
}

function statusLabelList(items, fallback) {
  const clean = items.map(x => String(x || '').replace(/^\d+\s+/, '').trim()).filter(Boolean);
  if (!clean.length) return fallback;
  const shown = clean.slice(0, 4).join(', ');
  return clean.length > 4 ? shown + ` +${clean.length - 4}` : shown;
}

function statusActiveTts() {
  let all = [];
  try {
    all = (typeof availableTtsBackends === 'function') ? availableTtsBackends() : [];
  } catch (_) {}
  const labels = all.map(b => b.label || b.id);
  return {
    kind: 'tts',
    label: 'TTS',
    ok: all.length > 0,
    value: statusLabelList(labels, 'No TTS backend'),
    title: all.length ? `${all.length} reachable TTS backend${all.length === 1 ? '' : 's'}` : 'No reachable TTS backend',
  };
}

function statusActiveStt() {
  let all = [];
  try {
    all = Array.isArray(_sttBackends) ? _sttBackends : [];
  } catch (_) {}
  const preferred = $('conv-stt-select')?.value || $('stt-tts-stt-backend')?.value || $('clone-stt-backend')?.value || '';
  const available = all.filter(b => b.available);
  const chosen = (preferred && all.find(b => b.id === preferred)) || available[0] || all[0] || null;
  return {
    kind: 'stt',
    label: 'STT',
    ok: !!(chosen && chosen.available),
    value: chosen ? (chosen.label || chosen.model || chosen.id) : 'No STT backend',
    title: chosen ? `${chosen.label || chosen.id} · ${chosen.url || ''}` : 'No STT backend configured',
  };
}

// Resolve the effective LLM endpoint+model (app settings, falling back to the
// rehearser's or conversation's pickers) — shared by the status chip and the
// engine health check so the resolution order can't drift between them.
function statusLlmTarget() {
  let settings = {};
  try { settings = (typeof _appSettings !== 'undefined' && _appSettings) ? _appSettings : {}; } catch (_) {}
  return {
    url: statusCleanUrl(settings.llm_url || $('reh-llm-url')?.value || $('conv-llm-url')?.value || ''),
    model: settings.llm_model || $('reh-llm-model')?.value || $('conv-llm-model-select')?.value || '',
    apiKey: settings.llm_api_key || '',
  };
}

function statusActiveLlm() {
  const { url, model } = statusLlmTarget();
  const same = STATUS_LLM_CACHE.url === url && STATUS_LLM_CACHE.model === model;
  const ok = !!url && same && STATUS_LLM_CACHE.ok;
  return {
    kind: 'llm',
    label: 'LLM',
    ok,
    value: model || statusShortUrl(url) || 'No LLM configured',
    title: url ? `${model || 'default model'} · ${url}` : 'No active LLM endpoint configured',
  };
}

function statusEngineChip(info) {
  const cls = info.ok ? 'ok' : 'bad';
  return `<button type="button" class="status-engine ${cls}" data-status-kind="${info.kind}" title="${escHtml(info.title || '')} — click to switch">
    <span class="status-dot" aria-hidden="true"></span>
    <span class="status-engine-label">${escHtml(info.label)}</span>
    <span class="status-engine-value">${escHtml(info.value)}</span>
    <span class="mdi mdi-chevron-up status-engine-caret"></span>
  </button>`;
}

function updateStatusBar() {
  ensureStatusBar();
  const engines = $('status-engines');
  if (!engines) return;
  const items = [statusActiveLlm(), statusActiveStt(), statusActiveTts()];
  engines.innerHTML = items.map(statusEngineChip).join('');
}

// ── Fly-up menus on the footer status chips — quickly switch the active
// LLM model / STT backend / TTS backend without hunting through Settings. ──

let _statusFlyup = null;

function _statusCloseFlyup() {
  if (_statusFlyup) { _statusFlyup.remove(); _statusFlyup = null; }
}

function _statusFlyupList(anchor, items, onPick, emptyLabel, kind) {
  _statusCloseFlyup();
  const el = document.createElement('div');
  el.className = 'status-flyup';
  if (kind) el.dataset.forKind = kind;
  el.innerHTML = items.length
    ? items.map(it => `<button type="button" class="status-flyup-item${it.active ? ' is-active' : ''}" data-val="${escHtml(it.id)}">${it.active ? '<span class="mdi mdi-check"></span>' : ''}<span>${escHtml(it.label)}</span></button>`).join('')
    : `<div class="status-flyup-empty">${escHtml(emptyLabel || 'Nothing available')}</div>`;
  document.body.appendChild(el);
  const rect = anchor.getBoundingClientRect();
  el.style.left = Math.min(rect.left, window.innerWidth - el.offsetWidth - 12) + 'px';
  el.style.bottom = (window.innerHeight - rect.top + 6) + 'px';
  el.querySelectorAll('.status-flyup-item').forEach(btn => {
    btn.addEventListener('click', e => { e.stopPropagation(); onPick(btn.dataset.val); _statusCloseFlyup(); });
  });
  _statusFlyup = el;
}

// Apply a chosen backend id to every matching <select> in the DOM (each
// screen keeps its own backend picker; this is the "quick switch everywhere"
// shortcut instead of hunting down each one individually).
function _statusApplyToSelects(ids, value) {
  for (const id of ids) {
    const el = $(id);
    if (el && [...el.options || []].some(o => o.value === value)) {
      el.value = value;
      el.dispatchEvent(new Event('change'));
    }
  }
}

async function _statusOpenLlmFlyup(anchor) {
  const { url, model, apiKey } = statusLlmTarget();
  if (!url) { _statusFlyupList(anchor, [], null, 'No LLM endpoint configured', 'llm'); return; }
  _statusFlyupList(anchor, [], null, 'Loading models…', 'llm');
  let models = [];
  try {
    let fetchUrl = '/api/conversation/llm-models?url=' + encodeURIComponent(url);
    if (apiKey) fetchUrl += '&api_key=' + encodeURIComponent(apiKey);
    const data = await fetch(fetchUrl).then(r => r.json());
    models = Array.isArray(data.models) ? data.models : [];
  } catch (_) {}
  if (!_statusFlyup || _statusFlyup.dataset.forKind !== 'llm') return; // closed/switched while awaiting
  _statusFlyupList(anchor, models.map(m => ({ id: m, label: m, active: m === model })), (picked) => {
    if (typeof _appSettings !== 'undefined') _appSettings.llm_model = picked;
    fetch('/api/settings', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ llm_model: picked }) }).catch(() => {});
    _statusApplyToSelects(['reh-llm-model', 'conv-llm-model-select'], picked);
    refreshStatusBarEngines({ force: true });
    toast('LLM model set to ' + picked, 'success');
  }, 'No models found at this endpoint', 'llm');
}

function _statusOpenSttFlyup(anchor) {
  const all = Array.isArray(_sttBackends) ? _sttBackends : [];
  const preferred = $('conv-stt-select')?.value || $('stt-tts-stt-backend')?.value || $('clone-stt-backend')?.value || '';
  _statusFlyupList(anchor, all.filter(b => b.available).map(b => ({
    id: b.id, label: b.label || b.id, active: b.id === preferred,
  })), (picked) => {
    _statusApplyToSelects(['conv-stt-select', 'stt-tts-stt-backend', 'clone-stt-backend'], picked);
    updateStatusBar();
    toast('STT backend set to ' + picked, 'success');
  }, 'No reachable STT backend', 'stt');
}

function _statusOpenTtsFlyup(anchor) {
  const all = (typeof availableTtsBackends === 'function') ? availableTtsBackends() : [];
  const preferred = $('tts-backend-select')?.value || $('reader-backend-select')?.value || $('reh-backend-select')?.value || '';
  _statusFlyupList(anchor, all.map(b => ({
    id: b.id, label: b.label || b.id, active: b.id === preferred,
  })), (picked) => {
    _statusApplyToSelects(['tts-backend-select', 'reader-backend-select', 'reh-backend-select'], picked);
    updateStatusBar();
    toast('TTS backend set to ' + picked, 'success');
  }, 'No reachable TTS backend', 'tts');
}

document.addEventListener('click', e => {
  const chip = e.target.closest('.status-engine');
  if (chip) {
    e.stopPropagation();
    const kind = chip.dataset.statusKind;
    if (_statusFlyup && _statusFlyup.dataset.forKind === kind) { _statusCloseFlyup(); return; }
    if (kind === 'llm') _statusOpenLlmFlyup(chip);
    else if (kind === 'stt') _statusOpenSttFlyup(chip);
    else if (kind === 'tts') _statusOpenTtsFlyup(chip);
    return;
  }
  if (!e.target.closest('.status-flyup')) _statusCloseFlyup();
});

async function refreshStatusBarEngines({ force = false } = {}) {
  updateStatusBar();
  const { url, model, apiKey } = statusLlmTarget();
  if (!url || STATUS_LLM_CACHE.pending) return;
  const fresh = STATUS_LLM_CACHE.url === url && STATUS_LLM_CACHE.model === model && (Date.now() - STATUS_LLM_CACHE.checked) < 30000;
  if (fresh && !force) return;
  STATUS_LLM_CACHE.pending = true;
  try {
    let fetchUrl = '/api/conversation/llm-models?url=' + encodeURIComponent(url);
    if (apiKey) fetchUrl += '&api_key=' + encodeURIComponent(apiKey);
    const data = await fetch(fetchUrl).then(r => r.json());
    const models = Array.isArray(data.models) ? data.models : [];
    STATUS_LLM_CACHE.url = url;
    STATUS_LLM_CACHE.model = model;
    STATUS_LLM_CACHE.ok = !data.error && (!!models.length || !model) && (!model || !models.length || models.includes(model));
    STATUS_LLM_CACHE.checked = Date.now();
  } catch (_) {
    STATUS_LLM_CACHE.url = url;
    STATUS_LLM_CACHE.model = model;
    STATUS_LLM_CACHE.ok = false;
    STATUS_LLM_CACHE.checked = Date.now();
  } finally {
    STATUS_LLM_CACHE.pending = false;
    updateStatusBar();
  }
}

window.updateStatusBar = updateStatusBar;
window.refreshStatusBarEngines = refreshStatusBarEngines;
function escHtml(s) {
  return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}
function debounce(fn, ms) { let t; return (...a) => { clearTimeout(t); t = setTimeout(() => fn(...a), ms); }; }
// Log a non-fatal error instead of silently swallowing it (was `.catch(()=>{})`).
// Use in best-effort paths so failures are visible in the console for debugging.
function logErr(context, err) { try { console.warn(`[${context}]`, err && (err.message || err)); } catch (_) {} }
// Run an async worker over items with bounded concurrency (default 4). `onProgress(done,total)`
// fires after each item. Replaces slow serial `for…await` loops over network calls.
async function runPool(items, worker, concurrency = 4, onProgress) {
  const arr = [...items]; let i = 0, done = 0; const total = arr.length;
  async function run() {
    while (i < arr.length) {
      const idx = i++;
      try { await worker(arr[idx], idx); } catch (e) { logErr('runPool', e); }
      done++; if (onProgress) { try { onProgress(done, total); } catch (_) {} }
    }
  }
  await Promise.all(Array.from({ length: Math.min(concurrency, arr.length) }, run));
}
async function copyText(text) {
  try {
    await navigator.clipboard.writeText(text);
  } catch(e) {
    const ta = document.createElement('textarea');
    ta.value = text;
    document.body.appendChild(ta);
    ta.select();
    document.execCommand('copy');
    ta.remove();
  }
}
function fmtDuration(sec) {
  if (sec == null || Number.isNaN(Number(sec))) return '-';
  const total = Math.max(0, Math.round(Number(sec)));
  const m = Math.floor(total / 60), s = total % 60;
  return `${m}:${String(s).padStart(2,'0')}`;
}

function loadingMarkup(title, detail = '', rows = 4) {
  const skeleton = Array.from({length: rows}, () => '<div class="skeleton-row"></div>').join('');
  return `
    <div class="loading-panel" role="status" aria-live="polite">
      <div class="loading-box">
        <div class="loading-head"><span class="spinner" aria-hidden="true"></span><span>${escHtml(title)}</span></div>
        ${detail ? `<div class="loading-sub">${escHtml(detail)}</div>` : ''}
        <div class="skeleton-stack">${skeleton}</div>
      </div>
    </div>`;
}

function setBusyButton(id, busy) {
  const el = $(id);
  if (el) el.disabled = !!busy;
}
async function clientAutoTrimBounds(fid) {
  const resp = await fetch('/api/audio/' + encodeURIComponent(fid));
  if (!resp.ok) throw new Error(resp.statusText || 'Audio not found');
  const audioData = await resp.arrayBuffer();
  const ctx = new (window.AudioContext || window.webkitAudioContext)();
  const buffer = await ctx.decodeAudioData(audioData.slice(0));
  try { ctx.close(); } catch (_) {}   // iOS Safari hard-limits live AudioContexts — free it now
  const samples = buffer.getChannelData(0);
  const sr = buffer.sampleRate;
  const dur = buffer.duration;
  if (dur <= 20) return {start:0, end:dur, duration:dur, reason:'Audio is already short enough.'};

  const chunkSec = 0.25, chunkSize = Math.max(1, Math.floor(sr * chunkSec));
  const chunks = [];
  for (let i = 0; i < samples.length; i += chunkSize) {
    let sum = 0, peak = 0, n = Math.min(chunkSize, samples.length - i);
    for (let j = 0; j < n; j++) {
      const v = samples[i + j];
      sum += v * v;
      peak = Math.max(peak, Math.abs(v));
    }
    const rms = Math.sqrt(sum / Math.max(1, n));
    const db = rms > 0 ? 20 * Math.log10(rms) : -80;
    chunks.push({db, speech:false, clipped:peak > 0.96});
  }
  const avgDb = chunks.reduce((a,c)=>a+c.db,0) / chunks.length;
  const floor = Math.max(avgDb - 18, -45);
  chunks.forEach(c => c.speech = c.db >= floor);

  function scoreWindow(startSec, lengthSec) {
    const first = Math.floor(startSec / chunkSec);
    const last = Math.min(chunks.length, Math.ceil((startSec + lengthSec) / chunkSec));
    const win = chunks.slice(first, last);
    if (!win.length) return {score:-9999};
    const speech = win.filter(c => c.speech);
    const speechRatio = speech.length / win.length;
    const silenceRatio = 1 - speechRatio;
    const clipRatio = win.filter(c => c.clipped).length / win.length;
    const speechAvg = speech.length ? speech.reduce((a,c)=>a+c.db,0) / speech.length : -80;
    const variance = speech.length ? speech.reduce((a,c)=>a+Math.pow(c.db-speechAvg,2),0) / speech.length : 100;
    const score = speechRatio * 100 - silenceRatio * 55 - clipRatio * 85 - Math.abs(speechAvg + 20) * 1.7 - Math.min(18, Math.sqrt(variance) * 1.4) - Math.abs(lengthSec - 12) * 0.9;
    return {score, speechRatio, silenceRatio, speechAvg};
  }

  let best = null;
  [8,10,12,15,18].forEach(length => {
    if (length > dur) return;
    for (let start = 0; start <= dur - length; start += 0.5) {
      const s = scoreWindow(start, length);
      if (!best || s.score > best.score) best = {start, end:start + length, duration:length, ...s};
    }
  });
  if (!best) return {start:0, end:Math.min(12,dur), duration:Math.min(12,dur), reason:'Using the beginning because no stable speech window was found.'};
  return {
    start:Number(best.start.toFixed(2)),
    end:Number(best.end.toFixed(2)),
    duration:Number(best.duration.toFixed(2)),
    reason:`Selected ${best.duration.toFixed(1)}s with ${Math.round(best.speechRatio*100)}% speech, ${Math.round(best.silenceRatio*100)}% silence, avg ${best.speechAvg.toFixed(1)} dBFS.`
  };
}


// ── Accessibility helpers ────────────────────────────────────────────────
function _a11yText(el) {
  return String(el?.textContent || '').replace(/\s+/g, ' ').trim();
}

function _a11yLabel(el) {
  return el?.getAttribute('aria-label') || el?.getAttribute('title') || _a11yText(el) || '';
}

function enhanceAccessibility(root = document) {
  const scope = root && root.querySelectorAll ? root : document;
  const statusBar = $('status-bar');
  if (statusBar) {
    statusBar.setAttribute('role', 'status');
    statusBar.setAttribute('aria-live', 'polite');
    statusBar.setAttribute('aria-atomic', 'false');
  }
  const toastEl = $('toast');
  if (toastEl) {
    toastEl.setAttribute('aria-live', 'polite');
    toastEl.setAttribute('aria-atomic', 'true');
  }

  scope.querySelectorAll('.nav-item, .nav-tree-item, .tab, [onclick]').forEach(el => {
    if (/^(A|BUTTON|INPUT|SELECT|TEXTAREA|SUMMARY)$/i.test(el.tagName)) return;
    if (!el.hasAttribute('role')) el.setAttribute('role', 'button');
    if (!el.hasAttribute('tabindex')) el.setAttribute('tabindex', '0');
    const label = _a11yLabel(el);
    if (label && !el.getAttribute('aria-label')) el.setAttribute('aria-label', label);
    if (label && !el.getAttribute('title')) el.setAttribute('title', label);
  });

  scope.querySelectorAll('button, [role=button], a, input, select, textarea').forEach(el => {
    const label = _a11yLabel(el);
    if (label && !el.getAttribute('title') && el.matches('button, [role=button]')) el.setAttribute('title', label);
    if (label && !el.getAttribute('aria-label') && !_a11yText(el) && el.matches('button, [role=button]')) el.setAttribute('aria-label', label);
  });

  scope.querySelectorAll('button .mdi, [role=button] .mdi, .nav-icon .mdi').forEach(icon => {
    icon.setAttribute('aria-hidden', 'true');
  });

  document.querySelectorAll('.nav-item, .nav-tree-item').forEach(el => {
    const active = el.classList.contains('active') || el.classList.contains('is-active');
    if (active && el.getAttribute('aria-current') !== 'page') el.setAttribute('aria-current', 'page');
    else if (!active && el.hasAttribute('aria-current')) el.removeAttribute('aria-current');
  });
}

function initAccessibilityEnhancements() {
  if (window.__ttsvcA11yReady) { enhanceAccessibility(document); return; }
  window.__ttsvcA11yReady = true;
  enhanceAccessibility(document);
  document.addEventListener('keydown', (e) => {
    if (e.key !== 'Enter' && e.key !== ' ') return;
    const el = e.target?.closest?.('[role=button]');
    if (!el || /^(BUTTON|A|INPUT|SELECT|TEXTAREA)$/i.test(el.tagName)) return;
    e.preventDefault();
    el.click();
  });
  const obs = new MutationObserver((mutations) => {
    for (const m of mutations) {
      if (m.type === 'childList') {
        m.addedNodes.forEach(n => { if (n.nodeType === 1) enhanceAccessibility(n); });
      } else if (m.type === 'attributes') {
        enhanceAccessibility(document);
      }
    }
  });
  obs.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['class'] });
}

// ── Light / dark theme ────────────────────────────────────────────────────

function applyTheme(t) {
  document.documentElement.dataset.theme = t;
  const btn = $('theme-btn');
  if (btn) { btn.innerHTML = t === 'dark' ? '<span class="mdi mdi-weather-sunny"></span>' : '<span class="mdi mdi-weather-night"></span>'; btn.title = t === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'; }
  const sel = $('s-theme-select');
  if (sel) sel.value = t;
  localStorage.setItem('vcf-theme', t);
}
$('theme-btn')?.addEventListener('click', () =>
  applyTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark')
);
applyTheme(localStorage.getItem('vcf-theme') || 'dark');

// ── Language helpers ──────────────────────────────────────────────────────

function cc2flag(cc) {
  if (!cc || cc.length !== 2) return '<span class="mdi mdi-earth"></span>';
  return cc.toUpperCase().replace(/./g, c => String.fromCodePoint(c.charCodeAt(0) + 127397));
}

// Display label for a country code (3-letter where conventional)
const CC_DISPLAY = {
  AU:'AUS', NZ:'NZL', GB:'GB', US:'US', CA:'CA', IE:'IRE', ZA:'ZAF', IN:'IND', SG:'SGP', PH:'PHL', NG:'NGA', KE:'KEN', GH:'GHA', JM:'JAM', TT:'TTO', MT:'MLT',
  CH:'CH', AT:'AT', BE:'BE', CN:'CN', TW:'TWN', HK:'HKG', MO:'MAC', JP:'JP', KR:'KR', VN:'VNM', TH:'THA', ID:'IDN', MY:'MYS', PK:'PAK', BD:'BGD', LK:'LKA', NP:'NPL', IR:'IRN', IL:'ISR',
  MX:'MEX', AR:'ARG', CO:'COL', CL:'CHL', PE:'PER', VE:'VEN', UY:'URY', EC:'ECU', BO:'BOL', CR:'CRI', CU:'CUB', DO:'DOM',
  BR:'BRA', SA:'SAU', EG:'EGY', AE:'UAE', MA:'MAR', QA:'QAT', KW:'KWT', OM:'OMN', JO:'JOR', LB:'LBN', IQ:'IRQ',
  DK:'DNK', NO:'NOR', SE:'SE', FI:'FIN', IS:'ISL', NL:'NL', LU:'LUX', LI:'LIE', FR:'FR', DE:'DE', ES:'ES', PT:'PT', IT:'IT', GR:'GRC', CY:'CYP', TR:'TR', PL:'PL', CZ:'CZE', SK:'SVK', HU:'HUN', RO:'ROU', BG:'BGR', HR:'HRV', SI:'SVN', RS:'SRB', BA:'BIH', ME:'MNE', MK:'MKD', AL:'ALB', EE:'EST', LV:'LVA', LT:'LTU', UA:'UKR', RU:'RU', BY:'BLR', MD:'MDA'
};
function ccDisplay(cc) { return CC_DISPLAY[cc] || cc; }

const EUROPE_FLAGS = [
  ['GB','GB - British'], ['IE','IRE - Irish'], ['DE','DE - German'], ['AT','AT - Austrian'], ['CH','CH - Swiss'], ['FR','FR - French'], ['BE','BE - Belgian'], ['NL','NL - Dutch'], ['LU','LUX - Luxembourgish'], ['LI','LIE - Liechtenstein'],
  ['ES','ES - Spanish'], ['PT','PT - Portuguese'], ['IT','IT - Italian'], ['MT','MLT - Maltese'], ['GR','GRC - Greek'], ['CY','CYP - Cypriot'],
  ['DK','DNK - Danish'], ['NO','NOR - Norwegian'], ['SE','SE - Swedish'], ['FI','FIN - Finnish'], ['IS','ISL - Icelandic'],
  ['PL','PL - Polish'], ['CZ','CZE - Czech'], ['SK','SVK - Slovak'], ['HU','HUN - Hungarian'], ['RO','ROU - Romanian'], ['BG','BGR - Bulgarian'], ['HR','HRV - Croatian'], ['SI','SVN - Slovenian'], ['RS','SRB - Serbian'], ['BA','BIH - Bosnian'], ['ME','MNE - Montenegrin'], ['MK','MKD - Macedonian'], ['AL','ALB - Albanian'],
  ['EE','EST - Estonian'], ['LV','LVA - Latvian'], ['LT','LTU - Lithuanian'], ['UA','UKR - Ukrainian'], ['RU','RU - Russian'], ['BY','BLR - Belarusian'], ['MD','MDA - Moldovan'], ['TR','TR - Turkish'],
];
const ASIA_FLAGS = [
  ['CN','CN - Mainland Chinese'], ['TW','TWN - Taiwanese'], ['HK','HKG - Hong Kong'], ['MO','MAC - Macau'], ['SG','SGP - Singapore'], ['JP','JP - Japanese'], ['KR','KR - Korean'],
  ['VN','VNM - Vietnamese'], ['TH','THA - Thai'], ['ID','IDN - Indonesian'], ['MY','MYS - Malaysian'], ['PH','PHL - Filipino'], ['IN','IND - Indian'], ['PK','PAK - Pakistani'], ['BD','BGD - Bangladeshi'], ['LK','LKA - Sri Lankan'], ['NP','NPL - Nepali'],
  ['SA','SAU - Saudi'], ['AE','UAE - Emirati'], ['QA','QAT - Qatari'], ['KW','KWT - Kuwaiti'], ['OM','OMN - Omani'], ['JO','JOR - Jordanian'], ['LB','LBN - Lebanese'], ['IQ','IRQ - Iraqi'], ['IR','IRN - Iranian'], ['IL','ISR - Israeli'],
];
const ENGLISH_FLAGS = [
  ['GB','GB - British'], ['US','US - American'], ['CA','CA - Canadian'], ['AU','AUS - Australian'], ['NZ','NZL - New Zealand'], ['IE','IRE - Irish'], ['ZA','ZAF - South African'], ['IN','IND - Indian English'], ['SG','SGP - Singapore English'], ['PH','PHL - Filipino English'], ['NG','NGA - Nigerian English'], ['KE','KEN - Kenyan English'], ['GH','GHA - Ghanaian English'], ['JM','JAM - Jamaican English'], ['TT','TTO - Trinidad and Tobago English'], ['MT','MLT - Maltese English'],
];
const LATAM_FLAGS = [
  ['MX','MEX - Mexican'], ['AR','ARG - Argentine'], ['CO','COL - Colombian'], ['CL','CHL - Chilean'], ['PE','PER - Peruvian'], ['VE','VEN - Venezuelan'], ['UY','URY - Uruguayan'], ['EC','ECU - Ecuadorian'], ['BO','BOL - Bolivian'], ['CR','CRI - Costa Rican'], ['CU','CUB - Cuban'], ['DO','DOM - Dominican'], ['BR','BRA - Brazilian'],
];
function uniqueFlagOptions(groups) {
  const seen = new Set(), out = [];
  groups.flat().forEach(item => { if (item && !seen.has(item[0])) { seen.add(item[0]); out.push(item); } });
  return out;
}

const FLAG_OPTIONS = {
  EN: ENGLISH_FLAGS,
  DE: uniqueFlagOptions([[['DE','DE - German'],['AT','AT - Austrian'],['CH','CH - Swiss (DE)']], EUROPE_FLAGS]),
  FR: uniqueFlagOptions([[['FR','FR - French'],['BE','BE - Belgian'],['CH','CH - Swiss (FR)'],['CA','CA - Canadian']], EUROPE_FLAGS]),
  ZH: uniqueFlagOptions([[['CN','CN - Mainland'],['TW','TWN - Taiwanese'],['HK','HKG - Hong Kong'],['SG','SGP - Singaporean']], ASIA_FLAGS]),
  ES: uniqueFlagOptions([[['ES','ES - Spain']], LATAM_FLAGS, EUROPE_FLAGS]),
  PT: uniqueFlagOptions([[['PT','PT - Portuguese'],['BR','BRA - Brazilian']], EUROPE_FLAGS, LATAM_FLAGS]),
  AR: uniqueFlagOptions([[['SA','SAU - Saudi'],['EG','EGY - Egyptian'],['AE','UAE - Emirati'],['MA','MAR - Moroccan']], ASIA_FLAGS]),
  NL: uniqueFlagOptions([[['NL','NL - Dutch'],['BE','BE - Belgian']], EUROPE_FLAGS]),
  JA: uniqueFlagOptions([[['JP','JP - Japanese']], ASIA_FLAGS]),
  KO: uniqueFlagOptions([[['KR','KR - Korean']], ASIA_FLAGS]),
  IT: uniqueFlagOptions([[['IT','IT - Italian']], EUROPE_FLAGS]),
  RU: uniqueFlagOptions([[['RU','RU - Russian']], EUROPE_FLAGS, ASIA_FLAGS]),
  PL: uniqueFlagOptions([[['PL','PL - Polish']], EUROPE_FLAGS]),
  SV: uniqueFlagOptions([[['SE','SE - Swedish']], EUROPE_FLAGS]),
  TR: uniqueFlagOptions([[['TR','TR - Turkish']], EUROPE_FLAGS, ASIA_FLAGS]),
  HI: uniqueFlagOptions([[['IN','IND - Indian']], ASIA_FLAGS]),
};

const LANG_FLAG_DEFAULT = {
  EN:'GB', DE:'DE', ZH:'CN', FR:'FR', ES:'ES', JA:'JP', KO:'KR',
  IT:'IT', PT:'BR', RU:'RU', AR:'SA', PL:'PL', NL:'NL', SV:'SE', TR:'TR', HI:'IN',
};

const ALL_FLAGS = uniqueFlagOptions([ENGLISH_FLAGS, EUROPE_FLAGS, ASIA_FLAGS, LATAM_FLAGS, [
  ['EG','EGY - Egyptian'], ['MA','MAR - Moroccan'], ['ZA','ZAF - South African'], ['NG','NGA - Nigerian'], ['KE','KEN - Kenyan'], ['GH','GHA - Ghanaian'],
]]);

// ── Preview sample texts per language ────────────────────────────────────
const VL_SAMPLE_TEXTS = {
  EN: 'Hello, how are you today? Please read this sample clearly for a fair voice benchmark.',
  DE: 'Hallo, wie geht es Ihnen heute? Bitte lesen Sie diesen Text deutlich vor — für einen fairen Stimmvergleich.',
  FR: 'Bonjour, comment allez-vous aujourd\'hui ? Veuillez lire ce texte clairement pour un test vocal équitable.',
  ES: '¡Hola! ¿Cómo estás hoy? Por favor, lee este texto con claridad para una evaluación justa de la voz.',
  PT: 'Olá, como vai você hoje? Por favor, leia este texto claramente para uma avaliação justa da voz.',
  IT: 'Ciao, come stai oggi? Per favore leggi questo testo in modo chiaro per una valutazione equa della voce.',
  NL: 'Hallo, hoe gaat het vandaag? Lees dit voorbeeld alstublieft duidelijk voor een eerlijke stembeoordeling.',
  PL: 'Cześć, jak się dziś masz? Przeczytaj proszę ten tekst wyraźnie, aby dokonać rzetelnej oceny głosu.',
  SV: 'Hej, hur mår du idag? Vänligen läs detta exempel tydligt för en rättvis röstbedömning.',
  DA: 'Hej, hvordan har du det i dag? Læs venligst dette eksempel tydeligt for en retfærdig stemmevurdering.',
  NB: 'Hei, hvordan har du det i dag? Vennligst les dette eksempelet tydelig for en rettferdig stemmevurdering.',
  FI: 'Hei, kuinka voit tänään? Lue tämä esimerkki selkeästi reilua ääniarviointia varten.',
  HU: 'Szia, hogy vagy ma? Kérlek, olvasd fel ezt a szöveget érthetően az igazságos hangértékelés érdekében.',
  CS: 'Dobrý den, jak se máte? Přečtěte prosím tento text zřetelně pro spravedlivé hodnocení hlasu.',
  RO: 'Bună ziua, cum vă simțiți astăzi? Vă rugăm citiți acest text clar pentru o evaluare corectă a vocii.',
  UK: 'Привіт, як ви сьогодні? Будь ласка, прочитайте цей текст чітко для справедливого тестування голосу.',
  RU: 'Здравствуйте, как вы сегодня? Пожалуйста, прочитайте этот текст чётко для справедливого тестирования голоса.',
  TR: 'Merhaba, bugün nasılsınız? Adil bir ses değerlendirmesi için lütfen bu örneği açıkça okuyun.',
  AR: 'مرحباً، كيف حالك اليوم؟ يرجى قراءة هذا النص بوضوح لإجراء اختبار صوت عادل.',
  HI: 'नमस्ते, आप आज कैसे हैं? कृपया इस नमूने को स्पष्ट रूप से पढ़ें ताकि एक उचित आवाज़ मूल्यांकन हो सके।',
  ZH: '你好，你今天怎么样？请清晰地朗读这段示例，以便进行公正的语音评测。',
  JA: 'こんにちは、今日はいかがですか？公平な音声評価のために、このサンプルをはっきりと読んでください。',
  KO: '안녕하세요, 오늘 어떠세요? 공정한 음성 벤치마크를 위해 이 샘플을 명확하게 읽어주세요.',
};

const _VL_LANG_FLAG = Object.assign({ DA:'DK', NB:'NO', FI:'FI', HU:'HU', CS:'CZ', RO:'RO', UK:'UA' }, LANG_FLAG_DEFAULT);

function setPreviewLang(lang) {
  const ta = $('vl-preview-sample');
  const hidden = $('benchmark-sample-text');
  if (!ta) return;
  const text = VL_SAMPLE_TEXTS[lang] || VL_SAMPLE_TEXTS.EN;
  ta.value = text;
  ta.dispatchEvent(new Event('input'));
  if (hidden) { hidden.value = text; hidden.dispatchEvent(new Event('input')); }
  try { localStorage.setItem(BENCHMARK_SAMPLE_STORAGE_KEY, text); } catch {}
  const btn = $('vl-preview-lang-btn');
  if (btn) {
    const cc = (_VL_LANG_FLAG[lang] || 'gb').toLowerCase();
    btn.innerHTML = `<span class="fi fi-${cc}"></span>`;
    btn.title = (LANGUAGE_LABELS[lang] || lang) + ' — click to change';
    btn.dataset.lang = lang;
  }
}

function openPreviewLangPicker(anchor) {
  const items = Object.keys(VL_SAMPLE_TEXTS).map(l => [l, LANGUAGE_LABELS[l] ? `${LANGUAGE_LABELS[l]} (${l})` : l]);
  createSearchablePicker(anchor, items, setPreviewLang, {
    placeholder: 'Sample language…',
    renderItem: (l) => {
      const cc = (_VL_LANG_FLAG[l] || 'gb').toLowerCase();
      return `<span class="fi fi-${cc}" style="width:20px;height:14px;background-size:cover;border-radius:2px;flex-shrink:0;display:inline-block"></span>`
           + `<span class="ipi-code">${escHtml(l)}</span>`
           + `<span>${escHtml(LANGUAGE_LABELS[l] || l)}</span>`;
    },
  });
}

// ── Searchable picker dropdown ────────────────────────────────────────────
function createSearchablePicker(anchor, items, onSelect, { placeholder = 'Search…', renderItem } = {}) {
  document.querySelector('.insp-picker')?.remove();
  const panel = document.createElement('div');
  panel.className = 'insp-picker';

  const search = document.createElement('input');
  search.type = 'search'; search.className = 'insp-picker-search';
  search.placeholder = placeholder; search.autocomplete = 'off';

  const list = document.createElement('div');
  list.className = 'insp-picker-list';

  const renderList = (q) => {
    const f = q.trim().toLowerCase();
    const filtered = f
      ? items.filter(([code, name]) => name.toLowerCase().includes(f) || code.toLowerCase().includes(f))
      : items;
    list.innerHTML = '';
    if (!filtered.length) { list.innerHTML = '<div class="insp-picker-empty">No matches</div>'; return; }
    filtered.forEach(([code, name]) => {
      const btn = document.createElement('button');
      btn.className = 'insp-picker-item'; btn.type = 'button';
      btn.innerHTML = renderItem ? renderItem(code, name) : `<span class="ipi-code">${escHtml(code)}</span><span>${escHtml(name)}</span>`;
      btn.addEventListener('mousedown', (e) => { e.preventDefault(); onSelect(code); panel.remove(); cleanup(); });
      list.appendChild(btn);
    });
  };
  search.addEventListener('input', () => renderList(search.value));
  renderList('');

  panel.appendChild(search); panel.appendChild(list);
  document.body.appendChild(panel);

  const rect = anchor.getBoundingClientRect();
  const pw = 244;
  let left = rect.left;
  if (left + pw > window.innerWidth - 8) left = window.innerWidth - pw - 8;
  panel.style.top  = (rect.bottom + 4) + 'px';
  panel.style.left = Math.max(8, left) + 'px';

  const cleanup = () => { document.removeEventListener('mousedown', onOut); document.removeEventListener('keydown', onKey); };
  const onOut = (e) => { if (!panel.contains(e.target)) { panel.remove(); cleanup(); } };
  const onKey = (e) => { if (e.key === 'Escape') { panel.remove(); cleanup(); } };
  setTimeout(() => { document.addEventListener('mousedown', onOut); document.addEventListener('keydown', onKey); }, 0);
  search.focus();
}

// ── Tag reuse (localStorage) ──────────────────────────────────────────────
const _TAG_KEY = 'ttsvc-voice-tags';
function getStoredTags() {
  try { return JSON.parse(localStorage.getItem(_TAG_KEY) || '[]'); } catch { return []; }
}
function addStoredTag(tag) {
  const t = tag.trim(); if (!t) return;
  const tags = getStoredTags().filter(x => x !== t);
  tags.unshift(t);
  try { localStorage.setItem(_TAG_KEY, JSON.stringify(tags.slice(0, 60))); } catch {}
}

// Voice-library rendering can be expensive with large local collections because it
// creates many rich rows and image requests. Schedule automatic refreshes after the
// current startup/navigation task so core routing is interactive first.
const _voiceLibraryLoadCallbacks = [];
const _VOICE_LIBRARY_LOAD_NAV_WAIT_MS = 3500;
function scheduleVoiceLibraryLoad(onDone) {
  if (typeof onDone === 'function') _voiceLibraryLoadCallbacks.push(onDone);
  if (window.__voiceLibraryLoadScheduled) return;
  window.__voiceLibraryLoadScheduled = true;
  const scheduledAt = (performance && performance.now) ? performance.now() : Date.now();
  const run = () => {
    const now = (performance && performance.now) ? performance.now() : Date.now();
    if (typeof window.navTo !== 'function' && now - scheduledAt < _VOICE_LIBRARY_LOAD_NAV_WAIT_MS) {
      setTimeout(run, 80);
      return;
    }
    window.__voiceLibraryLoadScheduled = false;
    if (typeof loadVoiceLibrary !== 'function') {
      _voiceLibraryLoadCallbacks.splice(0);
      return;
    }
    loadVoiceLibrary()
      .then(() => {
        const callbacks = _voiceLibraryLoadCallbacks.splice(0);
        callbacks.forEach(fn => { try { fn(); } catch (e) { logErr('scheduleVoiceLibraryLoad callback', e); } });
      })
      .catch(e => {
        _voiceLibraryLoadCallbacks.splice(0);
        status('Voice library load failed: ' + (e.message || e));
      });
  };
  if ('requestIdleCallback' in window) requestIdleCallback(run, { timeout: 1200 });
  else setTimeout(run, 0);
}
window.scheduleVoiceLibraryLoad = scheduleVoiceLibraryLoad;

// ── Tabs ──────────────────────────────────────────────────────────────────

function disabledBackendTabMessage(tab) {
  const required = tab?.dataset.backendRequired || '';
  if (required === 'any_tts') return 'No Qwen3-TTS backend is running or configured. Check Settings.';
  const backend = (_ttsBackends || []).find(b => b.id === required);
  const label = backend?.label || required.replace(/_/g, ' ');
  const url = backend?.url ? ` (${backend.url})` : '';
  return `${label}${url} is not running or not configured in Settings.`;
}

function switchTab(name) {
  const targetTab = document.querySelector(`.tab[data-tab="${name}"]`);
  if (targetTab?.classList.contains('backend-unavailable')) {
    toast(disabledBackendTabMessage(targetTab), 'error');
    return false;
  }
  document.querySelectorAll('.tab').forEach(t => t.classList.toggle('active', t.dataset.tab === name));
  document.querySelectorAll('.tab-content').forEach(c => c.classList.toggle('active', c.id === 'tab-' + name));
  if (name === 'library') scheduleVoiceLibraryLoad();
  if (name === 'integrations') {
    if (!_voices.length) scheduleVoiceLibraryLoad(renderIntegrationSnippets);
    renderIntegrationSnippets();
  }
  if (name === 'performance' && typeof window.populateBatchBenchmarkFromLibrary === 'function') {
    window.populateBatchBenchmarkFromLibrary();
  }
  if (name === 'performance' && typeof window.loadBenchmarkSectionData === 'function') {
    window.loadBenchmarkSectionData();
  }
  if (name === 'routing') loadRoutingTab();
  if (name === 'getvoices') {
    if (typeof window.initElevenLabsBrowser === 'function') window.initElevenLabsBrowser();
    loadGetVoices();
  }
  return true;
}
// ── Language detection ────────────────────────────────────────────────────────
// Lightweight, dependency-free detector. First by script (CJK / Cyrillic /
// Hangul), then by stop-word frequency for Latin-script languages. Returns a
// full English language name ("German", "English", …) matching the design-language
// <select>, or '' when there's too little signal.
function detectLang(text) {
  const t = String(text || '').slice(0, 4000);
  if (!t.trim()) return '';
  if (/[가-힣]/.test(t)) return 'Korean';
  if (/[぀-ヿ]/.test(t)) return 'Japanese';
  if (/[一-鿿]/.test(t)) return 'Chinese';
  if (/[Ѐ-ӿ]/.test(t)) return 'Russian';
  const STOP = {
    English:    ['the','and','of','to','a','in','that','is','was','he','for','it','with','as','his','on','be','at','by','she','you','not'],
    German:     ['der','die','und','ich','das','nicht','ein','ist','sie','mit','dem','den','war','auf','für','des','eine','auch','als','er','wir','aber','noch'],
    French:     ['le','la','les','et','de','un','une','des','est','que','pour','dans','qui','pas','plus','vous','avec','sur','son','ne','je','il'],
    Spanish:    ['el','la','los','las','de','que','y','un','una','en','es','por','con','no','se','su','para','lo','como','más','pero','sus'],
    Italian:    ['il','la','di','e','che','un','una','è','per','non','con','sono','del','le','si','lo','ma','come','più','anche','della','gli'],
    Portuguese: ['de','que','e','o','a','do','da','em','um','uma','não','os','para','com','por','como','mas','se','dos','das','ao','seu'],
    Dutch:      ['de','het','een','en','van','ik','te','dat','die','in','is','niet','met','zijn','op','aan','voor','er','maar','om','ook','als'],
  };
  const words = (t.toLowerCase().match(/[a-zà-ÿ]+/g) || []);
  if (words.length < 8) return '';
  const counts = {}, sets = {};
  Object.keys(STOP).forEach(l => { counts[l] = 0; sets[l] = new Set(STOP[l]); });
  for (const w of words) for (const l in sets) if (sets[l].has(w)) counts[l]++;
  let best = '', bestN = 0;
  for (const l in counts) if (counts[l] > bestN) { bestN = counts[l]; best = l; }
  return bestN >= 3 ? best : 'English';
}
window.detectLang = detectLang;

document.querySelectorAll('.tab').forEach(tab => tab.addEventListener('click', () => switchTab(tab.dataset.tab)));
document.addEventListener('click', e => {
  const btn = e.target.closest('.backend-jump');
  if (!btn) return;
  switchTab('generation');
  const backend = btn.dataset.backend;
  const sel = $('tts-backend-select');
  if (sel && [...sel.options].some(o => o.value === backend)) {
    sel.value = backend;
    sel.dispatchEvent(new Event('change'));
  }
});

// ── Cross-workflow pipeline stepper ─────────────────────────────────────────
// PDF → Text → Cast Audiobook → Cast Characters → Cast → Script Rehearser
// → Generate MP3s → Audiobook. A persistent strip (rendered into any element
// with class .wf-stepper — currently one in s-reader.html, one in
// s-rehearser.html) that lets you jump directly to any reachable stage
// without losing state: each stage's data lives in its own owner
// (readerState / _audiobook / rehState) regardless of which stage is on
// screen, so this only ever toggles visibility/phase — it never rebuilds
// anything from scratch.
let _wfActive = 'source';

// PDF import and text extraction used to be two stepper stops, but they both
// just land you on the same Reader screen — merged into one "Source" stop
// (matches the "Source" label already used on the Reader's import card).
const WF_STEPS = [
  { key: 'source',     label: 'Source',          enabled: () => true },
  { key: 'cast',       label: 'Cast Audiobook',  enabled: () => !!window.readerState?.sentences?.length },
  { key: 'chars',      label: 'Cast Characters', enabled: () => !!window.readerState?.sentences?.length, optional: true },
  { key: 'castlib',    label: 'Cast',            enabled: () => !!window.readerState?.sentences?.length },
  { key: 'rehearser',  label: 'Script Rehearser',enabled: () => !!window.rehState?.lines?.length },
  { key: 'mp3',        label: 'Generate MP3s',   enabled: () => !!window.rehState?.lines?.length },
  { key: 'audiobook',  label: 'Audiobook',       enabled: () => !!window.rehState?.clips?.length },
];

function workflowCrumbGo(key) {
  if (key === 'source') {
    // navTo's cast-session restore is synchronous, so the explicit view choice
    // below simply wins by running after it.
    if (typeof navTo === 'function') navTo('s-reader');
    if (typeof showReaderView === 'function') showReaderView('main');
  } else if (key === 'cast') {
    if (typeof navTo === 'function') navTo('s-reader');
    if (typeof audiobookOpenCastView === 'function') audiobookOpenCastView();
  } else if (key === 'chars') {
    // Navigate to the character-sheet stage in Read Aloud.
    if (typeof navTo === 'function') navTo('s-reader');
    if (typeof showReaderView === 'function') showReaderView('chars');
    _wfActive = 'chars';
    refreshWorkflowCrumbs();
  } else if (key === 'castlib') {
    // Navigate to the cast roster/library view.
    if (typeof navTo === 'function') navTo('s-library');
    if (typeof navLibraryView === 'function') navLibraryView('characters');
    _wfActive = 'castlib';
    refreshWorkflowCrumbs();
  } else if (key === 'rehearser') {
    if (typeof navTo === 'function') navTo('s-rehearser');
  } else if (key === 'mp3') {
    if (typeof navTo === 'function') navTo('s-rehearser');
    if (typeof showPhase === 'function' && window.rehState?.lines?.length) showPhase(3);
  } else if (key === 'audiobook') {
    if (typeof navTo === 'function') navTo('s-rehearser');
    if (typeof showPhase === 'function' && window.rehState?.clips?.length) showPhase(4);
  }
}
window.workflowCrumbGo = workflowCrumbGo;

// Nearest reachable step from curIdx in the given direction (+1/-1), or null.
function _wfNeighbor(curIdx, dir) {
  for (let i = curIdx + dir; i >= 0 && i < WF_STEPS.length; i += dir) {
    if (WF_STEPS[i].enabled()) return WF_STEPS[i];
  }
  return null;
}

function refreshWorkflowCrumbs(active) {
  if (active) _wfActive = active;
  const title = window.readerState?.title || window.rehState?.title || '';
  const containers = document.querySelectorAll('.wf-stepper');
  if (!containers.length) return;
  // Hide the strip until some stage beyond the always-available "Source" is
  // reachable — otherwise a fresh session shows a stepper with one live stop.
  const anyState = WF_STEPS.some(st => st.key !== 'source' && st.enabled());
  containers.forEach(el => {
    if (!anyState) { el.innerHTML = ''; el.hidden = true; return; }
    el.hidden = false;
    const curIdx = WF_STEPS.findIndex(st => st.key === _wfActive);
    const prevStep = curIdx >= 0 ? _wfNeighbor(curIdx, -1) : null;
    const nextStep = curIdx >= 0 ? _wfNeighbor(curIdx, 1) : null;
    const parts = [];
    parts.push(`<button type="button" class="wf-nav-btn wf-nav-prev" data-wf-nav="prev" title="${prevStep ? 'Back to ' + escHtml(prevStep.label) : 'No previous step'}"${prevStep ? '' : ' disabled'}><span class="mdi mdi-chevron-left"></span></button>`);
    if (title) parts.push(`<span class="wf-stepper-title" title="${escHtml(title)}">${escHtml(title)}</span>`);
    WF_STEPS.forEach((st, i) => {
      const enabled = st.enabled();
      const cur = _wfActive === st.key;
      const done = curIdx >= 0 && i < curIdx && enabled;
      if (i > 0) parts.push(`<span class="wf-step-arrow${done ? ' is-done' : ''}">›</span>`);
      parts.push(
        `<button type="button" class="wf-step${cur ? ' is-current' : ''}${done ? ' is-done' : ''}${st.optional ? ' is-optional' : ''}" ` +
        `data-wf="${st.key}"${(!enabled || cur) ? ' disabled' : ''} title="${st.optional ? 'Optional — ' : ''}${escHtml(st.label)}">` +
        `<span class="wf-step-num">${done ? '<span class="mdi mdi-check"></span>' : i + 1}</span><span>${escHtml(st.label)}${st.optional ? '<small>optional</small>' : ''}</span></button>`
      );
    });
    parts.push(`<button type="button" class="wf-nav-btn wf-nav-next" data-wf-nav="next" title="${nextStep ? 'On to ' + escHtml(nextStep.label) : 'No next step'}"${nextStep ? '' : ' disabled'}><span class="mdi mdi-chevron-right"></span></button>`);
    el.innerHTML = parts.join('');
    el.querySelectorAll('.wf-step[data-wf]').forEach(btn => {
      btn.addEventListener('click', () => workflowCrumbGo(btn.dataset.wf));
    });
    const prevBtn = el.querySelector('.wf-nav-prev');
    if (prevBtn && !prevBtn.disabled) prevBtn.addEventListener('click', () => workflowCrumbGo(prevStep.key));
    const nextBtn = el.querySelector('.wf-nav-next');
    if (nextBtn && !nextBtn.disabled) nextBtn.addEventListener('click', () => workflowCrumbGo(nextStep.key));
  });
}
window.refreshWorkflowCrumbs = refreshWorkflowCrumbs;

// Rehearser's own phase tabs (Library/Cast/Stage/Summary) map onto the last
// four stepper stops — keep the stepper's "current" highlight following them.
window.onRehearserPhaseChange = function (n) {
  refreshWorkflowCrumbs(n === 3 ? 'mp3' : n === 4 ? 'audiobook' : 'rehearser');
};