imeeting/frontend/src/pages/business/MeetingPreview.tsx

import { useEffect, useMemo, useRef, useState } from "react";
import { Alert, Button, Empty, Input, Result, Skeleton, Tabs, message } from "antd";
import { useParams, useSearchParams } from "react-router-dom";
import {
  AudioOutlined,
  CalendarOutlined,
  CaretRightFilled,
  ClockCircleOutlined,
  CopyOutlined,
  FileTextOutlined,
  LockOutlined,
  PauseOutlined,
  RobotOutlined,
  ShareAltOutlined,
  TeamOutlined,
  UserOutlined,
  DownOutlined,
  UpOutlined,
  LinkOutlined,
} from "@ant-design/icons";
import dayjs from "dayjs";
import ReactMarkdown from "react-markdown";
import {
  getMeetingPreviewAccess,
  getPublicMeetingPreview,
  resolveAudioMimeType,
  resolveMeetingPlaybackAudioUrl,
  type MeetingChapterVO,
  type MeetingTranscriptVO,
  type MeetingVO,
} from "../../api/business/meeting";
import { buildMeetingAnalysis } from "./meetingAnalysis";
import "./MeetingPreview.css";

type AnalysisTab = "chapters" | "speakers" | "actions" | "todos";
type PreviewPageTab = "summary" | "catalog" | "transcript";

const TEXT = {
  statusTranscribing: "转写中",
  statusSummarizing: "总结中",
  statusCompleted: "已完成",
  statusPending: "待处理",
  hintTranscribing: "会议内容仍在整理中，预览会持续补全。",
  hintSummarizing: "AI 正在生成会议总结，已完成内容会优先展示。",
  hintCompleted: "会议纪要、分析和转录内容已生成完成。",
  hintPending: "当前会议尚未生成完整内容，请稍后重试。",
  missingMeetingId: "未提供会议编号",
  loadFailed: "会议预览加载失败",
  noMeetingData: "未找到会议数据",
  previewLabel: "会议预览",
  untitledMeeting: "未命名会议",
  meetingTime: "会议时间",
  hostCreator: "主持/创建",
  participantsCount: "参会人数",
  tagsCount: "标签数量",
  notSet: "未设置",
  notFilled: "未填写",
  pageSummary: "AI 纪要",
  pageCatalog: "AI 目录",
  pageTranscript: "转录原文",
  copyLink: "复制链接",
  shareNow: "立即分享",
  shareCopied: "预览链接已复制",
  shareFallbackCopied: "当前设备不支持系统分享，已为你复制链接",
  shareFailed: "分享失败，请先复制链接",
  accessCheck: "访问校验",
  passwordRequired: "该会议需要访问密码",
  passwordHint: "请输入会议的 访问密码 后继续访问预览内容。",
  passwordPlaceholder: "请输入 访问密码",
  openPreview: "进入预览",
  invalidPassword: "访问密码错误",
  basicInfo: "基本信息",
  meetingOverview: "会议概况",
  creator: "创建人",
  host: "主持人",
  createdAt: "创建时间",
  audioStatus: "音频状态",
  participants: "人",
  tags: "会议标签",
  aiAnalysis: "AI 目录",
  analysis: "会议分析",
  previewExtra: "预览页仅读展示",
  audioPlaybackWarning: "音频保存失败，可能影响回放。",
  summaryOverview: "全文概要",
  summaryEmpty: "暂无概要内容",
  analysisChapters: "章节",
  analysisSpeakers: "发言人",
  analysisKeyPoints: "关键要点",
  analysisTodos: "待办事项",
  noChapterAnalysis: "暂无章节分析",
  noSpeakerAnalysis: "暂无发言人分析",
  noKeyPoints: "暂无关键要点",
  noTodos: "暂无待办事项",
  chapterFallback: "章节",
  speakerFallback: "发言人",
  speakerSummary: "发言概述",
  keyPointFallback: "要点",
  noChapterSummary: "暂无章节描述",
  noSpeakerSummary: "暂无发言总结",
  noKeyPointSummary: "暂无要点说明",
  summarySection: "会议纪要",
  fullSummary: "完整纪要",
  noSummary: "暂无会议纪要",
  transcriptSection: "会议转录",
  transcriptTitle: "逐段转录",
  noDuration: "暂无时长",
  audioUnavailable: "音频文件不可用，仅展示转录内容。",
  noTranscript: "暂无转录内容",
  unknownSpeaker: "未知发言人",
  disclaimer: "智能内容由用户会议内容 + AI 模型生成，我们不对内容准确性和完整性做任何保证，亦不代表我们的观点或态度",
  shareText: "我向你分享了一个会议预览链接",
  audioSaved: "已保存",
  audioSaveFailed: "保存失败",
  audioUploaded: "已上传",
  audioNotSaved: "未保存",
  linkToTranscript: "关联原文",
  noCatalog: "暂无 AI 目录",
};

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

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

const STATUS_META: Record<number, { label: string; className: string; hint: string }> = {
  1: { label: TEXT.statusTranscribing, className: "is-processing", hint: TEXT.hintTranscribing },
  2: { label: TEXT.statusSummarizing, className: "is-processing", hint: TEXT.hintSummarizing },
  3: { label: TEXT.statusCompleted, className: "is-complete", hint: TEXT.hintCompleted },
};

function formatDurationRange(startTime?: number, endTime?: number) {
  const format = (milliseconds?: number) => {
    const safeMs = Math.max(0, milliseconds || 0);
    const totalSeconds = Math.floor(safeMs / 1000);
    const minutes = Math.floor(totalSeconds / 60);
    const seconds = totalSeconds % 60;
    return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
  };

  return `${format(startTime)} - ${format(endTime)}`;
}

function splitDisplayItems(value?: string) {
  return (value || "")
    .split(",")
    .map((item) => item.trim())
    .filter(Boolean);
}

function transcriptColorSeed(speakerKey: string) {
  const palette = ["#315f8b", "#b86432", "#557a46", "#6d4fa7", "#a33f57", "#0f766e"];
  const score = Array.from(speakerKey).reduce((sum, char) => sum + char.charCodeAt(0), 0);
  return palette[score % palette.length];
}

async function copyText(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);
}

export default function MeetingPreview() {
  const { id } = useParams();
  const [searchParams] = useSearchParams();
  const audioRef = useRef<HTMLAudioElement | null>(null);
  const audioPlaybackErrorShownRef = useRef<string | null>(null);
  const transcriptItemRefs = useRef<Record<number, HTMLDivElement | null>>({});
  const [meeting, setMeeting] = useState<MeetingVO | null>(null);
  const [transcripts, setTranscripts] = useState<MeetingTranscriptVO[]>([]);
  const [meetingChapters, setMeetingChapters] = useState<MeetingChapterVO[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [analysisTab, setAnalysisTab] = useState<AnalysisTab>("speakers");
  const [pageTab, setPageTab] = useState<PreviewPageTab>("summary");
  const [activeTranscriptId, setActiveTranscriptId] = useState<number | null>(null);
  const [passwordRequired, setPasswordRequired] = useState(false);
  const [passwordVerified, setPasswordVerified] = useState(false);
  const [accessPassword, setAccessPassword] = useState("");
  const [passwordError, setPasswordError] = useState("");
  const [audioPlaying, setAudioPlaying] = useState(false);
  const [audioCurrentTime, setAudioCurrentTime] = useState(0);
  const [audioDuration, setAudioDuration] = useState(0);
  const [audioPlaybackRate, setAudioPlaybackRate] = useState(1);
  const [isMetricsExpanded, setIsMetricsExpanded] = useState(false);
  const [linkedTranscriptIds, setLinkedTranscriptIds] = useState<number[]>([]);
  const [linkedChapterKey, setLinkedChapterKey] = useState<string | null>(null);
  const [isMobile, setIsMobile] = useState(() =>
    typeof window !== "undefined" ? window.matchMedia("(max-width: 767px)").matches : false,
  );
  const presetAccessPassword = useMemo(() => (searchParams.get("accessPassword") || "").trim(), [searchParams]);

  useEffect(() => {
    let mounted = true;

    const load = async () => {
      if (!id) {
        setError(TEXT.missingMeetingId);
        setLoading(false);
        return;
      }

      setLoading(true);
      setError("");
        setMeeting(null);
        setTranscripts([]);
        setMeetingChapters([]);
        setPasswordRequired(false);
        setPasswordVerified(false);
        setAccessPassword(presetAccessPassword);
        setPasswordError("");

        try {
          const meetingId = Number(id);
          const accessRes = await getMeetingPreviewAccess(meetingId);
        if (!mounted) {
          return;
        }

          const requiresPassword = !!accessRes.data.data.passwordRequired;
          setPasswordRequired(requiresPassword);
          if (requiresPassword) {
            if (!presetAccessPassword) {
              setLoading(false);
              return;
            }
            try {
              const previewRes = await getPublicMeetingPreview(meetingId, presetAccessPassword);
              if (!mounted) {
                return;
              }
              setMeeting(previewRes.data.data.meeting);
              setTranscripts(previewRes.data.data.transcripts || []);
              setMeetingChapters(previewRes.data.data.chapters || []);
              setPasswordVerified(true);
              return;
            } catch (requestError: any) {
              if (!mounted) {
                return;
              }
              setPasswordError(requestError?.response?.data?.msg || requestError?.msg || TEXT.invalidPassword);
              setPasswordVerified(false);
              setLoading(false);
              return;
            }
          }

          const previewRes = await getPublicMeetingPreview(meetingId);
        if (!mounted) {
          return;
        }

        setMeeting(previewRes.data.data.meeting);
        setTranscripts(previewRes.data.data.transcripts || []);
        setMeetingChapters(previewRes.data.data.chapters || []);
        setPasswordVerified(true);
      } catch (requestError: any) {
        if (!mounted) {
          return;
        }

        setError(requestError?.response?.data?.msg || requestError?.msg || TEXT.loadFailed);
      } finally {
        if (mounted) {
          setLoading(false);
        }
      }
    };

    load();

    return () => {
      mounted = false;
    };
  }, [id, presetAccessPassword]);

  useEffect(() => {
    if (typeof window === "undefined") {
      return;
    }

    const mediaQuery = window.matchMedia("(max-width: 767px)");
    const handleChange = (event: MediaQueryListEvent) => {
      setIsMobile(event.matches);
    };

    setIsMobile(mediaQuery.matches);
    mediaQuery.addEventListener("change", handleChange);
    return () => {
      mediaQuery.removeEventListener("change", handleChange);
    };
  }, []);

  const analysis = useMemo(
    () => buildMeetingAnalysis(meeting?.analysis, meeting?.summaryContent, meeting?.tags || ""),
    [meeting?.analysis, meeting?.summaryContent, meeting?.tags],
  );

  const participants = useMemo(() => splitDisplayItems(meeting?.participants), [meeting?.participants]);
  const transcriptSpeakers = useMemo(() => {
    const speakers = transcripts
      .map((item) => item.speakerName || item.speakerLabel || item.speakerId || "")
      .map((item) => item.trim())
      .filter(Boolean);
    return Array.from(new Set(speakers));
  }, [transcripts]);
  const tags = useMemo(() => splitDisplayItems(meeting?.tags), [meeting?.tags]);
  const keywords = useMemo(() => analysis.keywords || [], [analysis.keywords]);
  const playbackAudioUrl = useMemo(() => resolveMeetingPlaybackAudioUrl(meeting), [meeting]);
  const statusMeta = STATUS_META[meeting?.status || 0] || {
    label: TEXT.statusPending,
    className: "is-warning",
    hint: TEXT.hintPending,
  };
  const shareUrl = typeof window !== "undefined" ? window.location.href : "";
  const participantCountValue =
    isMobile && transcriptSpeakers.length > 0 ? transcriptSpeakers.length : participants.length;

  const meetingDuration = useMemo(() => {
    if (transcripts.length > 0) {
      const last = transcripts[transcripts.length - 1];
      return last.endTime || 0;
    }
    return 0;
  }, [transcripts]);

  const catalogChapterLinks = useMemo<ChapterTranscriptLink[]>(() => {
    const transcriptIdToIndex = new Map(transcripts.map((item, index) => [item.id, index]));
    const sourceChapters: MeetingChapterVO[] = 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]);

  useEffect(() => {
    if (!activeTranscriptId) {
      return;
    }

    const target = transcriptItemRefs.current[activeTranscriptId];
    if (!target) {
      return;
    }

    // 使用 center 模式确保当前说话段落始终位于视口中央，避免被底部的浮动控件遮挡
    target.scrollIntoView({ behavior: "smooth", block: "center" });
  }, [activeTranscriptId]);

  const handleTranscriptSeek = (item: MeetingTranscriptVO) => {
    if (!audioRef.current) {
      return;
    }

    audioRef.current.currentTime = Math.max(0, (item.startTime || 0) / 1000);
    audioRef.current.play().catch(() => {});
  };

  const handleLocateChapterTranscript = (index: number) => {
    const link = catalogChapterLinks[index];
    if (link && link.firstTranscriptId) {
      setPageTab("transcript");
      setLinkedTranscriptIds(link.transcriptIds);
      setLinkedChapterKey(link.key);
      setActiveTranscriptId(link.firstTranscriptId);

      // 自动跳转并播放音频
      if (audioRef.current && link.firstTranscriptStartTime !== null) {
        audioRef.current.currentTime = Math.max(0, link.firstTranscriptStartTime / 1000);
        audioRef.current.play().catch(() => {
          // 部分浏览器（尤其是移动端）可能会拦截非直接交互触发的播放
          // 但由于这是由用户点击目录项触发的，通常会被允许
        });
      }
    }
  };

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

  const handleAudioProgressChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!audioRef.current) return;
    const time = parseFloat(e.target.value);
    audioRef.current.currentTime = time;
    setAudioCurrentTime(time);
  };

  const cyclePlaybackRate = () => {
    if (!audioRef.current) return;
    const nextRate = audioPlaybackRate === 1 ? 1.5 : audioPlaybackRate === 1.5 ? 2 : 1;
    audioRef.current.playbackRate = nextRate;
    setAudioPlaybackRate(nextRate);
  };

  const formatPlayerTime = (seconds: number) => {
    if (!seconds || isNaN(seconds)) return '00:00';
    const m = Math.floor(seconds / 60);
    const s = Math.floor(seconds % 60);
    return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
  };

  const handleAudioTimeUpdate = () => {
    if (!audioRef.current) return;
    const currentSeconds = audioRef.current.currentTime;
    setAudioCurrentTime(currentSeconds);
    
    // Also update duration if it's available now
    if (audioRef.current.duration && audioDuration !== audioRef.current.duration) {
      setAudioDuration(audioRef.current.duration);
    }

    if (transcripts.length === 0) return;

    const currentMs = currentSeconds * 1000;
    const currentItem = transcripts.find(
      (item) => currentMs >= (item.startTime || 0) && currentMs <= (item.endTime || 0),
    );

    setActiveTranscriptId(currentItem?.id || null);
  };

  const handleAudioEnded = () => {
    setAudioPlaying(false);
  };

  const handleAudioPlay = () => setAudioPlaying(true);
  const handleAudioPause = () => setAudioPlaying(false);
  const handleAudioLoadedMetadata = () => {
    if (audioRef.current) {
      setAudioDuration(audioRef.current.duration);
    }
  };

  const handleAudioError = () => {
    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，或下载到本地播放。"
        : TEXT.audioUnavailable,
    );
    audioPlaybackErrorShownRef.current = currentAudioUrl;
    setAudioPlaying(false);
  };

  const handlePasswordSubmit = async () => {
    if (!id) {
      return;
    }

    setLoading(true);
    setPasswordError("");
    try {
      const previewRes = await getPublicMeetingPreview(Number(id), accessPassword.trim());
      setMeeting(previewRes.data.data.meeting);
      setTranscripts(previewRes.data.data.transcripts || []);
      setMeetingChapters(previewRes.data.data.chapters || []);
      setPasswordVerified(true);
    } catch (requestError: any) {
      setPasswordError(requestError?.response?.data?.msg || requestError?.msg || TEXT.invalidPassword);
    } finally {
      setLoading(false);
    }
  };

  const handleCopyLink = async () => {
    try {
      await copyText(shareUrl);
      message.success(TEXT.shareCopied);
    } catch {
      message.error(TEXT.shareFailed);
    }
  };

  const handleShareNow = async () => {
    try {
      if (navigator.share) {
        await navigator.share({
          title: meeting?.title || TEXT.previewLabel,
          text: TEXT.shareText,
          url: shareUrl,
        });
        return;
      }

      await copyText(shareUrl);
      message.success(TEXT.shareFallbackCopied);
    } catch {
      message.error(TEXT.shareFailed);
    }
  };

  if (loading && (!passwordRequired || passwordVerified)) {
    return (
      <div className="meeting-preview-page">
        <div className="meeting-preview-shell meeting-preview-loading">
          <div className="meeting-preview-card meeting-preview-hero">
            <Skeleton active paragraph={{ rows: 4 }} />
          </div>
          <div className="meeting-preview-card meeting-preview-section">
            <Skeleton active paragraph={{ rows: 8 }} />
          </div>
          <div className="meeting-preview-card meeting-preview-section">
            <Skeleton active paragraph={{ rows: 10 }} />
          </div>
        </div>
      </div>
    );
  }

  if (passwordRequired && !passwordVerified) {
    return (
      <div className="meeting-preview-page is-password-gate">
        <div className="password-gate-background">
          <div className="bg-blob bg-blob-1" />
          <div className="bg-blob bg-blob-2" />
          <div className="bg-blob bg-blob-3" />
        </div>
        
        <div className="meeting-preview-shell">
          <div className="meeting-preview-password-card">
            <div className="password-card-header">
              <div className="password-icon-wrapper">
                <LockOutlined />
              </div>
              <h1 className="password-card-title">{TEXT.passwordRequired}</h1>
              <p className="password-card-subtitle">{TEXT.passwordHint}</p>
            </div>

            <div className="password-card-form">
              <div className="password-input-wrapper">
                <Input.Password
                  size="large"
                  value={accessPassword}
                  placeholder={TEXT.passwordPlaceholder}
                  onChange={(event) => setAccessPassword(event.target.value)}
                  onPressEnter={handlePasswordSubmit}
                  prefix={<LockOutlined style={{ color: "var(--text-secondary)" }} />}
                  className="modern-password-input"
                />
              </div>
              <Button 
                type="primary" 
                size="large"
                onClick={handlePasswordSubmit} 
                loading={loading} 
                disabled={!accessPassword.trim()}
                className="password-submit-btn"
                block
              >
                {TEXT.openPreview}
              </Button>
            </div>

            {passwordError && (
              <div className="password-error-message">
                <Alert type="error" showIcon message={passwordError} />
              </div>
            )}
          </div>
        </div>
        
        <div className="password-gate-footer">
          <div className="footer-disclaimer">
            <RobotOutlined />
            <span>Secure Access • Powered by iMeeting AI</span>
          </div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="meeting-preview-page">
        <div className="meeting-preview-shell meeting-preview-empty">
          <div className="meeting-preview-card meeting-preview-section">
            <Result status="error" title={TEXT.loadFailed} subTitle={error} />
          </div>
        </div>
      </div>
    );
  }

  if (!meeting) {
    return (
      <div className="meeting-preview-page">
        <div className="meeting-preview-shell meeting-preview-empty">
          <div className="meeting-preview-card meeting-preview-section">
            <Empty description={TEXT.noMeetingData} />
          </div>
        </div>
      </div>
    );
  }

  const summaryTabContent = (
    <div className="meeting-preview-tab-panel">
      <section className="meeting-preview-card meeting-preview-section">
        <div className="meeting-preview-summary-box">
          <div className="meeting-preview-summary-section">
            <div className="meeting-preview-summary-section-title">关键词</div>
            <div className="meeting-preview-record-tags">
              {keywords.length ? (
                keywords.map((item) => (
                  <div key={item} className="meeting-preview-record-tag">
                    <span>#{item}</span>
                  </div>
                ))
              ) : (
                <span className="meeting-preview-keywords-empty">暂无关键词</span>
              )}
            </div>
          </div>
        </div>

        <div className="meeting-preview-markdown">
          {meeting.summaryContent ? (
            <ReactMarkdown>{meeting.summaryContent}</ReactMarkdown>
          ) : (
            <Empty description={TEXT.noSummary} />
          )}
        </div>
      </section>
    </div>
  );

  const catalogTabContent = (
    <div className="meeting-preview-tab-panel">
      <section className="meeting-preview-card meeting-preview-section">
        <div className="meeting-preview-section-header">
          <div>
            {/*<div className="meeting-preview-section-kicker">*/}
            {/*  <RobotOutlined />*/}
            {/*  {TEXT.aiAnalysis}*/}
            {/*</div>*/}
            <h2 className="meeting-preview-section-title">{TEXT.pageCatalog}</h2>
          </div>
        </div>

        <div className="meeting-preview-catalog-list">
          {catalogChapterLinks.length ? (
            catalogChapterLinks.map((chapter, index) => (
              <div
                key={chapter.key}
                className={`meeting-preview-catalog-item-container ${linkedChapterKey === chapter.key ? 'active' : ''}`}
              >
                <div className="meeting-preview-catalog-timeline-axis">
                  <div className="meeting-preview-catalog-timeline-dot" />
                  <div className="meeting-preview-catalog-timeline-line" />
                </div>
                <div 
                  className="meeting-preview-catalog-item-card"
                  onClick={() => handleLocateChapterTranscript(index)}
                >
                  <div className="meeting-preview-catalog-item-time">{chapter.timeLabel}</div>
                  <div className="meeting-preview-catalog-item-title-row">
                    <div className="meeting-preview-catalog-item-title">{chapter.title}</div>
                    <button
                      type="button"
                      className="meeting-preview-catalog-item-link"
                      onClick={(e) => {
                        e.stopPropagation();
                        handleLocateChapterTranscript(index);
                      }}
                    >
                      <LinkOutlined /> {TEXT.linkToTranscript}
                    </button>
                  </div>
                </div>
              </div>
            ))
          ) : (
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={TEXT.noCatalog} />
          )}
        </div>
      </section>
    </div>
  );

  const transcriptTabContent = (
    <div className="meeting-preview-tab-panel">
      <section className="meeting-preview-card meeting-preview-section">
        <div className="meeting-preview-section-header">
          <div>
            {/*<div className="meeting-preview-section-kicker">*/}
            {/*  <AudioOutlined />*/}
            {/*  {TEXT.transcriptSection}*/}
            {/*</div>*/}
            <h2 className="meeting-preview-section-title">{TEXT.transcriptTitle}</h2>
          </div>
          <div className="meeting-preview-section-extra">
            <ClockCircleOutlined style={{ marginRight: 6 }} />
            {meetingDuration > 0 ? formatDurationRange(0, meetingDuration) : TEXT.noDuration}
          </div>
        </div>

        {meeting.audioSaveStatus === "FAILED" ? (
          <Alert
            className="meeting-preview-alert"
            type="warning"
            showIcon
            message={meeting.audioSaveMessage || TEXT.audioUnavailable}
          />
        ) : null}

        <div className="meeting-preview-transcript-list">
          {transcripts.length > 0 ? (
            transcripts.map((item) => {
              const speakerKey = item.speakerName || item.speakerLabel || item.speakerId || "speaker";
              const isLinked = linkedTranscriptIds.includes(item.id);
              const isActive = activeTranscriptId === item.id;
              
              return (
                <div
                  key={item.id}
                  ref={(node) => {
                    transcriptItemRefs.current[item.id] = node;
                  }}
                  className={`meeting-preview-transcript-item ${isActive ? "is-active" : ""} ${isLinked ? "is-linked" : ""}`}
                  onClick={() => {
                    handleTranscriptSeek(item);
                    setLinkedTranscriptIds([]); // Clear linked highlight on manual seek
                    setLinkedChapterKey(null);
                  }}
                >
                  <div
                    className="meeting-preview-transcript-avatar"
                    style={{ backgroundColor: transcriptColorSeed(speakerKey) }}
                  >
                    {(speakerKey || "S").slice(0, 1)}
                  </div>
                  <div className="meeting-preview-transcript-content">
                    <div className="meeting-preview-transcript-meta">
                      <span className="meeting-preview-transcript-speaker">{speakerKey}</span>
                      <span className="meeting-preview-transcript-time">
                        {formatDurationRange(item.startTime, item.endTime)}
                      </span>
                    </div>
                    <div className="meeting-preview-transcript-text">
                      {item.content || TEXT.noTranscript}
                    </div>
                  </div>
                </div>
              );
            })
          ) : (
            <Empty description={TEXT.noTranscript} />
          )}
        </div>
      </section>
    </div>
  );

  const formatTotalDuration = (ms: number) => {
    const totalSeconds = Math.floor(ms / 1000);
    const hours = Math.floor(totalSeconds / 3600);
    const minutes = Math.floor((totalSeconds % 3600) / 60);
    const seconds = totalSeconds % 60;

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

  return (
    <div className={`meeting-preview-page ${isMobile ? "is-mobile" : "is-desktop"}`}>
      <div className="meeting-preview-container">
        <div className="meeting-preview-shell">
          {/* Header Title Section */}
          <div className="meeting-preview-top-hero">
            <div className="meeting-preview-hero-logo">
              <RobotOutlined />
            </div>
            <div className="meeting-preview-hero-content">
              <h1 className="meeting-preview-hero-title">{meeting.title || TEXT.untitledMeeting}</h1>
              <div className="meeting-preview-hero-meta">
                <span className={`meeting-preview-status-tag ${statusMeta.className}`}>
                  {statusMeta.label}
                </span>
                {/*<span className="meeting-preview-hero-id">ID: {meeting.id}</span>*/}
              </div>
            </div>
          </div>

          {/* Collapsible Basic Info Section */}
          <div className="meeting-preview-collapsible-section">
            <div 
              className="meeting-preview-collapsible-trigger"
              onClick={() => setIsMetricsExpanded(!isMetricsExpanded)}
            >
              <div className="trigger-left">
                <FileTextOutlined />
                <span>{TEXT.basicInfo}</span>
              </div>
              <div className="trigger-right">
                {isMetricsExpanded ? <UpOutlined /> : <DownOutlined />}
              </div>
            </div>
            
            <div className={`meeting-preview-collapsible-content ${isMetricsExpanded ? 'is-expanded' : ''}`}>
              <div className="meeting-preview-metrics-grid">
                <div className="metric-item">
                  <div className="metric-label">{TEXT.meetingTime}</div>
                  <div className="metric-value">
                    <CalendarOutlined style={{ marginRight: 8, color: 'var(--primary-blue)' }} />
                    {meeting.meetingTime ? dayjs(meeting.meetingTime).format("YYYY-MM-DD HH:mm") : TEXT.notSet}
                  </div>
                </div>
                <div className="metric-item">
                  <div className="metric-label">{TEXT.hostCreator}</div>
                  <div className="metric-value">
                    <UserOutlined style={{ marginRight: 8, color: 'var(--primary-blue)' }} />
                    {meeting.creatorName || TEXT.notSet}
                  </div>
                </div>
                <div className="metric-item">
                  <div className="metric-label">{TEXT.participantsCount}</div>
                  <div className="metric-value">
                    <TeamOutlined style={{ marginRight: 8, color: 'var(--primary-blue)' }} />
                    {participantCountValue} {TEXT.participants}
                  </div>
                </div>
                <div className="metric-item">
                  <div className="metric-label">会议时长</div>
                  <div className="metric-value">
                    <ClockCircleOutlined style={{ marginRight: 8, color: 'var(--primary-blue)' }} />
                    {meetingDuration > 0 ? formatTotalDuration(meetingDuration) : TEXT.notSet}
                  </div>
                </div>
                {tags.length > 0 && (
                  <div className="metric-item metric-item-full">
                    <div className="metric-label">{TEXT.tags}</div>
                    <div className="metric-tags">
                      {tags.map(tag => (
                        <span key={tag} className="metric-tag">#{tag}</span>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>

          {/* Sharing Buttons Bar */}
          <div className="meeting-preview-share-bar">
            <Button 
              type="primary" 
              size="large"
              icon={<ShareAltOutlined />} 
              onClick={handleShareNow}
              className="share-btn-primary"
            >
              {TEXT.shareNow}
            </Button>
            <Button 
              size="large"
              icon={<CopyOutlined />} 
              onClick={handleCopyLink}
              className="share-btn-ghost"
            >
              {TEXT.copyLink}
            </Button>
          </div>

          <div className="meeting-preview-layout-full">
            {/* Main Content Area */}
            <main className="meeting-preview-main">
              <div className="meeting-preview-content-card">
                <div className="meeting-preview-tabs-container">
                  <Tabs
                    activeKey={pageTab}
                    onChange={(key) => setPageTab(key as PreviewPageTab)}
                    items={[
                      { key: "summary", label: TEXT.pageSummary },
                      { key: "catalog", label: TEXT.pageCatalog },
                      { key: "transcript", label: TEXT.pageTranscript },
                    ]}
                  />
                </div>

                <div className="meeting-preview-tab-content">
                  {pageTab === "summary" ? summaryTabContent : null}
                  {pageTab === "catalog" ? catalogTabContent : null}
                  {pageTab === "transcript" ? transcriptTabContent : null}
                </div>
              </div>
            </main>
          </div>

          <div className="meeting-preview-footer">
            <div className="meeting-preview-disclaimer">
              <RobotOutlined />
              <span>{TEXT.disclaimer}</span>
            </div>
          </div>
        </div>
      </div>

      {/* Floating Audio Player - Permanent mount, visibility controlled */}
      {playbackAudioUrl && (
        <div 
          className="meeting-preview-audio-player-inline"
          style={{ display: pageTab === "transcript" ? "flex" : "none" }}
        >
          <audio
            ref={audioRef}
            onTimeUpdate={handleAudioTimeUpdate}
            onPlay={handleAudioPlay}
            onPause={handleAudioPause}
            onEnded={handleAudioEnded}
            onLoadedMetadata={handleAudioLoadedMetadata}
            onError={handleAudioError}
            style={{ display: "none" }}
            preload="auto"
          >
            <source src={playbackAudioUrl} type={resolveAudioMimeType(playbackAudioUrl)} />
          </audio>

          <div className="audio-player-content">
            <button type="button" className="audio-play-btn" onClick={toggleAudioPlayback}>
              {audioPlaying ? <PauseOutlined /> : <CaretRightFilled />}
            </button>
            <div className="audio-progress-container">
              <div className="audio-time">{formatPlayerTime(audioCurrentTime)}</div>
              <input
                className="audio-range"
                type="range"
                min={0}
                max={audioDuration || 0}
                step={0.1}
                value={Math.min(audioCurrentTime, audioDuration || 0)}
                onChange={handleAudioProgressChange}
                style={{ backgroundSize: `${audioDuration ? (audioCurrentTime / audioDuration) * 100 : 0}% 100%` }}
              />
              <div className="audio-time">{formatPlayerTime(audioDuration)}</div>
            </div>
            <button type="button" className="audio-speed-btn" onClick={cyclePlaybackRate}>
              {audioPlaybackRate}x
            </button>
          </div>
        </div>
      )}
    </div>
  );
}