// =============================================================================
// 文件来源：从 src/main-old.js 拆分而来（Vue 应用主体）
// 实时 ASR 链路拆到 ./asr/realtime-asr-pipeline.js；
// 录音详情高级操作（重处理/转写编辑/说话人/状态/标记/轮询）拆到
// ./composables/useRecordingOperations.js。
//
// 与原代码（main-old.js）相比的【行为差异】，需在迁移/回归时特别注意：
//
// A. 说话人/重处理相关状态改为“单一数据源 + 依赖注入”（2024 重构修复）
//    - 原代码：speakerMap / highlightedSpeaker / showSpeakerModal /
//      speakerSuggestions / regenerateSummaryAfterSpeakerUpdate / asrReprocessOptions
//      等只在 main.js setup 内部定义一份，openSpeakerModal/saveSpeakerNames/
//      highlightSpeakerInTranscript 等方法直接闭包读写同一份 ref。
//    - 拆分初版：useRecordingOperations 内部又创建了一份同名 ref，导致
//      main.js 的 processedTranscription / highlightedTranscript / handleClickAway
//      读到的是 main.js 那份（空），而 composable 的方法写的是 composable 那份
//      → 出现“名字不显示 / 高亮不渲染 / 点击外部不收起建议”4 个回归。
//    - 现行做法（方案 B）：这些 ref 统一在 main.js setup 顶部定义，作为
//      依赖注入传给 useRecordingOperations；composable 内部不再创建同名 ref，
//      全部读写注入的那份。由此 processedTranscription（main.js）与
//      openSpeakerModal（composable）操作同一份 speakerMap，4 个回归全部修复。
//    - 副作用：regenerateSummaryAfterSpeakerUpdate 默认值由 true 改为 false
//      （对齐原 composable 默认，保持修复前实际生效行为）；asrReprocessOptions
//      由 reactive 改为 ref（对齐 composable 类型，模板自动解包，v-model 正常）。
//
// B. resumeRecording 不再设置 resetTranscriptionFlag（时序变化，结果等价）
//    - 原代码：resume 时设 resetTranscriptionFlag=true，等下一条 ws 消息进来
//      时 getJsonMessage 再 clearRealtimePipeline()。
//    - 新代码：resume 开头直接 resetRealtimeTranscript()，立刻清。
//    - 结果等价，时序不同（更干净）。
//
// C. continueDraftRecording 现在会调 resetRealtimeTranscript（更彻底）
//    - 原代码：加载草稿只重置 segmentRenderStartIndex=0。
//    - 新代码：额外清空 pendingSentenceQueue 并 startNewEpoch。
//    - 基本是改进，但若依赖 pending 队列残留需注意。
//
// D. ASR 链路行为差异见 ./asr/realtime-asr-pipeline.js 文件头注释
//    （ws 断连处理、stopRecording 关 Recorder、correct 新增 scene、
//      wsconnecter getScene、appendInt16 性能、dispose 屏障）。
//
// E. 隐式契约：以下 23 个 ref（speakerMap、highlightedSpeaker、showSpeakerModal、
//    showResetModal、showReprocessModal、showTextEditorModal、showAsrEditorModal、
//    editingTranscriptionContent、editingSegments、availableSpeakers、
//    speakerDisplayMap、modalSpeakers、regenerateSummaryAfterSpeakerUpdate、
//    speakerSuggestions、loadingSuggestions、activeSpeakerInput、isAutoIdentifying、
//    currentSpeakerGroupIndex、speakerGroups、recordingToReset、reprocessType、
//    reprocessRecording、asrReprocessOptions）必须在 useRecordingOperations(...)
//    调用之前声明（否则 TDZ）。当前都满足（refs 在 ~237-300，调用在 ~1517）。
//    未来重构请勿把这些 ref 挪到调用点之后。
// =============================================================================
import * as Vue from "vue";
import "./csrf-refresh.js";
import "./i18n.js";
import { RealtimeAsrPipeline } from './asr/realtime-asr-pipeline.js';
import { EasyMDE, marked, assertIndexVendorGlobals } from './vendor-globals.js';
import { useRecordingOperations } from './composables/useRecordingOperations.js';
import * as recordingState from './composables/useRecordingState.js';
import { useSidebar } from './composables/useSidebar.js';

const { createApp, ref, reactive, computed, onMounted, watch, nextTick } = Vue;
assertIndexVendorGlobals();
// let isfilemode = false;

// Wait for the DOM to be fully loaded before mounting the Vue app
//------------------- 页面启动与 Vue 初始化 start------------------
document.addEventListener("DOMContentLoaded", async () => {
  // Initialize i18n before creating Vue app
  if (window.i18n) {
    const appElement = document.getElementById("app");
    const userLang =
      appElement?.dataset.userLanguage ||
      localStorage.getItem("preferredLanguage") ||
      "en";
    await window.i18n.init(userLang);
    console.log("i18n initialized with language:", userLang);
  }

  // CSRF Token Integration with Vue.js
  const csrfToken = ref(
    document.querySelector('meta[name="csrf-token"]')?.getAttribute("content")
  );

  // Register Service Worker only when the browser accepts the current TLS context.
  if ("serviceWorker" in navigator && window.isSecureContext && window.location.hostname !== "localhost") {
    window.addEventListener("load", () => {
      navigator.serviceWorker
        .register("/tool/speakr/static/sw.js")
        .then((registration) => {
          console.log(
            "ServiceWorker registration successful with scope: ",
            registration.scope
          );
        })
        .catch((error) => {
          console.log("ServiceWorker registration failed: ", error);
        });
    });
  }

  // Create a safe t function that's always available
  const safeT = (key, params = {}) => {
    if (!window.i18n || !window.i18n.t) {
      return key; // Return key as fallback without warning during initial render
    }
    return window.i18n.t(key, params);
  };
  let realtimeAsrPipeline = null;
  let systemRealtimeAsrPipeline = null;
  //--------------------页面启动与 Vue 初始化 end------------------

  //------------------- Vue 应用主体定义 start------------------
  const app = createApp({
    setup() {
      let isRec = false;
      //------------------- 响应式状态与实时转写基础状态 start------------------
      // --- Core State ---
      // 新增说话人占位
      let lastSpeaker = "";
      let configwords = "";
      const currentView = ref("upload"); // 'upload' or 'recording'
      const dragover = ref(false);
      const recordings = ref([]);
      const selectedRecording = ref(null);
      const selectedTab = ref("summary"); // 'summary' or 'notes'
      const searchQuery = ref("");
      const isLoadingRecordings = ref(true);
      const globalError = ref(null);

      // Advanced filter state - 已移至 useSidebar

      // --- Pagination State ---
      const currentPage = ref(1);
      const perPage = ref(25);
      const totalRecordings = ref(0);
      const totalPages = ref(0);
      const hasNextPage = ref(false);
      const hasPrevPage = ref(false);
      const isLoadingMore = ref(false);
      // searchDebounceTimer 已移至 useSidebar
      const searchDebounceTimer = ref(null);
      // --- Enhanced Search & Organization State ---
      // sortBy 已移至 useSidebar
      const selectedTagFilter = ref(null); // For filtering by clicked tag

      // --- UI State ---
      const browser = ref("unknown");
      // isSidebarCollapsed 已移至 useSidebar
      const searchTipsExpanded = ref(false);
      const isUserMenuOpen = ref(false);
      const isDarkMode = ref(false);
      const currentColorScheme = ref("blue");
      const showColorSchemeModal = ref(false);
      const windowWidth = ref(window.innerWidth);
      const mobileTab = ref("transcript");
      const isMetadataExpanded = ref(false);

      // --- i18n State ---
      const currentLanguage = ref("en");
      const currentLanguageName = ref("English");
      const availableLanguages = ref([]);
      const showLanguageMenu = ref(false);

      // --- Upload State ---
      const uploadQueue = ref([]);
      const currentlyProcessingFile = ref(null);
      const processingProgress = ref(0);
      const processingMessage = ref("");
      const isProcessingActive = ref(false);
      const pollInterval = ref(null);
      const progressPopupMinimized = ref(false);
      const progressPopupClosed = ref(false);
      const maxFileSizeMB = ref(250); // Default value, will be updated from API
      const chunkingEnabled = ref(true); // Default value, will be updated from API
      const chunkingMode = ref("size"); // 'size' or 'duration', will be updated from API
      const chunkingLimit = ref(20); // Value in MB or seconds, will be updated from API
      const chunkingLimitDisplay = ref("20MB"); // Human readable display, will be updated from API
      const recordingDisclaimer = ref(""); // Recording disclaimer text from admin settings

      // --- Audio Recording State ---
      // editingDraftId, editingDraftName 已移至 useSidebar
      const draftNameInput = ref(null);

      // ============== 从 useRecordingState 导入录音/ASR 状态 ==============
      const {
        isRecording,
        isStoppingRecording,
        isPausingRecording,
        is_final,
        mediaRecorder,
        audioChunks,
        audioBlobURL,
        recordingTime,
        recordingInterval,
        canRecordAudio,
        canRecordSystemAudio,
        systemAudioSupported,
        systemAudioError,
        recordingNotes,
        showSystemAudioHelp,
        asrLanguage,
        asrMinSpeakers,
        asrMaxSpeakers,
        audioContext,
        analyser,
        micAnalyser,
        systemAnalyser,
        visualizer,
        micVisualizer,
        systemVisualizer,
        animationFrameId,
        recordingMode,
        activeStreams,
        estimatedFileSize,
        fileSizeWarningShown,
        recordingQuality,
        actualBitrate,
        maxRecordingMB,
        sizeCheckInterval,
        isPaused,
        currentDraftId,
        pausedDuration,
        pausedTranscription,
        draftRecordings,
        draftsExpanded,
        asrResult,
        asrResultOnline,
        asrResultOffline,
        showRecordingDisclaimerModal,
        pendingRecordingMode,
        cleanupRecording,
        resetASRState,
      } = recordingState;

      // Advanced Options for ASR
      const showAdvancedOptions = ref(false);
      const uploadLanguage = ref(""); // Empty string for auto-detect
      const uploadMinSpeakers = ref(""); // Empty string for auto-detect
      const uploadMaxSpeakers = ref(""); // Empty string for auto-detect

      // Tag Selection
      const availableTags = ref([]);
      const selectedTagIds = ref([]); // Changed to array for multiple selection
      const uploadTagSearchFilter = ref(""); // For filtering tags in upload view
      const selectedTags = computed(() => {
        return selectedTagIds.value
          .map((tagId) => availableTags.value.find((tag) => tag.id == tagId))
          .filter(Boolean); // Filter out undefined tags
      });
      // 自动判断是否为 Markdown
      const isMarkdown = computed(() => {
        const v = analysisResult.value;
        return (
          v.includes("#") ||
          v.includes("**") ||
          v.includes("```") ||
          v.includes("* ") ||
          v.includes("- ")
        );
      });

      // 解析 Markdown → HTML
      const renderedMarkdown = Vue.computed(() => {
        return window.marked.parse(analysisResult.value || "", {
          breaks: true,
        });
      });
      // Computed property for filtered available tags in upload view
      const filteredAvailableTagsForUpload = computed(() => {
        const availableForSelection = availableTags.value.filter(
          (tag) => !selectedTagIds.value.includes(tag.id)
        );
        if (!uploadTagSearchFilter.value) return availableForSelection;

        const filter = uploadTagSearchFilter.value.toLowerCase();
        return availableForSelection.filter((tag) =>
          tag.name.toLowerCase().includes(filter)
        );
      });

      // --- Modal State ---
      const showEditModal = ref(false);
      const showDeleteModal = ref(false);
      const showEditTagsModal = ref(false);
      const selectedNewTagId = ref("");
      const tagSearchFilter = ref(""); // For filtering tags in the modal
      const showReprocessModal = ref(false);
      const showResetModal = ref(false);
      const showSpeakerModal = ref(false);
      const showShareModal = ref(false);
      const showSharesListModal = ref(false);
      const showTextEditorModal = ref(false);
      const showAsrEditorModal = ref(false);
      const editingRecording = ref(null);
      const editingTranscriptionContent = ref("");
      const editingSegments = ref([]);
      const availableSpeakers = ref([]);
      const recordingToShare = ref(null);
      const shareOptions = reactive({
        share_summary: true,
        share_notes: true,
      });
      const generatedShareLink = ref("");
      const existingShareDetected = ref(false);
      const userShares = ref([]);
      const isLoadingShares = ref(false);
      const shareToDelete = ref(null);
      const showShareDeleteModal = ref(false);
      const recordingToDelete = ref(null);
      const recordingToReset = ref(null);
      const reprocessType = ref(null); // 'transcription' or 'summary'
      const reprocessRecording = ref(null);
      const isAutoIdentifying = ref(false);
      // 【行为差异 A】原 main-old.js 用 reactive({language:"", min_speakers:null,
      // max_speakers:null})；这里改为 ref 并对齐 composable 默认（zh/1/10），
      // 以便作为依赖注入给 useRecordingOperations（composable 内部按 ref 访问
      // .value）。模板 v-model="asrReprocessOptions.language" 在 ref 下自动解包，
      // 行为正常。
      const asrReprocessOptions = ref({
        language: "zh",
        min_speakers: 1,
        max_speakers: 10,
      });
      const speakerMap = ref({});
      // 【行为差异 A】原 main.js 顶部默认是 true，但模板实际用的是
      // recordingOps.regenerateSummaryAfterSpeakerUpdate（composable 那份，默认
      // false）。修复后统一为注入的这份，默认值对齐为 false，保持修复前实际
      // 生效行为。
      const regenerateSummaryAfterSpeakerUpdate = ref(false);
      const speakerSuggestions = ref({});
      const loadingSuggestions = ref({});
      const activeSpeakerInput = ref(null);
      // 以下 4 个 ref 原本只在 composable 内部存在，方案 B 改为 main.js 定义
      // 并注入，确保 main.js 的 computed/handler 与 composable 方法同源。
      const speakerDisplayMap = ref({});
      const modalSpeakers = ref([]);
      const currentSpeakerGroupIndex = ref(-1);
      const speakerGroups = ref([]);

      // --- Inline Editing State ---
      const editingParticipants = ref(false);
      const editingMeetingDate = ref(false);
      const editingSummary = ref(false);
      const editingNotes = ref(false);
      const tempNotesContent = ref("");
      const tempSummaryContent = ref("");
      const autoSaveTimer = ref(null);
      const autoSaveDelay = 2000; // 2 seconds debounce

      // --- Markdown Editor State ---
      const notesMarkdownEditor = ref(null);
      const markdownEditorInstance = ref(null);
      const summaryMarkdownEditor = ref(null);
      const summaryMarkdownEditorInstance = ref(null);
      const recordingNotesEditor = ref(null);
      const recordingMarkdownEditorInstance = ref(null);

      // --- Transcription State ---
      const transcriptionViewMode = ref("simple"); // 'simple' or 'bubble'
      const legendExpanded = ref(false);
      const highlightedSpeaker = ref(null);

      // --- Chat State ---
      const showChat = ref(false);
      const isChatMaximized = ref(false);
      const chatMessages = ref([]);
      const chatInput = ref("");
      const isChatLoading = ref(false);
      const chatMessagesRef = ref(null);

      // --- Audio Player State ---
      const playerVolume = ref(1.0);

      // --- Column Resizing State ---
      const leftColumnWidth = ref(60); // 60% for left column (transcript)
      const rightColumnWidth = ref(40); // 40% for right column (summary/chat)
      const isResizing = ref(false);

      // --- App Configuration ---
      const useAsrEndpoint = ref(false);
      const currentUserName = ref("");
      // asrResult, asrResultOnline, asrResultOffline 从 useRecordingState 导入
      const asrResultTextarea = ref("");
      const asrResultTextareaOnline = ref("");
      const sumupResultTextarea = ref("");
      const baseInfo = ref({ name: "领导发言稿", fontSize: 40 });
      const isModalOpen = ref(false);

      const asrTextarea = ref(null);
      const analysisResult = ref("");
      const isDialogVisible = ref(false);
      const isyjDialogVisible = ref(false);
      const lastTimer = ref(0);
      const systemLastTimer = ref(0);
      const urlmsg = ref("获取链接中...");
      const urlinfo = ref("");
      const zjloding = ref(false);
      const showSpeaker = ref(true);
      const selectedScene = ref((localStorage.getItem("selectedScene") || "cg").toLowerCase() === "yl" ? "yl" : "cg");

      // --- 转录文本编辑状态 ---
      const isEditingTranscription = ref(false);
      const editableText = ref("");
      const systemAsrResult = ref("");
      const systemAsrResultOnline = ref("");
      const systemAsrResultOffline = ref("");
      const systemPausedTranscription = ref("");
      const systemEditableText = ref("");
      const systemAsrResultTextarea = ref(null);
      const systemAsrResultTextareaOnline = ref(null);
      const dualTranscriptContainer = ref(null);
      const dualTranscriptTopPercent = ref(66.67);
      const isResizingDualTranscript = ref(false);
      let dualTranscriptResizeElement = null;
      const fullRealtimeTranscription = computed(() => {
        return (
          (asrResult.value || "") +
          (asrResultOffline.value || "") +
          (asrResultOnline.value || "")
        );
      });
      const fullSystemRealtimeTranscription = computed(() => {
        return (
          (systemAsrResult.value || "") +
          (systemAsrResultOffline.value || "") +
          (systemAsrResultOnline.value || "")
        );
      });
      const isDualRealtimeTranscription = computed(() => recordingMode.value === "both");
      const combinedRealtimeTranscription = computed(() => {
        if (!isDualRealtimeTranscription.value) {
          return fullRealtimeTranscription.value;
        }

        const micText = fullRealtimeTranscription.value || "";
        const systemText = fullSystemRealtimeTranscription.value || "";
        const parts = [];
        if (micText) {
          parts.push("[MIC]\n" + micText);
        }
        if (systemText) {
          parts.push("[SYSTEM]\n" + systemText);
        }
        return parts.join("\n\n");
      });

      function updateDualTranscriptSplit(
        clientY,
        container = dualTranscriptResizeElement || dualTranscriptContainer.value
      ) {
        if (!container) return;

        const rect = container.getBoundingClientRect();
        if (!rect.height) return;

        const nextPercent = ((clientY - rect.top) / rect.height) * 100;
        dualTranscriptTopPercent.value = Math.min(80, Math.max(35, nextPercent));
      }

      function stopDualTranscriptResize() {
        if (!isResizingDualTranscript.value) return;
        isResizingDualTranscript.value = false;
        dualTranscriptResizeElement = null;
        window.removeEventListener("mousemove", onDualTranscriptResizeMove);
        window.removeEventListener("mouseup", stopDualTranscriptResize);
      }

      function onDualTranscriptResizeMove(event) {
        if (!isResizingDualTranscript.value) return;
        updateDualTranscriptSplit(event.clientY);
      }

      function startDualTranscriptResize(event) {
        if (!isDualRealtimeTranscription.value) return;
        event.preventDefault();
        dualTranscriptResizeElement =
          event.currentTarget?.closest?.(".dual-transcript-stack") ||
          event.currentTarget?.parentElement ||
          dualTranscriptContainer.value;
        isResizingDualTranscript.value = true;
        updateDualTranscriptSplit(event.clientY, dualTranscriptResizeElement);
        window.addEventListener("mousemove", onDualTranscriptResizeMove);
        window.addEventListener("mouseup", stopDualTranscriptResize);
      }
      function clearSystemRealtimeTranscript() {
        systemAsrResult.value = "";
        systemAsrResultOnline.value = "";
        systemAsrResultOffline.value = "";
        systemPausedTranscription.value = "";
        systemEditableText.value = "";
        systemLastTimer.value = 0;
      }

      function getRealtimeTranscriptionForSave() {
        return combinedRealtimeTranscription.value || "";
      }

      function getPrimaryRealtimeSourceKind() {
        if (recordingMode.value === "system") {
          return "system";
        }
        return "mic";
      }

      function syncRealtimeActiveState() {
        isRec = !!(
          realtimeAsrPipeline?.isActive() ||
          systemRealtimeAsrPipeline?.isActive()
        );
      }

      function getRealtimePipelines() {
        return [realtimeAsrPipeline, systemRealtimeAsrPipeline].filter(Boolean);
      }

      function createPipelineForSource(sourceKind, callbacks) {
        return new RealtimeAsrPipeline({
          getMicStream: () => recordingState.micStream,
          getSystemStream: () => recordingState.systemStream,
          getPausedTranscription: callbacks.getPausedTranscription,
          setPausedTranscription: callbacks.setPausedTranscription,
          getShowSpeaker: () => showSpeaker.value,
          getConfigWords: () => configwords,
          getScene: () => selectedScene.value,
          getLastTimer: () =>
            callbacks.getLastTimer ? callbacks.getLastTimer() : lastTimer.value || 0,
          setLastTimer: (value) => {
            if (callbacks.setLastTimer) {
              callbacks.setLastTimer(value);
            } else {
              lastTimer.value = value;
            }
          },
          onMainTextChange: callbacks.onMainTextChange,
          onPreviewTextChange: callbacks.onPreviewTextChange,
          onOfflineTextChange: callbacks.onOfflineTextChange,
          onActiveChange: syncRealtimeActiveState,
          onError: (error) => {
            console.error(`Realtime ASR pipeline (${sourceKind}) error:`, error);
          },
          sourceKind,
        });
      }

      function startNewRealtimeEpoch(options = {}) {
        getRealtimePipelines().forEach((pipeline) => pipeline.startNewEpoch(options));
      }

      function resetRealtimeTranscript(options = {}) {
        getRealtimePipelines().forEach((pipeline) => pipeline.resetTranscript(options));
        if (options.clearTimestampBarrier || !systemRealtimeAsrPipeline) {
          clearSystemRealtimeTranscript();
        }
      }

      function prepareRealtimeForResume() {
        getRealtimePipelines().forEach((pipeline) => pipeline.prepareForResume());
      }

      function disposeRealtimeAsrPipeline() {
        getRealtimePipelines().forEach((pipeline) => pipeline.dispose());
        realtimeAsrPipeline = null;
        systemRealtimeAsrPipeline = null;
        isRec = false;
      }

      function createRealtimeAsrPipeline() {
        disposeRealtimeAsrPipeline();

        realtimeAsrPipeline = createPipelineForSource(getPrimaryRealtimeSourceKind(), {
          getPausedTranscription: () => pausedTranscription.value || "",
          setPausedTranscription: (text) => {
            pausedTranscription.value = text || "";
          },
          onMainTextChange: (text) => {
            asrResult.value = text || "";
          },
          onPreviewTextChange: (text) => {
            asrResultOnline.value = text || "";
          },
          onOfflineTextChange: (text) => {
            asrResultOffline.value = text || "";
          },
        });

        if (recordingMode.value === "both") {
          systemRealtimeAsrPipeline = createPipelineForSource("system", {
            getPausedTranscription: () => systemPausedTranscription.value || "",
            setPausedTranscription: (text) => {
              systemPausedTranscription.value = text || "";
            },
            getLastTimer: () => systemLastTimer.value || 0,
            setLastTimer: (value) => {
              systemLastTimer.value = value;
            },
            onMainTextChange: (text) => {
              systemAsrResult.value = text || "";
            },
            onPreviewTextChange: (text) => {
              systemAsrResultOnline.value = text || "";
            },
            onOfflineTextChange: (text) => {
              systemAsrResultOffline.value = text || "";
            },
          });
        } else {
          clearSystemRealtimeTranscript();
        }

        return realtimeAsrPipeline;
      }

      function ensureRealtimeAsrPipeline() {
        if (!realtimeAsrPipeline || (recordingMode.value === "both" && !systemRealtimeAsrPipeline)) {
          return createRealtimeAsrPipeline();
        }
        if (recordingMode.value !== "both" && systemRealtimeAsrPipeline) {
          return createRealtimeAsrPipeline();
        }
        return realtimeAsrPipeline;
      }

      function startRealtimeAsrPipelines() {
        ensureRealtimeAsrPipeline();
        const started = getRealtimePipelines()
          .map((pipeline) => pipeline.start())
          .some((result) => result === 1);
        syncRealtimeActiveState();
        return started ? 1 : 0;
      }

      async function finishRealtimeAsrPipelines(timeoutMs = 20000) {
        const pipelines = getRealtimePipelines();
        await Promise.allSettled(pipelines.map((pipeline) => pipeline.finish(timeoutMs)));
        syncRealtimeActiveState();
      }

      function stopRealtimeAsrPipelines() {
        getRealtimePipelines().forEach((pipeline) => pipeline.stop());
        syncRealtimeActiveState();
      }

      function normalizeScene(scene) {
        return String(scene || "cg").trim().toLowerCase() === "yl" ? "yl" : "cg";
      }

      function setSelectedScene(scene) {
        const nextScene = normalizeScene(scene);
        if (isRecording.value || isPaused.value || isStoppingRecording.value || isRec === true) {
          showToast("录音中无法切换场景", "error");
          return;
        }
        selectedScene.value = nextScene;
        localStorage.setItem("selectedScene", nextScene);
      }
      async function waitForRealtimeCorrections(timeoutMs = 8000) {
        const pipelines = getRealtimePipelines();
        if (pipelines.length === 0) {
          return 0;
        }

        const count = pipelines.reduce(
          (total, pipeline) => total + pipeline.getPendingCorrectionCount(),
          0
        );
        if (count > 0) {
          console.log('Waiting for ' + count + ' ASR corrections...');
        }

        const results = await Promise.all(
          pipelines.map((pipeline) => pipeline.waitForCorrections(timeoutMs))
        );
        const remaining = results.reduce((total, value) => total + value, 0);
        if (remaining > 0) {
          console.warn('Timed out with ' + remaining + ' ASR corrections still pending');
        }
        return remaining;
      }

      // 暂停录音时调用：把所有未矫正的预览文本立即拿去矫正并加入 segmentList
      async function finalizeRemainingSentences(timeoutMs = 8000) {
        await Promise.all(
          getRealtimePipelines().map((pipeline) =>
            pipeline.finalizeRemainingSentences(timeoutMs)
          )
        );
      }
      //--------------------响应式状态与实时转写基础状态 end------------------

      //------------------- 计算属性与派生展示数据 start------------------
      // --- Computed Properties ---
      const isMobileScreen = computed(() => {
        return windowWidth.value < 1024;
      });

      // datePresetOptions 已移至 useSidebar

      const languageOptions = computed(() => {
        return [
          { value: "", label: t("form.autoDetect") },
          { value: "en", label: t("languages.en") },
          { value: "es", label: t("languages.es") },
          { value: "fr", label: t("languages.fr") },
          { value: "de", label: t("languages.de") },
          { value: "it", label: t("languages.it") },
          { value: "pt", label: t("languages.pt") },
          { value: "nl", label: t("languages.nl") },
          { value: "ru", label: t("languages.ru") },
          { value: "zh", label: t("languages.zh") },
          { value: "ja", label: t("languages.ja") },
          { value: "ko", label: t("languages.ko") },
        ];
      });

      const filteredRecordings = computed(() => {
        return recordings.value;
      });

      // highlightedTranscript 的高亮/转义/着色实现统一由 useRecordingOperations
      // 提供（recordingOps.highlightedTranscript），模板暴露的也是那份；
      // 此处不再保留重复实现，避免双份 computed 读到不同 speakerMap 导致显示不一致。

      const activeRecordingMetadata = computed(() => {
        if (!selectedRecording.value) return [];

        const recording = selectedRecording.value;
        const metadata = [];

        if (recording.created_at) {
          metadata.push({
            icon: "fas fa-history",
            text: formatDisplayDate(recording.created_at),
          });
        }

        if (recording.file_size) {
          metadata.push({
            icon: "fas fa-file-audio",
            text: formatFileSize(recording.file_size),
          });
        }

        if (recording.duration) {
          metadata.push({
            icon: "fas fa-clock",
            text: formatDuration(recording.duration),
          });
        }

        if (recording.original_filename) {
          const maxLength = 30;
          const truncated =
            recording.original_filename.length > maxLength
              ? recording.original_filename.substring(0, maxLength) + "..."
              : recording.original_filename;
          metadata.push({
            icon: "fas fa-file",
            text: truncated,
            fullText: recording.original_filename,
          });
        }

        // Add tags to metadata
        if (recording.tags && recording.tags.length > 0) {
          metadata.push({
            icon: "fas fa-tags",
            text: "", // Empty text since we'll render tags specially
            tags: recording.tags, // Pass the tags array
            isTagItem: true, // Flag to identify this as a tag item
          });
        }

        return metadata;
      });

      // groupedRecordings 已移至 useSidebar

      const totalInQueue = computed(() => uploadQueue.value.length);
      const completedInQueue = computed(
        () =>
          uploadQueue.value.filter(
            (item) => item.status === "completed" || item.status === "failed"
          ).length
      );
      const finishedFilesInQueue = computed(() =>
        uploadQueue.value.filter((item) =>
          ["completed", "failed"].includes(item.status)
        )
      );
      const showRecordingControls = computed(() => {
        if (currentView.value !== "recording") {
          return false;
        }

        const hasCompletedRecording =
          !isRecording.value && !isPaused.value && !!audioBlobURL.value;

        if (hasCompletedRecording) {
          return false;
        }

        if (isRecording.value || isPaused.value || isStoppingRecording.value) {
          return true;
        }

        return (
          !audioBlobURL.value &&
          (activeStreams.value.length > 0 ||
            recordingTime.value > 0 ||
            !!currentDraftId.value)
        );
      });

      const clearCompletedUploads = () => {
        uploadQueue.value = uploadQueue.value.filter(
          (item) => !["completed", "failed"].includes(item.status)
        );
      };

      const identifiedSpeakers = computed(() => {
        // Ensure we have a valid recording and transcription
        if (!selectedRecording.value?.transcription) {
          return [];
        }

        const transcription = selectedRecording.value.transcription;
        let transcriptionData;

        try {
          transcriptionData = JSON.parse(transcription);
        } catch (e) {
          transcriptionData = null;
        }

        // Updated to handle new simplified JSON format (array of segments)
        if (transcriptionData && Array.isArray(transcriptionData)) {
          // JSON format - extract speakers in order of appearance
          const speakersInOrder = [];
          const seenSpeakers = new Set();
          transcriptionData.forEach((segment) => {
            if (
              segment.speaker &&
              String(segment.speaker).trim() &&
              !seenSpeakers.has(segment.speaker)
            ) {
              seenSpeakers.add(segment.speaker);
              speakersInOrder.push(segment.speaker);
            }
          });
          return speakersInOrder; // Keep order of appearance, don't sort
        } else if (typeof transcription === "string") {
          // Plain text format - find speakers in order of appearance
          const speakerRegex = /\[([^\]]+)\]:/g;
          const speakersInOrder = [];
          const seenSpeakers = new Set();
          let match;
          while ((match = speakerRegex.exec(transcription)) !== null) {
            const speaker = match[1].trim();
            if (speaker && !seenSpeakers.has(speaker)) {
              seenSpeakers.add(speaker);
              speakersInOrder.push(speaker);
            }
          }
          return speakersInOrder; // Keep order of appearance, don't sort
        }
        return [];
      });

      // identifiedSpeakersInOrder is now just an alias since identifiedSpeakers already preserves order
      const identifiedSpeakersInOrder = computed(() => {
        return identifiedSpeakers.value;
      });

      // hasSpeakerNames 统一由 useRecordingOperations 提供（recordingOps.hasSpeakerNames），
      // 它读的 speakerMap 与本文件注入的是同一份 ref，避免双份 computed 结果不一致。

      const processedTranscription = computed(() => {
        if (!selectedRecording.value?.transcription) {
          return {
            hasDialogue: false,
            content: "",
            speakers: [],
            simpleSegments: [],
            bubbleRows: [],
          };
        }

        const transcription = selectedRecording.value.transcription;
        let transcriptionData;

        try {
          transcriptionData = JSON.parse(transcription);
        } catch (e) {
          transcriptionData = null;
        }

        // Handle new simplified JSON format (array of segments)
        if (transcriptionData && Array.isArray(transcriptionData)) {
          const wasDiarized = transcriptionData.some(
            (segment) => segment.speaker
          );

          if (!wasDiarized) {
            const segments = transcriptionData.map((segment) => ({
              sentence: segment.sentence,
              startTime: segment.start_time,
            }));
            return {
              hasDialogue: false,
              isJson: true,
              content: segments.map((s) => s.sentence).join("\n"),
              simpleSegments: segments,
              speakers: [],
              bubbleRows: [],
            };
          }

          // Extract unique speakers
          const speakers = [
            ...new Set(
              transcriptionData
                .map((segment) => segment.speaker)
                .filter(Boolean)
            ),
          ];
          const speakerColors = {};
          speakers.forEach((speaker, index) => {
            speakerColors[speaker] = `speaker-color-${(index % 8) + 1}`;
          });

          const simpleSegments = transcriptionData.map((segment) => ({
            speakerId: segment.speaker,
            speaker: speakerMap.value[segment.speaker]?.name || segment.speaker,
            sentence: segment.sentence,
            startTime: segment.start_time || segment.startTime,
            endTime: segment.end_time || segment.endTime,
            color: speakerColors[segment.speaker] || "speaker-color-1",
          }));

          const processedSimpleSegments = [];
          let lastSpeakerId = null;
          simpleSegments.forEach((segment) => {
            processedSimpleSegments.push({
              ...segment,
              showSpeaker: segment.speakerId !== lastSpeakerId,
            });
            lastSpeakerId = segment.speakerId;
          });

          const bubbleRows = [];
          let lastBubbleSpeakerId = null;
          simpleSegments.forEach((segment) => {
            if (
              bubbleRows.length === 0 ||
              segment.speakerId !== lastBubbleSpeakerId
            ) {
              bubbleRows.push({
                speaker: segment.speaker,
                color: segment.color,
                isMe:
                  segment.speaker &&
                  typeof segment.speaker === "string" &&
                  segment.speaker.toLowerCase().includes("me"),
                bubbles: [],
              });
              lastBubbleSpeakerId = segment.speakerId;
            }
            bubbleRows[bubbleRows.length - 1].bubbles.push({
              sentence: segment.sentence,
              startTime: segment.startTime || segment.start_time,
              color: segment.color,
            });
          });

          return {
            hasDialogue: true,
            isJson: true,
            segments: simpleSegments,
            simpleSegments: processedSimpleSegments,
            bubbleRows: bubbleRows,
            speakers: speakers.map((speaker) => ({
              name: speakerMap.value[speaker]?.name || speaker,
              color: speakerColors[speaker],
            })),
          };
        } else {
          // Fallback for plain text transcription
          const speakerRegex = /\[([^\]]+)\]:\s*/g;
          const hasDialogue = speakerRegex.test(transcription);

          if (!hasDialogue) {
            return {
              hasDialogue: false,
              isJson: false,
              content: transcription,
              speakers: [],
              simpleSegments: [],
              bubbleRows: [],
            };
          }

          speakerRegex.lastIndex = 0;
          const speakers = new Set();
          let match;
          while ((match = speakerRegex.exec(transcription)) !== null) {
            speakers.add(match[1]);
          }

          const speakerList = Array.from(speakers);
          const speakerColors = {};
          speakerList.forEach((speaker, index) => {
            speakerColors[speaker] = `speaker-color-${(index % 8) + 1}`;
          });

          const segments = [];
          const lines = transcription.split("\n");
          let currentSpeakerId = null;
          let currentText = "";

          for (const line of lines) {
            const speakerMatch = line.match(/^\[([^\]]+)\]:\s*(.*)$/);
            if (speakerMatch) {
              if (currentSpeakerId && currentText.trim()) {
                segments.push({
                  speakerId: currentSpeakerId,
                  speaker:
                    speakerMap.value[currentSpeakerId]?.name ||
                    currentSpeakerId,
                  sentence: currentText.trim(),
                  color: speakerColors[currentSpeakerId] || "speaker-color-1",
                });
              }
              currentSpeakerId = speakerMatch[1];
              currentText = speakerMatch[2];
            } else if (currentSpeakerId && line.trim()) {
              currentText += " " + line.trim();
            } else if (!currentSpeakerId && line.trim()) {
              segments.push({
                speakerId: null,
                speaker: null,
                sentence: line.trim(),
                color: "speaker-color-1",
              });
            }
          }

          if (currentSpeakerId && currentText.trim()) {
            segments.push({
              speakerId: currentSpeakerId,
              speaker:
                speakerMap.value[currentSpeakerId]?.name || currentSpeakerId,
              sentence: currentText.trim(),
              color: speakerColors[currentSpeakerId] || "speaker-color-1",
            });
          }

          const simpleSegments = [];
          let lastSpeakerId = null;
          segments.forEach((segment) => {
            simpleSegments.push({
              ...segment,
              showSpeaker: segment.speakerId !== lastSpeakerId,
              sentence: segment.sentence || segment.text,
            });
            lastSpeakerId = segment.speakerId;
          });

          const bubbleRows = [];
          let currentRow = null;
          segments.forEach((segment) => {
            if (!currentRow || currentRow.speakerId !== segment.speakerId) {
              if (currentRow) bubbleRows.push(currentRow);
              currentRow = {
                speakerId: segment.speakerId,
                speaker: segment.speaker,
                color: segment.color,
                bubbles: [],
                isMe:
                  segment.speaker &&
                  segment.speaker.toLowerCase().includes("me"),
              };
            }
            currentRow.bubbles.push({
              sentence: segment.sentence,
              color: segment.color,
            });
          });
          if (currentRow) bubbleRows.push(currentRow);

          return {
            hasDialogue: true,
            isJson: false,
            segments: segments,
            simpleSegments: simpleSegments,
            bubbleRows: bubbleRows,
            speakers: speakerList.map((speaker) => ({
              name: speakerMap.value[speaker]?.name || speaker,
              color: speakerColors[speaker] || "speaker-color-1",
            })),
          };
        }
      });

      //--------------------计算属性与派生展示数据 end------------------

      //------------------- 主题与配色配置 start------------------
      // --- Color Scheme Management ---
      const colorSchemes = {
        light: [
          {
            id: "blue",
            name: "Ocean Blue",
            description: "Classic blue theme with professional appeal",
            class: "",
          },
          {
            id: "emerald",
            name: "Forest Emerald",
            description: "Fresh green theme for a natural feel",
            class: "theme-light-emerald",
          },
          {
            id: "purple",
            name: "Royal Purple",
            description: "Elegant purple theme with sophistication",
            class: "theme-light-purple",
          },
          {
            id: "rose",
            name: "Sunset Rose",
            description: "Warm pink theme with gentle energy",
            class: "theme-light-rose",
          },
          {
            id: "amber",
            name: "Golden Amber",
            description: "Warm yellow theme for brightness",
            class: "theme-light-amber",
          },
          {
            id: "teal",
            name: "Ocean Teal",
            description: "Cool teal theme for tranquility",
            class: "theme-light-teal",
          },
        ],
        dark: [
          {
            id: "blue",
            name: "Midnight Blue",
            description: "Deep blue theme for focused work",
            class: "",
          },
          {
            id: "emerald",
            name: "Dark Forest",
            description: "Rich green theme for comfortable viewing",
            class: "theme-dark-emerald",
          },
          {
            id: "purple",
            name: "Deep Purple",
            description: "Mysterious purple theme for creativity",
            class: "theme-dark-purple",
          },
          {
            id: "rose",
            name: "Dark Rose",
            description: "Muted pink theme with subtle warmth",
            class: "theme-dark-rose",
          },
          {
            id: "amber",
            name: "Dark Amber",
            description: "Warm brown theme for cozy sessions",
            class: "theme-dark-amber",
          },
          {
            id: "teal",
            name: "Deep Teal",
            description: "Dark teal theme for calm focus",
            class: "theme-dark-teal",
          },
        ],
      };

      //--------------------主题与配色配置 end------------------

      //------------------- 通用工具方法与格式化逻辑 start------------------
      // --- Utility Methods ---
      const openmodel = async (e) => {
        urlmsg.value = "获取链接中...";
        isModalOpen.value = true;
        let urls = `/tool/speakr/api/external/summarize_text`;
        const response = await fetch(urls, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            input_str: asrResult.value,
            prompt_id: e ? e.id : "",
          }),
        });
        const data = await response.json();

        if (response) {
          urlinfo.value = data.string;
          urlmsg.value = "点击打开投屏页面";
          console.log(data.value, "urlinfo.value", response, data);
        }
        if (!response.ok) {
          throw new Error(data.error || "Failed to reset status");
        }
      };
      const openzjmodel = async () => {
        zjloding.value = true;
        let urls = `/tool/speakr/api/external/submit`;
        try {
          const response = await fetch(urls, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
              input_str: analysisResult.value,
            }),
          });
          const data = await response.json();

          if (response) {
            window.open(data.string, "_blank");
            zjloding.value = false;
          }
          if (!response.ok) {
            zjloding.value = false;

            throw new Error(data.error || "Failed to reset status");
          }
        } catch (error) {
          console.error("接口请求失败:", error);
          zjloding.value = false;
        }
      };
      const closeModal = () => {
        isModalOpen.value = false;
      };
      const setGlobalError = (message, duration = 7000) => {
        globalError.value = message;
        if (duration > 0) {
          setTimeout(() => {
            if (globalError.value === message) globalError.value = null;
          }, duration);
        }
      };

      const formatFileSize = (bytes) => {
        if (bytes == null || bytes === 0) return "0 Bytes";
        const k = 1024;
        const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
        if (bytes < 0) bytes = 0;
        const i =
          bytes === 0
            ? 0
            : Math.max(0, Math.floor(Math.log(bytes) / Math.log(k)));
        const size =
          i === 0 ? bytes : parseFloat((bytes / Math.pow(k, i)).toFixed(2));
        return size + " " + sizes[i];
      };

      const formatDisplayDate = (dateString) => {
        if (!dateString) return "";
        try {
          // Try to parse the date string directly first (it might already be formatted)
          let date = new Date(dateString);
          // If that fails or results in invalid date, try different approaches
          if (isNaN(date.getTime())) {
            // Try appending time if it looks like a date-only string (YYYY-MM-DD format)
            if (/^\d{4}-\d{2}-\d{2}$/.test(dateString)) {
              date = new Date(dateString + "T00:00:00");
            } else {
              // If it's already a formatted string, just return it
              return dateString;
            }
          }

          // If we still have an invalid date, return the original string
          if (isNaN(date.getTime())) {
            return dateString;
          }

          return date.toLocaleDateString("zh-CN", {
            year: "numeric",
            month: "long",
            day: "numeric",
          });
        } catch (e) {
          console.error("Error formatting date:", e);
          return dateString;
        }
      };

      const formatStatus = (status) => {
        if (!status || status === "COMPLETED") return "";
        const statusMap = {
          PENDING: t("status.queued"),
          PROCESSING: t("status.processing"),
          TRANSCRIBING: t("status.transcribing"),
          SUMMARIZING: t("status.summarizing"),
          FAILED: t("status.failed"),
          UPLOADING: t("status.uploading"),
        };
        return (
          statusMap[status] ||
          status.charAt(0).toUpperCase() + status.slice(1).toLowerCase()
        );
      };

      const getStatusClass = (status) => {
        switch (status) {
          case "PENDING":
            return "status-pending";
          case "PROCESSING":
            return "status-processing";
          case "SUMMARIZING":
            return "status-summarizing";
          case "COMPLETED":
            return "";
          case "FAILED":
            return "status-failed";
          default:
            return "status-pending";
        }
      };

      const formatTime = (seconds) => {
        const minutes = Math.floor(seconds / 60);
        const secs = seconds % 60;
        return `${minutes.toString().padStart(2, "0")}:${secs
          .toString()
          .padStart(2, "0")}`;
      };

      const formatDuration = (totalSeconds) => {
        if (totalSeconds == null || totalSeconds < 0) return "N/A";

        if (totalSeconds < 1) {
          return `${totalSeconds.toFixed(2)} seconds`;
        }

        totalSeconds = Math.round(totalSeconds);

        if (totalSeconds < 60) {
          return `${totalSeconds} sec`;
        }

        const hours = Math.floor(totalSeconds / 3600);
        const minutes = Math.floor((totalSeconds % 3600) / 60);
        const seconds = totalSeconds % 60;

        let parts = [];
        if (hours > 0) {
          parts.push(`${hours} hr`);
        }
        if (minutes > 0) {
          parts.push(`${minutes} min`);
        }
        // Only show seconds if duration is less than an hour
        if (hours === 0 && seconds > 0) {
          parts.push(`${seconds} sec`);
        }

        return parts.join(" ");
      };

      const createLocalizedRecordingFilename = () => {
        const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
        return `录音_${timestamp}.webm`;
      };

      const getDownloadFilenameFromHeaders = (
        contentDisposition,
        fallbackFilename
      ) => {
        if (!contentDisposition) {
          return fallbackFilename;
        }

        const utf8Match = /filename\*=utf-8''([^;]+)/i.exec(contentDisposition);
        if (utf8Match && utf8Match[1]) {
          return decodeURIComponent(utf8Match[1]);
        }

        const regularMatch = /filename="([^"]+)"/i.exec(contentDisposition);
        if (regularMatch && regularMatch[1]) {
          return regularMatch[1];
        }

        return fallbackFilename;
      };

      //--------------------通用工具方法与格式化逻辑 end------------------

      //------------------- 录音体积监控逻辑 start------------------
      // --- Recording Size Monitoring Functions ---
      const updateFileSizeEstimate = () => {
        if (!isRecording.value || !actualBitrate.value) return;

        // Calculate estimated size based on recording time and bitrate
        const recordingTimeSeconds = recordingTime.value;
        const estimatedBits = actualBitrate.value * recordingTimeSeconds;
        const estimatedBytes = estimatedBits / 8;
        estimatedFileSize.value = estimatedBytes;

        // Check if we're approaching the size limit
        const sizeMB = estimatedBytes / (1024 * 1024);
        const warningThresholdMB = maxRecordingMB.value * 0.8; // 80% of max size

        if (sizeMB > warningThresholdMB && !fileSizeWarningShown.value) {
          fileSizeWarningShown.value = true;
          showToast(
            `Recording size is ${formatFileSize(
              estimatedBytes
            )}. Consider stopping soon to avoid auto-stop at ${
              maxRecordingMB.value
            }MB.`,
            "fa-exclamation-triangle",
            5000
          );
        }

        // Auto-stop if we exceed the maximum size
        if (sizeMB > maxRecordingMB.value) {
          console.log(
            `Auto-stopping recording: size ${formatFileSize(
              estimatedBytes
            )} exceeds limit of ${maxRecordingMB.value}MB`
          );
          stopRecording();
          showToast(
            `Recording automatically stopped at ${formatFileSize(
              estimatedBytes
            )} to prevent excessive file size.`,
            "fa-stop-circle",
            7000
          );
        }
      };

      const startSizeMonitoring = () => {
        if (sizeCheckInterval.value) {
          clearInterval(sizeCheckInterval.value);
        }

        // Reset size monitoring state
        estimatedFileSize.value = 0;
        fileSizeWarningShown.value = false;

        // Start monitoring every 5 seconds
        sizeCheckInterval.value = setInterval(updateFileSizeEstimate, 5000);
      };

      const stopSizeMonitoring = () => {
        if (sizeCheckInterval.value) {
          clearInterval(sizeCheckInterval.value);
          sizeCheckInterval.value = null;
        }
      };
      //--------------------录音体积监控逻辑 end------------------

      //------------------- 总结提示词与外部分析流程 start------------------
      const promptVisible = ref(false);
      const promptList = ref([]);
      const recommendPromptId = ref(null);
      const recommendPromptName = ref("");
      const recommendPromptReason = ref("");
      const selectedPromptId = ref(
        localStorage.getItem("selected_prompt_id") || null
      );
      // const selectedPromptId = ref(null)
      let modelTypeForP = "";
      /** 打开弹框 */
      const openPromptModal = (e) => {
        modelTypeForP = e;
        recommendPromptId.value = null;
        recommendPromptName.value = "";
        recommendPromptReason.value = "";
        promptVisible.value = true;
        getPromptList(e);
        getRecommend();
      };

      /** 关闭弹框 */
      const closePromptModal = () => {
        promptVisible.value = false;
      };

      /** 获取 Prompt 列表 */
      const getPromptList = async (e) => {
        try {
          const res = await fetch(
            `/tool/speakr/api/external/prompts/list`,
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({ skip: 0, limit: 999 }),
            }
          );

          const data = await res.json();
          promptList.value = data.prompt_list || [];
        } catch (e) {
          console.error("提示词加载失败", e);
        }
      };
      /** 根据文本获取Prompt推荐 */
      const getRecommend = async (e) => {
        try {
          const res = await fetch(
            `/tool/speakr/api/external/recommend_prompts`,
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({ input_str: asrResult.value }),
            }
          );

          const data = await res.json();
          recommendPromptId.value = data.id;
          recommendPromptName.value = data.name;
          recommendPromptReason.value = data.reason;
        } catch (e) {
          console.error("获取推荐失败", e);
        }
      };
      /** 确认选择 */
      const confirmPromptSelection = () => {
        if (selectedPromptId.value) {
          localStorage.setItem("selected_prompt_id", selectedPromptId.value);
        }

        const selectedPrompt = promptList.value.find(
          (i) => i.id == selectedPromptId.value
        );
        console.log("选中的提示词：", selectedPrompt);
        if (modelTypeForP === "zj") {
          sumupResult(selectedPrompt);
        } else {
          openmodel(selectedPrompt);
        }

        // emit("promptSelected", selectedPrompt)

        promptVisible.value = false;
      };
      const sumupResult = async (e) => {
        isDialogVisible.value = true;
        // if (!asrResult.value) return;

        try {
          analysisResult.value = "思考中...";

          const response = await fetch(
            `/tool/speakr/api/external/summarize_text_stream`,
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({
                input_str: asrResult.value,
                // input_str: '香港火灾情况更新**  香港特区政府召开新闻发布会，通报火灾的搜救与安置最新进展。警方表示，已完成5座大厦的搜索，其余2座仍在进行中。至当天16时，火灾已造成 **156人遇难**，目前有约35人参与搜救工作，其中5人连续工作。2. **对话内容提及天气**  有用户询问“今天天气怎么样”，地点为“安康”，表明对话中涉及对当地天气的关注。3. **对话片段含非正式表达**  有用户发言“我是走开始啊不是”，语句不通顺，可能是口语化表达或输入错误，语义不明确。',

                prompt_id: e ? e.id : "",
              }),
            }
          );

          if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.error || "Failed to create share link");
          }

          // 重置结果并开始流式处理
          analysisResult.value = "";
          const reader = response.body.getReader();
          const decoder = new TextDecoder();

          while (true) {
            const { done, value } = await reader.read();
            if (done) break;

            // 解码并处理流数据
            const chunk = decoder.decode(value, { stream: true });
            const lines = chunk.split("\n");

            for (const line of lines) {
              if (line.startsWith("data: ")) {
                try {
                  const data = JSON.parse(line.slice(6));
                  if (data.content) {
                    analysisResult.value += data.content;
                  }
                  if (data.finished) {
                    console.log(analysisResult.value, "analysisResult.value");

                    showToast("总结完成!", "fa-check-circle");
                    break;
                  }
                } catch (e) {
                  console.log("解析流数据出错:", e);
                }
              }
            }
          }
        } catch (error) {
          setGlobalError(`Failed to create share link: ${error.message}`);
        }
      };
      //--------------------总结提示词与外部分析流程 end------------------

      // 日期分组与排序工具已移至 useSidebar

      //------------------- 录音详情高级操作 start------------------
      const resetCurrentFileProcessingState = () => {
        if (pollInterval.value) clearInterval(pollInterval.value);
        pollInterval.value = null;
        currentlyProcessingFile.value = null;
        processingProgress.value = 0;
        processingMessage.value = "";
      };
      // ================== 使用侧边栏组合式函数 ==================
      // useSidebar 调用已移至 loadRecordings 定义之后（避免 TDZ 错误，
      // 因为 useSidebar 内部的 loadMoreRecordings 依赖 loadRecordings）

      // 使用组合式函数管理录音高级操作
      // 【行为差异 A / 方案 B】说话人/重处理/编辑相关共享状态统一由 main.js
      // 顶部定义并注入 composable，建立单一数据源，避免 composable 内部再创建
      // 一份导致 main.js 的 computed/handler 读到空对象（拆分初版的 4 个回归
      // 根因）。注意：以下注入的 ref 必须在此调用之前已声明（见文件头 E）。
      const recordingOps = useRecordingOperations({
        recordings,
        selectedRecording,
        selectedTab,
        uploadQueue,
        currentlyProcessingFile,
        processingProgress,
        processingMessage,
        progressPopupMinimized,
        progressPopupClosed,
        identifiedSpeakers,
        processedTranscription,
        showToast,
        setGlobalError,
        resetCurrentFileProcessingState,
        // 说话人/重处理/编辑相关共享状态（单一数据源，避免 composable 内部
        // 再创建一份导致 main.js 的 computed/handler 读到空对象）
        speakerMap,
        highlightedSpeaker,
        showSpeakerModal,
        showResetModal,
        showReprocessModal,
        showTextEditorModal,
        showAsrEditorModal,
        editingTranscriptionContent,
        editingSegments,
        availableSpeakers,
        speakerDisplayMap,
        modalSpeakers,
        regenerateSummaryAfterSpeakerUpdate,
        speakerSuggestions,
        loadingSuggestions,
        activeSpeakerInput,
        isAutoIdentifying,
        currentSpeakerGroupIndex,
        speakerGroups,
        recordingToReset,
        reprocessType,
        reprocessRecording,
        asrReprocessOptions,
      });

      // 为了兼容模板中的直接调用，保留这些函数引用
      const reprocessTranscription = recordingOps.reprocessTranscription;
      const reprocessSummary = recordingOps.reprocessSummary;
      const generateSummary = recordingOps.generateSummary;
      const resetRecordingStatus = recordingOps.resetRecordingStatus;
      const confirmReprocess = recordingOps.confirmReprocess;
      const cancelReprocess = recordingOps.cancelReprocess;
      const executeReprocess = recordingOps.executeReprocess;
      const openTranscriptionEditor = recordingOps.openTranscriptionEditor;
      const openTextEditorModal = recordingOps.openTextEditorModal;
      const closeTextEditorModal = recordingOps.closeTextEditorModal;
      const saveTranscription = recordingOps.saveTranscription;
      const openAsrEditorModal = recordingOps.openAsrEditorModal;
      const closeAsrEditorModal = recordingOps.closeAsrEditorModal;
      const saveAsrTranscription = recordingOps.saveAsrTranscription;
      const adjustTime = recordingOps.adjustTime;
      const filterSpeakers = recordingOps.filterSpeakers;
      const openSpeakerSuggestions = recordingOps.openSpeakerSuggestions;
      const closeSpeakerSuggestions = recordingOps.closeSpeakerSuggestions;
      const selectSpeaker = recordingOps.selectSpeaker;
      const addSegment = recordingOps.addSegment;
      const removeSegment = recordingOps.removeSegment;
      const confirmReset = recordingOps.confirmReset;
      const cancelReset = recordingOps.cancelReset;
      const executeReset = recordingOps.executeReset;
      const searchSpeakers = recordingOps.searchSpeakers;
      const selectSpeakerSuggestion = recordingOps.selectSpeakerSuggestion;
      const closeSpeakerSuggestionsOnClick = recordingOps.closeSpeakerSuggestionsOnClick;
      const openSpeakerModal = recordingOps.openSpeakerModal;
      const closeSpeakerModal = recordingOps.closeSpeakerModal;
      const saveSpeakerNames = recordingOps.saveSpeakerNames;
      const highlightSpeakerInTranscript = recordingOps.highlightSpeakerInTranscript;
      const focusSpeaker = recordingOps.focusSpeaker;
      const blurSpeaker = recordingOps.blurSpeaker;
      const clearSpeakerHighlight = recordingOps.clearSpeakerHighlight;
      const navigateToNextSpeakerGroup = recordingOps.navigateToNextSpeakerGroup;
      const navigateToPrevSpeakerGroup = recordingOps.navigateToPrevSpeakerGroup;
      const autoIdentifySpeakers = recordingOps.autoIdentifySpeakers;
      const toggleInbox = recordingOps.toggleInbox;
      const toggleHighlight = recordingOps.toggleHighlight;
      //--------------------录音详情高级操作 end------------------

      //------------------- 深色模式与主题切换 start------------------
      // --- Dark Mode ---
      const toggleDarkMode = () => {
        isDarkMode.value = !isDarkMode.value;
        if (isDarkMode.value) {
          document.documentElement.classList.add("dark");
          localStorage.setItem("darkMode", "true");
        } else {
          document.documentElement.classList.remove("dark");
          localStorage.setItem("darkMode", "false");
        }
      };

      const initializeDarkMode = () => {
        const prefersDark = window.matchMedia(
          "(prefers-color-scheme: dark)"
        ).matches;
        const savedMode = localStorage.getItem("darkMode");
        if (savedMode === "true" || (savedMode === null && prefersDark)) {
          isDarkMode.value = true;
          document.documentElement.classList.add("dark");
        } else {
          isDarkMode.value = false;
          document.documentElement.classList.remove("dark");
        }
      };

      const applyColorScheme = (schemeId, mode = null) => {
        const targetMode = mode || (isDarkMode.value ? "dark" : "light");
        const scheme = colorSchemes[targetMode].find((s) => s.id === schemeId);

        if (!scheme) {
          console.warn(
            `Color scheme '${schemeId}' not found for mode '${targetMode}'`
          );
          return;
        }

        const allThemeClasses = [
          ...colorSchemes.light.map((s) => s.class),
          ...colorSchemes.dark.map((s) => s.class),
        ].filter((c) => c !== "");

        document.documentElement.classList.remove(...allThemeClasses);

        if (scheme.class) {
          document.documentElement.classList.add(scheme.class);
        }

        currentColorScheme.value = schemeId;
        localStorage.setItem("colorScheme", schemeId);
      };

      const initializeColorScheme = () => {
        const savedScheme = localStorage.getItem("colorScheme") || "blue";
        currentColorScheme.value = savedScheme;
        applyColorScheme(savedScheme);
      };

      const openColorSchemeModal = () => {
        showColorSchemeModal.value = true;
      };

      const closeColorSchemeModal = () => {
        showColorSchemeModal.value = false;
      };

      const selectColorScheme = (schemeId) => {
        applyColorScheme(schemeId);
        showToast(
          `Applied ${
            colorSchemes[isDarkMode.value ? "dark" : "light"].find(
              (s) => s.id === schemeId
            )?.name
          } theme`,
          "fa-palette"
        );
      };

      const resetColorScheme = () => {
        applyColorScheme("blue");
        showToast("Reset to default Ocean Blue theme", "fa-undo");
      };

      // Watch for dark mode changes to reapply color scheme
      watch(isDarkMode, () => {
        applyColorScheme(currentColorScheme.value);
      });
      function confirmStopRecording() {
        return new Promise((resolve) => {
          // 防止重复创建
          if (document.getElementById("recording-confirm-mask")) {
            return;
          }

          // 遮罩层
          const mask = document.createElement("div");
          mask.id = "recording-confirm-mask";
          mask.style.cssText = `
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.45);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
    `;

          // 弹框
          const dialog = document.createElement("div");
          dialog.style.cssText = `
      width: 360px;
      background: #1f2937;
      color: #fff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 10px 30px rgba(0,0,0,.3);
      font-family: system-ui;
    `;

          dialog.innerHTML = `
      <div style="font-size:16px;font-weight:600;margin-bottom:10px;">
        确认停止录音
      </div>
      <div style="font-size:14px;color:#d1d5db;margin-bottom:20px;line-height:1.6;">
        当前正在录音，切换页面将会停止录音，是否继续？
      </div>
      <div style="display:flex;justify-content:flex-end;gap:12px;">
        <button id="confirm-cancel"
          style="padding:6px 14px;border-radius:6px;border:1px solid #4b5563;background:#374151;color:#fff;cursor:pointer;">
          继续录音
        </button>
        <button id="confirm-ok"
          style="padding:6px 14px;border-radius:6px;border:none;background:#ef4444;color:#fff;cursor:pointer;">
          停止并切换
        </button>
      </div>
    `;

          mask.appendChild(dialog);
          document.body.appendChild(mask);

          const cleanup = () => {
            document.body.removeChild(mask);
          };

          dialog.querySelector("#confirm-ok").onclick = () => {
            cleanup();
            resolve(true);
          };

          dialog.querySelector("#confirm-cancel").onclick = () => {
            cleanup();
            resolve(false);
          };

          // 点击遮罩关闭 = 取消
          mask.onclick = (e) => {
            if (e.target === mask) {
              cleanup();
              resolve(false);
            }
          };
        });
      }

      //--------------------深色模式与主题切换 end------------------

      //------------------- 侧边栏与视图切换控制 start------------------
      // --- Sidebar Toggle ---
      // toggleSidebar 已移至 useSidebar

      //--------------------侧边栏与视图切换控制 end------------------

      //------------------- 页面视图管理 start------------------
      // --- View Management ---
      const switchToUploadView = async () => {
        if (currentView.value === "recording" && isRec === true) {
          const confirmed = await confirmStopRecording();
          if (!confirmed) return;

          // 清空所有录音相关状态
          recordingState.discardRecordingState();
          resetRealtimeTranscript({ clearTimestampBarrier: true });

          currentView.value = "upload";
          selectedRecording.value = null;
          if (isMobileScreen.value) {
            sidebar.isSidebarCollapsed.value = true;
          }
        } else {
          // 即使不在录音中，也清空状态以准备新录音
          recordingState.discardRecordingState();
          resetRealtimeTranscript({ clearTimestampBarrier: true });

          currentView.value = "upload";
          selectedRecording.value = null;
          if (isMobileScreen.value) {
            sidebar.isSidebarCollapsed.value = true;
          }
        }
      };

      const selectRecording = async (recording) => {
        if (currentView.value === "recording" && isRecording.value) {
          // If we are in the middle of a recording, don't switch views
          setGlobalError(
            "请先停止当前录音，再选择其他录音。"
          );
          return;
        }
        selectedRecording.value = recording;

        if (currentView.value === "recording" && isRec === true) {
          const confirmed = await confirmStopRecording();
          if (!confirmed) return;
          if (currentView.value === "recording" && isRec === true) {
            const confirmed = await confirmStopRecording();
            if (!confirmed) return;

            currentView.value = "detail";
          } else {
            currentView.value = "detail";
          }
          if (recording && recording.id) {
            localStorage.setItem("lastSelectedRecordingId", recording.id);
          } else {
            localStorage.removeItem("lastSelectedRecordingId");
          }
          if (isMobileScreen.value) {
            sidebar.isSidebarCollapsed.value = true;
          }
        } else {
          if (currentView.value === "recording" && isRec === true) {
            const confirmed = await confirmStopRecording();
            if (!confirmed) return;

            currentView.value = "detail";
          } else {
            currentView.value = "detail";
          }
          if (recording && recording.id) {
            localStorage.setItem("lastSelectedRecordingId", recording.id);
          } else {
            localStorage.removeItem("lastSelectedRecordingId");
          }
          if (isMobileScreen.value) {
            sidebar.isSidebarCollapsed.value = true;
          }
        }
      };

      //--------------------页面视图管理 end------------------

      //------------------- 文件上传与上传队列 start------------------
      // --- File Upload ---
      const handleDragOver = (e) => {
        e.preventDefault();
        dragover.value = true;
      };

      const handleDragLeave = (e) => {
        if (e.relatedTarget && e.currentTarget.contains(e.relatedTarget)) {
          return;
        }
        dragover.value = false;
      };

      const handleDrop = (e) => {
        e.preventDefault();
        dragover.value = false;
        addFilesToQueue(e.dataTransfer.files);
      };

      const handleFileSelect = (e) => {
        addFilesToQueue(e.target.files);
        e.target.value = null;
      };

      const addFilesToQueue = (files) => {
        let filesAdded = 0;
        for (const file of files) {
          const fileObject = file.file ? file.file : file;
          const notes = file.notes || null;
          const tags = file.tags || selectedTags.value || [];
          const asrOptions = file.asrOptions || {
            language: asrLanguage.value,
            min_speakers: asrMinSpeakers.value,
            max_speakers: asrMaxSpeakers.value,
          };

          // Check if it's an audio file or video container with audio
          const isAudioFile =
            fileObject &&
            (fileObject.type.startsWith("audio/") ||
              fileObject.type === "video/mp4" ||
              fileObject.type === "video/quicktime" ||
              fileObject.type === "video/x-msvideo" ||
              fileObject.type === "video/webm" ||
              fileObject.name.toLowerCase().endsWith(".amr") ||
              fileObject.name.toLowerCase().endsWith(".3gp") ||
              fileObject.name.toLowerCase().endsWith(".3gpp") ||
              fileObject.name.toLowerCase().endsWith(".mp4") ||
              fileObject.name.toLowerCase().endsWith(".mov") ||
              fileObject.name.toLowerCase().endsWith(".avi") ||
              fileObject.name.toLowerCase().endsWith(".mkv") ||
              fileObject.name.toLowerCase().endsWith(".webm"));

          if (isAudioFile) {
            // Only check general file size limit (chunking handles OpenAI 25MB limit automatically)
            if (fileObject.size > maxFileSizeMB.value * 1024 * 1024) {
              setGlobalError(
                `File "${fileObject.name}" exceeds the maximum size of ${maxFileSizeMB.value} MB and was skipped.`
              );
              continue;
            }

            const clientId = `client-${Date.now()}-${Math.random()
              .toString(36)
              .substring(2, 9)}`;

            // Auto-summarization will always occur for all uploads
            const willAutoSummarize = true;

            uploadQueue.value.push({
              file: fileObject,
              notes: notes,
              tags: tags,
              asrOptions: asrOptions,
              status: "queued",
              recordingId: null,
              clientId: clientId,
              error: null,
              willAutoSummarize: willAutoSummarize,
            });
            filesAdded++;
          } else if (fileObject) {
            setGlobalError(
              `Invalid file type "${fileObject.name}". Only audio files and video containers with audio (MP3, WAV, MP4, MOV, AVI, etc.) are accepted. File skipped.`
            );
          }
        }
        if (filesAdded > 0) {
          console.log(`Added ${filesAdded} file(s) to the queue.`);
          progressPopupMinimized.value = false;
          progressPopupClosed.value = false;
          if (!isProcessingActive.value) {
            startProcessingQueue();
          }
        }
      };

      const startProcessingQueue = async () => {
        console.log("Attempting to start processing queue...");
        if (isProcessingActive.value) {
          console.log("Queue processor already active.");
          return;
        }

        isProcessingActive.value = true;
        resetCurrentFileProcessingState();

        const nextFileItem = uploadQueue.value.find(
          (item) => item.status === "queued"
        );

        if (nextFileItem) {
          console.log(
            `Processing next file: ${nextFileItem.file.name} (Client ID: ${nextFileItem.clientId})`
          );
          currentlyProcessingFile.value = nextFileItem;

          // Check if this is a "reload" item (existing recording being tracked)
          if (nextFileItem.clientId.startsWith("reload-")) {
            // Skip upload, go directly to polling existing recording
            console.log(
              `Skipping upload for existing recording: ${nextFileItem.recordingId}`
            );
            nextFileItem.status = "processing";
            startStatusPolling(nextFileItem, nextFileItem.recordingId);
            return;
          }

          nextFileItem.status = "uploading";
          processingMessage.value = "Preparing upload...";
          processingProgress.value = 5;

          try {
            const formData = new FormData();
            formData.append("file", nextFileItem.file);
            if (nextFileItem.notes) {
              formData.append("notes", nextFileItem.notes);
            }

            // Add tags if selected (multiple tags)
            // Use tags from the queue item if available, otherwise use global selectedTagIds
            const tagsToUse = nextFileItem.tags || selectedTags.value || [];
            tagsToUse.forEach((tag, index) => {
              const tagId = tag.id || tag; // Handle both tag objects and tag IDs
              formData.append(`tag_ids[${index}]`, tagId);
            });

            // Add ASR advanced options if ASR endpoint is enabled
            if (useAsrEndpoint.value) {
              // Use ASR options from the queue item if available, otherwise use global values
              const asrOpts = nextFileItem.asrOptions || {};
              const language = asrOpts.language || uploadLanguage.value;
              const minSpeakers =
                asrOpts.min_speakers || uploadMinSpeakers.value;
              const maxSpeakers =
                asrOpts.max_speakers || uploadMaxSpeakers.value;

              if (language) {
                formData.append("language", language);
              }
              // Only send speaker limits if they're actually set
              if (minSpeakers && minSpeakers !== "") {
                formData.append("min_speakers", minSpeakers.toString());
              }
              if (maxSpeakers && maxSpeakers !== "") {
                formData.append("max_speakers", maxSpeakers.toString());
              }
            }

            processingMessage.value = "Uploading file...";
            processingProgress.value = 10;

            const response = await fetch("/tool/speakr/upload", {
              method: "POST",
              body: formData,
            });
            const data = await response.json();

            if (!response.ok) {
              let errorMsg =
                data.error || `Upload failed with status ${response.status}`;
              if (response.status === 413)
                errorMsg =
                  data.error ||
                  `File too large. Max: ${
                    data.max_size_mb?.toFixed(0) || maxFileSizeMB.value
                  } MB.`;
              throw new Error(errorMsg);
            }

            if (response.status === 202 && data.id) {
              console.log(
                `File ${nextFileItem.file.name} uploaded. Recording ID: ${data.id}. Starting status poll.`
              );
              nextFileItem.status = "pending";
              nextFileItem.recordingId = data.id;
              processingMessage.value =
                "Upload complete. Waiting for processing...";
              processingProgress.value = 30;

              recordings.value.unshift(data);
              totalRecordings.value++; // Update total count
              pollProcessingStatus(nextFileItem);
            } else {
              throw new Error(
                "Unexpected success response from server after upload."
              );
            }
          } catch (error) {
            console.error(
              `Upload/Processing Error for ${nextFileItem.file.name} (Client ID: ${nextFileItem.clientId}):`,
              error
            );
            nextFileItem.status = "failed";
            nextFileItem.error = error.message;
            const failedRecordIndex = recordings.value.findIndex(
              (r) => r.id === nextFileItem.recordingId
            );
            if (failedRecordIndex !== -1) {
              recordings.value[failedRecordIndex].status = "FAILED";
              recordings.value[
                failedRecordIndex
              ].transcription = `Upload/Processing failed: ${error.message}`;
            } else {
              setGlobalError(
                `Failed to process "${nextFileItem.file.name}": ${error.message}`
              );
            }

            resetCurrentFileProcessingState();
            isProcessingActive.value = false;
            await nextTick();
            startProcessingQueue();
          }
        } else {
          console.log("Upload queue is empty or no files are queued.");
          isProcessingActive.value = false;
        }
      };

      const startStatusPolling = (fileItem, recordingId) => {
        fileItem.recordingId = recordingId;
        pollProcessingStatus(fileItem);
      };

      const pollProcessingStatus = (fileItem) => {
        if (pollInterval.value) clearInterval(pollInterval.value);

        const recordingId = fileItem.recordingId;
        if (!recordingId) {
          console.error(
            "Cannot poll status without recording ID for",
            fileItem.file.name
          );
          fileItem.status = "failed";
          fileItem.error = "Internal error: Missing recording ID for polling.";
          resetCurrentFileProcessingState();
          isProcessingActive.value = false;
          nextTick(startProcessingQueue);
          return;
        }

        processingMessage.value = "Waiting for transcription...";
        processingProgress.value = 40;

        pollInterval.value = setInterval(async () => {
          // Check if we should stop polling
          const shouldStopPolling =
            !currentlyProcessingFile.value ||
            currentlyProcessingFile.value.clientId !== fileItem.clientId ||
            fileItem.status === "failed" ||
            (fileItem.status === "completed" &&
              (!fileItem.willAutoSummarize || fileItem.summaryCompleted));

          if (shouldStopPolling) {
            console.log(
              `Polling stopped for ${fileItem.clientId} as it's no longer active or finished.`
            );
            clearInterval(pollInterval.value);
            pollInterval.value = null;
            if (
              currentlyProcessingFile.value &&
              currentlyProcessingFile.value.clientId === fileItem.clientId
            ) {
              resetCurrentFileProcessingState();
              isProcessingActive.value = false;
              await nextTick();
              startProcessingQueue();
            }
            return;
          }

          try {
            console.log(
              `Polling status for recording ID: ${recordingId} (${fileItem.file.name})`
            );
            const response = await fetch(`/tool/speakr/status/${recordingId}`);
            if (!response.ok)
              throw new Error(
                `Status check failed with status ${response.status}`
              );

            const data = await response.json();
            const galleryIndex = recordings.value.findIndex(
              (r) => r.id === recordingId
            );

            if (galleryIndex !== -1) {
              recordings.value[galleryIndex] = data;
              if (selectedRecording.value?.id === recordingId) {
                selectedRecording.value = data;
              }
            }

            const previousStatus = fileItem.status;
            fileItem.status = data.status;
            fileItem.displayName = data.title || data.original_filename || fileItem.file.name;

            if (data.status === "COMPLETED") {
              console.log(
                `Processing COMPLETED for ${fileItem.file.name} (ID: ${recordingId})`
              );

              // If this was previously summarizing, it's now fully complete
              if (previousStatus === "summarizing") {
                console.log(`Auto-summary completed for ${fileItem.file.name}`);
                processingMessage.value = "Processing complete!";
                processingProgress.value = 100;
                fileItem.status = "completed";
                fileItem.summaryCompleted = true;

                // This is final completion - clean up immediately and synchronously
                clearInterval(pollInterval.value);
                pollInterval.value = null;
                resetCurrentFileProcessingState();
                isProcessingActive.value = false;

                // Keep completed items visible in the modal - don't remove them
                console.log(
                  `Completed item ${fileItem.clientId} will remain visible in queue`
                );

                // Use immediate startProcessingQueue instead of nextTick to avoid duplication
                startProcessingQueue();
                return; // Exit early to prevent further processing
              }
              // If auto-summarization will occur and hasn't started yet, wait for it
              else if (
                fileItem.willAutoSummarize &&
                !fileItem.hasCheckedForAutoSummary
              ) {
                processingMessage.value = "Transcription complete!";
                processingProgress.value = 85;
                fileItem.status = "awaiting_summary"; // Use intermediate status to keep it in upload queue
                // Don't mark as summaryCompleted yet, continue polling
              }
              // No auto-summarization expected, complete normally
              else {
                processingMessage.value = "Processing complete!";
                processingProgress.value = 100;
                fileItem.status = "completed";
                fileItem.summaryCompleted = true; // No summary expected, so consider it complete

                // Complete immediately for files without auto-summarization
                clearInterval(pollInterval.value);
                pollInterval.value = null;
                resetCurrentFileProcessingState();
                isProcessingActive.value = false;

                // Keep completed items visible in the modal - don't remove them
                console.log(
                  `Completed item ${fileItem.clientId} will remain visible in queue`
                );

                startProcessingQueue();
                return; // Exit early to prevent further processing
              }

              // For files with auto-summarization, mark that they've been checked and continue polling
              if (
                fileItem.willAutoSummarize &&
                !fileItem.hasCheckedForAutoSummary
              ) {
                fileItem.hasCheckedForAutoSummary = true;
                fileItem.autoSummaryStartTime = Date.now();
                console.log(
                  `Auto-summary expected for ${fileItem.file.name}, continuing to poll...`
                );
                // Don't complete yet, continue polling
                return;
              }

              // If we have auto-summarization and we've been waiting, check if we should timeout
              if (
                fileItem.willAutoSummarize &&
                fileItem.hasCheckedForAutoSummary
              ) {
                const waitTime = Date.now() - fileItem.autoSummaryStartTime;
                const maxWaitTime = 60000; // 60 seconds

                if (waitTime > maxWaitTime) {
                  // Timeout - complete the process
                  console.log(
                    `Auto-summary timeout for ${fileItem.file.name}, completing...`
                  );
                  processingMessage.value = "Processing complete!";
                  processingProgress.value = 100;
                  fileItem.status = "completed";
                  fileItem.summaryCompleted = true; // Mark as complete due to timeout
                  clearInterval(pollInterval.value);
                  pollInterval.value = null;
                  resetCurrentFileProcessingState();
                  isProcessingActive.value = false;

                  // Keep completed items visible in the modal - don't remove them
                  console.log(
                    `Timed-out item ${fileItem.clientId} will remain visible in queue`
                  );

                  startProcessingQueue();
                } else {
                  // Still waiting for auto-summary, continue polling
                  return;
                }
              }

              // Normal completion path (no auto-summary check needed)
              clearInterval(pollInterval.value);
              pollInterval.value = null;
              resetCurrentFileProcessingState();
              isProcessingActive.value = false;

              // Remove this item from uploadQueue immediately to prevent duplication
              const queueIndex = uploadQueue.value.findIndex(
                (item) => item.clientId === fileItem.clientId
              );
              if (queueIndex !== -1) {
                uploadQueue.value.splice(queueIndex, 1);
                console.log(
                  `Removed completed item ${fileItem.clientId} from queue immediately`
                );
              }

              startProcessingQueue();
            } else if (data.status === "FAILED") {
              console.log(
                `Processing FAILED for ${fileItem.file.name} (ID: ${recordingId})`
              );
              processingMessage.value = "Processing failed.";
              processingProgress.value = 100;
              fileItem.status = "failed";
              fileItem.error =
                data.transcription ||
                data.summary ||
                "Processing failed on server.";
              setGlobalError(
                `Processing failed for "${data.title || fileItem.file.name}".`
              );
              clearInterval(pollInterval.value);
              pollInterval.value = null;
              resetCurrentFileProcessingState();
              isProcessingActive.value = false;
              await nextTick();
              startProcessingQueue();
            } else if (data.status === "PROCESSING") {
              // Check if this file will actually use chunking based on all conditions:
              // 1. Chunking must be enabled in config
              // 2. Must NOT be using ASR endpoint (ASR handles large files natively)
              // 3. For size-based: File size must exceed the limit (can determine immediately)
              // 4. For time-based: Can't determine client-side, but backend logs show it gets duration

              const couldUseChunking =
                chunkingEnabled.value && !useAsrEndpoint.value;

              if (couldUseChunking) {
                if (chunkingMode.value === "size") {
                  // Size-based chunking: we can determine definitively
                  const chunkThresholdBytes = chunkingLimit.value * 1024 * 1024;
                  const willUseChunking =
                    fileItem.file.size > chunkThresholdBytes;

                  if (willUseChunking) {
                    processingMessage.value =
                      "Processing large file (chunking in progress)...";
                    // If auto-summarization will occur, cap at 70%, otherwise 80%
                    const maxProgress = fileItem.willAutoSummarize ? 70 : 80;
                    processingProgress.value = Math.round(
                      Math.min(
                        maxProgress,
                        processingProgress.value + Math.random() * 3
                      )
                    );
                  } else {
                    processingMessage.value = "转录进行中...";
                    // If auto-summarization will occur, cap at 65%, otherwise 75%
                    const maxProgress = fileItem.willAutoSummarize ? 65 : 75;
                    processingProgress.value = Math.round(
                      Math.min(
                        maxProgress,
                        processingProgress.value + Math.random() * 5
                      )
                    );
                  }
                } else {
                  // Duration-based chunking: Backend determines this after getting duration
                  // Show a neutral processing message since we can't know client-side
                  processingMessage.value =
                    "Processing file (chunking determined server-side)...";
                  const maxProgress = fileItem.willAutoSummarize ? 70 : 80;
                  processingProgress.value = Math.round(
                    Math.min(
                      maxProgress,
                      processingProgress.value + Math.random() * 3
                    )
                  );
                }
              } else {
                processingMessage.value = "转录进行中...";
                const maxProgress = fileItem.willAutoSummarize ? 65 : 75;
                processingProgress.value = Math.round(
                  Math.min(
                    maxProgress,
                    processingProgress.value + Math.random() * 5
                  )
                );
              }
            } else if (data.status === "SUMMARIZING") {
              console.log(`Auto-summary started for ${fileItem.file.name}`);
              processingMessage.value = "Generating summary...";
              processingProgress.value = 90;
              fileItem.status = "summarizing";
            } else {
              processingMessage.value = "Waiting in queue...";
              processingProgress.value = 45;
            }
          } catch (error) {
            console.error(
              `Polling Error for ${fileItem.file.name} (ID: ${recordingId}):`,
              error
            );
            fileItem.status = "failed";
            fileItem.error = `Error checking status: ${error.message}`;
            setGlobalError(
              `Error checking status for "${fileItem.file.name}": ${error.message}.`
            );
            const galleryIndex = recordings.value.findIndex(
              (r) => r.id === recordingId
            );
            if (galleryIndex !== -1)
              recordings.value[galleryIndex].status = "FAILED";

            clearInterval(pollInterval.value);
            pollInterval.value = null;
            resetCurrentFileProcessingState();
            isProcessingActive.value = false;
            await nextTick();
            startProcessingQueue();
          }
        }, 5000);
      };

      //--------------------文件上传与上传队列 end------------------

      //------------------- 录音与标签数据加载 start------------------
      // --- Data Loading ---
      const loadRecordings = async (
        page = 1,
        append = false,
        searchQuery = ""
      ) => {
        globalError.value = null;
        if (!append) {
          isLoadingRecordings.value = true;
        } else {
          isLoadingMore.value = true;
        }

        try {
          const params = new URLSearchParams({
            page: page.toString(),
            per_page: perPage.value.toString(),
          });

          if (searchQuery.trim()) {
            params.set("q", searchQuery.trim());
          }

          const response = await fetch(`/tool/speakr/api/recordings?${params}`);
          const data = await response.json();
          if (!response.ok)
            throw new Error(data.error || "Failed to load recordings");

          // Update pagination state
          currentPage.value = data.pagination.page;
          totalRecordings.value = data.pagination.total;
          totalPages.value = data.pagination.total_pages;
          hasNextPage.value = data.pagination.has_next;
          hasPrevPage.value = data.pagination.has_prev;

          // Update recordings data
          if (append) {
            // Append to existing recordings (infinite scroll)
            recordings.value = [...recordings.value, ...data.recordings];
          } else {
            // Replace recordings (fresh load or search)
            recordings.value = data.recordings;

            // Try to restore last selected recording
            const lastRecordingId = localStorage.getItem(
              "lastSelectedRecordingId"
            );
            if (lastRecordingId && data.recordings.length > 0) {
              const recordingToSelect = data.recordings.find(
                (r) => r.id == lastRecordingId
              );
              if (recordingToSelect) {
                selectRecording(recordingToSelect);
              }
            }
          }

          // Handle incomplete recordings for processing queue
          const incompleteRecordings = data.recordings.filter((r) =>
            ["PENDING", "PROCESSING", "SUMMARIZING"].includes(r.status)
          );
          if (incompleteRecordings.length > 0 && !isProcessingActive.value) {
            console.warn(
              `Found ${incompleteRecordings.length} incomplete recording(s) on load.`
            );
            for (const recording of incompleteRecordings) {
              let queueItem = uploadQueue.value.find(
                (item) => item.recordingId === recording.id
              );
              if (!queueItem) {
                queueItem = {
                  file: {
                    name: recording.title || `Recording ${recording.id}`,
                    size: recording.file_size,
                  },
                  status: "queued",
                  recordingId: recording.id,
                  clientId: `reload-${recording.id}`,
                  error: null,
                };
                uploadQueue.value.unshift(queueItem);
                if (!isProcessingActive.value) {
                  startProcessingQueue();
                }
              }
            }
          }
        } catch (error) {
          console.error("Load Recordings Error:", error);
          setGlobalError(`Failed to load recordings: ${error.message}`);
          if (!append) {
            recordings.value = [];
          }
        } finally {
          isLoadingRecordings.value = false;
          isLoadingMore.value = false;
        }
      };

      // Load more recordings (infinite scroll) - 已移至 useSidebar

      // ================== 使用侧边栏组合式函数 ==================
      // 管理与侧边栏相关的状态：筛选、排序、草稿重命名、侧边栏折叠等
      // 注意：必须在 loadRecordings 定义之后调用，因为 useSidebar 内部
      // 的 loadMoreRecordings 依赖 loadRecordings（否则 TDZ 错误）。
      // 注意：传入 safeT 而非 t，因为 t = safeT 在后面（~4347行）才定义。
      const sidebar = useSidebar({
        t: safeT,
        filteredRecordings,
        loadRecordings,
        showToast,
        currentPage,
        hasNextPage,
        isLoadingMore,
        searchQuery,
        availableTags,
        draftNameInput,
      });

      // Search with debouncing
      const performSearch = async (query = "") => {
        currentPage.value = 1;
        await loadRecordings(1, false, query);
      };

      // Debounced search function
      const debouncedSearch = (query) => {
        if (searchDebounceTimer.value) {
          clearTimeout(searchDebounceTimer.value);
        }
        searchDebounceTimer.value = setTimeout(() => {
          performSearch(query);
        }, 300); // 300ms debounce
      };

      const loadTags = async () => {
        try {
          const response = await fetch("/tool/speakr/api/tags");
          if (response.ok) {
            availableTags.value = await response.json();
          } else {
            console.warn("Failed to load tags:", response.status);
            availableTags.value = [];
          }
        } catch (error) {
          console.warn("Error loading tags:", error);
          availableTags.value = [];
        }
      };

      const addTagToSelection = (tagId) => {
        if (!selectedTagIds.value.includes(tagId)) {
          selectedTagIds.value.push(tagId);
          applyTagDefaults();
        }
      };

      const removeTagFromSelection = (tagId) => {
        const index = selectedTagIds.value.indexOf(tagId);
        if (index > -1) {
          selectedTagIds.value.splice(index, 1);
          applyTagDefaults();
        }
      };

      const applyTagDefaults = () => {
        // Apply defaults from the first selected tag (highest priority)
        const firstTag = selectedTags.value[0];
        if (firstTag && useAsrEndpoint.value) {
          if (firstTag.default_language) {
            uploadLanguage.value = firstTag.default_language;
          }
          if (firstTag.default_min_speakers) {
            uploadMinSpeakers.value = firstTag.default_min_speakers;
          }
          if (firstTag.default_max_speakers) {
            uploadMaxSpeakers.value = firstTag.default_max_speakers;
          }
        }
      };

      // Legacy function for backward compatibility
      const onTagSelected = applyTagDefaults;

      // Tag helper functions
      const getRecordingTags = (recording) => {
        if (!recording || !recording.tags) return [];
        return recording.tags || [];
      };

      const getAvailableTagsForRecording = (recording) => {
        if (!recording || !availableTags.value) return [];
        const recordingTagIds = getRecordingTags(recording).map(
          (tag) => tag.id
        );
        return availableTags.value.filter(
          (tag) => !recordingTagIds.includes(tag.id)
        );
      };

      // Computed property for filtered available tags in the modal
      const filteredAvailableTagsForModal = computed(() => {
        if (!editingRecording.value) return [];
        const availableTags = getAvailableTagsForRecording(
          editingRecording.value
        );
        if (!tagSearchFilter.value) return availableTags;

        const filter = tagSearchFilter.value.toLowerCase();
        return availableTags.filter((tag) =>
          tag.name.toLowerCase().includes(filter)
        );
      });
      // filterByTag, clearTagFilter, buildSearchQuery, applyAdvancedFilters, clearAllFilters
      // 已移至 useSidebar

      const editRecordingTags = (recording) => {
        editingRecording.value = recording;
        selectedNewTagId.value = "";
        showEditTagsModal.value = true;
      };

      const closeEditTagsModal = () => {
        showEditTagsModal.value = false;
        editingRecording.value = null;
        selectedNewTagId.value = "";
        tagSearchFilter.value = ""; // Clear the filter when closing
      };

      const addTagToRecording = async (tagId = null) => {
        // Use provided tagId or fall back to selectedNewTagId
        const tagToAddId = tagId || selectedNewTagId.value;
        if (!tagToAddId || !editingRecording.value) return;

        try {
          const csrfToken = document
            .querySelector('meta[name="csrf-token"]')
            ?.getAttribute("content");

          const response = await fetch(
            `/tool/speakr/api/recordings/${editingRecording.value.id}/tags`,
            {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
                "X-CSRFToken": csrfToken,
              },
              body: JSON.stringify({ tag_id: tagToAddId }),
            }
          );

          if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.error || "Failed to add tag");
          }

          // Update local recording data
          const tagToAdd = availableTags.value.find(
            (tag) => tag.id == tagToAddId
          );
          if (tagToAdd) {
            if (!editingRecording.value.tags) {
              editingRecording.value.tags = [];
            }
            editingRecording.value.tags.push(tagToAdd);

            // Also update in recordings list if it's a different object
            const recordingInList = recordings.value.find(
              (r) => r.id === editingRecording.value.id
            );
            if (recordingInList && recordingInList !== editingRecording.value) {
              if (!recordingInList.tags) {
                recordingInList.tags = [];
              }
              recordingInList.tags.push(tagToAdd);
            }
          }

          selectedNewTagId.value = "";
        } catch (error) {
          console.error("Error adding tag to recording:", error);
          setGlobalError(`Failed to add tag: ${error.message}`);
        }
      };

      const removeTagFromRecording = async (tagId) => {
        if (!editingRecording.value) return;

        try {
          const csrfToken = document
            .querySelector('meta[name="csrf-token"]')
            ?.getAttribute("content");

          const response = await fetch(
            `/tool/speakr/api/recordings/${editingRecording.value.id}/tags/${tagId}`,
            {
              method: "DELETE",
              headers: {
                "X-CSRFToken": csrfToken,
              },
            }
          );

          if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.error || "Failed to remove tag");
          }

          // Update local recording data
          editingRecording.value.tags = editingRecording.value.tags.filter(
            (tag) => tag.id !== tagId
          );

          // Also update in recordings list if it's a different object
          const recordingInList = recordings.value.find(
            (r) => r.id === editingRecording.value.id
          );
          if (
            recordingInList &&
            recordingInList !== editingRecording.value &&
            recordingInList.tags
          ) {
            recordingInList.tags = recordingInList.tags.filter(
              (tag) => tag.id !== tagId
            );
          }
        } catch (error) {
          console.error("Error removing tag from recording:", error);
          setGlobalError(`Failed to remove tag: ${error.message}`);
        }
      };

      //--------------------录音与标签数据加载 end------------------

      // ============== 录音控制与实时采集（使用 useRecordingState 工具函数） ==============

      /**
       * 免责声明检查
       */
      debugger;
      const startRecordingWithDisclaimer = async (mode = "microphone") => {
        if (recordingDisclaimer.value?.trim()) {
          recordingState.showDisclaimer(mode);
        } else {
          await startRecordingActual(mode);
        }
      };

      const acceptRecordingDisclaimer = async () => {
        const mode = recordingState.acceptDisclaimer();
        if (mode) await startRecordingActual(mode);
      };

      const cancelRecordingDisclaimer = () => {
        recordingState.cancelDisclaimer();
      };

      const startRecording = startRecordingWithDisclaimer;

      /**
       * 实际开始录音
       */
      const startRecordingActual = async (mode = "microphone") => {
        recordingMode.value = mode;

        try {
          // 加载标签
          if (availableTags.value.length === 0) {
            await loadTags();
          }

          // 初始化录音状态
          recordingState.initRecordingState();
          selectedTags.value = [];
          asrLanguage.value = "";
          asrMinSpeakers.value = "";
          asrMaxSpeakers.value = "";
          isEditingTranscription.value = false;
          resetRealtimeTranscript({ clearTimestampBarrier: true });

          let combinedStream = null;

          // 获取麦克风流
          if (mode === "microphone" || mode === "both") {
            if (!canRecordAudio.value) {
              throw new Error("Microphone recording is not supported");
            }
            await recordingState.getMicrophoneStream();
            showToast("Microphone access granted", "fa-microphone");
          }

          // 获取系统音频流
          if (mode === "system" || mode === "both") {
            if (!canRecordSystemAudio.value) {
              throw new Error("System audio recording is not supported");
            }
            try {
              await recordingState.getSystemAudioStream();
              showToast("System audio access granted", "fa-desktop");
            } catch (err) {
              if (mode === "system") {
                throw err;
              } else {
                showToast(
                  "System audio denied, using microphone only",
                  "fa-exclamation-triangle"
                );
                mode = "microphone";
                recordingMode.value = mode;
                recordingState.setSystemStream(null);
              }
            }
          }

          // 合并或选择音频流
          if (recordingState.micStream && recordingState.systemStream) {
            try {
              combinedStream = recordingState.combineAudioStreams(recordingState.micStream, recordingState.systemStream);
              showToast("Recording both microphone and system audio", "fa-microphone");
            } catch (error) {
              console.error("Failed to combine audio streams:", error);
              combinedStream = recordingState.systemStream;
              showToast(
                "Failed to combine audio, using system audio only",
                "fa-exclamation-triangle"
              );
            }
          } else if (recordingState.systemStream) {
            combinedStream = recordingState.createAudioOnlyStream(recordingState.systemStream);
            showToast("Recording system audio only", "fa-desktop");
          } else if (recordingState.micStream) {
            combinedStream = recordingState.micStream;
            showToast("Recording microphone only", "fa-microphone");
          } else {
            throw new Error("No audio streams available for recording.");
          }

          // 使用工具函数创建 MediaRecorder
          recordingState.createMediaRecorderWithFallback(combinedStream, (bitrate) => {
            actualBitrate.value = bitrate;
            showToast(
              bitrate <= 32000 ? "Recording: Optimized (32kbps Opus)" :
              bitrate <= 64000 ? "Recording: Good quality (64kbps)" :
              "Recording with browser default settings",
              bitrate <= 64000 ? "fa-compress-alt" : "fa-microphone",
              3000
            );
          });

          if (!mediaRecorder.value) {
            throw new Error("Failed to create MediaRecorder with any configuration");
          }

          console.log(`Recording with estimated bitrate: ${actualBitrate.value} bps`);

          mediaRecorder.value.ondataavailable = (event) =>
            audioChunks.value.push(event.data);
          mediaRecorder.value.onstop = () => {
            const audioBlob = new Blob(audioChunks.value, {
              type: "audio/webm",
            });
            audioBlobURL.value = URL.createObjectURL(audioBlob);

            // Stop size monitoring
            stopSizeMonitoring();

            // Stop all active streams
            activeStreams.value.forEach((stream) => {
              stream.getTracks().forEach((track) => track.stop());
            });
            activeStreams.value = [];
            recordingState.setMicStream(null);
            recordingState.setSystemStream(null);

            if (audioContext.value) {
              audioContext.value
                .close()
                .catch((e) => console.error("Error closing AudioContext:", e));
              audioContext.value = null;
            }
            cancelAnimationFrame(animationFrameId.value);
            recordingState.stopRecordingTimer();
          };

          // --- 设置可视化器（使用工具函数）---
          if (mode === "both" && recordingState.micStream && recordingState.systemStream) {
            recordingState.setupDualVisualizer(recordingState.micStream, recordingState.systemStream);
          } else {
            // 根据 recordingMode 选择正确的流，避免旧流残留导致选错
            const visualizerStream = mode === "microphone"
              ? recordingState.micStream
              : recordingState.systemStream;
            if (visualizerStream) {
              recordingState.setupSingleVisualizer(visualizerStream);
            }
          }

          // 开始录音和计时
          mediaRecorder.value.start();
          isRecording.value = true;
          recordingState.startRecordingTimer();

          // 开始大小监控
          startSizeMonitoring();

          // Switch to recording view
          currentView.value = "recording";

          // Start visualizer(s)
          drawVisualizers();

          setGlobalError(null);
        } catch (err) {
          console.error("Error starting recording:", err);
          setGlobalError(`Could not start recording: ${err.message}`);
          isRecording.value = false;

          // Clean up any streams that were created
          activeStreams.value.forEach((stream) => {
            stream.getTracks().forEach((track) => track.stop());
          });
          activeStreams.value = [];
        }
      };

      // 停止录音
      const stopRecording = async () => {
        if (isStoppingRecording.value) {
          return;
        }

        const hasRecordingSession =
          isRecording.value ||
          isPaused.value ||
          audioChunks.value.length > 0 ||
          !!currentDraftId.value ||
          activeStreams.value.length > 0;

        if (!hasRecordingSession) {
          return;
        }

        isStoppingRecording.value = true;
        try {
          isRec = false;

          if (mediaRecorder.value && isRecording.value) {
            is_final.value = true;
            mediaRecorder.value.stop();
            isRecording.value = false;
            stopSizeMonitoring();
            cancelAnimationFrame(animationFrameId.value);
            animationFrameId.value = null;
          // 停止录音计时器
            if (recordingInterval.value) {
              clearInterval(recordingInterval.value);
              recordingInterval.value = null;
            }
          }

          await finishRealtimeAsrPipelines(20000);

          // Wait for MediaRecorder to emit the final blob.
          await new Promise(resolve => setTimeout(resolve, 500));

        // 如果是草稿模式，上传最后一个片段但不要 finalize
        if (currentDraftId.value) {
          try {
            // 上传最后一个片段 (only if not already paused/uploaded)
            if (!isPaused.value && audioChunks.value.length > 0) {
              const audioBlob = new Blob(audioChunks.value, { type: 'audio/webm' });
              const formData = new FormData();
              formData.append('audio', audioBlob);
              formData.append('duration', recordingTime.value - pausedDuration.value);
              formData.append('transcription', getRealtimeTranscriptionForSave());
              
              await fetch(`/tool/speakr/api/draft/${currentDraftId.value}/segment`, {
                method: 'POST',
                body: formData
              });

              // 清理 audioChunks 防止重复
              audioChunks.value = [];
            }

            // 合并音频片段并获取预览 URL (不 finalize，只是下载合并后的音频用于预览)
            const audioResp = await fetch(`/tool/speakr/api/draft/${currentDraftId.value}/download`);
            if (audioResp.ok) {
              const audioBlob = await audioResp.blob();
              audioBlobURL.value = URL.createObjectURL(audioBlob);
            }

            // 保持 currentDraftId 状态，以便用户选择上传或放弃
            isPaused.value = false;
            
          } catch (err) {
            console.error('Error saving final segment:', err);
            setGlobalError(`保存片段失败: ${err.message}`);
          }
        } else {
          // 非草稿模式（直接录音），创建 audioBlobURL
          if (audioChunks.value.length > 0) {
            const audioBlob = new Blob(audioChunks.value, { type: 'audio/webm' });
            audioBlobURL.value = URL.createObjectURL(audioBlob);
          }
        }

        if (isMobileScreen.value) {
          sidebar.isSidebarCollapsed.value = true;
        }
        } finally {
          isStoppingRecording.value = false;
        }
      };

      // 暂停录音
      const pauseRecording = async () => {
        if (!isRecording.value || isPaused.value || isPausingRecording.value) return;

        isPausingRecording.value = true;
        try {
          // 首先停止音频数据发送，防止向已关闭的 WebSocket 发送数据
          isRec = false;

          // 停止实时 ASR 管线
          stopRealtimeAsrPipelines();

          // 停止当前 MediaRecorder
          if (mediaRecorder.value && mediaRecorder.value.state === 'recording') {
            mediaRecorder.value.stop();
          }

          // 立即停止波形图动画（不等 onstop 回调，避免 resumeRecording 创建的
          // MediaRecorder 的 onstop 回调缺少 cancelAnimationFrame 导致波形图
          // 在 await 期间继续运行）
          cancelAnimationFrame(animationFrameId.value);
          animationFrameId.value = null;

          // 等待 MediaRecorder 生成最终数据
          await new Promise(resolve => setTimeout(resolve, 500));

          // 如果处于编辑模式，先退出编辑模式
          if (isEditingTranscription.value) {
            exitEditMode();
          }

          // 把所有未矫正的预览文本立即拿去矫正，等待完成后加入 segmentList
          // 这样暂停时所有已识别的文字都成为正式转写，恢复后不会丢失
          await finalizeRemainingSentences(8000);

          // 创建草稿（如果是第一次暂停）
          if (!currentDraftId.value) {
            const resp = await fetch('/tool/speakr/api/draft/create', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({
                recording_mode: recordingMode.value,
                notes: recordingNotes.value
              })
            });
            const data = await resp.json();
            if (data.success) {
              currentDraftId.value = data.draft.id;
            } else {
              throw new Error(data.error || '创建草稿失败');
            }
          }

          // 上传当前片段
          if (audioChunks.value.length > 0) {
            const audioBlob = new Blob(audioChunks.value, { type: 'audio/webm' });
            const formData = new FormData();
            formData.append('audio', audioBlob);
            formData.append('duration', recordingTime.value - pausedDuration.value);
            // 发送完整转录文本（正式转写 + 预览文本），与显示框 fullRealtimeTranscription 一致
            const fullTranscription = getRealtimeTranscriptionForSave();
            formData.append('transcription', fullTranscription);
            
            await fetch(`/tool/speakr/api/draft/${currentDraftId.value}/segment`, {
              method: 'POST',
              body: formData
            });

            // Clear chunks after upload to prevent duplication
            audioChunks.value = [];
          }

          // 更新状态
          isPaused.value = true;
          pausedDuration.value = recordingTime.value;
          // 保存完整的显示文本（正式转写 + 预览文本），恢复录音时作为基准
          // asrResult 是已完成矫正的正式文本，asrResultOnline/asrResultOffline 是尚未完成矫正的预览文本
          // 两者都必须保存，否则恢复后预览部分的文字会丢失
          pausedTranscription.value = fullRealtimeTranscription.value || '';
          systemPausedTranscription.value = fullSystemRealtimeTranscription.value || '';
          isRecording.value = false;

          // 停止计时器和动画
          recordingState.stopRecordingTimer();
          cancelAnimationFrame(animationFrameId.value);
          stopSizeMonitoring();

          // 停止所有媒体流
          activeStreams.value.forEach(stream => {
            stream.getTracks().forEach(track => track.stop());
          });
          activeStreams.value = [];
          recordingState.setMicStream(null);
          recordingState.setSystemStream(null);
          
          showToast('录音已暂停', 'fa-pause');

          // 刷新草稿列表
          loadDrafts();
        } catch (err) {
          console.error('Error pausing recording:', err);
          setGlobalError(`暂停录音失败: ${err.message}`);
        } finally {
          isPausingRecording.value = false;
        }
      };

      // 恢复录音
      const resumeRecording = async () => {
        if (!isPaused.value || !currentDraftId.value) return;

        try {
          // 重置音频块
          audioChunks.value = [];

          // 准备恢复录音：保留历史转写数据（segmentList包含说话人、时间戳等元数据）
          // 只清空内部缓冲区准备接收新数据，新片段会从segmentList末尾继续追加
          prepareRealtimeForResume();
          isEditingTranscription.value = false;

          let combinedStream = null;
          const mode = recordingMode.value;

          // 重新获取媒体流
          if (mode === 'microphone' || mode === 'both') {
            await recordingState.getMicrophoneStream();
          }
          
          if (mode === 'system' || mode === 'both') {
            try {
              await recordingState.getSystemAudioStream();
            } catch (err) {
              if (mode === 'system') throw err;
              showToast('系统音频权限被拒绝，仅使用麦克风', 'fa-exclamation-triangle');
              recordingMode.value = 'microphone';
            }
          }

          // 组合音频流
          if (recordingState.micStream && recordingState.systemStream) {
            combinedStream = recordingState.combineAudioStreams(recordingState.micStream, recordingState.systemStream);
          } else if (recordingState.systemStream) {
            combinedStream = recordingState.createAudioOnlyStream(recordingState.systemStream);
          } else if (recordingState.micStream) {
            combinedStream = recordingState.micStream;
          } else {
            throw new Error('无可用音频流');
          }

          // 创建新的 MediaRecorder
          recordingState.createMediaRecorderWithFallback(combinedStream);
          mediaRecorder.value.ondataavailable = (event) => audioChunks.value.push(event.data);
          mediaRecorder.value.onstop = () => {
            const audioBlob = new Blob(audioChunks.value, { type: 'audio/webm' });
            audioBlobURL.value = URL.createObjectURL(audioBlob);
          };

          // 重新设置可视化
          if (mode === 'both' && recordingState.micStream && recordingState.systemStream) {
            recordingState.setupDualVisualizer(recordingState.micStream, recordingState.systemStream);
          } else {
            const visualizerStream = recordingState.micStream || recordingState.systemStream;
            if (visualizerStream) {
              recordingState.setupSingleVisualizer(visualizerStream);
            }
          }

          // 开始录音
          mediaRecorder.value.start();
          isPaused.value = false;
          isRecording.value = true;

          // 恢复计时器（从暂停时间继续）
          recordingInterval.value = setInterval(() => recordingTime.value++, 1000);

          // 恢复可视化
          drawVisualizers();
          startSizeMonitoring();

          // 恢复实时 ASR 管线
          console.log('Resuming realtime ASR pipeline...');
          asrResultOnline.value = '';
          const ret = startRealtimeAsrPipelines();
          if (ret === 1) {
            isRec = true;
          }

          showToast('录音已恢复', 'fa-play');
        } catch (err) {
          console.error('Error resuming recording:', err);
          setGlobalError(`恢复录音失败: ${err.message}`);
        }
      };

      // 加载草稿列表
      const loadDrafts = async () => {
        try {
          const resp = await fetch('/tool/speakr/api/draft/list');
          const data = await resp.json();
          draftRecordings.value = Array.isArray(data) ? data : [];
        } catch (err) {
          console.error('Error loading drafts:', err);
        }
      };

      // 继续草稿录音
      const continueDraftRecording = async (draftId) => {
        try {
          // 获取草稿详情
          const resp = await fetch(`/tool/speakr/api/draft/${draftId}`);
          const draft = await resp.json();
          
          if (draft.error) {
            throw new Error(draft.error);
          }

          // 恢复状态
          currentDraftId.value = draftId;
          recordingMode.value = draft.recording_mode || 'microphone';
          recordingTime.value = Math.round(draft.total_duration || 0);
          pausedDuration.value = recordingTime.value;
          recordingNotes.value = draft.notes || '';
          // Load historical transcription into asrResult
          console.log('Loading draft transcription:', draft.combined_transcription ? draft.combined_transcription.length : 0, 'chars');
          asrResult.value = draft.combined_transcription || '';
          asrResultOnline.value = '';
          asrResultOffline.value = '';
          pausedTranscription.value = draft.combined_transcription || '';
          // 【行为差异 C】原 main-old.js 加载草稿只重置 segmentRenderStartIndex=0；
          // 新代码额外调 resetRealtimeTranscript()，会清空 pendingSentenceQueue
          // 并 startNewEpoch。更彻底（避免上一会话 pending 残留混入），基本是改进，
          // 但若依赖 pending 队列残留需注意。
          resetRealtimeTranscript({ clearTimestampBarrier: true });

          // 设置暂停状态
          isPaused.value = true;
          isRecording.value = false;

          // 切换到录音视图
          currentView.value = 'recording';
          
          showToast('草稿已加载，点击恢复继续录音', 'fa-folder-open');
        } catch (err) {
          console.error('Error continuing draft:', err);
          setGlobalError(`加载草稿失败: ${err.message}`);
        }
      };

      // 删除草稿
      const deleteDraft = async (draftId) => {
        if (!confirm('确定要删除这个草稿吗？此操作不可撤销。')) return false;
        
        try {
          const resp = await fetch(`/tool/speakr/api/draft/${draftId}`, {
            method: 'DELETE'
          });
          const data = await resp.json();
          
          if (data.success) {
            showToast('草稿已删除', 'fa-trash');
            loadDrafts();

            // 如果删除的是当前草稿，重置状态
            if (currentDraftId.value === draftId) {
              currentDraftId.value = null;
              isPaused.value = false;
              pausedDuration.value = 0;
              pausedTranscription.value = '';
              resetRealtimeTranscript({ clearTimestampBarrier: true });
            }
            return true;
          } else {
            throw new Error(data.error);
          }
        } catch (err) {
          console.error('Error deleting draft:', err);
          setGlobalError(`删除草稿失败: ${err.message}`);
          return false;
        }
      };

      // 重命名草稿 (startDraftRename, saveDraftRename) 已移至 useSidebar

      const uploadRecordedAudio = async () => {
        // 如果有草稿，先获取合并后的音频文件，然后走统一上传流程
        if (currentDraftId.value) {
          try {
            showToast('Finalizing draft...', 'fa-spinner fa-spin', 0);

            const savedNotes = recordingNotes.value;
            const savedTags = [...selectedTags.value];
            const savedAsrOptions = {
              language: asrLanguage.value,
              min_speakers: asrMinSpeakers.value,
              max_speakers: asrMaxSpeakers.value,
            };

            const resp = await fetch(`/tool/speakr/api/draft/${currentDraftId.value}/finalize`, {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({
                notes: savedNotes,
                tag_ids: savedTags.map((tag) => tag.id || tag),
                ...savedAsrOptions,
              }),
            });

            const data = await resp.json();
            if (!resp.ok || !data.success || !data.recording) {
              throw new Error(data.error || 'Finalize draft failed');
            }

            const recording = data.recording;
            const existingIndex = recordings.value.findIndex((r) => r.id === recording.id);
            if (existingIndex === -1) {
              recordings.value.unshift(recording);
              totalRecordings.value += 1;
            } else {
              recordings.value[existingIndex] = recording;
            }

            const queueItem = {
              file: {
                name: recording.original_filename || recording.title || `draft-${recording.id}.webm`,
                size: recording.file_size || 0,
              },
              notes: savedNotes,
              tags: savedTags,
              asrOptions: savedAsrOptions,
              status: 'queued',
              recordingId: recording.id,
              clientId: `reload-draft-${recording.id}`,
              error: null,
              willAutoSummarize: true,
            };
            uploadQueue.value.push(queueItem);
            progressPopupMinimized.value = false;
            progressPopupClosed.value = false;

            currentDraftId.value = null;
            pausedDuration.value = 0;
            pausedTranscription.value = '';
            resetRealtimeTranscript({ clearTimestampBarrier: true });
            loadDrafts();

            if (audioBlobURL.value) {
              URL.revokeObjectURL(audioBlobURL.value);
            }
            audioBlobURL.value = null;
            audioChunks.value = [];
            isRecording.value = false;
            recordingNotes.value = '';
            selectedTagIds.value = [];
            asrLanguage.value = '';
            asrMinSpeakers.value = '';
            asrMaxSpeakers.value = '';
            recordingTime.value = 0;

            currentView.value = 'upload';
            selectedRecording.value = null;

            if (!isProcessingActive.value) {
              startProcessingQueue();
            }

            showToast('Draft submitted for processing', 'fa-check-circle');
          } catch (err) {
            console.error('Error finalizing draft:', err);
            setGlobalError(`Upload failed: ${err.message}`);
          }
          return;
        }

        if (!audioBlobURL.value) {
          setGlobalError("No recorded audio to upload.");
          return;
        }

        const previousQueueLength = uploadQueue.value.length;

        const recordedFile = new File(
          audioChunks.value,
          createLocalizedRecordingFilename(),
          { type: "audio/webm" }
        );

    
        addFilesToQueue([
          {
            file: recordedFile,
            notes: recordingNotes.value,
            tags: selectedTags.value,
            asrOptions: {
              language: asrLanguage.value,
              min_speakers: asrMinSpeakers.value,
              max_speakers: asrMaxSpeakers.value,
            },
          },
        ]);

   
        if (uploadQueue.value.length === previousQueueLength) {
            return;
        }

        const queueItem = uploadQueue.value[uploadQueue.value.length - 1];

        showToast("正在上传录音至服务器，请稍候...", "fa-spinner fa-spin", 0);

        const waitForServerResponse = () => {
            return new Promise((resolve, reject) => {
                const checkInterval = setInterval(() => {

                    if (!queueItem || queueItem.status === 'failed') {
                        clearInterval(checkInterval);
                        reject(new Error(queueItem?.error || "Upload failed"));
                        return;
                    }

                    const successStates = ['pending', 'processing', 'transcribing', 'summarizing', 'completed'];
                    if (successStates.includes(queueItem.status)) {
                        clearInterval(checkInterval);
                        resolve(true);
                    }
                   
                }, 200);
            });
        };
        try {

            await waitForServerResponse();

            discardRecording();

            if (isRec === true) {
                 if (typeof stopRecording === 'function') stopRecording();
            }

            currentView.value = "upload";
            selectedRecording.value = null;
            if (isMobileScreen.value) {
              sidebar.isSidebarCollapsed.value = true;
            }

            showToast("上传成功，正在处理中...", "fa-check-circle");

        } catch (error) {
            console.error("Server upload failed:", error);
            showToast(`上传失败: ${error.message || '请检查网络'}`, "fa-exclamation-triangle", 4000);
        }
      };
const downloadRecordedAudio = () => {
        if (!audioBlobURL.value) {
            showToast("No recording available to download", "fa-exclamation-circle");
            return;
        }
        
        const filename = createLocalizedRecordingFilename();
        
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = audioBlobURL.value;
        a.download = filename;
        document.body.appendChild(a);
        a.click();

        // 清理
        setTimeout(() => {
            document.body.removeChild(a);
        }, 100);
        
        showToast("录音已开始下载", "fa-download");
      };
      const discardRecording = async () => {
        if (currentDraftId.value) {
            const deleted = await deleteDraft(currentDraftId.value);
            if (!deleted) return;
        }

        if (audioBlobURL.value) {
          URL.revokeObjectURL(audioBlobURL.value);
        }
        audioBlobURL.value = null;
        audioChunks.value = [];
        isRecording.value = false;
        recordingTime.value = 0;
        if (recordingInterval.value) clearInterval(recordingInterval.value);
        recordingNotes.value = "";
        // Clear tags and ASR options for fresh start
        selectedTagIds.value = [];
        asrLanguage.value = "";
        asrMinSpeakers.value = "";
        asrMaxSpeakers.value = "";
      };

      /**
       * 绘制单轨音频波形图（频谱可视化）
       *
       * 原理：
       * 1. AnalyserNode 从音频流中实时提取频率数据（FFT分析）
       *    - fftSize = 256，所以 frequencyBinCount = 128
       *    - 数据范围 0-255，表示各频率点的强度（0=静音，255=最大音量）
       *    - 数组索引 0~127 对应 低频 → 高频
       *
       * 2. 使用 Canvas 2D 绘制柱状图
       *    - 每根柱子代表一个频率点
       *    - 柱子高度 = 频率强度 / 2.5（缩放适应画布）
       *    - 柱子从底部向上绘制（y = HEIGHT - barHeight）
       *
       * 3. 视觉效果
       *    - 使用 CSS 变量获取主题色，适配深浅模式
       *    - 渐变填充：顶部主题色 → 中间悬停色 → 底部透明
       *
       * 数据流向：
       * MediaStream → AnalyserNode → getByteFrequencyData() → Uint8Array → Canvas fillRect()
       *
       * @param {AnalyserNode} analyserNode - Web Audio API 频谱分析节点
       * @param {HTMLCanvasElement} canvasElement - 波形图画布
       */
      const drawSingleVisualizer = (analyserNode, canvasElement) => {
        if (!analyserNode || !canvasElement) return;

        // 获取频谱数据
        // bufferLength = 128 (fftSize/2)，每个元素对应一个频率段的音量
        const bufferLength = analyserNode.frequencyBinCount;
        const dataArray = new Uint8Array(bufferLength);

        // 将当前时刻的频率数据填充到数组，值范围 0-255
        // 0 = 该频率无声音，255 = 该频率声音最大
        // dataArray[0] = 最低频，dataArray[127] = 最高频
        analyserNode.getByteFrequencyData(dataArray);

        const canvasCtx = canvasElement.getContext("2d");
        const WIDTH = canvasElement.width;
        const HEIGHT = canvasElement.height;

        // 清空画布，准备绘制新一帧
        canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

        // 计算每根柱子的宽度和间距
        const barWidth = (WIDTH / bufferLength) * 1.5;
        let barHeight;
        let x = 0; // 当前柱子的x坐标

        // 从 CSS 变量获取主题色，实现深浅模式自适应
        const buttonColor = getComputedStyle(document.documentElement)
          .getPropertyValue("--bg-button")
          .trim();
        const buttonHoverColor = getComputedStyle(document.documentElement)
          .getPropertyValue("--bg-button-hover")
          .trim();

        // 创建从上到下的渐变色
        const gradient = canvasCtx.createLinearGradient(0, 0, 0, HEIGHT);
        if (isDarkMode.value) {
          gradient.addColorStop(0, buttonColor);
          gradient.addColorStop(0.6, buttonHoverColor);
          gradient.addColorStop(1, "rgba(0, 0, 0, 0.2)");
        } else {
          gradient.addColorStop(0, buttonColor);
          gradient.addColorStop(0.5, buttonHoverColor);
          gradient.addColorStop(1, "rgba(0, 0, 0, 0.1)");
        }

        // 遍历每个频率点，绘制对应的柱子
        for (let i = 0; i < bufferLength; i++) {
          // 将 0-255 的数据值映射为画布高度
          // 除以 2.5 是为了让波形不会顶到画布顶部，留有余量
          barHeight = dataArray[i] / 2.5;

          canvasCtx.fillStyle = gradient;
          // fillRect(x, y, width, height) - 从 y 位置向下绘制
          // 因为 Canvas 坐标系 y=0 在顶部，所以从 HEIGHT-barHeight 开始画到底部
          canvasCtx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);

          x += barWidth + 2; // 下一个柱子的位置（柱子宽 + 间隙）
        }
      };

      /**
       * 波形图动画循环控制器
       *
       * 原理：
       * 使用 requestAnimationFrame 实现约 60fps 的流畅动画
       * 每帧调用 drawSingleVisualizer 重新绘制频谱柱状图
       *
       * 录音模式支持：
       * - 单轨模式（mic/system）：使用单个 analyser + visualizer canvas
       * - 双轨模式（both）：同时使用 micAnalyser + systemAnalyser 分别绘制两个波形图
       *
       * 生命周期：
       * 1. 开始录音时调用 drawVisualizers() 启动动画循环
       * 2. 每帧通过 requestAnimationFrame(drawVisualizers) 递归调用
       * 3. 停止/暂停录音时 isRecording.value = false，动画停止
       *
       * 注意：
       * - 必须使用 requestAnimationFrame 而非 setInterval，以保证与浏览器刷新率同步
       * - 动画 ID 保存在 animationFrameId.value，用于暂停时 cancelAnimationFrame
       */
      const drawVisualizers = () => {
        // 录音停止时清理动画帧并退出
        if (!isRecording.value) {
          if (animationFrameId.value) {
            cancelAnimationFrame(animationFrameId.value);
            animationFrameId.value = null;
          }
          return;
        }

        // 请求下一帧动画，约 16.7ms 后再次执行（60fps）
        // 这是浏览器推荐的高性能动画方式，会自动与屏幕刷新率同步
        animationFrameId.value = requestAnimationFrame(drawVisualizers);

        // 根据录音模式决定绘制单轨还是双轨波形图
        if (recordingMode.value === "both") {
          // 双轨模式：同时显示麦克风和系统音频波形（分上下两个 canvas）
          drawSingleVisualizer(micAnalyser.value, micVisualizer.value);
          drawSingleVisualizer(systemAnalyser.value, systemVisualizer.value);
        } else {
          // 单轨模式：只显示当前录制的音源波形
          drawSingleVisualizer(analyser.value, visualizer.value);
        }
      };

      //--------------------录音控制与实时采集 end------------------

      //------------------- 录音保存与详情管理 start------------------
      // --- Recording Management ---
      const saveMetadata = async (recordingDataToSave) => {
        globalError.value = null;
        if (!recordingDataToSave || !recordingDataToSave.id) return null;
        console.log("Saving metadata for:", recordingDataToSave.id);
        try {
          const payload = {
            id: recordingDataToSave.id,
            title: recordingDataToSave.title,
            participants: recordingDataToSave.participants,
            notes: recordingDataToSave.notes,
            summary: recordingDataToSave.summary,
            meeting_date: recordingDataToSave.meeting_date,
          };
          const response = await fetch("/tool/speakr/save", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(payload),
          });
          const data = await response.json();
          if (!response.ok)
            throw new Error(data.error || "Failed to save metadata");

          console.log("Save successful:", data.recording.id);
          const index = recordings.value.findIndex(
            (r) => r.id === data.recording.id
          );
          if (index !== -1) {
            recordings.value[index].title = payload.title;
            recordings.value[index].participants = payload.participants;
            recordings.value[index].notes = payload.notes;
            recordings.value[index].notes_html = data.recording.notes_html;
            recordings.value[index].summary = payload.summary;
            recordings.value[index].summary_html = data.recording.summary_html;
            recordings.value[index].meeting_date = payload.meeting_date;
          }
          if (selectedRecording.value?.id === data.recording.id) {
            selectedRecording.value.title = payload.title;
            selectedRecording.value.participants = payload.participants;
            selectedRecording.value.notes = payload.notes;
            selectedRecording.value.notes_html = data.recording.notes_html;
            selectedRecording.value.summary = payload.summary;
            selectedRecording.value.summary_html = data.recording.summary_html;
            selectedRecording.value.meeting_date = payload.meeting_date;
          }
          return data.recording;
        } catch (error) {
          console.error("Save Metadata Error:", error);
          setGlobalError(`Save failed: ${error.message}`);
          return null;
        }
      };

      const editRecording = (recording) => {
        editingRecording.value = JSON.parse(JSON.stringify(recording));
        showEditModal.value = true;
      };

      const cancelEdit = () => {
        showEditModal.value = false;
        editingRecording.value = null;
      };

      const saveEdit = async () => {
        const success = await saveMetadata(editingRecording.value);
        if (success) {
          cancelEdit();
        }
      };

      const confirmDelete = (recording) => {
        recordingToDelete.value = recording;
        showDeleteModal.value = true;
      };

      const cancelDelete = () => {
        showDeleteModal.value = false;
        recordingToDelete.value = null;
      };

      const deleteRecording = async () => {
        globalError.value = null;
        if (!recordingToDelete.value) return;
        const idToDelete = recordingToDelete.value.id;
        const titleToDelete = recordingToDelete.value.title;
        try {
          const response = await fetch(`/tool/speakr/recording/${idToDelete}`, {
            method: "DELETE",
          });
          const data = await response.json();
          if (!response.ok)
            throw new Error(data.error || "Failed to delete recording");

          recordings.value = recordings.value.filter(
            (r) => r.id !== idToDelete
          );
          totalRecordings.value--; // Update total count

          const queueIndex = uploadQueue.value.findIndex(
            (item) => item.recordingId === idToDelete
          );
          if (queueIndex !== -1) {
            const deletedItem = uploadQueue.value.splice(queueIndex, 1)[0];
            console.log(`Removed item ${deletedItem.clientId} from queue.`);
            if (
              currentlyProcessingFile.value?.clientId === deletedItem.clientId
            ) {
              console.log(
                `Deleting currently processing file: ${titleToDelete}. Stopping poll and moving to next.`
              );
              clearInterval(pollInterval.value);
              pollInterval.value = null;
              resetCurrentFileProcessingState();
              isProcessingActive.value = false;
              await nextTick();
              startProcessingQueue();
            }
          }

          if (selectedRecording.value?.id === idToDelete)
            selectedRecording.value = null;
          cancelDelete();
          console.log(
            `Successfully deleted recording ${idToDelete} (${titleToDelete})`
          );
        } catch (error) {
          console.error("Delete Error:", error);
          setGlobalError(
            `Failed to delete recording "${titleToDelete}": ${error.message}`
          );
          cancelDelete();
        }
      };

      //--------------------录音保存与详情管理 end------------------

      //------------------- 详情页内联编辑 start------------------
      // --- Inline Editing ---
      const toggleEditParticipants = () => {
        editingParticipants.value = !editingParticipants.value;
        if (!editingParticipants.value) {
          saveInlineEdit("participants");
        }
      };

      const toggleEditMeetingDate = () => {
        editingMeetingDate.value = !editingMeetingDate.value;
        if (!editingMeetingDate.value) {
          saveInlineEdit("meeting_date");
        }
      };

      // 点击编辑icon 编辑摘要
      const toggleEditSummary = () => {
        editingSummary.value = !editingSummary.value;
        if (editingSummary.value) {
          // Store current content in temp variable
          tempSummaryContent.value = selectedRecording.value.summary || "";
          nextTick(() => {
            initializeSummaryMarkdownEditor();
          });
        }
      };

      const cancelEditSummary = () => {
        if (summaryMarkdownEditorInstance.value) {
          summaryMarkdownEditorInstance.value.toTextArea();
          summaryMarkdownEditorInstance.value = null;
        }
        editingSummary.value = false;
        // Restore original content
        if (selectedRecording.value) {
          selectedRecording.value.summary = tempSummaryContent.value;
        }
      };

      const saveEditSummary = async () => {
        if (summaryMarkdownEditorInstance.value) {
          selectedRecording.value.summary =
            summaryMarkdownEditorInstance.value.value();
          summaryMarkdownEditorInstance.value.toTextArea();
          summaryMarkdownEditorInstance.value = null;
        }
        editingSummary.value = false;
        await saveInlineEdit("summary");
      };

      const toggleEditNotes = () => {
        editingNotes.value = !editingNotes.value;
        if (editingNotes.value) {
          // Store current content in temp variable
          tempNotesContent.value = selectedRecording.value.notes || "";
          // Initialize markdown editor when entering edit mode
          nextTick(() => {
            initializeMarkdownEditor();
          });
        }
      };

      const cancelEditNotes = () => {
        if (markdownEditorInstance.value) {
          markdownEditorInstance.value.toTextArea();
          markdownEditorInstance.value = null;
        }
        editingNotes.value = false;
        // Restore original content
        if (selectedRecording.value) {
          selectedRecording.value.notes = tempNotesContent.value;
        }
      };

      const saveEditNotes = async () => {
        if (markdownEditorInstance.value) {
          // Get the markdown content from the editor
          selectedRecording.value.notes = markdownEditorInstance.value.value();
          markdownEditorInstance.value.toTextArea();
          markdownEditorInstance.value = null;
        }
        editingNotes.value = false;
        await saveInlineEdit("notes");
      };

      const clickToEditNotes = () => {
        // Allow clicking on empty notes area to start editing
        if (
          !editingNotes.value &&
          (!selectedRecording.value?.notes ||
            selectedRecording.value.notes.trim() === "")
        ) {
          toggleEditNotes();
        }
      };

      const clickToEditSummary = () => {
        // Allow clicking on empty summary area to start editing
        if (
          !editingSummary.value &&
          (!selectedRecording.value?.summary ||
            selectedRecording.value.summary.trim() === "")
        ) {
          toggleEditSummary();
        }
      };

      const autoSaveNotes = async () => {
        if (markdownEditorInstance.value && editingNotes.value) {
          // Just save the content to the model, don't exit edit mode
          selectedRecording.value.notes = markdownEditorInstance.value.value();
          // Silently save to backend without changing UI state
          try {
            const payload = {
              id: selectedRecording.value.id,
              title: selectedRecording.value.title,
              participants: selectedRecording.value.participants,
              notes: selectedRecording.value.notes,
              summary: selectedRecording.value.summary,
              meeting_date: selectedRecording.value.meeting_date,
            };
            const response = await fetch("/tool/speakr/save", {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
              },
              body: JSON.stringify(payload),
            });
            const data = await response.json();
            if (response.ok && data.recording) {
              // Update the HTML rendered versions if they exist
              if (data.recording.notes_html) {
                selectedRecording.value.notes_html = data.recording.notes_html;
              }
            } else {
              console.error("Failed to auto-save notes");
            }
          } catch (error) {
            console.error("Error auto-saving notes:", error);
          }
        }
      };

      const autoSaveSummary = async () => {
        if (summaryMarkdownEditorInstance.value && editingSummary.value) {
          // Just save the content to the model, don't exit edit mode
          selectedRecording.value.summary =
            summaryMarkdownEditorInstance.value.value();
          // Silently save to backend without changing UI state
          try {
            const payload = {
              id: selectedRecording.value.id,
              title: selectedRecording.value.title,
              participants: selectedRecording.value.participants,
              notes: selectedRecording.value.notes,
              summary: selectedRecording.value.summary,
              meeting_date: selectedRecording.value.meeting_date,
            };
            const response = await fetch("/tool/speakr/save", {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
              },
              body: JSON.stringify(payload),
            });
            const data = await response.json();
            if (response.ok && data.recording) {
              // Update the HTML rendered versions if they exist
              if (data.recording.summary_html) {
                selectedRecording.value.summary_html =
                  data.recording.summary_html;
              }
            } else {
              console.error("Failed to auto-save summary");
            }
          } catch (error) {
            console.error("Error auto-saving summary:", error);
          }
        }
      };

      const initializeMarkdownEditor = () => {
        if (!notesMarkdownEditor.value) return;

        try {
          markdownEditorInstance.value = new EasyMDE({
            element: notesMarkdownEditor.value,
            spellChecker: false,
            autofocus: true,
            placeholder: "以Markdown格式输入笔记...",
            initialValue: selectedRecording.value?.notes || "",
            status: false,
            toolbar: [
              "bold",
              "italic",
              "heading",
              "|",
              "quote",
              "unordered-list",
              "ordered-list",
              "|",
              "link",
              "image",
              "|",
              "preview",
              "side-by-side",
              "fullscreen",
              "|",
              "guide",
            ],
            previewClass: ["editor-preview", "notes-preview"],
            theme: isDarkMode.value ? "dark" : "light",
          });

          // Add auto-save functionality
          markdownEditorInstance.value.codemirror.on("change", () => {
            if (autoSaveTimer.value) {
              clearTimeout(autoSaveTimer.value);
            }
            autoSaveTimer.value = setTimeout(() => {
              autoSaveNotes();
            }, autoSaveDelay);
          });
        } catch (error) {
          console.error("Failed to initialize markdown editor:", error);
          // Fallback to regular textarea editing
          editingNotes.value = true;
        }
      };
      const getBaseInfo = async () => {
        try {
          const response = await fetch(`getUserConfig`, {
            method: "GET",
          });
          const data = await response.json();
          if (data.LEADER_SPEECH_BUTTON) {
            baseInfo.value = {
              name: data.LEADER_SPEECH_BUTTON,
              fontSize: data.LEADER_SPEECH_TEXT_SIZE,
            };
          }
          configwords = data.END_PHRASE_PATTERNS || "";
        } catch (error) {
          console.error("获取基础配置出错:", error);
          configwords = "";
        }
      };
      const initializeRecordingMarkdownEditor = () => {
        if (!recordingNotesEditor.value) {
          console.log("Recording notes editor ref not found");
          return;
        }

        // Check if EasyMDE is available
        if (typeof EasyMDE === "undefined") {
          console.error("EasyMDE is not loaded");
          return;
        }

        // Clean up existing instance if any
        if (recordingMarkdownEditorInstance.value) {
          recordingMarkdownEditorInstance.value.toTextArea();
          recordingMarkdownEditorInstance.value = null;
        }

        try {
          console.log("Initializing recording markdown editor");
          recordingMarkdownEditorInstance.value = new EasyMDE({
            element: recordingNotesEditor.value,
            spellChecker: false,
            autofocus: false,
            placeholder: "Type your notes in Markdown format...",
            status: false,
            toolbar: [
              "bold",
              "italic",
              "heading",
              "|",
              "quote",
              "unordered-list",
              "ordered-list",
              "|",
              "link",
              "|",
              "preview",
              "guide",
            ],
            previewClass: ["editor-preview", "notes-preview"],
            theme: isDarkMode.value ? "dark" : "light",
            initialValue: recordingNotes.value || "",
            maxHeight: "300px", // Add height constraint to prevent unlimited growth
            minHeight: "150px", // Minimum height for usability
          });

          // Sync changes back to the reactive variable
          recordingMarkdownEditorInstance.value.codemirror.on("change", () => {
            recordingNotes.value =
              recordingMarkdownEditorInstance.value.value();
          });

          console.log("Recording markdown editor initialized successfully");
        } catch (error) {
          console.error(
            "Failed to initialize recording markdown editor:",
            error
          );
          // Keep as regular textarea if EasyMDE fails
        }
      };
      // 识别启动、停止、清空操作

      const toggleTranscriptionViewMode = () => {
        transcriptionViewMode.value =
          transcriptionViewMode.value === "simple" ? "bubble" : "simple";
        localStorage.setItem(
          "transcriptionViewMode",
          transcriptionViewMode.value
        );
      };

      const toggleChatMaximize = () => {
        if (isChatMaximized.value) {
          // If maximized, restore to normal state
          isChatMaximized.value = false;
        } else {
          // If not maximized, maximize and ensure chat is open
          isChatMaximized.value = true;
          if (!showChat.value) {
            showChat.value = true;
          }
        }
      };

      const saveInlineEdit = async (field) => {
        if (!selectedRecording.value) return;

        const fullPayload = {
          id: selectedRecording.value.id,
          title: selectedRecording.value.title,
          participants: selectedRecording.value.participants,
          notes: selectedRecording.value.notes,
          summary: selectedRecording.value.summary,
          meeting_date: selectedRecording.value.meeting_date,
        };

        try {
          const updatedRecording = await saveMetadata(fullPayload);
          if (updatedRecording) {
            if (field === "notes") {
              selectedRecording.value.notes_html = updatedRecording.notes_html;
            } else if (field === "summary") {
              selectedRecording.value.summary_html =
                updatedRecording.summary_html;
            }

            switch (field) {
              case "participants":
                editingParticipants.value = false;
                break;
              case "meeting_date":
                editingMeetingDate.value = false;
                break;
              case "summary":
                editingSummary.value = false;
                break;
              case "notes":
                editingNotes.value = false;
                break;
            }
            showToast(
              `${
                field.charAt(0).toUpperCase() + field.slice(1).replace("_", " ")
              } updated successfully`
            );
          }
        } catch (error) {
          console.error(`Save ${field} Error:`, error);
          setGlobalError(`Failed to save ${field}: ${error.message}`);
        }
      };

      //--------------------详情页内联编辑 end------------------

      //------------------- 聊天问答功能 start------------------
      // --- Chat Functionality ---
      // Helper function to check if chat is scrolled to bottom (within bottom 5%)
      const isChatScrolledToBottom = () => {
        if (!chatMessagesRef.value) return true;
        const { scrollTop, scrollHeight, clientHeight } = chatMessagesRef.value;
        const scrollableHeight = scrollHeight - clientHeight;
        if (scrollableHeight <= 0) return true; // No scrolling possible
        const scrollPercentage = scrollTop / scrollableHeight;
        return scrollPercentage >= 0.95; // Within bottom 5%
      };

      // Helper function to scroll chat to bottom with smooth behavior
      const scrollChatToBottom = () => {
        if (chatMessagesRef.value) {
          requestAnimationFrame(() => {
            if (chatMessagesRef.value) {
              chatMessagesRef.value.scrollTop =
                chatMessagesRef.value.scrollHeight;
            }
          });
        }
      };

      const sendChatMessage = async () => {
        if (
          !chatInput.value.trim() ||
          isChatLoading.value ||
          !selectedRecording.value ||
          selectedRecording.value.status !== "COMPLETED"
        ) {
          return;
        }

        const message = chatInput.value.trim();

        if (!Array.isArray(chatMessages.value)) {
          chatMessages.value = [];
        }

        chatMessages.value.push({ role: "user", content: message });
        chatInput.value = "";
        isChatLoading.value = true;

        await nextTick();
        // Always scroll to bottom when user sends a new message
        scrollChatToBottom();

        let assistantMessage = null;

        try {
          const messageHistory = chatMessages.value
            .slice(0, -1)
            .map((msg) => ({ role: msg.role, content: msg.content }));

          const response = await fetch("/tool/speakr/chat", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
              recording_id: selectedRecording.value.id,
              message: message,
              message_history: messageHistory,
            }),
          });

          if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.error || "Failed to get chat response");
          }

          const reader = response.body.getReader();
          const decoder = new TextDecoder();
          let buffer = "";

          const processStream = async () => {
            let isFirstChunk = true;
            while (true) {
              const { done, value } = await reader.read();
              if (done) break;

              buffer += decoder.decode(value, { stream: true });
              const lines = buffer.split("\n");
              buffer = lines.pop();

              for (const line of lines) {
                if (line.startsWith("data: ")) {
                  const jsonStr = line.substring(6);
                  if (jsonStr) {
                    try {
                      const data = JSON.parse(jsonStr);
                      if (data.thinking) {
                        // Check scroll position BEFORE updating content
                        const shouldScroll = isChatScrolledToBottom();

                        if (isFirstChunk) {
                          isChatLoading.value = false;
                          assistantMessage = reactive({
                            role: "assistant",
                            content: "",
                            html: "",
                            thinking: data.thinking,
                            thinkingExpanded: false,
                          });
                          chatMessages.value.push(assistantMessage);
                          isFirstChunk = false;
                        } else if (assistantMessage) {
                          // Append to existing thinking content
                          if (assistantMessage.thinking) {
                            assistantMessage.thinking += "\n\n" + data.thinking;
                          } else {
                            assistantMessage.thinking = data.thinking;
                          }
                        }

                        // Scroll if we were at bottom before the update
                        if (shouldScroll) {
                          await nextTick();
                          scrollChatToBottom();
                        }
                      }
                      if (data.delta) {
                        // Check scroll position BEFORE updating content
                        const shouldScroll = isChatScrolledToBottom();

                        if (isFirstChunk) {
                          isChatLoading.value = false;
                          assistantMessage = reactive({
                            role: "assistant",
                            content: "",
                            html: "",
                            thinking: "",
                            thinkingExpanded: false,
                          });
                          chatMessages.value.push(assistantMessage);
                          isFirstChunk = false;
                        }

                        assistantMessage.content += data.delta;
                        assistantMessage.html = marked.parse(
                          assistantMessage.content
                        );

                        // Scroll if we were at bottom before the update
                        if (shouldScroll) {
                          await nextTick();
                          scrollChatToBottom();
                        }
                      }
                      if (data.end_of_stream) {
                        return;
                      }
                      if (data.error) {
                        throw new Error(data.error);
                      }
                    } catch (e) {
                      console.error("Error parsing stream data:", e);
                    }
                  }
                }
              }
            }
          };

          await processStream();
        } catch (error) {
          console.error("Chat Error:", error);
          if (assistantMessage) {
            assistantMessage.content = `Error: ${error.message}`;
            assistantMessage.html = `<span class="text-red-500">Error: ${error.message}</span>`;
          } else {
            chatMessages.value.push({
              role: "assistant",
              content: `Error: ${error.message}`,
              html: `<span class="text-red-500">Error: ${error.message}</span>`,
            });
          }
        } finally {
          isChatLoading.value = false;
          await nextTick();
          // Final scroll only if user is at bottom
          if (isChatScrolledToBottom()) {
            scrollChatToBottom();
          }
        }
      };

      //--------------------聊天问答功能 end------------------

      //------------------- 分栏拖拽与尺寸持久化 start------------------
      // --- Column Resizing ---
      const startColumnResize = (event) => {
        isResizing.value = true;
        const startX = event.clientX;
        const startLeftWidth = leftColumnWidth.value;

        const handleMouseMove = (e) => {
          if (!isResizing.value) return;

          const container = document.getElementById("mainContentColumns");
          if (!container) return;

          const containerRect = container.getBoundingClientRect();
          const deltaX = e.clientX - startX;
          const containerWidth = containerRect.width;
          const deltaPercent = (deltaX / containerWidth) * 100;

          let newLeftWidth = startLeftWidth + deltaPercent;
          newLeftWidth = Math.max(20, Math.min(80, newLeftWidth)); // Constrain between 20% and 80%

          leftColumnWidth.value = newLeftWidth;
          rightColumnWidth.value = 100 - newLeftWidth;
        };

        const handleMouseUp = () => {
          isResizing.value = false;
          document.removeEventListener("mousemove", handleMouseMove);
          document.removeEventListener("mouseup", handleMouseUp);

          // Save to localStorage
          localStorage.setItem("transcriptColumnWidth", leftColumnWidth.value);
          localStorage.setItem("summaryColumnWidth", rightColumnWidth.value);
        };

        document.addEventListener("mousemove", handleMouseMove);
        document.addEventListener("mouseup", handleMouseUp);
        event.preventDefault();
      };

      //--------------------分栏拖拽与尺寸持久化 end------------------

      //------------------- 聊天输入交互 start------------------
      // --- Chat Input Handling ---
      const handleChatKeydown = (event) => {
        if (event.key === "Enter") {
          if (event.ctrlKey || event.shiftKey) {
            // Ctrl+Enter or Shift+Enter: add new line (default behavior)
            return;
          } else {
            // Enter: send message
            event.preventDefault();
            sendChatMessage();
          }
        }
      };

      //--------------------聊天输入交互 end------------------

      //------------------- 音频播放器辅助逻辑 start------------------
      // --- Audio Player ---
      const seekAudio = (time, context = "main") => {
        let audioPlayer = null;
        if (context === "modal") {
          // The audio player in the modal has the class directly on the audio element
          audioPlayer = document.querySelector(
            "audio.speaker-modal-transcript"
          );
        } else {
          audioPlayer = document.querySelector(".main-content-area audio");
        }

        if (audioPlayer) {
          const wasPlaying = !audioPlayer.paused;
          audioPlayer.currentTime = time;
          if (wasPlaying) {
            audioPlayer.play();
          }
        } else {
          console.warn(`Audio player not found for context: ${context}`);
          // Fallback to old method if new one fails
          const oldPlayer = document.querySelector("audio");
          if (oldPlayer) {
            const wasPlaying = !oldPlayer.paused;
            oldPlayer.currentTime = time;
            if (wasPlaying) {
              oldPlayer.play();
            }
          }
        }
      };

      const seekAudioFromEvent = (event) => {
        const segmentElement = event.target.closest("[data-start-time]");
        if (!segmentElement) return;

        const time = parseFloat(segmentElement.dataset.startTime);
        if (isNaN(time)) return;

        // Determine context by checking if we're inside the speaker modal
        const isInSpeakerModal =
          event.target.closest(".speaker-modal-transcript") !== null;
        const context = isInSpeakerModal ? "modal" : "main";

        seekAudio(time, context);
      };

      const onPlayerVolumeChange = (event) => {
        const newVolume = event.target.volume;
        playerVolume.value = newVolume;
        localStorage.setItem("playerVolume", newVolume);
      };

      //--------------------音频播放器辅助逻辑 end------------------

      //------------------- 国际化辅助方法 start------------------
      // --- i18n Helper Functions ---
      // Use the same safeT function that's globally available
      const t = safeT;

      const tc = (key, count, params = {}) => {
        return window.i18n ? window.i18n.tc(key, count, params) : key;
      };

      const changeLanguage = async (langCode) => {
        if (window.i18n) {
          await window.i18n.setLocale(langCode);
          currentLanguage.value = langCode;
          const lang = availableLanguages.value.find(
            (l) => l.code === langCode
          );
          currentLanguageName.value = lang ? lang.nativeName : "English";
          showLanguageMenu.value = false;
          isUserMenuOpen.value = false;

          // Save preference to backend
          try {
            await fetch("/tool/speakr/api/user/preferences", {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
                "X-CSRF-Token": csrfToken.value,
              },
              body: JSON.stringify({ language: langCode }),
            });
          } catch (error) {
            console.error("Failed to save language preference:", error);
          }
        }
      };

      //--------------------国际化辅助方法 end------------------

      //------------------- Toast 提示与复制下载反馈 start------------------
      // --- Toast Notifications ---
      function showToast(
        message,
        icon = "fa-check-circle",
        duration = 2000
      ) {
        const toastContainer = document.getElementById("toastContainer");

        const toast = document.createElement("div");
        toast.className = "toast";
        toast.innerHTML = `<i class="fas ${icon}"></i> ${message}`;

        toastContainer.appendChild(toast);

        setTimeout(() => {
          toast.classList.add("show");
        }, 10);

        setTimeout(() => {
          toast.classList.remove("show");
          setTimeout(() => {
            toastContainer.removeChild(toast);
          }, 300);
        }, duration);
      }

      const animateCopyButton = (button) => {
        button.classList.add("copy-success");

        const originalContent = button.innerHTML;
        button.innerHTML = '<i class="fas fa-check"></i>';

        setTimeout(() => {
          button.classList.remove("copy-success");
          button.innerHTML = originalContent;
        }, 1500);
      };

      const copyMessage = (text, event) => {
        const button = event.currentTarget;

        if (navigator.clipboard && window.isSecureContext) {
          navigator.clipboard
            .writeText(text)
            .then(() => {
              showToast("Copied to clipboard!");
              animateCopyButton(button);
            })
            .catch((err) => {
              console.error("Copy failed:", err);
              showToast(
                "Failed to copy: " + err.message,
                "fa-exclamation-circle"
              );
              fallbackCopyTextToClipboard(text, button);
            });
        } else {
          fallbackCopyTextToClipboard(text, button);
        }
      };

      const fallbackCopyTextToClipboard = (text, button = null) => {
        try {
          const textArea = document.createElement("textarea");
          textArea.value = text;

          textArea.style.position = "fixed";
          textArea.style.left = "-999999px";
          textArea.style.top = "-999999px";
          document.body.appendChild(textArea);

          textArea.focus();
          textArea.select();
          const successful = document.execCommand("copy");

          document.body.removeChild(textArea);

          if (successful) {
            showToast("Copied to clipboard!");
            if (button) animateCopyButton(button);
          } else {
            showToast(
              "Copy failed. Your browser may not support this feature.",
              "fa-exclamation-circle"
            );
          }
        } catch (err) {
          console.error("Fallback copy failed:", err);
          showToast("Unable to copy: " + err.message, "fa-exclamation-circle");
        }
      };

      const copyTranscription = (event) => {
        if (
          !selectedRecording.value ||
          !selectedRecording.value.transcription
        ) {
          showToast(
            "No transcription available to copy.",
            "fa-exclamation-circle"
          );
          return;
        }

        const button = event.currentTarget;
        let textToCopy = "";

        try {
          const transcriptionData = JSON.parse(
            selectedRecording.value.transcription
          );
          if (Array.isArray(transcriptionData)) {
            const wasDiarized = transcriptionData.some(
              (segment) => segment.speaker
            );
            if (wasDiarized) {
              textToCopy = transcriptionData
                .map((segment) => {
                  const speakerName = segment.speaker;
                  return `[${speakerName}]: ${segment.sentence}`;
                })
                .join("\n");
            } else {
              textToCopy = transcriptionData
                .map((segment) => segment.sentence)
                .join("\n");
            }
          } else {
            textToCopy = selectedRecording.value.transcription;
          }
        } catch (e) {
          textToCopy = selectedRecording.value.transcription;
        }

        animateCopyButton(button);

        if (navigator.clipboard && window.isSecureContext) {
          navigator.clipboard
            .writeText(textToCopy)
            .then(() => {
              showToast("转录内容已复制到剪贴板！");
            })
            .catch((err) => {
              console.error("Copy failed:", err);
              showToast(
                "Failed to copy: " + err.message,
                "fa-exclamation-circle"
              );
              fallbackCopyTextToClipboard(textToCopy);
            });
        } else {
          fallbackCopyTextToClipboard(textToCopy);
        }
      };

      const copySummary = (event) => {
        if (!selectedRecording.value || !selectedRecording.value.summary) {
          showToast("No summary available to copy.", "fa-exclamation-circle");
          return;
        }
        const button = event.currentTarget;
        const textToCopy = selectedRecording.value.summary;
        animateCopyButton(button);
        if (navigator.clipboard && window.isSecureContext) {
          navigator.clipboard
            .writeText(textToCopy)
            .then(() => {
              showToast("摘要已复制到剪贴板！");
            })
            .catch((err) => {
              console.error("Copy failed:", err);
              showToast(
                "Failed to copy: " + err.message,
                "fa-exclamation-circle"
              );
              fallbackCopyTextToClipboard(textToCopy);
            });
        } else {
          fallbackCopyTextToClipboard(textToCopy);
        }
      };

      const copyNotes = (event) => {
        if (!selectedRecording.value || !selectedRecording.value.notes) {
          showToast("No notes available to copy.", "fa-exclamation-circle");
          return;
        }
        const button = event.currentTarget;
        const textToCopy = selectedRecording.value.notes;
        animateCopyButton(button);
        if (navigator.clipboard && window.isSecureContext) {
          navigator.clipboard
            .writeText(textToCopy)
            .then(() => {
              showToast("Notes copied to clipboard!");
            })
            .catch((err) => {
              console.error("Copy failed:", err);
              showToast(
                "Failed to copy: " + err.message,
                "fa-exclamation-circle"
              );
              fallbackCopyTextToClipboard(textToCopy);
            });
        } else {
          fallbackCopyTextToClipboard(textToCopy);
        }
      };

      const downloadSummary = async () => {
        if (!selectedRecording.value || !selectedRecording.value.summary) {
          showToast(
            "No summary available to download.",
            "fa-exclamation-circle"
          );
          return;
        }

        try {
          const response = await fetch(
            `/tool/speakr/recording/${selectedRecording.value.id}/download/summary`
          );
          if (!response.ok) {
            const error = await response.json();
            showToast(
              error.error || "Failed to download summary",
              "fa-exclamation-circle"
            );
            return;
          }

          // Create blob and download
          const blob = await response.blob();
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.style.display = "none";
          a.href = url;

          // Get filename from response headers or use default
          const contentDisposition = response.headers.get(
            "Content-Disposition"
          );
          const filename = getDownloadFilenameFromHeaders(
            contentDisposition,
            "摘要.docx"
          );
          a.download = filename;

          document.body.appendChild(a);
          a.click();
          window.URL.revokeObjectURL(url);
          document.body.removeChild(a);

          showToast("Summary downloaded successfully!");
        } catch (error) {
          console.error("Download failed:", error);
          showToast("Failed to download summary", "fa-exclamation-circle");
        }
      };

      const downloadTranscript = async () => {
        if (
          !selectedRecording.value ||
          !selectedRecording.value.transcription
        ) {
          showToast(
            "No transcription available to download.",
            "fa-exclamation-circle"
          );
          return;
        }

        try {
          // First, fetch available templates
          const templatesResponse = await fetch(
            "/tool/speakr/api/transcript-templates"
          );
          let templates = [];
          if (templatesResponse.ok) {
            templates = await templatesResponse.json();
          }

          // If there are templates, show a selection dialog
          let templateId = null;
          if (templates.length > 0) {
            // Create a simple modal for template selection
            const modal = document.createElement("div");
            modal.className =
              "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50";
            modal.innerHTML = `
                            <div class="bg-[var(--bg-secondary)] rounded-lg p-6 max-w-md w-full mx-4">
                                <h3 class="text-lg font-semibold mb-4">Select Template</h3>
                                <div class="space-y-2 max-h-60 overflow-y-auto">
                                    ${templates
                                      .map(
                                        (t) => `
                                        <button class="template-option w-full text-left p-3 rounded border border-[var(--border-primary)] hover:bg-[var(--bg-tertiary)] ${
                                          t.is_default
                                            ? "ring-2 ring-[var(--ring-focus)]"
                                            : ""
                                        }" data-template-id="${t.id}">
                                            <div class="font-medium">${
                                              t.name
                                            }</div>
                                            ${
                                              t.description
                                                ? `<div class="text-sm text-[var(--text-muted)]">${t.description}</div>`
                                                : ""
                                            }
                                            ${
                                              t.is_default
                                                ? '<div class="text-xs text-[var(--text-accent)] mt-1"><i class="fas fa-star mr-1"></i>Default</div>'
                                                : ""
                                            }
                                        </button>
                                    `
                                      )
                                      .join("")}
                                </div>
                                <div class="mt-4 flex gap-2">
                                    <button class="cancel-btn px-4 py-2 bg-[var(--bg-tertiary)] text-[var(--text-secondary)] rounded hover:bg-[var(--bg-accent-light)]">取消</button>
                                    <button class="download-without-template-btn px-4 py-2 bg-[var(--bg-accent)] text-white rounded hover:bg-[var(--bg-accent-hover)]">Download without template</button>
                                </div>
                            </div>
                        `;
            document.body.appendChild(modal);

            // Wait for user selection
            await new Promise((resolve) => {
              modal.querySelectorAll(".template-option").forEach((btn) => {
                btn.addEventListener("click", () => {
                  templateId = btn.dataset.templateId;
                  modal.remove();
                  resolve();
                });
              });

              modal
                .querySelector(".cancel-btn")
                .addEventListener("click", () => {
                  templateId = "cancelled"; // Mark as cancelled
                  modal.remove();
                  resolve();
                });

              modal
                .querySelector(".download-without-template-btn")
                .addEventListener("click", () => {
                  templateId = "none"; // Use 'none' to indicate no template
                  modal.remove();
                  resolve();
                });

              modal.addEventListener("click", (e) => {
                if (e.target === modal) {
                  templateId = "cancelled"; // Mark as cancelled when clicking outside
                  modal.remove();
                  resolve();
                }
              });
            });

            if (
              templateId === null ||
              templateId === undefined ||
              templateId === "cancelled"
            ) {
              // User cancelled
              return;
            }
          }

          // Download the transcript with the selected template
          const url = templateId && templateId !== "none"
            ? `/tool/speakr/recording/${selectedRecording.value.id}/download/transcript?template_id=${templateId}`
            : `/tool/speakr/recording/${selectedRecording.value.id}/download/transcript?template_id=none`;

          const response = await fetch(url);
          if (!response.ok) {
            throw new Error("Failed to download transcript");
          }

          const blob = await response.blob();
          const contentDisposition = response.headers.get(
            "content-disposition"
          );
          const filename = getDownloadFilenameFromHeaders(
            contentDisposition,
            "转录稿.docx"
          );

          // Create download link
          const downloadUrl = URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.href = downloadUrl;
          a.download = filename;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          URL.revokeObjectURL(downloadUrl);

          showToast("Transcript downloaded successfully!");
        } catch (error) {
          console.error("Error downloading transcript:", error);
          showToast("Failed to download transcript", "fa-exclamation-circle");
        }
      };

      const downloadNotes = async () => {
        if (!selectedRecording.value || !selectedRecording.value.notes) {
          showToast("No notes available to download.", "fa-exclamation-circle");
          return;
        }

        try {
          const response = await fetch(
            `/tool/speakr/recording/${selectedRecording.value.id}/download/notes`
          );
          if (!response.ok) {
            const error = await response.json();
            showToast(
              error.error || "Failed to download notes",
              "fa-exclamation-circle"
            );
            return;
          }

          // Create blob and download
          const blob = await response.blob();
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.style.display = "none";
          a.href = url;

          // Get filename from response headers or use default
          const contentDisposition = response.headers.get(
            "Content-Disposition"
          );
          const filename = getDownloadFilenameFromHeaders(
            contentDisposition,
            "笔记.docx"
          );
          a.download = filename;

          document.body.appendChild(a);
          a.click();
          window.URL.revokeObjectURL(url);
          document.body.removeChild(a);

          showToast("Notes downloaded successfully!", "fa-check-circle");
        } catch (error) {
          console.error("Download failed:", error);
          showToast("Failed to download notes", "fa-exclamation-circle");
        }
      };

      const downloadEventICS = async (event) => {
        if (!event || !event.id) {
          showToast("Invalid event data", "fa-exclamation-circle");
          return;
        }

        try {
          const response = await fetch(
            `/tool/speakr/api/event/${event.id}/ics`
          );
          if (!response.ok) {
            const error = await response.json();
            showToast(
              error.error || "Failed to download event",
              "fa-exclamation-circle"
            );
            return;
          }

          // Create blob and download
          const blob = await response.blob();
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.style.display = "none";
          a.href = url;
          a.download = `${event.title || "event"}.ics`;
          document.body.appendChild(a);
          a.click();
          window.URL.revokeObjectURL(url);
          document.body.removeChild(a);

          showToast(
            `Event "${event.title}" downloaded. Open the file to add to your calendar.`,
            "fa-calendar-check",
            3000
          );
        } catch (error) {
          console.error("Download failed:", error);
          showToast("Failed to download event", "fa-exclamation-circle");
        }
      };

      const downloadICS = async () => {
        if (
          !selectedRecording.value ||
          !selectedRecording.value.events ||
          selectedRecording.value.events.length === 0
        ) {
          showToast("No events to export", "fa-exclamation-circle");
          return;
        }

        try {
          const response = await fetch(
            `/tool/speakr/api/recording/${selectedRecording.value.id}/events/ics`
          );
          if (!response.ok) {
            const error = await response.json();
            showToast(
              error.error || "Failed to export events",
              "fa-exclamation-circle"
            );
            return;
          }

          // Create blob and download
          const blob = await response.blob();
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.style.display = "none";
          a.href = url;
          a.download = `events-${
            selectedRecording.value.title || selectedRecording.value.id
          }.ics`;
          document.body.appendChild(a);
          a.click();
          window.URL.revokeObjectURL(url);
          document.body.removeChild(a);

          showToast(
            `Exported ${selectedRecording.value.events.length} events`,
            "fa-calendar-check"
          );
        } catch (error) {
          console.error("Download all events ICS error:", error);
          showToast("Failed to export events", "fa-exclamation-circle");
        }
      };

      const formatEventDateTime = (dateTimeStr) => {
        if (!dateTimeStr) return "";
        try {
          const date = new Date(dateTimeStr);
          const options = {
            weekday: "short",
            year: "numeric",
            month: "short",
            day: "numeric",
            hour: "2-digit",
            minute: "2-digit",
          };
          return date.toLocaleString(undefined, options);
        } catch (e) {
          return dateTimeStr;
        }
      };

      const downloadChat = async () => {
        if (!selectedRecording.value || chatMessages.value.length === 0) {
          showToast("No chat messages to download.", "fa-exclamation-circle");
          return;
        }

        try {
          const response = await fetch(
            `/tool/speakr/recording/${selectedRecording.value.id}/download/chat`,
            {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
                "X-CSRFToken": csrfToken.value,
              },
              body: JSON.stringify({
                messages: chatMessages.value,
              }),
            }
          );

          if (!response.ok) {
            const error = await response.json();
            showToast(
              error.error || "Failed to download chat",
              "fa-exclamation-circle"
            );
            return;
          }

          // Create blob and download
          const blob = await response.blob();
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.style.display = "none";
          a.href = url;

          // Get filename from response headers or use default
          const contentDisposition = response.headers.get(
            "Content-Disposition"
          );
          const filename = getDownloadFilenameFromHeaders(
            contentDisposition,
            "对话记录.docx"
          );
          a.download = filename;

          document.body.appendChild(a);
          a.click();
          window.URL.revokeObjectURL(url);
          document.body.removeChild(a);

          showToast("Notes downloaded successfully!");
        } catch (error) {
          console.error("Download failed:", error);
          showToast("Failed to download notes", "fa-exclamation-circle");
        }
      };

      const clearChat = () => {
        if (chatMessages.value.length > 0) {
          chatMessages.value = [];
          showToast("Chat cleared", "fa-broom");
        }
      };

      const openShareModal = async (recording) => {
        recordingToShare.value = recording;
        shareOptions.share_summary = true;
        shareOptions.share_notes = true;
        generatedShareLink.value = "";
        existingShareDetected.value = false;
        showShareModal.value = true;

        // Check for existing share
        try {
          const response = await fetch(
            `/tool/speakr/api/recording/${recording.id}/share`,
            {
              method: "GET",
            }
          );
          const data = await response.json();
          if (response.ok && data.exists) {
            generatedShareLink.value = data.share_url;
            existingShareDetected.value = true;
            shareOptions.share_summary = data.share.share_summary;
            shareOptions.share_notes = data.share.share_notes;
          }
        } catch (error) {
          console.error("Error checking for existing share:", error);
        }
      };

      const closeShareModal = () => {
        showShareModal.value = false;
        recordingToShare.value = null;
        existingShareDetected.value = false;
      };

      const createShare = async (forceNew = false) => {
        if (!recordingToShare.value) return;
        try {
          const response = await fetch(
            `/tool/speakr/api/recording/${recordingToShare.value.id}/share`,
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({
                ...shareOptions,
                force_new: forceNew,
              }),
            }
          );
          const data = await response.json();
          if (!response.ok)
            throw new Error(data.error || "Failed to create share link");

          generatedShareLink.value = data.share_url;
          existingShareDetected.value = data.existing && !forceNew;

          if (data.existing && !forceNew) {
            // Show that we're using an existing share
            showToast("Using existing share link", "fa-link");
          } else {
            showToast("Share link created successfully!", "fa-check-circle");
          }
        } catch (error) {
          setGlobalError(`Failed to create share link: ${error.message}`);
        }
      };

      const copyShareLink = () => {
        if (!generatedShareLink.value) return;
        navigator.clipboard.writeText(generatedShareLink.value).then(() => {
          showToast("Share link copied to clipboard!");
        });
      };

      const openSharesList = async () => {
        isLoadingShares.value = true;
        showSharesListModal.value = true;
        try {
          const response = await fetch("/tool/speakr/api/shares");
          const data = await response.json();
          if (!response.ok)
            throw new Error(data.error || "Failed to load shared items");
          userShares.value = data;
        } catch (error) {
          setGlobalError(`Failed to load shared items: ${error.message}`);
        } finally {
          isLoadingShares.value = false;
        }
      };

      const closeSharesList = () => {
        showSharesListModal.value = false;
        userShares.value = [];
      };

      const updateShare = async (share) => {
        try {
          const response = await fetch(`/tool/speakr/api/share/${share.id}`, {
            method: "PUT",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
              share_summary: share.share_summary,
              share_notes: share.share_notes,
            }),
          });
          const data = await response.json();
          if (!response.ok)
            throw new Error(data.error || "Failed to update share");
          showToast("Share permissions updated.", "fa-check-circle");
        } catch (error) {
          setGlobalError(`Failed to update share: ${error.message}`);
        }
      };

      const confirmDeleteShare = (share) => {
        shareToDelete.value = share;
        showShareDeleteModal.value = true;
      };

      const cancelDeleteShare = () => {
        shareToDelete.value = null;
        showShareDeleteModal.value = false;
      };

      const deleteShare = async () => {
        if (!shareToDelete.value) return;
        const shareId = shareToDelete.value.id;
        try {
          const response = await fetch(`/tool/speakr/api/share/${shareId}`, {
            method: "DELETE",
          });
          const data = await response.json();
          if (!response.ok)
            throw new Error(data.error || "Failed to delete share");
          userShares.value = userShares.value.filter((s) => s.id !== shareId);
          showToast("Share link deleted successfully.", "fa-check-circle");
          showShareDeleteModal.value = false;
          shareToDelete.value = null;
        } catch (error) {
          setGlobalError(`Failed to delete share: ${error.message}`);
        }
      };

      //--------------------Toast 提示与复制下载反馈 end------------------

      //------------------- 响应式监听与界面联动 start------------------
      // --- Watchers ---
      watch(
        uploadQueue,
        (newQueue, oldQueue) => {
          if (
            newQueue.length === 0 &&
            oldQueue.length > 0 &&
            !isProcessingActive.value
          ) {
            console.log("Upload queue processing finished.");
            setTimeout(() => (progressPopupMinimized.value = true), 500);
            setTimeout(() => {
              if (
                completedInQueue.value === totalInQueue.value &&
                !isProcessingActive.value
              ) {
                progressPopupClosed.value = true;
              }
            }, 2000);
          }
        },
        { deep: true }
      );

      // Watch for changes to speakerMap to handle "This is Me" functionality
      watch(
        speakerMap,
        (newSpeakerMap) => {
          if (!newSpeakerMap) return;

          Object.keys(newSpeakerMap).forEach((speakerId) => {
            const speakerData = newSpeakerMap[speakerId];
            if (
              speakerData.isMe &&
              currentUserName.value &&
              !speakerData.name
            ) {
              // Automatically fill in the user's name when "This is Me" is checked
              speakerData.name = currentUserName.value;
            } else if (
              !speakerData.isMe &&
              speakerData.name === currentUserName.value
            ) {
              // Clear the name if "This is Me" is unchecked and the name matches the current user
              speakerData.name = "";
            }
          });
        },
        { deep: true }
      );

      // Watch for tab changes to save content properly
      watch(selectedTab, (newTab, oldTab) => {
        // Close maximized chat when switching tabs
        if (isChatMaximized.value) {
          isChatMaximized.value = false;
        }

        // Save content when switching away from notes tab but keep editor open
        if (
          oldTab === "notes" &&
          editingNotes.value &&
          markdownEditorInstance.value
        ) {
          // Save the current content from the editor
          const currentContent = markdownEditorInstance.value.value();
          selectedRecording.value.notes = currentContent;
          // Call auto-save instead of saveInlineEdit to keep editor open
          autoSaveNotes();
          // Store that we need to recreate the editor when coming back
          tempNotesContent.value = currentContent;
        }
        // Save content when switching away from summary tab but keep editor open
        if (
          oldTab === "summary" &&
          editingSummary.value &&
          summaryMarkdownEditorInstance.value
        ) {
          // Save the current content from the editor
          const currentContent = summaryMarkdownEditorInstance.value.value();
          selectedRecording.value.summary = currentContent;
          // Call auto-save instead of saveInlineEdit to keep editor open
          autoSaveSummary();
          // Store that we need to recreate the editor when coming back
          tempSummaryContent.value = currentContent;
        }

        // Re-initialize editors when switching back to tabs
        if (newTab === "notes" && editingNotes.value) {
          // Destroy old instance if exists
          if (markdownEditorInstance.value) {
            markdownEditorInstance.value.toTextArea();
            markdownEditorInstance.value = null;
          }
          // Re-initialize the editor in next tick
          nextTick(() => {
            initializeMarkdownEditor();
          });
        }
        if (newTab === "summary" && editingSummary.value) {
          // Destroy old instance if exists
          if (summaryMarkdownEditorInstance.value) {
            summaryMarkdownEditorInstance.value.toTextArea();
            summaryMarkdownEditorInstance.value = null;
          }
          // Re-initialize the editor in next tick
          nextTick(() => {
            initializeSummaryMarkdownEditor();
          });
        }
      });

      // Watch for mobile tab changes similarly
      watch(mobileTab, (newTab, oldTab) => {
        // Save content when switching away from notes tab but keep editor open
        if (
          oldTab === "notes" &&
          editingNotes.value &&
          markdownEditorInstance.value
        ) {
          const currentContent = markdownEditorInstance.value.value();
          selectedRecording.value.notes = currentContent;
          autoSaveNotes(); // Use auto-save instead
          tempNotesContent.value = currentContent;
        }
        // Save content when switching away from summary tab but keep editor open
        if (
          oldTab === "summary" &&
          editingSummary.value &&
          summaryMarkdownEditorInstance.value
        ) {
          const currentContent = summaryMarkdownEditorInstance.value.value();
          selectedRecording.value.summary = currentContent;
          autoSaveSummary(); // Use auto-save instead
          tempSummaryContent.value = currentContent;
        }

        // Re-initialize editors when switching back to tabs on mobile
        if (newTab === "notes" && editingNotes.value) {
          if (markdownEditorInstance.value) {
            markdownEditorInstance.value.toTextArea();
            markdownEditorInstance.value = null;
          }
          nextTick(() => {
            initializeMarkdownEditor();
          });
        }
        if (newTab === "summary" && editingSummary.value) {
          if (summaryMarkdownEditorInstance.value) {
            summaryMarkdownEditorInstance.value.toTextArea();
            summaryMarkdownEditorInstance.value = null;
          }
          nextTick(() => {
            initializeSummaryMarkdownEditor();
          });
        }
      });

      watch(selectedRecording, (newVal, oldVal) => {
        if (newVal?.id !== oldVal?.id) {
          // Save any pending edits before switching recordings
          if (
            editingNotes.value &&
            markdownEditorInstance.value &&
            oldVal?.id
          ) {
            selectedRecording.value = oldVal; // Temporarily restore old recording
            saveEditNotes(); // This will save and cleanup
            selectedRecording.value = newVal; // Switch back to new recording
          }
          if (
            editingSummary.value &&
            summaryMarkdownEditorInstance.value &&
            oldVal?.id
          ) {
            selectedRecording.value = oldVal; // Temporarily restore old recording
            saveEditSummary(); // This will save and cleanup
            selectedRecording.value = newVal; // Switch back to new recording
          }

          chatMessages.value = [];
          showChat.value = false;
          selectedTab.value = "summary";

          editingParticipants.value = false;
          editingMeetingDate.value = false;
          editingSummary.value = false;
          editingNotes.value = false;

          // Fix WebM duration issue by forcing metadata load
          if (newVal?.id) {
            nextTick(() => {
              const audioElements = document.querySelectorAll("audio");
              audioElements.forEach((audio) => {
                if (
                  audio.src &&
                  audio.src.includes(`tool/speakr/audio/${newVal.id}`)
                ) {
                  // For WebM files, we need to seek to end to get duration
                  const fixDuration = () => {
                    if (!isFinite(audio.duration) || audio.duration === 0) {
                      audio.currentTime = 1e101; // Seek to "infinity" to load duration
                      audio.addEventListener(
                        "timeupdate",
                        function resetTime() {
                          audio.currentTime = 0;
                          audio.removeEventListener("timeupdate", resetTime);
                        },
                        { once: true }
                      );
                    }
                  };

                  // Try to fix duration when metadata loads
                  audio.addEventListener("loadedmetadata", fixDuration, {
                    once: true,
                  });

                  // Also try immediately in case metadata is already loaded
                  if (audio.readyState >= 1) {
                    fixDuration();
                  }
                }
              });
            });
          }
        }
      });
      // 会议记录页面
      //------------------- 录音视图切换与实时 ASR 管线 start------------------
      watch(currentView, (newView) => {
        if (newView === 'recording') {
          nextTick(() => {
            initializeRecordingMarkdownEditor();
            getBaseInfo();
            is_final.value = false;
            asrResultOnline.value = '';

            createRealtimeAsrPipeline();
            if (!isPaused.value) {
              startRealtimeAsrPipelines();
            }

            if (audioBlobURL.value) {
              const recordingAudio = document.querySelector('audio[src*="blob:"]');
              if (recordingAudio) {
                const fixDuration = () => {
                  if (!isFinite(recordingAudio.duration) || recordingAudio.duration === 0) {
                    const originalTime = recordingAudio.currentTime;
                    recordingAudio.currentTime = 1e101;
                    recordingAudio.addEventListener(
                      'timeupdate',
                      function resetTime() {
                        recordingAudio.currentTime = originalTime;
                        recordingAudio.removeEventListener('timeupdate', resetTime);
                      },
                      { once: true }
                    );
                  }
                };
                recordingAudio.addEventListener('loadedmetadata', fixDuration, {
                  once: true,
                });
                recordingAudio.addEventListener('canplay', fixDuration, {
                  once: true,
                });
                if (recordingAudio.readyState >= 1) {
                  setTimeout(fixDuration, 100);
                }
              }
            }
          });
        } else {
          disposeRealtimeAsrPipeline();
          analysisResult.value = '';
          asrResult.value = '';
          pausedTranscription.value = '';  // 清空暂停时的转录文本
          clearSystemRealtimeTranscript();
          isEditingTranscription.value = false;
          is_final.value = false;
          if (recordingMarkdownEditorInstance.value) {
            recordingMarkdownEditorInstance.value.toTextArea();
            recordingMarkdownEditorInstance.value = null;
          }
        }
      });
      //--------------------录音视图切换与实时 ASR 管线 end------------------

      // 监听内容变化
      watch(asrResult, async () => {
        await nextTick(); // 等 DOM 更新完再操作
        if (asrTextarea.value) {
          // console.log(asrTextarea.value.scrollHeight,'asrTextarea.value.scrollHeight');

          asrTextarea.value.scrollTop = asrTextarea.value.scrollHeight;
        }
        if (asrResultTextarea.value) {
          asrResultTextarea.value.scrollTop =
            asrResultTextarea.value.scrollHeight;
        }
      });
      // 监听内容变化
      watch(asrResultOnline, async () => {
        await nextTick(); // 等 DOM 更新完再操作

        if (asrResultTextareaOnline.value) {
          asrResultTextareaOnline.value.scrollTop =
            asrResultTextareaOnline.value.scrollHeight;
        }
      });
      watch(asrResultOffline, async () => {
        await nextTick(); // 等 DOM 更新完再操作

        if (asrResultTextareaOnline.value) {
          asrResultTextareaOnline.value.scrollTop =
            asrResultTextareaOnline.value.scrollHeight;
        }
      });
      let realtimeAutoScrollFrame = null;
      const scrollRealtimeTextareaToBottom = (textarea) => {
        if (!textarea) return;
        textarea.scrollTop = textarea.scrollHeight;
      };
      const scrollVisibleRealtimeTextareas = () => {
        [
          asrTextarea.value,
          asrResultTextarea.value,
          asrResultTextareaOnline.value,
          systemAsrResultTextarea.value,
          systemAsrResultTextareaOnline.value,
        ].forEach(scrollRealtimeTextareaToBottom);
      };
      const scheduleRealtimeAutoScroll = async (force = false) => {
        if (isEditingTranscription.value && !force) {
          return;
        }

        await nextTick();
        scrollVisibleRealtimeTextareas();

        if (
          typeof window === "undefined" ||
          typeof window.requestAnimationFrame !== "function"
        ) {
          return;
        }

        if (realtimeAutoScrollFrame !== null) {
          window.cancelAnimationFrame(realtimeAutoScrollFrame);
          realtimeAutoScrollFrame = null;
        }

        realtimeAutoScrollFrame = window.requestAnimationFrame(() => {
          scrollVisibleRealtimeTextareas();
          realtimeAutoScrollFrame = window.requestAnimationFrame(() => {
            scrollVisibleRealtimeTextareas();
            realtimeAutoScrollFrame = null;
          });
        });
      };
      watch(fullRealtimeTranscription, () => {
        scheduleRealtimeAutoScroll();
      });
      watch(fullSystemRealtimeTranscription, () => {
        scheduleRealtimeAutoScroll();
      });
      watch(isEditingTranscription, () => {
        scheduleRealtimeAutoScroll(true);
      });
      watch(isyjDialogVisible, (visible) => {
        if (visible) {
          scheduleRealtimeAutoScroll(true);
        }
      });
      watch(analysisResult, async () => {
        await nextTick(); // 等 DOM 更新完再操作
        if (sumupResultTextarea.value) {
          sumupResultTextarea.value.scrollTop =
            sumupResultTextarea.value.scrollHeight;
        }
      });
      watch(audioBlobURL, (newURL) => {
        if (newURL) {
          nextTick(() => {
            const recordingAudio = document.querySelector(
              'audio[src*="blob:"]'
            );
            
            if (recordingAudio) {
              const fixDuration = () => {
                if (
                  !isFinite(recordingAudio.duration) ||
                  recordingAudio.duration === 0
                ) {
                  const originalTime = recordingAudio.currentTime;
                  // recordingAudio.currentTime = 1e101;
                  recordingAudio.currentTime = originalTime + 0.01
                  
                  recordingAudio.addEventListener(
                    "timeupdate",
                    function resetTime() {
                      recordingAudio.currentTime = originalTime;
                      recordingAudio.removeEventListener(
                        "timeupdate",
                        resetTime
                      );
                    },
                    { once: true }
                  );
                }
              };

              // Multiple events to ensure we catch the duration
              recordingAudio.addEventListener("loadedmetadata", fixDuration, {
                once: true,
              });
              recordingAudio.addEventListener("loadeddata", fixDuration, {
                once: true,
              });
              recordingAudio.addEventListener("canplay", fixDuration, {
                once: true,
              });

              // Also try after a delay
              if (recordingAudio.readyState >= 1) {
                setTimeout(fixDuration, 100);
              }
            }
          });
        }
      });

      watch(playerVolume, (newVolume) => {
        const audioElements = document.querySelectorAll("audio");
        audioElements.forEach((audio) => {
          if (audio.volume !== newVolume) {
            audio.volume = newVolume;
          }
        });
      });

      // Watch for search query changes
      watch(searchQuery, (newQuery) => {
        debouncedSearch(newQuery);
      });

      // 自动应用筛选的监听器已移至 useSidebar

      //--------------------响应式监听与界面联动 end------------------

      //------------------- 运行时配置加载 start------------------
      // --- Configuration Loading ---
      const loadConfiguration = async () => {
        try {
          const response = await fetch("/tool/speakr/api/config");
          if (response.ok) {
            const config = await response.json();
            maxFileSizeMB.value = config.max_file_size_mb || 250;
            chunkingEnabled.value =
              config.chunking_enabled !== undefined
                ? config.chunking_enabled
                : true;
            chunkingMode.value = config.chunking_mode || "size";
            chunkingLimit.value = config.chunking_limit || 20;
            chunkingLimitDisplay.value =
              config.chunking_limit_display || "20MB";
            recordingDisclaimer.value = config.recording_disclaimer || "";
            console.log(
              `Loaded configuration: max size ${
                maxFileSizeMB.value
              }MB, chunking ${
                chunkingEnabled.value ? "enabled" : "disabled"
              } (${chunkingLimitDisplay.value})`
            );
          } else {
            console.warn("Failed to load configuration, using default values");
          }
        } catch (error) {
          console.error("Error loading configuration:", error);
          // Keep default values on error
        }
      };

      const initializeSummaryMarkdownEditor = () => {
        if (!summaryMarkdownEditor.value) return;

        try {
          summaryMarkdownEditorInstance.value = new EasyMDE({
            element: summaryMarkdownEditor.value,
            spellChecker: false,
            autofocus: true,
            placeholder: "Enter summary in Markdown format...",
            initialValue: selectedRecording.value?.summary || "",
            status: false,
            toolbar: [
              "bold",
              "italic",
              "heading",
              "|",
              "quote",
              "unordered-list",
              "ordered-list",
              "|",
              "link",
              "image",
              "|",
              "preview",
              "side-by-side",
              "fullscreen",
              "|",
              "guide",
            ],
            previewClass: ["editor-preview", "notes-preview"],
            theme: isDarkMode.value ? "dark" : "light",
          });

          // Add auto-save functionality
          summaryMarkdownEditorInstance.value.codemirror.on("change", () => {
            if (autoSaveTimer.value) {
              clearTimeout(autoSaveTimer.value);
            }
            autoSaveTimer.value = setTimeout(() => {
              autoSaveSummary();
            }, autoSaveDelay);
          });
        } catch (error) {
          console.error("Failed to initialize summary markdown editor:", error);
          editingSummary.value = true;
        }
      };

      const pollInboxRecordings = async () => {
        try {
          const response = await fetch("/tool/speakr/api/inbox_recordings");
          if (!response.ok) {
            // Silently fail, as this is a background task
            return;
          }
          const inboxRecordings = await response.json();

          if (inboxRecordings && inboxRecordings.length > 0) {
            inboxRecordings.forEach((recording) => {
              // Add to main recordings list if it's not there already
              const existingRecording = recordings.value.find(
                (r) => r.id === recording.id
              );
              if (!existingRecording) {
                recordings.value.unshift(recording);
                totalRecordings.value++; // Update total count
              }

              // Check if this recording is already in the upload queue or currently being processed
              const existingItem = uploadQueue.value.find(
                (item) => item.recordingId === recording.id
              );
              const isCurrentlyProcessing =
                currentlyProcessingFile.value &&
                currentlyProcessingFile.value.recordingId === recording.id;

              // Don't add if it's already in queue or being processed
              if (existingItem || isCurrentlyProcessing) {
                // Update status if the existing item status has changed
                if (existingItem && existingItem.status !== recording.status) {
                  console.log(
                    `Updating status for existing recording ${recording.original_filename}: ${existingItem.status} -> ${recording.status}`
                  );
                }
                return;
              }

              // Only add recordings that are still processing (not completed)
              if (recording.status === "COMPLETED") {
                console.log(
                  `Skipping completed inbox recording: ${recording.original_filename}`
                );
                return;
              }

              console.log(
                `Found new inbox recording: ${recording.original_filename} (status: ${recording.status})`
              );

              // Don't add recordings that are already being handled by main processing
              if (
                recording.status === "SUMMARIZING" &&
                isProcessingActive.value
              ) {
                console.log(
                  `Skipping ${recording.original_filename} - already in summarization phase of main processing`
                );
                return;
              }

              // Add it to the queue to be displayed in the progress modal
              const inboxItem = {
                file: {
                  name:
                    recording.original_filename || `Recording ${recording.id}`,
                  size: recording.file_size || 0,
                },
                status: "pending", // It's already being processed on backend
                recordingId: recording.id,
                clientId: `inbox-${recording.id}-${Date.now()}`,
                error: null,
                isReprocessing: true, // Use reprocessing logic to poll for status
                reprocessType: "transcription",
              };
              uploadQueue.value.unshift(inboxItem);

              // If nothing is currently being processed, make this the active item for the main progress bar
              if (!isProcessingActive.value && !currentlyProcessingFile.value) {
                currentlyProcessingFile.value = inboxItem;
              }

              // Show progress modal if it's hidden
              progressPopupMinimized.value = false;
              progressPopupClosed.value = false;

              // Start polling its status
              startReprocessingPoll(recording.id);
            });
          }
        } catch (error) {
          console.error("Error polling for inbox recordings:", error);
        }
      };

      //--------------------运行时配置加载 end------------------

      //------------------- 录音格式兼容检测 start------------------
      // --- Audio Format Detection ---
      const detectSupportedAudioFormats = () => {
        const formats = [
          "audio/webm;codecs=opus",
          "audio/webm;codecs=vp9",
          "audio/webm",
          "audio/mp4;codecs=mp4a.40.2",
          "audio/mp4",
          "audio/ogg;codecs=opus",
          "audio/wav",
        ];

        const supportedFormats = formats.filter((format) =>
          MediaRecorder.isTypeSupported(format)
        );
        console.log("Supported audio recording formats:", supportedFormats);

        if (supportedFormats.length === 0) {
          console.warn(
            "No optimized audio formats supported, will use browser default"
          );
        }

        return supportedFormats;
      };

      //--------------------录音格式兼容检测 end------------------

      //------------------- 系统音频能力检测 start------------------
      // --- System Audio Detection ---
      const detectSystemAudioCapabilities = async () => {
        systemAudioSupported.value = false;
        canRecordSystemAudio.value = false;
        systemAudioError.value = "";

        // Check if getDisplayMedia is available
        if (
          !navigator.mediaDevices ||
          !navigator.mediaDevices.getDisplayMedia
        ) {
          systemAudioError.value = "getDisplayMedia API not supported";
          return;
        }

        try {
          // Test if we can request system audio (this will prompt user)
          // We'll do this only when user actually tries to record
          systemAudioSupported.value = true;
          canRecordSystemAudio.value = true;
          systemAudioError.value = "";
        } catch (error) {
          systemAudioError.value = error.message;
          console.warn("System audio detection failed:", error);
        }
      };

      const detectBrowser = () => {
        const userAgent = navigator.userAgent;
        if (userAgent.includes("Firefox")) {
          browser.value = "firefox";
        } else if (userAgent.includes("Chrome")) {
          browser.value = "chrome";
        } else if (userAgent.includes("Safari")) {
          browser.value = "safari";
        } else if (
          userAgent.includes("MSIE") ||
          userAgent.includes("Trident/")
        ) {
          browser.value = "ie";
        } else {
          browser.value = "unknown";
        }
      };

      //--------------------系统音频能力检测 end------------------

      //------------------- 生命周期初始化 start------------------
      // --- Lifecycle ---
      onMounted(async () => {
        const loader = document.getElementById("loader");
        const app = document.getElementById("app");
        if (loader) {
          loader.style.opacity = "0";
          setTimeout(() => {
            loader.style.display = "none";
          }, 500);
        }
        if (app) {
          app.style.opacity = "1";
        }
        const appDiv = document.getElementById("app");
        if (appDiv) {
          const asrFlag = appDiv.dataset.useAsrEndpoint;
          useAsrEndpoint.value = asrFlag === "True" || asrFlag === "true";
          currentUserName.value = appDiv.dataset.currentUserName || "";
        }

        // Load configuration first
        await loadConfiguration();

        // Detect system audio capabilities
        await detectSystemAudioCapabilities();

        detectBrowser();

        // Check if language was changed in account settings
        if (localStorage.getItem("ui_language_changed") === "true") {
          localStorage.removeItem("ui_language_changed");
          // Force reload to apply new language
          window.location.reload();
          return;
        }

        // i18n is already initialized before Vue app creation
        if (window.i18n) {
          currentLanguage.value = window.i18n.getLocale();
          availableLanguages.value = window.i18n.getAvailableLocales();
          const lang = availableLanguages.value.find(
            (l) => l.code === currentLanguage.value
          );
          currentLanguageName.value = lang ? lang.nativeName : "English";

          // Listen for locale changes
          window.addEventListener("localeChanged", (event) => {
            currentLanguage.value = event.detail.locale;
            const lang = availableLanguages.value.find(
              (l) => l.code === currentLanguage.value
            );
            currentLanguageName.value = lang ? lang.nativeName : "English";
          });
        }

        loadRecordings();
        loadTags();
        loadDrafts();  // 加载草稿列表
        initializeDarkMode();
        initializeColorScheme();

        const savedVolume = localStorage.getItem("playerVolume");
        if (savedVolume !== null) {
          playerVolume.value = parseFloat(savedVolume);
        }

        const savedTranscriptionViewMode = localStorage.getItem(
          "transcriptionViewMode"
        );
        if (savedTranscriptionViewMode) {
          transcriptionViewMode.value = savedTranscriptionViewMode;
        }

        // Load saved column widths
        const savedLeftWidth = localStorage.getItem("transcriptColumnWidth");
        const savedRightWidth = localStorage.getItem("summaryColumnWidth");
        if (savedLeftWidth && savedRightWidth) {
          leftColumnWidth.value = parseFloat(savedLeftWidth);
          rightColumnWidth.value = parseFloat(savedRightWidth);
        }

        const updateMobileStatus = () => {
          windowWidth.value = window.innerWidth;
        };

        window.addEventListener("resize", updateMobileStatus);
        updateMobileStatus();

        // Start polling for inbox recordings
        setInterval(pollInboxRecordings, 10000);

        const handleEsc = (e) => {
          if (e.key === "Escape") {
            if (showColorSchemeModal.value) {
              closeColorSchemeModal();
            }
            if (showEditModal.value) {
              cancelEdit();
            }
            if (showDeleteModal.value) {
              cancelDelete();
            }
            if (showSortOptions.value) {
              showSortOptions.value = false;
            }
          }
        };
        document.addEventListener("keydown", handleEsc);

        // Click away handler for dropdowns
        const handleClickAway = (e) => {
          // Close user menu if clicking outside
          if (isUserMenuOpen.value) {
            // Check if we clicked within the user menu area (button or dropdown)
            const userMenuButton = e.target.closest(
              'button[class*="flex items-center gap"]'
            );
            const userMenuDropdown = e.target.closest(
              'div[class*="absolute right-0"]'
            );

            // Check if the click was on the user menu button specifically
            const isUserMenuButtonClick =
              userMenuButton &&
              userMenuButton.querySelector("i.fa-user-circle");

            // If we didn't click on the user menu button or dropdown, close it
            if (!isUserMenuButtonClick && !userMenuDropdown) {
              isUserMenuOpen.value = false;
            }
          }

          // Close speaker suggestions if clicking outside in the modal
          if (showSpeakerModal.value) {
            // If not clicking on an input field or suggestion dropdown
            const clickedOnInput = e.target.closest('input[type="text"]');
            const clickedOnSuggestion = e.target.closest(
              '[class*="absolute z-10"]'
            );

            if (!clickedOnInput && !clickedOnSuggestion) {
              // Close all suggestion dropdowns
              Object.keys(speakerSuggestions.value).forEach((speakerId) => {
                speakerSuggestions.value[speakerId] = [];
              });
            }
          }
        };
        document.addEventListener("click", handleClickAway);
        window.addEventListener("beforeunload", stopDualTranscriptResize);
      });

      //--------------------生命周期初始化 end------------------

      //------------------- 实时转写手动编辑模式 start------------------
      // --- 转录文本编辑功能 ---
      // 用户手动编辑后，以编辑结果为准，旧的实时结果不再回灌。
      let editModeOriginalText = "";

      function enterEditMode() {
        editModeOriginalText = fullRealtimeTranscription.value || '';
        editableText.value = editModeOriginalText;
        systemEditableText.value = fullSystemRealtimeTranscription.value || '';
        realtimeAsrPipeline?.enterEditMode(editModeOriginalText);
        systemRealtimeAsrPipeline?.enterEditMode(systemEditableText.value);
        isEditingTranscription.value = true;
      }

      function exitEditMode() {
        const nextText = editableText.value ?? '';
        const nextSystemText = systemEditableText.value ?? '';

        isEditingTranscription.value = false;

        if (realtimeAsrPipeline) {
          realtimeAsrPipeline.applyEditedText(nextText);
        } else {
          pausedTranscription.value = nextText;
          asrResult.value = nextText;
          asrResultOnline.value = '';
          asrResultOffline.value = '';
        }

        if (systemRealtimeAsrPipeline) {
          systemRealtimeAsrPipeline.applyEditedText(nextSystemText);
        } else {
          systemPausedTranscription.value = nextSystemText;
          systemAsrResult.value = nextSystemText;
          systemAsrResultOnline.value = '';
          systemAsrResultOffline.value = '';
        }

        editModeOriginalText = nextText;
      }
      //--------------------实时转写手动编辑模式 end------------------

      //------------------- 模板暴露与事件出口 start------------------
      return {
        // Core State
        currentView,
        dragover,
        recordings,
        selectedRecording,
        selectedTab,
        searchQuery,
        isLoadingRecordings,
        globalError,
        maxFileSizeMB,
        chunkingEnabled,
        chunkingMode,
        chunkingLimit,
        chunkingLimitDisplay,
        sortBy: sidebar.sortBy,
        showAdvancedFilters: sidebar.showAdvancedFilters,
        filterTags: sidebar.filterTags,
        filterDateRange: sidebar.filterDateRange,
        filterDatePreset: sidebar.filterDatePreset,
        filterTextQuery: sidebar.filterTextQuery,

        // Pagination State
        currentPage,
        perPage,
        totalRecordings,
        totalPages,
        hasNextPage,
        hasPrevPage,
        isLoadingMore,

        // UI State
        browser,
        isSidebarCollapsed: sidebar.isSidebarCollapsed,
        searchTipsExpanded,
        isUserMenuOpen,
        isDarkMode,
        currentColorScheme,
        showColorSchemeModal,
        windowWidth,
        isMobileScreen,
        mobileTab,
        isMetadataExpanded,

        // i18n State
        currentLanguage,
        currentLanguageName,
        availableLanguages,
        showLanguageMenu,

        // Upload State
        uploadQueue,
        currentlyProcessingFile,
        processingProgress,
        processingMessage,
        isProcessingActive,
        progressPopupMinimized,
        progressPopupClosed,
        totalInQueue,
        completedInQueue,
        finishedFilesInQueue,
        clearCompletedUploads,

        // Audio Recording
        editingDraftId: sidebar.editingDraftId,
        editingDraftName: sidebar.editingDraftName,

        isRecording,
        canRecordAudio,
        canRecordSystemAudio,
        systemAudioSupported,
        systemAudioError,
        audioBlobURL,
        recordingTime,
        recordingNotes,
        visualizer,
        micVisualizer,
        systemVisualizer,
        recordingMode,
        recordingDisclaimer,
        showRecordingDisclaimerModal,
        acceptRecordingDisclaimer,
        cancelRecordingDisclaimer,
        showAdvancedOptions,
        uploadLanguage,
        uploadMinSpeakers,
        uploadMaxSpeakers,
        asrLanguage,
        asrMinSpeakers,
        asrMaxSpeakers,
        availableTags,
        selectedTagIds,
        selectedTags,
        uploadTagSearchFilter,
        filteredAvailableTagsForUpload,
        onTagSelected,
        addTagToSelection,
        removeTagFromSelection,
        showSystemAudioHelp,

        // Draft/Pause Recording
        isPaused,
        isStoppingRecording,
        isPausingRecording,
        currentDraftId,
        showRecordingControls,
        pausedDuration,
        pausedTranscription,
        draftRecordings,
        draftsExpanded,
        pauseRecording,
        resumeRecording,
        loadDrafts,
        continueDraftRecording,
        deleteDraft,

        // Modal State
        showEditModal,
        showDeleteModal,
        showResetModal: recordingOps.showResetModal,
        editingRecording,
        recordingToDelete,
        showEditTagsModal,
        selectedNewTagId,
        tagSearchFilter,
        filteredAvailableTagsForModal,
        editRecordingTags,
        closeEditTagsModal,
        addTagToRecording,
        removeTagFromRecording,
        getRecordingTags,
        getAvailableTagsForRecording,
        filterByTag: sidebar.filterByTag,
        clearTagFilter: sidebar.clearTagFilter,
        applyAdvancedFilters: sidebar.applyAdvancedFilters,
        clearAllFilters: sidebar.clearAllFilters,
        showTextEditorModal: recordingOps.showTextEditorModal,
        showAsrEditorModal: recordingOps.showAsrEditorModal,
        editingTranscriptionContent: recordingOps.editingTranscriptionContent,
        editingSegments: recordingOps.editingSegments,
        availableSpeakers: recordingOps.availableSpeakers,

        // Inline Editing
        editingParticipants,
        editingMeetingDate,
        editingSummary,
        editingNotes,

        // Markdown Editor
        notesMarkdownEditor,
        markdownEditorInstance,
        summaryMarkdownEditor,
        summaryMarkdownEditorInstance,
        recordingNotesEditor,

        // Transcription
        transcriptionViewMode,
        legendExpanded,
        highlightedSpeaker: recordingOps.highlightedSpeaker,
        processedTranscription,

        // Chat
        showChat,
        isChatMaximized,
        toggleChatMaximize,
        chatMessages,
        chatInput,
        isChatLoading,
        chatMessagesRef,

        // Audio Player
        playerVolume,

        // Column Resizing
        leftColumnWidth,
        rightColumnWidth,
        isResizing,

        // App Configuration
        useAsrEndpoint,
        currentUserName,

        // Computed
        filteredRecordings,
        groupedRecordings: sidebar.groupedRecordings,
        activeRecordingMetadata,
        datePresetOptions: sidebar.datePresetOptions,
        languageOptions,

        // Color Schemes
        colorSchemes,
        asrResult,
        asrResultOnline,
        asrResultOffline,
        fullRealtimeTranscription,
        fullSystemRealtimeTranscription,
        isDualRealtimeTranscription,
        systemEditableText,
        dualTranscriptContainer,
        dualTranscriptTopPercent,
        startDualTranscriptResize,
        asrTextarea,
        asrResultTextarea,
        asrResultTextareaOnline,
        systemAsrResultTextarea,
        systemAsrResultTextareaOnline,
        analysisResult,
        sumupResultTextarea,
        isDialogVisible,
        isyjDialogVisible,
        baseInfo,
        isModalOpen,
        urlinfo,
        urlmsg,
        zjloding,
        // Methods
        openmodel,
        openzjmodel,
        closeModal,
        setGlobalError,
        formatFileSize,
        formatDisplayDate,
        formatStatus,
        getStatusClass,
        formatTime,
        t,
        tc,
        changeLanguage,
        toggleDarkMode,
        applyColorScheme,
        initializeColorScheme,
        openColorSchemeModal,
        closeColorSchemeModal,
        selectColorScheme,
        resetColorScheme,
        toggleSidebar: sidebar.toggleSidebar,
        switchToUploadView,
        selectRecording,
        handleDragOver,
        handleDragLeave,
        handleDrop,
        handleFileSelect,
        addFilesToQueue,
        startRecording,
        stopRecording,
        uploadRecordedAudio,
        discardRecording,
        downloadRecordedAudio,
        loadRecordings,
        loadMoreRecordings: sidebar.loadMoreRecordings,
        performSearch,
        debouncedSearch,
        saveMetadata,
        editRecording,
        cancelEdit,
        saveEdit,
        confirmDelete,
        cancelDelete,
        deleteRecording,
        toggleEditParticipants,
        toggleEditMeetingDate,
        toggleEditSummary,
        cancelEditSummary,
        saveEditSummary,
        toggleEditNotes,
        cancelEditNotes,
        saveEditNotes,
        initializeMarkdownEditor,
        saveInlineEdit,
        clickToEditNotes,
        clickToEditSummary,
        autoSaveNotes,
        autoSaveSummary,
        sendChatMessage,
        isChatScrolledToBottom,
        scrollChatToBottom,
        startColumnResize,
        handleChatKeydown,
        seekAudio,
        seekAudioFromEvent,
        onPlayerVolumeChange,
        showToast,
        copyMessage,
        copyTranscription,
        copySummary,
        copyNotes,
        downloadSummary,
        downloadTranscript,
        downloadNotes,
        downloadChat,
        clearChat,
        downloadEventICS,
        downloadICS,
        formatEventDateTime,
        toggleInbox,
        toggleHighlight,
        toggleTranscriptionViewMode,
        reprocessTranscription,
        reprocessSummary,
        generateSummary,
        resetRecordingStatus,
        confirmReset,
        cancelReset,
        executeReset,
        openTranscriptionEditor,
        openTextEditorModal,
        closeTextEditorModal,
        saveTranscription,
        openAsrEditorModal,
        closeAsrEditorModal,
        saveAsrTranscription,
        adjustTime,
        filterSpeakers,
        openSpeakerSuggestions,
        closeSpeakerSuggestions,
        selectSpeaker,
        addSegment,
        removeSegment,
        showReprocessModal: recordingOps.showReprocessModal,
        reprocessType: recordingOps.reprocessType,
        reprocessRecording: recordingOps.reprocessRecording,
        cancelReprocess,
        executeReprocess,
        asrReprocessOptions: recordingOps.asrReprocessOptions,
        showSpeakerModal: recordingOps.showSpeakerModal,
        showShareModal,
        recordingToShare,
        shareOptions,
        generatedShareLink,
        existingShareDetected,
        userShares,
        isLoadingShares,
        showSharesListModal,
        shareToDelete,
        showShareDeleteModal,
        confirmDeleteShare,
        cancelDeleteShare,
        speakerMap: recordingOps.speakerMap,
        speakerDisplayMap: recordingOps.speakerDisplayMap,
        modalSpeakers: recordingOps.modalSpeakers,
        regenerateSummaryAfterSpeakerUpdate: recordingOps.regenerateSummaryAfterSpeakerUpdate,
        identifiedSpeakers,
        identifiedSpeakersInOrder: recordingOps.identifiedSpeakersInOrder,
        hasSpeakerNames: recordingOps.hasSpeakerNames,
        openSpeakerModal,
        closeSpeakerModal,
        saveSpeakerNames,
        highlightedTranscript: recordingOps.highlightedTranscript,
        highlightedSpeaker: recordingOps.highlightedSpeaker,
        highlightSpeakerInTranscript,
        focusSpeaker,
        blurSpeaker,
        clearSpeakerHighlight,
        currentSpeakerGroupIndex: recordingOps.currentSpeakerGroupIndex,
        speakerGroups: recordingOps.speakerGroups,
        navigateToNextSpeakerGroup,
        navigateToPrevSpeakerGroup,
        speakerSuggestions: recordingOps.speakerSuggestions,
        loadingSuggestions: recordingOps.loadingSuggestions,
        activeSpeakerInput: recordingOps.activeSpeakerInput,
        searchSpeakers,
        selectSpeakerSuggestion,
        closeSpeakerSuggestionsOnClick,
        autoIdentifySpeakers,
        isAutoIdentifying: recordingOps.isAutoIdentifying,
        formatDuration,
        openShareModal,
        closeShareModal,
        createShare,
        openSharesList,
        closeSharesList,
        updateShare,
        deleteShare,
        copyShareLink,
        startDraftRename: sidebar.startDraftRename,
        saveDraftRename: sidebar.saveDraftRename,
        editingDraftId: sidebar.editingDraftId,
        editingDraftName: sidebar.editingDraftName,
        draftNameInput,
        draftRecordings,
        deleteDraft,
        continueDraftRecording,
        loadDrafts,

        // Recording Size Monitoring
        estimatedFileSize,
        fileSizeWarningShown,
        recordingQuality,
        actualBitrate,
        maxRecordingMB,
        sizeCheckInterval,
        updateFileSizeEstimate,
        startSizeMonitoring,
        stopSizeMonitoring,
        sumupResult,
        lastTimer,
        promptVisible,
        promptList,
        openPromptModal,
        closePromptModal,
        confirmPromptSelection,
        selectedPromptId,
        recommendPromptId,
        recommendPromptName,
        isMarkdown,
        renderedMarkdown,        recommendPromptReason,
        selectedScene,
        setSelectedScene,
        showSpeaker,
        isEditingTranscription,
        editableText,
        enterEditMode,
        exitEditMode,
      };
    },
    delimiters: ["${", "}"],
  });

      //--------------------模板暴露与事件出口 end------------------

  //--------------------Vue 应用主体定义 end------------------

  //------------------- Vue 全局注入与挂载 start------------------
  // Add t function as a global property BEFORE mounting so it's available in templates immediately
  app.config.globalProperties.t = safeT;

  // Also add tc for pluralization
  app.config.globalProperties.tc = (key, count, params = {}) => {
    if (!window.i18n || !window.i18n.tc) {
      return key;
    }
    return window.i18n.tc(key, count, params);
  };

  // Provide t and tc to the app
  app.provide("t", safeT);
  app.provide("tc", (key, count, params = {}) => {
    if (!window.i18n || !window.i18n.tc) {
      return key;
    }
    return window.i18n.tc(key, count, params);
  });

  // Mount the app
  app.mount("#app");

  // Hide loading overlay after Vue is mounted and ready
  Vue.nextTick(() => {
    const overlay = document.querySelector(".app-loading-overlay");
    if (overlay) {
      // Small delay to ensure everything is rendered
      setTimeout(() => {
        overlay.classList.add("fade-out");
        setTimeout(() => {
          overlay.remove();
          document.body.classList.remove("app-loading");
        }, 300);
      }, 100);
    } else {
      document.body.classList.remove("app-loading");
    }
  });
  //--------------------Vue 全局注入与挂载 end------------------
});