const { createApp, ref, reactive, computed, onMounted, watch, nextTick } = Vue;
// 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
  if ("serviceWorker" in navigator) {
    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 webReader = null;
  let webReader2 = null;
  // ASR Recorder 实例（提升到外层以便跨录音周期清理）
  let rec = null;
  let rec2 = null;
  // openMixedStream 创建的 AudioContext（需跨周期清理）
  let asrAudioContext = null;
  let asrAudioContext2 = null;
  // 用于标记是否需要重置转录状态（暂停/恢复时使用）
  let resetTranscriptionFlag = false;
  let pendingCorrectionCount = 0;
  //--------------------页面启动与 Vue 初始化 end------------------

  //------------------- Vue 应用主体定义 start------------------
  const app = createApp({
    setup() {
      //------------------- 响应式状态与实时转写基础状态 start------------------
      // --- Core State ---
      // 新增说话人占位
      let segmentList = [];
      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
      const showAdvancedFilters = ref(false);
      const filterTags = ref([]); // Selected tag IDs for filtering
      const filterDateRange = ref({ start: "", end: "" });
      const filterDatePreset = ref(""); // 'today', 'yesterday', 'week', 'month', etc.
      const filterTextQuery = ref("");

      // --- 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);
      const searchDebounceTimer = ref(null);

      // --- Enhanced Search & Organization State ---
      const sortBy = ref("created_at"); // 'created_at' or 'meeting_date'
      const selectedTagFilter = ref(null); // For filtering by clicked tag

      // --- UI State ---
      const browser = ref("unknown");
      const isSidebarCollapsed = ref(false);
      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
      const showRecordingDisclaimerModal = ref(false); // Controls disclaimer modal visibility
      const pendingRecordingMode = ref(null); // Stores the recording mode while showing disclaimer

      // --- Audio Recording State ---
      const editingDraftId = ref(null);
      const editingDraftName = ref('');
      const draftNameInput = ref(null);

      const isRecording = ref(false);
      const isStoppingRecording = ref(false);
      const mediaRecorder = ref(null);
      const audioChunks = ref([]);
      const audioBlobURL = ref(null);
      const recordingTime = ref(0);
      const recordingInterval = ref(null);
      const canRecordAudio = ref(
        navigator.mediaDevices && navigator.mediaDevices.getUserMedia
      );
      const canRecordSystemAudio = ref(false);
      const systemAudioSupported = ref(false);
      const systemAudioError = ref("");
      const recordingNotes = ref("");
      const showSystemAudioHelp = ref(false);
      // ASR options for recording view
      const asrLanguage = ref(""); // Empty string for auto-detect
      const asrMinSpeakers = ref(""); // Empty string for auto-detect
      const asrMaxSpeakers = ref(""); // Empty string for auto-detect
      const audioContext = ref(null);
      const analyser = ref(null);
      const micAnalyser = ref(null);
      const systemAnalyser = ref(null);
      const visualizer = ref(null);
      const micVisualizer = ref(null);
      const systemVisualizer = ref(null);
      const animationFrameId = ref(null);
      const recordingMode = ref("microphone"); // 'microphone', 'system', or 'both'
      const activeStreams = ref([]); // Track active streams for cleanup

      // --- Recording Size Monitoring ---
      const estimatedFileSize = ref(0);
      const fileSizeWarningShown = ref(false);
      const recordingQuality = ref("optimized"); // 'optimized', 'standard', 'high'
      const actualBitrate = ref(0);
      const maxRecordingMB = ref(200); // Maximum recording size before auto-stop
      const sizeCheckInterval = ref(null);

      // --- Draft/Pause Recording State ---
      const isPaused = ref(false);
      const currentDraftId = ref(null);
      const pausedDuration = ref(0);  // 暂停前的累计时长
      const pausedTranscription = ref('');  // 暂停前的转录文本
      const draftRecordings = ref([]);  // 草稿列表
      const draftsExpanded = ref(true);  // 草稿列表是否展开

      // 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);
      const asrReprocessOptions = reactive({
        language: "",
        min_speakers: null,
        max_speakers: null,
      });
      const speakerMap = ref({});
      const regenerateSummaryAfterSpeakerUpdate = ref(true);
      const speakerSuggestions = ref({});
      const loadingSuggestions = ref({});
      const activeSpeakerInput = ref(null);

      // --- 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("");
      const asrResult = ref("");
      const asrResultOnline = ref("");
      const asrResultOffline = ref("");
      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 urlmsg = ref("获取链接中...");
      const urlinfo = ref("");
      const zjloding = ref(false);
      const showSpeaker = ref(true);

      // --- 转录文本编辑状态 ---
      const isEditingTranscription = ref(false);
      const editableText = ref("");
      const fullRealtimeTranscription = computed(() => {
        return (
          (asrResult.value || "") +
          (asrResultOffline.value || "") +
          (asrResultOnline.value || "")
        );
      });
      let segmentRenderStartIndex = 0;
      let liveTranscriptionEpoch = 0;
      let realtimeTimestampBarrierMs = -1;
      let realtimeEditCarryover = null;
      let clearRealtimePipelineRef = null;
      let getLatestRealtimeTimestampRef = null;
      let buildRealtimeEditCarryoverRef = null;
      let renderFullTextRef = null;
      let editModeBufferStartIndex = 0;

      function startNewRealtimeEpoch({
        barrierTimestampMs = null,
        clearTimestampBarrier = false,
        clearEditCarryover = true,
      } = {}) {
        liveTranscriptionEpoch += 1;

        if (clearEditCarryover) {
          realtimeEditCarryover = null;
        }

        if (clearTimestampBarrier) {
          realtimeTimestampBarrierMs = -1;
        } else if (Number.isFinite(barrierTimestampMs)) {
          realtimeTimestampBarrierMs = Math.max(
            realtimeTimestampBarrierMs,
            barrierTimestampMs
          );
        }

        if (clearRealtimePipelineRef) {
          clearRealtimePipelineRef({
            preserveTimestampBarrier: !clearTimestampBarrier,
          });
        }
      }

      //--------------------响应式状态与实时转写基础状态 end------------------

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

      const datePresetOptions = computed(() => {
        return [
          { value: "today", label: t("sidebar.today") },
          { value: "yesterday", label: t("sidebar.yesterday") },
          { value: "thisweek", label: t("sidebar.thisWeek") },
          { value: "lastweek", label: t("sidebar.lastWeek") },
          { value: "thismonth", label: t("sidebar.thisMonth") },
          { value: "lastmonth", label: t("sidebar.lastMonth") },
        ];
      });

      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;
      });

      const highlightedTranscript = computed(() => {
        if (!selectedRecording.value?.transcription) return "";
        let html = selectedRecording.value.transcription;
        // Escape HTML to prevent injection, but keep it minimal
        html = html.replace(/</g, "<").replace(/>/g, ">");

        // 1. Replace newlines with <br> tags for proper line breaks in HTML
        html = html.replace(/\n/g, "<br>");

        // 2. Get speaker colors from the speakerMap if available
        const speakerColors = {};
        if (speakerMap.value) {
          Object.keys(speakerMap.value).forEach((speaker, index) => {
            speakerColors[speaker] =
              speakerMap.value[speaker].color ||
              `speaker-color-${(index % 8) + 1}`;
          });
        }

        // 3. Wrap each speaker tag in a span for styling and interaction with colors
        html = html.replace(/\[([^\]]+)\]/g, (match, speakerId) => {
          const isHighlighted = speakerId === highlightedSpeaker.value;
          const colorClass = speakerColors[speakerId] || "";
          // Replace speaker ID with name if available
          const displayName = speakerMap.value[speakerId]?.name || speakerId;
          const displayText = `[${displayName}]`;
          // Use a more specific and stylish class structure with color
          return `<span class="speaker-tag ${colorClass} ${
            isHighlighted ? "speaker-highlight" : ""
          }" data-speaker-id="${speakerId}">${displayText}</span>`;
        });

        return html;
      });

      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;
      });

      const groupedRecordings = computed(() => {
        // Sort recordings based on the selected sort criteria
        const sortedRecordings = [...filteredRecordings.value].sort((a, b) => {
          const dateA = getDateForSorting(a);
          const dateB = getDateForSorting(b);

          // Handle null dates (put them at the end)
          if (!dateA && !dateB) return 0;
          if (!dateA) return 1;
          if (!dateB) return -1;

          return dateB - dateA; // Most recent first
        });

        const groups = {
          today: [],
          yesterday: [],
          thisWeek: [],
          lastWeek: [],
          thisMonth: [],
          lastMonth: [],
          older: [],
        };

        sortedRecordings.forEach((recording) => {
          const date = getDateForSorting(recording);
          if (!date) {
            groups.older.push(recording);
            return;
          }

          if (isToday(date)) {
            groups.today.push(recording);
          } else if (isYesterday(date)) {
            groups.yesterday.push(recording);
          } else if (isThisWeek(date)) {
            groups.thisWeek.push(recording);
          } else if (isLastWeek(date)) {
            groups.lastWeek.push(recording);
          } else if (isThisMonth(date)) {
            groups.thisMonth.push(recording);
          } else if (isLastMonth(date)) {
            groups.lastMonth.push(recording);
          } else {
            groups.older.push(recording);
          }
        });

        return [
          { title: t("sidebar.today"), items: groups.today },
          { title: t("sidebar.yesterday"), items: groups.yesterday },
          { title: t("sidebar.thisWeek"), items: groups.thisWeek },
          { title: t("sidebar.lastWeek"), items: groups.lastWeek },
          { title: t("sidebar.thisMonth"), items: groups.thisMonth },
          { title: t("sidebar.lastMonth"), items: groups.lastMonth },
          { title: t("sidebar.older"), items: groups.older },
        ].filter((g) => g.items.length > 0);
      });

      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;
      });

      const hasSpeakerNames = computed(() => {
        // Check if any speaker has a non-empty name
        return Object.values(speakerMap.value).some(
          (speakerData) => speakerData.name && speakerData.name.trim() !== ""
        );
      });

      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 = `https://${wssBaseUrl.SCREEN_PUSH_IP}/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 = `https://${wssBaseUrl.SCREEN_PUSH_IP}/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(
            `https://${wssBaseUrl.SCREEN_PUSH_IP}/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(
            `https://${wssBaseUrl.SCREEN_PUSH_IP}/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(
            `https://${wssBaseUrl.SCREEN_PUSH_IP}/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------------------

      //------------------- 日期分组与排序工具 start------------------
      // --- Enhanced Date Utility Functions ---
      const getDateForSorting = (recording) => {
        const dateStr =
          sortBy.value === "meeting_date"
            ? recording.meeting_date
            : recording.created_at;
        if (!dateStr) return null;
        return new Date(dateStr);
      };

      const isToday = (date) => {
        const today = new Date();
        return isSameDay(date, today);
      };

      const isYesterday = (date) => {
        const yesterday = new Date();
        yesterday.setDate(yesterday.getDate() - 1);
        return isSameDay(date, yesterday);
      };

      const isThisWeek = (date) => {
        const now = new Date();
        const startOfWeek = new Date(now);
        const day = now.getDay();
        const diff = now.getDate() - day + (day === 0 ? -6 : 1); // Monday as start of week
        startOfWeek.setDate(diff);
        startOfWeek.setHours(0, 0, 0, 0);

        const endOfWeek = new Date(startOfWeek);
        endOfWeek.setDate(startOfWeek.getDate() + 6);
        endOfWeek.setHours(23, 59, 59, 999);

        return date >= startOfWeek && date <= endOfWeek;
      };

      const isLastWeek = (date) => {
        const now = new Date();
        const startOfLastWeek = new Date(now);
        const day = now.getDay();
        const diff = now.getDate() - day + (day === 0 ? -6 : 1) - 7; // Previous Monday
        startOfLastWeek.setDate(diff);
        startOfLastWeek.setHours(0, 0, 0, 0);

        const endOfLastWeek = new Date(startOfLastWeek);
        endOfLastWeek.setDate(startOfLastWeek.getDate() + 6);
        endOfLastWeek.setHours(23, 59, 59, 999);

        return date >= startOfLastWeek && date <= endOfLastWeek;
      };

      const isThisMonth = (date) => {
        const now = new Date();
        return (
          date.getFullYear() === now.getFullYear() &&
          date.getMonth() === now.getMonth()
        );
      };

      const isLastMonth = (date) => {
        const now = new Date();
        const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
        return (
          date.getFullYear() === lastMonth.getFullYear() &&
          date.getMonth() === lastMonth.getMonth()
        );
      };

      const isSameDay = (date1, date2) => {
        return (
          date1.getFullYear() === date2.getFullYear() &&
          date1.getMonth() === date2.getMonth() &&
          date1.getDate() === date2.getDate()
        );
      };

      //--------------------日期分组与排序工具 end------------------

      //------------------- 录音详情高级操作 start------------------
      const reprocessTranscription = (recordingId) => {
        const recording =
          recordings.value.find((r) => r.id === recordingId) ||
          selectedRecording.value;
        confirmReprocess("transcription", recording);
      };

      const reprocessSummary = (recordingId) => {
        const recording =
          recordings.value.find((r) => r.id === recordingId) ||
          selectedRecording.value;
        confirmReprocess("summary", recording);
      };

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

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

          const response = await fetch(
            `/tool/speakr/recording/${selectedRecording.value.id}/generate_summary`,
            {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
                "X-CSRFToken": csrfToken,
              },
            }
          );

          const data = await response.json();

          if (!response.ok) {
            throw new Error(data.error || "Failed to generate summary");
          }

          // Update the recording status to show it's being processed
          selectedRecording.value.status = "SUMMARIZING";

          // Also update in recordings list if it exists
          const recordingInList = recordings.value.find(
            (r) => r.id === selectedRecording.value.id
          );
          if (recordingInList) {
            recordingInList.status = "SUMMARIZING";
          }

          showToast("Summary generation started", "success");
        } catch (error) {
          console.error("Error generating summary:", error);
          setGlobalError(`Failed to generate summary: ${error.message}`);
        }
      };

      const resetRecordingStatus = async (recordingId) => {
        const recording = recordings.value.find((r) => r.id === recordingId);
        if (!recording) return;

        try {
          const response = await fetch(
            `/tool/speakr/recording/${recording.id}/reset_status`,
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
            }
          );
          const data = await response.json();
          if (!response.ok) {
            throw new Error(data.error || "Failed to reset status");
          }
          const index = recordings.value.findIndex(
            (r) => r.id === recording.id
          );
          if (index !== -1) {
            recordings.value[index] = data.recording;
          }
          if (selectedRecording.value?.id === recording.id) {
            selectedRecording.value = data.recording;
          }
          showToast("Recording status has been reset.", "fa-check-circle");
        } catch (error) {
          setGlobalError(`Failed to reset status: ${error.message}`);
        }
      };

      const confirmReprocess = (type, recording) => {
        reprocessType.value = type;
        reprocessRecording.value = recording;
        showReprocessModal.value = true;
      };

      const openTranscriptionEditor = () => {
        if (processedTranscription.value.isJson) {
          openAsrEditorModal();
        } else {
          openTextEditorModal();
        }
      };

      const openTextEditorModal = () => {
        if (!selectedRecording.value) return;
        editingTranscriptionContent.value =
          selectedRecording.value.transcription;
        showTextEditorModal.value = true;
      };

      const closeTextEditorModal = () => {
        showTextEditorModal.value = false;
        editingTranscriptionContent.value = "";
      };

      const saveTranscription = async () => {
        if (!selectedRecording.value) return;
        await saveTranscriptionContent(editingTranscriptionContent.value);
        closeTextEditorModal();
      };

      const openAsrEditorModal = async () => {
        if (!selectedRecording.value) return;
        try {
          const segments = JSON.parse(selectedRecording.value.transcription);
          editingSegments.value = segments.map((s, i) => ({
            ...s,
            id: i,
            showSuggestions: false,
            filteredSpeakers: [],
          }));

          // Populate available speakers
          const speakersInTranscript = [
            ...new Set(segments.map((s) => s.speaker)),
          ];
          const response = await fetch("/tool/speakr/speakers");
          const speakersFromDb = await response.json();
          const speakerNamesFromDb = speakersFromDb.map((s) => s.name);
          availableSpeakers.value = [
            ...new Set([...speakersInTranscript, ...speakerNamesFromDb]),
          ].sort();

          showAsrEditorModal.value = true;
        } catch (e) {
          console.error(
            "Could not parse transcription as JSON for ASR editor:",
            e
          );
          setGlobalError(
            "This transcription is not in the correct format for the ASR editor."
          );
        }
      };

      const closeAsrEditorModal = () => {
        showAsrEditorModal.value = false;
        editingSegments.value = [];
        availableSpeakers.value = [];
      };

      const saveAsrTranscription = async () => {
        const contentToSave = JSON.stringify(
          editingSegments.value.map(
            ({ id, showSuggestions, filteredSpeakers, ...rest }) => rest
          )
        );
        await saveTranscriptionContent(contentToSave);
        closeAsrEditorModal();
      };

      const adjustTime = (index, field, amount) => {
        if (editingSegments.value[index]) {
          editingSegments.value[index][field] = parseFloat(
            (editingSegments.value[index][field] + amount).toFixed(3)
          );
        }
      };

      const filterSpeakers = (index) => {
        const segment = editingSegments.value[index];
        if (segment) {
          const query = segment.speaker.toLowerCase();
          segment.filteredSpeakers = availableSpeakers.value.filter((s) =>
            s.toLowerCase().includes(query)
          );
        }
      };

      const openSpeakerSuggestions = (index) => {
        if (editingSegments.value[index]) {
          editingSegments.value[index].showSuggestions = true;
          filterSpeakers(index);
        }
      };

      const closeSpeakerSuggestions = (index) => {
        if (editingSegments.value[index]) {
          window.setTimeout(() => {
            if (editingSegments.value[index]) {
              editingSegments.value[index].showSuggestions = false;
            }
          }, 200); // Delay to allow click event to register
        }
      };

      const selectSpeaker = (index, speaker) => {
        if (editingSegments.value[index]) {
          editingSegments.value[index].speaker = speaker;
          editingSegments.value[index].showSuggestions = false;
        }
      };

      const addSegment = () => {
        const lastSegment =
          editingSegments.value[editingSegments.value.length - 1];
        editingSegments.value.push({
          id: Date.now(),
          speaker: lastSegment ? lastSegment.speaker : "SPEAKER_00",
          start_time: lastSegment ? lastSegment.end_time : 0,
          end_time: lastSegment ? lastSegment.end_time + 1 : 1,
          sentence: "",
        });
      };

      const removeSegment = (index) => {
        editingSegments.value.splice(index, 1);
      };

      const saveTranscriptionContent = async (content) => {
        if (!selectedRecording.value) return;
        try {
          const response = await fetch(
            `/tool/speakr/recording/${selectedRecording.value.id}/update_transcription`,
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({ transcription: content }),
            }
          );
          const data = await response.json();
          if (!response.ok)
            throw new Error(data.error || "Failed to update transcription");
          const index = recordings.value.findIndex(
            (r) => r.id === selectedRecording.value.id
          );
          if (index !== -1) {
            recordings.value[index] = data.recording;
          }
          selectedRecording.value = data.recording;
          showToast("Transcription updated successfully!", "fa-check-circle");
        } catch (error) {
          console.error("Save Transcription Error:", error);
          setGlobalError(`Failed to save transcription: ${error.message}`);
        }
      };

      const cancelReprocess = () => {
        showReprocessModal.value = false;
        reprocessType.value = null;
        reprocessRecording.value = null;
      };

      const executeReprocess = async () => {
        if (!reprocessRecording.value || !reprocessType.value) return;

        const recordingId = reprocessRecording.value.id;
        const type = reprocessType.value;

        // Close the modal first
        cancelReprocess();

        if (type === "transcription") {
          await performReprocessTranscription(
            recordingId,
            asrReprocessOptions.language,
            asrReprocessOptions.min_speakers,
            asrReprocessOptions.max_speakers
          );
        } else if (type === "summary") {
          await performReprocessSummary(recordingId);
        }
      };

      const performReprocessTranscription = async (
        recordingId,
        language,
        minSpeakers,
        maxSpeakers
      ) => {
        if (!recordingId) {
          setGlobalError("No recording ID provided for reprocessing.");
          return;
        }

        try {
          const payload = {
            language: language,
            min_speakers: minSpeakers,
            max_speakers: maxSpeakers,
          };

          const response = await fetch(
            `/tool/speakr/recording/${recordingId}/reprocess_transcription`,
            {
              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 start transcription reprocessing"
            );

          // Ensure the recording status is properly set to PROCESSING
          if (data.recording && data.recording.status !== "PROCESSING") {
            console.warn(
              `Warning: Reprocess transcription returned unexpected status: ${data.recording.status}`
            );
            data.recording.status = "PROCESSING";
          }

          // Update the recording in the UI
          const index = recordings.value.findIndex((r) => r.id === recordingId);
          if (index !== -1) {
            recordings.value[index] = data.recording;
          }

          // Update selected recording if it's the one being reprocessed
          if (selectedRecording.value?.id === recordingId) {
            selectedRecording.value = data.recording;
          }

          showToast("Transcription reprocessing started", "fa-sync-alt");

          // Switch to Summary tab to show progress
          selectedTab.value = "summary";

          // Show progress modal for reprocessing
          showProgressModalForReprocessing(recordingId, "transcription");

          // Start polling for status updates
          startReprocessingPoll(recordingId);
        } catch (error) {
          console.error("Reprocess Transcription Error:", error);
          setGlobalError(
            `Failed to start transcription reprocessing: ${error.message}`
          );
        }
      };

      const performReprocessSummary = async (recordingId) => {
        if (!recordingId) {
          setGlobalError("No recording ID provided for reprocessing.");
          return;
        }

        try {
          const response = await fetch(
            `/tool/speakr/recording/${recordingId}/reprocess_summary`,
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
            }
          );

          const data = await response.json();
          if (!response.ok)
            throw new Error(
              data.error || "Failed to start summary reprocessing"
            );

          // Ensure the recording status is properly set to SUMMARIZING
          if (data.recording && data.recording.status !== "SUMMARIZING") {
            console.warn(
              `Warning: Reprocess summary returned unexpected status: ${data.recording.status}`
            );
            data.recording.status = "SUMMARIZING";
          }

          // Update the recording in the UI
          const index = recordings.value.findIndex((r) => r.id === recordingId);
          if (index !== -1) {
            recordings.value[index] = data.recording;
          }

          // Update selected recording if it's the one being reprocessed
          if (selectedRecording.value?.id === recordingId) {
            selectedRecording.value = data.recording;
          }

          showToast("Summary reprocessing started", "fa-sync-alt");

          // Switch to Summary tab to show progress
          selectedTab.value = "summary";

          // Show progress modal for reprocessing
          showProgressModalForReprocessing(recordingId, "summary");

          // Start polling for status updates
          startReprocessingPoll(recordingId);
        } catch (error) {
          console.error("Reprocess Summary Error:", error);
          setGlobalError(
            `Failed to start summary reprocessing: ${error.message}`
          );
        }
      };

      // Show progress modal for reprocessing operations
      const showProgressModalForReprocessing = (recordingId, type) => {
        const recording = recordings.value.find((r) => r.id === recordingId);
        if (!recording) return;

        // Create a mock file item for the progress modal
        const reprocessItem = {
          file: {
            name: recording.title || `Recording ${recordingId}`,
            size: recording.file_size || 0,
          },
          status: "pending",
          recordingId: recordingId,
          clientId: `reprocess-${type}-${recordingId}-${Date.now()}`,
          error: null,
          isReprocessing: true,
          reprocessType: type,
        };

        // Add to upload queue for progress tracking
        uploadQueue.value.unshift(reprocessItem);

        // Show progress modal
        progressPopupMinimized.value = false;
        progressPopupClosed.value = false;

        // Set as currently processing file
        currentlyProcessingFile.value = reprocessItem;
        processingProgress.value = 10;
        processingMessage.value =
          type === "transcription"
            ? "Starting transcription reprocessing..."
            : "Starting summary reprocessing...";
      };

      // Polling for reprocessing status updates
      const reprocessingPolls = ref(new Map()); // Track active polls by recording ID

      const startReprocessingPoll = (recordingId) => {
        // Clear any existing poll for this recording
        if (reprocessingPolls.value.has(recordingId)) {
          clearInterval(reprocessingPolls.value.get(recordingId));
        }

        // console.log(`Starting reprocessing poll for recording ${recordingId}`);

        const pollInterval = setInterval(async () => {
          try {
            const response = await fetch(`/tool/speakr/status/${recordingId}`);
            if (!response.ok) {
              console.error(`Status check failed for recording ${recordingId}`);
              stopReprocessingPoll(recordingId);
              return;
            }

            const data = await response.json();

            // Update the recording in the UI
            const index = recordings.value.findIndex(
              (r) => r.id === recordingId
            );
            if (index !== -1) {
              recordings.value[index] = data;
            }

            // Update selected recording if it's the one being reprocessed
            if (selectedRecording.value?.id === recordingId) {
              selectedRecording.value = data;
            }

            const queueItem = uploadQueue.value.find(
              (item) => item.recordingId === recordingId
            );

            // Update the item's status and name for intermediate states
            if (queueItem) {
              queueItem.status = data.status; // e.g., 'PROCESSING', 'SUMMARIZING'
              queueItem.file.name = data.title || data.original_filename;
            }

            // Update progress modal if this is the currently processing item
            if (
              queueItem &&
              currentlyProcessingFile.value?.clientId === queueItem.clientId
            ) {
              updateReprocessingProgress(data.status, queueItem);
            }

            // Stop polling if processing is complete
            if (data.status === "COMPLETED" || data.status === "FAILED") {
              console.log(
                `Reprocessing ${data.status.toLowerCase()} for recording ${recordingId}`
              );
              stopReprocessingPoll(recordingId);

              // Update queue item status to final lowercase state
              if (queueItem) {
                queueItem.status =
                  data.status === "COMPLETED" ? "completed" : "failed";
                if (data.status === "FAILED") {
                  queueItem.error = data.error_message || "Reprocessing failed";
                }
              }

              // Clear current processing if this was the active item
              if (currentlyProcessingFile.value?.recordingId === recordingId) {
                resetCurrentFileProcessingState();
              }

              if (data.status === "COMPLETED") {
                showToast(
                  "Reprocessing completed successfully",
                  "fa-check-circle"
                );
              } else {
                showToast("Reprocessing failed", "fa-exclamation-circle");
              }
            }
          } catch (error) {
            console.error(
              `Error polling status for recording ${recordingId}:`,
              error
            );
            stopReprocessingPoll(recordingId);
          }
        }, 3000);

        reprocessingPolls.value.set(recordingId, pollInterval);
      };

      const updateReprocessingProgress = (status, queueItem) => {
        switch (status) {
          case "PENDING":
            processingProgress.value = 20;
            processingMessage.value = `Waiting to start ${queueItem.reprocessType} reprocessing...`;
            break;
          case "PROCESSING":
            processingProgress.value = Math.round(
              Math.min(70, processingProgress.value + Math.random() * 10)
            );
            processingMessage.value =
              queueItem.reprocessType === "transcription"
                ? "Reprocessing transcription..."
                : "Processing audio...";
            break;
          case "SUMMARIZING":
            processingProgress.value = Math.round(
              Math.min(90, processingProgress.value + Math.random() * 10)
            );
            processingMessage.value =
              queueItem.reprocessType === "summary"
                ? "Regenerating summary..."
                : "Generating title and summary...";
            break;
          case "COMPLETED":
            processingProgress.value = 100;
            processingMessage.value = "Reprocessing completed!";
            break;
          case "FAILED":
            processingProgress.value = 100;
            processingMessage.value = "Reprocessing failed.";
            break;
          default:
            processingProgress.value = 15;
            processingMessage.value = "Starting reprocessing...";
        }
      };

      const stopReprocessingPoll = (recordingId) => {
        if (reprocessingPolls.value.has(recordingId)) {
          clearInterval(reprocessingPolls.value.get(recordingId));
          reprocessingPolls.value.delete(recordingId);
          console.log(`Stopped reprocessing poll for recording ${recordingId}`);
        }
      };

      const confirmReset = (recording) => {
        recordingToReset.value = recording;
        showResetModal.value = true;
      };

      const cancelReset = () => {
        showResetModal.value = false;
        recordingToReset.value = null;
      };

      const executeReset = async () => {
        if (!recordingToReset.value) return;
        const recordingId = recordingToReset.value.id;

        // Close the modal first
        cancelReset();

        try {
          const response = await fetch(
            `/tool/speakr/recording/${recordingId}/reset_status`,
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
            }
          );

          const data = await response.json();
          if (!response.ok)
            throw new Error(data.error || "Failed to reset status");

          // Update the recording in the UI
          const index = recordings.value.findIndex((r) => r.id === recordingId);
          if (index !== -1) {
            recordings.value[index] = data.recording;
          }

          // Update selected recording if it's the one being reset
          if (selectedRecording.value?.id === recordingId) {
            selectedRecording.value = data.recording;
          }

          showToast("Recording status has been reset.", "fa-check-circle");
        } catch (error) {
          console.error("Reset Status Error:", error);
          setGlobalError(`Failed to reset status: ${error.message}`);
        }
      };

      const searchSpeakers = async (query, speakerId) => {
        if (!query || query.length < 2) {
          speakerSuggestions.value[speakerId] = [];
          return;
        }

        loadingSuggestions.value[speakerId] = true;

        try {
          const response = await fetch(
            `/tool/speakr/speakers/search?q=${encodeURIComponent(query)}`
          );
          if (!response.ok) throw new Error("Failed to search speakers");

          const speakers = await response.json();
          speakerSuggestions.value[speakerId] = speakers;
        } catch (error) {
          console.error("Error searching speakers:", error);
          speakerSuggestions.value[speakerId] = [];
        } finally {
          loadingSuggestions.value[speakerId] = false;
        }
      };

      const selectSpeakerSuggestion = (speakerId, suggestion) => {
        if (speakerMap.value[speakerId]) {
          speakerMap.value[speakerId].name = suggestion.name;
          speakerSuggestions.value[speakerId] = [];
        }
      };

      const closeSpeakerSuggestionsOnClick = (event) => {
        // Check if the click was on an input field or dropdown
        const clickedInput = event.target.closest('input[type="text"]');
        const clickedDropdown = event.target.closest(".absolute.z-10");

        // If not clicking on input or dropdown, close all suggestions
        if (!clickedInput && !clickedDropdown) {
          Object.keys(speakerSuggestions.value).forEach((speakerId) => {
            speakerSuggestions.value[speakerId] = [];
          });
        }
      };

      // Create a mapping for display-friendly speaker IDs
      const speakerDisplayMap = ref({});
      const modalSpeakers = ref([]);
      const is_final = ref(false);
      const openSpeakerModal = () => {
        // Clear any existing speaker map data first
        speakerMap.value = {};
        speakerDisplayMap.value = {};

        // Get the same speaker order used in processedTranscription
        const transcription = selectedRecording.value?.transcription;
        let speakers = [];

        if (transcription) {
          try {
            const transcriptionData = JSON.parse(transcription);
            if (transcriptionData && Array.isArray(transcriptionData)) {
              // Use the exact same logic as processedTranscription to get speakers
              speakers = [
                ...new Set(
                  transcriptionData
                    .map((segment) => segment.speaker)
                    .filter(Boolean)
                ),
              ];
            }
          } catch (e) {
            // Fall back to identifiedSpeakers if JSON parsing fails
            speakers = identifiedSpeakers.value;
          }
        }

        // Set modalSpeakers for the template to use
        modalSpeakers.value = speakers;

        // Initialize speaker map with the same order and colors as the transcript
        speakerMap.value = speakers.reduce((acc, speaker, index) => {
          acc[speaker] = {
            name: "",
            isMe: false,
            color: `speaker-color-${(index % 8) + 1}`, // Same color assignment as processedTranscription
          };
          // Keep the original speaker ID for display
          speakerDisplayMap.value[speaker] = speaker;
          return acc;
        }, {});

        highlightedSpeaker.value = null;
        speakerSuggestions.value = {};
        loadingSuggestions.value = {};
        isAutoIdentifying.value = false;
        showSpeakerModal.value = true;
      };

      const closeSpeakerModal = () => {
        showSpeakerModal.value = false;
        highlightedSpeaker.value = null;
        // Clear the speaker map to prevent stale data from persisting
        speakerMap.value = {};
        speakerSuggestions.value = {};
        loadingSuggestions.value = {};

        // Clean up click handler if it exists
        if (window.speakerModalClickHandler) {
          const modalContent = document.querySelector(".modal-content");
          if (modalContent) {
            modalContent.removeEventListener(
              "click",
              window.speakerModalClickHandler
            );
          }
          delete window.speakerModalClickHandler;
        }
      };

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

        // Create a filtered speaker map that excludes entries with blank names
        const filteredSpeakerMap = Object.entries(speakerMap.value).reduce(
          (acc, [speakerId, speakerData]) => {
            if (speakerData.name && speakerData.name.trim() !== "") {
              acc[speakerId] = speakerData;
            }
            return acc;
          },
          {}
        );

        try {
          const response = await fetch(
            `/tool/speakr/recording/${selectedRecording.value.id}/update_speakers`,
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({
                speaker_map: filteredSpeakerMap, // Send the filtered map
                regenerate_summary: regenerateSummaryAfterSpeakerUpdate.value,
              }),
            }
          );

          const data = await response.json();
          if (!response.ok)
            throw new Error(data.error || "Failed to update speakers");

          // On success, close the modal and clear the speakerMap state *before*
          // updating the recording data. This prevents a race condition where the
          // view could re-render using the new data but the old, lingering speakerMap.
          closeSpeakerModal();

          // The backend returns the fully updated recording object.
          // We can directly update our local state with this fresh data.
          const index = recordings.value.findIndex(
            (r) => r.id === selectedRecording.value.id
          );
          if (index !== -1) {
            recordings.value[index] = data.recording;
          }
          selectedRecording.value = data.recording;

          showToast("Speaker names updated successfully!", "fa-check-circle");

          // If a summary regeneration was requested, start polling for its status.
          if (regenerateSummaryAfterSpeakerUpdate.value) {
            startReprocessingPoll(selectedRecording.value.id);
          }
        } catch (error) {
          console.error("Save Speaker Names Error:", error);
          setGlobalError(`Failed to save speaker names: ${error.message}`);
        }
      };

      // Speaker group navigation state
      const currentSpeakerGroupIndex = ref(-1);
      const speakerGroups = ref([]);

      const findSpeakerGroups = (speakerId) => {
        if (!speakerId) return [];

        const groups = [];
        const modalTranscript = document.querySelector(
          "div.speaker-modal-transcript"
        );
        const mainTranscript = document.querySelector(
          ".transcription-simple-view, .transcription-with-speakers, .transcription-content"
        );
        const transcriptContainer = modalTranscript || mainTranscript;

        if (!transcriptContainer) return [];

        // For JSON-based transcripts with segments
        const allSegments =
          transcriptContainer.querySelectorAll(".speaker-segment");
        if (allSegments.length > 0) {
          let currentGroup = null;
          let lastSpeakerId = null;

          allSegments.forEach((segment) => {
            const speakerTag = segment.querySelector("[data-speaker-id]");
            const segmentSpeakerId = speakerTag?.dataset.speakerId;

            if (segmentSpeakerId === speakerId) {
              // If this is a new group (not consecutive with previous)
              if (lastSpeakerId !== speakerId) {
                currentGroup = {
                  startElement: segment,
                  elements: [segment],
                };
                groups.push(currentGroup);
              } else if (currentGroup) {
                // Add to existing group
                currentGroup.elements.push(segment);
              }
            }
            lastSpeakerId = segmentSpeakerId;
          });
        } else {
          // For plain text transcripts with speaker tags
          const allTags =
            transcriptContainer.querySelectorAll("[data-speaker-id]");
          let currentGroup = null;

          allTags.forEach((tag) => {
            if (tag.dataset.speakerId === speakerId) {
              // Find the parent element that contains this speaker's content
              const parentSegment =
                tag.closest(".speaker-segment") || tag.parentElement;

              if (
                !currentGroup ||
                !currentGroup.lastElement ||
                !parentSegment.previousElementSibling ||
                parentSegment.previousElementSibling !==
                  currentGroup.lastElement
              ) {
                // Start a new group
                currentGroup = {
                  startElement: parentSegment,
                  elements: [parentSegment],
                  lastElement: parentSegment,
                };
                groups.push(currentGroup);
              } else {
                // Continue the group
                currentGroup.elements.push(parentSegment);
                currentGroup.lastElement = parentSegment;
              }
            }
          });
        }

        return groups;
      };

      const highlightSpeakerInTranscript = (speakerId) => {
        highlightedSpeaker.value = speakerId;

        if (speakerId) {
          // Find all speaker groups for navigation
          speakerGroups.value = findSpeakerGroups(speakerId);
          currentSpeakerGroupIndex.value = 0;

          // Scroll to the first group
          if (speakerGroups.value.length > 0) {
            nextTick(() => {
              const firstGroup = speakerGroups.value[0];
              if (firstGroup && firstGroup.startElement) {
                firstGroup.startElement.scrollIntoView({
                  behavior: "smooth",
                  block: "center",
                });
              }
            });
          }
        } else {
          speakerGroups.value = [];
          currentSpeakerGroupIndex.value = -1;
        }
      };

      const navigateToNextSpeakerGroup = () => {
        if (speakerGroups.value.length === 0) return;

        // Don't reset the speaker groups, just update the index
        currentSpeakerGroupIndex.value =
          (currentSpeakerGroupIndex.value + 1) % speakerGroups.value.length;
        const group = speakerGroups.value[currentSpeakerGroupIndex.value];
        if (group && group.startElement) {
          group.startElement.scrollIntoView({
            behavior: "smooth",
            block: "center",
          });
        }
      };

      const navigateToPrevSpeakerGroup = () => {
        if (speakerGroups.value.length === 0) return;

        // Don't reset the speaker groups, just update the index
        currentSpeakerGroupIndex.value =
          currentSpeakerGroupIndex.value <= 0
            ? speakerGroups.value.length - 1
            : currentSpeakerGroupIndex.value - 1;
        const group = speakerGroups.value[currentSpeakerGroupIndex.value];
        if (group && group.startElement) {
          group.startElement.scrollIntoView({
            behavior: "smooth",
            block: "center",
          });
        }
      };

      // Enhanced speaker highlighting with focus/blur events for text inputs
      const focusSpeaker = (speakerId) => {
        // Set this as the active speaker input
        activeSpeakerInput.value = speakerId;
        // Only highlight if not already highlighted (to preserve navigation state)
        if (highlightedSpeaker.value !== speakerId) {
          highlightSpeakerInTranscript(speakerId);
        }
      };

      const blurSpeaker = () => {
        // Clear the active speaker input after a delay to allow clicking on suggestions
        setTimeout(() => {
          activeSpeakerInput.value = null;
          speakerSuggestions.value = {};
        }, 200);
        clearSpeakerHighlight();
      };

      const clearSpeakerHighlight = () => {
        highlightedSpeaker.value = null;
      };

      const autoIdentifySpeakers = async () => {
        if (!selectedRecording.value) {
          showToast("No recording selected.", "fa-exclamation-circle");
          return;
        }

        isAutoIdentifying.value = true;
        showToast("Starting automatic speaker identification...", "fa-magic");

        try {
          const response = await fetch(
            `/tool/speakr/recording/${selectedRecording.value.id}/auto_identify_speakers`,
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({
                current_speaker_map: speakerMap.value,
              }),
            }
          );

          const data = await response.json();
          if (!response.ok) {
            throw new Error(
              data.error || "Unknown error occurred during auto-identification."
            );
          }

          // Check if there's a message (e.g., all speakers already identified)
          if (data.message) {
            showToast(data.message, "fa-info-circle");
            return;
          }

          // Update speakerMap with the identified names (only for unidentified speakers)
          let identifiedCount = 0;
          for (const speakerId in data.speaker_map) {
            const identifiedName = data.speaker_map[speakerId];
            if (
              speakerMap.value[speakerId] &&
              identifiedName &&
              identifiedName.trim() !== ""
            ) {
              speakerMap.value[speakerId].name = identifiedName;
              identifiedCount++;
            }
          }

          if (identifiedCount > 0) {
            showToast(
              `${identifiedCount} speaker(s) identified successfully!`,
              "fa-check-circle"
            );
          } else {
            showToast(
              "No speakers could be identified from the context.",
              "fa-info-circle"
            );
          }
        } catch (error) {
          console.error("Auto Identify Speakers Error:", error);
          showToast(`Error: ${error.message}`, "fa-exclamation-circle", 5000);
        } finally {
          isAutoIdentifying.value = false;
        }
      };

      const toggleInbox = async (recording) => {
        if (!recording || !recording.id) return;

        try {
          const response = await fetch(
            `/tool/speakr/recording/${recording.id}/toggle_inbox`,
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
            }
          );

          const data = await response.json();
          if (!response.ok)
            throw new Error(data.error || "Failed to toggle inbox status");

          // Update the recording in the UI
          recording.is_inbox = data.is_inbox;

          // Update in the recordings list
          const index = recordings.value.findIndex(
            (r) => r.id === recording.id
          );
          if (index !== -1) {
            recordings.value[index].is_inbox = data.is_inbox;
          }

          showToast(
            `Recording ${data.is_inbox ? "moved to inbox" : "marked as read"}`
          );
        } catch (error) {
          console.error("Toggle Inbox Error:", error);
          setGlobalError(`Failed to toggle inbox status: ${error.message}`);
        }
      };

      // Toggle highlighted status
      const toggleHighlight = async (recording) => {
        if (!recording || !recording.id) return;

        try {
          const response = await fetch(
            `/tool/speakr/recording/${recording.id}/toggle_highlight`,
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
            }
          );

          const data = await response.json();
          if (!response.ok)
            throw new Error(
              data.error || "Failed to toggle highlighted status"
            );

          // Update the recording in the UI
          recording.is_highlighted = data.is_highlighted;

          // Update in the recordings list
          const index = recordings.value.findIndex(
            (r) => r.id === recording.id
          );
          if (index !== -1) {
            recordings.value[index].is_highlighted = data.is_highlighted;
          }

          showToast(
            `Recording ${data.is_highlighted ? "highlighted" : "unhighlighted"}`
          );
        } catch (error) {
          console.error("Toggle Highlight Error:", error);
          setGlobalError(
            `Failed to toggle highlighted status: ${error.message}`
          );
        }
      };

      //--------------------录音详情高级操作 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 ---
      const toggleSidebar = () => {
        isSidebarCollapsed.value = !isSidebarCollapsed.value;
      };

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

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

          currentView.value = "upload";
          selectedRecording.value = null;
          if (isMobileScreen.value) {
            isSidebarCollapsed.value = true;
          }
        } else {
          currentView.value = "upload";
          selectedRecording.value = null;
          if (isMobileScreen.value) {
            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(
            "Please stop the current recording before selecting another one."
          );
          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) {
            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) {
            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 resetCurrentFileProcessingState = () => {
        if (pollInterval.value) clearInterval(pollInterval.value);
        pollInterval.value = null;
        currentlyProcessingFile.value = null;
        processingProgress.value = 0;
        processingMessage.value = "";
      };

      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.file.name = data.title || data.original_filename;

            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)
      const loadMoreRecordings = async () => {
        if (!hasNextPage.value || isLoadingMore.value) return;
        await loadRecordings(currentPage.value + 1, true, searchQuery.value);
      };

      // 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)
        );
      });
      const filterByTag = (tag) => {
        // Use advanced filter instead of text-based
        filterTags.value = [tag.id];
        applyAdvancedFilters();
      };
      const clearTagFilter = () => {
        searchQuery.value = "";
        clearAllFilters();
      };

      // Build search query from advanced filters
      const buildSearchQuery = () => {
        let query = [];

        // Add text search
        if (filterTextQuery.value.trim()) {
          query.push(filterTextQuery.value.trim());
        }

        // Add tag filters
        if (filterTags.value.length > 0) {
          const tagNames = filterTags.value
            .map((tagId) => {
              const tag = availableTags.value.find((t) => t.id === tagId);
              return tag ? `tag:${tag.name.replace(/\s+/g, "_")}` : "";
            })
            .filter(Boolean);
          query.push(...tagNames);
        }

        // Add date filter
        if (filterDatePreset.value) {
          query.push(`date:${filterDatePreset.value}`);
        } else if (filterDateRange.value.start || filterDateRange.value.end) {
          // Custom date range - send as separate parameters
          // Will be handled differently in the backend
          if (filterDateRange.value.start) {
            query.push(`date_from:${filterDateRange.value.start}`);
          }
          if (filterDateRange.value.end) {
            query.push(`date_to:${filterDateRange.value.end}`);
          }
        }

        return query.join(" ");
      };

      const applyAdvancedFilters = () => {
        searchQuery.value = buildSearchQuery();
      };

      const clearAllFilters = () => {
        filterTags.value = [];
        filterDateRange.value = { start: "", end: "" };
        filterDatePreset.value = "";
        filterTextQuery.value = "";
        searchQuery.value = "";
      };

      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------------------

      //------------------- 录音控制与实时采集 start------------------
      // --- Audio Recording ---
      const startRecordingWithDisclaimer = async (mode = "microphone") => {
        debugger;
        // Check if disclaimer needs to be shown
        if (recordingDisclaimer.value && recordingDisclaimer.value.trim()) {
          pendingRecordingMode.value = mode;
          showRecordingDisclaimerModal.value = true;
        } else {
          // No disclaimer configured, proceed directly
          await startRecordingActual(mode);
        }
      };

      const acceptRecordingDisclaimer = async () => {
        showRecordingDisclaimerModal.value = false;
        if (pendingRecordingMode.value) {
          await startRecordingActual(pendingRecordingMode.value);
          pendingRecordingMode.value = null;
        }
      };

      const cancelRecordingDisclaimer = () => {
        showRecordingDisclaimerModal.value = false;
        pendingRecordingMode.value = null;
      };

      const startRecording = startRecordingWithDisclaimer; // Maintain backward compatibility
      let systemStream = null;
      let micStream = null;

      const startRecordingActual = async (mode = "microphone") => {
        recordingMode.value = mode;

        try {
          // Load tags if not already loaded
          if (availableTags.value.length === 0) {
            await loadTags();
          }

          // Reset state
          audioChunks.value = [];
          audioBlobURL.value = null;
          recordingNotes.value = "";
          activeStreams.value = [];
          // Clear previous tag selection and ASR options for fresh recording
          selectedTags.value = [];
          asrLanguage.value = "";
          asrMinSpeakers.value = "";
          asrMaxSpeakers.value = "";
          
          // Reset draft-related state for fresh recording (Bug fix: prevents new recordings from being merged into old drafts)
          currentDraftId.value = null;
          isPaused.value = false;
          pausedDuration.value = 0;
          pausedTranscription.value = '';
          segmentList = [];
          segmentRenderStartIndex = 0;
          asrResult.value = '';
          asrResultOnline.value = '';
          asrResultOffline.value = '';
          recordingTime.value = 0;
          isStoppingRecording.value = false;
          pendingCorrectionCount = 0;
          isEditingTranscription.value = false;
          startNewRealtimeEpoch({ clearTimestampBarrier: true });

          let combinedStream = null;

          // Get microphone stream if needed
          if (mode === "microphone" || mode === "both") {
            if (!canRecordAudio.value) {
              throw new Error(
                "Microphone recording is not supported by your browser or permission was denied."
              );
            }
            micStream = await navigator.mediaDevices.getUserMedia({
              audio: true,
            });
            activeStreams.value.push(micStream);
            showToast("Microphone access granted", "fa-microphone");
          }

          // Get system audio stream if needed
          if (mode === "system" || mode === "both") {
            if (!canRecordSystemAudio.value) {
              throw new Error(
                "System audio recording is not supported by your browser."
              );
            }
            try {
              systemStream = await navigator.mediaDevices.getDisplayMedia({
                audio: true,
                video: true, // Request video to enable system audio sharing prompt
              });

              // Check if the user actually granted audio permission
              if (systemStream.getAudioTracks().length === 0) {
                // Stop the video track if it exists, since we didn't get audio
                systemStream.getVideoTracks().forEach((track) => track.stop());
                throw new Error(
                  'System audio permission was not granted. Please ensure you check the "Share system audio" box.'
                );
              }

              activeStreams.value.push(systemStream);
              showToast("System audio access granted", "fa-desktop");
            } catch (err) {
              if (mode === "system") {
                throw err; // Re-throw the original error to be caught by the outer handler
              } else {
                // For 'both' mode, fall back to microphone only
                showToast(
                  "System audio denied, using microphone only",
                  "fa-exclamation-triangle"
                );
                mode = "microphone";
                systemStream = null; // Make sure systemStream is null so it's not used later
              }
            }
          }

          // Combine streams if we have both
          if (micStream && systemStream) {
            try {
              audioContext.value = new (window.AudioContext ||
                window.webkitAudioContext)();

              const micSource =
                audioContext.value.createMediaStreamSource(micStream);
              const systemSource =
                audioContext.value.createMediaStreamSource(systemStream);
              const destination =
                audioContext.value.createMediaStreamDestination();

              micSource.connect(destination);
              systemSource.connect(destination);

              // Create a new MediaStream with only the audio track from the destination
              const mixedAudioTrack = destination.stream.getAudioTracks()[0];
              if (!mixedAudioTrack) {
                throw new Error("Failed to create mixed audio track");
              }

              combinedStream = new MediaStream([mixedAudioTrack]);

              // Verify the stream has audio tracks
              if (combinedStream.getAudioTracks().length === 0) {
                throw new Error("Combined stream has no audio tracks");
              }

              console.log(
                "Successfully created combined audio stream with",
                combinedStream.getAudioTracks().length,
                "audio tracks"
              );
              showToast(
                "Recording both microphone and system audio",
                "fa-microphone"
              );
            } catch (error) {
              console.error("Failed to combine audio streams:", error);
              // Fallback to system audio only
              if (audioContext.value) {
                audioContext.value
                  .close()
                  .catch((e) =>
                    console.error("Error closing AudioContext:", e)
                  );
                audioContext.value = null;
              }
              combinedStream = systemStream;
              showToast(
                "Failed to combine audio, using system audio only",
                "fa-exclamation-triangle"
              );
            }
          } else if (systemStream) {
            // For system audio only, create a new stream with just the audio tracks
            const audioTracks = systemStream.getAudioTracks();
            if (audioTracks.length > 0) {
              combinedStream = new MediaStream(audioTracks);
              console.log(
                "Created system audio stream with",
                audioTracks.length,
                "audio tracks"
              );
              showToast("Recording system audio only", "fa-desktop");
            } else {
              throw new Error("System stream has no audio tracks");
            }
          } else if (micStream) {
            combinedStream = micStream;
            showToast("Recording microphone only", "fa-microphone");
          } else {
            throw new Error("No audio streams available for recording.");
          }

          // Setup MediaRecorder with optimized settings for transcription
          const getOptimizedRecorderOptions = () => {
            // Define transcription-optimized options in order of preference
            const optionsList = [
              // Best option: Opus codec at 32kbps (excellent compression for speech)
              {
                mimeType: "audio/webm;codecs=opus",
                audioBitsPerSecond: 32000,
                description: "Optimized (32kbps Opus)",
              },
              // Good option: Opus at 64kbps (slightly higher quality)
              {
                mimeType: "audio/webm;codecs=opus",
                audioBitsPerSecond: 64000,
                description: "Good quality (64kbps Opus)",
              },
              // Fallback 1: WebM with reduced bitrate
              {
                mimeType: "audio/webm",
                audioBitsPerSecond: 64000,
                description: "Standard WebM (64kbps)",
              },
              // Fallback 2: MP4 with reduced bitrate
              {
                mimeType: "audio/mp4",
                audioBitsPerSecond: 64000,
                description: "Standard MP4 (64kbps)",
              },
              // Fallback 3: Just the codec without bitrate
              {
                mimeType: "audio/webm;codecs=opus",
                description: "Opus codec (default bitrate)",
              },
              // Fallback 4: Just WebM without bitrate
              {
                mimeType: "audio/webm",
                description: "WebM (default bitrate)",
              },
            ];

            // Test each option to find the first supported one
            for (const options of optionsList) {
              if (MediaRecorder.isTypeSupported(options.mimeType)) {
                console.log(
                  `Testing audio recording option: ${options.description} - ${options.mimeType}`
                );
                return options;
              }
            }

            // Final fallback: no options (browser default)
            console.log("Using browser default audio recording settings");
            return null;
          };

          // Try to create MediaRecorder with progressive fallbacks
          let mediaRecorderCreated = false;
          let recorderOptions = getOptimizedRecorderOptions();
          let attemptCount = 0;

          while (!mediaRecorderCreated && attemptCount < 5) {
            try {
              attemptCount++;

              if (recorderOptions && attemptCount === 1) {
                // First attempt: try with full options
                console.log(
                  `Attempt ${attemptCount}: Trying ${recorderOptions.description}`
                );
                mediaRecorder.value = new MediaRecorder(
                  combinedStream,
                  recorderOptions
                );
                actualBitrate.value =
                  recorderOptions.audioBitsPerSecond || 64000;
                showToast(
                  `Recording: ${recorderOptions.description}`,
                  "fa-compress-alt",
                  3000
                );
              } else if (
                recorderOptions &&
                attemptCount === 2 &&
                recorderOptions.audioBitsPerSecond
              ) {
                // Second attempt: try same mime type without bitrate constraint
                console.log(
                  `Attempt ${attemptCount}: Trying ${recorderOptions.mimeType} without bitrate`
                );
                mediaRecorder.value = new MediaRecorder(combinedStream, {
                  mimeType: recorderOptions.mimeType,
                });
                actualBitrate.value = 128000; // Estimate
                showToast(
                  `Recording: ${recorderOptions.mimeType} (default bitrate)`,
                  "fa-compress-alt",
                  3000
                );
              } else {
                // Final attempt: browser default
                console.log(`Attempt ${attemptCount}: Using browser default`);
                mediaRecorder.value = new MediaRecorder(combinedStream);
                actualBitrate.value = 128000; // Estimate browser default
                showToast(
                  "Recording with browser default settings",
                  "fa-microphone",
                  3000
                );
              }

              mediaRecorderCreated = true;
              console.log(
                `MediaRecorder created successfully on attempt ${attemptCount}`
              );
            } catch (error) {
              console.warn(
                `MediaRecorder creation attempt ${attemptCount} failed:`,
                error
              );
              mediaRecorder.value = null;

              if (attemptCount >= 5) {
                throw new Error(
                  `Failed to create MediaRecorder after ${attemptCount} attempts. Last error: ${error.message}`
                );
              }
            }
          }

          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 = [];

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

          // --- Visualizer Setup ---
          if (!audioContext.value) {
            audioContext.value = new (window.AudioContext ||
              window.webkitAudioContext)();
          }

          if (mode === "both" && micStream && systemStream) {
            // Dual visualizer setup
            micAnalyser.value = audioContext.value.createAnalyser();
            micAnalyser.value.fftSize = 256;
            const micSource =
              audioContext.value.createMediaStreamSource(micStream);
            micSource.connect(micAnalyser.value);

            systemAnalyser.value = audioContext.value.createAnalyser();
            systemAnalyser.value.fftSize = 256;
            const systemSource =
              audioContext.value.createMediaStreamSource(systemStream);
            systemSource.connect(systemAnalyser.value);
          } else {
            // Single visualizer setup
            const visualizerStream = micStream || systemStream;
            if (visualizerStream) {
              analyser.value = audioContext.value.createAnalyser();
              analyser.value.fftSize = 256;
              const source =
                audioContext.value.createMediaStreamSource(visualizerStream);
              source.connect(analyser.value);
            }
          }

          // Start recording and timer
          mediaRecorder.value.start();
          isRecording.value = true;
          recordingTime.value = 0;
          recordingInterval.value = setInterval(
            () => recordingTime.value++,
            1000
          );

          // Start size monitoring
          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 (webReader) {
          webReader.wsStop();
        }
        if (webReader2) {
          webReader2.wsStop();
        }
        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;
          }
        }
        
        // 等待 MediaRecorder 生成最终数据
        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', asrResult.value + asrResultOffline.value + asrResultOnline.value || '');
              
              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) {
          isSidebarCollapsed.value = true;
        }
        } finally {
          isStoppingRecording.value = false;
        }
      };

      // 暂停录音
      const pauseRecording = async () => {
        if (!isRecording.value || isPaused.value) return;
        
        try {
          // 首先停止音频数据发送，防止向已关闭的 WebSocket 发送数据
          isRec = false;
          
          // 停止 WebSocket 转录
          if (webReader) webReader.wsStop();
          if (webReader2) webReader2.wsStop();
          
          // 停止当前 MediaRecorder
          if (mediaRecorder.value && mediaRecorder.value.state === 'recording') {
            mediaRecorder.value.stop();
          }
          
          // 等待 MediaRecorder 生成最终数据
          await new Promise(resolve => setTimeout(resolve, 500));

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

          // 等待所有进行中的LLM矫正完成（最多8秒超时）
          if (pendingCorrectionCount > 0) {
            console.log(`等待 ${pendingCorrectionCount} 个LLM矫正完成...`);
            const waitStart = Date.now();
            while (pendingCorrectionCount > 0 && Date.now() - waitStart < 8000) {
              await new Promise(resolve => setTimeout(resolve, 200));
            }
            if (pendingCorrectionCount > 0) {
              console.warn(`超时：仍有 ${pendingCorrectionCount} 个LLM矫正未完成`);
            }
          }

          // 创建草稿（如果是第一次暂停）
          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);
      // 发送完整转录文本（历史 + 离线修正 + 当前在线结果）以防止覆盖历史记录
      const fullTranscription = (asrResult.value || '') + (asrResultOffline.value || '') + (asrResultOnline.value || '');
      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;
    pausedTranscription.value = (asrResult.value || '') + (asrResultOffline.value || '') + (asrResultOnline.value || '');
    isRecording.value = false;
          
          // 停止计时器和动画
          clearInterval(recordingInterval.value);
          cancelAnimationFrame(animationFrameId.value);
          stopSizeMonitoring();
          
          // 停止所有媒体流
          activeStreams.value.forEach(stream => {
            stream.getTracks().forEach(track => track.stop());
          });
          activeStreams.value = [];
          micStream = null;
          systemStream = null;
          
          showToast('录音已暂停', 'fa-pause');
          
          // 刷新草稿列表
          loadDrafts();
        } catch (err) {
          console.error('Error pausing recording:', err);
          setGlobalError(`暂停录音失败: ${err.message}`);
        }
      };

      // 恢复录音
      const resumeRecording = async () => {
        if (!isPaused.value || !currentDraftId.value) return;
        
        try {
          // 重置音频块
          audioChunks.value = [];
          
          // Bug fix: 清空segmentList，防止旧segment与pausedTranscription（历史文本）重复渲染
          // pausedTranscription已经包含了历史转录，segmentList应该只包含恢复后的新转录
          segmentList = [];
          segmentRenderStartIndex = 0;
          pendingCorrectionCount = 0;
          isEditingTranscription.value = false;
          startNewRealtimeEpoch({ clearTimestampBarrier: true });

          let combinedStream = null;
          const mode = recordingMode.value;
          
          // 重新获取媒体流
          if (mode === 'microphone' || mode === 'both') {
            micStream = await navigator.mediaDevices.getUserMedia({ audio: true });
            activeStreams.value.push(micStream);
          }
          
          if (mode === 'system' || mode === 'both') {
            try {
              systemStream = await navigator.mediaDevices.getDisplayMedia({
                audio: true,
                video: true
              });
              if (systemStream.getAudioTracks().length === 0) {
                systemStream.getVideoTracks().forEach(track => track.stop());
                throw new Error('未获取系统音频权限');
              }
              activeStreams.value.push(systemStream);
            } catch (err) {
              if (mode === 'system') throw err;
              showToast('系统音频权限被拒绝，仅使用麦克风', 'fa-exclamation-triangle');
              recordingMode.value = 'microphone';
            }
          }
          
          // 组合音频流
          if (micStream && systemStream) {
            audioContext.value = new (window.AudioContext || window.webkitAudioContext)();
            const micSource = audioContext.value.createMediaStreamSource(micStream);
            const systemSource = audioContext.value.createMediaStreamSource(systemStream);
            const destination = audioContext.value.createMediaStreamDestination();
            micSource.connect(destination);
            systemSource.connect(destination);
            combinedStream = new MediaStream([destination.stream.getAudioTracks()[0]]);
          } else if (systemStream) {
            combinedStream = new MediaStream(systemStream.getAudioTracks());
          } else if (micStream) {
            combinedStream = micStream;
          } else {
            throw new Error('无可用音频流');
          }
          
          // 创建新的 MediaRecorder
          mediaRecorder.value = new MediaRecorder(combinedStream, { mimeType: 'audio/webm;codecs=opus' });
          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 (!audioContext.value) {
            audioContext.value = new (window.AudioContext || window.webkitAudioContext)();
          }

          if (mode === 'both' && micStream && systemStream) {
            // Dual visualizer setup
            micAnalyser.value = audioContext.value.createAnalyser();
            micAnalyser.value.fftSize = 256;
            const micSource = audioContext.value.createMediaStreamSource(micStream);
            micSource.connect(micAnalyser.value);

            systemAnalyser.value = audioContext.value.createAnalyser();
            systemAnalyser.value.fftSize = 256;
            const systemSource = audioContext.value.createMediaStreamSource(systemStream);
            systemSource.connect(systemAnalyser.value);
          } else {
            const visualizerStream = micStream || systemStream;
            if (visualizerStream) {
              analyser.value = audioContext.value.createAnalyser();
              analyser.value.fftSize = 256;
              const source = audioContext.value.createMediaStreamSource(visualizerStream);
              source.connect(analyser.value);
            }
          }
          
          // 开始录音
          mediaRecorder.value.start();
          isPaused.value = false;
          isRecording.value = true;
          
          // 恢复计时器（从暂停时间继续）
          recordingInterval.value = setInterval(() => recordingTime.value++, 1000);
          
          // 恢复可视化
          drawVisualizers();
          startSizeMonitoring();
          
          // 恢复 WebSocket 转录
          console.log("Resuming WebSocket connections...");
          // 设置重置标志，清空实时转录显示
          resetTranscriptionFlag = true;
          asrResultOnline.value = '';
          if (webReader) {
            const ret = webReader.wsStart();
            if (ret === 1) {
              isRec = true;
            }
          }
          // offline/2pass
          if (webReader2 && typeof wssBaseUrl !== 'undefined') {
             try {
               let urls = `wss://${wssBaseUrl.FUNASR_WEBSOCKET_IP}/websocket_offline`;
               webReader2.wsStart(urls);
               isRec = true;
             } catch(e) {
               console.warn("Failed to restart offline WS:", e);
             }
          }

          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 || '';
          segmentRenderStartIndex = 0;
          
          // 设置暂停状态
          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 = '';
              segmentRenderStartIndex = 0;
            }
            return true;
          } else {
            throw new Error(data.error);
          }
        } catch (err) {
          console.error('Error deleting draft:', err);
          setGlobalError(`删除草稿失败: ${err.message}`);
          return false;
        }
      };

      // 重命名草稿
      const startDraftRename = (draft) => {
        editingDraftId.value = draft.id;
        editingDraftName.value = draft.name;
        // 等待 DOM 更新后聚焦输入框
        nextTick(() => {
          if (draftNameInput.value && draftNameInput.value[0]) {
             draftNameInput.value[0].focus();
          } else if (draftNameInput.value) {
             draftNameInput.value.focus();
          }
        });
      };

      const saveDraftRename = async (draft) => {
        if (!editingDraftId.value) return;
        
        const newName = editingDraftName.value.trim();
        editingDraftId.value = null; // 退出编辑模式
        
        if (!newName || newName === draft.name) return;
        
        try {
          const resp = await fetch(`/tool/speakr/api/draft/${draft.id}/rename`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ name: newName })
          });
          const data = await resp.json();
          
          if (data.success) {
            draft.name = newName;
            showToast('重命名成功', 'fa-check');
          } else {
            throw new Error(data.error);
          }
        } catch (err) {
          console.error('Error renaming draft:', err);
          showToast(`重命名失败: ${err.message}`, 'fa-exclamation-circle');
        }
      };

      const uploadRecordedAudio = async () => {
        // 如果有草稿，先获取合并后的音频文件，然后走统一上传流程
        if (currentDraftId.value) {
          try {
            showToast('正在合并录音片段...', 'fa-spinner fa-spin', 0);
            
            // 1. 调用 finalize 获取合并后的音频 Blob（不再创建Recording）
            const resp = await fetch(`/tool/speakr/api/draft/${currentDraftId.value}/finalize`, {
              method: 'POST'
            });
            
            if (!resp.ok) {
              // 尝试解析JSON错误消息
              try {
                const err = await resp.json();
                throw new Error(err.error || '合并音频失败');
              } catch {
                throw new Error('合并音频失败');
              }
            }
            
            const audioBlob = await resp.blob();
            
            // 2. 创建 File 对象，走统一上传流程
            const recordedFile = new File(
              [audioBlob],
              createLocalizedRecordingFilename(),
              { type: "audio/webm" }
            );
            
            // 3. 清理草稿状态
            const savedNotes = recordingNotes.value;
            const savedTags = [...selectedTags.value];
            const savedAsrOptions = {
              language: asrLanguage.value,
              min_speakers: asrMinSpeakers.value,
              max_speakers: asrMaxSpeakers.value,
            };
            
            currentDraftId.value = null;
            pausedDuration.value = 0;
            pausedTranscription.value = '';
            segmentRenderStartIndex = 0;
            loadDrafts();
            
            // 4. 走统一上传流程（和直接录制一样使用 addFilesToQueue）
            const previousQueueLength = uploadQueue.value.length;
            
            addFilesToQueue([{
              file: recordedFile,
              notes: savedNotes,
              tags: savedTags,
              asrOptions: savedAsrOptions,
            }]);
            
            if (uploadQueue.value.length === previousQueueLength) {
              return;
            }
            
            const queueItem = uploadQueue.value[uploadQueue.value.length - 1];
            
            showToast("正在上传录音至服务器，请稍候...", "fa-spinner fa-spin", 0);
            
            // 5. 等待上传响应
            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);
              });
            };
            
            await waitForServerResponse();
            
            // 6. 清理界面状态
            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;
            
            showToast("上传成功，正在处理中...", "fa-check-circle");
            
          } catch (err) {
            console.error('Error uploading draft:', err);
            setGlobalError(`上传失败: ${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) {
              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 (window.tempFinalizedRecording) {
            // 如果是因为停止草稿而生成的临时录音，放弃时需要从服务器删除
            try {
                await fetch(`/tool/speakr/api/draft/${window.tempFinalizedRecording.id}`, {
                    method: 'DELETE' // 注意：这里可能需要一个专门删除 Recording 的 API，因为 draft 已经转成 recording 了
                    // 但我们的后端 /api/draft/<id> DELETE 实际上是删除 DraftRecording
                    // 草稿 finalize 后，DraftRecording 已经被删除了，生成了 Recording
                    // 所以我们需要调用删除 Recording 的 API
                });
                // 暂时没有通用的删除 Recording API 暴露给这里？
                // 我们可以复用 deleteRecording 逻辑，但这需要确认 API
                // 让我们查看 deleteRecording 的实现
                const resp = await fetch(`/tool/speakr/recording/${window.tempFinalizedRecording.id}`, {
                    method: 'DELETE'
                });
                
            } catch (e) {
                console.error("Failed to delete temp recording", e);
            }
            window.tempFinalizedRecording = null;
        }

        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 = "";
      };

      const drawSingleVisualizer = (analyserNode, canvasElement) => {
        if (!analyserNode || !canvasElement) return;

        const bufferLength = analyserNode.frequencyBinCount;
        const dataArray = new Uint8Array(bufferLength);
        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;

        // Use theme-specific colors that work with all color schemes
        const buttonColor = getComputedStyle(document.documentElement)
          .getPropertyValue("--bg-button")
          .trim();
        const buttonHoverColor = getComputedStyle(document.documentElement)
          .getPropertyValue("--bg-button-hover")
          .trim();

        // Create gradient that works in both light and dark modes
        const gradient = canvasCtx.createLinearGradient(0, 0, 0, HEIGHT);
        if (isDarkMode.value) {
          // Dark mode: use button colors with transparency
          gradient.addColorStop(0, buttonColor);
          gradient.addColorStop(0.6, buttonHoverColor);
          gradient.addColorStop(1, "rgba(0, 0, 0, 0.2)");
        } else {
          // Light mode: use more saturated colors for visibility
          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++) {
          barHeight = dataArray[i] / 2.5;
          canvasCtx.fillStyle = gradient;
          canvasCtx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
          x += barWidth + 2;
        }
      };

      const drawVisualizers = () => {
        if (!isRecording.value) {
          if (animationFrameId.value) {
            cancelAnimationFrame(animationFrameId.value);
            animationFrameId.value = null;
          }
          return;
        }

        animationFrameId.value = requestAnimationFrame(drawVisualizers);

        if (recordingMode.value === "both") {
          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");
        }
      };

      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 ---
      const 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") {
          // Initialize recording markdown editor when switching to recording view
          nextTick(() => {
            initializeRecordingMarkdownEditor();
            getBaseInfo();
            is_final.value = false;
            // 清空上一次的实时转录文本
            asrResultOnline.value = "";
            // ===== 清理旧的 Recorder 实例 =====
            // 根本原因修复：旧 rec 的 onProcess 回调在旧闭包中持续活跃，
            // 向已停止的旧 wsconnecter 发送数据，导致缓冲区溢出和 WebSocket 未连接刷屏
            if (rec) {
              try { rec.close(); } catch(e) { console.warn('关闭旧rec失败:', e); }
              rec = null;
            }
            if (rec2) {
              try { rec2.close(); } catch(e) { console.warn('关闭旧rec2失败:', e); }
              rec2 = null;
            }
            if (asrAudioContext) {
              try { asrAudioContext.close(); } catch(e) {}
              asrAudioContext = null;
            }
            if (asrAudioContext2) {
              try { asrAudioContext2.close(); } catch(e) {}
              asrAudioContext2 = null;
            }
            //语音实时转换相关
            //online的ws示例
            var wsconnecter = new WebSocketConnectMethod({
              msgHandle: getJsonMessage,
              stateHandle: getConnState,
            });
            //offline的ws示例
            var wsconnecter2 = new WebSocketConnectMethod({
              msgHandle: getJsonMessage2,
              stateHandle: getConnState2,
            });
            webReader = wsconnecter;
            webReader2 = wsconnecter2;
            var audioBlob;
            var sampleBuf = new Int16Array();
            var sampleBuf2 = new Int16Array();
            const asrChunkSize = 960;
            const asrBufferWarnSamples = 20000;
            const asrBufferHardLimitSamples = 16000 * 5;
            var rec_text = "";
            var offline_text = "";
            var rec_textOnline = "";
            var offlineSentenceHandoffText = "";
            var rec_textoffline = "";
            //------------------- 实时 ASR 待矫正句子队列 start------------------
            // pendingSentenceQueue 是 2pass-offline 文本进入正式转录前的等待队列。
            // 每条 offline 句子先入队，再等待 /api/asr/correct 的 LLM 矫正结果。
            // LLM 返回后由 finalizePendingSentence 标记 processed，再按队首顺序 flush 到 segmentList。
            var pendingSentenceQueue = [];
            let pendingSentenceSequence = 0;
            var lastOnlineTimestamp = null; // 记录上次在线转录的时间戳

            // extractTimestampMs: FunASR 返回的 timestamp 通常是二维数组或 JSON 字符串。
            // 这里取最后一段的结束时间，用它判断消息新旧、辅助说话人回填和去重。
            function extractTimestampMs(timestampPayload) {
              if (!timestampPayload) {
                // 没有 timestamp 时无法做时间屏障判断，后续逻辑会把它当作无时间消息处理。
                return null;
              }

              try {
                const timestampData =
                  typeof timestampPayload === "string"
                    ? JSON.parse(timestampPayload)
                    : timestampPayload;

                if (!Array.isArray(timestampData) || timestampData.length === 0) {
                  return null;
                }

                // FunASR timestamp 的最后一项代表当前句子末尾附近的时间。
                const lastItem = timestampData[timestampData.length - 1];
                if (!Array.isArray(lastItem) || lastItem.length === 0) {
                  return null;
                }

                // 优先取结束时间；部分返回只有 start 时退回取第一个值。
                const endOrStart =
                  lastItem.length > 1 ? Number(lastItem[1]) : Number(lastItem[0]);
                return Number.isFinite(endOrStart) ? endOrStart : null;
              } catch (error) {
                // timestamp 解析失败时不阻断转写，只放弃基于时间戳的旧消息判断。
                return null;
              }
            }

            // getLatestRealtimeTimestamp: 手动编辑实时转写时需要建立时间屏障。
            // 这里从正式 segment、pending 队列和 online 临时文本中取最新时间，避免旧消息回灌。
            function getLatestRealtimeTimestamp() {
              const latestSegmentTimestamp = segmentList.reduce(
                (latest, segment) =>
                  Number.isFinite(segment?.timestampMs)
                    ? Math.max(latest, segment.timestampMs)
                    : latest,
                -1
              );
              const latestPendingTimestamp = pendingSentenceQueue.reduce(
                (latest, item) =>
                  Number.isFinite(item.timestampMs)
                    ? Math.max(latest, item.timestampMs)
                    : latest,
                -1
              );
              const latestOnlineTimestamp = Number.isFinite(lastOnlineTimestamp)
                ? lastOnlineTimestamp
                : -1;

              return Math.max(
                latestSegmentTimestamp,
                latestPendingTimestamp,
                latestOnlineTimestamp
              );
            }

            // 只保留尾部文本作为 overlap 参照，避免手动编辑后 offline 结果把已编辑内容重复带回来。
            function getRealtimeCarryoverTail(text, maxLength = 160) {
              return (text || "").slice(-maxLength);
            }

            // getSharedRealtimeSuffix: 找原始实时文本和用户编辑后文本之间仍然相同的尾部。
            // 该函数用于辅助构造 realtimeEditCarryover，减少后续 offline 文本重复拼接。
            function getSharedRealtimeSuffix(
              originalText,
              editedText,
              maxLength = 80
            ) {
              const original = originalText || "";
              const edited = editedText || "";
              const maxSuffixLength = Math.min(
                maxLength,
                original.length,
                edited.length
              );

              for (let size = maxSuffixLength; size >= 1; size--) {
                const suffix = edited.slice(-size);
                if (original.endsWith(suffix)) {
                  return suffix;
                }
              }

              return "";
            }

            // buildRealtimeEditCarryover: 用户手动编辑实时转写后，记录一小段尾巴。
            // 下一条 2pass-offline 到达时，会用这段尾巴裁掉重复内容。
            function buildRealtimeEditCarryover(baseText) {
              const tailText = getRealtimeCarryoverTail(baseText);
              if (tailText.length < 4) {
                return null;
              }

              return {
                tailText,
              };
            }

            // trimOfflineTextWithCarryover: 裁掉 offline 文本中与手动编辑尾巴重叠的部分。
            // 例：用户已编辑到 "今天会议讨论A"，offline 又返回 "会议讨论A和B"，则只保留 "和B"。
            function trimOfflineTextWithCarryover(rawText) {
              const incomingText = rawText || "";
              if (!realtimeEditCarryover || !incomingText) {
                // 没有手动编辑 carryover，或当前 offline 文本为空，直接返回原文。
                return incomingText;
              }

              const tailText = realtimeEditCarryover.tailText || "";
              const minOverlapLength = 4;
              const maxOverlapLength = Math.min(
                80,
                tailText.length,
                incomingText.length
              );

              // 从最长 overlap 开始找，优先裁掉最大重复片段，减少重复显示。
              for (
                let size = maxOverlapLength;
                size >= minOverlapLength;
                size--
              ) {
                const overlapText = tailText.slice(-size);
                const matchIndex = incomingText.lastIndexOf(overlapText);
                if (matchIndex === -1) {
                  continue;
                }

                // 找到重叠片段后，只把重叠之后的新内容作为本次 pending 文本。
                const remainingText = incomingText.slice(
                  matchIndex + overlapText.length
                );
                // 更新 carryover 尾巴，让后续 offline 文本继续用最新上下文去重。
                realtimeEditCarryover.tailText = getRealtimeCarryoverTail(
                  tailText + remainingText
                );
                return remainingText;
              }

              // 没有找到 overlap，说明后续 offline 文本已经和编辑尾巴接不上，停止 carryover 逻辑。
              realtimeEditCarryover = null;
              return incomingText;
            }

            function clearRealtimePipeline({
              preserveTimestampBarrier = false,
            } = {}) {
              sampleBuf = new Int16Array();
              sampleBuf2 = new Int16Array();
              rec_text = "";
              offline_text = "";
              rec_textOnline = "";
              offlineSentenceHandoffText = "";
              rec_textoffline = "";
              pendingSentenceQueue = [];
              pendingSentenceSequence = 0;
              lastOnlineTimestamp = null;
              asrResultOnline.value = "";
              asrResultOffline.value = "";

              if (!preserveTimestampBarrier) {
                realtimeTimestampBarrierMs = -1;
              }

              syncRealtimePreview();
            }

            // isStaleRealtimeMessage: 判断一条 WebSocket 回包是否属于旧录音周期或旧时间段。
            // 返回 true 时，ensurePendingSentence 会直接丢弃，避免暂停/恢复/手动编辑后的旧消息污染当前文本。
            function isStaleRealtimeMessage(
              messageTimestampMs,
              messageEpoch = liveTranscriptionEpoch
            ) {
              if (messageEpoch !== liveTranscriptionEpoch) {
                // epoch 不一致表示消息来自上一轮实时转写，必须丢弃。
                return true;
              }

              return (
                // 时间戳小于等于屏障，说明这条消息早于用户编辑/重置点，不能再回灌。
                Number.isFinite(messageTimestampMs) &&
                realtimeTimestampBarrierMs >= 0 &&
                messageTimestampMs <= realtimeTimestampBarrierMs
              );
            }
            clearRealtimePipelineRef = clearRealtimePipeline;
            getLatestRealtimeTimestampRef = getLatestRealtimeTimestamp;
            buildRealtimeEditCarryoverRef = buildRealtimeEditCarryover;
            renderFullTextRef = renderFullText;

            // getPendingSentencePreviewText: pending 队列还未正式落到 segmentList，
            // 但用户仍需要在实时预览区先看到这些句子。
            function getPendingSentencePreviewText() {
              return pendingSentenceQueue
                .filter((item) => item.epoch === liveTranscriptionEpoch)
                .map((item) => item.correctedText || item.rawText)
                .join("");
            }

            // syncRealtimePreview: 刷新右侧/实时区域的临时展示文本。
            // 展示顺序：待矫正 offline 句子 + online/offline 交接文本 + 当前 online 临时文本。
            function syncRealtimePreview() {
              asrResultOnline.value =
                getPendingSentencePreviewText() +
                offlineSentenceHandoffText +
                rec_textOnline;
            }

            // findPendingSentenceBySource: 用 sourceText + timestamp + epoch 做幂等去重。
            // 同一条 offline 句子如果重复返回，直接复用已有 pending/segment，避免重复矫正和重复落句。
            function findPendingSentenceBySource(
              sourceText,
              pendingTimestamp,
              messageEpoch = liveTranscriptionEpoch
            ) {
              const normalizedSourceText = sourceText || "";
              const normalizedTimestamp = pendingTimestamp || "";
              return (
                // 先查 pending 队列：句子可能正在等待 LLM 矫正。
                pendingSentenceQueue.find(
                  (item) =>
                    item.epoch === messageEpoch &&
                    item.sourceText === normalizedSourceText &&
                    item.timestamp === normalizedTimestamp
                ) ||
                // 再查正式 segmentList：句子可能已经矫正完成并落入正式转录。
                segmentList.find(
                  (item) =>
                    item.epoch === messageEpoch &&
                    item.sourceText === normalizedSourceText &&
                    item.timestamp === normalizedTimestamp
                ) ||
                null
              );
            }

            // ensurePendingSentence: 2pass-offline 文本进入 LLM 矫正前的统一入口。
            // 它负责：丢弃旧消息、去重、裁掉手动编辑造成的重复尾巴、创建 pending item、刷新预览。
            // 注意：这里不会正式写入 segmentList，正式落句在 finalizePendingSentence/flushProcessedPendingSentences。
            function ensurePendingSentence(
              sourceText,
              pendingTimestamp,
              messageEpoch = liveTranscriptionEpoch
            ) {
              // 先把 FunASR timestamp 归一化为毫秒数，用于旧消息过滤和后续 speaker 对齐。
              const timestampMs = extractTimestampMs(pendingTimestamp);
              if (isStaleRealtimeMessage(timestampMs, messageEpoch)) {
                // 旧录音周期或旧时间屏障之前的消息直接丢弃，不进入 pending 队列。
                return null;
              }

              // 同一 sourceText/timestamp/epoch 已经存在时直接复用，保证重复 WebSocket 回包幂等。
              const existingItem = findPendingSentenceBySource(
                sourceText,
                pendingTimestamp,
                messageEpoch
              );
              if (existingItem) {
                // 返回已有 item，调用方会看到它已请求/已处理状态，从而避免重复请求 LLM。
                return existingItem;
              }

              // 裁掉与手动编辑尾巴重叠的部分，得到真正需要进入矫正流程的新文本。
              const trimmedText = trimOfflineTextWithCarryover(sourceText || "");
              if (!trimmedText) {
                // 裁剪后没有新内容，说明这条 offline 文本只是重复片段，不入队。
                syncRealtimePreview();
                return null;
              }

              // pendingItem 是 LLM 矫正流程的最小状态单元。
              const pendingItem = {
                id: pendingSentenceSequence++, // 本地递增 ID，LLM 返回时用它定位这条 pending 句子。
                sourceText: sourceText || "", // FunASR 原始文本，用于去重和保留来源。
                rawText: trimmedText, // 裁剪后的文本，后续会作为 /api/asr/correct 的输入。
                timestamp: pendingTimestamp || "", // 原始 timestamp 字符串/对象，用于去重和渲染时断句。
                timestampMs, // 毫秒时间点，用于旧消息过滤和 offline-speaker 对齐。
                correctedText: "", // LLM/标准词映射后的文本，finalize 前保持为空。
                processed: false, // false 表示还不能 flush 到正式 segmentList。
                correctionRequested: false, // 防止同一句重复发起 LLM 矫正请求。
                epoch: messageEpoch, // 当前实时转写周期，防止上一轮录音的异步结果混入。
              };
              // 新 pending 先进入等待队列，让实时预览能立即显示，同时等待 LLM 矫正结果。
              pendingSentenceQueue.push(pendingItem);
              // 刷新临时预览；正式主文本 asrResult 要等 processed 后由 flushProcessedPendingSentences 更新。
              syncRealtimePreview();
              return pendingItem;
            }
            //--------------------实时 ASR 待矫正句子队列 end------------------
            function flushProcessedPendingSentences() {
              let didFlush = false;
              while (pendingSentenceQueue.length > 0) {
                if (pendingSentenceQueue[0].epoch !== liveTranscriptionEpoch) {
                  pendingSentenceQueue.shift();
                  continue;
                }
                if (!pendingSentenceQueue[0].processed) {
                  break;
                }

                const item = pendingSentenceQueue.shift();
                segmentList.push({
                  text: item.correctedText || item.rawText,
                  sourceText: item.sourceText,
                  timestamp: item.timestamp,
                  timestampMs: item.timestampMs,
                  speaker: null,
                  processed: true,
                  epoch: item.epoch,
                });
                didFlush = true;
              }

              if (didFlush) {
                renderFullText();
              } else {
                syncRealtimePreview();
              }
            }
            function finalizePendingSentence(
              pendingSentenceId,
              finalText,
              messageEpoch = liveTranscriptionEpoch
            ) {
              const target = pendingSentenceQueue.find(
                (item) =>
                  item.id === pendingSentenceId && item.epoch === messageEpoch
              );
              if (!target) {
                return;
              }

              target.correctedText = finalText || target.rawText || "";
              target.processed = true;
              target.correctionRequested = false;
              flushProcessedPendingSentences();
            }
            async function record() {
              // rec.open(function () {
              //   rec.start();
              // });
              // await startRecording();
              await openMixedStream();
            }
            async function record2() {
              // rec2.open(function () {
              //   rec2.start();
              // });
              // await startRecording();
              await openMixedStream2();
            }
            //------------------- 实时 ASR online PCM 发送通道 start------------------
            // rec 和 rec2 采集的是同一份混合音频，PCM 重采样和 960-sample 切片逻辑一致。
            // rec 只负责 online 链路：wsconnecter.wsStart() 不传 URL 参数，
            // wsconnecter.js 会在握手 JSON 中发送 mode:"online"，用于页面实时预览文本。
            // ********************每收到一帧音频时的回调********************
            function recProcess(
              buffer, // Recorder 已经采集到的 PCM 缓冲数组，最后一项是本次新增的音频片段

              powerLevel, // 当前音量强度，当前逻辑没有使用
              bufferDuration, // 已录制的总时长，当前逻辑没有使用
              bufferSampleRate, // 浏览器采集到的原始采样率，常见是 48000Hz
              newBufferIdx, // 本次新增音频片段在 buffer 中的起始索引，当前逻辑没有使用
              asyncEnd // 异步处理结束回调，当前逻辑没有使用
            ) {
              // 调试断点：打开浏览器开发者工具时，会在每次音频回调处暂停
              // 只有处于录音状态时才处理音频，避免停止后旧回调继续发送数据
              if (isRec === true) {
                // 取出本次新增的最后一段 PCM 音频数据
                var data_48k = buffer[buffer.length - 1];

                // Recorder.SampleData 需要传入“音频片段数组”，所以把单段数据包一层数组
                var array_48k = new Array(data_48k);
                // 将浏览器原始采样率的音频重采样到 16000Hz，符合 ASR 服务输入要求
                var data_16k = Recorder.SampleData(
                  array_48k,
                  bufferSampleRate,
                  16000
                ).data;

                // 把新来的 16k PCM 数据追加到本地待发送缓冲区
                sampleBuf = Int16Array.from([...sampleBuf, ...data_16k]);

                // 如果缓冲超过硬限制，说明发送速度跟不上采集速度，需要丢掉最旧的数据
                if (sampleBuf.length > asrBufferHardLimitSamples) {
                  // 计算本次超过硬限制的 sample 数量；Int16Array 每个 sample 约占 2 字节
                  const overflowSamples =
                    sampleBuf.length - asrBufferHardLimitSamples;
                  console.warn(
                    `⚠️ [Online] 丢弃过量本地音频缓冲: ${overflowSamples} samples`
                  );
                  // 只保留最后 asrBufferHardLimitSamples 个 sample，尽量保留最新的声音
                  sampleBuf = sampleBuf.slice(-asrBufferHardLimitSamples);
                }

                // 只要缓冲区够一个 ASR 分片，就持续切片发送
                while (sampleBuf.length >= asrChunkSize) {
                  // 从缓冲区头部取一个固定大小的音频块，发送给在线识别 WebSocket
                  const sendBuf = sampleBuf.slice(0, asrChunkSize);
                  const sendAccepted = wsconnecter.wsSend(sendBuf);
                  // 如果 WebSocket 当前不可发送，保留剩余缓冲，等待下一次 onProcess 再尝试
                  if (!sendAccepted) {
                    break;
                  }
                  // 发送成功后，从本地缓冲中移除已经发送的这一段
                  sampleBuf = sampleBuf.slice(asrChunkSize);
                }

                // 超过软告警阈值时只打印警告，不丢数据；真正丢弃由上面的硬限制控制
                if (sampleBuf.length > asrBufferWarnSamples) {
                  console.warn(
                    `⚠️ [Online] 音频缓冲区溢出: ${sampleBuf.length} samples (${(
                      sampleBuf.length / 16000
                    ).toFixed(2)}s)`
                  );
                }
              }
            }
            //--------------------实时 ASR online PCM 发送通道 end------------------
            //------------------- 实时 ASR offline PCM 发送通道 start------------------
            // rec2 与 rec 使用同样的 PCM 切片方式，但发送到独立的 wsconnecter2。
            // wsconnecter2.wsStart(urls) 会在握手 JSON 中发送 mode:"offline"，
            // 用于 2pass-offline 正式落句、offline-speaker 说话人回填和后续 LLM 矫正。
            function recProcess2(
              buffer,
              powerLevel,
              bufferDuration,
              bufferSampleRate,
              newBufferIdx,
              asyncEnd
            ) {
              if (isRec === true) {
                var data_48k = buffer[buffer.length - 1];

                var array_48k = new Array(data_48k);
                var data_16k = Recorder.SampleData(
                  array_48k,
                  bufferSampleRate,
                  16000
                ).data;

                sampleBuf2 = Int16Array.from([...sampleBuf2, ...data_16k]);

                if (sampleBuf2.length > asrBufferHardLimitSamples) {
                  const overflowSamples =
                    sampleBuf2.length - asrBufferHardLimitSamples;
                  console.warn(
                    `⚠️ [Offline] 丢弃过量本地音频缓冲: ${overflowSamples} samples`
                  );
                  sampleBuf2 = sampleBuf2.slice(-asrBufferHardLimitSamples);
                }

                while (sampleBuf2.length >= asrChunkSize) {
                  const sendBuf2 = sampleBuf2.slice(0, asrChunkSize);
                  const sendAccepted = wsconnecter2.wsSend(sendBuf2);
                  if (!sendAccepted) {
                    break;
                  }
                  sampleBuf2 = sampleBuf2.slice(asrChunkSize);
                }

                if (sampleBuf2.length > asrBufferWarnSamples) {
                  console.warn(
                    `⚠️ [Offline] 音频缓冲区溢出: ${sampleBuf2.length} samples (${(
                      sampleBuf2.length / 16000
                    ).toFixed(2)}s)`
                  );
                }
              }
            }
            //--------------------实时 ASR offline PCM 发送通道 end------------------
            function addNewlineAfterPeriod(str) {
              return str.replace(/[。？！]/g, "$&\n");
            }

            function handleWithTimestamp(
              tmptext,
              tmptime,
              keywordStr,
              timeThreshold
            ) {
              if (!tmptime || tmptext.length <= 0) return tmptext;

              const keywordList = keywordStr
                .split(",")
                .map((k) => k.trim())
                .filter((k) => k.length > 0);

              const keywordsAsRegex = keywordList.map((k) => new RegExp(k));
              const segments = tmptext.match(/[^。！？]+[。！？]?/g) || [];
              // console.log(segments, "segments");

              const jsontime = JSON.parse(tmptime);
              let char_index = 0;
              let text_withtime = "";

              // 辅助函数：去除新行开头的标点符号
              function removeLeadingPunctuation(text) {
                // 匹配开头的标点符号（中文和英文标点）
                return text.replace(/^[，。！？、；：,\.!?;:]+/, "");
              }

              for (let i = 0; i < segments.length; i++) {
                let seg = segments[i];
                if (!seg || seg === "undefined") continue;

                let nowTime = jsontime[char_index][0] / 1000;

                if (
                  lastTimer.value > 0 &&
                  nowTime - lastTimer.value > timeThreshold
                ) {
                  const lastChar = text_withtime.slice(-1);
                  const endsWithPunc = /[。！？]/.test(lastChar);
                  // 换行后，如果新行开头是标点，去除第一个标点
                  let processedSeg = removeLeadingPunctuation(seg);
                  text_withtime +=
                    (endsWithPunc ? "\n" : "。\n") + processedSeg;
                } else {
                  let hitKeyword = keywordsAsRegex.some((reg) => reg.test(seg));
                  if (hitKeyword) {
                    // 关键词后换行，如果下一行开头是标点，去除第一个标点
                    let processedSeg = removeLeadingPunctuation(seg);
                    // text_withtime += processedSeg + "。" + "\n";
                  } else {
                    text_withtime += seg;
                  }
                }

                lastTimer.value = nowTime;
                char_index++;
              }

              return text_withtime;
            }
            function getSpeakerBeforeIndex(endIndex) {
              let previousSpeaker = null;
              for (let i = 0; i < endIndex; i++) {
                if (segmentList[i] && segmentList[i].speaker) {
                  previousSpeaker = segmentList[i].speaker;
                }
              }
              return previousSpeaker;
            }

            function buildSegmentText(segments, initialSpeaker = null) {
              let displayText = "";
              let lastRenderedSpeaker = initialSpeaker;

              segments.forEach((seg) => {
                if (showSpeaker.value) {
                  if (
                    seg.speaker &&
                    seg.speaker !== lastRenderedSpeaker &&
                    !seg.speaker.includes("SPK")
                  ) {
                    displayText +=
                      (displayText ? "\n" : "") + seg.speaker + ":\n";
                    lastRenderedSpeaker = seg.speaker;
                  } else if (
                    seg.speaker &&
                    seg.speaker !== lastRenderedSpeaker
                  ) {
                    displayText +=
                      (displayText ? "\n" : "") + seg.speaker + ":\n";
                    lastRenderedSpeaker = seg.speaker;
                  }
                }

                let textContent = handleWithTimestamp(
                  seg.text,
                  seg.timestamp,
                  configwords,
                  6
                );
                displayText += textContent;
              });

              return displayText;
            }

            function renderFullText() {
              const initialSpeaker =
                segmentRenderStartIndex > 0
                  ? getSpeakerBeforeIndex(segmentRenderStartIndex)
                  : null;
              const displayText = buildSegmentText(
                segmentList.slice(segmentRenderStartIndex),
                initialSpeaker
              );

              rec_text = displayText;
              // 保留历史转录内容（来自暂停/继续草稿）
              asrResult.value = pausedTranscription.value + rec_text; // 更新主显示区域

              // 更新实时显示，展示剩余的待处理句子 + 当前正在识别的内容
              syncRealtimePreview();
              // 移除旧的清空逻辑
              // asrResultOnline.value = "";
              // rec_textOnline = "";
            }
            // Legacy implementation kept temporarily for reference; the active
            // realtime path uses the clean getJsonMessage defined below.
            function getJsonMessageLegacy(jsonMsg) {
              const parsedMessage = JSON.parse(jsonMsg.data);
              var rectxt = "" + parsedMessage["text"];
              var asrmodel = parsedMessage["mode"];
              var timestamp = parsedMessage["timestamp"];

              // 检查是否需要重置转录状态（从暂停/恢复时）
              if (resetTranscriptionFlag) {
                console.log("🔄 重置转录状态（暂停/恢复后）");
                clearRealtimePipeline();
                resetTranscriptionFlag = false;
              }

              const messageEpoch = liveTranscriptionEpoch;

              if (asrmodel == "2pass-online") {
                // ✅ 实时转录换行逻辑
                // 规则1：凡是换行的，末尾必须是句号（。）
                // 规则2：不修改标点符号
                // 规则3：停顿3秒以上才换行

                // 解析时间戳（获取最后一个字符的时间）
                const currentTimestamp = extractTimestampMs(timestamp);
                if (isStaleRealtimeMessage(currentTimestamp, messageEpoch)) {
                  syncRealtimePreview();
                  if (is_final.value == true) {
                    wsconnecter.wsStop();
                    webReader2.wsStop();
                  }
                  return;
                }

                // 检查是否需要换行
                let shouldBreak = false;
                if (lastOnlineTimestamp !== null && currentTimestamp !== null) {
                  // 计算时间差（单位：秒）
                  const timeDiff = (currentTimestamp - lastOnlineTimestamp) / 1000;
                  // 停顿超过3秒，且当前文本以句号结尾
                  if (timeDiff >= 3 && /。\s*$/.test(rectxt)) {
                    shouldBreak = true;
                  }
                }

                // 拼接文本（不修改标点）
                if (shouldBreak) {
                  rec_textOnline = rec_textOnline + rectxt + "\n";
                } else {
                  rec_textOnline = rec_textOnline + rectxt;
                }

                // 更新时间戳
                lastOnlineTimestamp = currentTimestamp;

              } else if (asrmodel == "2pass-offline") {
                 // Bug fix: 使用offline返回的完整文本替代可能不完整的online累积文本
                 // rectxt包含了完整的转录结果，比rec_textOnline更准确
                 ensurePendingSentence(rectxt, timestamp, messageEpoch);
                 rec_textOnline = "";
                 lastOnlineTimestamp = null; // 重置时间戳
               } else{
               }
              // 更新显示：队列中的内容 + 当前实时内容
              syncRealtimePreview();

              if (is_final.value == true) {
                wsconnecter.wsStop();
                webReader2.wsStop();
              }
            }
            function getJsonMessage(jsonMsg) {
              const parsedMessage = JSON.parse(jsonMsg.data);
              var rectxt = "" + parsedMessage["text"];
              var asrmodel = parsedMessage["mode"];
              var timestamp = parsedMessage["timestamp"];

              if (resetTranscriptionFlag) {
                console.log("重置实时转录状态（暂停/恢复后）");
                clearRealtimePipeline();
                resetTranscriptionFlag = false;
              }

              const messageEpoch = liveTranscriptionEpoch;

              if (asrmodel == "2pass-online") {
                const currentTimestamp = extractTimestampMs(timestamp);
                if (isStaleRealtimeMessage(currentTimestamp, messageEpoch)) {
                  syncRealtimePreview();
                  if (is_final.value == true) {
                    wsconnecter.wsStop();
                    webReader2.wsStop();
                  }
                  return;
                }

                let shouldBreak = false;
                if (lastOnlineTimestamp !== null && currentTimestamp !== null) {
                  const timeDiff = (currentTimestamp - lastOnlineTimestamp) / 1000;
                  if (timeDiff >= 3 && /。\s*$/.test(rectxt)) {
                    shouldBreak = true;
                  }
                }

                if (shouldBreak) {
                  rec_textOnline = rec_textOnline + rectxt + "\n";
                } else {
                  rec_textOnline = rec_textOnline + rectxt;
                }

                lastOnlineTimestamp = currentTimestamp;
              } else if (asrmodel == "2pass-offline") {
                // 离线句子的正式入队只走 getJsonMessage2，避免双通路重复落句。
                rec_textOnline = "";
                offlineSentenceHandoffText = rectxt || rec_textOnline || "";
                rec_textOnline = "";
                lastOnlineTimestamp = null;
              }

              syncRealtimePreview();

              if (is_final.value == true) {
                wsconnecter.wsStop();
                webReader2.wsStop();
              }
            }
            async function getJsonMessage2(jsonMsg) {
              const parsedMessage = JSON.parse(jsonMsg.data);
              var asrmodeltype = parsedMessage["mode"];
              var timestamp = parsedMessage["timestamp"];
              const messageEpoch = liveTranscriptionEpoch;
              const messageTimestampMs = extractTimestampMs(timestamp); // 获取最后一个时间

              // ============================
              // 场景 A: 2pass-offline (文本先到)
              // ============================
              if (asrmodeltype == "2pass-offline") {
                if (isStaleRealtimeMessage(messageTimestampMs, messageEpoch)) {
                  if (is_final.value == true) {
                    wsconnecter.wsStop();
                  }
                  return;
                }

                var rectxt = "" + parsedMessage["text"];
                rec_textOnline = "";
                lastOnlineTimestamp = null;
                // 3. 准备进行 LLM 矫正
                // 使用当前数组里已有的文本 (就是 2pass-offline 的文本)
                const pendingSentence = ensurePendingSentence(
                  rectxt,
                  timestamp,
                  messageEpoch
                );
                offlineSentenceHandoffText = "";
                syncRealtimePreview();
                if (
                  !pendingSentence ||
                  pendingSentence.processed ||
                  pendingSentence.correctionRequested
                ) {
                  return;
                }

                pendingSentence.correctionRequested = true;
                pendingCorrectionCount++;
                try {
                  const response = await fetch(`/tool/speakr/api/asr/correct`, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ text: pendingSentence.rawText }), // 发送当前新增文本去矫正
                  });

                  if (!response.ok) {
                    throw new Error("ASR correction failed");
                  }

                  const data = await response.json();
                  let correctedText =
                    data.corrected_text || pendingSentence.rawText;

                  // 4. LLM 回来后，直接更新文本内容（自动应用）
                  finalizePendingSentence(
                    pendingSentence.id,
                    correctedText,
                    messageEpoch
                  );
                  console.log("LLM矫正完成");
                } catch (error) {
                  finalizePendingSentence(
                    pendingSentence.id,
                    pendingSentence.rawText,
                    messageEpoch
                  );
                  console.error("LLM矫正出错:", error);
                } finally {
                  pendingCorrectionCount = Math.max(
                    0,
                    pendingCorrectionCount - 1
                  );
                }
              }

              // ============================
              // 场景 B: offline-speaker (说话人后到)
              // ============================
              else if (asrmodeltype == "offline-speaker") {
                if (isStaleRealtimeMessage(messageTimestampMs, messageEpoch)) {
                  if (is_final.value == true) {
                    wsconnecter.wsStop();
                  }
                  return;
                }
                // 【修改点】：这里不再获取 full_text 用于替换
                // var rectxt = "" + JSON.parse(jsonMsg.data)["full_text"]; // 这行删掉或注释

                let nowSpeaker =
                  (parsedMessage["segments"] &&
                    parsedMessage["segments"][0] &&
                    parsedMessage["segments"][0].speaker) ||
                  "未命名演讲者";

                // 找到最后一个还没认领说话人的句子
                let targetIndex = -1;
                for (let i = segmentList.length - 1; i >= 0; i--) {
                  const segment = segmentList[i];
                  if (!segment || segment.epoch !== messageEpoch) {
                    continue;
                  }
                  if (
                    segment.speaker === null &&
                    Number.isFinite(messageTimestampMs) &&
                    Number.isFinite(segment.timestampMs) &&
                    segment.timestampMs === messageTimestampMs
                  ) {
                    targetIndex = i;
                    break;
                  }
                  if (targetIndex === -1 && segment.speaker === null) {
                    targetIndex = i;
                  }
                }

                if (targetIndex !== -1) {
                  // 1. 只更新说话人
                  segmentList[targetIndex].speaker = nowSpeaker;

                  // 【关键】：这里绝对不更新 text，保持 2pass-offline 时的原样
                  // segmentList[targetIndex].text = ...; // 不要这行

                  // 2. 立即渲染
                  // 效果：文本没变（不会跳变），只是头上多了个名字
                  renderFullText();
                }
              }

              if (is_final.value == true) {
                wsconnecter.wsStop();
              }
            }

            // 连接状态响应
            function getConnState(connState) {
              if (connState === 0) {
                record();
              } else if (connState === 1) {
              } else if (connState === 2) {
                stop();
              }
            }
            // 连接状态响应
            function getConnState2(connState) {
              if (connState === 0) {
                record2();
              } else if (connState === 1) {
              } else if (connState === 2) {
                stop();
              }
            }
            async function getMicrophoneInfo() {
              if (
                !navigator.mediaDevices ||
                !navigator.mediaDevices.enumerateDevices
              ) {
                console.warn("当前浏览器不支持获取设备信息");
                return null;
              }

              const devices = await navigator.mediaDevices.enumerateDevices();
              const mics = devices.filter((d) => d.kind === "audioinput");

              // 当前默认麦克风（大多数浏览器）
              const defaultMic =
                mics.find((d) => d.deviceId === "default") || mics[0];

              return {
                name: defaultMic?.label || "未知麦克风",
                deviceId: defaultMic?.deviceId || "",
                all: mics.map((d) => ({
                  name: d.label,
                  deviceId: d.deviceId,
                })),
              };
            }
            async function openMixedStream() {
              try {
                const micInfo = await getMicrophoneInfo();
                if (micInfo) {
                  console.log("🎤 当前麦克风：", micInfo.name, micInfo);
                }
                // 获取麦克风音频流
                const micStreams = micStream;

                // 尝试获取系统音频流
                let systemStreams;
                try {
                  systemStreams = systemStream;
                } catch (err) {
                  console.warn("未能获取系统音频，仅使用麦克风录音:", err);
                }

                // 创建音频上下文和混音目标
                if (asrAudioContext) {
                  try { asrAudioContext.close(); } catch(e) {}
                }
                asrAudioContext = new (window.AudioContext ||
                  window.webkitAudioContext)();
                const audioContext = asrAudioContext;
                const destination = audioContext.createMediaStreamDestination();

                // 把麦克风接入混音输出
                const micSource =
                  audioContext.createMediaStreamSource(micStreams);
                micSource.connect(destination);

                // 如果有系统音频，混入
                if (systemStream && systemStream.getAudioTracks().length > 0) {
                  const sysSource =
                    audioContext.createMediaStreamSource(systemStream);
                  sysSource.connect(destination);
                } else {
                  console.log("⚠️ 未检测到系统音频，使用麦克风录音");
                }

                // 打开 recorder 并传入混合后的流
                rec.open(
                  () => {
                    rec.start(destination.stream);
                  },
                  (msg) => {
                    console.error("❌ 录音权限被拒绝:", msg);
                  }
                );
              } catch (err) {
                console.error("初始化录音失败:", err);
              }
            }
            async function openMixedStream2() {
              try {
                // 获取麦克风音频流
                const micStreams = micStream;

                // 尝试获取系统音频流（Chrome 需要用户手动勾选“共享系统音频”）
                let systemStreams;
                try {
                  systemStreams = systemStream;
                } catch (err) {
                  console.warn("未能获取系统音频，仅使用麦克风录音:", err);
                }

                // 创建音频上下文和混音目标
                if (asrAudioContext2) {
                  try { asrAudioContext2.close(); } catch(e) {}
                }
                asrAudioContext2 = new (window.AudioContext ||
                  window.webkitAudioContext)();
                const audioContext = asrAudioContext2;
                const destination = audioContext.createMediaStreamDestination();

                // 把麦克风接入混音输出
                const micSource =
                  audioContext.createMediaStreamSource(micStreams);
                micSource.connect(destination);

                // 如果有系统音频，混入
                if (systemStream && systemStream.getAudioTracks().length > 0) {
                  const sysSource =
                    audioContext.createMediaStreamSource(systemStream);
                  sysSource.connect(destination);
                } else {
                  console.log("⚠️ 未检测到系统音频，使用麦克风录音");
                }

                // 打开 recorder 并传入混合后的流
                rec2.open(
                  () => {
                    rec2.start(destination.stream);
                  },
                  (msg) => {
                    console.error("❌ 录音权限被拒绝:", msg);
                  }
                );
              } catch (err) {
                console.error("初始化录音失败:", err);
              }
            }

            //------------------- 实时 ASR 双 WebSocket 启动 start------------------
            const start = () => {
              // 清除显示
              //   clear();
              //控件状态更新

              //启动 online 连接：不传 URL 时仍连接默认 /websocket_offline，
              //真正区别是 wsconnecter.js 将 modeType 设置为 "online"。
              var ret = wsconnecter.wsStart();
              if (ret == 1) {
                isRec = true;
                return 1;
              } else {
                return 0;
              }
            };
            const start2 = () => {
              // 清除显示
              //   clear();
              //控件状态更新

              let urls = `wss://${wssBaseUrl.FUNASR_WEBSOCKET_IP}/websocket_offline`;
              //启动 offline 连接：URL 与 online 默认地址相同，区别在握手 mode:"offline"。
              var ret = wsconnecter2.wsStart(urls);
              if (ret == 1) {
                isRec = true;
                return 1;
              } else {
                return 0;
              }
            };
            //--------------------实时 ASR 双 WebSocket 启动 end------------------
            if (!isPaused.value) {
                start();
                start2();
            }
            //------------------- 实时 ASR 双 Recorder 实例 start------------------
            // 这里的 rec/rec2 只负责实时 ASR PCM 推流，不是最终保存录音文件的 MediaRecorder。
            // 两个 Recorder 都监听同一份混合音频流，分别进入 online/offline 两条 WebSocket 链路。
            rec = Recorder({
              type: "pcm",
              bitRate: 16,
              sampleRate: 16000,
              onProcess: recProcess,
            });
            rec2 = Recorder({
              type: "pcm",
              bitRate: 16,
              sampleRate: 16000,
              onProcess: recProcess2,
            });
            //--------------------实时 ASR 双 Recorder 实例 end------------------

            // Fix audio duration for recorded files
            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 {
          liveTranscriptionEpoch += 1;
          realtimeTimestampBarrierMs = -1;
          clearRealtimePipelineRef = null;
          getLatestRealtimeTimestampRef = null;
          buildRealtimeEditCarryoverRef = null;
          renderFullTextRef = null;
          isRec = false;
          analysisResult.value = "";
          asrResult.value = "";
          segmentList = [];
          segmentRenderStartIndex = 0;
          isEditingTranscription.value = false;
          is_final.value = false;
          if (recordingMarkdownEditorInstance.value) {
            recordingMarkdownEditorInstance.value.toTextArea();
            recordingMarkdownEditorInstance.value = null;
          }
          if (webReader) {
            webReader.wsStop();
          }
          if (webReader2) {
            webReader2.wsStop();
          }
          // 关闭 Recorder 实例，停止 onProcess 回调
          if (rec) {
            try { rec.close(); } catch(e) {}
            rec = null;
          }
          if (rec2) {
            try { rec2.close(); } catch(e) {}
            rec2 = null;
          }
          if (asrAudioContext) {
            try { asrAudioContext.close(); } catch(e) {}
            asrAudioContext = null;
          }
          if (asrAudioContext2) {
            try { asrAudioContext2.close(); } catch(e) {}
            asrAudioContext2 = null;
          }

          // Clean up recording markdown editor when leaving recording view
        }
      });
      //--------------------录音视图切换与实时 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,
        ].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(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);
      });

      // Auto-apply filters when they change (except text query which is debounced)
      watch(
        filterTags,
        () => {
          applyAdvancedFilters();
        },
        { deep: true }
      );

      watch(filterDatePreset, () => {
        applyAdvancedFilters();
      });

      watch(
        filterDateRange,
        () => {
          applyAdvancedFilters();
        },
        { deep: true }
      );

      // Debounce text query changes
      watch(filterTextQuery, (newValue) => {
        clearTimeout(searchDebounceTimer.value);
        searchDebounceTimer.value = setTimeout(() => {
          applyAdvancedFilters();
        }, 300);
      });

      //--------------------响应式监听与界面联动 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);
      });

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

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

      function enterEditMode() {
        editModeOriginalText = fullRealtimeTranscription.value || "";
        editableText.value = editModeOriginalText;
        editModeBufferStartIndex = segmentList.length;
        const barrierTimestampMs = getLatestRealtimeTimestampRef
          ? getLatestRealtimeTimestampRef()
          : null;
        startNewRealtimeEpoch({
          barrierTimestampMs,
          clearEditCarryover: false,
        });
        realtimeEditCarryover = buildRealtimeEditCarryoverRef
          ? buildRealtimeEditCarryoverRef(editModeOriginalText)
          : null;
        isEditingTranscription.value = true;
      }

      function exitEditMode() {
        const nextText = editableText.value ?? "";

        isEditingTranscription.value = false;

        pausedTranscription.value = nextText;
        asrResult.value = nextText;
        asrResultOnline.value = "";
        asrResultOffline.value = "";
        segmentRenderStartIndex = editModeBufferStartIndex;
        editModeOriginalText = nextText;

        if (renderFullTextRef) {
          renderFullTextRef();
        }
      }

      //--------------------实时转写手动编辑模式 end------------------

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

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

        // UI State
        browser,
        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,
        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,
        currentDraftId,
        showRecordingControls,
        pausedDuration,
        pausedTranscription,
        draftRecordings,
        draftsExpanded,
        pauseRecording,
        resumeRecording,
        loadDrafts,
        continueDraftRecording,
        deleteDraft,

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

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

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

        // Transcription
        transcriptionViewMode,
        legendExpanded,
        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,
        activeRecordingMetadata,
        datePresetOptions,
        languageOptions,

        // Color Schemes
        colorSchemes,
        asrResult,
        asrResultOnline,
        asrResultOffline,
        fullRealtimeTranscription,
        asrTextarea,
        asrResultTextarea,
        asrResultTextareaOnline,
        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,
        switchToUploadView,
        selectRecording,
        handleDragOver,
        handleDragLeave,
        handleDrop,
        handleFileSelect,
        addFilesToQueue,
        startRecording,
        stopRecording,
        uploadRecordedAudio,
        discardRecording,
        downloadRecordedAudio,
        loadRecordings,
        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,
        reprocessType,
        reprocessRecording,
        cancelReprocess,
        executeReprocess,
        asrReprocessOptions,
        showSpeakerModal,
        showShareModal,
        recordingToShare,
        shareOptions,
        generatedShareLink,
        existingShareDetected,
        userShares,
        isLoadingShares,
        showSharesListModal,
        shareToDelete,
        showShareDeleteModal,
        confirmDeleteShare,
        cancelDeleteShare,
        speakerMap,
        speakerDisplayMap,
        modalSpeakers,
        regenerateSummaryAfterSpeakerUpdate,
        identifiedSpeakers,
        identifiedSpeakersInOrder,
        hasSpeakerNames,
        openSpeakerModal,
        closeSpeakerModal,
        saveSpeakerNames,
        highlightedTranscript,
        highlightedSpeaker,
        highlightSpeakerInTranscript,
        focusSpeaker,
        blurSpeaker,
        clearSpeakerHighlight,
        currentSpeakerGroupIndex,
        speakerGroups,
        navigateToNextSpeakerGroup,
        navigateToPrevSpeakerGroup,
        speakerSuggestions,
        loadingSuggestions,
        activeSpeakerInput,
        searchSpeakers,
        selectSpeakerSuggestion,
        closeSpeakerSuggestionsOnClick,
        autoIdentifySpeakers,
        isAutoIdentifying,
        formatDuration,
        openShareModal,
        closeShareModal,
        createShare,
        openSharesList,
        closeSharesList,
        updateShare,
        deleteShare,
        copyShareLink,
        startDraftRename,
        saveDraftRename,
        editingDraftId,
        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,
        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------------------
});
