renderer.js

const SUPPORTED_INTERFACE_LANGUAGES = [
  'en', 'pt-BR', 'es', 'fr', 'de', 'it', 'nl', 'el', 'ru', 'zh-CN', 'ja', 'ko', 'ar', 'hi', 'tr',
];

const DEFAULT_DETECTION_LANGUAGES = ['en'];
const DICTIONARY_LANGUAGE_CODES = ['pt', 'en'];

const TRANSLATIONS = {
  en: {
    appTagline: 'Write at the speed of thought.',
    globalShortcut: 'Global shortcut',
    pasteLastShortcut: 'Paste last',
    dictionary: 'Dictionary',
    settings: 'Settings',
    streak: 'Streak',
    daysUsed: 'Days used',
    wordsSpoken: 'Words spoken',
    averageWpm: 'Average WPM',
    latestTranscriptions: 'Latest transcriptions',
    historyCopyLimited: 'Local history for the latest {count} messages.',
    historyCopyUnlimited: 'Local history for all messages.',
    search: 'Search',
    historySearchPlaceholder: 'Search words in transcriptions...',
    noTranscriptions: 'No transcriptions yet.',
    noSearchResults: 'No transcriptions found for this search.',
    settingsCopy: 'Appearance, language, and AI model preferences.',
    interfaceLanguage: 'Interface language',
    interfaceLanguageCopy: 'Search and switch the app language instantly.',
    searchLanguage: 'Search language',
    languageSearchPlaceholder: 'Search your language...',
    noLanguageResults: 'No languages match your search.',
    selectedLanguage: 'Selected',
    appearance: 'Appearance',
    darkMode: 'Dark mode',
    lightMode: 'Light mode',
    floatingBar: 'Floating bar',
    showOverlay: 'Show global overlay',
    showOverlayCopy: 'Display the recording indicator above any app.',
    startWithComputer: 'Start with the computer',
    startWithComputerCopy: 'Launch OpenFlow in the background when you sign in.',
    soundEffects: 'Sound feedback',
    soundEffectsCopy: 'Play sounds on load, start, stop, cancel, and hands-free activation.',
    shortcuts: 'Shortcuts',
    shortcutsCopy: 'Choose the keys you press to dictate and to paste.',
    globalShortcutCopy: 'Hold to dictate. Add Space while holding for hands-free.',
    systemAudioShortcut: 'Computer audio',
    systemAudioShortcutCopy:
      'Hold {shortcut} to transcribe audio playing on this computer. Add Space for hands-free.',
    systemAudioShortcutUnavailable: 'Computer-audio transcription is available on Windows only.',
    pasteLastCopy: 'Paste your most recent transcription into any app.',
    shortcutHint: 'Click a shortcut, then press the key combination you want. Press Esc to cancel.',
    recordingShortcut: 'Press keys…',
    invalidShortcut: "That combination can't be used. Try adding a modifier key.",
    muteMusicTitle: 'Audio',
    muteMusic: 'Duck audio while dictating',
    muteMusicCopy: "Mute other apps' sound while you speak, then restore it afterwards.",
    advancedSettings: 'Advanced settings',
    advancedSettingsCopy: 'Shortcuts, model, history, and floating bar customization.',
    back: 'Back',
    floatingBarCustomization: 'Floating bar appearance',
    floatingBarCustomizationCopy: 'Fine-tune how the floating pill looks on screen.',
    overlayOpacity: 'Pill opacity',
    overlayOpacityCopy: 'Transparency of the pill background. The effects stay fully visible.',
    overlaySize: 'Pill size',
    overlaySizeCopy: 'Overall size of the floating pill (100% is the default).',
    overlayDynamicSize: 'Dynamic size',
    overlayDynamicSizeCopy: 'Shrink the pill to half size until you start speaking, then grow it to full size.',
    transcriptionHistory: 'Transcription history',
    transcriptionHistoryCopy:
      'Control whether the app stores only the latest local messages or every transcription.',
    keepAllTranscriptions: 'Keep all transcriptions',
    keepAllTranscriptionsCopy:
      'Save every local transcription without the {count}-message limit.',
    transcribeCancelledRecordings: 'Transcribe cancelled recordings',
    transcribeCancelledRecordingsCopy:
      'When Esc cancels a recording, transcribe it in the background and save it to history without pasting.',
    autoEnableHandsFreeMode: 'Auto-enable hands-free mode',
    autoEnableHandsFreeModeCopy:
      'Start hands-free dictation as soon as you press the global shortcut.',
    detectionLanguages: 'Detection languages',
    detectionLanguagesCopy: 'Pick the languages OpenFlow should consider while listening.',
    searchDetectionLanguage: 'Search language',
    detectionLanguageSearchPlaceholder: 'Search detection languages...',
    activeDetectionLanguage: 'Active',
    activeDetectionLanguageSingular: 'active language',
    activeDetectionLanguagePlural: 'active languages',
    removeDetectionLanguage: 'Remove',
    addDetectionLanguage: 'Add',
    showMoreLanguages: 'Show more languages',
    showLessLanguages: 'Show fewer languages',
    noDetectionLanguageResults: 'No detection languages match your search.',
    keepOneDetectionLanguage: 'Keep at least one detection language selected.',
    transcriptionModels: 'Transcription models',
    localModels: 'Local models',
    cloudModels: 'Cloud models',
    processInCloud: 'Process in the cloud',
    processInCloudCopy: 'Use OpenRouter speech-to-text models.',
    openRouterApiKey: 'OpenRouter API key',
    openRouterApiKeyPlaceholder: 'sk-or-...',
    saveApiKey: 'Save key',
    changeApiKey: 'Change key',
    clearApiKey: 'Remove',
    apiKeyConfigured: 'API key saved.',
    apiKeyMissing: 'Add an OpenRouter API key.',
    cloudModel: 'Cloud model',
    cloudModelCopy: 'OpenRouter models and prices.',
    refreshModels: 'Refresh',
    loadingCloudModels: 'Loading cloud models...',
    noCloudModels: 'No speech-to-text models found.',
    cloudModelsError: 'Could not load cloud models: {message}',
    savedCloudRecordings: 'Saved failed recordings',
    savedCloudRecordingsCopy: 'Retry without recording again.',
    noSavedCloudRecordings: 'No failed recordings saved.',
    retry: 'Retry',
    cloudPrivacyTitle: 'Cloud privacy notice',
    cloudPrivacyCopy:
      'When cloud transcription is enabled, your audio is sent to OpenRouter and the selected provider. OpenFlow cannot guarantee that third parties delete or retain data in a specific way.',
    cancelCloud: 'Keep local',
    acceptCloud: 'Enable cloud',
    cloudRequiresKey: 'Save your OpenRouter API key before enabling cloud transcription.',
    resetAverage: 'Reset average',
    systemDiagnostics: 'System diagnostics',
    activeModel: 'Active model',
    processing: 'Processing',
    backend: 'Backend',
    close: 'Close',
    noNotes: 'No notes.',
    dictionaryCopy: 'Replace terms automatically in the final text.',
    dictionarySources: 'When you say',
    dictionarySourceInputPlaceholder: 'Type a variation and press Enter',
    dictionarySourceInputMore: 'Add another variation',
    dictionaryTarget: 'Replace with',
    dictionaryTargetPlaceholder: 'Ex.: OpenFlow',
    dictionaryTargetHint: 'Leave empty to remove the words from the text.',
    dictionaryDeleteLabel: '(removed)',
    dictionaryApplyTo: 'Apply to',
    activeLanguages: 'Active languages',
    editingRule: 'Editing rule',
    cancelEditing: 'Cancel editing',
    addRule: 'Add rule',
    saveRule: 'Save rule',
    activeRules: 'Your rules',
    dictionarySearchLabel: 'Search rules',
    dictionarySearchPlaceholder: 'Search rules...',
    dictionaryEmptyTitle: 'No rules yet',
    dictionaryEmptyCopy: 'Fix words the transcription keeps getting wrong — e.g. "open flow" becomes "OpenFlow".',
    noRuleResults: 'No rules found for this search.',
    edit: 'Edit',
    remove: 'Remove',
    fillRuleError: 'Add at least one variation to replace.',
    copy: 'Copy',
    copied: 'Copied',
    deleteEntry: 'Delete',
    exportHistory: 'Export',
    historyExported: 'History exported ({count} messages).',
    historyExportEmpty: 'No transcriptions to export.',
    exportFailed: 'Export failed: {message}',
    confirmReset: 'Click again to confirm',
    startHidden: 'Start minimized to tray',
    startHiddenCopy: 'Keep the main window hidden when OpenFlow starts. Use the tray icon to open it.',
    resetOverlayPosition: 'Reset position',
    resetOverlayPositionCopy: 'Moved the pill somewhere awkward? Bring it back to the default spot.',
    overlayPositionReset: 'Floating bar is back at the default position.',
    exportDictionary: 'Export',
    importDictionary: 'Import',
    dictionaryExported: 'Dictionary exported ({count} rules).',
    dictionaryExportEmpty: 'No rules to export.',
    dictionaryImported: '{count} rule(s) imported.',
    dictionaryImportNone: 'No new rules to import.',
    dictionaryImportInvalid: 'This file is not a valid dictionary export.',
    loadingStatusTitle: 'Loading model',
    loadingStatusDetail: '',
    loadingStatusHint: '',
    switchingStatusTitle: 'Loading model',
    switchingStatusHint: '',
    errorStatusTitle: 'Something needs attention',
    errorStatusHint: 'Check the system diagnostics below if this keeps happening.',
    softwareUpdate: 'Software update',
    softwareUpdateCopy: 'Install the newest OpenFlow build straight from inside the app.',
    checkForUpdates: 'Check for updates',
    downloadUpdate: 'Update',
    openDownloadPage: 'Open download',
    installUpdate: 'Restart & install',
    updateIdle: 'Check whether a newer version is available.',
    updateChecking: 'Checking for updates...',
    updateUpToDate: "You're on the latest version.",
    updateAvailable: 'Version {version} is available.',
    updateDownloading: 'Downloading update... {percent}%',
    updateDownloaded: 'Version {version} is ready. Restart to finish installing.',
    updateManualDownload:
      'Version {version} is available. Open the GitHub download page to install it.',
    updateError: 'Update failed: {message}',
    updateUnsupported: 'Updates are available only in the installed app.',
    updateUpdaterUnavailable:
      'Automatic updates are not configured in this build. Open the download page to install the latest OpenFlow.',
    updateMetadataUnavailable: 'Auto-update metadata was not found for the latest GitHub release.',
    updateMetadataUnavailableForVersion:
      'Version {version} is available, but auto-update metadata was not found for that GitHub release.',
    updateNotPackaged:
      'In-app updates work only from the installed app. OpenFlow is currently running from a development or unpacked build.',
  },
  'pt-BR': {
    appTagline: 'Escreva na velocidade do pensamento.',
    globalShortcut: 'Atalho global',
    pasteLastShortcut: 'Colar ultima',
    dictionary: 'Dicionário',
    settings: 'Configurações',
    streak: 'Sequência',
    daysUsed: 'Dias de uso',
    wordsSpoken: 'Palavras faladas',
    averageWpm: 'Média WPM',
    latestTranscriptions: 'Últimas transcrições',
    historyCopy: 'Histórico local das últimas 100 mensagens.',
    search: 'Pesquisar',
    historySearchPlaceholder: 'Buscar palavras nas transcrições...',
    noTranscriptions: 'Nenhuma transcrição ainda.',
    noSearchResults: 'Nenhuma transcrição encontrada para essa busca.',
    settingsCopy: 'Ajustes de aparência, idioma e modelo de IA.',
    interfaceLanguage: 'Idioma da interface',
    interfaceLanguageCopy: 'Pesquise e troque o idioma do app na hora.',
    searchLanguage: 'Pesquisar idioma',
    languageSearchPlaceholder: 'Pesquise seu idioma...',
    noLanguageResults: 'Nenhum idioma corresponde à busca.',
    selectedLanguage: 'Selecionado',
    appearance: 'Aparência',
    darkMode: 'Modo escuro',
    lightMode: 'Modo claro',
    floatingBar: 'Barra flutuante',
    showOverlay: 'Exibir overlay global',
    showOverlayCopy: 'Mostra o indicador de gravação acima de qualquer app.',
    startWithComputer: 'Iniciar com o computador',
    startWithComputerCopy: 'Abre o OpenFlow em segundo plano ao entrar no sistema.',
    soundEffects: 'Sons de feedback',
    soundEffectsCopy: 'Toca sons ao carregar, iniciar, encerrar, cancelar e ativar hands-free.',
    shortcuts: 'Atalhos',
    shortcutsCopy: 'Escolha as teclas que você pressiona para ditar e para colar.',
    globalShortcutCopy: 'Segure para ditar. Adicione Espaço enquanto segura para o modo hands-free.',
    systemAudioShortcut: 'Áudio do computador',
    systemAudioShortcutCopy:
      'Segure {shortcut} para transcrever o áudio que está saindo do computador. Adicione Espaço para hands-free.',
    systemAudioShortcutUnavailable:
      'A transcrição do áudio do computador está disponível apenas no Windows.',
    pasteLastCopy: 'Cole sua transcrição mais recente em qualquer app.',
    shortcutHint: 'Clique em um atalho e pressione a combinação desejada. Pressione Esc para cancelar.',
    recordingShortcut: 'Pressione as teclas…',
    invalidShortcut: 'Essa combinação não pode ser usada. Tente adicionar uma tecla modificadora.',
    muteMusicTitle: 'Áudio',
    muteMusic: 'Abaixar o áudio ao ditar',
    muteMusicCopy: 'Silencia o som de outros apps enquanto você fala e restaura depois.',
    advancedSettings: 'Configurações avançadas',
    advancedSettingsCopy: 'Atalhos, modelo, histórico e personalização da barra flutuante.',
    back: 'Voltar',
    floatingBarCustomization: 'Aparência da barra flutuante',
    floatingBarCustomizationCopy: 'Ajuste como a barra flutuante aparece na tela.',
    overlayOpacity: 'Opacidade da barra',
    overlayOpacityCopy: 'Transparência do fundo da barra. Os efeitos continuam totalmente visíveis.',
    overlaySize: 'Tamanho da barra',
    overlaySizeCopy: 'Tamanho geral da barra flutuante (100% é o padrão).',
    overlayDynamicSize: 'Tamanho dinâmico',
    overlayDynamicSizeCopy: 'Reduz a barra para a metade do tamanho até você começar a falar e então cresce até o tamanho cheio.',
    detectionLanguages: 'Idiomas de detecção',
    detectionLanguagesCopy: 'Escolha os idiomas que o OpenFlow deve considerar enquanto escuta.',
    searchDetectionLanguage: 'Pesquisar idioma',
    detectionLanguageSearchPlaceholder: 'Pesquise os idiomas de detecção...',
    activeDetectionLanguage: 'Ativo',
    activeDetectionLanguageSingular: 'idioma ativo',
    activeDetectionLanguagePlural: 'idiomas ativos',
    removeDetectionLanguage: 'Remover',
    addDetectionLanguage: 'Adicionar',
    showMoreLanguages: 'Mostrar mais idiomas',
    showLessLanguages: 'Mostrar menos idiomas',
    noDetectionLanguageResults: 'Nenhum idioma de detecção corresponde à busca.',
    keepOneDetectionLanguage: 'Mantenha pelo menos um idioma de detecção ativo.',
    transcriptionModels: 'Modelos de transcrição',
    localModels: 'Modelos locais',
    cloudModels: 'Modelos da nuvem',
    processInCloud: 'Processar na nuvem',
    processInCloudCopy: 'Use modelos speech-to-text da OpenRouter.',
    openRouterApiKey: 'Chave da OpenRouter',
    openRouterApiKeyPlaceholder: 'sk-or-...',
    saveApiKey: 'Salvar chave',
    changeApiKey: 'Trocar chave',
    clearApiKey: 'Remover',
    apiKeyConfigured: 'Chave salva.',
    apiKeyMissing: 'Adicione uma chave da OpenRouter.',
    cloudModel: 'Modelo na nuvem',
    cloudModelCopy: 'Modelos e precos da OpenRouter.',
    refreshModels: 'Atualizar',
    loadingCloudModels: 'Carregando modelos da nuvem...',
    noCloudModels: 'Nenhum modelo speech-to-text encontrado.',
    cloudModelsError: 'Nao foi possivel carregar modelos da nuvem: {message}',
    savedCloudRecordings: 'Gravacoes com falha salvas',
    savedCloudRecordingsCopy: 'Tente reenviar sem gravar de novo.',
    noSavedCloudRecordings: 'Nenhuma gravacao com falha salva.',
    retry: 'Tentar de novo',
    cloudPrivacyTitle: 'Aviso de privacidade da nuvem',
    cloudPrivacyCopy:
      'Ao ativar a transcricao na nuvem, seu audio e enviado para a OpenRouter e para o provedor selecionado. O OpenFlow nao consegue garantir que terceiros apaguem ou retenham dados de uma forma especifica.',
    cancelCloud: 'Manter local',
    acceptCloud: 'Ativar nuvem',
    cloudRequiresKey: 'Salve sua chave da OpenRouter antes de ativar a transcricao na nuvem.',
    resetAverage: 'Resetar média',
    systemDiagnostics: 'Diagnóstico do sistema',
    activeModel: 'Modelo ativo',
    processing: 'Processamento',
    backend: 'Backend',
    close: 'Fechar',
    noNotes: 'Sem observações.',
    dictionaryCopy: 'Troque termos automaticamente no texto final.',
    dictionarySources: 'Quando você disser',
    dictionarySourceInputPlaceholder: 'Digite uma variação e aperte Enter',
    dictionarySourceInputMore: 'Adicionar outra variação',
    dictionaryTarget: 'Substituir por',
    dictionaryTargetPlaceholder: 'Ex.: OpenFlow',
    dictionaryTargetHint: 'Deixe vazio para remover as palavras do texto.',
    dictionaryDeleteLabel: '(removido)',
    dictionaryApplyTo: 'Aplicar em',
    activeLanguages: 'Idiomas ativos',
    editingRule: 'Editando regra',
    cancelEditing: 'Cancelar edição',
    addRule: 'Adicionar regra',
    saveRule: 'Salvar regra',
    activeRules: 'Suas regras',
    dictionarySearchLabel: 'Buscar regras',
    dictionarySearchPlaceholder: 'Buscar regras...',
    dictionaryEmptyTitle: 'Nenhuma regra ainda',
    dictionaryEmptyCopy: 'Corrija palavras que a transcrição erra — ex.: "open flow" vira "OpenFlow".',
    noRuleResults: 'Nenhuma regra encontrada para essa busca.',
    edit: 'Editar',
    remove: 'Remover',
    fillRuleError: 'Adicione pelo menos uma variação para substituir.',
    copy: 'Copiar',
    copied: 'Copiado',
    deleteEntry: 'Excluir',
    exportHistory: 'Exportar',
    historyExported: 'Histórico exportado ({count} mensagens).',
    historyExportEmpty: 'Nenhuma transcrição para exportar.',
    exportFailed: 'Falha ao exportar: {message}',
    confirmReset: 'Clique de novo para confirmar',
    startHidden: 'Iniciar minimizado na bandeja',
    startHiddenCopy: 'Mantém a janela principal oculta quando o OpenFlow abre. Use o ícone da bandeja para abrir.',
    resetOverlayPosition: 'Restaurar posição',
    resetOverlayPositionCopy: 'Moveu a barra para um lugar ruim? Traga ela de volta para o lugar padrão.',
    overlayPositionReset: 'Barra flutuante de volta à posição padrão.',
    exportDictionary: 'Exportar',
    importDictionary: 'Importar',
    dictionaryExported: 'Dicionário exportado ({count} regras).',
    dictionaryExportEmpty: 'Nenhuma regra para exportar.',
    dictionaryImported: '{count} regra(s) importada(s).',
    dictionaryImportNone: 'Nenhuma regra nova para importar.',
    dictionaryImportInvalid: 'Este arquivo não é um dicionário exportado válido.',
    loadingStatusTitle: 'Carregando o modelo',
    loadingStatusDetail: '',
    loadingStatusHint: '',
    switchingStatusTitle: 'Carregando o modelo',
    switchingStatusHint: '',
    errorStatusTitle: 'Algo precisa de atencao',
    errorStatusHint: 'Se isso continuar, verifique o diagnostico do sistema logo abaixo.',
    softwareUpdate: 'Atualização do app',
    softwareUpdateCopy: 'Instale a versão mais recente do OpenFlow direto pelo app.',
    checkForUpdates: 'Procurar atualizações',
    downloadUpdate: 'Atualizar',
    openDownloadPage: 'Abrir download',
    installUpdate: 'Reiniciar e instalar',
    updateIdle: 'Verifique se há uma versão mais nova disponível.',
    updateChecking: 'Procurando atualizações...',
    updateUpToDate: 'Você está na versão mais recente.',
    updateAvailable: 'A versão {version} está disponível.',
    updateDownloading: 'Baixando atualização... {percent}%',
    updateDownloaded: 'Versão {version} pronta. Reinicie para concluir a instalação.',
    updateManualDownload:
      'A versao {version} esta disponivel. Abra a pagina de download do GitHub para instalar.',
    updateError: 'Falha na atualização: {message}',
    updateUnsupported: 'As atualizações só estão disponíveis no app instalado.',
    updateUpdaterUnavailable:
      'As atualizacoes automaticas nao estao configuradas nesta build. Abra a pagina de download para instalar o OpenFlow mais recente.',
    updateMetadataUnavailable:
      'Os metadados de atualização não foram encontrados no release mais recente do GitHub.',
    updateMetadataUnavailableForVersion:
      'A versão {version} está disponível, mas os metadados de atualização não foram encontrados no release do GitHub.',
    updateNotPackaged:
      'As atualizacoes pelo app funcionam somente no app instalado. O OpenFlow esta rodando por uma build de desenvolvimento ou descompactada.',
  },
};

Object.assign(TRANSLATIONS, {
  es: { settings: 'Configuración', interfaceLanguage: 'Idioma de la interfaz', interfaceLanguageCopy: 'Busca y cambia el idioma de la app al instante.', searchLanguage: 'Buscar idioma', languageSearchPlaceholder: 'Busca tu idioma...', selectedLanguage: 'Seleccionado', appearance: 'Apariencia', darkMode: 'Modo oscuro', lightMode: 'Modo claro', floatingBar: 'Barra flotante', detectionLanguages: 'Idiomas de detección', transcriptionModels: 'Modelos de transcripción', systemDiagnostics: 'Diagnóstico del sistema', close: 'Cerrar', dictionary: 'Diccionario' },
  fr: { settings: 'Paramètres', interfaceLanguage: "Langue de l'interface", interfaceLanguageCopy: "Recherchez et changez instantanément la langue de l'application.", searchLanguage: 'Rechercher une langue', languageSearchPlaceholder: 'Recherchez votre langue...', selectedLanguage: 'Sélectionné', appearance: 'Apparence', darkMode: 'Mode sombre', lightMode: 'Mode clair', floatingBar: 'Barre flottante', detectionLanguages: 'Langues de détection', transcriptionModels: 'Modèles de transcription', systemDiagnostics: 'Diagnostic système', close: 'Fermer', dictionary: 'Dictionnaire' },
  de: { settings: 'Einstellungen', interfaceLanguage: 'Sprache der Oberfläche', interfaceLanguageCopy: 'Suche und wechsle die App-Sprache sofort.', searchLanguage: 'Sprache suchen', languageSearchPlaceholder: 'Sprache suchen...', selectedLanguage: 'Ausgewählt', appearance: 'Darstellung', darkMode: 'Dunkelmodus', lightMode: 'Hellmodus', floatingBar: 'Schwebende Leiste', detectionLanguages: 'Erkennungssprachen', transcriptionModels: 'Transkriptionsmodelle', systemDiagnostics: 'Systemdiagnose', close: 'Schließen', dictionary: 'Wörterbuch' },
  it: { settings: 'Impostazioni', interfaceLanguage: "Lingua dell'interfaccia", interfaceLanguageCopy: "Cerca e cambia subito la lingua dell'app.", searchLanguage: 'Cerca lingua', languageSearchPlaceholder: 'Cerca la tua lingua...', selectedLanguage: 'Selezionato', appearance: 'Aspetto', darkMode: 'Modalità scura', lightMode: 'Modalità chiara', floatingBar: 'Barra flottante', detectionLanguages: 'Lingue di rilevamento', transcriptionModels: 'Modelli di trascrizione', systemDiagnostics: 'Diagnostica di sistema', close: 'Chiudi', dictionary: 'Dizionario' },
  nl: { settings: 'Instellingen', interfaceLanguage: 'Interfacetaal', interfaceLanguageCopy: 'Zoek en wissel direct van app-taal.', searchLanguage: 'Taal zoeken', languageSearchPlaceholder: 'Zoek je taal...', selectedLanguage: 'Geselecteerd', appearance: 'Weergave', darkMode: 'Donkere modus', lightMode: 'Lichte modus', floatingBar: 'Zwevende balk', detectionLanguages: 'Detectietalen', transcriptionModels: 'Transcriptiemodellen', systemDiagnostics: 'Systeemdiagnostiek', close: 'Sluiten', dictionary: 'Woordenboek' },
  el: { settings: 'Ρυθμίσεις', interfaceLanguage: 'Γλώσσα διεπαφής', interfaceLanguageCopy: 'Αναζητήστε και αλλάξτε άμεσα τη γλώσσα της εφαρμογής.', searchLanguage: 'Αναζήτηση γλώσσας', languageSearchPlaceholder: 'Αναζητήστε τη γλώσσα σας...', selectedLanguage: 'Επιλεγμένο', appearance: 'Εμφάνιση', darkMode: 'Σκούρο θέμα', lightMode: 'Ανοιχτό θέμα', floatingBar: 'Πλωτή μπάρα', detectionLanguages: 'Γλώσσες ανίχνευσης', transcriptionModels: 'Μοντέλα απομαγνητοφώνησης', systemDiagnostics: 'Διαγνωστικά συστήματος', close: 'Κλείσιμο', dictionary: 'Λεξικό' },
  ru: { settings: 'Настройки', interfaceLanguage: 'Язык интерфейса', interfaceLanguageCopy: 'Ищите и мгновенно переключайте язык приложения.', searchLanguage: 'Поиск языка', languageSearchPlaceholder: 'Найдите свой язык...', selectedLanguage: 'Выбран', appearance: 'Внешний вид', darkMode: 'Тёмная тема', lightMode: 'Светлая тема', floatingBar: 'Плавающая панель', detectionLanguages: 'Языки распознавания', transcriptionModels: 'Модели транскрипции', systemDiagnostics: 'Диагностика системы', close: 'Закрыть', dictionary: 'Словарь' },
  'zh-CN': { settings: '设置', interfaceLanguage: '界面语言', interfaceLanguageCopy: '搜索并立即切换应用语言。', searchLanguage: '搜索语言', languageSearchPlaceholder: '搜索你的语言...', selectedLanguage: '已选择', appearance: '外观', darkMode: '深色模式', lightMode: '浅色模式', floatingBar: '悬浮条', detectionLanguages: '检测语言', transcriptionModels: '转录模型', systemDiagnostics: '系统诊断', close: '关闭', dictionary: '词典' },
  ja: { settings: '設定', interfaceLanguage: 'インターフェース言語', interfaceLanguageCopy: '言語を検索してすぐに切り替えられます。', searchLanguage: '言語を検索', languageSearchPlaceholder: '言語を検索...', selectedLanguage: '選択中', appearance: '表示', darkMode: 'ダークモード', lightMode: 'ライトモード', floatingBar: 'フローティングバー', detectionLanguages: '検出言語', transcriptionModels: '文字起こしモデル', systemDiagnostics: 'システム診断', close: '閉じる', dictionary: '辞書' },
  ko: { settings: '설정', interfaceLanguage: '인터페이스 언어', interfaceLanguageCopy: '언어를 검색하고 즉시 앱 언어를 바꿀 수 있습니다.', searchLanguage: '언어 검색', languageSearchPlaceholder: '언어 검색...', selectedLanguage: '선택됨', appearance: '화면', darkMode: '다크 모드', lightMode: '라이트 모드', floatingBar: '플로팅 바', detectionLanguages: '감지 언어', transcriptionModels: '전사 모델', systemDiagnostics: '시스템 진단', close: '닫기', dictionary: '사전' },
  ar: { settings: 'الإعدادات', interfaceLanguage: 'لغة الواجهة', interfaceLanguageCopy: 'ابحث عن لغة التطبيق وبدلها فورًا.', searchLanguage: 'ابحث عن لغة', languageSearchPlaceholder: 'ابحث عن لغتك...', selectedLanguage: 'محدد', appearance: 'المظهر', darkMode: 'الوضع الداكن', lightMode: 'الوضع الفاتح', floatingBar: 'الشريط العائم', detectionLanguages: 'لغات الاكتشاف', transcriptionModels: 'نماذج النسخ', systemDiagnostics: 'تشخيص النظام', close: 'إغلاق', dictionary: 'القاموس' },
  hi: { settings: 'सेटिंग्स', interfaceLanguage: 'इंटरफ़ेस भाषा', interfaceLanguageCopy: 'अपनी भाषा खोजें और तुरंत ऐप की भाषा बदलें।', searchLanguage: 'भाषा खोजें', languageSearchPlaceholder: 'अपनी भाषा खोजें...', selectedLanguage: 'चयनित', appearance: 'रूप', darkMode: 'डार्क मोड', lightMode: 'लाइट मोड', floatingBar: 'फ़्लोटिंग बार', detectionLanguages: 'पता लगाने की भाषाएँ', transcriptionModels: 'ट्रांसक्रिप्शन मॉडल', systemDiagnostics: 'सिस्टम डायग्नोस्टिक्स', close: 'बंद करें', dictionary: 'शब्दकोश' },
  tr: { settings: 'Ayarlar', interfaceLanguage: 'Arayüz dili', interfaceLanguageCopy: 'Dil arayın ve uygulama dilini anında değiştirin.', searchLanguage: 'Dil ara', languageSearchPlaceholder: 'Dilini ara...', selectedLanguage: 'Seçili', appearance: 'Görünüm', darkMode: 'Koyu mod', lightMode: 'Açık mod', floatingBar: 'Yüzen çubuk', detectionLanguages: 'Algılama dilleri', transcriptionModels: 'Döküm modelleri', systemDiagnostics: 'Sistem tanıları', close: 'Kapat', dictionary: 'Sözlük' },
});

Object.assign(TRANSLATIONS['pt-BR'], {
  historyCopyLimited: 'Historico local das ultimas {count} mensagens.',
  historyCopyUnlimited: 'Historico local de todas as mensagens.',
  transcriptionHistory: 'Historico de transcricoes',
  transcriptionHistoryCopy:
    'Controle se o app guarda apenas as ultimas mensagens locais ou todas as transcricoes.',
  keepAllTranscriptions: 'Guardar todas as transcricoes',
  keepAllTranscriptionsCopy:
    'Salva cada transcricao local sem o limite de {count} mensagens.',
  transcribeCancelledRecordings: 'Transcrever gravacoes canceladas',
  transcribeCancelledRecordingsCopy:
    'Ao cancelar com Esc, transcreve em segundo plano e salva no historico sem colar.',
  autoEnableHandsFreeMode: 'Ativar hands-free automaticamente',
  autoEnableHandsFreeModeCopy:
    'Inicia o ditado em hands-free assim que voce pressiona o atalho global.',
  systemAudioShortcut: 'Audio do computador',
  systemAudioShortcutCopy:
    'Segure {shortcut} para transcrever o audio que esta saindo do computador. Adicione Espaco para hands-free.',
  systemAudioShortcutUnavailable:
    'A transcricao do audio do computador esta disponivel apenas no Windows.',
});

const DETECTION_LANGUAGE_TRANSLATIONS = {
  es: {
    detectionLanguagesCopy: 'Elige los idiomas que OpenFlow debe considerar mientras escucha.',
    searchDetectionLanguage: 'Buscar idioma',
    detectionLanguageSearchPlaceholder: 'Buscar idiomas de deteccion...',
    activeDetectionLanguage: 'Activo',
    activeDetectionLanguageSingular: 'idioma activo',
    activeDetectionLanguagePlural: 'idiomas activos',
    removeDetectionLanguage: 'Quitar',
    addDetectionLanguage: 'Agregar',
    showMoreLanguages: 'Mostrar mas idiomas',
    showLessLanguages: 'Mostrar menos idiomas',
    noDetectionLanguageResults: 'Ningun idioma coincide con la busqueda.',
    keepOneDetectionLanguage: 'Mantén al menos un idioma de deteccion seleccionado.',
  },
  fr: {
    detectionLanguagesCopy: 'Choisissez les langues qu OpenFlow doit prendre en compte pendant l ecoute.',
    searchDetectionLanguage: 'Rechercher une langue',
    detectionLanguageSearchPlaceholder: 'Rechercher des langues de detection...',
    activeDetectionLanguage: 'Actif',
    activeDetectionLanguageSingular: 'langue active',
    activeDetectionLanguagePlural: 'langues actives',
    removeDetectionLanguage: 'Retirer',
    addDetectionLanguage: 'Ajouter',
    showMoreLanguages: 'Afficher plus de langues',
    showLessLanguages: 'Afficher moins de langues',
    noDetectionLanguageResults: 'Aucune langue ne correspond a cette recherche.',
    keepOneDetectionLanguage: 'Conservez au moins une langue de detection selectionnee.',
  },
  de: {
    detectionLanguagesCopy: 'Wahle die Sprachen, die OpenFlow beim Zuhoren berucksichtigen soll.',
    searchDetectionLanguage: 'Sprache suchen',
    detectionLanguageSearchPlaceholder: 'Erkennungssprachen suchen...',
    activeDetectionLanguage: 'Aktiv',
    activeDetectionLanguageSingular: 'aktive Sprache',
    activeDetectionLanguagePlural: 'aktive Sprachen',
    removeDetectionLanguage: 'Entfernen',
    addDetectionLanguage: 'Hinzufugen',
    showMoreLanguages: 'Mehr Sprachen anzeigen',
    showLessLanguages: 'Weniger Sprachen anzeigen',
    noDetectionLanguageResults: 'Keine Sprache passt zu dieser Suche.',
    keepOneDetectionLanguage: 'Mindestens eine Erkennungssprache muss ausgewahlt bleiben.',
  },
  it: {
    detectionLanguagesCopy: 'Scegli le lingue che OpenFlow deve considerare durante l ascolto.',
    searchDetectionLanguage: 'Cerca lingua',
    detectionLanguageSearchPlaceholder: 'Cerca lingue di rilevamento...',
    activeDetectionLanguage: 'Attiva',
    activeDetectionLanguageSingular: 'lingua attiva',
    activeDetectionLanguagePlural: 'lingue attive',
    removeDetectionLanguage: 'Rimuovi',
    addDetectionLanguage: 'Aggiungi',
    showMoreLanguages: 'Mostra altre lingue',
    showLessLanguages: 'Mostra meno lingue',
    noDetectionLanguageResults: 'Nessuna lingua corrisponde alla ricerca.',
    keepOneDetectionLanguage: 'Mantieni almeno una lingua di rilevamento selezionata.',
  },
  nl: {
    detectionLanguagesCopy: 'Kies de talen die OpenFlow moet meenemen tijdens het luisteren.',
    searchDetectionLanguage: 'Taal zoeken',
    detectionLanguageSearchPlaceholder: 'Detectietalen zoeken...',
    activeDetectionLanguage: 'Actief',
    activeDetectionLanguageSingular: 'actieve taal',
    activeDetectionLanguagePlural: 'actieve talen',
    removeDetectionLanguage: 'Verwijderen',
    addDetectionLanguage: 'Toevoegen',
    showMoreLanguages: 'Meer talen tonen',
    showLessLanguages: 'Minder talen tonen',
    noDetectionLanguageResults: 'Geen taal gevonden voor deze zoekopdracht.',
    keepOneDetectionLanguage: 'Houd minstens een detectietaal geselecteerd.',
  },
  el: {
    detectionLanguagesCopy: 'Επιλέξτε τις γλώσσες που θα λαμβάνει υπόψη το OpenFlow κατά την ακρόαση.',
    searchDetectionLanguage: 'Αναζήτηση γλώσσας',
    detectionLanguageSearchPlaceholder: 'Αναζήτηση γλωσσών ανίχνευσης...',
    activeDetectionLanguage: 'Ενεργή',
    activeDetectionLanguageSingular: 'ενεργή γλώσσα',
    activeDetectionLanguagePlural: 'ενεργές γλώσσες',
    removeDetectionLanguage: 'Αφαίρεση',
    addDetectionLanguage: 'Προσθήκη',
    showMoreLanguages: 'Εμφάνιση περισσότερων γλωσσών',
    showLessLanguages: 'Εμφάνιση λιγότερων γλωσσών',
    noDetectionLanguageResults: 'Καμία γλώσσα δεν ταιριάζει με την αναζήτηση.',
    keepOneDetectionLanguage: 'Κρατήστε επιλεγμένη τουλάχιστον μία γλώσσα ανίχνευσης.',
  },
  ru: {
    detectionLanguagesCopy: 'Выберите языки, которые OpenFlow должен учитывать во время прослушивания.',
    searchDetectionLanguage: 'Поиск языка',
    detectionLanguageSearchPlaceholder: 'Поиск языков распознавания...',
    activeDetectionLanguage: 'Активно',
    activeDetectionLanguageSingular: 'активный язык',
    activeDetectionLanguagePlural: 'активные языки',
    removeDetectionLanguage: 'Удалить',
    addDetectionLanguage: 'Добавить',
    showMoreLanguages: 'Показать больше языков',
    showLessLanguages: 'Показать меньше языков',
    noDetectionLanguageResults: 'Нет языков, подходящих под поиск.',
    keepOneDetectionLanguage: 'Оставьте выбранным хотя бы один язык распознавания.',
  },
  'zh-CN': {
    detectionLanguagesCopy: '选择 OpenFlow 在聆听时应考虑的语言。',
    searchDetectionLanguage: '搜索语言',
    detectionLanguageSearchPlaceholder: '搜索检测语言...',
    activeDetectionLanguage: '已启用',
    activeDetectionLanguageSingular: '启用的语言',
    activeDetectionLanguagePlural: '启用的语言',
    removeDetectionLanguage: '移除',
    addDetectionLanguage: '添加',
    showMoreLanguages: '显示更多语言',
    showLessLanguages: '显示更少语言',
    noDetectionLanguageResults: '没有匹配的检测语言。',
    keepOneDetectionLanguage: '请至少保留一种检测语言。',
  },
  ja: {
    detectionLanguagesCopy: 'OpenFlow が聞き取り時に考慮する言語を選びます。',
    searchDetectionLanguage: '言語を検索',
    detectionLanguageSearchPlaceholder: '検出言語を検索...',
    activeDetectionLanguage: '有効',
    activeDetectionLanguageSingular: '有効な言語',
    activeDetectionLanguagePlural: '有効な言語',
    removeDetectionLanguage: '削除',
    addDetectionLanguage: '追加',
    showMoreLanguages: '他の言語を表示',
    showLessLanguages: '表示を減らす',
    noDetectionLanguageResults: '検索に一致する検出言語がありません。',
    keepOneDetectionLanguage: '少なくとも 1 つの検出言語を選択してください。',
  },
  ko: {
    detectionLanguagesCopy: 'OpenFlow가 듣는 동안 고려할 언어를 선택하세요.',
    searchDetectionLanguage: '언어 검색',
    detectionLanguageSearchPlaceholder: '감지 언어 검색...',
    activeDetectionLanguage: '활성',
    activeDetectionLanguageSingular: '활성 언어',
    activeDetectionLanguagePlural: '활성 언어',
    removeDetectionLanguage: '제거',
    addDetectionLanguage: '추가',
    showMoreLanguages: '더 많은 언어 보기',
    showLessLanguages: '언어 적게 보기',
    noDetectionLanguageResults: '검색과 일치하는 감지 언어가 없습니다.',
    keepOneDetectionLanguage: '감지 언어를 하나 이상 선택하세요.',
  },
  ar: {
    detectionLanguagesCopy: 'اختر اللغات التي يجب أن يراعيها OpenFlow أثناء الاستماع.',
    searchDetectionLanguage: 'ابحث عن لغة',
    detectionLanguageSearchPlaceholder: 'ابحث في لغات الاكتشاف...',
    activeDetectionLanguage: 'نشطة',
    activeDetectionLanguageSingular: 'لغة نشطة',
    activeDetectionLanguagePlural: 'لغات نشطة',
    removeDetectionLanguage: 'إزالة',
    addDetectionLanguage: 'إضافة',
    showMoreLanguages: 'إظهار المزيد من اللغات',
    showLessLanguages: 'إظهار لغات أقل',
    noDetectionLanguageResults: 'لا توجد لغات مطابقة للبحث.',
    keepOneDetectionLanguage: 'أبق لغة اكتشاف واحدة على الأقل محددة.',
  },
  hi: {
    detectionLanguagesCopy: 'सुनते समय OpenFlow जिन भाषाओं पर विचार करे उन्हें चुनें।',
    searchDetectionLanguage: 'भाषा खोजें',
    detectionLanguageSearchPlaceholder: 'पता लगाने की भाषाएँ खोजें...',
    activeDetectionLanguage: 'सक्रिय',
    activeDetectionLanguageSingular: 'सक्रिय भाषा',
    activeDetectionLanguagePlural: 'सक्रिय भाषाएँ',
    removeDetectionLanguage: 'हटाएँ',
    addDetectionLanguage: 'जोड़ें',
    showMoreLanguages: 'और भाषाएँ दिखाएँ',
    showLessLanguages: 'कम भाषाएँ दिखाएँ',
    noDetectionLanguageResults: 'इस खोज से कोई भाषा नहीं मिली।',
    keepOneDetectionLanguage: 'कम से कम एक पता लगाने की भाषा चयनित रखें।',
  },
  tr: {
    detectionLanguagesCopy: 'OpenFlow un dinlerken dikkate alacağı dilleri seçin.',
    searchDetectionLanguage: 'Dil ara',
    detectionLanguageSearchPlaceholder: 'Algılama dillerini ara...',
    activeDetectionLanguage: 'Aktif',
    activeDetectionLanguageSingular: 'aktif dil',
    activeDetectionLanguagePlural: 'aktif diller',
    removeDetectionLanguage: 'Kaldır',
    addDetectionLanguage: 'Ekle',
    showMoreLanguages: 'Daha fazla dil göster',
    showLessLanguages: 'Daha az dil göster',
    noDetectionLanguageResults: 'Bu aramaya uygun algılama dili yok.',
    keepOneDetectionLanguage: 'En az bir algılama dili seçili kalmalı.',
  },
};

for (const code of SUPPORTED_INTERFACE_LANGUAGES) {
  if (code === 'en' || code === 'pt-BR') {
    continue;
  }

  Object.assign(TRANSLATIONS[code] || (TRANSLATIONS[code] = {}), {
    historyCopyLimited: 'Local history for the latest {count} messages.',
    historyCopyUnlimited: 'Local history for all messages.',
    transcriptionHistory: 'Transcription history',
    transcriptionHistoryCopy:
      'Control whether the app stores only the latest local messages or every transcription.',
    keepAllTranscriptions: 'Keep all transcriptions',
    keepAllTranscriptionsCopy:
      'Save every local transcription without the {count}-message limit.',
    transcribeCancelledRecordings: 'Transcribe cancelled recordings',
    transcribeCancelledRecordingsCopy:
      'When Esc cancels a recording, transcribe it in the background and save it to history without pasting.',
    autoEnableHandsFreeMode: 'Auto-enable hands-free mode',
    autoEnableHandsFreeModeCopy:
      'Start hands-free dictation as soon as you press the global shortcut.',
    systemAudioShortcut: 'Computer audio',
    systemAudioShortcutCopy:
      'Hold {shortcut} to transcribe audio playing on this computer. Add Space for hands-free.',
    systemAudioShortcutUnavailable: 'Computer-audio transcription is available on Windows only.',
    ...(DETECTION_LANGUAGE_TRANSLATIONS[code] || {}),
  });
}

const MODEL_LABELS = {
  tiny: { en: 'Lite', 'pt-BR': 'Lite' },
  base: { en: 'Fast', 'pt-BR': 'Rápido' },
  small: { en: 'Balanced', 'pt-BR': 'Equilibrado' },
  medium: { en: 'Precise', 'pt-BR': 'Preciso' },
  'large-v3': { en: 'Maximum', 'pt-BR': 'Máximo' },
};

const MODEL_DESCRIPTIONS = {
  tiny: { en: 'Minimum latency for quick tests.', 'pt-BR': 'Latência mínima para testes rápidos.' },
  base: { en: 'Better than tiny while staying very fast.', 'pt-BR': 'Melhor que tiny, ainda bem ágil.' },
  small: { en: 'A solid middle ground for daily use.', 'pt-BR': 'Bom meio-termo para uso diário.' },
  medium: { en: 'More quality with moderate latency.', 'pt-BR': 'Mais qualidade com latência moderada.' },
  'large-v3': { en: 'Highest accuracy with a heavier local cost.', 'pt-BR': 'Maior precisão com custo local mais alto.' },
};

const els = {
  historyList: document.getElementById('history-list'),
  historyCount: document.getElementById('history-count'),
  historySearch: document.getElementById('history-search'),
  historySearchClear: document.getElementById('history-search-clear'),
  exportHistory: document.getElementById('export-history'),
  historyCopy: document.getElementById('history-copy'),
  shortcutLabel: document.getElementById('shortcut-label'),
  pasteShortcutLabel: document.getElementById('paste-shortcut-label'),
  systemAudioShortcutLabel: document.getElementById('system-audio-shortcut-label'),
  systemAudioShortcutMeta: document.getElementById('system-audio-shortcut-meta'),
  systemAudioShortcutCopy: document.getElementById('system-audio-shortcut-copy'),
  systemAudioShortcutKeys: document.getElementById('system-audio-shortcut-keys'),
  noticeStrip: document.getElementById('notice-strip'),
  statusPanel: document.getElementById('status-panel'),
  statusPanelTitle: document.getElementById('status-panel-title'),
  statusPanelProgress: document.getElementById('status-panel-progress'),
  detectionLanguageDefaults: document.getElementById('detection-language-defaults'),
  detectionLanguageSummary: document.getElementById('detection-language-summary'),
  toggleDetectionLanguages: document.getElementById('toggle-detection-languages'),
  detectionLanguageMore: document.getElementById('detection-language-more'),
  detectionLanguageSearch: document.getElementById('detection-language-search'),
  detectionLanguageList: document.getElementById('detection-language-list'),
  cloudTranscriptionEnabled: document.getElementById('cloud-transcription-enabled'),
  cloudSettings: document.getElementById('cloud-settings'),
  openRouterKeyForm: document.getElementById('openrouter-key-form'),
  openRouterApiKey: document.getElementById('openrouter-api-key'),
  openRouterKeySaved: document.getElementById('openrouter-key-saved'),
  openRouterKeyStatus: document.getElementById('openrouter-key-status'),
  changeOpenRouterKey: document.getElementById('change-openrouter-key'),
  cancelOpenRouterKeyChange: document.getElementById('cancel-openrouter-key-change'),
  clearOpenRouterKey: document.getElementById('clear-openrouter-key'),
  refreshOpenRouterModels: document.getElementById('refresh-openrouter-models'),
  cloudModelList: document.getElementById('cloud-model-list'),
  cloudRetrySection: document.getElementById('cloud-retry-section'),
  cloudRetryList: document.getElementById('cloud-retry-list'),
  cloudPrivacyDialog: document.getElementById('cloud-privacy-dialog'),
  cloudPrivacyBackdrop: document.getElementById('cloud-privacy-backdrop'),
  cancelCloudPrivacy: document.getElementById('cancel-cloud-privacy'),
  acceptCloudPrivacy: document.getElementById('accept-cloud-privacy'),
  modelList: document.getElementById('model-list'),
  resetStats: document.getElementById('reset-stats'),
  activeModelLabel: document.getElementById('active-model-label'),
  deviceLabel: document.getElementById('device-label'),
  deviceNote: document.getElementById('device-note'),
  streakValue: document.getElementById('streak-value'),
  daysUsedValue: document.getElementById('days-used-value'),
  wordsTotalValue: document.getElementById('words-total-value'),
  wpmValue: document.getElementById('wpm-value'),
  openDictionary: document.getElementById('open-dictionary'),
  closeDictionary: document.getElementById('close-dictionary'),
  dictionaryWindow: document.getElementById('dictionary-window'),
  dictionaryBackdrop: document.getElementById('dictionary-backdrop'),
  dictionaryForm: document.getElementById('dictionary-form'),
  dictionarySourceBox: document.getElementById('dictionary-source-box'),
  dictionarySourceInput: document.getElementById('dictionary-source-input'),
  dictionaryEditingBanner: document.getElementById('dictionary-editing-banner'),
  dictionaryTarget: document.getElementById('dictionary-target'),
  dictionaryLangPt: document.getElementById('dictionary-lang-pt'),
  dictionaryLangEn: document.getElementById('dictionary-lang-en'),
  dictionaryLangPtLabel: document.getElementById('dictionary-lang-pt-label'),
  dictionaryLangEnLabel: document.getElementById('dictionary-lang-en-label'),
  dictionaryList: document.getElementById('dictionary-list'),
  dictionaryCount: document.getElementById('dictionary-count'),
  dictionarySearch: document.getElementById('dictionary-search'),
  exportDictionary: document.getElementById('export-dictionary'),
  importDictionary: document.getElementById('import-dictionary'),
  cancelDictionaryEdit: document.getElementById('cancel-dictionary-edit'),
  submitDictionaryRule: document.getElementById('submit-dictionary-rule'),
  openSettings: document.getElementById('open-settings'),
  closeSettings: document.getElementById('close-settings'),
  settingsDrawer: document.getElementById('settings-drawer'),
  settingsBackdrop: document.getElementById('settings-backdrop'),
  openAdvanced: document.getElementById('open-advanced'),
  closeAdvanced: document.getElementById('close-advanced'),
  advancedDrawer: document.getElementById('advanced-drawer'),
  advancedBackdrop: document.getElementById('advanced-backdrop'),
  captureShortcut: document.getElementById('capture-shortcut'),
  capturePasteShortcut: document.getElementById('capture-paste-shortcut'),
  shortcutCaptureKeys: document.getElementById('shortcut-capture-keys'),
  pasteShortcutCaptureKeys: document.getElementById('paste-shortcut-capture-keys'),
  duckAudio: document.getElementById('duck-audio'),
  startHidden: document.getElementById('start-hidden'),
  resetOverlayPosition: document.getElementById('reset-overlay-position'),
  overlayOpacity: document.getElementById('overlay-opacity'),
  overlayOpacityValue: document.getElementById('overlay-opacity-value'),
  overlayScale: document.getElementById('overlay-scale'),
  overlayScaleValue: document.getElementById('overlay-scale-value'),
  overlayDynamicSize: document.getElementById('overlay-dynamic-size'),
  showOverlayBar: document.getElementById('show-overlay-bar'),
  launchAtLogin: document.getElementById('launch-at-login'),
  soundEffectsEnabled: document.getElementById('sound-effects-enabled'),
  keepAllTranscriptions: document.getElementById('keep-all-transcriptions'),
  transcribeCancelledRecordings: document.getElementById('transcribe-cancelled-recordings'),
  autoEnableHandsFreeMode: document.getElementById('auto-enable-hands-free-mode'),
  keepAllTranscriptionsCopy: document.getElementById('keep-all-transcriptions-copy'),
  transcriptionHistoryCopy: document.getElementById('transcription-history-copy'),
  themeRadios: document.querySelectorAll('input[name="theme"]'),
  interfaceLanguageSearch: document.getElementById('interface-language-search'),
  interfaceLanguageList: document.getElementById('interface-language-list'),
  updateVersion: document.getElementById('update-version'),
  updateStatusText: document.getElementById('update-status-text'),
  updateProgress: document.getElementById('update-progress'),
  updateProgressBar: document.getElementById('update-progress-bar'),
  updateAction: document.getElementById('update-action'),
  translatable: document.querySelectorAll('[data-i18n]'),
  translatablePlaceholders: document.querySelectorAll('[data-i18n-placeholder]'),
};

let renderedHistory = [];
let historyFilter = '';
let lastState = null;
let settingsOpen = false;
let settingsCloseTimer = null;
let advancedOpen = false;
let advancedCloseTimer = null;
let capturingShortcutTarget = null;
let captureHeldTokens = new Set();
let captureBestTokens = [];
let captureFinalizing = false;
let dictionaryOpen = false;
let dictionaryCloseTimer = null;
let detectionLanguagesExpanded = false;
let editingDictionaryRuleId = null;
let dictionarySourceChips = [];
let toastHideTimer = null;
let dictionaryFilter = '';
let lastUpdate = { status: 'idle', version: null, availableVersion: null, progress: 0, message: '' };
let installAfterDownload = false;
let cloudSettingsSetupOpen = false;
let cloudKeyEditOpen = false;
const renderCache = {
  translations: '',
  detectionLanguages: '',
  interfaceLanguages: '',
  history: '',
  dictionary: '',
  models: '',
  cloudModels: '',
  cloudRetries: '',
  usage: '',
};

const SETTINGS_CLOSE_DELAY_MS = 500;
const TOAST_HIDE_DELAY_MS = 3200;

function locale() {
  return lastState?.interfaceLanguage || 'en';
}

function t(key) {
  return (TRANSLATIONS[locale()] && TRANSLATIONS[locale()][key]) || TRANSLATIONS.en[key] || key;
}

function template(key, replacements = {}) {
  return Object.entries(replacements).reduce(
    (message, [name, value]) => message.replaceAll(`{${name}}`, String(value)),
    t(key),
  );
}

function intFmt(value) {
  return new Intl.NumberFormat(locale(), { maximumFractionDigits: 0 }).format(Number(value) || 0);
}

function compactFmt(value) {
  return new Intl.NumberFormat(locale(), {
    notation: 'compact',
    maximumFractionDigits: 1,
  }).format(Number(value) || 0);
}

function langName(code, displayLocale = locale()) {
  try {
    return new Intl.DisplayNames([displayLocale], { type: 'language' }).of(code) || code;
  } catch (_error) {
    return code;
  }
}

function capitalizeLanguageLabel(value, displayLocale = locale()) {
  const text = String(value || '').trim();
  if (!text) return text;
  return text.replace(/^\p{L}/u, (match) => match.toLocaleUpperCase(displayLocale));
}

function getSupportedDetectionLanguages() {
  const fromState = Array.isArray(lastState?.supportedDetectionLanguages)
    ? lastState.supportedDetectionLanguages
    : [];
  const unique = [...new Set(fromState.map((code) => String(code || '').trim().toLowerCase()).filter(Boolean))];

  for (const code of DEFAULT_DETECTION_LANGUAGES) {
    if (!unique.includes(code)) {
      unique.push(code);
    }
  }

  return unique;
}

function getSelectedDetectionLanguages() {
  const fromState = Array.isArray(lastState?.allowedLanguages) ? lastState.allowedLanguages : [];
  const list = [...new Set(fromState.map((code) => String(code || '').trim().toLowerCase()).filter(Boolean))];
  return list.length > 0 ? list : [...DEFAULT_DETECTION_LANGUAGES];
}

function getDictionaryFallbackLanguages() {
  const selected = getSelectedDetectionLanguages().filter((code) => DICTIONARY_LANGUAGE_CODES.includes(code));
  return selected.length > 0 ? selected : ['pt'];
}

function detectionLanguageSummary(selectedLanguages) {
  const count = Array.isArray(selectedLanguages) ? selectedLanguages.length : 0;
  return countLabel(
    count,
    t('activeDetectionLanguageSingular'),
    t('activeDetectionLanguagePlural'),
  );
}

function buildSelectedDetectionLanguageCard(code, canRemove) {
  const nativeName = capitalizeLanguageLabel(langName(code, code), code);
  const localName = capitalizeLanguageLabel(langName(code));
  const showLocalName = localName && localName !== nativeName;

  return `
    <article class="detection-language-card detection-language-card--selected">
      <div class="detection-language-card__copy">
        <strong>${esc(nativeName)}</strong>
        <span>${esc(showLocalName ? localName : code.toUpperCase())}</span>
      </div>
      <div class="detection-language-card__side">
        <span class="detection-language-card__meta">${esc(code.toUpperCase())}</span>
        ${
          canRemove
            ? `<button class="detection-language-remove" data-detection-remove="${esc(code)}" type="button" aria-label="${esc(t('removeDetectionLanguage'))} ${esc(localName || nativeName)}">&times;</button>`
            : `<span class="detection-language-lock">${esc(t('activeDetectionLanguage'))}</span>`
        }
      </div>
    </article>
  `;
}

function buildDetectionLanguageOption(code) {
  const nativeName = capitalizeLanguageLabel(langName(code, code), code);
  const localName = capitalizeLanguageLabel(langName(code));
  const showLocalName = localName && localName !== nativeName;

  return `
    <button class="detection-language-card detection-language-card--add" data-detection-add="${esc(code)}" type="button">
      <div class="detection-language-card__copy">
        <strong>${esc(nativeName)}</strong>
        <span>${esc(showLocalName ? localName : code.toUpperCase())}</span>
      </div>
      <span class="detection-language-add">+ ${esc(t('addDetectionLanguage'))}</span>
    </button>
  `;
}

function renderDetectionLanguages() {
  const supported = getSupportedDetectionLanguages();
  const selected = new Set(getSelectedDetectionLanguages());
  const query = String(els.detectionLanguageSearch.value || '').trim().toLocaleLowerCase(locale());
  const signature = [
    locale(),
    detectionLanguagesExpanded ? 'expanded' : 'compact',
    query,
    supported.join(','),
    [...selected].sort().join(','),
  ].join('|');
  if (renderCache.detectionLanguages === signature) {
    return;
  }
  renderCache.detectionLanguages = signature;

  const selectedLanguages = [...selected];
  const extraLanguages = supported
    .filter((code) => !selected.has(code))
    .map((code) => ({
      code,
      label: capitalizeLanguageLabel(langName(code)),
      nativeName: capitalizeLanguageLabel(langName(code, code), code),
    }))
    .sort((left, right) => left.label.localeCompare(right.label, locale()));
  const filteredExtras = extraLanguages.filter((item) => {
    const searchText = `${item.code} ${item.label} ${item.nativeName}`.toLocaleLowerCase(locale());
    return !query || searchText.includes(query);
  });

  els.detectionLanguageDefaults.innerHTML = selectedLanguages
    .map((code) => buildSelectedDetectionLanguageCard(code, selected.size > 1))
    .join('');
  els.detectionLanguageSummary.textContent = detectionLanguageSummary(selectedLanguages);
  els.toggleDetectionLanguages.textContent = detectionLanguagesExpanded
    ? t('showLessLanguages')
    : `${t('showMoreLanguages')} (${intFmt(extraLanguages.length)})`;
  els.toggleDetectionLanguages.classList.toggle('hidden', extraLanguages.length === 0);
  els.detectionLanguageMore.classList.toggle('hidden', !detectionLanguagesExpanded);

  if (filteredExtras.length === 0) {
    els.detectionLanguageList.innerHTML = `<div class="history-empty">${esc(t('noDetectionLanguageResults'))}</div>`;
    return;
  }

  els.detectionLanguageList.innerHTML = filteredExtras
    .map((item) => buildDetectionLanguageOption(item.code))
    .join('');
}

function esc(value) {
  return String(value || '')
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

function countLabel(count, singular, plural) {
  return `${intFmt(count)} ${count === 1 ? singular : plural}`;
}

function modelLabel(modelId) {
  const cloudModel = (lastState?.openRouterModels || []).find((model) => model.id === modelId);
  return (
    (MODEL_LABELS[modelId] && (MODEL_LABELS[modelId][locale()] || MODEL_LABELS[modelId].en)) ||
    cloudModel?.name ||
    modelId ||
    '--'
  );
}

function modelDescription(modelId) {
  return (MODEL_DESCRIPTIONS[modelId] && (MODEL_DESCRIPTIONS[modelId][locale()] || MODEL_DESCRIPTIONS[modelId].en)) || modelId || '--';
}

function formatMs(ms) {
  const value = Number(ms) || 0;
  return value > 0 ? `${Math.round(value)} ms` : '--';
}

function formatCostUsd(value) {
  const cost = Number(value) || 0;
  if (cost <= 0) return '';
  return new Intl.NumberFormat(locale(), {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: cost < 0.01 ? 4 : 2,
    maximumFractionDigits: cost < 0.01 ? 6 : 2,
  }).format(cost);
}

function formatShortcut(shortcut, platform = 'win32') {
  return String(shortcut || '')
    .split('+')
    .map((part) => {
      const token = part.trim().toLowerCase();
      if (token === 'commandorcontrol') return platform === 'darwin' ? 'Command' : 'Ctrl';
      if (token === 'ctrl' || token === 'control') return platform === 'darwin' ? 'Control' : 'Ctrl';
      if (token === 'command' || token === 'cmd') return 'Command';
      if (token === 'shift') return 'Shift';
      if (token === 'space') return 'Space';
      if (token === 'enter') return 'Enter';
      const specialLabels = {
        tab: 'Tab',
        backspace: 'Backspace',
        delete: 'Delete',
        insert: 'Insert',
        home: 'Home',
        end: 'End',
        pageup: 'PageUp',
        pagedown: 'PageDown',
        up: 'Up',
        down: 'Down',
        left: 'Left',
        right: 'Right',
      };
      if (specialLabels[token]) return specialLabels[token];
      if (token === 'alt' || token === 'option') return platform === 'darwin' ? 'Option' : 'Alt';
      if (token === 'windows' || token === 'super' || token === 'left windows' || token === 'right windows') {
        return platform === 'darwin' ? 'Command' : 'Win';
      }
      if (/^f([1-9]|1[0-9]|2[0-4])$/.test(token)) return token.toUpperCase();
      return token.length === 1 ? token.toUpperCase() : token;
    })
    .join('+');
}

function getStatusPanelData(state) {
  if (state.error) {
    return {
      tone: 'error',
      icon: '!',
      title: state.error || t('errorStatusTitle'),
      showProgress: false,
    };
  }

  const isLoading = state.switchingModel || state.phase === 'booting';
  if (!isLoading) {
    return null;
  }

  const modelName = modelLabel(state.model);
  const title = `${state.switchingModel ? t('switchingStatusTitle') : t('loadingStatusTitle')}: ${modelName}`;

  return {
    tone: 'loading',
    icon: '',
    title,
    showProgress: true,
  };
}

function renderStatusPanel(state) {
  const panelState = getStatusPanelData(state);
  if (!panelState) {
    els.statusPanel.classList.add('hidden');
    els.statusPanel.classList.remove('status-panel--loading', 'status-panel--error');
    return;
  }

  els.statusPanel.classList.remove('hidden');
  els.statusPanel.classList.toggle('status-panel--loading', panelState.tone === 'loading');
  els.statusPanel.classList.toggle('status-panel--error', panelState.tone === 'error');
  els.statusPanelTitle.textContent = panelState.title;
  els.statusPanelProgress.classList.toggle('hidden', !panelState.showProgress);

  const spinner = els.statusPanel.querySelector('.status-panel__spinner');
  if (spinner) {
    spinner.textContent = panelState.icon;
  }
}

function initTheme() {
const savedTheme = localStorage.getItem('openflow-theme') || 'dark';
  document.documentElement.setAttribute('data-theme', savedTheme);
  for (const radio of els.themeRadios) {
    if (radio.value === savedTheme) {
      radio.checked = true;
    }
    radio.addEventListener('change', (event) => {
      if (event.target.checked) {
        document.documentElement.setAttribute('data-theme', event.target.value);
  localStorage.setItem('openflow-theme', event.target.value);
      }
    });
  }
}

function updateHistoryCopy() {
  if (!els.historyCopy) {
    return;
  }

  const historyLimit = intFmt(lastState?.historyLimit || 100);
  els.historyCopy.textContent = lastState?.keepAllTranscriptions
    ? t('historyCopyUnlimited')
    : template('historyCopyLimited', { count: historyLimit });
}

function updateHistorySettingsCopy() {
  const historyLimit = intFmt(lastState?.historyLimit || 100);

  if (els.transcriptionHistoryCopy) {
    els.transcriptionHistoryCopy.textContent = t('transcriptionHistoryCopy');
  }

  if (els.keepAllTranscriptionsCopy) {
    els.keepAllTranscriptionsCopy.textContent = template('keepAllTranscriptionsCopy', {
      count: historyLimit,
    });
  }
}

function applyTranslations() {
  const signature = [
    locale(),
    lastState?.historyLimit || '',
    lastState?.keepAllTranscriptions ? 'all' : 'limited',
    editingDictionaryRuleId || '',
    lastUpdate?.status || '',
    lastUpdate?.version || '',
    lastUpdate?.availableVersion || '',
    lastUpdate?.progress || 0,
    lastUpdate?.message || '',
  ].join('|');
  if (renderCache.translations === signature) {
    return;
  }
  renderCache.translations = signature;

  document.documentElement.lang = locale();
  document.documentElement.dir = locale() === 'ar' ? 'rtl' : 'ltr';
  localStorage.setItem('openflow-interface-language', locale());

  for (const element of els.translatable) {
    element.textContent = t(element.dataset.i18n);
  }

  for (const element of els.translatablePlaceholders) {
    element.setAttribute('placeholder', t(element.dataset.i18nPlaceholder));
  }

  els.dictionaryLangPtLabel.textContent = 'PT';
  els.dictionaryLangEnLabel.textContent = 'EN';
  const ptLanguageName = capitalizeLanguageLabel(langName('pt'));
  const enLanguageName = capitalizeLanguageLabel(langName('en'));
  els.dictionaryLangPt.setAttribute('aria-label', ptLanguageName);
  els.dictionaryLangEn.setAttribute('aria-label', enLanguageName);
  els.dictionaryLangPt.closest('.lang-toggle')?.setAttribute('title', ptLanguageName);
  els.dictionaryLangEn.closest('.lang-toggle')?.setAttribute('title', enLanguageName);
  updateDictionaryFormMode();
  renderDictionarySourceChips();
  els.dictionarySearch.setAttribute('placeholder', t('dictionarySearchPlaceholder'));
  els.dictionarySearch.setAttribute('aria-label', t('dictionarySearchLabel'));
  updateHistoryCopy();
  updateHistorySettingsCopy();
  renderUpdateState();
}

function renderUsageSummary(summary = {}) {
  const signature = [
    locale(),
    summary.streakDays || 0,
    summary.totalDays || 0,
    summary.totalWords || 0,
    Math.round(summary.averageWpm || 0),
  ].join('|');
  if (renderCache.usage === signature) {
    return;
  }
  renderCache.usage = signature;

  const singularDay = locale() === 'pt-BR' ? 'dia' : 'day';
  const pluralDay = locale() === 'pt-BR' ? 'dias' : 'days';
  const wordsLabel = locale() === 'pt-BR' ? 'palavras' : 'words';
  const words = Number(summary.totalWords) || 0;

  els.streakValue.textContent = countLabel(summary.streakDays || 0, singularDay, pluralDay);
  els.daysUsedValue.textContent = countLabel(summary.totalDays || 0, singularDay, pluralDay);
  els.wordsTotalValue.textContent = `${words >= 1000 ? compactFmt(words) : intFmt(words)} ${wordsLabel}`;
  els.wpmValue.textContent = `${intFmt(Math.round(summary.averageWpm || 0))} WPM`;
}

function renderInterfaceLanguages() {
  const query = String(els.interfaceLanguageSearch.value || '').trim().toLocaleLowerCase(locale());
  const signature = `${locale()}|${query}`;
  if (renderCache.interfaceLanguages === signature) {
    return;
  }
  renderCache.interfaceLanguages = signature;

  const items = SUPPORTED_INTERFACE_LANGUAGES
    .map((code) => ({
      code,
      nativeName: capitalizeLanguageLabel(langName(code, code)),
      localName: capitalizeLanguageLabel(langName(code)),
    }))
    .filter((item) => {
      const searchText = `${item.code} ${item.nativeName} ${item.localName}`.toLocaleLowerCase(locale());
      return !query || searchText.includes(query);
    });

  if (items.length === 0) {
    els.interfaceLanguageList.innerHTML = `<div class="history-empty">${esc(t('noLanguageResults'))}</div>`;
    return;
  }

  els.interfaceLanguageList.innerHTML = items
    .map((item) => `
      <button
        class="interface-language-card${item.code === locale() ? ' interface-language-card--active' : ''}"
        data-interface-language="${esc(item.code)}"
        type="button"
      >
        <div class="interface-language-card__copy">
          <strong>${esc(item.nativeName)}</strong>
          <span>${esc(item.localName)}</span>
        </div>
        <span class="interface-language-card__meta">${esc(item.code === locale() ? t('selectedLanguage') : item.code)}</span>
      </button>
    `)
    .join('');
}

function highlightMatch(text, query) {
  const value = String(text ?? '');
  if (!query) {
    return esc(value);
  }

  const needle = query.toLocaleLowerCase(locale());
  const haystack = value.toLocaleLowerCase(locale());
  if (haystack.length !== value.length) {
    // Case folding changed string length; offsets would be unreliable.
    return esc(value);
  }

  let result = '';
  let index = 0;
  while (index <= value.length) {
    const found = haystack.indexOf(needle, index);
    if (found === -1) {
      result += esc(value.slice(index));
      break;
    }
    result += `${esc(value.slice(index, found))}<mark>${esc(value.slice(found, found + needle.length))}</mark>`;
    index = found + needle.length;
  }
  return result;
}

function renderHistory(history, total) {
  const list = Array.isArray(history) ? history : [];
  const signature = [
    locale(),
    historyFilter.trim(),
    total || 0,
    list.length,
    list
      .map(
        (entry) =>
          `${entry.timestamp || ''}:${entry.model || ''}:${entry.engine || ''}:${entry.language || ''}:${entry.transcriptionMs || 0}:${entry.costUsd || 0}:${entry.wordCount || 0}:${entry.text || ''}`,
      )
      .join('|'),
  ].join('|');
  if (renderCache.history === signature) {
    return;
  }
  renderCache.history = signature;

  const query = historyFilter.trim().toLocaleLowerCase(locale());
  renderedHistory = !query
    ? list
    : list.filter((entry) => String(entry.text || '').toLocaleLowerCase(locale()).includes(query));

  const messageSingular = locale() === 'pt-BR' ? 'mensagem' : 'message';
  const messagePlural = locale() === 'pt-BR' ? 'mensagens' : 'messages';
  const resultSingular = locale() === 'pt-BR' ? 'resultado' : 'result';
  const resultPlural = locale() === 'pt-BR' ? 'resultados' : 'results';
  const wordsLabel = locale() === 'pt-BR' ? 'palavras' : 'words';

  if (list.length === 0) {
    els.historyList.innerHTML = `<div class="history-empty">${esc(t('noTranscriptions'))}</div>`;
    els.historyCount.textContent = countLabel(0, messageSingular, messagePlural);
    return;
  }

  if (renderedHistory.length === 0) {
    els.historyList.innerHTML = `<div class="history-empty">${esc(t('noSearchResults'))}</div>`;
    els.historyCount.textContent = countLabel(0, resultSingular, resultPlural);
    return;
  }

  els.historyCount.textContent = historyFilter.trim()
    ? countLabel(renderedHistory.length, resultSingular, resultPlural)
    : countLabel(total || renderedHistory.length, messageSingular, messagePlural);

  els.historyList.innerHTML = renderedHistory
    .map((entry, index) => {
      const timestamp = new Date(entry.timestamp);
      const cost = formatCostUsd(entry.costUsd);
      return `
        <article class="history-item">
          <div class="history-item__time">
            <strong>${timestamp.toLocaleTimeString(locale(), { hour: '2-digit', minute: '2-digit' })}</strong>
            <span>${timestamp.toLocaleDateString(locale(), { day: '2-digit', month: '2-digit' })}</span>
          </div>
          <div class="history-item__body">
            <p>${highlightMatch(entry.text, query)}</p>
            <div class="history-item__meta">
              <span>${esc(modelLabel(entry.model))}</span>
              <span>${esc(capitalizeLanguageLabel(langName(entry.language || 'en')))}</span>
              <span>${esc(formatMs(entry.transcriptionMs))}</span>
              ${cost ? `<span>${esc(cost)}</span>` : ''}
              <span>${intFmt(entry.wordCount || 0)} ${wordsLabel}</span>
            </div>
          </div>
          <div class="history-item__actions">
            <button class="copy-button" data-history-index="${index}" type="button">${esc(t('copy'))}</button>
            <button class="icon-button icon-button--danger history-delete" data-history-delete="${index}" type="button" title="${esc(t('deleteEntry'))}" aria-label="${esc(t('deleteEntry'))}">${DICTIONARY_ICONS.trash}</button>
          </div>
        </article>
      `;
    })
    .join('');
}

const DICTIONARY_ICONS = {
  pencil:
    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>',
  trash:
    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>',
  book:
    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>',
};

function renderDictionary(entries) {
  const list = Array.isArray(entries) ? entries : [];
  const signature = [
    locale(),
    dictionaryFilter.trim(),
    editingDictionaryRuleId || '',
    list.length,
    list
      .map(
        (entry) =>
          `${entry.id || ''}:${(entry.sources || []).join(',')}:${entry.target || ''}:${(entry.languages || []).join(',')}`,
      )
      .join('|'),
  ].join('|');
  if (renderCache.dictionary === signature) {
    return;
  }
  renderCache.dictionary = signature;

  const query = dictionaryFilter.trim().toLocaleLowerCase(locale());
  const filteredList = !query
    ? list
    : list.filter((entry) => {
      const searchText = `${(entry.sources || []).join(' ')} ${entry.target || ''}`.toLocaleLowerCase(locale());
      return searchText.includes(query);
    });
  const ruleSingular = locale() === 'pt-BR' ? 'regra' : 'rule';
  const rulePlural = locale() === 'pt-BR' ? 'regras' : 'rules';

  els.dictionaryCount.textContent = countLabel(list.length, ruleSingular, rulePlural);

  const searchContainer = els.dictionarySearch.closest('.dictionary-search');
  if (searchContainer) {
    searchContainer.classList.toggle('hidden', list.length === 0);
  }

  if (list.length === 0) {
    els.dictionaryList.innerHTML = `
      <div class="dictionary-empty">
        ${DICTIONARY_ICONS.book}
        <strong>${esc(t('dictionaryEmptyTitle'))}</strong>
        <p>${esc(t('dictionaryEmptyCopy'))}</p>
      </div>
    `;
    return;
  }

  if (filteredList.length === 0) {
    els.dictionaryList.innerHTML = `<div class="history-empty">${esc(t('noRuleResults'))}</div>`;
    return;
  }

  els.dictionaryList.innerHTML = filteredList
    .map((entry) => `
      <article class="dictionary-item${entry.id === editingDictionaryRuleId ? ' dictionary-item--editing' : ''}" data-id="${esc(entry.id)}">
        <div class="dictionary-item__rule">
          <div class="dictionary-item__sources">
            ${(entry.sources || []).map((source) => `<span class="dictionary-source-chip">${esc(source)}</span>`).join('')}
          </div>
          <span class="dictionary-item__arrow" aria-hidden="true">→</span>
          <span class="dictionary-item__target${entry.target ? '' : ' dictionary-item__target--deleted'}">${
            entry.target ? esc(entry.target) : esc(t('dictionaryDeleteLabel'))
          }</span>
        </div>
        <div class="dictionary-item__badges">
          ${(entry.languages || [])
            .map(
              (language) =>
                `<span class="dictionary-badge" title="${esc(capitalizeLanguageLabel(langName(language)))}">${esc(String(language).toUpperCase())}</span>`,
            )
            .join('')}
        </div>
        <div class="dictionary-item__actions">
          <button class="icon-button" data-dictionary-edit="${esc(entry.id)}" type="button" title="${esc(t('edit'))}" aria-label="${esc(t('edit'))}">${DICTIONARY_ICONS.pencil}</button>
          <button class="icon-button icon-button--danger" data-dictionary-remove="${esc(entry.id)}" type="button" title="${esc(t('remove'))}" aria-label="${esc(t('remove'))}">${DICTIONARY_ICONS.trash}</button>
        </div>
      </article>
    `)
    .join('');
}

function updateDictionaryFormMode() {
  const editing = Boolean(editingDictionaryRuleId);
  els.submitDictionaryRule.textContent = editing ? t('saveRule') : t('addRule');
  els.cancelDictionaryEdit.classList.toggle('hidden', !editing);
  els.dictionaryEditingBanner.classList.toggle('hidden', !editing);
  els.dictionaryForm.classList.toggle('dictionary-form--editing', editing);
}

function renderModels(state) {
  const signature = [
    locale(),
    state.model,
    state.phase,
    state.switchingModel ? 'switching' : 'steady',
    JSON.stringify(state.modelStats || {}),
  ].join('|');
  if (renderCache.models === signature) {
    return;
  }
  renderCache.models = signature;

  const stats = state.modelStats || {};
  const isBusy = state.switchingModel || state.phase === 'booting';
  const avgLabel = locale() === 'pt-BR' ? 'Média' : 'Avg';
  const useSingular = locale() === 'pt-BR' ? 'uso' : 'use';
  const usePlural = locale() === 'pt-BR' ? 'usos' : 'uses';

  els.modelList.innerHTML = (state.availableModels || [])
    .map((option) => {
      const itemStats = stats[option.id] || {};
      return `
        <button class="model-card${option.id === state.model ? ' model-card--active' : ''}${isBusy ? ' model-card--disabled' : ''}" data-model="${option.id}" type="button" ${isBusy ? 'disabled' : ''}>
          <div class="model-card__top">
            <strong>${esc(modelLabel(option.id))}</strong>
            <span>${esc(option.id)}</span>
          </div>
          <p>${esc(modelDescription(option.id))}</p>
          <div class="model-card__stats">
            <span>${avgLabel} ${esc(formatMs(itemStats.averageMs))}</span>
            <span>${countLabel(itemStats.count || 0, useSingular, usePlural)}</span>
          </div>
        </button>
      `;
    })
    .join('');

  for (const button of els.modelList.querySelectorAll('[data-model]')) {
    button.addEventListener('click', async () => {
      if (isBusy) return;
      renderState(await window.flowLocal.updateSettings({ model: button.getAttribute('data-model') }));
    });
  }
}

function renderCloudModels(state) {
  const models = Array.isArray(state.openRouterModels) ? state.openRouterModels : [];
  const signature = [
    locale(),
    state.cloudTranscriptionEnabled ? 'cloud-on' : 'cloud-off',
    cloudSettingsSetupOpen ? 'setup-open' : 'setup-closed',
    cloudKeyEditOpen ? 'key-edit' : 'key-readonly',
    state.cloudTranscriptionModel || '',
    state.openRouterApiKeyConfigured ? 'key' : 'no-key',
    state.openRouterModelsStatus || '',
    state.openRouterModelsError || '',
    models.map((model) => `${model.id}:${model.name}:${model.pricingLabel}`).join('|'),
  ].join('|');
  if (renderCache.cloudModels === signature) {
    return;
  }
  renderCache.cloudModels = signature;

  const showCloudSettings = Boolean(state.cloudTranscriptionEnabled || cloudSettingsSetupOpen);
  els.cloudTranscriptionEnabled.checked = Boolean(state.cloudTranscriptionEnabled);
  els.cloudSettings.classList.toggle('hidden', !showCloudSettings);
  if (!showCloudSettings) {
    return;
  }

  els.openRouterKeyStatus.textContent = state.openRouterApiKeyConfigured
    ? t('apiKeyConfigured')
    : t('apiKeyMissing');
  const showKeyForm = !state.openRouterApiKeyConfigured || cloudKeyEditOpen;
  els.openRouterKeyForm.classList.toggle('hidden', !showKeyForm);
  els.openRouterKeySaved.classList.toggle('hidden', showKeyForm);
  els.cancelOpenRouterKeyChange.classList.toggle(
    'hidden',
    !cloudKeyEditOpen || !state.openRouterApiKeyConfigured,
  );
  els.clearOpenRouterKey.disabled = !state.openRouterApiKeyConfigured;
  els.refreshOpenRouterModels.disabled =
    !state.openRouterApiKeyConfigured || state.openRouterModelsStatus === 'loading';

  if (!state.openRouterApiKeyConfigured) {
    els.cloudModelList.innerHTML = `<div class="history-empty">${esc(t('apiKeyMissing'))}</div>`;
    return;
  }

  if (state.openRouterModelsStatus === 'loading') {
    els.cloudModelList.innerHTML = `<div class="history-empty">${esc(t('loadingCloudModels'))}</div>`;
    return;
  }

  if (state.openRouterModelsStatus === 'error') {
    els.cloudModelList.innerHTML = `<div class="history-empty">${esc(template('cloudModelsError', { message: state.openRouterModelsError || '--' }))}</div>`;
    return;
  }

  if (models.length === 0) {
    els.cloudModelList.innerHTML = `<div class="history-empty">${esc(t('noCloudModels'))}</div>`;
    return;
  }

  const isBusy = state.switchingModel || state.phase === 'booting' || state.openRouterModelsStatus === 'loading';
  els.cloudModelList.innerHTML = models
    .map((model) => `
      <button class="model-card${model.id === state.cloudTranscriptionModel ? ' model-card--active' : ''}${isBusy ? ' model-card--disabled' : ''}" data-cloud-model="${esc(model.id)}" type="button" ${isBusy ? 'disabled' : ''}>
        <div class="model-card__top">
          <strong>${esc(model.name || model.id)}</strong>
          <span>${esc(model.id)}</span>
        </div>
        <p>${esc(model.description || model.id)}</p>
        <div class="model-card__stats">
          <span>${esc(model.pricingLabel || '--')}</span>
        </div>
      </button>
    `)
    .join('');

  for (const button of els.cloudModelList.querySelectorAll('[data-cloud-model]')) {
    button.addEventListener('click', async () => {
      if (isBusy) return;
      renderState(await window.flowLocal.updateSettings({
        cloudTranscriptionModel: button.getAttribute('data-cloud-model'),
      }));
    });
  }
}

const CLOUD_RETRY_TTL_MS = 60 * 60 * 1000;
let cloudRetryExpiryTimer = null;

function isCloudRetryFresh(retry, now = Date.now()) {
  const createdAtMs = Date.parse(retry?.createdAt || '');
  return Number.isFinite(createdAtMs) && now - createdAtMs < CLOUD_RETRY_TTL_MS;
}

function scheduleCloudRetryExpiryRefresh(retries) {
  if (cloudRetryExpiryTimer) {
    clearTimeout(cloudRetryExpiryTimer);
    cloudRetryExpiryTimer = null;
  }

  const now = Date.now();
  let nextExpiryMs = Infinity;
  for (const retry of retries) {
    const createdAtMs = Date.parse(retry?.createdAt || '');
    if (!Number.isFinite(createdAtMs)) {
      continue;
    }
    const expiresAt = createdAtMs + CLOUD_RETRY_TTL_MS;
    if (expiresAt > now && expiresAt < nextExpiryMs) {
      nextExpiryMs = expiresAt;
    }
  }

  if (!Number.isFinite(nextExpiryMs)) {
    return;
  }

  cloudRetryExpiryTimer = setTimeout(() => {
    cloudRetryExpiryTimer = null;
    renderCache.cloudRetries = '';
    if (lastState) {
      renderCloudRetries(lastState);
    }
  }, Math.max(250, nextExpiryMs - Date.now() + 50));
}

function renderCloudRetries(state) {
  const now = Date.now();
  const retries = (Array.isArray(state.cloudRetries) ? state.cloudRetries : []).filter((retry) =>
    isCloudRetryFresh(retry, now),
  );
  const signature = [
    locale(),
    state.phase,
    retries
      .map((retry) => `${retry.id}:${retry.model}:${retry.language}:${retry.audioDurationMs}:${retry.createdAt}:${retry.error}`)
      .join('|'),
  ].join('|');
  if (renderCache.cloudRetries === signature) {
    scheduleCloudRetryExpiryRefresh(retries);
    return;
  }
  renderCache.cloudRetries = signature;
  scheduleCloudRetryExpiryRefresh(retries);

  els.cloudRetrySection.classList.toggle('hidden', retries.length === 0);
  if (retries.length === 0) {
    els.cloudRetryList.innerHTML = `<div class="history-empty">${esc(t('noSavedCloudRecordings'))}</div>`;
    return;
  }

  const busy = state.phase === 'transcribing';
  els.cloudRetryList.innerHTML = retries
    .map((retry) => {
      const timestamp = new Date(retry.createdAt);
      return `
        <article class="cloud-retry-item">
          <div>
            <strong>${esc(modelLabel(retry.model))}</strong>
            <p>${esc(timestamp.toLocaleString(locale()))} - ${esc(formatMs(retry.audioDurationMs))}</p>
            ${retry.error ? `<span>${esc(retry.error)}</span>` : ''}
          </div>
          <button class="secondary-button" data-cloud-retry="${esc(retry.id)}" type="button" ${busy ? 'disabled' : ''}>${esc(t('retry'))}</button>
        </article>
      `;
    })
    .join('');

  for (const button of els.cloudRetryList.querySelectorAll('[data-cloud-retry]')) {
    button.addEventListener('click', async () => {
      if (busy) return;
      renderState(await window.flowLocal.retryCloudTranscription(button.getAttribute('data-cloud-retry')));
    });
  }
}

function describeUpdate(update) {
  switch (update?.status) {
    case 'checking':
      return { text: t('updateChecking'), action: 'check', busy: true, error: false };
    case 'available':
      return {
        text: template('updateAvailable', { version: update.availableVersion || '' }),
        action: 'update',
        busy: false,
        error: false,
      };
    case 'manual-download':
      return {
        text: template('updateManualDownload', { version: update.availableVersion || '' }),
        action: 'open-download',
        busy: false,
        error: false,
      };
    case 'downloading':
      return {
        text: template('updateDownloading', { percent: Math.round(update.progress || 0) }),
        action: 'download',
        busy: true,
        error: false,
      };
    case 'downloaded':
      return {
        text: template('updateDownloaded', { version: update.availableVersion || '' }),
        action: 'install',
        busy: false,
        error: false,
      };
    case 'not-available':
      return { text: t('updateUpToDate'), action: 'check', busy: false, error: false };
    case 'not-packaged':
      return { text: t('updateNotPackaged'), action: 'open-download', busy: false, error: false };
    case 'updater-unavailable':
      return { text: t('updateUpdaterUnavailable'), action: 'open-download', busy: false, error: false };
    case 'unsupported':
      return { text: t('updateUnsupported'), action: 'check', busy: false, error: false };
    case 'error': {
      const rawMessage = update.message || '';
      // Keep the first line only: failed HTTP requests can carry a whole HTML page.
      const message = rawMessage.split(/\r?\n/, 1)[0].trim().slice(0, 200);
      // A release can exist without the electron-updater metadata files.
      if (/(app-update\.yml|latest(?:-[a-z0-9_-]+)?(?:-mac)?\.yml)/i.test(rawMessage)) {
        return {
          text: update.availableVersion
            ? template('updateMetadataUnavailableForVersion', { version: update.availableVersion })
            : t('updateMetadataUnavailable'),
          action: 'check',
          busy: false,
          error: false,
        };
      }
      return {
        text: template('updateError', { message }),
        action: 'check',
        busy: false,
        error: true,
      };
    }
    default:
      return { text: t('updateIdle'), action: 'check', busy: false, error: false };
  }
}

function renderUpdateState(update = lastUpdate) {
  lastUpdate = update || lastUpdate;
  if (!els.updateAction) {
    return;
  }

  if (installAfterDownload && lastUpdate.status === 'downloaded') {
    installAfterDownload = false;
    window.flowLocal.installUpdate();
  }

  const info = describeUpdate(lastUpdate);
  const version = lastUpdate.version ? `v${lastUpdate.version}` : 'v--';

  els.updateVersion.textContent = version;
  els.updateStatusText.textContent = info.text;
  els.updateStatusText.classList.toggle('update-card__status--error', info.error);

  const buttonLabel =
    info.action === 'update'
      ? t('downloadUpdate')
      : info.action === 'open-download'
        ? t('openDownloadPage')
      : info.action === 'install'
        ? t('installUpdate')
        : t('checkForUpdates');
  els.updateAction.textContent = buttonLabel;
  els.updateAction.dataset.updateAction = info.action;
  els.updateAction.disabled = info.busy;

  const showProgress = lastUpdate.status === 'downloading';
  els.updateProgress.classList.toggle('hidden', !showProgress);
  els.updateProgressBar.style.width = `${Math.max(0, Math.min(100, Math.round(lastUpdate.progress || 0)))}%`;
}

function hideToast() {
  if (toastHideTimer) {
    window.clearTimeout(toastHideTimer);
    toastHideTimer = null;
  }
  els.noticeStrip.classList.remove('is-visible', 'toast--error');
  els.noticeStrip.classList.add('hidden');
  els.noticeStrip.textContent = '';
}

function showToast(message, autoHide = true) {
  if (!message) {
    hideToast();
    return;
  }
  if (toastHideTimer) {
    window.clearTimeout(toastHideTimer);
    toastHideTimer = null;
  }
  els.noticeStrip.textContent = message;
  els.noticeStrip.classList.remove('hidden', 'toast--error');
  els.noticeStrip.classList.add('toast--error');
  window.requestAnimationFrame(() => els.noticeStrip.classList.add('is-visible'));
  if (autoHide) {
    toastHideTimer = window.setTimeout(hideToast, TOAST_HIDE_DELAY_MS);
  }
}

function renderState(state) {
  lastState = state;
  applyTranslations();
  renderInterfaceLanguages();
  renderDetectionLanguages();
  hideToast();
  renderStatusPanel(state);

  els.shortcutLabel.textContent = formatShortcut(state.shortcut, state.platform) || '--';
  els.pasteShortcutLabel.textContent = formatShortcut(state.pasteLastShortcut, state.platform) || '--';
  const systemAudioShortcut = formatShortcut(
    state.systemAudioShortcut || `${state.shortcut}+alt`,
    state.platform,
  );
  if (els.systemAudioShortcutLabel) {
    els.systemAudioShortcutLabel.textContent = systemAudioShortcut || '--';
  }
  if (els.systemAudioShortcutMeta) {
    els.systemAudioShortcutMeta.classList.toggle('hidden', state.platform !== 'win32');
  }
  if (els.systemAudioShortcutKeys) {
    els.systemAudioShortcutKeys.textContent = systemAudioShortcut || '--';
  }
  if (els.systemAudioShortcutCopy) {
    els.systemAudioShortcutCopy.textContent =
      state.platform === 'win32'
        ? template('systemAudioShortcutCopy', { shortcut: systemAudioShortcut })
        : t('systemAudioShortcutUnavailable');
  }
  const activeModelId = state.cloudTranscriptionEnabled
    ? state.cloudTranscriptionModel
    : state.model;
  els.activeModelLabel.textContent = `${modelLabel(activeModelId)} (${activeModelId})`;
  els.deviceLabel.textContent = state.device ? String(state.device).toUpperCase() : '--';
  els.deviceNote.textContent = state.deviceNote || t('noNotes');
  els.showOverlayBar.checked = Boolean(state.showOverlayBar);
  els.launchAtLogin.checked = Boolean(state.launchAtLogin);
  els.soundEffectsEnabled.checked = Boolean(state.soundEffectsEnabled);
  els.keepAllTranscriptions.checked = Boolean(state.keepAllTranscriptions);
  els.transcribeCancelledRecordings.checked = Boolean(state.transcribeCancelledRecordings);
  els.autoEnableHandsFreeMode.checked = Boolean(state.autoEnableHandsFreeMode);
  els.duckAudio.checked = Boolean(state.duckAudioEnabled);
  els.startHidden.checked = Boolean(state.startHidden);
  els.overlayDynamicSize.checked = Boolean(state.overlayDynamicSize);

  // Don't fight the user while they are dragging a slider or recording a shortcut.
  const overlayOpacity = Number.isFinite(Number(state.overlayOpacity)) ? Number(state.overlayOpacity) : 100;
  const overlayScale = Number.isFinite(Number(state.overlayScale)) ? Number(state.overlayScale) : 100;
  if (document.activeElement !== els.overlayOpacity) {
    els.overlayOpacity.value = String(overlayOpacity);
  }
  els.overlayOpacityValue.textContent = `${overlayOpacity}%`;
  if (document.activeElement !== els.overlayScale) {
    els.overlayScale.value = String(overlayScale);
  }
  els.overlayScaleValue.textContent = `${overlayScale}%`;
  if (!capturingShortcutTarget) {
    refreshShortcutLabels();
  }

  renderUsageSummary(state.usageSummary || {});
  renderHistory(state.history, state.historyTotal);
  renderDictionary(state.dictionaryEntries);
  renderModels(state);
  renderCloudModels(state);
  renderCloudRetries(state);
}

function setSettingsOpen(open) {
  if (settingsCloseTimer) {
    window.clearTimeout(settingsCloseTimer);
    settingsCloseTimer = null;
  }
  settingsOpen = Boolean(open);
  document.body.classList.toggle('settings-open', settingsOpen);

  if (settingsOpen) {
    els.settingsDrawer.classList.remove('hidden');
    els.settingsBackdrop.classList.remove('hidden');
    window.requestAnimationFrame(() => {
      els.settingsDrawer.classList.add('is-visible');
      els.settingsBackdrop.classList.add('is-visible');
      els.settingsDrawer.setAttribute('aria-hidden', 'false');
    });
    return;
  }

  els.settingsDrawer.classList.remove('is-visible');
  els.settingsBackdrop.classList.remove('is-visible');
  els.settingsDrawer.setAttribute('aria-hidden', 'true');
  settingsCloseTimer = window.setTimeout(() => {
    els.settingsDrawer.classList.add('hidden');
    els.settingsBackdrop.classList.add('hidden');
    settingsCloseTimer = null;
  }, SETTINGS_CLOSE_DELAY_MS);
}

function setAdvancedOpen(open) {
  if (advancedCloseTimer) {
    window.clearTimeout(advancedCloseTimer);
    advancedCloseTimer = null;
  }
  advancedOpen = Boolean(open);

  if (advancedOpen) {
    els.advancedDrawer.classList.remove('hidden');
    els.advancedBackdrop.classList.remove('hidden');
    window.requestAnimationFrame(() => {
      els.advancedDrawer.classList.add('is-visible');
      els.advancedBackdrop.classList.add('is-visible');
      els.advancedDrawer.setAttribute('aria-hidden', 'false');
    });
    return;
  }

  els.advancedDrawer.classList.remove('is-visible');
  els.advancedBackdrop.classList.remove('is-visible');
  els.advancedDrawer.setAttribute('aria-hidden', 'true');
  advancedCloseTimer = window.setTimeout(() => {
    els.advancedDrawer.classList.add('hidden');
    els.advancedBackdrop.classList.add('hidden');
    advancedCloseTimer = null;
  }, SETTINGS_CLOSE_DELAY_MS);
}

function setCloudPrivacyOpen(open) {
  const visible = Boolean(open);
  els.cloudPrivacyDialog.classList.toggle('hidden', !visible);
  els.cloudPrivacyBackdrop.classList.toggle('hidden', !visible);
  window.requestAnimationFrame(() => {
    els.cloudPrivacyDialog.classList.toggle('is-visible', visible);
    els.cloudPrivacyBackdrop.classList.toggle('is-visible', visible);
    els.cloudPrivacyDialog.setAttribute('aria-hidden', visible ? 'false' : 'true');
  });
}

const SHORTCUT_MODIFIER_TOKENS = ['ctrl', 'alt', 'shift', 'windows', 'command'];
const SHORTCUT_KEY_ALIASES = {
  ' ': 'space',
  Spacebar: 'space',
  Space: 'space',
  Enter: 'enter',
  Return: 'enter',
  Tab: 'tab',
  Backspace: 'backspace',
  Delete: 'delete',
  Del: 'delete',
  Insert: 'insert',
  Ins: 'insert',
  Home: 'home',
  End: 'end',
  PageUp: 'pageup',
  PageDown: 'pagedown',
  ArrowUp: 'up',
  ArrowDown: 'down',
  ArrowLeft: 'left',
  ArrowRight: 'right',
  Up: 'up',
  Down: 'down',
  Left: 'left',
  Right: 'right',
};

function shortcutTokenFromEvent(event) {
  const key = event.key;
  if (key === 'Control') return 'ctrl';
  if (key === 'Alt' || key === 'AltGraph') return 'alt';
  if (key === 'Shift') return 'shift';
  if (key === 'Meta' || key === 'OS') {
    return lastState?.platform === 'darwin' ? 'command' : 'windows';
  }
  if (key === 'Escape') return 'escape';
  if (SHORTCUT_KEY_ALIASES[key]) return SHORTCUT_KEY_ALIASES[key];
  if (/^[a-zA-Z0-9]$/.test(key)) return key.toLowerCase();
  if (/^F([1-9]|1[0-9]|2[0-4])$/.test(key)) return key.toLowerCase();
  return null;
}

function orderShortcutTokens(tokenSet) {
  const modifiers = SHORTCUT_MODIFIER_TOKENS.filter((token) => tokenSet.has(token));
  const keys = [...tokenSet].filter((token) => !SHORTCUT_MODIFIER_TOKENS.includes(token));
  return [...modifiers, ...keys];
}

function isValidCapturedShortcut(tokens) {
  if (!tokens.length) return false;
  const keys = tokens.filter((token) => !SHORTCUT_MODIFIER_TOKENS.includes(token));
  // Esc stays reserved for cancelling. Other captured keys can be combined freely.
  if (keys.includes('escape')) return false;
  return true;
}

function getCaptureButton(target) {
  return target === 'pasteLastShortcut' ? els.capturePasteShortcut : els.captureShortcut;
}

function refreshShortcutLabels() {
  if (!lastState) return;
  els.shortcutCaptureKeys.textContent = formatShortcut(lastState.shortcut, lastState.platform) || '--';
  els.pasteShortcutCaptureKeys.textContent =
    formatShortcut(lastState.pasteLastShortcut, lastState.platform) || '--';
  if (els.systemAudioShortcutKeys) {
    els.systemAudioShortcutKeys.textContent =
      formatShortcut(lastState.systemAudioShortcut || `${lastState.shortcut}+alt`, lastState.platform) ||
      '--';
  }
}

function startShortcutCapture(target) {
  if (capturingShortcutTarget === target) return;
  if (capturingShortcutTarget) stopShortcutCapture();

  capturingShortcutTarget = target;
  captureHeldTokens = new Set();
  captureBestTokens = [];
  captureFinalizing = false;

  const button = getCaptureButton(target);
  button.classList.add('shortcut-capture--recording');
  const keysEl = button.querySelector('.shortcut-capture__keys');
  if (keysEl) keysEl.textContent = t('recordingShortcut');
}

function stopShortcutCapture() {
  if (!capturingShortcutTarget) return;
  capturingShortcutTarget = null;
  captureHeldTokens = new Set();
  captureBestTokens = [];
  captureFinalizing = false;

  for (const button of [els.captureShortcut, els.capturePasteShortcut]) {
    if (button) button.classList.remove('shortcut-capture--recording');
  }
  refreshShortcutLabels();
}

async function finalizeShortcutCapture() {
  if (captureFinalizing) return;
  const target = capturingShortcutTarget;
  const tokens = captureBestTokens.slice();
  if (!target) return;
  captureFinalizing = true;

  if (!isValidCapturedShortcut(tokens)) {
    showToast(t('invalidShortcut'));
    stopShortcutCapture();
    return;
  }

  stopShortcutCapture();
  try {
    renderState(await window.flowLocal.updateSettings({ [target]: tokens.join('+') }));
  } catch (error) {
    showToast(error?.message || t('invalidShortcut'));
  }
}

function handleShortcutCaptureKeydown(event) {
  if (!capturingShortcutTarget) return;
  event.preventDefault();
  event.stopPropagation();

  const token = shortcutTokenFromEvent(event);
  if (token === 'escape') {
    stopShortcutCapture();
    return;
  }
  if (!token) return;

  captureHeldTokens.add(token);
  const ordered = orderShortcutTokens(captureHeldTokens);
  if (ordered.length >= captureBestTokens.length) {
    captureBestTokens = ordered;
  }

  const button = getCaptureButton(capturingShortcutTarget);
  const keysEl = button.querySelector('.shortcut-capture__keys');
  if (keysEl) {
    keysEl.textContent =
      formatShortcut(captureBestTokens.join('+'), lastState?.platform) || t('recordingShortcut');
  }
}

function handleShortcutCaptureKeyup(event) {
  if (!capturingShortcutTarget) return;
  event.preventDefault();
  event.stopPropagation();

  const token = shortcutTokenFromEvent(event);
  if (token) captureHeldTokens.delete(token);
  if (captureBestTokens.length > 0 && isValidCapturedShortcut(captureBestTokens)) {
    finalizeShortcutCapture();
  }
}

function setDictionaryOpen(open) {
  if (dictionaryCloseTimer) {
    window.clearTimeout(dictionaryCloseTimer);
    dictionaryCloseTimer = null;
  }
  dictionaryOpen = Boolean(open);
  document.body.classList.toggle('dictionary-open', dictionaryOpen);

  if (dictionaryOpen) {
    resetDictionaryForm(getDictionaryFallbackLanguages());
    els.dictionaryWindow.classList.remove('hidden');
    els.dictionaryBackdrop.classList.remove('hidden');
    window.requestAnimationFrame(() => {
      els.dictionaryWindow.classList.add('is-visible');
      els.dictionaryBackdrop.classList.add('is-visible');
      els.dictionaryWindow.setAttribute('aria-hidden', 'false');
      els.dictionarySourceInput.focus();
    });
    return;
  }

  els.dictionaryWindow.classList.remove('is-visible');
  els.dictionaryBackdrop.classList.remove('is-visible');
  els.dictionaryWindow.setAttribute('aria-hidden', 'true');
  dictionaryCloseTimer = window.setTimeout(() => {
    els.dictionaryWindow.classList.add('hidden');
    els.dictionaryBackdrop.classList.add('hidden');
    dictionaryCloseTimer = null;
  }, SETTINGS_CLOSE_DELAY_MS);
}

function renderDictionarySourceChips() {
  for (const chip of els.dictionarySourceBox.querySelectorAll('.chip-input__chip')) {
    chip.remove();
  }

  const fragment = document.createDocumentFragment();
  dictionarySourceChips.forEach((source, index) => {
    const chip = document.createElement('span');
    chip.className = 'chip-input__chip';

    const text = document.createElement('span');
    text.className = 'chip-input__text';
    text.textContent = source;
    text.title = source;

    const removeButton = document.createElement('button');
    removeButton.type = 'button';
    removeButton.className = 'chip-input__remove';
    removeButton.dataset.chipIndex = String(index);
    removeButton.setAttribute('aria-label', `${t('remove')}: ${source}`);
    removeButton.innerHTML = '&times;';

    chip.append(text, removeButton);
    fragment.append(chip);
  });
  els.dictionarySourceBox.insertBefore(fragment, els.dictionarySourceInput);

  els.dictionarySourceInput.setAttribute(
    'placeholder',
    t(dictionarySourceChips.length ? 'dictionarySourceInputMore' : 'dictionarySourceInputPlaceholder'),
  );
}

function commitDictionarySourceInput() {
  const parts = String(els.dictionarySourceInput.value || '')
    .split(/\r\n|\n|\r|,/)
    .map((part) => part.trim())
    .filter(Boolean);
  els.dictionarySourceInput.value = '';
  // Skipping the re-render when there is nothing to add keeps a pending
  // chip-remove click alive (blur fires before click on the × button).
  if (!parts.length) {
    return;
  }

  const seen = new Set(dictionarySourceChips.map((source) => source.toLocaleLowerCase(locale())));
  for (const part of parts) {
    const key = part.toLocaleLowerCase(locale());
    if (seen.has(key)) continue;
    seen.add(key);
    dictionarySourceChips.push(part);
  }
  renderDictionarySourceChips();
}

function resetDictionaryForm(fallbackLanguages) {
  els.dictionaryForm.reset();
  dictionarySourceChips = [];
  editingDictionaryRuleId = null;
  els.dictionaryLangPt.checked = fallbackLanguages.includes('pt');
  els.dictionaryLangEn.checked = fallbackLanguages.includes('en');
  renderDictionarySourceChips();
  applyTranslations();
  updateDictionaryFormMode();
  if (lastState) {
    renderDictionary(lastState.dictionaryEntries);
  }
}

function selectedDictionaryLanguages(fallbackLanguages) {
  const list = [els.dictionaryLangPt.checked ? 'pt' : null, els.dictionaryLangEn.checked ? 'en' : null].filter(Boolean);
  return list.length > 0 ? list : fallbackLanguages;
}

function setupHandlers() {
  const updateDetectionLanguages = async (languages) => {
    const selected = [...new Set(languages.map((code) => String(code || '').trim().toLowerCase()).filter(Boolean))];
    if (selected.length === 0) {
      showToast(t('keepOneDetectionLanguage'));
      return;
    }

    renderState(await window.flowLocal.updateSettings({ allowedLanguages: selected }));
  };

  els.detectionLanguageDefaults.addEventListener('click', (event) => {
    const button = event.target.closest('[data-detection-remove]');
    if (!button) {
      return;
    }

    const code = button.getAttribute('data-detection-remove');
    const next = getSelectedDetectionLanguages().filter((language) => language !== code);
    updateDetectionLanguages(next);
  });

  els.detectionLanguageList.addEventListener('click', (event) => {
    const button = event.target.closest('[data-detection-add]');
    if (!button) {
      return;
    }

    const code = button.getAttribute('data-detection-add');
    updateDetectionLanguages([...getSelectedDetectionLanguages(), code]);
  });

  els.toggleDetectionLanguages.addEventListener('click', () => {
    detectionLanguagesExpanded = !detectionLanguagesExpanded;
    if (!detectionLanguagesExpanded) {
      els.detectionLanguageSearch.value = '';
    }
    renderDetectionLanguages();
    if (detectionLanguagesExpanded) {
      els.detectionLanguageSearch.focus();
    }
  });
  els.detectionLanguageSearch.addEventListener('input', renderDetectionLanguages);

  els.interfaceLanguageSearch.addEventListener('input', renderInterfaceLanguages);
  els.interfaceLanguageList.addEventListener('click', async (event) => {
    const button = event.target.closest('[data-interface-language]');
    if (!button) return;
    const nextLanguage = button.getAttribute('data-interface-language');
    if (nextLanguage && nextLanguage !== locale()) {
      renderState(await window.flowLocal.updateSettings({ interfaceLanguage: nextLanguage }));
    }
  });

  let resetStatsConfirmTimer = null;
  const restoreResetStatsButton = () => {
    if (resetStatsConfirmTimer) {
      window.clearTimeout(resetStatsConfirmTimer);
      resetStatsConfirmTimer = null;
    }
    delete els.resetStats.dataset.confirming;
    els.resetStats.textContent = t('resetAverage');
  };
  els.resetStats.addEventListener('click', async () => {
    if (els.resetStats.dataset.confirming !== 'true') {
      els.resetStats.dataset.confirming = 'true';
      els.resetStats.textContent = t('confirmReset');
      resetStatsConfirmTimer = window.setTimeout(restoreResetStatsButton, 3000);
      return;
    }
    restoreResetStatsButton();
    renderState(await window.flowLocal.resetModelStats());
  });

  els.openRouterKeyForm.addEventListener('submit', async (event) => {
    event.preventDefault();
    const apiKey = (els.openRouterApiKey.value || '').trim();
    if (!apiKey) {
      showToast(t('apiKeyMissing'));
      return;
    }

    try {
      cloudKeyEditOpen = false;
      renderState(await window.flowLocal.saveOpenRouterApiKey(apiKey));
      els.openRouterApiKey.value = '';
      if (!lastState?.cloudPrivacyNoticeAccepted) {
        setCloudPrivacyOpen(true);
      } else {
        renderState(await window.flowLocal.updateSettings({ cloudTranscriptionEnabled: true }));
      }
    } catch (error) {
      showToast(error?.message || t('apiKeyMissing'));
    }
  });

  els.changeOpenRouterKey.addEventListener('click', () => {
    cloudKeyEditOpen = true;
    renderCache.cloudModels = '';
    if (lastState) renderCloudModels(lastState);
    els.openRouterApiKey.focus();
  });

  els.cancelOpenRouterKeyChange.addEventListener('click', () => {
    cloudKeyEditOpen = false;
    els.openRouterApiKey.value = '';
    renderCache.cloudModels = '';
    if (lastState) renderCloudModels(lastState);
  });

  els.clearOpenRouterKey.addEventListener('click', async () => {
    cloudSettingsSetupOpen = false;
    cloudKeyEditOpen = false;
    renderCache.cloudModels = '';
    renderState(await window.flowLocal.clearOpenRouterApiKey());
  });

  els.refreshOpenRouterModels.addEventListener('click', async () => {
    renderState(await window.flowLocal.refreshOpenRouterModels());
  });

  els.cloudTranscriptionEnabled.addEventListener('change', async () => {
    if (!els.cloudTranscriptionEnabled.checked) {
      cloudSettingsSetupOpen = false;
      cloudKeyEditOpen = false;
      renderCache.cloudModels = '';
      renderState(await window.flowLocal.updateSettings({ cloudTranscriptionEnabled: false }));
      return;
    }

    if (!lastState?.openRouterApiKeyConfigured) {
      cloudSettingsSetupOpen = true;
      cloudKeyEditOpen = true;
      renderCache.cloudModels = '';
      renderCloudModels(lastState);
      els.openRouterApiKey.focus();
      showToast(t('cloudRequiresKey'));
      return;
    }

    if (lastState?.cloudPrivacyNoticeAccepted) {
      cloudSettingsSetupOpen = false;
      renderState(await window.flowLocal.updateSettings({ cloudTranscriptionEnabled: true }));
      return;
    }

    els.cloudTranscriptionEnabled.checked = false;
    setCloudPrivacyOpen(true);
  });

  els.cancelCloudPrivacy.addEventListener('click', () => {
    setCloudPrivacyOpen(false);
    cloudSettingsSetupOpen = false;
    cloudKeyEditOpen = false;
    renderCache.cloudModels = '';
    els.cloudTranscriptionEnabled.checked = false;
    if (lastState) renderCloudModels(lastState);
  });

  els.cloudPrivacyBackdrop.addEventListener('click', () => {
    setCloudPrivacyOpen(false);
    cloudSettingsSetupOpen = false;
    cloudKeyEditOpen = false;
    renderCache.cloudModels = '';
    els.cloudTranscriptionEnabled.checked = false;
    if (lastState) renderCloudModels(lastState);
  });

  els.acceptCloudPrivacy.addEventListener('click', async () => {
    setCloudPrivacyOpen(false);
    cloudSettingsSetupOpen = false;
    cloudKeyEditOpen = false;
    renderState(await window.flowLocal.updateSettings({
      cloudPrivacyNoticeAccepted: true,
      cloudTranscriptionEnabled: true,
    }));
  });

  els.updateAction.addEventListener('click', async () => {
    const action = els.updateAction.dataset.updateAction || 'check';
    if (action === 'update') {
      installAfterDownload = true;
      const update = await window.flowLocal.downloadUpdate();
      renderUpdateState(update);
      if (update?.status !== 'downloaded' && update?.status !== 'downloading') {
        installAfterDownload = false;
      }
      return;
    }
    if (action === 'install') {
      await window.flowLocal.installUpdate();
      return;
    }
    if (action === 'open-download') {
      renderUpdateState(await window.flowLocal.openUpdateDownload());
      return;
    }
    renderUpdateState(await window.flowLocal.checkForUpdates());
  });
  els.openSettings.addEventListener('click', () => setSettingsOpen(true));
  els.closeSettings.addEventListener('click', () => setSettingsOpen(false));
  els.settingsBackdrop.addEventListener('click', () => setSettingsOpen(false));
  els.openAdvanced.addEventListener('click', () => setAdvancedOpen(true));
  els.closeAdvanced.addEventListener('click', () => setAdvancedOpen(false));
  els.advancedBackdrop.addEventListener('click', () => setAdvancedOpen(false));
  els.openDictionary.addEventListener('click', () => setDictionaryOpen(true));
  els.closeDictionary.addEventListener('click', () => setDictionaryOpen(false));
  els.dictionaryBackdrop.addEventListener('click', () => setDictionaryOpen(false));

  els.dictionarySourceBox.addEventListener('click', (event) => {
    const removeButton = event.target.closest('[data-chip-index]');
    if (removeButton) {
      dictionarySourceChips.splice(Number(removeButton.dataset.chipIndex), 1);
      renderDictionarySourceChips();
      els.dictionarySourceInput.focus();
      return;
    }
    if (event.target === els.dictionarySourceBox) {
      els.dictionarySourceInput.focus();
    }
  });

  els.dictionarySourceInput.addEventListener('keydown', (event) => {
    if (event.isComposing) {
      return;
    }
    if (event.key === 'Enter' || event.key === ',') {
      event.preventDefault();
      commitDictionarySourceInput();
      return;
    }
    if (event.key === 'Backspace' && !els.dictionarySourceInput.value && dictionarySourceChips.length) {
      dictionarySourceChips.pop();
      renderDictionarySourceChips();
    }
  });

  els.dictionarySourceInput.addEventListener('blur', () => {
    commitDictionarySourceInput();
  });

  els.dictionarySourceInput.addEventListener('paste', (event) => {
    const text = event.clipboardData?.getData('text') || '';
    if (!/[\n\r,]/.test(text)) {
      return;
    }
    event.preventDefault();
    els.dictionarySourceInput.value = `${els.dictionarySourceInput.value}${text}`;
    commitDictionarySourceInput();
  });
  els.dictionarySearch.addEventListener('input', () => {
    dictionaryFilter = els.dictionarySearch.value || '';
    if (lastState) renderDictionary(lastState.dictionaryEntries);
  });

  els.showOverlayBar.addEventListener('change', async () => {
    renderState(await window.flowLocal.updateSettings({ showOverlayBar: els.showOverlayBar.checked }));
  });
  els.launchAtLogin.addEventListener('change', async () => {
    renderState(await window.flowLocal.updateSettings({ launchAtLogin: els.launchAtLogin.checked }));
  });
  els.soundEffectsEnabled.addEventListener('change', async () => {
    renderState(await window.flowLocal.updateSettings({ soundEffectsEnabled: els.soundEffectsEnabled.checked }));
  });
  els.keepAllTranscriptions.addEventListener('change', async () => {
    renderState(await window.flowLocal.updateSettings({
      keepAllTranscriptions: els.keepAllTranscriptions.checked,
    }));
  });
  els.transcribeCancelledRecordings.addEventListener('change', async () => {
    renderState(await window.flowLocal.updateSettings({
      transcribeCancelledRecordings: els.transcribeCancelledRecordings.checked,
    }));
  });
  els.autoEnableHandsFreeMode.addEventListener('change', async () => {
    renderState(await window.flowLocal.updateSettings({
      autoEnableHandsFreeMode: els.autoEnableHandsFreeMode.checked,
    }));
  });
  els.duckAudio.addEventListener('change', async () => {
    renderState(await window.flowLocal.updateSettings({ duckAudioEnabled: els.duckAudio.checked }));
  });
  els.startHidden.addEventListener('change', async () => {
    renderState(await window.flowLocal.updateSettings({ startHidden: els.startHidden.checked }));
  });
  els.resetOverlayPosition.addEventListener('click', async () => {
    renderState(await window.flowLocal.resetOverlayPosition());
    showToast(t('overlayPositionReset'));
  });

  els.overlayOpacity.addEventListener('input', () => {
    els.overlayOpacityValue.textContent = `${els.overlayOpacity.value}%`;
    window.flowLocal.previewOverlayStyle({ overlayOpacity: Number(els.overlayOpacity.value) });
  });
  els.overlayOpacity.addEventListener('change', async () => {
    renderState(await window.flowLocal.updateSettings({ overlayOpacity: Number(els.overlayOpacity.value) }));
  });
  els.overlayScale.addEventListener('input', () => {
    els.overlayScaleValue.textContent = `${els.overlayScale.value}%`;
    window.flowLocal.previewOverlayStyle({ overlayScale: Number(els.overlayScale.value) });
  });
  els.overlayScale.addEventListener('change', async () => {
    renderState(await window.flowLocal.updateSettings({ overlayScale: Number(els.overlayScale.value) }));
  });
  els.overlayDynamicSize.addEventListener('change', async () => {
    renderState(await window.flowLocal.updateSettings({ overlayDynamicSize: els.overlayDynamicSize.checked }));
  });

  els.captureShortcut.addEventListener('click', () => startShortcutCapture('shortcut'));
  els.capturePasteShortcut.addEventListener('click', () => startShortcutCapture('pasteLastShortcut'));
  // Capture phase so we intercept the keys before the app's other shortcuts/handlers.
  window.addEventListener('keydown', handleShortcutCaptureKeydown, true);
  window.addEventListener('keyup', handleShortcutCaptureKeyup, true);
  // Clicking anywhere outside the active capture button cancels recording.
  window.addEventListener(
    'mousedown',
    (event) => {
      if (!capturingShortcutTarget) return;
      const activeButton = getCaptureButton(capturingShortcutTarget);
      if (activeButton && activeButton.contains(event.target)) return;
      stopShortcutCapture();
    },
    true,
  );

  const applyHistoryFilter = () => {
    historyFilter = els.historySearch.value || '';
    els.historySearchClear.classList.toggle('hidden', !historyFilter);
    if (lastState) renderHistory(lastState.history, lastState.historyTotal);
  };
  let historySearchDebounce = null;
  els.historySearch.addEventListener('input', () => {
    els.historySearchClear.classList.toggle('hidden', !els.historySearch.value);
    // Debounced: re-rendering the full list on every keystroke gets slow once
    // "keep all transcriptions" grows the history into the thousands.
    if (historySearchDebounce) window.clearTimeout(historySearchDebounce);
    historySearchDebounce = window.setTimeout(applyHistoryFilter, 150);
  });
  els.historySearchClear.addEventListener('click', () => {
    els.historySearch.value = '';
    applyHistoryFilter();
    els.historySearch.focus();
  });

  els.exportHistory.addEventListener('click', async () => {
    const result = await window.flowLocal.exportHistory();
    if (result?.status === 'saved') {
      showToast(template('historyExported', { count: result.count }));
    } else if (result?.status === 'empty') {
      showToast(t('historyExportEmpty'));
    } else if (result?.status === 'error') {
      showToast(template('exportFailed', { message: result.message || '' }));
    }
  });

  els.historyList.addEventListener('click', async (event) => {
    const deleteButton = event.target.closest('[data-history-delete]');
    if (deleteButton) {
      const entry = renderedHistory[Number(deleteButton.getAttribute('data-history-delete'))];
      if (!entry) return;
      renderState(
        await window.flowLocal.deleteHistoryEntry({ timestamp: entry.timestamp, text: entry.text }),
      );
      return;
    }

    const button = event.target.closest('[data-history-index]');
    if (!button) return;
    const entry = renderedHistory[Number(button.getAttribute('data-history-index'))];
    if (!entry) return;
    await window.flowLocal.copyText(entry.text);
    const originalLabel = button.textContent;
    button.textContent = t('copied');
    window.setTimeout(() => {
      if (button.isConnected) button.textContent = originalLabel;
    }, 1200);
  });

  els.dictionaryForm.addEventListener('submit', async (event) => {
    event.preventDefault();
    commitDictionarySourceInput();
    const sources = [...dictionarySourceChips];
    const target = els.dictionaryTarget.value ?? '';
    const fallbackLanguages = getDictionaryFallbackLanguages();
    const languages = selectedDictionaryLanguages(fallbackLanguages);

    // An empty target is allowed: the rule deletes the matched words from the output.
    if (!sources.length) {
      showToast(t('fillRuleError'));
      els.dictionarySourceInput.focus();
      return;
    }

    const wasEditing = Boolean(editingDictionaryRuleId);
    const previousIds = new Set((lastState?.dictionaryEntries || []).map((entry) => entry.id));
    const currentEntries = [...(lastState?.dictionaryEntries || [])];
    const nextEntry = { id: editingDictionaryRuleId || undefined, sources, target, languages };
    const nextEntries = editingDictionaryRuleId
      ? currentEntries.map((entry) => (entry.id === editingDictionaryRuleId ? nextEntry : entry))
      : [...currentEntries, nextEntry];

    renderState(await window.flowLocal.updateSettings({ dictionaryEntries: nextEntries }));
    resetDictionaryForm(languages);
    els.dictionarySourceInput.focus();

    if (!wasEditing) {
      const added = (lastState?.dictionaryEntries || []).find((entry) => !previousIds.has(entry.id));
      const row = added ? els.dictionaryList.querySelector(`[data-id="${CSS.escape(added.id)}"]`) : null;
      if (row) {
        row.classList.add('dictionary-item--new');
        row.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
      }
    }
  });

  els.dictionaryList.addEventListener('click', async (event) => {
    const editButton = event.target.closest('[data-dictionary-edit]');
    if (editButton) {
      const entry = (lastState?.dictionaryEntries || []).find((item) => item.id === editButton.getAttribute('data-dictionary-edit'));
      if (!entry) return;
      editingDictionaryRuleId = entry.id;
      dictionarySourceChips = [...(entry.sources || [])];
      els.dictionarySourceInput.value = '';
      els.dictionaryTarget.value = entry.target ?? '';
      els.dictionaryLangPt.checked = (entry.languages || []).includes('pt');
      els.dictionaryLangEn.checked = (entry.languages || []).includes('en');
      renderDictionarySourceChips();
      applyTranslations();
      updateDictionaryFormMode();
      renderDictionary(lastState?.dictionaryEntries);
      els.dictionaryWindow.querySelector('.dialog-window__body')?.scrollTo({ top: 0, behavior: 'smooth' });
      els.dictionarySourceInput.focus({ preventScroll: true });
      return;
    }

    const removeButton = event.target.closest('[data-dictionary-remove]');
    if (!removeButton) return;

    const entryId = removeButton.getAttribute('data-dictionary-remove');
    renderState(await window.flowLocal.updateSettings({
      dictionaryEntries: (lastState?.dictionaryEntries || []).filter((entry) => entry.id !== entryId),
    }));
    if (editingDictionaryRuleId === entryId) {
      resetDictionaryForm(getDictionaryFallbackLanguages());
    }
  });

  els.cancelDictionaryEdit.addEventListener('click', () => {
    resetDictionaryForm(getDictionaryFallbackLanguages());
  });

  els.exportDictionary.addEventListener('click', async () => {
    const result = await window.flowLocal.exportDictionary();
    if (result?.status === 'saved') {
      showToast(template('dictionaryExported', { count: result.count }));
    } else if (result?.status === 'empty') {
      showToast(t('dictionaryExportEmpty'));
    } else if (result?.status === 'error') {
      showToast(template('exportFailed', { message: result.message || '' }));
    }
  });

  els.importDictionary.addEventListener('click', async () => {
    const result = await window.flowLocal.importDictionary();
    if (result?.status === 'imported') {
      renderState(await window.flowLocal.getState());
      showToast(template('dictionaryImported', { count: result.count }));
    } else if (result?.status === 'none') {
      showToast(t('dictionaryImportNone'));
    } else if (result?.status === 'invalid') {
      showToast(t('dictionaryImportInvalid'));
    }
  });

  window.addEventListener('keydown', (event) => {
    if ((event.ctrlKey || event.metaKey) && String(event.key).toLowerCase() === 'f') {
      event.preventDefault();
      if (dictionaryOpen) {
        els.dictionarySearch.focus();
        els.dictionarySearch.select();
      } else if (!settingsOpen && !advancedOpen) {
        els.historySearch.focus();
        els.historySearch.select();
      }
      return;
    }
    if (event.key !== 'Escape') {
      return;
    }
    // While recording a shortcut, Esc is handled by the capture listener (it cancels
    // recording) and never reaches here because that listener stops propagation.
    if (dictionaryOpen) {
      if (editingDictionaryRuleId) {
        resetDictionaryForm(getDictionaryFallbackLanguages());
        return;
      }
      setDictionaryOpen(false);
      return;
    }
    if (advancedOpen) {
      setAdvancedOpen(false);
      return;
    }
    if (settingsOpen) {
      setSettingsOpen(false);
    }
  });
}

async function bootstrap() {
  initTheme();
  renderState(await window.flowLocal.getState());
  window.flowLocal.onStateUpdate((state) => renderState(state));
  window.flowLocal.onUpdateStatus((update) => renderUpdateState(update));
  setupHandlers();

  try {
    renderUpdateState(await window.flowLocal.getUpdateState());
  } catch (_error) {
    // Update channel is optional; ignore if unavailable.
  }
}

bootstrap();