import { LightElement } from './base.js';

// Slash commands handled entirely server-side: they reply with a `Done` and never
// echo back as a `user_message`, so they are the only commands rendered
// optimistically on send. Everything else — custom commands and unknown ones — is
// telnet-style: the bubble appears only when the backend persists it and re-emits a
// `user_message` (custom commands carry their typed form as the echoed content).
// (`/new` and `/clear` are intercepted earlier and never reach the echo.)
const SYSTEM_SLASH_COMMANDS = new Set([
  '/help', '/models', '/model', '/context', '/cost',
  '/compact', '/resettools', '/sethome',
]);

/**
 * Base class for chat UI components (desktop copilot, mobile chat page).
 *
 * Contains all WebSocket logic, message state, and approval handling.
 * Subclasses implement the render() method and override the DOM hooks:
 *   - _scrollToBottom()
 *   - _getInputContent()  → returns current input value
 *   - _clearInput()       → empties the input
 *   - _onMessagePushed(item) → called after each push (scroll, focus, etc.)
 */
export class ChatSession extends LightElement {
  static properties = {
    _messages:           { state: true },
    _waiting:            { state: true },
    _expanded:           { state: true },
    _providers:          { state: true },
    _selectedClient:     { state: true },
    _rejectingId:           { state: true },
    _rejectNote:            { state: true },
    _clarificationAnswer:   { state: true },
    // Voice recording state (shared by every chat surface).
    _hasTranscribe:      { state: true },
    _recording:          { state: true },
    // Pending attachments for the message being composed (shown as chips above
    // the textarea; uploaded to disk on selection, sent with the next message).
    _attachments:        { state: true },
  };

  // Live events whose arrival implies a turn is in flight (used to restore the
  // STOP button when reconnecting mid-turn).
  static _STREAMING_EVENTS = new Set([
    'thinking', 'tool_start', 'agent_start', 'pending_write', 'approval_required',
  ]);

  constructor() {
    super();
    this._messages          = [];
    this._waiting           = false;
    this._expanded          = new Set();
    this._ws                = null;
    this._providers         = [];
    this._selectedClient    = null;
    this._rejectingId           = null;
    this._rejectNote            = '';
    this._clarificationAnswer   = '';
    // Runtime-selected source. When null, falls back to the static `_wsSource`.
    // Lets a single chat component switch between sessions (e.g. copilot tabs).
    this._activeSource          = null;
    // Voice recording state. Shared so every surface (desktop copilot + mobile
    // chat) can expose the same mic button. The desktop-only Ctrl+Space push-
    // to-talk shortcut is wired in `app-copilot`; `_shortcutRecording` tracks
    // whether a recording session was started by that shortcut.
    this._hasTranscribe     = false;
    this._recording         = false;
    this._shortcutRecording = false;
    this._mediaRecorder     = null;
    this._audioChunks       = [];
    // Each entry: { name, path, mimetype, filesize, uploading? }. While an upload
    // is in flight the entry has `uploading: true` and no `path` yet.
    this._attachments       = [];
  }

  async connectedCallback() {
    super.connectedCallback();
    // Fire-and-forget: availability of a transcription provider determines
    // whether the mic button is rendered at all.
    this._checkTranscribe();
    await Promise.all([this._loadProviders(), this._loadHistory()]);
    this._connectWS();
  }

  // ── Source identity — override in subclass ────────────────────────────────────

  // Static default source for this component. Subclasses override (e.g. 'mobile').
  get _wsSource() { return 'web'; }

  // Effective source: the runtime-selected one, or the static default.
  get _source() { return this._activeSource ?? this._wsSource; }

  /**
   * Switch the live connection to a different source: tear down the current WS,
   * swap source, reload that source's history, and reconnect. Used to move
   * between sessions (e.g. General ↔ a project chat) without remounting.
   */
  async _switchSource(source) {
    if (this._ws) { this._ws.onclose = null; this._ws.close(); this._ws = null; }
    this._activeSource = source;
    this._messages = [];
    this._waiting  = false;
    await this._loadHistory();
    this._connectWS();
  }

  // ── Data loading ──────────────────────────────────────────────────────────────

  async _loadProviders() {
    try {
      const res = await fetch('/api/llm/models/selector');
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const { models, default: def } = await res.json();
      this._providers      = models;
      this._selectedClient = def;
    } catch (e) {
      console.error('Failed to load LLM models:', e);
    }
  }

  async _loadHistory() {
    try {
      const res = await fetch(`/api/${this._source}/messages`);
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const items = await res.json();
      if (items.length > 0) {
        this._messages = items;
        const expanded = new Set(this._expanded);
        for (const m of items) {
          if (m.kind === 'tool' && m.status === 'pending') expanded.add(m.tool_call_id);
        }
        this._expanded = expanded;
        this._scrollToBottom();
        // Set flag so ws.onopen sends a resume if there are pending tools
        // (approval/clarification waiting) or interrupted tools (status=error+Interrupted).
        this._hasPendingTools = items.some(
          m => m.kind === 'tool' && (m.status === 'pending' || (m.status === 'error' && m.error === 'Interrupted.'))
        );
      }
    } catch (e) {
      console.warn('Could not load history:', e.message);
    }
  }

  // ── WebSocket ─────────────────────────────────────────────────────────────────

  _connectWS() {
    const proto = location.protocol === 'https:' ? 'wss' : 'ws';
    const ws = new WebSocket(`${proto}://${location.host}/api/ws?source=${this._source}`);
    this._ws = ws;
    ws.onopen = () => {
      if (this._hasPendingTools) {
        ws.send(JSON.stringify({ type: 'resume' }));
        this._hasPendingTools = false;
      }
    };
    ws.onmessage = (ev) => this._handleServerMsg(JSON.parse(ev.data));
    ws.onclose   = ()   => setTimeout(() => this._connectWS(), 2000);
  }

  async _startNewSession() {
    if (this._ws) {
      this._ws.onclose = null;
      this._ws.close();
      this._ws = null;
    }
    this._messages = [];
    this._waiting  = false;
    try {
      const res = await fetch(`/api/sessions?source=${this._source}`, { method: 'POST' });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
    } catch (e) {
      this._pushError('Could not clear session: ' + e.message);
    }
    this._connectWS();
  }

  // ── Message handling ──────────────────────────────────────────────────────────

  _handleServerMsg(msg) {
    console.debug('[WS ←]', msg.type, msg);
    // Receiving a live streaming event means a turn is active — restore the STOP
    // button even if we reconnected mid-turn and missed the start. `done`/`error`
    // reset it below.
    if (!this._waiting && ChatSession._STREAMING_EVENTS.has(msg.type)) {
      this._waiting = true;
    }
    switch (msg.type) {
      // Sent on (re)connect: authoritative running state for this session.
      case 'turn_running':
        this._waiting = msg.running;
        break;

      case 'pending_write':
        this._push({
          kind:         'pending_write',
          request_id:   msg.request_id,
          tool_call_id: msg.tool_call_id,
          path:         msg.path,
          old_content:  msg.old_content ?? '',
          new_content:  msg.new_content,
          status:       'pending',
        });
        break;

      case 'thinking':
        this._push({ kind: 'thinking', message_id: msg.message_id, content: msg.content,
                     input_tokens: msg.input_tokens, output_tokens: msg.output_tokens });
        break;

      case 'done':
        this._waiting = false;
        this._push({ kind: 'assistant', content: msg.content,
                     input_tokens: msg.input_tokens, output_tokens: msg.output_tokens });
        break;

      case 'tool_start': {
        // On resume, the server re-emits ToolStart for tools already in history.
        // Update in place rather than pushing a duplicate card.
        const existingIdx = this._messages.findIndex(
          m => (m.kind === 'tool') && m.tool_call_id === msg.tool_call_id
        );
        if (existingIdx >= 0) {
          this._updateTool(msg.tool_call_id, { status: 'running', result: null, error: null });
        } else {
          this._push({
            kind:         'tool',
            tool_call_id: msg.tool_call_id,
            name:         msg.name,
            label_short:  msg.label_short,
            label_full:   msg.label_full,
            path:         msg.path,
            arguments:    msg.arguments,
            status:       'running',
            result:       null,
            error:        null,
          });
        }
        break;
      }

      case 'tool_done':
        this._updateTool(msg.tool_call_id, { status: 'done', result: msg.result, result_type: msg.result_type });
        break;

      case 'tool_error':
        this._updateTool(msg.tool_call_id, { status: 'error', error: msg.error });
        break;

      case 'tool_cancelled':
        // Stopped by the user via /stop — distinct from an error.
        this._updateTool(msg.tool_call_id, { status: 'cancelled' });
        break;

      case 'tool_rejected':
        // Denied by an approval policy or a human — distinct from an error.
        this._updateTool(msg.tool_call_id, { status: 'rejected', error: msg.reason });
        break;

      case 'approval_required':
        this._updateTool(msg.tool_call_id, { status: 'pending', request_id: msg.request_id });
        this._expanded = new Set([...this._expanded, msg.tool_call_id]);
        this.updateComplete.then(() => this._scrollToBottom());
        break;

      case 'approval_resolved': {
        const { request_id, tool_call_id, approved } = msg;
        this._updatePendingWrite(request_id, { status: approved ? 'approved' : 'rejected' });
        if (tool_call_id != null) {
          if (approved) {
            this._updateTool(tool_call_id, { status: 'running', request_id: null });
          } else {
            this._updateTool(tool_call_id, { status: 'rejected', error: 'Rifiutato.' });
          }
          const expanded = new Set(this._expanded);
          expanded.delete(tool_call_id);
          this._expanded = expanded;
        }
        break;
      }

      case 'agent_question':
        // Link the question form to the tool card by updating status + storing request_id.
        this._updateTool(msg.tool_call_id, {
          status:            'pending',
          request_id:        msg.request_id,
          question:          msg.question,
          question_title:    msg.title,
          suggested_answers: msg.suggested_answers ?? [],
        });
        this._expanded = new Set([...this._expanded, msg.tool_call_id]);
        this.updateComplete.then(() => this._scrollToBottom());
        break;

      case 'agent_start':
        this._push({
          kind:            'agent',
          stack_id:        msg.stack_id,
          agent_id:        msg.agent_id,
          parent_agent_id: msg.parent_agent_id,
          prompt_preview:  msg.prompt_preview,
          depth:           msg.depth,
          done:            false,
        });
        break;

      case 'agent_done': {
        this._updateAgent(msg.stack_id, { done: true });
        const agentMsg = this._messages.find(m => m.kind === 'agent' && m.stack_id === msg.stack_id);
        if (agentMsg) {
          this._push({
            kind:            'agent_end',
            agent_id:        msg.agent_id,
            parent_agent_id: msg.parent_agent_id,
            result_preview:  msg.result_preview,
            depth:           agentMsg.depth,
          });
        }
        break;
      }

      case 'truncated':
        this._pushError(`Risposta troncata dal limite di token (↓${msg.output_tokens?.toLocaleString() ?? '?'} tok).`);
        break;

      case 'error':
        this._waiting = false;
        this._pushError(msg.message);
        break;

      case 'file_changed':
        window.dispatchEvent(new CustomEvent('file-changed', { detail: { path: msg.path } }));
        break;

      case 'open_file': {
        // Agent-driven file open. Every kind — HTML included — routes through the
        // file-viewer page, which renders HTML live in an origin-isolated iframe.
        const p = msg.path ?? '';
        if (p && typeof window.openFile === 'function') window.openFile(p);
        break;
      }

      case 'model_fallback':
        this._push({ kind: 'info', content: `⚡ Model fallback: ${msg.from} → ${msg.to}` });
        break;

      case 'user_message':
        // Telnet-style echo: the backend emits this when the message is persisted
        // to history, so we render the bubble here — for the sending client and
        // every other client alike. No dedup needed: regular messages are never
        // rendered optimistically (only slash commands are, and those are never
        // echoed). `message_id` is the real chat_history row id.
        this._push({
          kind:        'user',
          content:     msg.content,
          attachments: msg.attachments ?? [],
          message_id:  msg.message_id,
        });
        break;

      case 'new_session':
        this._messages = [];
        this._waiting  = false;
        break;

      case 'client_selected':
        // Backend is the single source of truth for the pinned model. Updates
        // arrive here regardless of which client (dropdown, /model command,
        // another tab) originated the change — so the dropdown/select stays
        // in sync. We set the field directly; Lit re-renders because
        // `_selectedClient` is `state: true`.
        this._selectedClient = msg.client;
        break;

      case 'llm_failed':
        this._waiting = false;
        this._pushError(`LLM unavailable. Tried: ${msg.tried.join(', ')}. ${msg.last_error}`);
        break;
    }
  }

  _push(item) {
    console.debug('[push]', item.kind, item);
    this._messages = [...this._messages, item];
    this._onMessagePushed(item);
  }

  _pushError(text) {
    this._push({ kind: 'error', content: text });
  }

  _updateAgent(stack_id, patch) {
    const idx = this._messages.findIndex(m => m.kind === 'agent' && m.stack_id === stack_id);
    if (idx < 0) return;
    const updated = [...this._messages];
    updated[idx] = { ...updated[idx], ...patch };
    this._messages = updated;
  }

  _updateTool(tool_call_id, patch) {
    const idx = this._messages.findIndex(
      m => (m.kind === 'tool' || m.kind === 'pending_write') && m.tool_call_id === tool_call_id
    );
    if (idx < 0) return;
    const updated = [...this._messages];
    updated[idx] = { ...updated[idx], ...patch };
    this._messages = updated;
  }

  _updatePendingWrite(request_id, patch) {
    const idx = this._messages.findIndex(
      m => m.kind === 'pending_write' && m.request_id === request_id
    );
    if (idx < 0) return;
    // Once resolved (approved or rejected) remove the block entirely —
    // the tool card already shows the outcome.
    if (patch.status === 'approved' || patch.status === 'rejected') {
      this._messages = this._messages.filter((_, i) => i !== idx);
      return;
    }
    const updated = [...this._messages];
    updated[idx] = { ...updated[idx], ...patch };
    this._messages = updated;
  }

  // ── User input ────────────────────────────────────────────────────────────────

  async _send() {
    const content = this._getInputContent();
    // Text is required; attachments are a complement, never sent on their own.
    // Sending is allowed while a turn is in flight: the message is queued and
    // injected into the running turn at its next round boundary.
    if (!content) return;
    // Don't send while an attachment is still streaming to disk, or its path
    // would be missing from the message.
    if (this._attachments.some(a => a.uploading)) return;
    this._clearInput();

    if (content === '/new' || content === '/clear') {
      this._attachments = [];
      await this._startNewSession();
      return;
    }

    // Strip client-only fields; the server persists these as message metadata.
    const attachments = this._attachments.map(({ name, path, mimetype, filesize }) =>
      ({ name, path, mimetype, filesize }));
    this._attachments = [];

    // System slash commands reply with a `Done` and never echo back as a
    // `user_message`, so render them optimistically. Regular messages and custom
    // slash commands use telnet-style echo: no local push — the bubble appears only
    // when the backend persists the message and sends it back as a `user_message`
    // event (for a custom command, carrying the typed form as its content), placing
    // it correctly (e.g. after the current round's tools when injected mid-turn).
    if (SYSTEM_SLASH_COMMANDS.has(content.split(/\s+/)[0])) {
      this._push({ kind: 'user', content, attachments });
    }
    this._waiting = true;

    if (this._ws?.readyState === WebSocket.OPEN) {
      this._ws.send(JSON.stringify({ content, attachments }));
    } else {
      this._pushError('Not connected — reconnecting, please retry.');
      this._waiting = false;
    }
  }

  // ── Attachments ────────────────────────────────────────────────────────────

  /**
   * Upload the given files to `data/uploads/{session}/` and add them as chips.
   * Each file is streamed to disk server-side; while in flight its chip shows a
   * spinner. Accepts a FileList or array of File.
   */
  async _addFiles(files) {
    const list = Array.from(files || []).filter(Boolean);
    if (list.length === 0) return;

    // Optimistic placeholders so the chips appear immediately.
    const pending = list.map(f => ({ name: f.name, filesize: f.size, mimetype: f.type, uploading: true }));
    this._attachments = [...this._attachments, ...pending];

    const form = new FormData();
    for (const f of list) form.append('files', f, f.name);

    try {
      const res = await fetch(`/api/${this._source}/uploads`, { method: 'POST', body: form });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const saved = await res.json(); // [{ name, path, mimetype, filesize }]
      // Replace the placeholders with the saved entries (preserve other chips).
      this._attachments = this._attachments.filter(a => !pending.includes(a)).concat(saved);
    } catch (e) {
      console.error('upload failed:', e);
      // Drop the failed placeholders and surface the error.
      this._attachments = this._attachments.filter(a => !pending.includes(a));
      this._pushError('Upload failed: ' + e.message);
    }
  }

  _removeAttachment(i) {
    this._attachments = this._attachments.filter((_, idx) => idx !== i);
  }

  /** Handler for a paste event: uploads any files on the clipboard. */
  _onPaste(e) {
    const files = e.clipboardData?.files;
    if (files && files.length) {
      e.preventDefault();
      this._addFiles(files);
    }
  }

  /** Handler for a drop event on the composer: uploads the dropped files. */
  _onDrop(e) {
    const files = e.dataTransfer?.files;
    if (files && files.length) {
      e.preventDefault();
      this._addFiles(files);
    }
  }

  /**
   * Pin a client (model) for the current source. Mirrors the state locally for
   * instant feedback, then notifies the backend, which is the single source of
   * truth — it broadcasts `client_selected` back to every client of the source
   * (this tab included), so the dropdown/select re-syncs from authoritative
   * state. Pass `'auto'` to clear the pin.
   */
  _selectClient(client) {
    this._selectedClient = client;
    if (this._ws?.readyState === WebSocket.OPEN) {
      this._ws.send(JSON.stringify({ type: 'select_client', client }));
    }
  }

  _cancel() {
    if (this._ws?.readyState === WebSocket.OPEN) {
      this._ws.send(JSON.stringify({ type: 'cancel' }));
    }
    this._waiting = false;
  }

  // ── Approval — pending_write (WS) ─────────────────────────────────────────────

  _approve(msg) {
    if (this._ws?.readyState === WebSocket.OPEN) {
      this._ws.send(JSON.stringify({ type: 'approve_write', request_id: msg.request_id }));
    }
    this._updatePendingWrite(msg.request_id, { status: 'approved' });
  }

  _approveWriteBypass(msg, bypassSecs) {
    if (this._ws?.readyState === WebSocket.OPEN) {
      this._ws.send(JSON.stringify({ type: 'approve_write', request_id: msg.request_id, bypass_secs: bypassSecs }));
    }
    this._updatePendingWrite(msg.request_id, { status: 'approved' });
  }

  _startReject(msg) {
    this._rejectingId = msg.request_id;
    this._rejectNote  = '';
  }

  _confirmReject(msg) {
    if (this._ws?.readyState === WebSocket.OPEN) {
      this._ws.send(JSON.stringify({ type: 'reject_write', request_id: msg.request_id, note: this._rejectNote }));
    }
    this._updatePendingWrite(msg.request_id, { status: 'rejected' });
    this._rejectingId = null;
  }

  // ── Approval — tool (WS, live) ────────────────────────────────────────────────

  _approveWsTool(msg) {
    if (this._ws?.readyState === WebSocket.OPEN) {
      this._ws.send(JSON.stringify({ type: 'approve_tool', request_id: msg.request_id }));
    }
    this._updateTool(msg.tool_call_id, { status: 'running', request_id: null });
    this._rejectingId = null;
  }

  _approveWsToolBypass(msg, bypassSecs) {
    if (this._ws?.readyState === WebSocket.OPEN) {
      this._ws.send(JSON.stringify({ type: 'approve_tool', request_id: msg.request_id, bypass_secs: bypassSecs }));
    }
    this._updateTool(msg.tool_call_id, { status: 'running', request_id: null });
    this._rejectingId = null;
  }

  _rejectWsTool(msg) {
    if (this._ws?.readyState === WebSocket.OPEN) {
      this._ws.send(JSON.stringify({ type: 'reject_tool', request_id: msg.request_id, note: this._rejectNote }));
    }
    this._updateTool(msg.tool_call_id, { status: 'rejected', error: "Rifiutato dall'utente." });
    this._rejectingId = null;
  }

  // ── Approval — tool (REST, from history) ─────────────────────────────────────

  async _approveTool(msg) {
    this._updateTool(msg.tool_call_id, { status: 'running' });
    try {
      const res = await fetch(`/api/tools/${msg.tool_call_id}/resolve`, {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action: 'approve' }),
      });
      if (!res.ok) {
        this._updateTool(msg.tool_call_id, { status: 'error', error: `Approval failed: ${await res.text()}` });
        return;
      }
      const data = await res.json();
      this._updateTool(msg.tool_call_id, { status: data.status, result: data.result, result_type: data.result_type });
      if (this._ws?.readyState === WebSocket.OPEN) this._ws.send(JSON.stringify({ type: 'resume' }));
    } catch (e) {
      this._updateTool(msg.tool_call_id, { status: 'error', error: String(e) });
    }
  }

  async _rejectTool(msg) {
    this._updateTool(msg.tool_call_id, { status: 'running' });
    try {
      const res = await fetch(`/api/tools/${msg.tool_call_id}/resolve`, {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action: 'reject', note: this._rejectNote }),
      });
      if (!res.ok) {
        this._updateTool(msg.tool_call_id, { status: 'error', error: `Rejection failed: ${await res.text()}` });
        return;
      }
      this._updateTool(msg.tool_call_id, { status: 'error', error: 'Rejected by user.' });
      this._rejectingId = null;
      if (this._ws?.readyState === WebSocket.OPEN) this._ws.send(JSON.stringify({ type: 'resume' }));
    } catch (e) {
      this._updateTool(msg.tool_call_id, { status: 'error', error: String(e) });
    }
  }

  // ── Clarification ─────────────────────────────────────────────────────────────

  _answerQuestion(msg) {
    const answer = this._clarificationAnswer.trim();
    if (!answer) return;
    if (this._ws?.readyState === WebSocket.OPEN) {
      this._ws.send(JSON.stringify({ type: 'answer_question', request_id: msg.request_id, answer }));
    }
    this._updateTool(msg.tool_call_id, { status: 'running', request_id: null });
    this._clarificationAnswer = '';
  }

  // ── DOM hooks (override in subclass) ─────────────────────────────────────────

  /** Called after every _push(). Override to handle scrolling, focus, etc. */
  _onMessagePushed(_item) {}

  /** Returns the chat input textarea element. Subclasses must override. */
  _inputEl() { return null; }

  /** Returns the current value of the chat input. */
  _getInputContent() { return this._inputEl()?.value.trim() ?? ''; }

  /** Clears the chat input and resets its auto-resize height. */
  _clearInput() {
    const el = this._inputEl();
    if (!el) return;
    el.value = '';
    el.style.height = 'auto';
  }

  /** Auto-resizes a textarea to fit its content (capped by CSS max-height). */
  _autoResize(el) {
    el.style.height = 'auto';
    el.style.height = el.scrollHeight + 'px';
  }

  /** Scrolls the message list to the bottom. */
  _scrollToBottom() {}

  // ── Voice recording (shared by every chat surface) ────────────────────────────

  async _checkTranscribe() {
    try {
      const r = await fetch('/api/transcribe/has');
      this._hasTranscribe = r.status === 204;
    } catch {
      this._hasTranscribe = false;
    }
  }

  async _startRecording(fromShortcut = false) {
    if (this._recording) return;
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      this._audioChunks      = [];
      this._shortcutRecording = fromShortcut;

      const mimeType = MediaRecorder.isTypeSupported('audio/webm;codecs=opus')
        ? 'audio/webm;codecs=opus'
        : MediaRecorder.isTypeSupported('audio/webm')
          ? 'audio/webm'
          : '';

      this._mediaRecorder = mimeType
        ? new MediaRecorder(stream, { mimeType })
        : new MediaRecorder(stream);

      this._mediaRecorder.addEventListener('dataavailable', e => {
        if (e.data.size > 0) this._audioChunks.push(e.data);
      });

      this._mediaRecorder.addEventListener('stop', () => {
        stream.getTracks().forEach(t => t.stop());
        this._submitAudio();
      });

      this._mediaRecorder.start();
      this._recording = true;
    } catch (err) {
      console.error('mic error:', err);
    }
  }

  _stopRecording() {
    if (!this._recording || !this._mediaRecorder) return;
    this._mediaRecorder.stop();
    this._recording = false;
  }

  /** Toggle button handler: start or stop a recording (button-initiated). */
  _toggleRecording() {
    if (this._recording) {
      this._shortcutRecording = false;
      this._stopRecording();
    } else {
      this._startRecording(false);
    }
  }

  async _submitAudio() {
    if (this._audioChunks.length === 0) return;

    const mimeType = this._mediaRecorder?.mimeType ?? 'audio/webm';
    const blob = new Blob(this._audioChunks, { type: mimeType });
    // Derive file extension from mimeType, e.g. "audio/webm;codecs=opus" → "webm"
    const ext = mimeType.split('/')[1]?.split(';')[0] ?? 'webm';

    const form = new FormData();
    form.append('audio', blob, `recording.${ext}`);

    try {
      const resp = await fetch('/api/transcribe/audio', { method: 'POST', body: form });
      if (!resp.ok) throw new Error(await resp.text());
      const { text } = await resp.json();
      if (text) {
        const ta = this._inputEl();
        if (ta) {
          ta.value = (ta.value ? ta.value + ' ' : '') + text;
          this._autoResize(ta);
          ta.focus();
        }
      }
    } catch (err) {
      console.error('transcription error:', err);
    }
  }
}