// ── Benchmark Voice Picker ───────────────────────────────────────────────
// Searchable benchmark voice selector with avatars plus duration/speed stats.
(function () {
  'use strict';

  const pickers = {};

  function esc(value) {
    return String(value == null ? '' : value)
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;');
  }

  function norm(value) {
    if (typeof value === 'string') return { id: value, label: value, meta: null, raw: value };
    const id = value?.id || value?.voice || value?.name || value?.voice_id || '';
    const hasExplicitMeta = Object.prototype.hasOwnProperty.call(value || {}, 'meta');
    const looksLikeVoice = !!(value?.display_name || value?.duration || value?.benchmark || value?.has_picture || value?.transcript);
    return {
      id,
      label: value?.label || value?.display_name || value?.name || value?.voice || id,
      meta: hasExplicitMeta ? value.meta : (looksLikeVoice ? value : null),
      raw: value,
    };
  }

  function libraryVoice(id) {
    return (window._voices || []).find(v => v && v.id === id) || null;
  }

  function metaFor(item) {
    return item?.meta || libraryVoice(item?.id) || item?.raw || null;
  }

  function langColor(lang, id) {
    const str = String(lang || id || '').toLowerCase();
    if (str.startsWith('de')) return '#3b82f6';
    if (str.startsWith('en')) return '#10b981';
    if (str.startsWith('fr')) return '#8b5cf6';
    if (str.startsWith('es')) return '#f59e0b';
    if (str.startsWith('it')) return '#ef4444';
    if (str.startsWith('zh')) return '#ec4899';
    if (str.startsWith('ja')) return '#f97316';
    const palette = ['#3b82f6', '#10b981', '#8b5cf6', '#f59e0b', '#ef4444', '#ec4899', '#06b6d4', '#84cc16'];
    let h = 0;
    for (let i = 0; i < str.length; i++) h = (h * 31 + str.charCodeAt(i)) >>> 0;
    return palette[h % palette.length];
  }

  function avatarHtml(item, size) {
    const id = item?.id || '';
    const meta = metaFor(item);
    const s = `${size}px`;
    const r = `${Math.round(size / 2)}px`;
    if (meta?.has_picture) {
      return `<img src="/api/voice/picture/${encodeURIComponent(id)}" class="bvp-avatar" style="width:${s};height:${s};border-radius:${r};object-fit:cover" alt="">`;
    }
    const icon = window.voiceAvatarIcon ? window.voiceAvatarIcon(meta?.avatar, size) : null;
    if (icon) return icon.replace(/vp-avatar/g, 'bvp-avatar');
    const color = langColor(meta?.lang || meta?.language, id);
    const init = (item?.label || id || '?').trim()[0]?.toUpperCase() || '?';
    return `<span class="bvp-avatar" style="width:${s};height:${s};border-radius:${r};background:${color};color:#fff;font-weight:700;font-size:${Math.round(size * 0.44)}px">${esc(init)}</span>`;
  }

  function numeric(value) {
    const n = Number(value);
    return Number.isFinite(n) ? n : null;
  }

  function statsFor(item) {
    const meta = metaFor(item) || {};
    const b = meta.benchmark || item?.benchmark || {};
    const parts = [];
    const duration = numeric(meta.duration ?? item?.duration);
    const speed = numeric(b.speed ?? b.avg_speed ?? meta.speed);
    const rtf = numeric(b.rtf ?? b.avg_rtf ?? meta.rtf);
    const elapsed = numeric(b.elapsed_sec ?? b.avg_elapsed_sec);
    if (duration != null && duration > 0) parts.push(`${duration.toFixed(1)}s`);
    if (speed != null && speed > 0) parts.push(`${speed.toFixed(2)}x`);
    else if (rtf != null && rtf > 0) parts.push(`RTF ${rtf.toFixed(2)}`);
    if (!parts.length && elapsed != null && elapsed > 0) parts.push(`${elapsed.toFixed(1)}s TTS`);
    if (!parts.length && b.ok === false) parts.push('benchmark failed');
    return parts.join(' · ');
  }

  function searchText(item) {
    const meta = metaFor(item) || {};
    return [
      item?.id,
      item?.label,
      meta.display_name,
      meta.name,
      meta.lang,
      meta.language,
      Array.isArray(meta.tags) ? meta.tags.join(' ') : meta.tags,
      statsFor(item),
    ].filter(Boolean).join(' ').toLowerCase();
  }

  function optionLabel(item) {
    const stats = statsFor(item);
    return `${item.label || item.id}${stats ? ` (${stats})` : ''}`;
  }

  function renderTrigger(picker) {
    const value = picker.select.value;
    const item = picker.items.find(v => v.id === value);
    const content = picker.trigger.querySelector('.bvp-trigger-content');
    if (!item) {
      content.innerHTML = `<span class="bvp-placeholder">${esc(picker.placeholder)}</span>`;
      return;
    }
    const stats = statsFor(item);
    content.innerHTML = `${avatarHtml(item, 24)}<span class="bvp-trigger-main"><span class="bvp-trigger-name">${esc(item.label || item.id)}</span>${stats ? `<span class="bvp-trigger-stats">${esc(stats)}</span>` : ''}</span>`;
  }

  function renderList(picker, filter) {
    const q = String(filter || '').trim().toLowerCase();
    const items = q ? picker.items.filter(item => searchText(item).includes(q)) : picker.items;
    if (!items.length) {
      picker.list.innerHTML = `<div class="bvp-empty">${esc(q ? 'No voices found' : picker.empty)}</div>`;
      return;
    }
    picker.list.innerHTML = items.map(item => {
      const meta = metaFor(item) || {};
      const stats = statsFor(item);
      const sub = [meta.lang || meta.language, meta.file_type].filter(Boolean).join(' · ');
      return `<button class="bvp-item${item.id === picker.select.value ? ' selected' : ''}" type="button" data-value="${esc(item.id)}">
        ${avatarHtml(item, 28)}
        <span class="bvp-item-main"><span class="bvp-item-name">${esc(item.label || item.id)}</span>${sub ? `<span class="bvp-item-sub">${esc(sub)}</span>` : ''}</span>
        ${stats ? `<span class="bvp-item-stats">${esc(stats)}</span>` : ''}
      </button>`;
    }).join('');
  }

  function close(picker) {
    if (!picker) return;
    picker.drop.hidden = true;
    picker.drop.style.display = 'none';
    picker.trigger.classList.remove('open');
  }

  function closeAll(except) {
    Object.values(pickers).forEach(p => { if (p !== except) close(p); });
  }

  function open(picker) {
    closeAll(picker);
    picker.drop.hidden = false;
    picker.drop.style.display = '';
    picker.trigger.classList.add('open');
    picker.search.value = '';
    renderList(picker, '');
    picker.search.focus();
    requestAnimationFrame(() => picker.list.querySelector('.bvp-item.selected')?.scrollIntoView({ block: 'nearest' }));
  }

  function setValue(picker, value, dispatch) {
    picker.select.value = value || '';
    renderTrigger(picker);
    renderList(picker, picker.search.value);
    close(picker);
    if (dispatch !== false) picker.select.dispatchEvent(new Event('change', { bubbles: true }));
    picker.trigger.focus();
  }

  function upgrade(selectId, options) {
    const select = document.getElementById(selectId);
    if (!select) return null;
    if (pickers[selectId]) return pickers[selectId];
    const picker = {
      select,
      items: [],
      placeholder: options?.placeholder || Array.from(select.options).find(o => !o.value)?.textContent || '— select after fetch —',
      empty: options?.empty || 'No voices',
    };
    select.dataset.bvpUpgraded = '1';
    select.style.display = 'none';

    const root = document.createElement('div');
    root.className = 'bvp-root';
    root.dataset.bvpFor = selectId;
    select.parentNode.insertBefore(root, select);

    root.innerHTML = `<button class="bvp-trigger" type="button">
      <span class="bvp-trigger-content"><span class="bvp-placeholder">${esc(picker.placeholder)}</span></span>
      <span class="mdi mdi-chevron-down bvp-chevron"></span>
    </button>
    <div class="bvp-drop" hidden>
      <div class="bvp-search-wrap"><span class="mdi mdi-magnify bvp-search-icon"></span><input class="bvp-search" type="search" placeholder="Search voices..." autocomplete="off" spellcheck="false"></div>
      <div class="bvp-list"></div>
    </div>`;

    Object.assign(picker, {
      root,
      trigger: root.querySelector('.bvp-trigger'),
      drop: root.querySelector('.bvp-drop'),
      search: root.querySelector('.bvp-search'),
      list: root.querySelector('.bvp-list'),
    });

    picker.trigger.addEventListener('click', e => {
      e.preventDefault();
      picker.drop.hidden ? open(picker) : close(picker);
    });
    picker.trigger.addEventListener('keydown', e => {
      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open(picker); }
      if (e.key === 'ArrowDown') { e.preventDefault(); open(picker); picker.list.querySelector('.bvp-item')?.focus(); }
    });
    picker.search.addEventListener('input', () => renderList(picker, picker.search.value));
    picker.search.addEventListener('keydown', e => {
      if (e.key === 'Escape') { e.preventDefault(); close(picker); picker.trigger.focus(); }
      if (e.key === 'ArrowDown') { e.preventDefault(); picker.list.querySelector('.bvp-item')?.focus(); }
    });
    picker.list.addEventListener('click', e => {
      const item = e.target.closest('.bvp-item');
      if (item) setValue(picker, item.dataset.value, true);
    });
    picker.list.addEventListener('keydown', e => {
      const item = e.target.closest('.bvp-item');
      if (!item) return;
      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setValue(picker, item.dataset.value, true); }
      if (e.key === 'ArrowDown') { e.preventDefault(); (item.nextElementSibling || item).focus(); }
      if (e.key === 'ArrowUp') { e.preventDefault(); (item.previousElementSibling || picker.search).focus(); }
      if (e.key === 'Escape') { e.preventDefault(); close(picker); picker.trigger.focus(); }
    });
    select.addEventListener('change', () => { renderTrigger(picker); close(picker); });
    document.addEventListener('click', e => { if (!root.contains(e.target)) close(picker); }, true);

    pickers[selectId] = picker;
    syncFromSelect(selectId);
    return picker;
  }

  function populate(selectId, values, options) {
    const picker = upgrade(selectId, options || {});
    if (!picker) return;
    picker.placeholder = options?.placeholder || picker.placeholder;
    picker.empty = options?.empty || picker.empty;
    const previous = picker.select.value;
    picker.items = (values || []).map(norm).filter(item => item.id);
    picker.select.innerHTML = `<option value="">${esc(picker.placeholder)}</option>` + picker.items.map(item => `<option value="${esc(item.id)}">${esc(optionLabel(item))}</option>`).join('');
    if (previous && picker.items.some(item => item.id === previous)) picker.select.value = previous;
    renderTrigger(picker);
    renderList(picker, picker.search?.value || '');
  }

  function syncFromSelect(selectId) {
    const picker = pickers[selectId];
    if (!picker) return;
    picker.items = Array.from(picker.select.options).filter(o => o.value).map(o => ({ id: o.value, label: o.textContent || o.value, meta: libraryVoice(o.value) || {} }));
    renderTrigger(picker);
    renderList(picker, '');
  }

  function getValue(selectId) {
    return document.getElementById(selectId)?.value || '';
  }

  function set(selectId, value) {
    const picker = pickers[selectId] || upgrade(selectId);
    if (!picker) return;
    setValue(picker, value, true);
  }

  window.BenchmarkVoicePicker = { upgrade, populate, syncFromSelect, getValue, set };
})();