import { useAuth } from "@/_core/hooks/useAuth";
import { trpc } from "@/lib/trpc";
import {
  createMediaMarker,
  createMediaSession,
  finalizeMediaSession,
  formatRecordingTime,
  getMediaSession,
  pickBitrate,
  pickRecorderMimeType,
  signalMediaSession,
  type MediaMarker,
  type MediaSession,
  uploadMediaSegment,
} from "@/lib/media";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Progress } from "@/components/ui/progress";
import { Slider } from "@/components/ui/slider";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { useBackgroundTask } from "@/hooks/useBackgroundTask";
import { toast } from "sonner";
import { applyTrackZoom, getCameraVideoConstraints, readTrackZoomState } from "@/lib/camera";
import {
  Activity,
  Camera,
  Circle,
  CloudUpload,
  Download,
  FlipHorizontal,
  Loader2,
  Maximize2,
  Minus,
  Minimize2,
  MonitorUp,
  Plus,
  Scissors,
  ShieldAlert,
  Smartphone,
  Sparkles,
  ListTodo,
  Video,
  VideoOff,
  Wifi,
  WifiOff,
  Zap,
} from "lucide-react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";

type RecorderMode =
  | "idle"
  | "preparing"
  | "recording"
  | "reconnecting"
  | "finalizing"
  | "archived";

type PendingSegment = {
  sequence: number;
  durationMs: number;
  blob: Blob;
};

const SEGMENT_LENGTH_MS = 60_000;
const MOTION_SAMPLE_MS = 1_500;
const MOTION_THRESHOLD = 18;
const MOTION_COOLDOWN_MS = 8_000;

const QUALITY_PRESETS = {
  economy: {
    label: "节省流量",
    subtitle: "1.0 Mbps · 适合移动网络",
    description: "优先降低上传流量，保留基础训练画面",
  },
  balanced: {
    label: "均衡模式",
    subtitle: "1.4-1.9 Mbps · 推荐",
    description: "Chrome 录制与推流的默认平衡配置",
  },
  clarity: {
    label: "清晰优先",
    subtitle: "2.5 Mbps · Wi-Fi 推荐",
    description: "保留更多动作细节，适合回放和分析",
  },
} as const;

function waitForIceGathering(peer: RTCPeerConnection) {
  if (peer.iceGatheringState === "complete") {
    return Promise.resolve();
  }

  return new Promise<void>((resolve) => {
    const handleStateChange = () => {
      if (peer.iceGatheringState === "complete") {
        peer.removeEventListener("icegatheringstatechange", handleStateChange);
        resolve();
      }
    };

    peer.addEventListener("icegatheringstatechange", handleStateChange);
  });
}

function isMobileDevice() {
  return (
    /Android|iPhone|iPad|iPod/i.test(navigator.userAgent) ||
    window.matchMedia("(max-width: 768px)").matches
  );
}

function getArchiveProgress(session: MediaSession | null) {
  if (!session) return 0;
  switch (session.archiveStatus) {
    case "queued":
      return 45;
    case "processing":
      return 78;
    case "completed":
      return 100;
    case "failed":
      return 100;
    default:
      return 20;
  }
}

function getArchivePhaseLabel(mode: RecorderMode, session: MediaSession | null, taskProgress?: number | null) {
  if (mode === "finalizing" && !taskProgress) {
    return "正在提交归档任务";
  }
  if (session?.archiveStatus === "completed") {
    return "回放已生成";
  }
  if (session?.archiveStatus === "failed") {
    return "归档失败";
  }
  if (session?.archiveStatus === "processing") {
    return "正在生成回放";
  }
  if (session?.archiveStatus === "queued") {
    return "正在合并分段";
  }
  return "等待归档";
}

function formatFileSize(bytes: number) {
  if (!bytes) return "0 MB";
  return `${(bytes / 1024 / 1024).toFixed(bytes > 20 * 1024 * 1024 ? 1 : 2)} MB`;
}

export default function Recorder() {
  const { user } = useAuth();
  const utils = trpc.useUtils();
  const finalizeTaskMutation = trpc.task.createMediaFinalize.useMutation({
    onSuccess: (data) => {
      setArchiveTaskId(data.taskId);
      toast.success("录制归档任务已提交");
    },
    onError: (error) => {
      toast.error(`录制归档任务提交失败: ${error.message}`);
    },
  });

  const liveVideoRef = useRef<HTMLVideoElement>(null);
  const playbackVideoRef = useRef<HTMLVideoElement>(null);
  const motionCanvasRef = useRef<HTMLCanvasElement>(null);
  const streamRef = useRef<MediaStream | null>(null);
  const recorderRef = useRef<MediaRecorder | null>(null);
  const peerRef = useRef<RTCPeerConnection | null>(null);
  const currentSegmentStartedAtRef = useRef<number>(0);
  const recordingStartedAtRef = useRef<number>(0);
  const segmentSequenceRef = useRef(0);
  const motionFrameRef = useRef<Uint8ClampedArray | null>(null);
  const lastMotionMarkerAtRef = useRef(0);
  const pendingUploadsRef = useRef<PendingSegment[]>([]);
  const uploadInFlightRef = useRef(false);
  const currentSessionRef = useRef<MediaSession | null>(null);
  const segmentTickerRef = useRef<ReturnType<typeof setInterval> | null>(null);
  const timerTickerRef = useRef<ReturnType<typeof setInterval> | null>(null);
  const motionTickerRef = useRef<ReturnType<typeof setInterval> | null>(null);
  const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const modeRef = useRef<RecorderMode>("idle");
  const reconnectAttemptsRef = useRef(0);
  const facingModeRef = useRef<"user" | "environment">("environment");
  const suppressTrackEndedRef = useRef(false);
  const zoomTargetRef = useRef(1);

  const [mode, setMode] = useState<RecorderMode>("idle");
  const [qualityPreset, setQualityPreset] = useState<keyof typeof QUALITY_PRESETS>("economy");
  const [facingMode, setFacingMode] = useState<"user" | "environment">("environment");
  const [cameraActive, setCameraActive] = useState(false);
  const [hasMultipleCameras, setHasMultipleCameras] = useState(false);
  const [durationMs, setDurationMs] = useState(0);
  const [sessionMode, setSessionMode] = useState<"practice" | "pk">("practice");
  const [isOnline, setIsOnline] = useState(() => navigator.onLine);
  const [reconnectAttempts, setReconnectAttempts] = useState(0);
  const [queuedSegments, setQueuedSegments] = useState(0);
  const [queuedBytes, setQueuedBytes] = useState(0);
  const [uploadedSegments, setUploadedSegments] = useState(0);
  const [uploadBytes, setUploadBytes] = useState(0);
  const [cameraError, setCameraError] = useState("");
  const [title, setTitle] = useState(() => `训练录制 ${new Date().toLocaleString("zh-CN", { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" })}`);
  const [mediaSession, setMediaSession] = useState<MediaSession | null>(null);
  const [markers, setMarkers] = useState<MediaMarker[]>([]);
  const [connectionState, setConnectionState] = useState<RTCPeerConnectionState>("new");
  const [immersivePreview, setImmersivePreview] = useState(false);
  const [archiveTaskId, setArchiveTaskId] = useState<string | null>(null);
  const [zoomState, setZoomState] = useState(() => readTrackZoomState(null));

  const mobile = useMemo(() => isMobileDevice(), []);
  const mimeType = useMemo(() => pickRecorderMimeType(), []);
  const currentPlaybackUrl = mediaSession?.playback.mp4Url || mediaSession?.playback.webmUrl || "";
  const archiveTaskQuery = useBackgroundTask(archiveTaskId);
  const archiveProgress = archiveTaskQuery.data?.progress ?? getArchiveProgress(mediaSession);
  const archivePhaseLabel = getArchivePhaseLabel(mode, mediaSession, archiveTaskQuery.data?.progress);
  const totalUploadBytes = uploadBytes + queuedBytes;
  const uploadStillDraining = mode === "finalizing" && (queuedBytes > 0 || queuedSegments > 0 || finalizeTaskMutation.isPending);
  const archiveRunning =
    archiveTaskQuery.data?.status === "queued" ||
    archiveTaskQuery.data?.status === "running" ||
    mediaSession?.archiveStatus === "queued" ||
    mediaSession?.archiveStatus === "processing";
  const canLeaveRecorderPage = !uploadStillDraining && (archiveRunning || mode === "archived");

  const syncSessionState = useCallback((session: MediaSession | null) => {
    currentSessionRef.current = session;
    setMediaSession(session);
    setMarkers(session?.markers ?? []);
    setUploadedSegments(session?.uploadedSegments ?? 0);
    setUploadBytes(session?.uploadedBytes ?? 0);
  }, []);

  const syncQueuedUploadState = useCallback(() => {
    setQueuedSegments(pendingUploadsRef.current.length);
    setQueuedBytes(pendingUploadsRef.current.reduce((total, item) => total + item.blob.size, 0));
  }, []);

  useEffect(() => {
    modeRef.current = mode;
  }, [mode]);

  useEffect(() => {
    reconnectAttemptsRef.current = reconnectAttempts;
  }, [reconnectAttempts]);

  useEffect(() => {
    facingModeRef.current = facingMode;
  }, [facingMode]);

  useEffect(() => {
    if (archiveTaskQuery.data?.status === "succeeded") {
      void (async () => {
        if (currentSessionRef.current?.id) {
          const response = await getMediaSession(currentSessionRef.current.id);
          syncSessionState(response.session);
        }
        setMode("archived");
        utils.video.list.invalidate();
        toast.success("回放文件已归档完成");
        setArchiveTaskId(null);
      })();
    } else if (archiveTaskQuery.data?.status === "failed") {
      toast.error(`录制归档失败: ${archiveTaskQuery.data.error || "未知错误"}`);
      setMode("idle");
      setArchiveTaskId(null);
    }
  }, [archiveTaskQuery.data, syncSessionState, utils.video.list]);

  const stopTickers = useCallback(() => {
    if (segmentTickerRef.current) clearInterval(segmentTickerRef.current);
    if (timerTickerRef.current) clearInterval(timerTickerRef.current);
    if (motionTickerRef.current) clearInterval(motionTickerRef.current);
    segmentTickerRef.current = null;
    timerTickerRef.current = null;
    motionTickerRef.current = null;
  }, []);

  const closePeer = useCallback(() => {
    if (peerRef.current) {
      peerRef.current.onconnectionstatechange = null;
      peerRef.current.close();
      peerRef.current = null;
    }
    setConnectionState("closed");
  }, []);

  const stopCamera = useCallback(() => {
    suppressTrackEndedRef.current = true;
    if (streamRef.current) {
      streamRef.current.getTracks().forEach((track) => track.stop());
      streamRef.current = null;
    }
    if (liveVideoRef.current) {
      liveVideoRef.current.srcObject = null;
    }
    setZoomState(readTrackZoomState(null));
    setCameraActive(false);
  }, []);

  const syncZoomState = useCallback(async (preferredZoom?: number, providedTrack?: MediaStreamTrack | null) => {
    const track = providedTrack || streamRef.current?.getVideoTracks()[0] || null;
    if (!track) {
      zoomTargetRef.current = 1;
      setZoomState(readTrackZoomState(null));
      return;
    }

    let nextState = readTrackZoomState(track);
    if (nextState.supported && preferredZoom != null && Math.abs(preferredZoom - nextState.current) > nextState.step / 2) {
      try {
        nextState = await applyTrackZoom(track, preferredZoom);
      } catch {
        nextState = readTrackZoomState(track);
      }
    }

    zoomTargetRef.current = nextState.current;
    setZoomState(nextState);
  }, []);

  const updateZoom = useCallback(async (nextZoom: number) => {
    const track = streamRef.current?.getVideoTracks()[0] || null;
    if (!track) return;

    try {
      const nextState = await applyTrackZoom(track, nextZoom);
      zoomTargetRef.current = nextState.current;
      setZoomState(nextState);
    } catch (error: any) {
      toast.error(`镜头缩放调整失败: ${error?.message || "当前设备不支持"}`);
    }
  }, []);

  const stepZoom = useCallback((direction: -1 | 1) => {
    if (!zoomState.supported) return;
    const nextZoom = Math.max(
      zoomState.min,
      Math.min(zoomState.max, zoomState.current + zoomState.step * direction),
    );
    void updateZoom(nextZoom);
  }, [updateZoom, zoomState]);

  const startCamera = useCallback((
    async (
      nextFacingMode = facingMode,
      preferredZoom = zoomTargetRef.current,
      preset: keyof typeof QUALITY_PRESETS = qualityPreset,
    ) => {
    try {
      if (streamRef.current) {
        streamRef.current.getTracks().forEach((track) => track.stop());
        streamRef.current = null;
      }

      const stream = await navigator.mediaDevices.getUserMedia({
        video: getCameraVideoConstraints(nextFacingMode, mobile, preset),
        audio: {
          echoCancellation: true,
          noiseSuppression: true,
        },
      });

      stream.getVideoTracks().forEach((track) => {
        track.onended = () => {
          if (!suppressTrackEndedRef.current && (modeRef.current === "recording" || modeRef.current === "reconnecting")) {
            void attemptReconnect();
          }
        };
      });

      suppressTrackEndedRef.current = false;
      streamRef.current = stream;
      if (liveVideoRef.current) {
        liveVideoRef.current.srcObject = stream;
        await liveVideoRef.current.play();
      }
      await syncZoomState(preferredZoom, stream.getVideoTracks()[0] || null);
      setCameraError("");
      setCameraActive(true);
      return stream;
    } catch (error: any) {
      const message = error?.message || "无法访问摄像头";
      setCameraError(message);
      toast.error(`摄像头启动失败: ${message}`);
      throw error;
    }
  }), [facingMode, mobile, qualityPreset, syncZoomState]);

  const ensurePreviewStream = useCallback(async () => {
    if (streamRef.current) {
      if (liveVideoRef.current && liveVideoRef.current.srcObject !== streamRef.current) {
        liveVideoRef.current.srcObject = streamRef.current;
        await liveVideoRef.current.play().catch(() => {});
      }
      await syncZoomState(zoomTargetRef.current);
      setCameraActive(true);
      return streamRef.current;
    }

    return startCamera(facingModeRef.current, zoomTargetRef.current, qualityPreset);
  }, [startCamera, syncZoomState]);

  const refreshDevices = useCallback(async () => {
    try {
      const devices = await navigator.mediaDevices.enumerateDevices();
      setHasMultipleCameras(devices.filter((device) => device.kind === "videoinput").length > 1);
    } catch {
      setHasMultipleCameras(false);
    }
  }, []);

  const processUploadQueue = useCallback(async () => {
    if (uploadInFlightRef.current || pendingUploadsRef.current.length === 0 || !currentSessionRef.current?.id || !navigator.onLine) {
      syncQueuedUploadState();
      return;
    }

    uploadInFlightRef.current = true;
    try {
      while (pendingUploadsRef.current.length > 0 && currentSessionRef.current?.id && navigator.onLine) {
        const nextSegment = pendingUploadsRef.current[0];
        const response = await uploadMediaSegment(
          currentSessionRef.current.id,
          nextSegment.sequence,
          nextSegment.durationMs,
          nextSegment.blob
        );
        pendingUploadsRef.current.shift();
        syncQueuedUploadState();
        syncSessionState(response.session);
      }
    } catch (error: any) {
      toast.error(`分段上传失败: ${error?.message || "未知错误"}`);
    } finally {
      uploadInFlightRef.current = false;
    }
  }, [syncQueuedUploadState, syncSessionState]);

  const enqueueSegment = useCallback(async (blob: Blob, durationForSegmentMs: number) => {
    if (!blob.size) return;
    pendingUploadsRef.current.push({
      sequence: segmentSequenceRef.current++,
      durationMs: Math.max(1, durationForSegmentMs),
      blob,
    });
    syncQueuedUploadState();
    await processUploadQueue();
  }, [processUploadQueue, syncQueuedUploadState]);

  const flushPendingSegments = useCallback(async () => {
    while (pendingUploadsRef.current.length > 0 || uploadInFlightRef.current) {
      await processUploadQueue();
      await new Promise((resolve) => setTimeout(resolve, 200));
    }
  }, [processUploadQueue]);

  const stopRecorder = useCallback(async () => {
    stopTickers();
    const recorder = recorderRef.current;
    recorderRef.current = null;

    if (!recorder || recorder.state === "inactive") {
      return;
    }

    const stopped = new Promise<void>((resolve) => {
      recorder.addEventListener("stop", () => resolve(), { once: true });
    });

    try {
      recorder.requestData();
    } catch {
      // ignore
    }
    recorder.stop();
    await stopped;
  }, [stopTickers]);

  const createManualMarker = useCallback(async (type: "manual" | "motion", label: string, confidence?: number) => {
    const sessionId = currentSessionRef.current?.id;
    if (!sessionId) return;

    const timestampMs = Math.max(0, Date.now() - recordingStartedAtRef.current);
    const optimisticMarker: MediaMarker = {
      id: `${type}-${timestampMs}`,
      type,
      label,
      timestampMs,
      confidence,
      createdAt: new Date().toISOString(),
    };

    setMarkers((current) => [...current, optimisticMarker].sort((a, b) => a.timestampMs - b.timestampMs));

    try {
      const response = await createMediaMarker(sessionId, {
        type,
        label,
        timestampMs,
        confidence,
      });
      syncSessionState(response.session);
    } catch (error: any) {
      toast.error(`标记失败: ${error?.message || "未知错误"}`);
    }
  }, [syncSessionState]);

  const sampleMotion = useCallback(() => {
    const video = liveVideoRef.current;
    const canvas = motionCanvasRef.current;
    if (!video || !canvas || video.readyState < 2) {
      return;
    }

    const ctx = canvas.getContext("2d", { willReadFrequently: true });
    if (!ctx) {
      return;
    }

    const width = 160;
    const height = 90;
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(video, 0, 0, width, height);
    const frame = ctx.getImageData(0, 0, width, height).data;
    const lastFrame = motionFrameRef.current;

    if (lastFrame) {
      let totalDifference = 0;
      let samples = 0;
      for (let index = 0; index < frame.length; index += 16) {
        totalDifference += Math.abs(frame[index] - lastFrame[index]);
        samples += 1;
      }
      const averageDifference = samples ? totalDifference / samples : 0;
      const now = Date.now();
      if (averageDifference >= MOTION_THRESHOLD && now - lastMotionMarkerAtRef.current >= MOTION_COOLDOWN_MS) {
        lastMotionMarkerAtRef.current = now;
        void createManualMarker("motion", "自动关键片段", Math.min(0.98, averageDifference / 100));
      }
    }

    motionFrameRef.current = new Uint8ClampedArray(frame);
  }, [createManualMarker]);

  const startRealtimePush = useCallback(async (stream: MediaStream, sessionId: string) => {
    closePeer();
    const peer = new RTCPeerConnection({
      iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
    });
    peerRef.current = peer;
    setConnectionState("connecting");

    stream.getTracks().forEach((track) => {
      peer.addTrack(track, stream);
    });

    peer.onconnectionstatechange = () => {
      setConnectionState(peer.connectionState);
      if (peer.connectionState === "disconnected" && (modeRef.current === "recording" || modeRef.current === "reconnecting")) {
        void attemptReconnect();
      }
    };

    const offer = await peer.createOffer();
    await peer.setLocalDescription(offer);
    await waitForIceGathering(peer);

    const answer = await signalMediaSession(sessionId, {
      sdp: peer.localDescription?.sdp || "",
      type: peer.localDescription?.type || "offer",
    });

    await peer.setRemoteDescription({
      type: answer.type as RTCSdpType,
      sdp: answer.sdp,
    });
  }, [closePeer]);

  const startRecorderLoop = useCallback((stream: MediaStream) => {
    const recorder = new MediaRecorder(stream, {
      mimeType,
      videoBitsPerSecond: pickBitrate(qualityPreset, mobile),
    });

    currentSegmentStartedAtRef.current = Date.now();

    recorder.ondataavailable = (event) => {
      if (!event.data.size) {
        return;
      }
      const now = Date.now();
      const segmentDuration = now - currentSegmentStartedAtRef.current;
      currentSegmentStartedAtRef.current = now;
      void enqueueSegment(event.data, segmentDuration);
    };

    recorder.onerror = () => {
      void attemptReconnect();
    };

    recorder.start();
    recorderRef.current = recorder;

    segmentTickerRef.current = setInterval(() => {
      if (recorder.state === "recording") {
        recorder.requestData();
      }
    }, SEGMENT_LENGTH_MS);

    timerTickerRef.current = setInterval(() => {
      setDurationMs(Date.now() - recordingStartedAtRef.current);
    }, 250);

    motionTickerRef.current = setInterval(() => {
      sampleMotion();
    }, MOTION_SAMPLE_MS);
  }, [enqueueSegment, mimeType, mobile, qualityPreset, sampleMotion]);

  const attemptReconnect = useCallback(async () => {
    if (!currentSessionRef.current || modeRef.current === "finalizing" || modeRef.current === "archived") {
      return;
    }

    if (reconnectTimeoutRef.current) {
      clearTimeout(reconnectTimeoutRef.current);
    }

    setMode("reconnecting");
    setReconnectAttempts((count) => {
      const nextCount = count + 1;
      reconnectAttemptsRef.current = nextCount;
      return nextCount;
    });

    try {
      await stopRecorder();
    } catch {
      // ignore
    }
    closePeer();
    stopCamera();

    const nextDelay = Math.min(1_000 * Math.max(1, reconnectAttemptsRef.current), 8_000);
    reconnectTimeoutRef.current = setTimeout(async () => {
      try {
        const stream = await startCamera();
        await startRealtimePush(stream, currentSessionRef.current?.id || "");
        startRecorderLoop(stream);
        setMode("recording");
        toast.success("摄像头已重新连接，录制继续");
      } catch (error: any) {
        toast.error(`自动重连失败: ${error?.message || "未知错误"}`);
        if (modeRef.current === "reconnecting") {
          void attemptReconnect();
        }
      }
    }, nextDelay);
  }, [closePeer, startCamera, startRealtimePush, startRecorderLoop, stopCamera, stopRecorder]);

  const beginRecording = useCallback(async () => {
    if (!user) {
      toast.error("请先登录后再开始录制");
      return;
    }

    try {
      setMode("preparing");
      setMarkers([]);
      setDurationMs(0);
      setUploadedSegments(0);
      setUploadBytes(0);
      setQueuedSegments(0);
      setQueuedBytes(0);
      setReconnectAttempts(0);
      setArchiveTaskId(null);
      segmentSequenceRef.current = 0;
      motionFrameRef.current = null;
      pendingUploadsRef.current = [];

      const stream = await ensurePreviewStream();
      const sessionResponse = await createMediaSession({
        userId: String(user.id),
        title: title.trim() || `训练录制 ${new Date().toLocaleString("zh-CN")}`,
        format: "webm",
        mimeType,
        qualityPreset,
        facingMode,
        deviceKind: mobile ? "mobile" : "desktop",
      });
      syncSessionState(sessionResponse.session);
      await startRealtimePush(stream, sessionResponse.session.id);

      recordingStartedAtRef.current = Date.now();
      startRecorderLoop(stream);
      setMode("recording");
      toast.success("录制已开始，已同步启动实时推流");
    } catch (error: any) {
      setMode("idle");
      toast.error(`启动录制失败: ${error?.message || "未知错误"}`);
    }
  }, [ensurePreviewStream, facingMode, mimeType, mobile, qualityPreset, startRealtimePush, startRecorderLoop, syncSessionState, title, user]);

  const finishRecording = useCallback(async () => {
    const session = currentSessionRef.current;
    if (!session) {
      return;
    }

    try {
      setMode("finalizing");
      await stopRecorder();
      await flushPendingSegments();
      closePeer();
      stopCamera();

      const response = await finalizeMediaSession(session.id, {
        title: title.trim() || session.title,
        durationMs: Date.now() - recordingStartedAtRef.current,
      });
      syncSessionState(response.session);
      await finalizeTaskMutation.mutateAsync({
        sessionId: session.id,
        title: title.trim() || session.title,
        exerciseType: "recording",
        sessionMode,
        durationMinutes: Math.max(1, Math.round((Date.now() - recordingStartedAtRef.current) / 60000)),
      });
      toast.success("录制已提交，后台正在整理回放文件");
    } catch (error: any) {
      toast.error(`结束录制失败: ${error?.message || "未知错误"}`);
      setMode("recording");
    }
  }, [closePeer, finalizeTaskMutation, flushPendingSegments, sessionMode, stopCamera, stopRecorder, syncSessionState, title]);

  const resetRecorder = useCallback(async () => {
    if (reconnectTimeoutRef.current) clearTimeout(reconnectTimeoutRef.current);
    stopTickers();
    await stopRecorder().catch(() => {});
    closePeer();
    stopCamera();
    pendingUploadsRef.current = [];
    uploadInFlightRef.current = false;
    motionFrameRef.current = null;
    currentSessionRef.current = null;
    setArchiveTaskId(null);
    setMediaSession(null);
    setMarkers([]);
    setDurationMs(0);
    setQueuedSegments(0);
    setQueuedBytes(0);
    setUploadedSegments(0);
    setUploadBytes(0);
    setReconnectAttempts(0);
    setConnectionState("new");
    setCameraError("");
    setMode("idle");
  }, [closePeer, stopCamera, stopRecorder, stopTickers]);

  const flipCamera = useCallback(async () => {
    const nextFacingMode = facingMode === "user" ? "environment" : "user";
    setFacingMode(nextFacingMode);
    if (mode === "idle" && cameraActive) {
      stopCamera();
      await startCamera(nextFacingMode, zoomTargetRef.current, qualityPreset);
    }
  }, [cameraActive, facingMode, mode, qualityPreset, startCamera, stopCamera]);

  const handleQualityPresetChange = useCallback(async (nextPreset: keyof typeof QUALITY_PRESETS) => {
    setQualityPreset(nextPreset);
    if (cameraActive && mode === "idle") {
      await startCamera(facingModeRef.current, zoomTargetRef.current, nextPreset);
    }
  }, [cameraActive, mode, startCamera]);

  useEffect(() => {
    void refreshDevices();
    navigator.mediaDevices?.addEventListener?.("devicechange", refreshDevices);

    const handleOnline = () => {
      setIsOnline(true);
      toast.success("网络已恢复，继续上传缓存分段");
      void processUploadQueue();
    };
    const handleOffline = () => {
      setIsOnline(false);
      toast.warning("网络已断开，录制分段已留在本地队列");
    };

    window.addEventListener("online", handleOnline);
    window.addEventListener("offline", handleOffline);

    return () => {
      navigator.mediaDevices?.removeEventListener?.("devicechange", refreshDevices);
      window.removeEventListener("online", handleOnline);
      window.removeEventListener("offline", handleOffline);
    };
  }, [processUploadQueue, refreshDevices]);

  useEffect(() => {
    if (!currentPlaybackUrl || !playbackVideoRef.current || mode !== "archived") {
      return;
    }
    playbackVideoRef.current.load();
  }, [currentPlaybackUrl, immersivePreview, mode]);

  useEffect(() => {
    if (mode === "archived") {
      return;
    }

    const liveVideo = liveVideoRef.current;
    if (!liveVideo || !streamRef.current) {
      return;
    }

    if (liveVideo.srcObject !== streamRef.current) {
      liveVideo.srcObject = streamRef.current;
    }
    liveVideo.play().catch(() => {});
  }, [cameraActive, immersivePreview, mode]);

  useEffect(() => {
    if (!mobile) {
      setImmersivePreview(false);
      return;
    }

    if (!immersivePreview) {
      document.body.style.overflow = "";
      return;
    }

    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = "";
    };
  }, [immersivePreview, mobile]);

  useEffect(() => {
    return () => {
      if (reconnectTimeoutRef.current) clearTimeout(reconnectTimeoutRef.current);
      stopTickers();
      if (recorderRef.current && recorderRef.current.state !== "inactive") {
        try {
          recorderRef.current.stop();
        } catch {
          // ignore
        }
      }
      closePeer();
      if (streamRef.current) {
        streamRef.current.getTracks().forEach((track) => track.stop());
      }
    };
  }, [closePeer, stopTickers]);

  const statusBadge = useMemo(() => {
    if (mode === "finalizing") {
      return { label: "归档处理中", tone: "default" as const, icon: CloudUpload };
    }
    if (mode === "reconnecting") {
      return { label: "摄像头重连中", tone: "secondary" as const, icon: ShieldAlert };
    }
    if (mode === "recording") {
      return { label: "录制中", tone: "destructive" as const, icon: Circle };
    }
    if (mode === "archived") {
      return { label: "回放已就绪", tone: "default" as const, icon: Video };
    }
    return { label: "待机", tone: "outline" as const, icon: Camera };
  }, [mode]);

  const previewTitle = mode === "archived" ? "归档回放" : "实时取景";
  const StatusIcon = statusBadge.icon;
  const previewVideoClassName = immersivePreview && mobile
    ? "h-full w-full object-contain"
    : "h-full w-full object-contain";
  const railButtonClassName =
    "h-16 w-16 flex-col gap-1 rounded-[20px] px-2 text-[11px] leading-tight shadow-lg shadow-black/20";

  const renderPrimaryActions = (layout: "toolbar" | "rail" = "toolbar") => {
    const rail = layout === "rail";
    const labelFor = (full: string, short: string) => (rail ? short : full);
    const buttonClass = (tone: "default" | "outline" | "destructive" | "record" = "default") => {
      if (!rail) {
        switch (tone) {
          case "outline":
            return "h-12 rounded-2xl px-4";
          case "destructive":
            return "h-12 rounded-2xl px-5";
          case "record":
            return "h-12 rounded-2xl bg-red-600 px-5 hover:bg-red-700";
          default:
            return "h-12 rounded-2xl px-5";
        }
      }

      switch (tone) {
        case "outline":
          return `${railButtonClassName} border-white/15 bg-white/8 text-white hover:bg-white/14`;
        case "destructive":
          return `${railButtonClassName} bg-red-600 text-white hover:bg-red-700`;
        case "record":
          return `${railButtonClassName} bg-red-600 text-white hover:bg-red-700`;
        default:
          return `${railButtonClassName} bg-white text-slate-950 hover:bg-white/90`;
      }
    };

    const iconClass = rail ? "h-5 w-5" : "mr-2 h-4 w-4";

    return (
      <>
        {mode === "idle" && (
          <>
            {!cameraActive ? (
              <Button
                data-testid="recorder-start-camera-button"
                onClick={() => void startCamera()}
                className={buttonClass()}
              >
                <Camera className={iconClass} />
                {labelFor("启动摄像头", "启动")}
              </Button>
            ) : (
              <>
                <Button
                  data-testid="recorder-start-recording-button"
                  onClick={() => void beginRecording()}
                  className={buttonClass("record")}
                >
                  <Circle className={`${iconClass} ${rail ? "fill-current" : "fill-current"}`} />
                  {labelFor("开始录制", "录制")}
                </Button>
                <Button variant="outline" onClick={stopCamera} className={buttonClass("outline")}>
                  <VideoOff className={iconClass} />
                  {labelFor("关闭摄像头", "关闭")}
                </Button>
              </>
            )}
            {hasMultipleCameras && (
              <Button variant="outline" onClick={() => void flipCamera()} className={buttonClass("outline")}>
                <FlipHorizontal className={iconClass} />
                {labelFor("切换摄像头", "切换")}
              </Button>
            )}
          </>
        )}

        {(mode === "recording" || mode === "reconnecting") && (
          <>
            <Button
              data-testid="recorder-marker-button"
              variant="outline"
              onClick={() => void createManualMarker("manual", "手动剪辑点")}
              className={buttonClass("outline")}
            >
              <Scissors className={iconClass} />
              {labelFor("标记剪辑点", "标记")}
            </Button>
            <Button
              data-testid="recorder-finish-button"
              variant="destructive"
              onClick={() => void finishRecording()}
              className={buttonClass("destructive")}
            >
              <CloudUpload className={iconClass} />
              {labelFor("结束并归档", "完成")}
            </Button>
          </>
        )}

        {mode === "archived" && (
          <>
            {currentPlaybackUrl && (
              <Button asChild variant="outline" className={buttonClass("outline")}>
                <a href={currentPlaybackUrl} download target="_blank" rel="noreferrer">
                  <Download className={iconClass} />
                  {labelFor("下载回放", "下载")}
                </a>
              </Button>
            )}
            <Button
              data-testid="recorder-reset-button"
              onClick={() => void resetRecorder()}
              className={buttonClass()}
            >
              {rail ? null : null}
              {labelFor("重新录制", "重来")}
            </Button>
          </>
        )}

        {mode === "finalizing" && (
          <Button disabled className={rail ? `${railButtonClassName} bg-white/15 text-white` : "h-12 rounded-2xl px-5"}>
            <Loader2 className={rail ? "h-5 w-5 animate-spin" : "mr-2 h-4 w-4 animate-spin"} />
            {labelFor("正在生成回放", "处理中")}
          </Button>
        )}
      </>
    );
  };

  const renderPreviewMedia = () => (
    <>
      {mode === "archived" && currentPlaybackUrl ? (
        <video
          ref={playbackVideoRef}
          className={previewVideoClassName}
          src={currentPlaybackUrl}
          controls
          playsInline
        />
      ) : (
        <video
          ref={liveVideoRef}
          className={previewVideoClassName}
          playsInline
          muted
          autoPlay
        />
      )}
    </>
  );

  const renderZoomOverlay = () => (
    <div className="absolute right-3 bottom-3 z-20 flex items-center gap-2 rounded-2xl border border-white/10 bg-black/65 px-2 py-2 text-white shadow-lg">
      <Button
        type="button"
        size="icon"
        variant="secondary"
        onClick={() => stepZoom(-1)}
        disabled={!zoomState.supported}
        className="h-10 w-10 rounded-xl border border-white/10 bg-white/10 text-white hover:bg-white/20 disabled:opacity-40"
      >
        <Minus className="h-4 w-4" />
      </Button>
      <div className="min-w-[78px] text-center">
        <div className="text-[10px] uppercase tracking-[0.16em] text-white/50">焦距</div>
        <div className="mt-1 text-sm font-semibold">{zoomState.supported ? `${zoomState.current.toFixed(1)}x` : "自动"}</div>
      </div>
      <Button
        type="button"
        size="icon"
        variant="secondary"
        onClick={() => stepZoom(1)}
        disabled={!zoomState.supported}
        className="h-10 w-10 rounded-xl border border-white/10 bg-white/10 text-white hover:bg-white/20 disabled:opacity-40"
      >
        <Plus className="h-4 w-4" />
      </Button>
    </div>
  );

  return (
    <div className="no-overscroll mobile-safe-bottom mobile-safe-inline mobile-bottom-spacing space-y-4">
      <canvas ref={motionCanvasRef} className="hidden" />

      <section className="rounded-[28px] border border-border/60 bg-[radial-gradient(circle_at_top_left,_rgba(34,197,94,0.18),_transparent_35%),linear-gradient(135deg,rgba(12,18,24,0.98),rgba(18,38,30,0.95))] p-5 text-white shadow-xl shadow-black/10 md:p-7">
        <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
          <div className="space-y-3">
            <div className="flex flex-wrap items-center gap-2">
              <Badge variant={statusBadge.tone} className="gap-1.5 border-white/10 bg-white/10 text-white hover:bg-white/10">
                <StatusIcon className={`h-3.5 w-3.5 ${mode === "recording" ? "fill-current" : ""}`} />
                {statusBadge.label}
              </Badge>
              <Badge variant="outline" className="gap-1.5 border-white/15 bg-white/5 text-white/80">
                {isOnline ? <Wifi className="h-3.5 w-3.5" /> : <WifiOff className="h-3.5 w-3.5" />}
                {isOnline ? "网络在线" : "离线缓存中"}
              </Badge>
              <Badge variant="outline" className="gap-1.5 border-white/15 bg-white/5 text-white/80">
                <MonitorUp className="h-3.5 w-3.5" />
                WebRTC 推流
              </Badge>
              <Badge variant="outline" className="gap-1.5 border-white/15 bg-white/5 text-white/80">
                <Sparkles className="h-3.5 w-3.5" />
                {sessionMode === "practice" ? "练习会话" : "训练 PK"}
              </Badge>
            </div>

            <div>
              <h1 className="text-3xl font-semibold tracking-tight" data-testid="recorder-title">在线录制控制台</h1>
              <p className="mt-2 max-w-2xl text-sm leading-6 text-white/70">
                录制采用 Chrome 优先的 WebM 压缩流，60 秒自动分段上传，实时推流与本地压缩并行运行。弱网和摄像头中断时会保留已录片段并尝试自动恢复。
              </p>
            </div>
          </div>

          <div className="grid grid-cols-3 gap-2 self-stretch rounded-2xl border border-white/10 bg-white/5 p-2 text-center text-xs text-white/70 sm:w-[360px]">
            <div className="rounded-xl bg-black/15 px-3 py-3">
              <div className="text-[11px] uppercase tracking-[0.18em] text-white/45">录制时长</div>
              <div className="mt-2 text-lg font-semibold text-white">{formatRecordingTime(durationMs)}</div>
            </div>
            <div className="rounded-xl bg-black/15 px-3 py-3">
              <div className="text-[11px] uppercase tracking-[0.18em] text-white/45">已传片段</div>
              <div className="mt-2 text-lg font-semibold text-white">{uploadedSegments}</div>
            </div>
            <div className="rounded-xl bg-black/15 px-3 py-3">
              <div className="text-[11px] uppercase tracking-[0.18em] text-white/45">已传体积</div>
              <div className="mt-2 text-lg font-semibold text-white">{formatFileSize(uploadBytes)}</div>
            </div>
          </div>
        </div>
      </section>

      {(finalizeTaskMutation.isPending || archiveTaskQuery.data?.status === "queued" || archiveTaskQuery.data?.status === "running") ? (
        <Alert>
          <ListTodo className="h-4 w-4" />
          <AlertTitle>后台归档处理中</AlertTitle>
          <AlertDescription>
            {archiveTaskQuery.data?.message || "录制文件正在后台整理、转码并登记到视频库。"}
            当前已上传 {formatFileSize(uploadBytes)}
            {queuedBytes > 0 ? `，待上传 ${formatFileSize(queuedBytes)}` : ""}。
            你可以离开当前页面，完成后任务中心会提示结果。
          </AlertDescription>
        </Alert>
      ) : null}

      {uploadStillDraining ? (
        <Alert variant="destructive">
          <ShieldAlert className="h-4 w-4" />
          <AlertTitle>仍需停留在当前页面</AlertTitle>
          <AlertDescription>
            结束已提交，但还有 {queuedSegments} 个分段、约 {formatFileSize(queuedBytes)} 待上传。
            请先保持当前页面和网络连接，等“待上传缓存”变为 0 后再离开，否则本次录制尾段可能缺失。
          </AlertDescription>
        </Alert>
      ) : null}

      {canLeaveRecorderPage ? (
        <Alert>
          <Video className="h-4 w-4" />
          <AlertTitle>上传已完成，无需继续停留在此页面</AlertTitle>
          <AlertDescription>
            当前录制分段已经全部上传。
            {mode === "archived"
              ? " 回放文件已生成，你现在可以返回其他页面，稍后也能在视频库继续查看。"
              : " 后台会继续合并分段、生成回放并写入视频库，你可以直接离开，任务中心会反馈完成结果。"}
          </AlertDescription>
        </Alert>
      ) : null}

      <div className="grid gap-4 xl:grid-cols-[minmax(0,1.7fr)_minmax(340px,0.9fr)]">
        <section className="space-y-4">
          <Card className="overflow-hidden border-0 shadow-lg">
            <CardContent className="p-0">
              <div className="relative aspect-[16/10] overflow-hidden bg-black sm:aspect-video">
                {!immersivePreview && renderPreviewMedia()}

                {!cameraActive && mode === "idle" && (
                  <div className="absolute inset-0 flex flex-col items-center justify-center gap-4 bg-[radial-gradient(circle_at_center,_rgba(16,185,129,0.12),_rgba(0,0,0,0.75))] px-6 text-center text-white/80">
                    <VideoOff className="h-14 w-14" />
                    <div className="space-y-1">
                      <h2 className="text-xl font-medium">准备开始训练录制</h2>
                      <p className="text-sm text-white/60">启动摄像头后会同时准备本地压缩录制和实时推流链路。</p>
                    </div>
                  </div>
                )}

                <div className="pointer-events-none absolute left-3 top-3 flex flex-wrap gap-2">
                  <Badge className="gap-1.5 bg-black/55 text-white shadow-sm">
                    <Sparkles className="h-3.5 w-3.5" />
                    {previewTitle}
                  </Badge>
                  <Badge className="gap-1.5 bg-black/55 text-white shadow-sm">
                    <Zap className="h-3.5 w-3.5" />
                    {QUALITY_PRESETS[qualityPreset].subtitle}
                  </Badge>
                  {mobile && (
                    <Badge className="gap-1.5 bg-black/55 text-white shadow-sm">
                      <Smartphone className="h-3.5 w-3.5" />
                      移动端优化
                    </Badge>
                  )}
                </div>

                {(mode === "recording" || mode === "reconnecting") && (
                  <div className="absolute bottom-3 left-3 flex items-center gap-2 rounded-full bg-black/65 px-3 py-2 text-sm text-white shadow-lg">
                    <span className="relative flex h-3 w-3">
                      <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-75" />
                      <span className="relative inline-flex h-3 w-3 rounded-full bg-red-500" />
                    </span>
                    {formatRecordingTime(durationMs)}
                  </div>
                )}

                {mobile && (
                  <Button
                    type="button"
                    size="icon"
                    variant="secondary"
                    data-testid="recorder-mobile-focus-button"
                    onClick={() => setImmersivePreview(true)}
                    className="absolute right-3 top-3 z-20 h-11 w-11 rounded-full border border-white/10 bg-black/60 text-white shadow-lg hover:bg-black/75"
                  >
                    <Maximize2 className="h-4 w-4" />
                  </Button>
                )}

                {cameraActive && zoomState.supported ? renderZoomOverlay() : null}
              </div>

              <div className="border-t border-border/60 bg-card/80 p-4">
                <div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_180px_auto]">
                  <Input
                    value={title}
                    onChange={(event) => setTitle(event.target.value)}
                    placeholder="本次训练录制标题"
                    className="h-12 rounded-2xl border-border/60"
                  />
                  <Select value={sessionMode} onValueChange={(value) => setSessionMode(value as "practice" | "pk")} disabled={mode !== "idle" && mode !== "archived"}>
                    <SelectTrigger className="h-12 rounded-2xl border-border/60">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="practice">练习会话</SelectItem>
                      <SelectItem value="pk">训练 PK</SelectItem>
                    </SelectContent>
                  </Select>
                  <div className="flex flex-wrap gap-2">
                    {renderPrimaryActions()}
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

          <Card className="border-0 shadow-sm">
            <CardHeader className="pb-3">
              <CardTitle className="text-base">质量与设备设置</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="grid gap-3 lg:grid-cols-3">
                    {Object.entries(QUALITY_PRESETS).map(([key, preset]) => {
                      const active = qualityPreset === key;
                      const disabled = mode !== "idle" && mode !== "archived";
                      return (
                        <button
                          key={key}
                          type="button"
                          onClick={() => void handleQualityPresetChange(key as keyof typeof QUALITY_PRESETS)}
                          disabled={disabled}
                          className={`rounded-2xl border px-4 py-4 text-left transition ${
                            active
                              ? "border-primary/60 bg-primary/5 shadow-sm"
                              : "border-border/60 hover:border-primary/30 hover:bg-muted/50"
                          } ${disabled ? "cursor-not-allowed opacity-60" : ""}`}
                        >
                      <div className="text-sm font-semibold">{preset.label}</div>
                      <div className="mt-1 text-xs text-muted-foreground">{preset.subtitle}</div>
                      <p className="mt-3 text-sm leading-6 text-muted-foreground">{preset.description}</p>
                    </button>
                  );
                })}
              </div>

              <div className="grid gap-3 md:grid-cols-2">
                <div className="rounded-2xl border border-border/60 bg-muted/30 p-4">
                  <div className="text-sm font-medium">设备方向</div>
                  <div className="mt-2 text-sm text-muted-foreground">
                    当前优先使用 {facingMode === "environment" ? "后置摄像头" : "前置摄像头"}，横屏时自动保留更大预览区域。
                  </div>
                </div>
                <div className="rounded-2xl border border-border/60 bg-muted/30 p-4">
                  <div className="text-sm font-medium">录制容器</div>
                  <div className="mt-2 text-sm text-muted-foreground">
                    {mimeType} · 每 {SEGMENT_LENGTH_MS / 1000} 秒自动分段上传，服务端归档后提供 WebM/MP4 回放。
                  </div>
                </div>
              </div>

              <div className="rounded-2xl border border-border/60 bg-muted/25 p-4">
                <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
                  <div>
                    <div className="text-sm font-medium">镜头焦距 / 放大缩小</div>
                    <div className="mt-2 text-sm text-muted-foreground">
                      {zoomState.supported
                        ? `当前 ${zoomState.current.toFixed(1)}x，可在录制过程中直接调整；设备焦点模式为 ${zoomState.focusMode}。`
                        : "当前设备或浏览器未开放镜头缩放能力，仍会保持自动对焦。Chrome 安卓和部分后置摄像头通常支持此能力。"}
                    </div>
                  </div>
                  <Badge variant="outline" className="w-fit">
                    默认 {QUALITY_PRESETS.economy.label}
                  </Badge>
                </div>

                {zoomState.supported ? (
                  <div className="mt-4 space-y-3">
                    <Slider
                      value={[zoomState.current]}
                      min={zoomState.min}
                      max={zoomState.max}
                      step={zoomState.step}
                      onValueChange={(value) => {
                        if (typeof value[0] === "number") {
                          void updateZoom(value[0]);
                        }
                      }}
                    />
                    <div className="flex items-center justify-between text-xs text-muted-foreground">
                      <span>{zoomState.min.toFixed(1)}x</span>
                      <span>默认建议 1.0x-1.5x，用于半场动作取景</span>
                      <span>{zoomState.max.toFixed(1)}x</span>
                    </div>
                  </div>
                ) : null}
              </div>
            </CardContent>
          </Card>
        </section>

        <aside className="space-y-4">
          <Card className="border-0 shadow-sm">
            <CardHeader className="pb-3">
              <CardTitle className="text-base">会话状态</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-2 gap-3">
                <div className="rounded-2xl bg-muted/35 p-4">
                  <div className="text-xs uppercase tracking-[0.16em] text-muted-foreground">推流连接</div>
                  <div className="mt-2 flex items-center gap-2 text-sm font-medium">
                    <Activity className="h-4 w-4 text-primary" />
                    {connectionState}
                  </div>
                </div>
                <div className="rounded-2xl bg-muted/35 p-4">
                  <div className="text-xs uppercase tracking-[0.16em] text-muted-foreground">重连次数</div>
                  <div className="mt-2 text-sm font-medium">{reconnectAttempts}</div>
                </div>
              </div>

              <div className="space-y-2">
                <div className="flex items-center justify-between text-sm">
                  <span>已上传文件</span>
                  <span className="font-medium">{formatFileSize(uploadBytes)}</span>
                </div>
                <div className="flex items-center justify-between text-sm">
                  <span>待上传缓存</span>
                  <span className="font-medium">{queuedSegments} 段 · {formatFileSize(queuedBytes)}</span>
                </div>
                <div className="flex items-center justify-between text-sm">
                  <span>录制源文件累计</span>
                  <span className="font-medium">{formatFileSize(totalUploadBytes)}</span>
                </div>
                <div className="flex items-center justify-between text-sm">
                  <span>总片段数</span>
                  <span className="font-medium">{uploadedSegments + queuedSegments}</span>
                </div>
                <div className="flex items-center justify-between text-sm">
                  <span>服务端状态</span>
                  <span className="font-medium">{mediaSession?.status || "idle"}</span>
                </div>
              </div>

              {(mode === "finalizing" || mode === "archived" || mediaSession?.archiveStatus === "failed") && (
                <div className="space-y-2 rounded-2xl border border-border/60 bg-muted/25 p-4">
                  <div className="flex items-center justify-between text-sm">
                    <span>{archivePhaseLabel}</span>
                    <span className="font-medium">{archiveProgress}%</span>
                  </div>
                  <Progress value={archiveProgress} className="h-2" />
                  <div className="grid gap-2 rounded-2xl bg-background/70 p-3 text-xs text-muted-foreground sm:grid-cols-3">
                    <div>
                      <div className="text-[10px] uppercase tracking-[0.14em]">已上传</div>
                      <div className="mt-1 text-sm font-medium text-foreground">{formatFileSize(uploadBytes)}</div>
                    </div>
                    <div>
                      <div className="text-[10px] uppercase tracking-[0.14em]">待上传</div>
                      <div className="mt-1 text-sm font-medium text-foreground">{formatFileSize(queuedBytes)}</div>
                    </div>
                    <div>
                      <div className="text-[10px] uppercase tracking-[0.14em]">片段总数</div>
                      <div className="mt-1 text-sm font-medium text-foreground">{uploadedSegments + queuedSegments} 段</div>
                    </div>
                  </div>
                  <p className="text-xs leading-5 text-muted-foreground">
                    {archiveTaskQuery.data?.message
                      ? `${archiveTaskQuery.data.message}，当前已上传 ${formatFileSize(uploadBytes)}。`
                      : mediaSession?.archiveStatus === "completed"
                      ? "归档完成，已生成可回放文件并同步到视频库。"
                      : mediaSession?.archiveStatus === "failed"
                        ? mediaSession.lastError || "归档失败，请检查媒体服务日志。"
                        : `Worker 正在合并分段并生成归档文件，当前已上传 ${formatFileSize(uploadBytes)}。`}
                  </p>
                  <div
                    className={`rounded-2xl px-3 py-2 text-xs leading-5 ${
                      uploadStillDraining
                        ? "border border-destructive/25 bg-destructive/5 text-destructive"
                        : canLeaveRecorderPage
                          ? "border border-emerald-200 bg-emerald-50 text-emerald-700"
                          : "border border-border/60 bg-background/70 text-muted-foreground"
                    }`}
                  >
                    {uploadStillDraining
                      ? `仍需停留：还有 ${queuedSegments} 个分段、约 ${formatFileSize(queuedBytes)} 待上传，待上传清零后再离开当前页面。`
                      : canLeaveRecorderPage
                        ? "上传已完成：无需继续停留在此页面，后台会继续生成回放并把结果写入视频库。"
                        : "结束录制后会先清空本地待上传缓存，再转入后台归档。"}
                  </div>
                </div>
              )}

              {cameraError && (
                <div className="rounded-2xl border border-destructive/20 bg-destructive/5 p-4 text-sm text-destructive">
                  {cameraError}
                </div>
              )}
            </CardContent>
          </Card>

          <Card className="border-0 shadow-sm">
            <CardHeader className="pb-3">
              <CardTitle className="text-base">关键片段标记</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              <p className="text-sm leading-6 text-muted-foreground">
                运动检测每隔约 {MOTION_SAMPLE_MS / 1000} 秒抽样一次，触发明显动作变化时自动创建关键片段标记。你也可以在录制过程中手动插入剪辑点。
              </p>

              <div className="space-y-2">
                {markers.length === 0 ? (
                  <div className="rounded-2xl border border-dashed border-border/70 px-4 py-6 text-center text-sm text-muted-foreground">
                    尚无标记点。录制开始后，系统会自动识别动作变化并写入关键片段。
                  </div>
                ) : (
                  markers.map((marker) => (
                    <div
                      key={marker.id}
                      className={`rounded-2xl border px-4 py-3 ${
                        marker.type === "motion"
                          ? "border-primary/25 bg-primary/5"
                          : "border-border/60 bg-muted/35"
                      }`}
                    >
                      <div className="flex items-center justify-between gap-3">
                        <div>
                          <div className="text-sm font-medium">{marker.label}</div>
                          <div className="mt-1 text-xs text-muted-foreground">
                            {marker.type === "motion" ? "自动标记" : "手动标记"} · {formatRecordingTime(marker.timestampMs)}
                          </div>
                        </div>
                        {typeof marker.confidence === "number" && (
                          <Badge variant="outline" className="rounded-full">
                            {Math.round(marker.confidence * 100)}%
                          </Badge>
                        )}
                      </div>
                    </div>
                  ))
                )}
              </div>
            </CardContent>
          </Card>
        </aside>
      </div>

      {mobile && immersivePreview && (
        <div
          className="mobile-safe-top mobile-safe-bottom mobile-safe-inline fixed inset-0 z-[80] bg-black/95 px-3 py-4"
          data-testid="recorder-mobile-focus-shell"
        >
          <div className="grid h-full grid-cols-[minmax(0,1fr)_72px] gap-3">
            <div className="relative flex min-h-0 items-center justify-center">
              <div className="relative h-full w-full overflow-hidden rounded-[32px] border border-white/10 bg-black shadow-2xl shadow-black/40">
                {renderPreviewMedia()}

                {!cameraActive && mode === "idle" && (
                  <div className="absolute inset-0 flex flex-col items-center justify-center gap-4 bg-[radial-gradient(circle_at_center,_rgba(16,185,129,0.12),_rgba(0,0,0,0.8))] px-6 text-center text-white/80">
                    <VideoOff className="h-14 w-14" />
                    <div className="space-y-1">
                      <h2 className="text-xl font-medium">竖屏专注录制</h2>
                      <p className="text-sm text-white/60">右侧按钮可直接启动摄像头、录制、标记和结束归档。</p>
                    </div>
                  </div>
                )}

                <div className="pointer-events-none absolute left-3 top-3 flex flex-wrap gap-2">
                  <Badge className="gap-1.5 bg-black/55 text-white shadow-sm">
                    <Sparkles className="h-3.5 w-3.5" />
                    {previewTitle}
                  </Badge>
                  <Badge className="gap-1.5 bg-black/55 text-white shadow-sm">
                    <Zap className="h-3.5 w-3.5" />
                    {QUALITY_PRESETS[qualityPreset].subtitle}
                  </Badge>
                </div>

                {(mode === "recording" || mode === "reconnecting") && (
                  <div className="absolute bottom-3 left-3 flex items-center gap-2 rounded-full bg-black/65 px-3 py-2 text-sm text-white shadow-lg">
                    <span className="relative flex h-3 w-3">
                      <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-75" />
                      <span className="relative inline-flex h-3 w-3 rounded-full bg-red-500" />
                    </span>
                    {formatRecordingTime(durationMs)}
                  </div>
                )}

                <Button
                  type="button"
                  size="icon"
                  variant="secondary"
                  onClick={() => setImmersivePreview(false)}
                  className="absolute right-3 top-3 z-20 h-11 w-11 rounded-full border border-white/10 bg-black/60 text-white shadow-lg hover:bg-black/75"
                >
                  <Minimize2 className="h-4 w-4" />
                </Button>

                {cameraActive && zoomState.supported ? renderZoomOverlay() : null}
              </div>
            </div>

            <div className="flex flex-col items-center justify-center gap-3">
              {renderPrimaryActions("rail")}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}