// ── Settings: Logs ────────────────────────────────────────────────────────

let _logsLiveTimer = null;
let _logsActiveLevel = '';

function escLog(s) { return String(s).replace(/[&<>]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;'}[c])); }

window.loadSettingsLogs = async function() {
  const viewer = $('s-log-viewer');
  if (!viewer) return;
  try {
    const data = await fetch('/api/logs?limit=300').then(r => r.json());
    const items = (data.items || []).filter(item =>
      !_logsActiveLevel || item.level === _logsActiveLevel
    );
    const count = $('s-log-count');
    if (count) count.textContent = items.length + ' entries';
    if (!items.length) {
      viewer.innerHTML = '<div class="s-log-empty">No log entries</div>';
      return;
    }
    viewer.innerHTML = items.map(item => {
      const ts = item.ts ? item.ts.replace('T', ' ').replace(/\.\d+Z$/, ' UTC') : '';
      return `<div class="s-log-row">
        <span class="s-log-ts">${escLog(ts)}</span>
        <span class="s-log-level ${escLog(item.level)}">${escLog(item.level)}</span>
        <span class="s-log-msg">${escLog(item.msg)}</span>
      </div>`;
    }).join('');
  } catch(e) {
    viewer.innerHTML = `<div class="s-log-empty">Failed to load logs: ${escLog(e.message)}</div>`;
  }
};

$('s-logs-refresh-btn')?.addEventListener('click', () => loadSettingsLogs());

$('s-logs-clear-btn')?.addEventListener('click', async () => {
  await fetch('/api/logs', { method: 'DELETE' });
  const viewer = $('s-log-viewer');
  if (viewer) viewer.innerHTML = '<div class="s-log-empty">Logs cleared</div>';
  const count = $('s-log-count');
  if (count) count.textContent = '';
});

$('s-logs-live-toggle')?.addEventListener('change', function() {
  clearInterval(_logsLiveTimer);
  if (this.checked) {
    loadSettingsLogs();
    _logsLiveTimer = setInterval(loadSettingsLogs, 3000);
  }
});

document.querySelectorAll('.s-log-filter').forEach(btn => {
  btn.addEventListener('click', function() {
    document.querySelectorAll('.s-log-filter').forEach(b => b.classList.remove('is-active'));
    this.classList.add('is-active');
    _logsActiveLevel = this.dataset.logLevel;
    loadSettingsLogs();
  });
});

// ── Settings: About ───────────────────────────────────────────────────────

function renderSettingsAbout() {
  const el = $('s-about-backends');
  if (!el) return;
  const available = new Set((_ttsBackends || []).filter(b => b.available).map(b => b.id));
  const all = (_ttsBackends || []);
  if (!all.length) { el.innerHTML = ''; return; }
  el.innerHTML = all.map(b => {
    const online = available.has(b.id);
    return `<span class="s-about-backend ${online ? 'online' : 'offline'}">
      <span class="mdi mdi-speaker-outline"></span>${escHtml(b.label)}
      <span class="mdi ${online ? 'mdi-check-circle-outline' : 'mdi-close-circle-outline'}"></span>
    </span>`;
  }).join('');
}

// ── Voices import ──────────────────────────────────────────────────────────

$('s-import-voices-file')?.addEventListener('change', async function () {
  const file = this.files?.[0];
  if (!file) return;
  const st = $('s-import-status');
  if (st) st.textContent = 'Uploading…';
  try {
    const fd = new FormData();
    fd.append('file', file);
    const r = await fetch('/api/voices/import', { method:'POST', body: fd });
    if (!r.ok) { const e = await r.json().catch(()=>({})); throw new Error(e.detail || r.statusText); }
    const d = await r.json();
    if (st) st.textContent = `Imported ${d.imported} files.`;
    toast(`Imported ${d.imported} voice files`, 'success');
    this.value = '';
  } catch(e) {
    if (st) st.textContent = 'Import failed.';
    toast('Import failed: ' + e.message, 'error');
  }
});

// ── Conversation Playground ────────────────────────────────────────────────

(function initConversationPlayground() {
  const chatWindow    = $('conv-chat-window');
  const micBtn        = $('conv-mic-btn');
  const micIcon       = $('conv-mic-icon');
  const micStatus     = $('conv-mic-status');
  const micTimer      = $('conv-mic-timer');
  const clearBtn      = $('conv-clear-btn');
  const sttSel        = $('conv-stt-select');
  const llmUrlInp     = $('conv-llm-url');
  const llmFetchBtn   = $('conv-llm-fetch-btn');
  const llmModelSel   = $('conv-llm-model-select');
  const ttsBkSel      = $('conv-tts-backend-select');
  const ttsFetchBtn   = $('conv-tts-fetch-btn');
  const ttsVoiceSel   = $('conv-tts-voice-select');
  const systemPrompt  = $('conv-system-prompt');
  const turnHistory   = $('conv-turn-history');
  if (!chatWindow || !micBtn) return;

  // Warn if microphone API is unavailable (HTTP on non-localhost = insecure context)
  if (!navigator.mediaDevices?.getUserMedia) {
    if (micStatus) {
      micStatus.textContent = 'Mic unavailable — insecure context';
      micStatus.style.color = 'var(--red, #e05)';
    }
    if (micBtn) {
      micBtn.disabled = true;
      micBtn.title = 'Browser blocks microphone on HTTP. Use http://localhost:7890 or HTTPS.\n' +
                     'Chrome fix: chrome://flags/#unsafely-treat-insecure-origin-as-secure';
      micBtn.style.opacity = '0.4';
    }
    const warn = document.createElement('div');
    warn.style.cssText = 'background:var(--red,#c00);color:#fff;padding:10px 16px;border-radius:8px;margin:12px 0;font-size:13px;line-height:1.5';
    warn.innerHTML = '<strong>⚠ Microphone blocked by browser</strong><br>' +
      'Browsers only allow microphone access on <b>secure contexts</b> (HTTPS or localhost).<br>' +
      'Quick fix: open the app at <b>http://localhost:7890</b> instead of the IP address.<br>' +
      'Remote access fix: add the URL in <code>chrome://flags/#unsafely-treat-insecure-origin-as-secure</code>';
    chatWindow && chatWindow.parentElement && chatWindow.parentElement.insertBefore(warn, chatWindow);
  }

  // Restore conv LLM URL from server settings
  if (llmUrlInp && _appSettings && _appSettings.conv_llm_url) llmUrlInp.value = _appSettings.conv_llm_url;
  if (llmUrlInp) llmUrlInp.addEventListener('input', () => {
    _patchSettings({ conv_llm_url: llmUrlInp.value });
    if (_appSettings) _appSettings.conv_llm_url = llmUrlInp.value;
  });

  let mediaRecorder = null;
  let recChunks = [];
  let recTimerInterval = null;
  let recStart = 0;
  let conversationHistory = [];
  let turnCount = 0;
  let isProcessing = false;

  // ── Populate STT backends ────────────────────────────────────────────────
  async function loadConvSttBackends() {
    if (!sttSel) return;
    const prev = sttSel.value;
    try {
      const d = await fetch('/api/stt-backends').then(r => r.json());
      const all = d.backends || [];
      if (!all.length) {
        sttSel.innerHTML = '<option value="configured">Default (configured)</option>';
        return;
      }
      sttSel.innerHTML = all.map(b => {
        const icon = b.available ? '✓' : '✗';
        const label = `${icon} ${escHtml(b.label)}`;
        const disabled = !b.available;
        return `<option value="${escHtml(b.id)}"${disabled ? ' disabled' : ''}>${label}</option>`;
      }).join('');
      // Restore prev selection or pick first available
      const opt = sttSel.querySelector(`option[value="${CSS.escape(prev)}"]`);
      if (opt && !opt.disabled) { sttSel.value = prev; }
      else {
        const first = sttSel.querySelector('option:not([disabled])');
        if (first) sttSel.value = first.value;
      }
    } catch(_) {
      sttSel.innerHTML = '<option value="configured">Default (configured)</option>';
    }
  }

  // ── Populate TTS backends (reuse global _ttsBackends) ───────────────────
  function populateConvTtsBackends() {
    if (!ttsBkSel) return;
    const prev = ttsBkSel.value;
    const all = _ttsBackends || [];
    if (!all.length) {
      ttsBkSel.innerHTML = '<option value="">No TTS backend available</option>';
      return;
    }
    ttsBkSel.innerHTML = all.map(b => {
      const icon = b.available ? '✓' : '✗';
      return `<option value="${escHtml(b.id)}"${!b.available ? ' disabled' : ''}>${icon} ${escHtml(b.label)}</option>`;
    }).join('');
    const opt = ttsBkSel.querySelector(`option[value="${CSS.escape(prev)}"]`);
    if (opt && !opt.disabled) { ttsBkSel.value = prev; }
    else {
      const first = ttsBkSel.querySelector('option:not([disabled])');
      if (first) ttsBkSel.value = first.value;
    }
  }

  // ── Fetch LLM models ─────────────────────────────────────────────────────
  async function fetchLlmModels() {
    if (!llmModelSel) return;
    const url = llmUrlInp?.value.trim() || '';
    llmFetchBtn.disabled = true;
    try {
      const d = await fetch('/api/conversation/llm-models' + (url ? '?url=' + encodeURIComponent(url) : '')).then(r => r.json());
      const models = d.models || [];
      llmModelSel.innerHTML = models.length
        ? models.map(m => `<option value="${escHtml(m)}">${escHtml(m)}</option>`).join('')
        : '<option value="">No models found</option>';
    } catch(e) {
      llmModelSel.innerHTML = '<option value="">Fetch failed</option>';
    } finally {
      llmFetchBtn.disabled = false;
    }
  }

  // ── Fetch TTS voices ─────────────────────────────────────────────────────
  async function fetchConvTtsVoices() {
    if (!ttsVoiceSel || !ttsBkSel) return;
    const backend = ttsBkSel.value;
    if (!backend) return;
    ttsFetchBtn.disabled = true;
    try {
      const rawVoices = await fetch('/api/tts-voices?backend=' + encodeURIComponent(backend)).then(r => r.json());
      ttsVoiceSel.innerHTML = rawVoices.length
        ? rawVoices.map(v => { const id = backendVoiceId(v); return `<option value="${escHtml(id)}">${escHtml(id)}</option>`; }).join('')
        : '<option value="">No voices</option>';
    } catch(e) {
      ttsVoiceSel.innerHTML = '<option value="">Fetch failed</option>';
    } finally {
      ttsFetchBtn.disabled = false;
    }
  }

  // ── Chat bubble helpers ──────────────────────────────────────────────────
  function timeStr() {
    const now = new Date();
    return now.getHours().toString().padStart(2,'0') + ':' + now.getMinutes().toString().padStart(2,'0');
  }

  function removeWelcome() {
    const w = chatWindow.querySelector('.conv-chat-welcome');
    if (w) w.remove();
  }

  function addBubble(role, text) {
    removeWelcome();
    const wrap = document.createElement('div');
    wrap.className = `conv-bubble-wrap conv-bubble-wrap--${role}`;
    const bubble = document.createElement('div');
    bubble.className = `conv-bubble conv-bubble--${role}`;
    bubble.textContent = text || '';
    const meta = document.createElement('div');
    meta.className = 'conv-bubble-meta';
    meta.textContent = timeStr();
    wrap.appendChild(bubble);
    wrap.appendChild(meta);
    chatWindow.appendChild(wrap);
    chatWindow.scrollTop = chatWindow.scrollHeight;
    return bubble;
  }

  function addTypingBubble() {
    removeWelcome();
    const wrap = document.createElement('div');
    wrap.className = 'conv-bubble-wrap conv-bubble-wrap--assistant';
    wrap.id = 'conv-typing-wrap';
    const bubble = document.createElement('div');
    bubble.className = 'conv-bubble conv-bubble--assistant';
    bubble.innerHTML = '<span class="conv-typing"><span></span><span></span><span></span></span>';
    wrap.appendChild(bubble);
    chatWindow.appendChild(wrap);
    chatWindow.scrollTop = chatWindow.scrollHeight;
    return bubble;
  }

  function addErrorBubble(msg) {
    removeWelcome();
    const wrap = document.createElement('div');
    wrap.className = 'conv-bubble-wrap conv-bubble-wrap--assistant';
    const bubble = document.createElement('div');
    bubble.className = 'conv-bubble conv-bubble--error';
    bubble.innerHTML = `<span class="mdi mdi-alert-outline"></span> ${escHtml(msg)}`;
    wrap.appendChild(bubble);
    chatWindow.appendChild(wrap);
    chatWindow.scrollTop = chatWindow.scrollHeight;
  }

  // ── Stats panel ──────────────────────────────────────────────────────────
  function fmtMs(ms) { return ms == null ? '—' : ms >= 1000 ? (ms/1000).toFixed(2)+'s' : ms+'ms'; }

  function updateStatBar(id, val, maxVal) {
    const fill = $(id);
    if (fill) fill.style.width = maxVal > 0 ? Math.min(100, (val / maxVal) * 100) + '%' : '0%';
  }

  function updateStats(stats) {
    const { stt_ms, llm_ttft_ms, llm_total_ms, tts_ms, total_ms } = stats;
    const max = total_ms || 1;
    const set = (valId, fillId, ms) => {
      const el = $(valId); if (el) el.textContent = fmtMs(ms);
      updateStatBar(fillId, ms || 0, max);
    };
    set('cpv-stt',   'cpf-stt',   stt_ms);
    set('cpv-ttft',  'cpf-ttft',  llm_ttft_ms);
    set('cpv-llm',   'cpf-llm',   llm_total_ms);
    set('cpv-tts',   'cpf-tts',   tts_ms);
    set('cpv-total', 'cpf-total', total_ms);
  }

  function addHistoryItem(n, totalMs, ok) {
    const empty = turnHistory?.querySelector('.conv-history-empty');
    if (empty) empty.remove();
    const item = document.createElement('div');
    item.className = 'conv-hist-item';
    const cls = ok ? 'conv-hist-ok' : 'conv-hist-err';
    const icon = ok ? 'mdi-check-circle-outline' : 'mdi-alert-outline';
    item.innerHTML = `<span class="conv-hist-num">#${n}</span>
      <span class="${cls}"><span class="mdi ${icon}"></span></span>
      <span class="conv-hist-time ${cls}">${fmtMs(totalMs)}</span>`;
    turnHistory.insertBefore(item, turnHistory.firstChild);
  }

  // ── Recording ────────────────────────────────────────────────────────────
  function startRecTimer() {
    recStart = Date.now();
    recTimerInterval = setInterval(() => {
      const s = Math.floor((Date.now() - recStart) / 1000);
      if (micTimer) micTimer.textContent = s + 's';
    }, 500);
  }

  function stopRecTimer() {
    clearInterval(recTimerInterval);
    if (micTimer) micTimer.textContent = '';
  }

  async function startRecording() {
    if (isProcessing) return;
    if (!navigator.mediaDevices?.getUserMedia) {
      toast('Microphone unavailable — browser requires a secure context (HTTPS or localhost). ' +
            'Access the app via http://localhost:7890 or enable it in chrome://flags/#unsafely-treat-insecure-origin-as-secure', 'error', 8000);
      return;
    }
    let stream;
    try {
      stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    } catch(e) {
      toast('Microphone access denied: ' + e.message, 'error');
      return;
    }
    recChunks = [];
    mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.ondataavailable = e => { if (e.data.size > 0) recChunks.push(e.data); };
    mediaRecorder.onstop = () => {
      stream.getTracks().forEach(t => t.stop());
      const blob = new Blob(recChunks, { type: mediaRecorder.mimeType || 'audio/webm' });
      processBlob(blob);
    };
    mediaRecorder.start();
    micBtn.classList.add('recording');
    micIcon.className = 'mdi mdi-stop';
    if (micStatus) micStatus.textContent = 'Recording… click to stop';
    startRecTimer();
  }

  function stopRecording() {
    if (!mediaRecorder || mediaRecorder.state === 'inactive') return;
    mediaRecorder.stop();
    stopRecTimer();
    micBtn.classList.remove('recording');
    micBtn.classList.add('processing');
    micIcon.className = 'mdi mdi-dots-horizontal';
    if (micStatus) micStatus.textContent = 'Processing…';
    isProcessing = true;
  }

  // ── Send turn via SSE ─────────────────────────────────────────────────────
  async function processBlob(blob) {
    turnCount++;
    const turnN = turnCount;
    const t0 = Date.now();

    // Show user bubble with placeholder
    const userBubble = addBubble('user', '…');
    const assistantBubble = addTypingBubble();
    let assistantText = '';
    let lastStats = null;

    const form = new FormData();
    form.append('audio', blob, 'audio.webm');
    form.append('stt_backend', sttSel?.value || 'configured');
    form.append('llm_url', llmUrlInp?.value.trim() || '');
    form.append('llm_model', llmModelSel?.value || '');
    form.append('tts_backend', ttsBkSel?.value || 'voice_clone');
    form.append('tts_voice', ttsVoiceSel?.value || '');
    form.append('system_prompt', systemPrompt?.value.trim() || 'You are a helpful voice assistant.');
    form.append('history', JSON.stringify(conversationHistory.slice(-20)));

    try {
      const resp = await fetch('/api/conversation/turn', { method: 'POST', body: form });
      if (!resp.ok) throw new Error('Server error ' + resp.status);
      const reader = resp.body.getReader();
      const dec = new TextDecoder();
      let buf = '';

      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        buf += dec.decode(value, { stream: true });
        const lines = buf.split('\n');
        buf = lines.pop();
        for (const line of lines) {
          if (!line.startsWith('data:')) continue;
          let evt;
          try { evt = JSON.parse(line.slice(5).trim()); } catch(_) { continue; }

          if (evt.type === 'transcript') {
            userBubble.textContent = evt.text || '(empty)';
            if (micStatus) micStatus.textContent = 'Generating reply…';
          } else if (evt.type === 'token') {
            if (assistantBubble.querySelector('.conv-typing')) {
              assistantBubble.innerHTML = '';
            }
            assistantText += evt.delta;
            assistantBubble.textContent = assistantText;
            chatWindow.scrollTop = chatWindow.scrollHeight;
          } else if (evt.type === 'llm_done') {
            assistantText = evt.text || assistantText;
            assistantBubble.textContent = assistantText;
            if (micStatus) micStatus.textContent = 'Synthesising speech…';
          } else if (evt.type === 'audio') {
            const mime = evt.mime || 'audio/wav';
            const binStr = atob(evt.b64);
            const arr = new Uint8Array(binStr.length);
            for (let i = 0; i < binStr.length; i++) arr[i] = binStr.charCodeAt(i);
            const audioBlob = new Blob([arr], { type: mime });
            const url = URL.createObjectURL(audioBlob);
            const audio = new Audio(url);
            audio.onended = () => URL.revokeObjectURL(url);
            audio.play().catch(() => {});
            if (micStatus) micStatus.textContent = 'Speaking…';
          } else if (evt.type === 'stats') {
            lastStats = evt;
            updateStats(evt);
          } else if (evt.type === 'done') {
            conversationHistory.push({ role: 'user', content: userBubble.textContent });
            conversationHistory.push({ role: 'assistant', content: assistantText });
            addHistoryItem(turnN, lastStats?.total_ms ?? (Date.now() - t0), true);
            if (micStatus) micStatus.textContent = 'Ready';
          } else if (evt.type === 'error') {
            const wrap = assistantBubble.closest('.conv-bubble-wrap');
            if (wrap) wrap.remove();
            const stage = evt.stage?.toUpperCase() || 'ERR';
            let msg = evt.message || 'Unknown error';
            // Surface the actual server error detail, not the raw HTTP noise
            const detailMatch = msg.match(/HTTP \d+:\s*(.+)/s);
            if (detailMatch) msg = detailMatch[1].trim();
            // Truncate very long stack traces
            if (msg.length > 300) msg = msg.slice(0, 300) + '…';
            addErrorBubble(`[${stage}] ${msg}`);
            addHistoryItem(turnN, Date.now() - t0, false);
            if (micStatus) micStatus.textContent = 'Error — ready';
          }
        }
      }
    } catch(e) {
      const wrap = assistantBubble.closest('.conv-bubble-wrap');
      if (wrap) wrap.remove();
      addErrorBubble(e.message);
      addHistoryItem(turnN, Date.now() - t0, false);
      if (micStatus) micStatus.textContent = 'Error — ready';
    } finally {
      isProcessing = false;
      micBtn.classList.remove('processing');
      micIcon.className = 'mdi mdi-microphone';
    }
  }

  // ── Wire up events ───────────────────────────────────────────────────────
  micBtn.addEventListener('click', () => {
    if (isProcessing) return;
    if (mediaRecorder && mediaRecorder.state === 'recording') {
      stopRecording();
    } else {
      startRecording();
    }
  });

  clearBtn?.addEventListener('click', () => {
    conversationHistory = [];
    turnCount = 0;
    chatWindow.innerHTML = '<div class="conv-chat-welcome"><span class="mdi mdi-forum-outline" style="font-size:32px;opacity:.25"></span><p>Press the microphone button below and start talking.</p></div>';
    if (turnHistory) turnHistory.innerHTML = '<div class="conv-history-empty">No turns yet.</div>';
    ['cpv-stt','cpv-ttft','cpv-llm','cpv-tts','cpv-total'].forEach(id => { const el = $(id); if(el) el.textContent='—'; });
    ['cpf-stt','cpf-ttft','cpf-llm','cpf-tts','cpf-total'].forEach(id => { const el = $(id); if(el) el.style.width='0%'; });
  });

  llmFetchBtn?.addEventListener('click', fetchLlmModels);
  ttsFetchBtn?.addEventListener('click', fetchConvTtsVoices);

  // Re-populate TTS when backend changes
  ttsBkSel?.addEventListener('change', () => { ttsVoiceSel.innerHTML = '<option value="">— fetch voices —</option>'; });

  // ── Init ─────────────────────────────────────────────────────────────────
  loadConvSttBackends();
  populateConvTtsBackends();

  // Keep TTS backend select in sync after global backend refresh
  window._ttsRefreshHooks = window._ttsRefreshHooks || [];
  window._ttsRefreshHooks.push(populateConvTtsBackends);
})();