import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { Alert, Avatar, Button, Card, Col, Divider, Drawer, Empty, Form, Input, List, Modal, Popover, Progress, QRCode, Row, Select, Skeleton, Space, Switch, Tag, Typography, App, Dropdown } from 'antd';
import {
  AudioOutlined,
  CaretRightFilled,
  ClockCircleOutlined,
  CopyOutlined,
  DownloadOutlined,
  EditOutlined,
  FastForwardOutlined,
  FileTextOutlined,
  LeftOutlined,
  LinkOutlined,
  LoadingOutlined,
  PauseOutlined,
  RobotOutlined,
  SyncOutlined,
  UserOutlined,
  PlusOutlined,
  CheckCircleFilled,
  FilePdfOutlined,
  FileWordOutlined,
  ShareAltOutlined,
} from '@ant-design/icons';
import dayjs from 'dayjs';
import ReactMarkdown from 'react-markdown';
import {
  downloadMeetingTranscript,
  downloadMeetingSummary,
  getMeetingDetail,
  getMeetingChapters,
  getMeetingProgress,
  getTranscripts,
  MeetingChapterVO,
  MeetingProgress,
  MeetingTranscriptVO,
  MeetingVO,
  reSummary,
  resolveAudioMimeType,
  resolveMeetingPlaybackAudioUrl,
  retryMeetingTranscription,
  updateMeetingBasic,
  updateMeetingTranscript,
  updateMeetingSummary,
  updateSpeakerInfo,
} from '../../api/business/meeting';
import { getAiModelDefault, getAiModelPage, AiModelVO } from '../../api/business/aimodel';
import { getHotWordPage, getPinyinSuggestion, saveHotWord } from '../../api/business/hotword';
import { getPromptPage, PromptTemplateVO } from '../../api/business/prompt';
import { listUsers } from '../../api';
import { useDict } from '../../hooks/useDict';
import { SysUser } from '../../types';
import PageHeader from '../../components/shared/PageHeader';
import PageContainer from "@/components/shared/PageContainer";

const { Title, Text } = Typography;
const { Option } = Select;

type AnalysisChapter = {
  time?: string;
  title: string;
  summary: string;
};

type AnalysisSpeakerSummary = {
  speaker: string;
  summary: string;
};

type AnalysisKeyPoint = {
  title: string;
  summary: string;
  speaker?: string;
  time?: string;
};

type MeetingAnalysis = {
  overview: string;
  keywords: string[];
  chapters: AnalysisChapter[];
  speakerSummaries: AnalysisSpeakerSummary[];
  keyPoints: AnalysisKeyPoint[];
  todos: string[];
};

type WorkspaceTab = 'catalog' | 'transcript';

type ChapterTranscriptLink = {
  key: string;
  title: string;
  timeLabel: string;
  transcriptIds: number[];
  firstTranscriptId: number | null;
  firstTranscriptStartTime: number | null;
};

const ANALYSIS_EMPTY: MeetingAnalysis = {
  overview: '',
  keywords: [],
  chapters: [],
  speakerSummaries: [],
  keyPoints: [],
  todos: [],
};

const ACCESS_PASSWORD_PATTERN = /^[A-Za-z0-9]{4}$/;
const ACCESS_PASSWORD_SOURCE = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';

const copyMeetingLink = async (text: string) => {
  if (navigator.clipboard?.writeText) {
    await navigator.clipboard.writeText(text);
    return;
  }

  const textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.setAttribute('readonly', 'true');
  textarea.style.position = 'fixed';
  textarea.style.opacity = '0';
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
};

const generateAccessPassword = () =>
  Array.from({ length: 4 }, () => ACCESS_PASSWORD_SOURCE[Math.floor(Math.random() * ACCESS_PASSWORD_SOURCE.length)]).join('');

const normalizeAccessPasswordInput = (value?: string | null) => (value || '').replace(/[^A-Za-z0-9]/g, '').slice(0, 4);

const sanitizeDownloadFileName = (value?: string | null, fallback = 'meeting-recording') => {
  const normalized = (value || '').replace(/[\\/:*?"<>|\r\n]/g, '_').trim();
  return normalized || fallback;
};

const resolveAudioExtension = (audioUrl?: string) => {
  const normalizedUrl = audioUrl?.split('#')[0]?.split('?')[0] || '';
  return normalizedUrl.match(/\.([a-z0-9]+)$/i)?.[1]?.toLowerCase() || 'mp3';
};

const getMeetingAudioDownloadName = (meeting?: Pick<MeetingVO, 'title' | 'audioUrl' | 'playbackAudioUrl'> | null) => {
  const audioUrl = resolveMeetingPlaybackAudioUrl(meeting);
  const extension = resolveAudioExtension(audioUrl);
  return `${sanitizeDownloadFileName(meeting?.title)}-录音.${extension}`;
};

const buildMeetingPreviewUrl = (meetingId?: number, accessPassword?: string) => {
  if (!meetingId || Number.isNaN(meetingId) || typeof window === 'undefined') {
    return '';
  }
  const url = new URL(`/meetings/${meetingId}/preview`, window.location.origin);
  const normalizedPassword = (accessPassword || '').trim();
  if (normalizedPassword) {
    url.searchParams.set('accessPassword', normalizedPassword);
  }
  return url.toString();
};


const splitLines = (value?: string | null) =>
  (value || '')
    .split(/\r?\n/)
    .map((line) => line.trim())
    .filter(Boolean);

const parseLooseJson = (raw?: string | null) => {
  const input = (raw || '').trim();
  if (!input) return null;

  const tryParse = (text: string) => {
    try {
      return JSON.parse(text);
    } catch {
      return null;
    }
  };

  const direct = tryParse(input);
  if (direct && typeof direct === 'object') return direct;

  const fenced = input.match(/```(?:json)?\s*([\s\S]*?)```/i)?.[1]?.trim();
  if (fenced) {
    const fencedParsed = tryParse(fenced);
    if (fencedParsed && typeof fencedParsed === 'object') return fencedParsed;
  }

  const start = input.indexOf('{');
  const end = input.lastIndexOf('}');
  if (start >= 0 && end > start) {
    const wrapped = tryParse(input.slice(start, end + 1));
    if (wrapped && typeof wrapped === 'object') return wrapped;
  }

  return null;
};

const extractSection = (markdown: string, aliases: string[]) => {
  const lines = markdown.split(/\r?\n/);
  const lowerAliases = aliases.map((item) => item.toLowerCase());
  const cleanHeading = (line: string) => line.replace(/^#{1,6}\s*/, '').trim().toLowerCase();

  let start = -1;
  for (let index = 0; index < lines.length; index += 1) {
    const line = lines[index].trim();
    if (!line.startsWith('#')) continue;
    const heading = cleanHeading(line);
    if (lowerAliases.some((alias) => heading.includes(alias))) {
      start = index + 1;
      break;
    }
  }

  if (start < 0) return '';

  const buffer: string[] = [];
  for (let index = start; index < lines.length; index += 1) {
    const line = lines[index];
    if (line.trim().startsWith('#')) break;
    buffer.push(line);
  }
  return buffer.join('\n').trim();
};

const parseBulletList = (content?: string | null) =>
  splitLines(content)
    .map((line) => line.replace(/^[-*•\s]+/, '').replace(/^\d+[.)]\s*/, '').trim())
    .filter(Boolean);

const parseOverviewSection = (markdown: string) =>
  extractSection(markdown, ['全文概要', '概要', '摘要', '概览']) || markdown.replace(/^---[\s\S]*?---/, '').trim();

const parseKeywordsSection = (markdown: string, tags: string) => {
  const section = extractSection(markdown, ['关键词', '关键字', '标签']);
  const fromSection = parseBulletList(section)
    .flatMap((line) => line.split(/[，、]/))
    .map((item) => item.trim())
    .filter(Boolean);

  if (fromSection.length) {
    return Array.from(new Set(fromSection)).slice(0, 12);
  }

  return Array.from(new Set((tags || '').split(',').map((item) => item.trim()).filter(Boolean))).slice(0, 12);
};

const buildMeetingAnalysis = (
  sourceAnalysis: MeetingVO['analysis'] | undefined,
  summaryContent: string | undefined,
  tags: string,
): MeetingAnalysis => {
  const parseStructured = (parsed: Record<string, any>): MeetingAnalysis => {
    const chapters = Array.isArray(parsed.chapters) ? parsed.chapters : [];
    const speakerSummaries = Array.isArray(parsed.speakerSummaries) ? parsed.speakerSummaries : [];
    const keyPoints = Array.isArray(parsed.keyPoints) ? parsed.keyPoints : [];
    const todos = Array.isArray(parsed.todos)
      ? parsed.todos
      : Array.isArray(parsed.actionItems)
      ? parsed.actionItems
      : [];

    return {
      overview: String(parsed.overview || '').trim(),
      keywords: Array.from(
        new Set((Array.isArray(parsed.keywords) ? parsed.keywords : []).map((item) => String(item).trim()).filter(Boolean)),
      ).slice(0, 12),
      chapters: chapters
        .map((item: any) => ({
          time: item?.time ? String(item.time).trim() : undefined,
          title: String(item?.title || '').trim(),
          summary: String(item?.summary || '').trim(),
        }))
        .filter((item: AnalysisChapter) => item.title || item.summary),
      speakerSummaries: speakerSummaries
        .map((item: any) => ({
          speaker: String(item?.speaker || '').trim(),
          summary: String(item?.summary || '').trim(),
        }))
        .filter((item: AnalysisSpeakerSummary) => item.speaker || item.summary),
      keyPoints: keyPoints
        .map((item: any) => ({
          title: String(item?.title || '').trim(),
          summary: String(item?.summary || '').trim(),
          speaker: item?.speaker ? String(item.speaker).trim() : undefined,
          time: item?.time ? String(item.time).trim() : undefined,
        }))
        .filter((item: AnalysisKeyPoint) => item.title || item.summary),
      todos: todos.map((item: any) => String(item).trim()).filter(Boolean).slice(0, 10),
    };
  };

  if (sourceAnalysis) {
    return parseStructured(sourceAnalysis as Record<string, any>);
  }

  const raw = (summaryContent || '').trim();
  if (!raw && !tags) return ANALYSIS_EMPTY;

  const loose = parseLooseJson(raw);
  if (loose) {
    return parseStructured(loose);
  }

  return {
    overview: parseOverviewSection(raw),
    keywords: parseKeywordsSection(raw, tags),
    chapters: [],
    speakerSummaries: [],
    keyPoints: [],
    todos: [],
  };
};

function formatTime(ms: number) {
  const seconds = Math.floor(ms / 1000);
  const minutes = Math.floor(seconds / 60);
  const remainSeconds = seconds % 60;
  return `${minutes.toString().padStart(2, '0')}:${remainSeconds.toString().padStart(2, '0')}`;
}

function formatPlayerTime(seconds: number) {
  const safeSeconds = Math.max(0, Math.floor(seconds || 0));
  const hours = Math.floor(safeSeconds / 3600);
  const minutes = Math.floor((safeSeconds % 3600) / 60);
  const remainSeconds = safeSeconds % 60;

  if (hours > 0) {
    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${remainSeconds.toString().padStart(2, '0')}`;
  }

  return `${minutes.toString().padStart(2, '0')}:${remainSeconds.toString().padStart(2, '0')}`;
}

function parseChapterTimeToMs(value?: string) {
  const raw = String(value || '').trim();
  if (!raw) return null;

  const matched = raw.match(/(\d{1,2}:\d{2}(?::\d{2})?)/)?.[1];
  if (!matched) return null;

  const parts = matched.split(':').map((item) => Number(item));
  if (parts.some((item) => Number.isNaN(item))) {
    return null;
  }

  const totalSeconds = parts.length === 3
    ? (parts[0] * 3600) + (parts[1] * 60) + parts[2]
    : (parts[0] * 60) + parts[1];

  return totalSeconds * 1000;
}

/**
 * 给 Markdown 文本中的关键词添加虚拟超链接
 */
const linkifySummary = (content: string, keywords: string[]) => {
  if (!content || !keywords.length) return content;

  // 按长度降序排列关键词，防止短词匹配长词的一部分
  const sortedKeywords = [...keywords].sort((a, b) => b.length - a.length);
  const keywordPattern = sortedKeywords.map(k => k.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|');
  
  // 这种正则替换需要非常小心，不要破坏已有的 Markdown 结构（链接、代码块等）
  // 这里的策略是：先按代码块/链接分割，只在纯文本部分进行替换
  const parts = content.split(/(```[\s\S]*?```|`[^`]*`|\[[^\]]*\]\([^)]*\))/g);
  
  return parts.map(part => {
    // 如果是代码块或已有链接，不处理
    if (part.startsWith('```') || part.startsWith('`') || part.startsWith('[')) {
      return part;
    }
    // 在普通文本中查找并替换关键词
    return part.replace(new RegExp(`(${keywordPattern})`, 'g'), '[$1](#/keyword/$1)');
  }).join('');
};

const MarkdownSummary: React.FC<{
  content: string;
  keywords: string[];
  onKeywordClick: (keyword: string) => void;
}> = ({ content, keywords, onKeywordClick }) => {
  const processedContent = useMemo(() => linkifySummary(content, keywords), [content, keywords]);

  return (
    <ReactMarkdown
      components={{
        a: ({ href, children, ...props }) => {
          // 检查是否是关键词链接（支持 URL 编码后的格式）
          const isKeywordLink = href?.startsWith('#/keyword/') || (href && decodeURIComponent(href).startsWith('#/keyword/'));
          
          if (isKeywordLink) {
            const decodedHref = decodeURIComponent(href!);
            const keyword = decodedHref.replace('#/keyword/', '');
            return (
              <span
                className="summary-keyword-link"
                role="link"
                onClick={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
                  onKeywordClick(keyword);
                }}
              >
                {children}
              </span>
            );
          }
          return <a href={href} target="_blank" rel="noopener noreferrer" {...props}>{children}</a>;
        }
      }}
    >
      {processedContent}
    </ReactMarkdown>
  );
};

const MeetingProgressDisplay: React.FC<{
  meetingId: number;
  onComplete: () => void;
  onProgressUpdate?: (meeting: MeetingVO) => void;
  compact?: boolean;
}> = ({ meetingId, onComplete, onProgressUpdate, compact }) => {
  const [progress, setProgress] = useState<MeetingProgress | null>(null);

  useEffect(() => {
    const fetchProgress = async () => {
      try {
        const [progressRes, detailRes] = await Promise.all([
          getMeetingProgress(meetingId),
          getMeetingDetail(meetingId),
        ]);

        if (detailRes.data?.data) {
          onProgressUpdate?.(detailRes.data.data);
        }

        if (progressRes.data?.data) {
          setProgress(progressRes.data.data);
          if (progressRes.data.data.percent === 100) {
            onComplete();
          }
        }
      } catch {
        // ignore
      }
    };

    fetchProgress();
    const timer = setInterval(fetchProgress, 3000);
    return () => clearInterval(timer);
  }, [meetingId, onComplete, onProgressUpdate]);

  const percent = progress?.percent || 0;
  const isError = percent < 0;

  const formatEta = (seconds?: number) => {
    if (!seconds || seconds <= 0) return '计算中';
    if (seconds < 60) return `${seconds} 秒`;
    const minutes = Math.floor(seconds / 60);
    const remainSeconds = seconds % 60;
    return remainSeconds > 0 ? `${minutes} 分 ${remainSeconds} 秒` : `${minutes} 分钟`;
  };

  if (compact) {
    return (
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          padding: '40px 20px',
          textAlign: 'center',
        }}
      >
        <Title level={4} style={{ marginBottom: 24 }}>
          AI 智能总结中
        </Title>
        <Progress
          type="circle"
          percent={isError ? 100 : percent}
          status={isError ? 'exception' : percent === 100 ? 'success' : 'active'}
          strokeColor={isError ? '#ff4d4f' : { '0%': '#6c73ff', '100%': '#8d63ff' }}
          size={140}
          strokeWidth={10}
        />
        <div style={{ marginTop: 24 }}>
          <Text strong style={{ fontSize: 16, color: isError ? '#ff4d4f' : '#5d67ff', display: 'block', marginBottom: 4 }}>
            {progress?.message || '正在分析内容...'}
          </Text>
          <Text type="secondary" style={{ fontSize: 13 }}>
            预计剩余：{isError ? '--' : formatEta(progress?.eta)}
          </Text>
        </div>
      </div>
    );
  }

  return (
    <div
      style={{
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        background: '#fff',
        borderRadius: 16,
        padding: 40,
      }}
    >
      <div style={{ width: '100%', maxWidth: 600, textAlign: 'center' }}>
        <Title level={3} style={{ marginBottom: 24 }}>
          AI 智能分析中
        </Title>
        <Progress
          type="circle"
          percent={isError ? 100 : percent}
          status={isError ? 'exception' : percent === 100 ? 'success' : 'active'}
          strokeColor={isError ? '#ff4d4f' : { '0%': '#6c73ff', '100%': '#8d63ff' }}
          size={180}
          strokeWidth={8}
        />
        <div style={{ marginTop: 32 }}>
          <Text strong style={{ fontSize: 18, color: isError ? '#ff4d4f' : '#5d67ff', display: 'block', marginBottom: 8 }}>
            {progress?.message || '正在准备计算资源...'}
          </Text>
          <Text type="secondary">分析进行中，请稍候，你可以先处理其他工作。</Text>
        </div>
        <Divider style={{ margin: '32px 0' }} />
        <Row gutter={24}>
          <Col span={8}>
            <Space direction="vertical" size={0}>
              <Text type="secondary">当前进度</Text>
              <Title level={4} style={{ margin: 0 }}>
                {isError ? 'ERROR' : `${percent}%`}
              </Title>
            </Space>
          </Col>
          <Col span={8}>
            <Space direction="vertical" size={0}>
              <Text type="secondary">预计剩余</Text>
              <Title level={4} style={{ margin: 0 }}>
                {isError ? '--' : formatEta(progress?.eta)}
              </Title>
            </Space>
          </Col>
          <Col span={8}>
            <Space direction="vertical" size={0}>
              <Text type="secondary">任务状态</Text>
              <Title level={4} style={{ margin: 0, color: isError ? '#ff4d4f' : '#52c41a' }}>
                {isError ? '已中断' : '正常'}
              </Title>
            </Space>
          </Col>
        </Row>
      </div>
    </div>
  );
};

const SpeakerEditor: React.FC<{
  meetingId: number;
  speakerId: string;
  initialName: string;
  initialLabel: string;
  onSuccess: () => void;
}> = ({ meetingId, speakerId, initialName, initialLabel, onSuccess }) => {
  const [name, setName] = useState(initialName || speakerId);
  const [label, setLabel] = useState(initialLabel);
  const [loading, setLoading] = useState(false);
  const { message } = App.useApp();
  const { items: speakerLabels } = useDict('biz_speaker_label');


  const handleSave = async (event: React.MouseEvent) => {
    event.stopPropagation();
    setLoading(true);
    try {
      await updateSpeakerInfo({ meetingId, speakerId, newName: name, label });
      message.success('发言人信息已更新');
      onSuccess();
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ width: 250, padding: '8px 4px' }} onClick={(event) => event.stopPropagation()}>
      <div style={{ marginBottom: 12 }}>
        <Text type="secondary">发言人姓名</Text>
        <Input value={name} onChange={(event) => setName(event.target.value)} placeholder="输入姓名" size="small" style={{ marginTop: 4 }} />
      </div>
      <div style={{ marginBottom: 16 }}>
        <Text type="secondary">角色标签</Text>
        <Select value={label} onChange={setLabel} placeholder="选择角色" style={{ width: '100%', marginTop: 4 }} size="small" allowClear>
          {speakerLabels.map((item) => (
            <Select.Option key={item.itemValue} value={item.itemValue}>
              {item.itemLabel}
            </Select.Option>
          ))}
        </Select>
      </div>
      <Button type="primary" size="small" block onClick={handleSave} loading={loading}>
        同步到全局
      </Button>
    </div>
  );
};

const renderContentWithHighlight = (content: string, keyword: string) => {
  if (!keyword || !content.toLowerCase().includes(keyword.toLowerCase())) {
    return content;
  }

  const parts = content.split(new RegExp(`(${keyword})`, 'gi'));
  return (
    <>
      {parts.map((part, i) => (
        part.toLowerCase() === keyword.toLowerCase() ? (
          <span key={i} className="highlight-text">{part}</span>
        ) : part
      ))}
    </>
  );
};

type ActiveTranscriptRowProps = {
  item: MeetingTranscriptVO;
  meetingId: number;
  isOwner: boolean;
  isEditing: boolean;
  isSaving: boolean;
  speakerLabelMap: Map<string, string>;
  onPlay: (timeMs: number) => void;
  onStartEdit: (item: MeetingTranscriptVO, event: React.MouseEvent) => void;
  onDraftBlur: (item: MeetingTranscriptVO, value: string) => void;
  onDraftKeyDown: (item: MeetingTranscriptVO, value: string, event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
  onSpeakerUpdated: () => void;
  registerRow: (id: number, node: HTMLDivElement | null) => void;
  isActive: boolean;
  isLinkedHighlight: boolean;
  audioPlaying: boolean;
  highlightKeyword?: string;
};

const ActiveTranscriptRow = React.memo<ActiveTranscriptRowProps>(({
  item,
  meetingId,
  isOwner,
  isEditing,
  isSaving,
  speakerLabelMap,
  onPlay,
  onStartEdit,
  onDraftBlur,
  onDraftKeyDown,
  onSpeakerUpdated,
  registerRow,
  isActive,
  isLinkedHighlight,
  audioPlaying,
  highlightKeyword = '',
}) => {
  const [draftValue, setDraftValue] = useState(item.content);
  const rowRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (isEditing) {
      setDraftValue(item.content);
    }
  }, [isEditing, item.content]);

  useEffect(() => {
    if ((isActive && audioPlaying) || (highlightKeyword && item.content.toLowerCase().includes(highlightKeyword.toLowerCase()))) {
      if (rowRef.current) {
        rowRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
      }
    }
  }, [isActive, audioPlaying, highlightKeyword, item.content]);

  const speakerTagLabel = item.speakerLabel ? (speakerLabelMap.get(item.speakerLabel) || item.speakerLabel) : '';

  return (
    <List.Item
      className={`transcript-row ${isActive ? 'active' : ''} ${isLinkedHighlight ? 'linked' : ''}`}
      onClick={() => onPlay(item.startTime)}
    >
      <div
        className="transcript-entry"
        ref={(node) => {
          rowRef.current = node;
          registerRow(item.id, node);
        }}
      >
        <Avatar icon={<UserOutlined />} className="transcript-avatar" />
        <div className="transcript-content-wrap">
          <div className="transcript-meta">
            {isOwner ? (
              <Popover
                content={(
                  <SpeakerEditor
                    meetingId={meetingId}
                    speakerId={item.speakerId}
                    initialName={item.speakerName}
                    initialLabel={item.speakerLabel}
                    onSuccess={onSpeakerUpdated}
                  />
                )}
                title="编辑发言人"
                trigger="click"
              >
                <span className="transcript-speaker editable" onClick={(event) => event.stopPropagation()}>
                  {item.speakerName || item.speakerId || '发言人'} <EditOutlined style={{ fontSize: 12 }} />
                </span>
              </Popover>
            ) : (
              <span className="transcript-speaker">{item.speakerName || item.speakerId || '发言人'}</span>
            )}
            <Text type="secondary">{formatTime(item.startTime)}</Text>
            {speakerTagLabel && <Tag color="blue">{speakerTagLabel}</Tag>}
          </div>
          {isEditing ? (
            <div
              className={`transcript-bubble transcript-bubble-editing ${isSaving ? 'is-saving' : ''}`}
              onClick={(event) => event.stopPropagation()}
            >
              <Input.TextArea
                autoFocus
                value={draftValue}
                style={{ width: '100%' }}
                onChange={(event) => setDraftValue(event.target.value)}
                onKeyDown={(event) => onDraftKeyDown(item, draftValue, event)}
                onBlur={(event) => {
                  event.stopPropagation();
                  onDraftBlur(item, draftValue);
                }}
                autoSize={{ minRows: 1, maxRows: 8 }}
                className="transcript-bubble-input"
                bordered={false}
              />
            </div>
          ) : (
            <div
              className={`transcript-bubble ${isOwner ? 'editable' : ''}`}
              onDoubleClick={isOwner ? (event) => onStartEdit(item, event) : undefined}
            >
              {renderContentWithHighlight(item.content, highlightKeyword)}
            </div>
          )}
        </div>
      </div>
    </List.Item>
  );
}, (prevProps, nextProps) => (
  prevProps.item === nextProps.item
  && prevProps.meetingId === nextProps.meetingId
  && prevProps.isOwner === nextProps.isOwner
  && prevProps.isEditing === nextProps.isEditing
  && prevProps.isSaving === nextProps.isSaving
  && prevProps.speakerLabelMap === nextProps.speakerLabelMap
  && prevProps.onPlay === nextProps.onPlay
  && prevProps.onStartEdit === nextProps.onStartEdit
  && prevProps.onDraftBlur === nextProps.onDraftBlur
  && prevProps.onDraftKeyDown === nextProps.onDraftKeyDown
  && prevProps.onSpeakerUpdated === nextProps.onSpeakerUpdated
  && prevProps.registerRow === nextProps.registerRow
  && prevProps.isActive === nextProps.isActive
  && prevProps.isLinkedHighlight === nextProps.isLinkedHighlight
  && prevProps.audioPlaying === nextProps.audioPlaying
  && prevProps.highlightKeyword === nextProps.highlightKeyword
));


const MeetingDetail: React.FC = () => {
  const { message } = App.useApp();
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [form] = Form.useForm();
  const [summaryForm] = Form.useForm();

  const [meeting, setMeeting] = useState<MeetingVO | null>(null);
  const [transcripts, setTranscripts] = useState<MeetingTranscriptVO[]>([]);
  const [meetingChapters, setMeetingChapters] = useState<MeetingChapterVO[]>([]);
  const [loading, setLoading] = useState(true);
  const [editVisible, setEditVisible] = useState(false);
  const [summaryVisible, setSummaryVisible] = useState(false);
  const [summaryRecordVisible, setSummaryRecordVisible] = useState(false);
  const [actionLoading, setActionLoading] = useState(false);
  const [downloadLoading, setDownloadLoading] = useState<'pdf' | 'word' | 'transcript' | null>(null);
  const [isEditingSummary, setIsEditingSummary] = useState(false);
  const [summaryDraft, setSummaryDraft] = useState('');
  const [expandKeywords, setExpandKeywords] = useState(false);
  const [expandSummary, setExpandSummary] = useState(false);
  const [selectedKeywords, setSelectedKeywords] = useState<string[]>([]);
  const [workspaceTab, setWorkspaceTab] = useState<WorkspaceTab>('catalog');
  const [addingHotwords, setAddingHotwords] = useState(false);
  const [editingTranscriptId, setEditingTranscriptId] = useState<number | null>(null);
  const [savingTranscriptId, setSavingTranscriptId] = useState<number | null>(null);
  const [llmModels, setLlmModels] = useState<AiModelVO[]>([]);
  const [prompts, setPrompts] = useState<PromptTemplateVO[]>([]);
  const [, setUserList] = useState<SysUser[]>([]);
  const { items: speakerLabels } = useDict('biz_speaker_label');
  const [sharePopoverOpen, setSharePopoverOpen] = useState(false);
  const [shareSaving, setShareSaving] = useState(false);
  const [sharePasswordEnabled, setSharePasswordEnabled] = useState(false);
  const [sharePasswordDraft, setSharePasswordDraft] = useState('');
  const [highlightKeyword, setHighlightKeyword] = useState('');
  const [linkedTranscriptIds, setLinkedTranscriptIds] = useState<number[]>([]);
  const [linkedChapterKey, setLinkedChapterKey] = useState<string | null>(null);

  const audioRef = useRef<HTMLAudioElement>(null);
  const [audioCurrentTime, setAudioCurrentTime] = useState(0);
  const [audioDuration, setAudioDuration] = useState(0);
  const [audioPlaying, setAudioPlaying] = useState(false);
  const [audioPlaybackRate, setAudioPlaybackRate] = useState(1);

  const emptyTranscriptNoticeShownRef = useRef<number | null>(null);
  const audioPlaybackErrorShownRef = useRef<string | null>(null);

  const summaryPdfRef = useRef<HTMLDivElement>(null);
  const transcriptItemRefs = useRef<Record<number, HTMLDivElement | null>>({});
  const pendingTranscriptScrollIdRef = useRef<number | null>(null);
  const leftColumnRef = useRef<HTMLDivElement>(null);
  const transcriptSectionRef = useRef<HTMLDivElement>(null);
  const [showFloatingTranscriptPlayer, setShowFloatingTranscriptPlayer] = useState(false);
  const [floatingTranscriptPlayerLayout, setFloatingTranscriptPlayerLayout] = useState<{ left: number; width: number } | null>(null);

  const fetchData = useCallback(async (meetingId: number) => {
    try {
      const [detailRes, transcriptRes, chapterRes] = await Promise.all([
        getMeetingDetail(meetingId),
        getTranscripts(meetingId),
        getMeetingChapters(meetingId),
      ]);
      setMeeting(detailRes.data.data);
      setTranscripts(transcriptRes.data.data || []);
      setMeetingChapters(chapterRes.data.data || []);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  }, []);

  const analysis = useMemo(
    () => buildMeetingAnalysis(meeting?.analysis, meeting?.summaryContent, meeting?.tags || ''),
    [meeting?.analysis, meeting?.summaryContent, meeting?.tags],
  );
  const hasAnalysis = !!(
    analysis.overview ||
    analysis.keywords.length ||
    analysis.chapters.length ||
    analysis.speakerSummaries.length ||
    analysis.keyPoints.length ||
    analysis.todos.length
  );
  const visibleKeywords = expandKeywords ? analysis.keywords : analysis.keywords.slice(0, 9);
  const meetingTags = useMemo(
    () => (meeting?.tags?.split(',').map((item) => item.trim()).filter(Boolean) || []),
    [meeting?.tags],
  );
  const discussionItems = useMemo(() => {
    if (analysis.keyPoints.length) {
      return analysis.keyPoints;
    }
    return analysis.chapters.map((item) => ({
      title: item.title,
      summary: item.summary,
      time: item.time,
    }));
  }, [analysis.chapters, analysis.keyPoints]);
  const speakerLabelMap = useMemo(
    () => new Map(speakerLabels.map((item) => [item.itemValue, item.itemLabel])),
    [speakerLabels],
  );
  const previewAccessPassword = useMemo(() => (meeting?.accessPassword || '').trim(), [meeting?.accessPassword]);
  const playbackAudioUrl = useMemo(() => resolveMeetingPlaybackAudioUrl(meeting), [meeting]);
  const audioDownloadFileName = useMemo(() => getMeetingAudioDownloadName(meeting), [meeting]);
  const audioDownloadFormatLabel = useMemo(
    () => resolveAudioExtension(playbackAudioUrl).toUpperCase(),
    [playbackAudioUrl],
  );
  const keywordItems = useMemo(
    () => (analysis.keywords.length ? visibleKeywords : meetingTags),
    [analysis.keywords.length, meetingTags, visibleKeywords],
  );
  const catalogChapterLinks = useMemo<ChapterTranscriptLink[]>(() => {
    const transcriptIdToIndex = new Map(transcripts.map((item, index) => [item.id, index]));
    const sourceChapters = meetingChapters.length
      ? meetingChapters
      : analysis.chapters.map((item) => ({
          title: item.title,
          time: item.time,
        }));

    return sourceChapters.map((chapter, index) => {
      let matchedTranscripts: MeetingTranscriptVO[] = [];
      const sourceTranscriptIds = Array.isArray(chapter.sourceTranscriptIds)
        ? chapter.sourceTranscriptIds
            .map((item) => Number(item))
            .filter((item) => Number.isFinite(item) && transcriptIdToIndex.has(item))
        : [];

      if (sourceTranscriptIds.length) {
        matchedTranscripts = sourceTranscriptIds
          .map((item) => transcripts[transcriptIdToIndex.get(item)!])
          .filter(Boolean);
      } else if (chapter.startTranscriptId && chapter.endTranscriptId) {
        const startIndex = transcriptIdToIndex.get(Number(chapter.startTranscriptId));
        const endIndex = transcriptIdToIndex.get(Number(chapter.endTranscriptId));
        if (startIndex !== undefined && endIndex !== undefined) {
          matchedTranscripts = transcripts.slice(Math.min(startIndex, endIndex), Math.max(startIndex, endIndex) + 1);
        }
      } else {
        const startMs = typeof chapter.startTime === 'number' ? chapter.startTime : parseChapterTimeToMs(chapter.time);
        const nextChapterStartMs = sourceChapters
          .slice(index + 1)
          .map((item) => (typeof item.startTime === 'number' ? item.startTime : parseChapterTimeToMs(item.time)))
          .find((item): item is number => item !== null && startMs !== null && item > startMs);

        if (startMs !== null) {
          const firstTranscriptIndex = transcripts.findIndex((item) => item.endTime > startMs);
          if (firstTranscriptIndex >= 0) {
            const lastTranscriptIndex = nextChapterStartMs === undefined
              ? transcripts.length
              : transcripts.findIndex((item) => item.startTime >= nextChapterStartMs);
            matchedTranscripts = transcripts.slice(
              firstTranscriptIndex,
              lastTranscriptIndex >= 0 ? lastTranscriptIndex : transcripts.length,
            );
          }
        }
      }

      return {
        key: `${chapter.chapterNo ?? index}-${chapter.title || 'chapter'}`,
        title: chapter.title || `章节 ${index + 1}`,
        timeLabel: chapter.time || '--:--',
        transcriptIds: matchedTranscripts.map((item) => item.id),
        firstTranscriptId: matchedTranscripts[0]?.id ?? null,
        firstTranscriptStartTime: matchedTranscripts[0]?.startTime ?? null,
      };
    });
  }, [analysis.chapters, meetingChapters, transcripts]);
  const sharePreviewUrl = useMemo(() => {
    const meetingId = meeting?.id ?? (id ? Number(id) : NaN);
    return buildMeetingPreviewUrl(meetingId);
  }, [meeting?.id, id]);
  const meetingPreviewUrl = useMemo(() => {
    const meetingId = meeting?.id ?? (id ? Number(id) : NaN);
    return buildMeetingPreviewUrl(meetingId, previewAccessPassword);
  }, [meeting?.id, id, previewAccessPassword]);

  const isOwner = useMemo(() => {
    if (!meeting) return false;
    const profileStr = sessionStorage.getItem('userProfile');
    if (profileStr) {
      const profile = JSON.parse(profileStr);
      return profile.isPlatformAdmin === true || profile.isTenantAdmin === true || profile.userId === meeting.creatorId;
    }
    return false;
  }, [meeting]);

  const canRetrySummary = isOwner && transcripts.length > 0 && meeting?.status !== 1 && meeting?.status !== 2;
  const canRetryTranscription = isOwner && meeting?.status === 4 && transcripts.length === 0 && !!meeting?.audioUrl;
  const emptyTranscriptFailureNotice = useMemo(() => {
    if (!meeting || meeting.status !== 4 || transcripts.length > 0) {
      return null;
    }

    return {
      title: '识别已结束，但没有生成可用转录',
      description: canRetryTranscription
        ? 'ASR 调用已返回，但当前没有写入任何转录文本，所以列表状态仍显示失败。你可以直接重新识别，或先检查录音是否静音、时长过短、音量过低。'
        : 'ASR 调用已返回，但当前没有写入任何转录文本，所以列表状态仍显示失败。建议先检查录音是否静音、时长过短、音量过低或音质异常。',
      hint: canRetryTranscription ? '可以直接点击“重新识别”继续处理。' : '当前没有可重试的音频入口，请先确认原始录音文件是否有效。',
    };
  }, [canRetryTranscription, meeting, transcripts.length]);

  useEffect(() => {
    if (!playbackAudioUrl) {
      setShowFloatingTranscriptPlayer(false);
      setFloatingTranscriptPlayerLayout(null);
      return undefined;
    }

    const updateFloatingPlayerState = () => {
      const target = transcriptSectionRef.current;
      if (!target) {
        setShowFloatingTranscriptPlayer(false);
        setFloatingTranscriptPlayerLayout(null);
        return;
      }

      const rect = target.getBoundingClientRect();
      const rootRect = leftColumnRef.current?.getBoundingClientRect();

      setFloatingTranscriptPlayerLayout({
        left: rect.left,
        width: rect.width,
      });

      if (rootRect) {
        const isVisible = rect.bottom > rootRect.top + 80 && rect.top < rootRect.bottom - 40;
        setShowFloatingTranscriptPlayer(isVisible);
        return;
      }

      const isVisible = rect.bottom > 120 && rect.top < window.innerHeight - 80;
      setShowFloatingTranscriptPlayer(isVisible);
    };

    updateFloatingPlayerState();

    const target = transcriptSectionRef.current;
    const root = leftColumnRef.current;
    const resizeObserver = target ? new ResizeObserver(() => updateFloatingPlayerState()) : null;
    if (target && resizeObserver) {
      resizeObserver.observe(target);
    }

    window.addEventListener('resize', updateFloatingPlayerState);
    window.addEventListener('scroll', updateFloatingPlayerState, { passive: true });
    root?.addEventListener('scroll', updateFloatingPlayerState, { passive: true });

    return () => {
      window.removeEventListener('resize', updateFloatingPlayerState);
      window.removeEventListener('scroll', updateFloatingPlayerState);
      root?.removeEventListener('scroll', updateFloatingPlayerState);
      resizeObserver?.disconnect();
    };
  }, [meeting?.status, playbackAudioUrl]);

  useEffect(() => {
    if (!id) return;
    fetchData(Number(id));
    loadAiConfigs();
    loadUsers();
  }, [id, fetchData]);

  useEffect(() => {
    setSelectedKeywords((current) => current.filter((item) => analysis.keywords.includes(item)));
  }, [analysis.keywords]);

  useEffect(() => {
    if (workspaceTab !== 'transcript') {
      return;
    }

    const pendingId = pendingTranscriptScrollIdRef.current;
    if (!pendingId) {
      return;
    }

    const frameId = window.requestAnimationFrame(() => {
      const target = transcriptItemRefs.current[pendingId];
      if (target) {
        target.scrollIntoView({ behavior: 'smooth', block: 'center' });
        pendingTranscriptScrollIdRef.current = null;
      }
    });

    return () => window.cancelAnimationFrame(frameId);
  }, [workspaceTab, transcripts, linkedTranscriptIds]);

  useEffect(() => {
    if (meeting?.audioSaveStatus === 'FAILED') {
      message.warning(meeting.audioSaveMessage || '实时会议已完成，但音频保存失败，当前无法播放会议录音。转写和总结不受影响。');
    }
  }, [meeting?.id, meeting?.audioSaveStatus, meeting?.audioSaveMessage]);

  useEffect(() => {
    if (!meeting?.id || !emptyTranscriptFailureNotice) {
      return;
    }
    if (emptyTranscriptNoticeShownRef.current === meeting.id) {
      return;
    }

    message.warning({
      content: emptyTranscriptFailureNotice.title,
      duration: 4,
    });
    emptyTranscriptNoticeShownRef.current = meeting.id;
  }, [emptyTranscriptFailureNotice, meeting?.id, message]);

  useEffect(() => {
    if (!sharePopoverOpen) {
      return;
    }
    const normalizedPassword = normalizeAccessPasswordInput(meeting?.accessPassword);
    setSharePasswordEnabled(!!normalizedPassword);
    setSharePasswordDraft(normalizedPassword);
  }, [sharePopoverOpen, meeting?.accessPassword]);

  const loadAiConfigs = async () => {
    try {
      const [modelRes, promptRes, defaultRes] = await Promise.all([
        getAiModelPage({ current: 1, size: 100, type: 'LLM' }),
        getPromptPage({ current: 1, size: 100 }),
        getAiModelDefault('LLM'),
      ]);
      setLlmModels(modelRes.data.data.records.filter((item) => item.status === 1));
      setPrompts(promptRes.data.data.records.filter((item) => item.status === 1));
      summaryForm.setFieldsValue({ summaryModelId: defaultRes.data.data?.id });
    } catch {
      // ignore
    }
  };

  const loadUsers = async () => {
    try {
      const users = await listUsers();
      setUserList(users || []);
    } catch {
      // ignore
    }
  };

  const handleEditMeeting = () => {
    if (!meeting || !isOwner) return;
    form.setFieldsValue({
      ...meeting,
      tags: meeting.tags?.split(',').filter(Boolean),
    });
    setEditVisible(true);
  };

  const handleUpdateBasic = async () => {
    const values = await form.validateFields();
    setActionLoading(true);
    try {
      await updateMeetingBasic({
        ...values,
        meetingId: meeting?.id,
        tags: values.tags?.join(','),
      });
      message.success('会议信息已更新');
      setEditVisible(false);
      fetchData(Number(id));
    } catch (error) {
      console.error(error);
    } finally {
      setActionLoading(false);
    }
  };

  const handleSaveSummary = async () => {
    setActionLoading(true);
    try {
      await updateMeetingSummary({
        meetingId: Number(id),
        summaryContent: summaryDraft,
      });
      message.success('总结内容已更新');
      setIsEditingSummary(false);
      fetchData(Number(id));
    } catch (error) {
      console.error(error);
    } finally {
      setActionLoading(false);
    }
  };

  const handleReSummary = async () => {
    const values = await summaryForm.validateFields();
    setActionLoading(true);
    try {
      await reSummary({
        meetingId: Number(id),
        summaryModelId: values.summaryModelId,
        promptId: values.promptId,
        userPrompt: values.userPrompt,
      });
      message.success('已重新发起总结任务');
      setSummaryVisible(false);
      fetchData(Number(id));
    } catch (error) {
      console.error(error);
    } finally {
      setActionLoading(false);
    }
  };

  const handleOpenSummaryDrawer = () => {
    summaryForm.setFieldsValue({
      summaryModelId:
        summaryForm.getFieldValue('summaryModelId') ??
        llmModels.find((model) => model.isDefault === 1)?.id ??
        llmModels[0]?.id,
      promptId: summaryForm.getFieldValue('promptId') ?? prompts[0]?.id,
      userPrompt: meeting?.lastUserPrompt ?? '',
    });
    setSummaryVisible(true);
  };

  const seekTo = useCallback((timeMs: number) => {
    if (!audioRef.current) return;
    audioRef.current.currentTime = timeMs / 1000;
    audioRef.current.play();
  }, []);

  const handleKeywordClick = useCallback((keyword: string) => {
    const firstMatch = transcripts.find((item) =>
      item.content.toLowerCase().includes(keyword.toLowerCase())
    );

    if (firstMatch) {
      setWorkspaceTab('transcript');
      setLinkedTranscriptIds([]);
      setLinkedChapterKey(null);
      setHighlightKeyword(keyword);
      seekTo(firstMatch.startTime);
      message.info(`已跳转至关键词 "${keyword}" 所在位置`);
    } else {
      message.warning(`在转录原文中未找到关键词 "${keyword}"`);
    }
  }, [transcripts, seekTo, message]);

  const handleTranscriptRowPlay = useCallback((timeMs: number) => {
    setLinkedTranscriptIds([]);
    setLinkedChapterKey(null);
    seekTo(timeMs);
  }, [seekTo]);

  const handleLocateChapterTranscript = useCallback((chapterIndex: number) => {
    const targetLink = catalogChapterLinks[chapterIndex];
    if (!targetLink || !targetLink.transcriptIds.length || targetLink.firstTranscriptId === null || targetLink.firstTranscriptStartTime === null) {
      message.warning('当前章节暂未匹配到可关联的转录原文');
      return;
    }

    setWorkspaceTab('transcript');
    setHighlightKeyword('');
    setLinkedTranscriptIds(targetLink.transcriptIds);
    setLinkedChapterKey(targetLink.key);
    pendingTranscriptScrollIdRef.current = targetLink.firstTranscriptId;
    seekTo(targetLink.firstTranscriptStartTime);
  }, [catalogChapterLinks, message, seekTo]);

  const handleRetryTranscription = async () => {
    setActionLoading(true);
    try {
      await retryMeetingTranscription(Number(id));
      message.success('已重新提交识别任务');
      await fetchData(Number(id));
    } catch (error) {
      console.error(error);
    } finally {
      setActionLoading(false);
    }
  };

  const handleKeywordToggle = (keyword: string, checked: boolean) => {
    setSelectedKeywords((current) => {
      if (checked) {
        return current.includes(keyword) ? current : [...current, keyword];
      }
      return current.filter((item) => item !== keyword);
    });
  };

  const handleAddSelectedHotwords = async () => {
    const keywords = selectedKeywords.map((item) => item.trim()).filter(Boolean);
    if (!keywords.length) {
      message.warning('请先选择关键词');
      return;
    }

    setAddingHotwords(true);
    try {
      const existingRes = await getHotWordPage({ current: 1, size: 500, word: '' });
      const existingWords = new Set(
        (existingRes.data?.data?.records || [])
          .map((item) => item.word?.trim())
          .filter(Boolean),
      );
      const toCreate = keywords.filter((item) => !existingWords.has(item));

      if (!toCreate.length) {
        message.info('所选关键词已存在于热词库');
        return;
      }

      await Promise.all(
        toCreate.map((word) =>
          (async () => {
            let pinyinList: string[] = [];
            try {
              const pinyinRes = await getPinyinSuggestion(word);
              pinyinList = (pinyinRes.data?.data || []).map((item) => item.trim()).filter(Boolean);
            } catch {
              pinyinList = [];
            }
            return saveHotWord({
              word,
              pinyinList,
              matchStrategy: 1,
              category: '',
              weight: 2,
              status: 1,
            remark: meeting ? `来源于会议：${meeting.title}` : '来源于会议关键词',
            });
          })(),
        ),
      );

      const skippedCount = keywords.length - toCreate.length;
      message.success(
        skippedCount > 0
          ? `已新增 ${toCreate.length} 个热词，跳过 ${skippedCount} 个重复项`
          : `已新增 ${toCreate.length} 个热词`,
      );
      setSelectedKeywords([]);
    } catch (error) {
      console.error(error);
    } finally {
      setAddingHotwords(false);
    }
  };

  const handleStartEditTranscript = useCallback((item: MeetingTranscriptVO, event: React.MouseEvent) => {
    event.stopPropagation();
    setEditingTranscriptId(item.id);
  }, []);

  const handleCancelEditTranscript = useCallback((event?: React.SyntheticEvent) => {
    event?.stopPropagation();
    setEditingTranscriptId(null);
  }, []);

  const handleSaveTranscript = useCallback(async (item: MeetingTranscriptVO, nextContent?: string) => {
    const content = (nextContent ?? item.content ?? '').trim();
    if (!content) {
      message.warning('转录内容不能为空');
      return;
    }

    if (!meeting) return;
    if (content === (item.content || '').trim()) {
      handleCancelEditTranscript();
      return;
    }

    setSavingTranscriptId(item.id);
    try {
      await updateMeetingTranscript({
        meetingId: meeting.id,
        transcriptId: item.id,
        content,
      });
      message.success('原文已更新，如需同步摘要请重新总结');
      handleCancelEditTranscript();
      await fetchData(meeting.id);
    } catch (error) {
      console.error(error);
    } finally {
      setSavingTranscriptId(null);
    }
  }, [fetchData, handleCancelEditTranscript, meeting]);

  const handleTranscriptDraftKeyDown = useCallback((item: MeetingTranscriptVO, value: string, event: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (event.key === 'Escape') {
      handleCancelEditTranscript();
      return;
    }
    if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
      event.preventDefault();
      void handleSaveTranscript(item, value);
    }
  }, [handleCancelEditTranscript, handleSaveTranscript]);

  const handleTranscriptDraftBlur = useCallback((item: MeetingTranscriptVO, value: string) => {
    void handleSaveTranscript(item, value);
  }, [handleSaveTranscript]);

  const handleTranscriptSpeakerUpdated = useCallback(() => {
    if (!meeting) return;
    void fetchData(meeting.id);
  }, [fetchData, meeting]);

  const registerTranscriptRow = useCallback((transcriptId: number, node: HTMLDivElement | null) => {
    transcriptItemRefs.current[transcriptId] = node;
  }, []);

  const handleAudioPlaybackError = useCallback(() => {
    const currentAudioUrl = playbackAudioUrl || '';
    if (!currentAudioUrl || audioPlaybackErrorShownRef.current === currentAudioUrl) {
      return;
    }
    const normalizedUrl = currentAudioUrl.split('#')[0]?.split('?')[0]?.toLowerCase() || '';
    const isM4a = normalizedUrl.endsWith('.m4a');
    message.warning(
      isM4a
        ? '当前 m4a 文件在本机浏览器中无法直接播放。已确认文件与服务端响应基本正常，更可能是浏览器对该录音参数或容器实现的兼容性问题。建议优先使用 mp3、wav，或下载到本地播放。'
        : '当前音频文件无法播放，请检查文件是否损坏或格式是否兼容。',
    );
    audioPlaybackErrorShownRef.current = currentAudioUrl;
    setAudioPlaying(false);
  }, [message, playbackAudioUrl]);

  useEffect(() => {
    const audio = audioRef.current;
    if (!audio) return undefined;

    const handleLoadedMetadata = () => {
      setAudioDuration(Number.isFinite(audio.duration) ? audio.duration : 0);
      setAudioCurrentTime(audio.currentTime || 0);
      audio.playbackRate = audioPlaybackRate;
    };
    const handleTimeUpdate = () => {
      setAudioCurrentTime(audio.currentTime || 0);
    };
    const handlePlay = () => setAudioPlaying(true);
    const handlePause = () => setAudioPlaying(false);
    const handleEnded = () => setAudioPlaying(false);
    const handleError = () => handleAudioPlaybackError();

    audio.addEventListener('loadedmetadata', handleLoadedMetadata);
    audio.addEventListener('durationchange', handleLoadedMetadata);
    audio.addEventListener('canplay', handleLoadedMetadata);
    audio.addEventListener('timeupdate', handleTimeUpdate);
    audio.addEventListener('play', handlePlay);
    audio.addEventListener('pause', handlePause);
    audio.addEventListener('ended', handleEnded);
    audio.addEventListener('error', handleError);

    handleLoadedMetadata();

    return () => {
      audio.removeEventListener('loadedmetadata', handleLoadedMetadata);
      audio.removeEventListener('durationchange', handleLoadedMetadata);
      audio.removeEventListener('canplay', handleLoadedMetadata);
      audio.removeEventListener('timeupdate', handleTimeUpdate);
      audio.removeEventListener('play', handlePlay);
      audio.removeEventListener('pause', handlePause);
      audio.removeEventListener('ended', handleEnded);
      audio.removeEventListener('error', handleError);
    };
  }, [audioPlaybackRate, meeting?.status, playbackAudioUrl, handleAudioPlaybackError]);

  const toggleAudioPlayback = () => {
    if (!audioRef.current) return;
    if (audioRef.current.paused) {
      audioRef.current.play();
    } else {
      audioRef.current.pause();
    }
  };

  const handleAudioProgressChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const nextTime = Number(event.target.value || 0);
    setAudioCurrentTime(nextTime);
    if (audioRef.current) {
      audioRef.current.currentTime = nextTime;
    }
  };

  const cyclePlaybackRate = () => {
    if (!audioRef.current) return;
    const rates = [1, 1.25, 1.5, 2];
    const currentIndex = rates.findIndex((item) => item === audioPlaybackRate);
    const nextRate = rates[(currentIndex + 1) % rates.length];
    audioRef.current.playbackRate = nextRate;
    setAudioPlaybackRate(nextRate);
  };

  const getFileNameFromDisposition = (disposition?: string, fallback?: string) => {
    if (!disposition) return fallback || 'summary';
    const utf8Match = disposition.match(/filename\*=UTF-8''([^;]+)/i);
    if (utf8Match?.[1]) return decodeURIComponent(utf8Match[1]);
    const normalMatch = disposition.match(/filename="?([^";]+)"?/i);
    return normalMatch?.[1] || fallback || 'summary';
  };

  const handleDownloadSummary = async (format: 'pdf' | 'word') => {
    if (!meeting) return;
    if (!meeting.summaryContent) {
      message.warning('当前暂无可下载的 AI 总结');
      return;
    }

    try {
      setDownloadLoading(format);
      const res = await downloadMeetingSummary(meeting.id, format);
      const contentType =
        res.headers['content-type'] ||
        (format === 'pdf'
          ? 'application/pdf'
          : 'application/vnd.openxmlformats-officedocument.wordprocessingml.document');

      if (contentType.includes('application/json')) {
        const text = await (res.data as Blob).text();
        try {
          const json = JSON.parse(text);
          message.error(json?.msg || '下载失败');
        } catch {
          message.error('下载失败');
        }
        return;
      }

      const blob = new Blob([res.data], { type: contentType });
      const url = window.URL.createObjectURL(blob);
      const anchor = document.createElement('a');
      anchor.href = url;
      anchor.download = getFileNameFromDisposition(
        res.headers['content-disposition'],
        `${(meeting.title || 'meeting').replace(/[\\/:*?"<>|\r\n]/g, '_')}-AI纪要.${format === 'pdf' ? 'pdf' : 'docx'}`,
      );
      document.body.appendChild(anchor);
      anchor.click();
      anchor.remove();
      window.URL.revokeObjectURL(url);
    } catch (error) {
      console.error(error);
      message.error(`${format.toUpperCase()} 下载失败`);
    } finally {
      setDownloadLoading(null);
    }
  };

  const handleDownloadTranscript = async () => {
    if (!meeting) return;
    if (transcripts.length === 0) {
      message.warning('当前暂无可下载的会议转录');
      return;
    }

    try {
      setDownloadLoading('transcript');
      const res = await downloadMeetingTranscript(meeting.id);
      const contentType = res.headers['content-type'] || 'text/markdown; charset=UTF-8';

      if (contentType.includes('application/json')) {
        const text = await (res.data as Blob).text();
        try {
          const json = JSON.parse(text);
          message.error(json?.msg || '下载失败');
        } catch {
          message.error('下载失败');
        }
        return;
      }

      const blob = new Blob([res.data], { type: contentType });
      const url = window.URL.createObjectURL(blob);
      const anchor = document.createElement('a');
      anchor.href = url;
      anchor.download = getFileNameFromDisposition(
        res.headers['content-disposition'],
        `${sanitizeDownloadFileName(meeting.title, 'meeting-transcript')}-Transcript.md`,
      );
      document.body.appendChild(anchor);
      anchor.click();
      anchor.remove();
      window.URL.revokeObjectURL(url);
    } catch (error) {
      console.error(error);
      message.error('转录下载失败');
    } finally {
      setDownloadLoading(null);
    }
  };

  const handleDownloadAudio = () => {
    if (!playbackAudioUrl) {
      message.warning('当前暂无可下载的会议录音');
      return;
    }

    const anchor = document.createElement('a');
    anchor.href = playbackAudioUrl;
    anchor.download = audioDownloadFileName;
    anchor.target = '_blank';
    anchor.rel = 'noopener noreferrer';
    document.body.appendChild(anchor);
    anchor.click();
    anchor.remove();
  };

  const handleCopyPreviewLink = async () => {
    if (!sharePreviewUrl) {
      message.error('预览链接暂不可用');
      return;
    }
    try {
      await copyMeetingLink(sharePreviewUrl);
      message.success('预览链接已复制');
    } catch (error) {
      console.error(error);
      message.error('复制预览链接失败');
    }
  };

  const handleOpenPreview = () => {
    if (!sharePreviewUrl) {
      message.error('预览链接暂不可用');
      return;
    }
    window.open(sharePreviewUrl, '_blank', 'noopener,noreferrer');
  };

  const handleSharePopoverOpenChange = (open: boolean) => {
    setSharePopoverOpen(open);
  };

  const handleSharePasswordToggle = (checked: boolean) => {
    setSharePasswordEnabled(checked);
    setSharePasswordDraft((current) => {
      const normalizedCurrent = normalizeAccessPasswordInput(current);
      if (checked) {
        return normalizedCurrent || generateAccessPassword();
      }
      return '';
    });
  };

  const handleRegenerateSharePassword = () => {
    setSharePasswordEnabled(true);
    setSharePasswordDraft(generateAccessPassword());
  };

  const handleSaveShareAccess = async () => {
    if (!meeting) {
      return;
    }
      const normalizedPassword = normalizeAccessPasswordInput(sharePasswordDraft);
      if (sharePasswordEnabled && !ACCESS_PASSWORD_PATTERN.test(normalizedPassword)) {
        message.error('\u8bbf\u95ee\u5bc6\u7801\u9700\u4e3a 4 \u4f4d\u82f1\u6587\u6216\u6570\u5b57');
        return;
      }

    setShareSaving(true);
    try {
      await updateMeetingBasic({
        meetingId: meeting.id,
        accessPassword: sharePasswordEnabled ? normalizedPassword : '',
      });
      const nextPassword = sharePasswordEnabled ? normalizedPassword : '';
      setMeeting((current) => (current ? { ...current, accessPassword: nextPassword } : current));
      message.success(
        sharePasswordEnabled
          ? '\u9884\u89c8\u5bc6\u7801\u5df2\u66f4\u65b0'
          : '\u9884\u89c8\u5bc6\u7801\u5df2\u5173\u95ed',
      );
      setSharePopoverOpen(false);
    } catch (error) {
      console.error(error);
      message.error('\u4fdd\u5b58\u9884\u89c8\u5bc6\u7801\u5931\u8d25');
    } finally {
      setShareSaving(false);
    }
  };

  const shareQrContent = sharePreviewUrl ? (
    <div className="meeting-share-card">

      {isOwner ? (
        <div className="meeting-share-settings">
          <div className="meeting-share-settings-row">
            <div className="meeting-share-settings-copy">
              <strong>{'\u9884\u89c8\u5bc6\u7801'}</strong>
              <span>
                {sharePasswordEnabled && previewAccessPassword
                  ? `访问密码${previewAccessPassword}`
                  : '关闭后将不需要访问密码'}
              </span>
            </div>
            <Switch
              checked={sharePasswordEnabled}
              checkedChildren={'\u5f00\u542f'}
              unCheckedChildren={'\u5173\u95ed'}
              onChange={handleSharePasswordToggle}
            />
          </div>
          {sharePasswordEnabled ? (
            <div className="meeting-share-settings-actions">
              <Input
                value={sharePasswordDraft}
                maxLength={4}
                placeholder={'\u4f8b\u5982 A7K2'}
                onChange={(event) => setSharePasswordDraft(normalizeAccessPasswordInput(event.target.value))}
              />
              <Button onClick={handleRegenerateSharePassword}>{'\u91cd\u7f6e\u9ed8\u8ba4'}</Button>
            </div>
          ) : null}
          <Button type="primary" loading={shareSaving} onClick={handleSaveShareAccess}>
            {'\u4fdd\u5b58\u5bc6\u7801\u8bbe\u7f6e'}
          </Button>
        </div>
      ) : null}
      <div className="meeting-share-qr-wrap">
        <QRCode
          value={sharePreviewUrl}
          type="svg"
          size={172}
          color="#1677ff"
          bgColor="transparent"
          errorLevel="H"
          bordered={false}
        />
      </div>
      <div className="meeting-share-caption">
        {'\u4f7f\u7528\u624b\u673a\u626b\u7801\u540e\u5c06\u8df3\u8f6c\u5230\u4f1a\u8bae\u9884\u89c8\u9875\uff0c\u82e5\u5df2\u5f00\u542f\u5bc6\u7801\u9700\u624b\u52a8\u8f93\u5165\u3002'}
      </div>
      <div className="meeting-share-link-box">
        <LinkOutlined />
        <span title={sharePreviewUrl}>{sharePreviewUrl}</span>
      </div>
      <div className="meeting-share-actions">
        <Button size="small" icon={<CopyOutlined />} onClick={handleCopyPreviewLink}>
          {'\u590d\u5236\u94fe\u63a5'}
        </Button>
        <Button size="small" type="primary" ghost onClick={handleOpenPreview}>
          {'\u6253\u5f00\u9884\u89c8'}
        </Button>
      </div>
    </div>
  ) : null;

  if (loading) {
    return (
      <div style={{ padding: 24 }}>
        <Skeleton active />
      </div>
    );
  }

  if (!meeting) {
    return (
      <div style={{ padding: 24 }}>
        <Empty description="会议不存在" />
      </div>
    );
  }

  return (
    <div className="meeting-detail-page">
      <PageHeader
        className="meeting-detail-page-header"
        title={(
          <div className="meeting-detail-title-wrap">
            <div className="meeting-detail-title-icon">
              <FileTextOutlined />
            </div>
            <div className="meeting-detail-title-copy">
              <div className="meeting-detail-title-row">
                <span className="meeting-detail-title-text">{meeting.title}</span>
                {isOwner && (
                  <button type="button" className="meeting-detail-title-edit" onClick={handleEditMeeting} aria-label="编辑会议信息">
                    <EditOutlined />
                  </button>
                )}
              </div>
              <div className="meeting-detail-meta-row">
                <span>
                  <ClockCircleOutlined /> {dayjs(meeting.meetingTime).format('YYYY-MM-DD HH:mm')}
                </span>
                <span>{meeting.participants || '未指定'}</span>
              </div>
            </div>
          </div>
        )}
        extra={(
          <Space size={10} wrap>
            <Button icon={<LeftOutlined />} onClick={() => navigate('/meetings')}>
              返回
            </Button>
            {canRetrySummary && (
              <Button icon={<SyncOutlined />} onClick={handleOpenSummaryDrawer} disabled={actionLoading}>
                重新总结
              </Button>
            )}
            {canRetryTranscription && (
              <Button icon={<SyncOutlined />} onClick={handleRetryTranscription} loading={actionLoading}>
                重新识别
              </Button>
            )}
            {isOwner && meeting.status === 2 && (
              <Button icon={<LoadingOutlined />} disabled loading>
                正在总结
              </Button>
            )}
            {(playbackAudioUrl || transcripts.length > 0 || (meeting.status === 3 && !!meeting.summaryContent)) && (
              <Dropdown
                menu={{
                  items: [
                    ...(playbackAudioUrl ? [{
                      key: 'audio',
                      label: `下载录音 (${audioDownloadFormatLabel})`,
                      icon: <AudioOutlined />,
                      onClick: handleDownloadAudio,
                    }] : []),
                    ...(transcripts.length > 0 ? [{
                      key: 'transcript',
                      label: '下载转录 MD',
                      icon: <DownloadOutlined />,
                      onClick: handleDownloadTranscript,
                      disabled: downloadLoading === 'transcript',
                    }] : []),
                    ...(meeting.status === 3 && !!meeting.summaryContent ? [
                      {
                        key: 'pdf',
                        label: '下载 PDF',
                        icon: <FilePdfOutlined />,
                        onClick: () => handleDownloadSummary('pdf'),
                        disabled: downloadLoading === 'pdf',
                      },
                      {
                        key: 'word',
                        label: '下载 Word',
                        icon: <FileWordOutlined />,
                        onClick: () => handleDownloadSummary('word'),
                        disabled: downloadLoading === 'word',
                      },
                    ] : []),
                  ],
                }}
                placement="bottomRight"
              >
                <Button icon={<DownloadOutlined />} loading={!!downloadLoading}>
                  下载
                </Button>
              </Dropdown>
            )}
            {shareQrContent ? (
              <Popover
                content={shareQrContent}
                trigger="click"
                open={sharePopoverOpen}
                onOpenChange={handleSharePopoverOpenChange}
                placement="bottomRight"
                overlayClassName="meeting-share-popover"
              >
                <Button type="primary" icon={<ShareAltOutlined />}>
                  分享
                </Button>
              </Popover>
            ) : null}
          </Space>
        )}
      />

      <div className="meeting-detail-workspace">
        {meeting.status === 1 ? (
          <MeetingProgressDisplay
            meetingId={meeting.id}
            onComplete={() => fetchData(meeting.id)}
            onProgressUpdate={(updated) => {
              if (updated.status !== meeting.status) {
                void fetchData(updated.id);
              }
            }}
          />
        ) : (
          <Row gutter={24} style={{ height: '100%' }}>
            <Col xs={24} xl={13} style={{ height: '100%' }}>
              <div className="detail-side-column detail-left-column">
                <Card className="left-flow-card keyword-panel" variant="borderless">
                  <div className="keyword-panel-head">
                    <div className="keyword-panel-title">关键词</div>
                    <div className="transcript-keyword-actions">
                      {analysis.keywords.length > 9 ? (
                        <button type="button" className="summary-link" onClick={() => setExpandKeywords((value) => !value)}>
                          {expandKeywords ? '收起' : '展开全部'}
                        </button>
                      ) : null}
                      {isOwner && analysis.keywords.length > 0 ? (
                        <Button
                          size="small"
                          type="primary"
                          ghost
                          disabled={!selectedKeywords.length}
                          loading={addingHotwords}
                          onClick={handleAddSelectedHotwords}
                        >
                          加入热词 {selectedKeywords.length > 0 ? `(${selectedKeywords.length})` : ''}
                        </Button>
                      ) : null}
                    </div>
                  </div>
                  <div className="record-tags">
                    {keywordItems.length ? (
                      keywordItems.map((tag) => {
                        const isSelected = selectedKeywords.includes(tag);
                        const isHighlighted = highlightKeyword === tag;
                        return (
                          <div
                            key={tag}
                            className={`tag selectable-tag ${isSelected ? 'selected' : ''} ${isHighlighted ? 'highlighted-tag' : ''}`}
                            onClick={() => {
                              if (isOwner && analysis.keywords.length) {
                                handleKeywordToggle(tag, !isSelected);
                              }
                              handleKeywordClick(tag);
                            }}
                            style={isHighlighted ? { borderColor: '#5f51ff', backgroundColor: 'rgba(95, 81, 255, 0.1)' } : {}}
                          >
                            <span>#{tag}</span>
                            {isOwner && isSelected && <CheckCircleFilled style={{ fontSize: 12 }} />}
                          </div>
                        );
                      })
                    ) : (
                      <Text type="secondary">暂无关键词</Text>
                    )}
                  </div>
                </Card>

                <Card className="left-flow-card summary-panel" variant="borderless">
                  <div className="summary-head">
                    <div className="summary-title">
                      <RobotOutlined />
                      <span>AI 智能总结</span>
                    </div>
                    <div className="summary-head-actions">
                      {meeting.summaryContent ? (
                        // <Button type="link" size="small" onClick={() => {
                        //   setIsEditingSummary(false);
                        //   setSummaryRecordVisible(true);
                        // }}>
                        <span>
                          总结记录
                        </span>
                        // </Button>
                      ) : null}
                      {meeting.summaryContent && isOwner ? (
                        <Button
                          type="link"
                          size="small"
                          icon={<EditOutlined />}
                          onClick={() => {
                            setSummaryDraft(meeting.summaryContent || '');
                            setIsEditingSummary(true);
                            setSummaryRecordVisible(true);
                          }}
                        >
                          编辑
                        </Button>
                      ) : null}
                    </div>
                  </div>

                  {meeting.status === 2 ? (
                    <div className="summary-progress-shell">
                      <MeetingProgressDisplay
                        meetingId={meeting.id}
                        onComplete={() => fetchData(meeting.id)}
                        compact
                      />
                    </div>
                  ) : meeting.summaryContent ? (
                    <div className="summary-markdown-panel">
                      <div className="markdown-body summary-markdown">
                        <MarkdownSummary
                          content={meeting.summaryContent}
                          keywords={analysis.keywords}
                          onKeywordClick={handleKeywordClick}
                        />
                      </div>
                    </div>
                  ) : false ? (
                    <>
                      <div className="brief-section">
                      <div className="brief-section-title">会议概述</div>
                      {analysis.overview ? (
                        <div className="summary-copy-wrap">
                          <div className={!expandSummary && analysis.overview.length > 220 ? 'summary-copy summary-fade' : 'summary-copy'}>
                            {analysis.overview}
                          </div>
                          {analysis.overview.length > 220 && (
                            <button type="button" className="summary-link" onClick={() => setExpandSummary((value) => !value)}>
                              {expandSummary ? '收起' : '展开全部'}
                            </button>
                          )}
                        </div>
                      ) : (
                        <Text type="secondary">暂无概述</Text>
                      )}
                    </div>

                      <div className="brief-section">
                        <div className="brief-section-title">主要讨论点</div>
                        {discussionItems.length ? (
                          <div className="discussion-list">
                            {discussionItems.map((item, index) => (
                              <div className="discussion-item" key={`${item.title}-${index}`}>
                                <div className="discussion-marker" />
                                <div className="discussion-body">
                                  <div className="discussion-title-row">
                                    <strong>{item.title || `讨论点 ${index + 1}`}</strong>
                                    {(item.speaker || item.time) && (
                                      <div className="discussion-meta">
                                        {item.speaker ? <span className="summary-tag">{item.speaker}</span> : null}
                                        {item.time ? <span className="summary-tag">{item.time}</span> : null}
                                      </div>
                                    )}
                                  </div>
                                  <div className="discussion-copy">{item.summary || '暂无讨论摘要'}</div>
                                </div>
                              </div>
                            ))}
                          </div>
                        ) : (
                          <Text type="secondary">暂无主要讨论点</Text>
                        )}
                      </div>

                      {analysis.todos.length ? (
                        <div className="brief-section">
                          <div className="brief-section-title">待办事项</div>
                          <div className="todo-list">
                            {analysis.todos.map((item, index) => (
                              <div className="todo-item" key={`${item}-${index}`}>
                                <span className="todo-dot" />
                                <span>{item}</span>
                              </div>
                            ))}
                          </div>
                        </div>
                      ) : null}
                    </>
                  ) : (
                    <div className="summary-empty-state">
                      <Empty description="暂无智能总结内容" />
                    </div>
                  )}
                </Card>

                {!emptyTranscriptFailureNotice && (
                <div className="section-divider-note">
                  <div className="section-divider-line" />
                  <div className="section-divider-text">
                    智能内容由 AI 模型生成，我们不对内容准确性和完整性作任何保证，也不代表我们的观点或态度
                  </div>
                  <div className="section-divider-line" />
                </div>
                )}

                <div ref={transcriptSectionRef} className="transcript-player-anchor">
                  <Card className="left-flow-card" variant="borderless" title={<span><AudioOutlined /> 原文</span>}>
                    {playbackAudioUrl && (
                      <audio ref={audioRef} style={{ display: 'none' }} preload="auto">
                        <source src={playbackAudioUrl} type={resolveAudioMimeType(playbackAudioUrl)} />
                      </audio>
                    )}
                    {emptyTranscriptFailureNotice && (
                      <div className="empty-transcript-inline-note">
                        <div className="empty-transcript-inline-note__title">当前没有可展示的转录内容</div>
                        <div className="empty-transcript-inline-note__text">{emptyTranscriptFailureNotice.description}</div>
                      </div>
                    )}
                    {meeting.audioSaveStatus === 'FAILED' && (
                      <Alert
                        type="warning"
                        showIcon
                        style={{ marginBottom: 16 }}
                        message={meeting.audioSaveMessage || '实时会议已完成，但音频保存失败，当前无法播放会议录音。转写和总结不受影响。'}
                      />
                    )}
                    <List
                      className="transcript-list"
                      dataSource={transcripts}
                      style={{ paddingBottom: playbackAudioUrl ? 156 : 0 }}
                      renderItem={(item, index) => {
                        const nextStartTime = transcripts[index + 1]?.startTime || Infinity;
                        const isActive = (audioCurrentTime * 1000) >= item.startTime && (audioCurrentTime * 1000) < nextStartTime;

                        return (
                          <ActiveTranscriptRow
                            item={item}
                            meetingId={meeting.id}
                            isOwner={isOwner}
                            isEditing={editingTranscriptId === item.id}
                            isSaving={savingTranscriptId === item.id}
                            speakerLabelMap={speakerLabelMap}
                            onPlay={handleTranscriptRowPlay}
                            onStartEdit={handleStartEditTranscript}
                            onDraftBlur={handleTranscriptDraftBlur}
                            onDraftKeyDown={handleTranscriptDraftKeyDown}
                            onSpeakerUpdated={handleTranscriptSpeakerUpdated}
                            registerRow={registerTranscriptRow}
                            isActive={isActive}
                            isLinkedHighlight={linkedTranscriptIds.includes(item.id)}
                            audioPlaying={audioPlaying}
                          />
                        );
                      }}
                      locale={{ emptyText: meeting.status < 3 ? '识别任务进行中...' : '暂无数据' }}
                    />
                  </Card>
                </div>
              </div>
            </Col>

            <Col xs={24} xl={11} style={{ height: '100%' }}>
              <div ref={leftColumnRef} className="detail-side-column detail-right-column">
                {( 
                <div ref={transcriptSectionRef} className="transcript-player-anchor">
                  <Card
                    className="left-flow-card transcript-workspace-card"
                    variant="borderless"
                    style={{ height: '100%' }}
                    styles={{ body: { padding: 0, height: '100%', display: 'flex', flexDirection: 'column', minHeight: 0 } }}
                  >
                    {playbackAudioUrl && (
                      <audio ref={audioRef} style={{ display: 'none' }} preload="auto">
                        <source src={playbackAudioUrl} type={resolveAudioMimeType(playbackAudioUrl)} />
                      </audio>
                    )}

                    <div className="transcript-stage-tabs">
                      <button
                        type="button"
                        className={workspaceTab === 'catalog' ? 'active' : ''}
                        onClick={() => setWorkspaceTab('catalog')}
                      >
                        AI目录
                      </button>
                      <button
                        type="button"
                        className={workspaceTab === 'transcript' ? 'active' : ''}
                        onClick={() => setWorkspaceTab('transcript')}
                      >
                        转录原文
                      </button>
                    </div>

                    <div className="transcript-scroll-shell">
                      {workspaceTab === 'catalog' ? (
                        <div className="catalog-list">
                          {catalogChapterLinks.length ? (
                            catalogChapterLinks.map((chapter, index) => (
                              <div
                                key={chapter.key}
                                className={`catalog-item ${linkedChapterKey === chapter.key ? 'active' : ''}`}
                              >
                                <div className="catalog-item-time">{chapter.timeLabel}</div>
                                <div className="catalog-item-main">
                                  <div className="catalog-item-title">{chapter.title}</div>
                                  <button
                                    type="button"
                                    className="catalog-item-link"
                                    onClick={() => handleLocateChapterTranscript(index)}
                                  >
                                    关联原文
                                  </button>
                                </div>
                              </div>
                            ))
                          ) : (
                            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无 AI 目录" />
                          )}
                        </div>
                      ) : (
                        <>
                          {emptyTranscriptFailureNotice && (
                            <div className="empty-transcript-inline-note">
                              <div className="empty-transcript-inline-note__title">当前没有可展示的转录内容</div>
                              <div className="empty-transcript-inline-note__text">{emptyTranscriptFailureNotice.description}</div>
                            </div>
                          )}
                          {meeting.audioSaveStatus === 'FAILED' && (
                            <Alert
                              type="warning"
                              showIcon
                              style={{ margin: '0 18px 16px' }}
                              message={meeting.audioSaveMessage || '实时会议已完成，但音频保存失败，当前无法播放会议录音。转写和总结不受影响。'}
                            />
                          )}
                          <List
                            className="transcript-list"
                            dataSource={transcripts}
                            style={{ paddingBottom: playbackAudioUrl ? 156 : 0 }}
                            renderItem={(item, index) => {
                              const nextStartTime = transcripts[index + 1]?.startTime || Infinity;
                              const isActive = (audioCurrentTime * 1000) >= item.startTime && (audioCurrentTime * 1000) < nextStartTime;

                              return (
                                <ActiveTranscriptRow
                                  item={item}
                                  meetingId={meeting.id}
                                  isOwner={isOwner}
                                  isEditing={editingTranscriptId === item.id}
                                  isSaving={savingTranscriptId === item.id}
                                  speakerLabelMap={speakerLabelMap}
                                  onPlay={handleTranscriptRowPlay}
                                  onStartEdit={handleStartEditTranscript}
                                  onDraftBlur={handleTranscriptDraftBlur}
                                  onDraftKeyDown={handleTranscriptDraftKeyDown}
                                  onSpeakerUpdated={handleTranscriptSpeakerUpdated}
                                  registerRow={registerTranscriptRow}
                                  isActive={isActive}
                                  isLinkedHighlight={linkedTranscriptIds.includes(item.id)}
                                  audioPlaying={audioPlaying}
                                  highlightKeyword={highlightKeyword}
                                />
                              );
                            }}
                            locale={{ emptyText: meeting.status < 3 ? '识别任务进行中...' : '暂无数据' }}
                          />
                        </>
                      )}
                    </div>
                  </Card>
                </div>
                )}
              </div>
            </Col>
          </Row>
        )}
      </div>

      {playbackAudioUrl && showFloatingTranscriptPlayer && floatingTranscriptPlayerLayout && (
        <div
          className="transcript-player transcript-player--floating"
          style={{ left: floatingTranscriptPlayerLayout.left, width: floatingTranscriptPlayerLayout.width }}
        >
          <button type="button" className="player-main-btn" onClick={toggleAudioPlayback} aria-label="toggle-audio">
            {audioPlaying ? <PauseOutlined /> : <CaretRightFilled />}
          </button>
          <div className="player-progress-shell">
            <div className="player-time-row">
              <span>{formatPlayerTime(audioCurrentTime)}</span>
              <span>{formatPlayerTime(audioDuration)}</span>
            </div>
            <input
              className="player-range"
              type="range"
              min={0}
              max={audioDuration || 0}
              step={0.1}
              value={Math.min(audioCurrentTime, audioDuration || 0)}
              onChange={handleAudioProgressChange}
            />
          </div>
          <button type="button" className="player-ghost-btn" onClick={cyclePlaybackRate}>
            <FastForwardOutlined />
            {audioPlaybackRate}x
          </button>
        </div>
      )}

      <style>{`
        @keyframes highlight-pulse {
          0% { box-shadow: 0 0 0 rgba(95, 81, 255, 0); transform: scale(1); }
          50% { box-shadow: 0 0 15px rgba(95, 81, 255, 0.3); transform: scale(1.02); }
          100% { box-shadow: 0 0 0 rgba(95, 81, 255, 0); transform: scale(1); }
        }
        .highlight-text {
          background: linear-gradient(120deg, rgba(95, 81, 255, 0.15) 0%, rgba(108, 140, 255, 0.1) 100%);
          border-bottom: 2px solid #5f51ff;
          border-radius: 3px;
          padding: 1px 4px;
          color: #4335eb;
          font-weight: 600;
          transition: all 0.3s ease;
          display: inline-block;
          line-height: 1.2;
          margin: 0 1px;
          cursor: pointer;
          animation: highlight-pulse 2s infinite ease-in-out;
        }
        .highlight-text:hover {
          background: rgba(95, 81, 255, 0.25);
          transform: translateY(-1px);
        }
        /* 当转录行处于活动状态（紫色背景）时，调整高亮样式以保持可读性 */
        .ant-list-item.transcript-row.active .highlight-text {
          background: rgba(255, 255, 255, 0.2);
          border-bottom-color: #fff;
          color: #fff;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
          animation: none; /* 活动行内不需要脉冲，避免视觉混乱 */
        }
        .summary-keyword-link {
          color: #5f51ff;
          cursor: pointer;
          font-weight: 500;
          padding: 0 2px;
          border-radius: 2px;
          transition: all 0.2s;
        }
        .summary-keyword-link:hover {
          background: rgba(95, 81, 255, 0.1);
          text-decoration: underline;
        }
        .meeting-detail-page {
          padding: 24px;
          height: calc(100vh - 64px);
          overflow: hidden;
          display: flex;
          flex-direction: column;
          background:
            radial-gradient(circle at top left, rgba(108, 103, 255, 0.08), transparent 22%),
            linear-gradient(180deg, #f8faff 0%, #f3f6fc 100%);
        }
        .meeting-detail-page-header {
          margin-bottom: 18px;
          padding: 18px 20px;
          border-radius: 24px;
          border: 1px solid rgba(220, 226, 242, 0.9);
          background: rgba(255, 255, 255, 0.92);
          box-shadow: 0 18px 46px rgba(95, 109, 155, 0.1);
          backdrop-filter: blur(18px);
        }
        .meeting-detail-title-wrap {
          display: flex;
          align-items: flex-start;
          gap: 16px;
        }
        .meeting-detail-title-icon {
          width: 42px;
          height: 42px;
          border-radius: 14px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 20px;
          background: linear-gradient(135deg, #5f51ff, #6c8cff);
          box-shadow: 0 10px 24px rgba(95, 81, 255, 0.22);
          flex-shrink: 0;
        }
        .meeting-detail-title-copy {
          display: grid;
          gap: 6px;
        }
        .meeting-detail-title-row {
          display: flex;
          align-items: center;
          gap: 10px;
          flex-wrap: wrap;
        }
        .meeting-detail-title-text {
          color: #16203d;
          font-size: 18px;
          line-height: 1.2;
          font-weight: 800;
        }
        .meeting-detail-title-edit {
          width: 28px;
          height: 28px;
          border: 0;
          border-radius: 50%;
          background: rgba(95, 81, 255, 0.08);
          color: #5f51ff;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }
        .meeting-detail-meta-row {
          display: flex;
          flex-wrap: wrap;
          gap: 10px 16px;
          color: #6e7695;
          font-size: 13px;
        }
        .meeting-detail-workspace {
          flex: 1;
          min-height: 0;
        }
        .detail-side-column {
          height: 100%;
          min-height: 0;
          min-width: 0;
        }
        .detail-left-column {
          overflow-y: auto;
          overflow-x: hidden;
          padding-right: 6px;
          display: flex;
          flex-direction: column;
          gap: 18px;
        }
        .detail-left-column > .section-divider-note,
        .detail-left-column > .transcript-player-anchor {
          display: none;
        }
        .detail-right-column {
          overflow: hidden;
          display: flex;
          flex-direction: column;
        }
        .left-flow-card {
          min-width: 0;
          border-radius: 24px;
          border: 1px solid rgba(228, 232, 245, 0.96);
          box-shadow: 0 18px 38px rgba(127, 139, 186, 0.08);
          background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.98));
        }
        .left-flow-card .ant-card-head,
        .left-flow-card .ant-card-body {
          min-width: 0;
        }
        .summary-panel .ant-card-body {
          display: flex;
          flex-direction: column;
          gap: 24px;
          padding: 22px 24px 24px;
        }
        .summary-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
        }
        .summary-title {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          color: #5f51ff;
          font-size: 26px;
          font-weight: 800;
        }
        .summary-head-actions {
          display: inline-flex;
          align-items: center;
          gap: 4px;
        }
        .summary-progress-shell,
        .summary-empty-state {
          min-height: 280px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .summary-markdown-panel {
          min-height: 0;
        }
        .keyword-panel .ant-card-body {
          display: grid;
          gap: 16px;
          padding: 20px 24px 24px;
        }
        .keyword-panel-head {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 12px;
          flex-wrap: wrap;
        }
        .keyword-panel-title {
          color: #2d3553;
          font-size: 16px;
          font-weight: 800;
          letter-spacing: 0.04em;
        }
        .brief-section {
          display: grid;
          gap: 14px;
          padding: 18px 18px 0;
          border-top: 1px solid rgba(230, 235, 247, 0.95);
        }
        .brief-section:first-of-type {
          padding-top: 0;
          border-top: 0;
        }
        .brief-section-title {
          color: #5d6685;
          font-size: 14px;
          font-weight: 800;
          letter-spacing: 0.06em;
        }
        .meeting-share-popover .ant-popover-inner {
          padding: 0;
          overflow: hidden;
          border-radius: 24px;
          box-shadow: 0 24px 56px rgba(76, 61, 39, 0.18);
          background:
            radial-gradient(circle at top right, rgba(82, 164, 255, 0.12), transparent 32%),
            radial-gradient(circle at top left, rgba(252, 208, 157, 0.18), transparent 26%),
            linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(248, 241, 231, 0.98));
        }
        .empty-transcript-hero {
          margin-bottom: 16px;
          padding: 18px 20px;
          border-radius: 24px;
          border: 1px solid rgba(220, 170, 77, 0.24);
          background:
            radial-gradient(circle at top right, rgba(255, 233, 188, 0.72), transparent 34%),
            linear-gradient(135deg, rgba(255, 252, 245, 0.98), rgba(255, 245, 223, 0.98));
          box-shadow: 0 22px 48px rgba(188, 148, 68, 0.14);
        }
        .empty-transcript-hero__badge {
          display: inline-flex;
          align-items: center;
          padding: 6px 10px;
          border-radius: 999px;
          background: rgba(122, 80, 14, 0.08);
          color: #9a6700;
          font-size: 11px;
          font-weight: 800;
          letter-spacing: 0.12em;
          text-transform: uppercase;
        }
        .empty-transcript-hero__content {
          margin-top: 14px;
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 18px;
        }
        .empty-transcript-hero__title {
          color: #7a4f0f;
          font-size: 20px;
          font-weight: 800;
          line-height: 1.3;
        }
        .empty-transcript-hero__description {
          margin-top: 8px;
          max-width: 760px;
          color: #7a5b27;
          font-size: 14px;
          line-height: 1.8;
        }
        .empty-transcript-hero__hint {
          margin-top: 8px;
          color: #b26a00;
          font-size: 13px;
          font-weight: 600;
        }
        .empty-transcript-hero__actions {
          display: flex;
          flex-shrink: 0;
          align-items: center;
          gap: 10px;
        }
        .empty-transcript-player {
          margin-top: 16px;
          max-width: 480px;
          background: rgba(255, 255, 255, 0.8);
        }
        .empty-transcript-inline-note {
          margin-bottom: 16px;
          padding: 14px 16px;
          border-radius: 18px;
          border: 1px solid rgba(220, 170, 77, 0.22);
          background: linear-gradient(135deg, rgba(255, 250, 240, 0.96), rgba(255, 245, 224, 0.92));
        }
        .empty-transcript-inline-note__title {
          color: #8a5a00;
          font-size: 14px;
          font-weight: 700;
        }
        .empty-transcript-inline-note__text {
          margin-top: 6px;
          color: #876537;
          font-size: 13px;
          line-height: 1.7;
        }
        .meeting-share-popover .ant-popover-inner-content {
          padding: 0;
        }
        .meeting-share-card {
          width: min(82vw, 300px);
          padding: 18px;
          display: flex;
          flex-direction: column;
          gap: 14px;
          color: #33261c;
        }
        .meeting-share-card-head {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 12px;
        }
        .meeting-share-kicker {
          color: rgba(72, 53, 39, 0.64);
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
        }
        .meeting-share-title {
          margin-top: 6px;
          font-family: Georgia, 'Times New Roman', 'Songti SC', serif;
          font-size: 22px;
          line-height: 1.08;
          color: #33261c;
        }
        .meeting-share-pill {
          display: inline-flex;
          align-items: center;
          padding: 6px 10px;
          border-radius: 999px;
          background: rgba(49, 95, 139, 0.08);
          color: #315f8b;
          font-size: 12px;
          font-weight: 700;
          white-space: nowrap;
        }
        .meeting-share-qr-wrap {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 16px;
          border-radius: 22px;
          background: rgba(255, 255, 255, 0.72);
          border: 1px solid rgba(84, 57, 31, 0.08);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }
        .meeting-share-caption {
          color: rgba(72, 53, 39, 0.76);
          font-size: 13px;
          line-height: 1.7;
        }
        .meeting-share-settings {
          display: grid;
          gap: 12px;
          padding: 14px;
          border-radius: 18px;
          background: rgba(255, 255, 255, 0.62);
          border: 1px solid rgba(84, 57, 31, 0.08);
        }
        .meeting-share-settings-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
        }
        .meeting-share-settings-copy {
          display: grid;
          gap: 4px;
        }
        .meeting-share-settings-copy strong {
          color: #33261c;
          font-size: 14px;
        }
        .meeting-share-settings-copy span {
          color: rgba(72, 53, 39, 0.72);
          font-size: 12px;
          line-height: 1.6;
        }
        .meeting-share-settings-actions {
          display: grid;
          grid-template-columns: minmax(0, 1fr) auto;
          gap: 10px;
        }
        .meeting-share-link-box {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 10px 12px;
          border-radius: 14px;
          background: rgba(255, 255, 255, 0.72);
          border: 1px solid rgba(84, 57, 31, 0.08);
          color: #315f8b;
          font-size: 12px;
        }
        .meeting-share-link-box span {
          flex: 1;
          min-width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .meeting-share-actions {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 10px;
        }
        .record-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
        }
        .tag,
        .summary-tag {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 6px 14px;
          border-radius: 999px;
          background: rgba(22, 119, 255, 0.06);
          color: var(--app-primary-color);
          border: 1px solid rgba(22, 119, 255, 0.15);
          font-size: 13px;
          font-weight: 500;
        }
        .selectable-tag {
          cursor: pointer;
          transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        .selectable-tag:hover {
          background: rgba(22, 119, 255, 0.12);
          border-color: rgba(22, 119, 255, 0.3);
          transform: translateY(-1px);
        }
        .selectable-tag.selected {
          background: linear-gradient(135deg, var(--app-primary-color), #36cfc9);
          color: #ffffff;
          border-color: transparent;
          font-weight: 600;
          box-shadow: 0 4px 12px rgba(22, 119, 255, 0.24);
        }
        .selectable-tag.selected:hover {
          box-shadow: 0 6px 16px rgba(22, 119, 255, 0.35);
          transform: translateY(-2px);
        }
        .summary-copy {
          color: #465072;
          font-size: 14px;
          line-height: 1.92;
          position: relative;
          white-space: pre-wrap;
        }
        .summary-fade {
          max-height: 162px;
          overflow: hidden;
        }
        .summary-fade::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: 52px;
          background: linear-gradient(180deg, rgba(248, 250, 255, 0), rgba(248, 250, 255, 0.98));
        }
        .summary-link {
          width: fit-content;
          padding: 0;
          border: 0;
          background: transparent;
          color: #6470ff;
          font-size: 13px;
          font-weight: 700;
          cursor: pointer;
        }
        .discussion-list {
          display: grid;
          gap: 16px;
        }
        .discussion-item {
          display: grid;
          grid-template-columns: 12px minmax(0, 1fr);
          gap: 14px;
          align-items: flex-start;
        }
        .discussion-marker {
          width: 8px;
          height: 8px;
          margin-top: 10px;
          border-radius: 50%;
          background: linear-gradient(135deg, #5f51ff, #7f8dff);
          box-shadow: 0 0 0 5px rgba(95, 81, 255, 0.08);
        }
        .discussion-body {
          display: grid;
          gap: 8px;
          color: #4f5876;
          line-height: 1.8;
        }
        .discussion-title-row {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 10px;
        }
        .discussion-title-row strong {
          color: #233053;
          font-size: 15px;
        }
        .discussion-copy {
          color: #4f5876;
          line-height: 1.86;
        }
        .discussion-meta {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
        }
        .transcript-workspace-card {
          height: 100%;
          overflow: hidden;
        }
        .transcript-keyword-bar {
          padding: 18px 18px 12px;
          border-bottom: 1px solid rgba(228, 232, 245, 0.92);
          display: grid;
          gap: 14px;
          background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.92));
        }
        .transcript-keyword-label {
          color: #2d3553;
          font-size: 14px;
          font-weight: 800;
          letter-spacing: 0.04em;
        }
        .transcript-keyword-body {
          display: grid;
          gap: 12px;
        }
        .transcript-keyword-actions {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          flex-wrap: wrap;
        }
        .transcript-stage-tabs {
          display: flex;
          align-items: center;
          gap: 20px;
          padding: 0 18px;
          min-height: 54px;
          border-bottom: 1px solid rgba(228, 232, 245, 0.92);
          background: rgba(255, 255, 255, 0.84);
        }
        .transcript-stage-tabs button {
          padding: 0;
          border: 0;
          background: transparent;
          color: #7d86a5;
          font-size: 14px;
          font-weight: 700;
          height: 100%;
          position: relative;
        }
        .transcript-stage-tabs button.active {
          color: #4f56ff;
        }
        .transcript-stage-tabs button.active::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: 2px;
          border-radius: 999px;
          background: #5f51ff;
        }
        .transcript-scroll-shell {
          flex: 1;
          min-height: 0;
          overflow-y: auto;
          overflow-x: hidden;
          padding: 18px 18px 0;
        }
        .catalog-list {
          display: grid;
          gap: 14px;
          padding-bottom: 0;
        }
        .catalog-item {
          display: grid;
          grid-template-columns: 76px minmax(0, 1fr);
          gap: 14px;
          align-items: start;
          padding: 16px 18px;
          border-radius: 18px;
          border: 1px solid rgba(228, 232, 245, 0.96);
          background: rgba(248, 250, 255, 0.96);
          transition: all 0.24s ease;
        }
        .catalog-item:hover {
          border-color: rgba(95, 81, 255, 0.18);
          box-shadow: 0 12px 28px rgba(95, 81, 255, 0.08);
          transform: translateY(-1px);
        }
        .catalog-item.active {
          border-color: rgba(95, 81, 255, 0.24);
          background: linear-gradient(135deg, rgba(95, 81, 255, 0.08), rgba(108, 140, 255, 0.06));
          box-shadow: 0 14px 30px rgba(95, 81, 255, 0.1);
        }
        .catalog-item-time {
          color: #5c66a2;
          font-size: 13px;
          font-weight: 800;
          letter-spacing: 0.04em;
          padding-top: 4px;
        }
        .catalog-item-main {
          min-width: 0;
          display: grid;
          gap: 10px;
        }
        .catalog-item-title {
          color: #273153;
          font-size: 15px;
          font-weight: 700;
          line-height: 1.7;
        }
        .catalog-item-link {
          width: fit-content;
          padding: 0;
          border: 0;
          background: transparent;
          color: #5f51ff;
          font-size: 13px;
          font-weight: 700;
          cursor: pointer;
        }
        .catalog-item-link:hover {
          color: #4536f0;
          text-decoration: underline;
        }
        .segmented-tabs {
          display: flex;
          gap: 28px;
          align-items: center;
          flex-wrap: wrap;
          padding-bottom: 8px;
          border-bottom: 1px solid rgba(226, 231, 245, 0.95);
        }
        .segmented-tabs button {
          padding: 0 0 10px;
          border: 0;
          background: transparent;
          font-size: 14px;
          font-weight: 700;
          color: #9aa0bd;
          cursor: pointer;
          position: relative;
          white-space: nowrap;
          transition: color 0.2s ease;
        }
        .segmented-tabs button:hover {
          color: #5a638f;
        }
        .segmented-tabs button.active {
          color: #3a4476;
        }
        .segmented-tabs button.active::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          bottom: -9px;
          height: 2px;
          border-radius: 999px;
          background: #6b73ff;
        }
        .chapter-list,
        .speaker-summary-list,
        .keypoint-list,
        .todo-list {
          display: flex;
          flex-direction: column;
          gap: 14px;
          padding-top: 12px;
        }
        .chapter-item {
          display: flex;
          gap: 14px;
          align-items: flex-start;
        }
        .chapter-time {
          position: relative;
          padding-top: 10px;
          color: #58627f;
          font-size: 14px;
          font-weight: 700;
          flex-shrink: 0;
          width: 64px;
        }
        .chapter-time::after {
          content: "";
          display: inline-block;
          width: 8px;
          height: 8px;
          margin-left: 8px;
          border-radius: 50%;
          background: #6e76ff;
          vertical-align: middle;
        }
        .chapter-card,
        .speaker-summary-card,
        .keypoint-card {
          border-radius: 16px;
          padding: 14px 16px;
          background: rgba(244, 246, 255, 0.96);
          border: 1px solid rgba(231, 235, 248, 0.98);
        }
        .chapter-card {
          display: flex;
          flex-direction: column;
          gap: 8px;
        }
        .chapter-card strong,
        .keypoint-content strong {
          color: #414b78;
          font-size: 15px;
        }
        .chapter-card span,
        .speaker-summary-body,
        .keypoint-content span {
          color: #67718f;
          line-height: 1.75;
        }
        .speaker-summary-card {
          display: grid;
          grid-template-columns: 96px minmax(0, 1fr);
          gap: 16px;
          align-items: start;
        }
        .speaker-summary-side {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 8px;
        }
        .speaker-avatar {
          width: 48px;
          height: 48px;
          border-radius: 16px;
          background: linear-gradient(135deg, #7480ff, #8c63ff);
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 800;
        }
        .speaker-summary-name {
          color: #3d4774;
          font-weight: 700;
        }
        .speaker-summary-meta,
        .keypoint-meta {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin-top: 10px;
          color: #96a0c1;
          font-size: 12px;
        }
        .keypoint-card {
          display: flex;
          gap: 14px;
          align-items: start;
        }
        .keypoint-badge {
          width: 36px;
          height: 36px;
          flex-shrink: 0;
          border-radius: 12px;
          background: rgba(107, 115, 255, 0.12);
          color: #5c64ff;
          font-weight: 800;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .keypoint-content {
          display: flex;
          flex-direction: column;
          gap: 8px;
        }
        .todo-item {
          display: flex;
          align-items: flex-start;
          gap: 10px;
          color: #495271;
          line-height: 1.7;
          padding: 12px 14px;
          border-radius: 14px;
          background: rgba(247, 249, 255, 0.98);
          border: 1px solid rgba(232, 236, 248, 0.98);
        }
        .todo-dot {
          width: 8px;
          height: 8px;
          margin-top: 9px;
          border-radius: 50%;
          background: #6e76ff;
          flex: 0 0 auto;
        }
        .section-divider-note {
          display: flex;
          align-items: center;
          gap: 14px;
          color: #c0c6dc;
          font-size: 12px;
          padding: 2px 4px;
        }
        .section-divider-line {
          flex: 1;
          height: 1px;
          background: linear-gradient(90deg, rgba(220, 225, 240, 0), rgba(220, 225, 240, 0.92), rgba(220, 225, 240, 0));
        }
        .section-divider-text {
          white-space: nowrap;
        }
        .ant-list-item.transcript-row {
          display: flex !important;
          justify-content: flex-start !important;
          align-items: flex-start !important;
          gap: 12px;
          padding: 12px 0 !important;
          border-bottom: 0 !important;
          cursor: pointer;
        }
        .ant-list-item.transcript-row.linked .transcript-bubble,
        .ant-list-item.transcript-row.linked .transcript-bubble-editing {
          background: linear-gradient(135deg, rgba(95, 81, 255, 0.08), rgba(108, 140, 255, 0.06));
          border-color: rgba(95, 81, 255, 0.2);
          box-shadow: 0 10px 24px rgba(95, 81, 255, 0.06);
        }
        .ant-list-item.transcript-row.active .transcript-bubble,
        .ant-list-item.transcript-row.active .transcript-bubble-editing {
          border-color: rgba(95, 81, 255, 0.16);
          background: linear-gradient(135deg, #5b41ff, #6a5cff);
          color: #ffffff;
          box-shadow: 0 12px 28px rgba(95, 81, 255, 0.2);
        }
        .transcript-entry {
          flex: 1;
          justify-self: start;
          text-align: left;
          display: flex;
          align-items: flex-start;
          gap: 16px;
          width: 100%;
          min-width: 0;
        }
        .transcript-content-wrap {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 8px;
          min-width: 0;
        }
        .transcript-meta {
          display: flex;
          align-items: center;
          gap: 8px;
          flex-wrap: wrap;
          color: #8e98b8;
          font-size: 12px;
        }
        .transcript-avatar {
          flex-shrink: 0;
          background: linear-gradient(135deg, #d9ebff, #eaf2ff) !important;
          color: #4362ff !important;
          margin-top: 4px;
        }
        .transcript-speaker {
          color: var(--app-text-main);
          font-weight: 700;
          font-size: 14px;
        }
        .transcript-speaker.editable {
          color: var(--app-primary-color);
          cursor: pointer;
        }
        .transcript-bubble {
          display: block;
          align-self: stretch;
          width: 100%;
          max-width: 100%;
          box-sizing: border-box;
          padding: 14px 18px;
          border-radius: 22px;
          background: rgba(255, 255, 255, 0.96);
          border: 1px solid rgba(228, 232, 245, 0.96);
          color: #313b5b;
          line-height: 1.74;
          font-size: 15px;
          white-space: pre-wrap;
          transition: all 0.3s ease;
        }
        .transcript-bubble:hover {
          border-color: rgba(95, 81, 255, 0.24);
          box-shadow: 0 8px 24px rgba(95, 81, 255, 0.08);
        }
        .transcript-bubble.editable {
          cursor: text;
        }
        .transcript-bubble.editable:hover {
          border-color: rgba(100, 112, 255, 0.24);
        }
        .transcript-bubble-editing {
          display: block;
          align-self: stretch;
          width: 100%;
          max-width: 100%;
          box-sizing: border-box;
          outline: none;
        }
        .transcript-bubble-input {
          display: block;
          width: 100% !important;
          max-width: 100%;
        }
        .transcript-bubble-input .ant-input-affix-wrapper,
        .transcript-bubble-input .ant-input-textarea,
        .transcript-bubble-editing .ant-input-textarea,
        .transcript-bubble-editing .ant-input-textarea-show-count {
          display: block;
          width: 100% !important;
          max-width: 100%;
        }
        .transcript-bubble-input .ant-input {
          display: block;
          width: 100% !important;
          min-height: 1.86em;
          padding: 0;
          border: 0;
          background: transparent;
          color: #3f496a;
          line-height: 1.86;
          white-space: pre-wrap;
          resize: none;
          box-shadow: none;
          direction: ltr;
          text-align: left;
        }
        .transcript-bubble-input .ant-input:focus,
        .transcript-bubble-input .ant-input:focus-within {
          box-shadow: none;
        }
        .transcript-bubble-actions {
          display: none;
        }
        .transcript-bubble-hint {
          display: none;
        }
        .transcript-player-anchor {
          position: relative;
          flex: 1;
          min-height: 0;
          display: flex;
        }
        .transcript-player-anchor > .transcript-workspace-card {
          flex: 1;
        }
        .transcript-list {
          min-width: 0;
          padding-top: 4px;
        }
        .transcript-player {
          display: flex;
          align-items: center;
          gap: 16px;
          padding: 14px 16px;
          border-radius: 20px;
          background: rgba(255, 255, 255, 0.92);
          border: 1px solid rgba(225, 231, 246, 0.95);
          box-shadow: 0 18px 44px rgba(72, 86, 128, 0.16);
          backdrop-filter: blur(24px);
        }
        .transcript-player--floating {
          position: fixed;
          bottom: 84px;
          z-index: 100;
          max-width: calc(100vw - 32px);
        }
        .player-main-btn,
        .player-ghost-btn {
          border: 0;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }
        .player-main-btn {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          background: linear-gradient(135deg, #5f51ff, #6b7dff);
          color: #fff;
          font-size: 18px;
          box-shadow: 0 10px 24px rgba(95, 81, 255, 0.28);
        }
        .player-ghost-btn {
          gap: 6px;
          padding: 0 12px;
          height: 38px;
          border-radius: 12px;
          background: rgba(95, 81, 255, 0.08);
          color: #5f51ff;
          font-weight: 700;
        }
        .player-progress-shell {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 8px;
          min-width: 0;
        }
        .player-time-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #8b94b5;
          font-size: 12px;
          font-weight: 700;
        }
        .player-range {
          width: 100%;
          appearance: none;
          height: 6px;
          border-radius: 999px;
          background: linear-gradient(90deg, rgba(108, 117, 255, 0.92), rgba(108, 117, 255, 0.92)) 0/0% 100% no-repeat,
            linear-gradient(90deg, rgba(219, 224, 247, 0.9), rgba(231, 235, 250, 0.95));
          outline: none;
        }
        .player-range::-webkit-slider-thumb {
          appearance: none;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background: #fff;
          border: 3px solid #6e75ff;
          box-shadow: 0 4px 12px rgba(110, 117, 255, 0.24);
          cursor: pointer;
        }
        .player-range::-moz-range-thumb {
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background: #fff;
          border: 3px solid #6e75ff;
          box-shadow: 0 4px 12px rgba(110, 117, 255, 0.24);
          cursor: pointer;
        }
        .markdown-shell {
          height: 100%;
          min-height: 0;
          min-width: 0;
          width: 100%;
          overflow-x: hidden;
          padding-bottom: 28px;
          box-sizing: border-box;
        }
        .summary-markdown {
          font-size: 14px;
          line-height: 1.9;
          color: #3e4768;
          min-width: 0;
          width: 100%;
          max-width: 100%;
          overflow-x: hidden;
          padding-bottom: 12px;
          box-sizing: border-box;
        }
        .markdown-body {
          font-size: 14px;
          line-height: 1.8;
          color: #333;
          min-width: 0;
          width: 100%;
          box-sizing: border-box;
          max-width: 100%;
          overflow-wrap: anywhere;
          word-break: break-word;
        }
        .markdown-body p {
          margin-bottom: 16px;
        }
        .markdown-body h1,
        .markdown-body h2,
        .markdown-body h3 {
          margin-top: 24px;
          margin-bottom: 16px;
          font-weight: 600;
          overflow-wrap: anywhere;
          word-break: break-word;
        }
        .markdown-body ul,
        .markdown-body ol,
        .markdown-body li,
        .markdown-body blockquote,
        .markdown-body table,
        .markdown-body tr,
        .markdown-body td,
        .markdown-body th,
        .markdown-body a,
        .markdown-body code,
        .markdown-body pre {
          max-width: 100%;
          overflow-wrap: anywhere;
          word-break: break-word;
        }
        .markdown-body pre {
          overflow-x: auto;
          padding: 12px 14px;
          border-radius: 12px;
          background: rgba(245, 247, 255, 0.96);
        }
        .markdown-body table {
          display: block;
          overflow-x: auto;
        }
        .markdown-body img {
          max-width: 100%;
          height: auto;
        }
        @media (max-width: 1200px) {
          .detail-left-column {
            padding-right: 0;
          }
          .catalog-item {
            grid-template-columns: 68px minmax(0, 1fr);
          }
          .speaker-summary-card {
            grid-template-columns: 1fr;
          }
        }
        @media (max-width: 992px) {
          .empty-transcript-hero__content {
            flex-direction: column;
          }
          .empty-transcript-hero__actions {
            width: 100%;
            flex-wrap: wrap;
          }
          .meeting-share-card {
            width: min(86vw, 292px);
          }
          .detail-side-column {
            height: auto;
          }
          .detail-left-column {
            overflow: visible;
          }
          .catalog-item {
            grid-template-columns: 1fr;
            gap: 8px;
          }
          .transcript-player--floating {
            bottom: 72px;
            max-width: calc(100vw - 24px);
          }
          .section-divider-text {
            white-space: normal;
            text-align: center;
          }
        }
      `}</style>

      {isOwner && (
        <Modal title="编辑会议信息" open={editVisible} onOk={handleUpdateBasic} onCancel={() => setEditVisible(false)} confirmLoading={actionLoading} width={600} forceRender>
          <Form form={form} layout="vertical" style={{ marginTop: 16 }}>
            <Form.Item name="title" label="会议标题" rules={[{ required: true }]}>
              <Input />
            </Form.Item>
            <Form.Item name="tags" label="业务标签">
              <Select mode="tags" placeholder="输入标签后回车" />
            </Form.Item>
            <Text type="warning">参会人员 ID 当前不支持在这里直接修改，如需调整请联系管理员。</Text>

          </Form>
        </Modal>
      )}

      <Drawer
        title="总结记录"
        width={680}
        onClose={() => {
          setSummaryRecordVisible(false);
          setIsEditingSummary(false);
        }}
        open={summaryRecordVisible}
        extra={
          meeting?.summaryContent ? (
            isEditingSummary ? (
              <Space>
                <Button onClick={() => setIsEditingSummary(false)}>取消</Button>
                <Button type="primary" onClick={handleSaveSummary} loading={actionLoading}>保存</Button>
              </Space>
            ) : (
              isOwner ? (
                <Button
                  type="primary"
                  ghost
                  icon={<EditOutlined />}
                  onClick={() => {
                    setSummaryDraft(meeting.summaryContent || '');
                    setIsEditingSummary(true);
                  }}
                >
                  编辑
                </Button>
              ) : null
            )
          ) : null
        }
        forceRender
      >
        <div ref={summaryPdfRef} className="markdown-shell">
          {meeting?.summaryContent ? (
            isEditingSummary ? (
              <Input.TextArea
                value={summaryDraft}
                onChange={(event) => setSummaryDraft(event.target.value)}
                style={{ minHeight: 480, resize: 'none' }}
              />
            ) : (
              <div className="markdown-body summary-markdown">
                <MarkdownSummary
                  content={meeting.summaryContent}
                  keywords={analysis.keywords}
                  onKeywordClick={handleKeywordClick}
                />
              </div>
            )
          ) : (
            <Empty description="暂无总结" />
          )}
        </div>
      </Drawer>

      {isOwner && (
        <Drawer
          title="重新生成 AI 总结"
          width={400}
          onClose={() => setSummaryVisible(false)}
          open={summaryVisible}
          extra={<Button type="primary" onClick={handleReSummary} loading={actionLoading}>开始总结</Button>}
          forceRender
        >
          <Form form={summaryForm} layout="vertical">
            <Form.Item name="summaryModelId" label="总结模型 (LLM)" rules={[{ required: true }]}>
              <Select placeholder="选择 LLM 模型">
                {llmModels.map((model) => (
                  <Option key={model.id} value={model.id}>
                    {model.modelName} {model.isDefault === 1 && <Tag color="gold" style={{ marginLeft: 4 }}>默认</Tag>}
                  </Option>
                ))}
              </Select>
            </Form.Item>
            <Form.Item name="promptId" label="提示词模板" rules={[{ required: true }]}>
              <Select placeholder="选择模板">
                {prompts.map((prompt) => (
                  <Option key={prompt.id} value={prompt.id}>{prompt.templateName}</Option>
                ))}
              </Select>
            </Form.Item>
            <Form.Item
              name="userPrompt"
              label="用户提示词"
              extra="可选，用于补充本次重新总结的关注重点、表达偏好或输出侧重点"
            >
              <Input.TextArea
                placeholder="例如：请重点突出结论、待办事项和风险点"
                autoSize={{ minRows: 4, maxRows: 8 }}
                showCount
                maxLength={1000}
              />
            </Form.Item>
            <Divider />
            <Text type="secondary">重新总结会基于当前语音转录全文重新生成纪要，原有总结内容将被覆盖。</Text>
          </Form>
        </Drawer>
      )}
    </div>
  );
};

export default MeetingDetail;