<script setup lang="ts">
import { ref, onMounted, onUnmounted, onActivated, onDeactivated, computed, watch, nextTick } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { useSystemStore } from '@/stores/system'
import { useConfigStore } from '@/stores/config'
import { useAuthStore } from '@/stores/auth'
import { useWebSocket } from '@/composables/useWebSocket'
import { useConsoleEvents } from '@/composables/useConsoleEvents'
import { useHidWebSocket } from '@/composables/useHidWebSocket'
import { useWebRTC } from '@/composables/useWebRTC'
import { useVideoSession } from '@/composables/useVideoSession'
import { getUnifiedAudio } from '@/composables/useUnifiedAudio'
import { streamApi, hidApi, atxApi, atxConfigApi, authApi } from '@/api'
import { CanonicalKey, HidBackend } from '@/types/generated'
import type { HidKeyboardEvent, HidMouseEvent } from '@/types/hid'
import { keyboardEventToCanonicalKey, updateModifierMaskForKey } from '@/lib/keyboardMappings'
import { toast } from 'vue-sonner'
import { generateUUID } from '@/lib/utils'
import { formatFpsValue } from '@/lib/fps'
import type { VideoMode } from '@/components/VideoConfigPopover.vue'

// Components
import StatusCard, { type StatusDetail } from '@/components/StatusCard.vue'
import ActionBar from '@/components/ActionBar.vue'
import InfoBar from '@/components/InfoBar.vue'
import VirtualKeyboard from '@/components/VirtualKeyboard.vue'
import StatsSheet from '@/components/StatsSheet.vue'
import LanguageToggleButton from '@/components/LanguageToggleButton.vue'
import BrandMark from '@/components/BrandMark.vue'
import { Button } from '@/components/ui/button'
import { Spinner } from '@/components/ui/spinner'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import {
  MonitorOff,
  RefreshCw,
  LogOut,
  Sun,
  Moon,
  ChevronDown,
  Terminal,
  ExternalLink,
  KeyRound,
  Loader2,
} from 'lucide-vue-next'

const { t, te } = useI18n()
const router = useRouter()
const systemStore = useSystemStore()
const configStore = useConfigStore()
const authStore = useAuthStore()
const { connected: wsConnected, networkError: wsNetworkError } = useWebSocket()
const hidWs = useHidWebSocket()
const webrtc = useWebRTC()
const unifiedAudio = getUnifiedAudio()
const videoSession = useVideoSession()

const consoleEvents = useConsoleEvents({
  onStreamConfigChanging: handleStreamConfigChanging,
  onStreamConfigApplied: handleStreamConfigApplied,
  onStreamStatsUpdate: handleStreamStatsUpdate,
  onStreamModeChanged: handleStreamModeChanged,
  onStreamModeSwitching: handleStreamModeSwitching,
  onStreamModeReady: handleStreamModeReady,
  onWebRTCReady: handleWebRTCReady,
  onStreamStateChanged: handleStreamStateChanged,
  onStreamDeviceLost: handleStreamDeviceLost,
  onStreamRecovered: handleStreamRecovered,
  onDeviceInfo: handleDeviceInfo,
})

// Video mode state
const videoMode = ref<VideoMode>('mjpeg')

// Video state
const videoRef = ref<HTMLImageElement | null>(null)
const webrtcVideoRef = ref<HTMLVideoElement | null>(null)
const videoContainerRef = ref<HTMLDivElement | null>(null)
const isFullscreen = ref(false)
const videoLoading = ref(true)
const videoError = ref(false)
const videoErrorMessage = ref('')
const videoRestarting = ref(false) // Track if video is restarting due to config change
const mjpegFrameReceived = ref(false) // Whether MJPEG stream has received at least one frame

/** From `stream.state_changed`: ok | no_signal | device_lost | device_busy */
type StreamSignalState = 'ok' | 'no_signal' | 'device_lost' | 'device_busy'
const streamSignalState = ref<StreamSignalState>('ok')
const streamSignalReason = ref<string | null>(null)
const streamNextRetryMs = ref<number | null>(null)

// Video aspect ratio (dynamically updated from actual video dimensions)
// Using string format "width/height" to let browser handle the ratio calculation
const videoAspectRatio = ref<string | null>(null)

// Backend-provided FPS (received from WebSocket stream.stats_update events)
const backendFps = ref(0)

// Per-client statistics from backend
interface ClientStat {
  id: string
  fps: number  // Integer: frames sent in last second
  connected_secs: number
}
const clientsStats = ref<Record<string, ClientStat>>({})

// Generate a unique client ID for this browser session
// This allows us to identify our own stats in the clients_stat map
const myClientId = generateUUID()

// HID state
const mouseMode = ref<'absolute' | 'relative'>('absolute')
const pressedKeys = ref<CanonicalKey[]>([])
const keyboardLed = computed(() => ({
  capsLock: systemStore.hid?.ledState.capsLock ?? false,
  numLock: systemStore.hid?.ledState.numLock ?? false,
  scrollLock: systemStore.hid?.ledState.scrollLock ?? false,
}))
const keyboardLedEnabled = computed(() => systemStore.hid?.keyboardLedsEnabled ?? false)
const activeModifierMask = ref(0)
const mousePosition = ref({ x: 0, y: 0 })
const lastMousePosition = ref({ x: 0, y: 0 }) // Track last position for relative mode
const isPointerLocked = ref(false) // Track pointer lock state

// Mouse move throttling (60 Hz = ~16.67ms interval)
const DEFAULT_MOUSE_MOVE_SEND_INTERVAL_MS = 16
let mouseMoveSendIntervalMs = DEFAULT_MOUSE_MOVE_SEND_INTERVAL_MS
let mouseFlushTimer: ReturnType<typeof setTimeout> | null = null
let lastMouseMoveSendTime = 0
let pendingMouseMove: { type: 'move' | 'move_abs'; x: number; y: number } | null = null
let accumulatedDelta = { x: 0, y: 0 } // For relative mode: accumulate deltas between sends

// Cursor visibility (from localStorage, updated via storage event)
const cursorVisible = ref(localStorage.getItem('hidShowCursor') !== 'false')
let interactionListenersBound = false
const isConsoleActive = ref(false)

function syncMouseModeFromConfig() {
  const mouseAbsolute = configStore.hid?.mouse_absolute
  if (typeof mouseAbsolute !== 'boolean') return
  const nextMode: 'absolute' | 'relative' = mouseAbsolute ? 'absolute' : 'relative'
  if (mouseMode.value !== nextMode) {
    mouseMode.value = nextMode
  }
}

// Virtual keyboard state
const virtualKeyboardVisible = ref(false)
const virtualKeyboardAttached = ref(true)
const statsSheetOpen = ref(false)
const virtualKeyboardConsumerEnabled = computed(() => {
  const hid = configStore.hid
  if (!hid) return true
  if (hid.backend !== HidBackend.Otg) return true
  return hid.otg_functions?.consumer !== false
})

// Change password dialog state
const changePasswordDialogOpen = ref(false)
const currentPassword = ref('')
const newPassword = ref('')
const confirmPassword = ref('')
const changingPassword = ref(false)

// ttyd (web terminal) state
const ttydStatus = ref<{ available: boolean; running: boolean } | null>(null)
const showTerminalDialog = ref(false)

// Theme
const isDark = ref(document.documentElement.classList.contains('dark'))

// Status computed (Device status removed - now only Video, Audio, HID, MSD)
const videoStatus = computed<'connected' | 'connecting' | 'disconnected' | 'error'>(() => {
  // If WebSocket has network error, video is also affected (same network dependency)
  if (wsNetworkError.value) return 'connecting'

  if (videoError.value) return 'error'
  if (videoLoading.value) return 'connecting'
  if (videoMode.value !== 'mjpeg') {
    if (webrtc.isConnecting.value) return 'connecting'
    if (webrtc.isConnected.value) return 'connected'
  }
  // MJPEG: check if frames have actually arrived (frontend-side detection)
  // This is more reliable than relying on stream.online from backend,
  // which can be stale due to the debounce delay in device_info broadcaster.
  // Also handles browsers that don't fire img.onload for multipart MJPEG streams.
  if (videoMode.value === 'mjpeg' && mjpegFrameReceived.value) return 'connected'
  if (systemStore.stream?.online) return 'connected'
  return 'disconnected'
})

// Convert resolution to short format (e.g., 720p, 1080p, 2K, 4K)
function getResolutionShortName(width: number, height: number): string {
  // Common resolution mappings based on height
  if (height === 2160 || (height === 2160 && width === 4096)) return '4K'
  if (height === 1440) return '2K'
  if (height === 1080) return '1080p'
  if (height === 720) return '720p'
  if (height === 768) return '768p'
  if (height === 600) return '600p'
  if (height === 1024 && width === 1280) return '1024p'
  if (height === 960) return '960p'
  // Fallback: use height + 'p'
  return `${height}p`
}

// Quick info for status card trigger
const videoQuickInfo = computed(() => {
  const stream = systemStore.stream
  if (!stream?.resolution) return ''
  const resShort = getResolutionShortName(stream.resolution[0], stream.resolution[1])
  return `${resShort} ${formatFpsValue(backendFps.value)}fps`
})

const videoDetails = computed<StatusDetail[]>(() => {
  const stream = systemStore.stream
  if (!stream) return []
  const receivedFps = backendFps.value

  // Input (capture) format → output (delivery) mode
  const inputFmt = stream.format || 'MJPEG'
  const outputFmt = videoMode.value === 'mjpeg' ? 'MJPEG' : `${videoMode.value.toUpperCase()} (WebRTC)`
  const formatDisplay = inputFmt === outputFmt ? inputFmt : `${inputFmt} → ${outputFmt}`

  // Target / actual FPS combined
  const fpsDisplay = `${formatFpsValue(stream.targetFps ?? 0)} / ${formatFpsValue(receivedFps)}`
  const fpsStatus: StatusDetail['status'] = receivedFps > 5 ? 'ok' : receivedFps > 0 ? 'warning' : undefined

  return [
    { label: t('statusCard.device'), value: stream.device || '-' },
    { label: t('statusCard.format'), value: formatDisplay },
    { label: t('statusCard.resolution'), value: stream.resolution ? `${stream.resolution[0]}x${stream.resolution[1]}` : '-' },
    { label: t('statusCard.fps'), value: fpsDisplay, status: fpsStatus },
  ]
})

const hidStatus = computed<'connected' | 'connecting' | 'disconnected' | 'error'>(() => {
  const hid = systemStore.hid
  if (hid?.errorCode === 'udc_not_configured') return 'disconnected'
  if (hid?.error) return 'error'

  // In WebRTC mode, check DataChannel status first
  if (videoMode.value !== 'mjpeg') {
    // DataChannel is ready - HID is connected via WebRTC
    if (webrtc.dataChannelReady.value) return 'connected'
    // WebRTC is connecting - HID is also connecting
    if (webrtc.isConnecting.value) return 'connecting'
    // WebRTC is connected but DataChannel not ready - still connecting
    if (webrtc.isConnected.value) return 'connecting'
    // WebRTC not connected - fall through to WebSocket check as fallback
  }

  // MJPEG mode or WebRTC fallback: check WebSocket HID status
  // If HID WebSocket has network error, show connecting (yellow)
  if (hidWs.networkError.value) return 'connecting'

  // If HID WebSocket is not connected (disconnected without error), show disconnected
  if (!hidWs.connected.value) return 'disconnected'

  // If HID backend is unavailable (business error), show disconnected (gray)
  if (hidWs.hidUnavailable.value) return 'disconnected'

  // Normal status based on system state
  if (hid?.available && hid.online) return 'connected'
  if (hid?.available && hid.initialized) return 'connecting'
  return 'disconnected'
})

// Quick info for HID status card trigger
const hidQuickInfo = computed(() => {
  const hid = systemStore.hid
  if (!hid?.available) return ''
  // Show current mode, not hardware capability
  return mouseMode.value === 'absolute' ? t('statusCard.absolute') : t('statusCard.relative')
})

function extractCh9329Command(reason?: string | null): string | null {
  if (!reason) return null
  const match = reason.match(/cmd 0x([0-9a-f]{2})/i)
  const cmd = match?.[1]
  return cmd ? `0x${cmd.toUpperCase()}` : null
}

function hidErrorHint(errorCode?: string | null, backend?: string | null, reason?: string | null): string {
  const ch9329Command = extractCh9329Command(reason)

  switch (errorCode) {
    case 'udc_not_configured':
      return t('hid.errorHints.udcNotConfigured')
    case 'disabled':
      return t('hid.errorHints.disabled')
    case 'enoent':
      return t('hid.errorHints.hidDeviceMissing')
    case 'not_opened':
      return t('hid.errorHints.notOpened')
    case 'port_not_found':
      return t('hid.errorHints.portNotFound')
    case 'invalid_config':
      return t('hid.errorHints.invalidConfig')
    case 'no_response':
      return t(ch9329Command ? 'hid.errorHints.noResponseWithCmd' : 'hid.errorHints.noResponse', {
        cmd: ch9329Command ?? '',
      })
    case 'protocol_error':
    case 'invalid_response':
      return t('hid.errorHints.protocolError')
    case 'enxio':
    case 'enodev':
      return t('hid.errorHints.deviceDisconnected')
    case 'eio':
    case 'epipe':
    case 'eshutdown':
    case 'io_error':
    case 'write_failed':
    case 'read_failed':
      if (backend === 'otg') return t('hid.errorHints.otgIoError')
      if (backend === 'ch9329') return t('hid.errorHints.ch9329IoError')
      return t('hid.errorHints.ioError')
    case 'serial_error':
      return t('hid.errorHints.serialError')
    case 'init_failed':
      return t('hid.errorHints.initFailed')
    case 'shutdown':
      return t('hid.errorHints.shutdown')
    default:
      return ''
  }
}

function buildHidErrorMessage(reason?: string | null, errorCode?: string | null, backend?: string | null): string {
  if (!reason && !errorCode) return ''
  const hint = hidErrorHint(errorCode, backend, reason)
  if (hint) return hint
  if (reason) return reason
  return hint || t('common.error')
}

const hidErrorMessage = computed(() => {
  const hid = systemStore.hid
  return buildHidErrorMessage(hid?.error, hid?.errorCode, hid?.backend)
})

const hidDetails = computed<StatusDetail[]>(() => {
  const hid = systemStore.hid
  if (!hid) return []
  const errorMessage = buildHidErrorMessage(hid.error, hid.errorCode, hid.backend)
  const hidErrorStatus: StatusDetail['status'] =
    hid.errorCode === 'udc_not_configured' ? 'warning' : 'error'

  const details: StatusDetail[] = []

  // Backend + device combined
  const backendStr = hid.backend || t('common.unknown')
  const deviceStr = hid.device ? ` @ ${hid.device}` : ''
  details.push({ label: t('statusCard.backend'), value: `${backendStr}${deviceStr}` })

  // Error message (with error code as suffix when present) OR normal-state info
  if (errorMessage) {
    const codeSuffix = hid.errorCode ? ` (${hid.errorCode})` : ''
    details.push({ label: t('common.error'), value: `${errorMessage}${codeSuffix}`, status: hidErrorStatus })
  } else if (hid.online) {
    details.push({ label: t('statusCard.currentMode'), value: mouseMode.value === 'absolute' ? t('statusCard.absolute') : t('statusCard.relative'), status: 'ok' })
    if (hid.keyboardLedsEnabled) {
      details.push({
        label: t('settings.otgKeyboardLeds'),
        value: `Caps:${hid.ledState.capsLock ? t('common.on') : t('common.off')} Num:${hid.ledState.numLock ? t('common.on') : t('common.off')} Scroll:${hid.ledState.scrollLock ? t('common.on') : t('common.off')}`,
        status: 'ok',
      })
    }
  }

  // Channel (merged with availability / connection state)
  let channelValue: string
  let channelStatus: StatusDetail['status']
  if (videoMode.value !== 'mjpeg') {
    if (webrtc.dataChannelReady.value) {
      channelValue = 'DataChannel (WebRTC)'
      channelStatus = 'ok'
    } else if (webrtc.isConnecting.value || webrtc.isConnected.value) {
      channelValue = 'DataChannel'
      channelStatus = 'warning'
    } else {
      channelValue = 'WebSocket (fallback)'
      channelStatus = hidWs.connected.value ? 'ok' : 'warning'
    }
  } else {
    channelValue = 'WebSocket'
    channelStatus = hidWs.connected.value ? 'ok' : 'warning'
  }
  if (videoMode.value === 'mjpeg' || !webrtc.dataChannelReady.value) {
    if (hidWs.networkError.value) {
      channelValue += ` (${t('statusCard.networkError')})`
      channelStatus = 'warning'
    } else if (!hidWs.connected.value) {
      channelValue += ` (${t('statusCard.disconnected')})`
      channelStatus = 'warning'
    } else if (hidWs.hidUnavailable.value) {
      channelValue += ` (${t('statusCard.hidUnavailable')})`
      channelStatus = 'warning'
    }
  }
  details.push({ label: t('statusCard.channel'), value: channelValue, status: channelStatus })

  return details
})

// Audio status computed
const audioStatus = computed<'connected' | 'connecting' | 'disconnected' | 'error'>(() => {
  const audio = systemStore.audio
  if (!audio?.available) return 'disconnected'
  if (audio.error) return 'error'
  if (audio.streaming) return 'connected'
  return 'disconnected'
})

// Helper function to translate audio quality
function translateAudioQuality(quality: string | undefined): string {
  if (!quality) return t('common.unknown')
  const qualityLower = quality.toLowerCase()
  if (qualityLower === 'voice') return t('actionbar.qualityVoice')
  if (qualityLower === 'balanced') return t('actionbar.qualityBalanced')
  if (qualityLower === 'high') return t('actionbar.qualityHigh')
  return quality // fallback to original value
}

const audioQuickInfo = computed(() => {
  const audio = systemStore.audio
  if (!audio?.available) return ''
  if (audio.streaming) return translateAudioQuality(audio.quality)
  return t('statusCard.off')
})

const audioErrorMessage = computed(() => {
  return systemStore.audio?.error || ''
})

const audioDetails = computed<StatusDetail[]>(() => {
  const audio = systemStore.audio
  if (!audio) return []

  return [
    { label: t('statusCard.device'), value: audio.device || t('statusCard.defaultDevice') },
    { label: t('statusCard.quality'), value: translateAudioQuality(audio.quality) },
    { label: t('statusCard.streaming'), value: audio.streaming ? t('statusCard.yes') : t('statusCard.no'), status: audio.streaming ? 'ok' : undefined },
  ]
})

// MSD status computed
const msdStatus = computed<'connected' | 'connecting' | 'disconnected' | 'error'>(() => {
  const msd = systemStore.msd
  if (!msd?.available) return 'disconnected'
  if (msd.error) return 'error'
  if (msd.connected) return 'connected'
  return 'disconnected'
})

const msdQuickInfo = computed(() => {
  const msd = systemStore.msd
  if (!msd?.available) return ''
  if (msd.mode === 'none') return t('statusCard.msdStandby')
  if (msd.mode === 'image') return t('statusCard.msdImageMode')
  if (msd.mode === 'drive') return t('statusCard.msdDriveMode')
  return t('common.unknown')
})

const msdErrorMessage = computed(() => {
  return systemStore.msd?.error || ''
})

const msdDetails = computed<StatusDetail[]>(() => {
  const msd = systemStore.msd
  if (!msd) return []

  const details: StatusDetail[] = []

  // 状态：待机 / 已连接
  if (msd.mode === 'none') {
    details.push({
      label: t('statusCard.msdStatus'),
      value: t('statusCard.msdStandby'),
      status: undefined
    })
  } else {
    details.push({
      label: t('statusCard.msdStatus'),
      value: t('statusCard.connected'),
      status: 'ok'
    })
  }

  // 模式
  const modeDisplay = msd.mode === 'none'
    ? '-'
    : msd.mode === 'image'
      ? t('statusCard.msdImageMode')
      : t('statusCard.msdDriveMode')
  details.push({
    label: t('statusCard.mode'),
    value: modeDisplay,
    status: msd.mode !== 'none' ? 'ok' : undefined
  })

  // 当前镜像（仅在 image 模式下显示）
  if (msd.mode === 'image') {
    details.push({
      label: t('statusCard.msdCurrentImage'),
      value: msd.imageId || t('statusCard.msdNoImage')
    })
  }

  return details
})

const webrtcLoadingMessage = computed(() => {
  if (videoMode.value === 'mjpeg') {
    return videoRestarting.value ? t('console.videoRestarting') : t('console.connecting')
  }

  switch (webrtc.connectStage.value) {
    case 'fetching_ice_servers':
      return t('console.webrtcPhaseIceServers')
    case 'creating_peer_connection':
      return t('console.webrtcPhaseCreatePeer')
    case 'creating_data_channel':
      return t('console.webrtcPhaseCreateChannel')
    case 'creating_offer':
      return t('console.webrtcPhaseCreateOffer')
    case 'waiting_server_answer':
      return t('console.webrtcPhaseWaitAnswer')
    case 'setting_remote_description':
      return t('console.webrtcPhaseSetRemote')
    case 'applying_ice_candidates':
      return t('console.webrtcPhaseApplyIce')
    case 'waiting_connection':
      return t('console.webrtcPhaseNegotiating')
    case 'connected':
      return t('console.webrtcConnected')
    case 'failed':
      return t('console.webrtcFailed')
    default:
      return videoRestarting.value ? t('console.videoRestarting') : t('console.connecting')
  }
})

const showMsdStatusCard = computed(() => {
  return !!(systemStore.msd?.available && systemStore.hid?.backend !== 'ch9329')
})

const hidHoverAlign = computed<'start' | 'end'>(() => {
  return showMsdStatusCard.value ? 'start' : 'end'
})

// Video handling
let retryTimeoutId: number | null = null
let retryCount = 0
let gracePeriodTimeoutId: number | null = null
let consecutiveErrors = 0
const BASE_RETRY_DELAY = 2000
const GRACE_PERIOD = 2000 // Ignore errors for 2s after config change (reduced from 3s)
const MAX_CONSECUTIVE_ERRORS = 2 // If 2+ errors in grace period, it's a real problem
let pendingWebRTCReadyGate = false
let webrtcConnectTask: Promise<boolean> | null = null

// WebRTC auto-reconnect on device-lost/recovery
let webrtcRecoveryTimerId: number | null = null
let webrtcRecoveryAttempts = 0
const MAX_WEBRTC_RECOVERY_ATTEMPTS = 8
const WEBRTC_RECOVERY_BASE_DELAY = 2000

// Last-frame overlay (prevents black flash during mode switches)
const frameOverlayUrl = ref<string | null>(null)

function clearFrameOverlay() {
  frameOverlayUrl.value = null
}

async function captureFrameOverlay() {
  try {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    if (!ctx) return

    const MAX_WIDTH = 1280

    if (videoMode.value === 'mjpeg') {
      const img = videoRef.value
      if (!img || !img.naturalWidth || !img.naturalHeight) return

      const scale = Math.min(1, MAX_WIDTH / img.naturalWidth)
      canvas.width = Math.max(1, Math.round(img.naturalWidth * scale))
      canvas.height = Math.max(1, Math.round(img.naturalHeight * scale))
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
    } else {
      const video = webrtcVideoRef.value
      if (!video || !video.videoWidth || !video.videoHeight) return

      const scale = Math.min(1, MAX_WIDTH / video.videoWidth)
      canvas.width = Math.max(1, Math.round(video.videoWidth * scale))
      canvas.height = Math.max(1, Math.round(video.videoHeight * scale))
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
    }

    // Use JPEG to keep memory reasonable
    frameOverlayUrl.value = canvas.toDataURL('image/jpeg', 0.7)
  } catch {
    // Best-effort only
  }
}

function waitForVideoFirstFrame(el: HTMLVideoElement, timeoutMs = 2000): Promise<boolean> {
  return new Promise((resolve) => {
    let done = false

    const cleanup = () => {
      el.removeEventListener('loadeddata', onReady)
      el.removeEventListener('playing', onReady)
    }

    const onReady = () => {
      if (done) return
      done = true
      cleanup()
      resolve(true)
    }

    el.addEventListener('loadeddata', onReady)
    el.addEventListener('playing', onReady)

    setTimeout(() => {
      if (done) return
      done = true
      cleanup()
      resolve(false)
    }, timeoutMs)
  })
}

/** For WebRTC watch: skip auto-reconnect when these hold. */
function shouldSuppressAutoReconnect(): boolean {
  return videoMode.value === 'mjpeg'
    || !isConsoleActive.value
    || videoSession.localSwitching.value
    || videoSession.backendSwitching.value
    || videoRestarting.value
}

function markWebRTCFailure(reason: string, description?: string) {
  pendingWebRTCReadyGate = false
  videoError.value = true
  videoErrorMessage.value = reason
  videoLoading.value = false
  systemStore.setStreamOnline(false)

  toast.error(reason, {
    description: description ?? '',
    duration: 5000,
  })
}

async function waitForWebRTCReadyGate(reason: string, timeoutMs = 3000): Promise<void> {
  if (!pendingWebRTCReadyGate) return
  const ready = await videoSession.waitForWebRTCReadyAny(timeoutMs)
  if (!ready) {
    console.warn(`[WebRTC] Ready gate timeout (${reason}), attempting connection anyway`)
  }
  pendingWebRTCReadyGate = false
}

async function connectWebRTCSerial(reason: string): Promise<boolean> {
  if (webrtcConnectTask) {
    return webrtcConnectTask
  }

  webrtcConnectTask = (async () => {
    await waitForWebRTCReadyGate(reason)
    return webrtc.connect()
  })()

  try {
    return await webrtcConnectTask
  } finally {
    webrtcConnectTask = null
  }
}

function handleVideoLoad() {
  // MJPEG video frame loaded successfully - update stream online status
  // This fixes the timing issue where device_info event may arrive before stream is fully active
  if (videoMode.value === 'mjpeg') {
    mjpegFrameReceived.value = true
    systemStore.setStreamOnline(true)
    // Update aspect ratio from MJPEG image dimensions
    const img = videoRef.value
    if (img && img.naturalWidth && img.naturalHeight) {
      videoAspectRatio.value = `${img.naturalWidth}/${img.naturalHeight}`
    }
  }

  if (!videoLoading.value) {
    // 非首帧只做计数
    return
  }

  // Clear any pending retries and grace period
  if (retryTimeoutId !== null) {
    clearTimeout(retryTimeoutId)
    retryTimeoutId = null
  }
  if (gracePeriodTimeoutId !== null) {
    clearTimeout(gracePeriodTimeoutId)
    gracePeriodTimeoutId = null
  }

  // Reset all error states
  videoLoading.value = false
  videoError.value = false
  videoErrorMessage.value = ''
  videoRestarting.value = false
  retryCount = 0
  consecutiveErrors = 0
  clearFrameOverlay()

  // Auto-focus video container for immediate keyboard input
  const container = videoContainerRef.value
  if (container && typeof container.focus === 'function') {
    container.focus()
  }
}

function handleVideoError() {
  // 如果当前是 WebRTC 模式，忽略 MJPEG 错误（因为我们主动清空了 src）
  if (videoMode.value !== 'mjpeg') {
    return
  }

  // 如果正在切换模式，忽略错误（可能是 503 错误，因为后端已切换模式）
  if (isModeSwitching.value) {
    return
  }

  // 如果正在刷新视频，忽略清空 src 时触发的错误
  if (isRefreshingVideo) {
    return
  }

  // Expected <img> error while overlay shows no_signal / device_* — do not retry.
  if (streamSignalState.value !== 'ok') {
    if (retryTimeoutId !== null) {
      clearTimeout(retryTimeoutId)
      retryTimeoutId = null
    }
    videoLoading.value = false
    mjpegFrameReceived.value = false
    return
  }

  // Count consecutive errors even in grace period
  consecutiveErrors++

  // If too many errors even in grace period, it's a real failure
  if (consecutiveErrors > MAX_CONSECUTIVE_ERRORS && gracePeriodTimeoutId !== null) {
    clearTimeout(gracePeriodTimeoutId)
    gracePeriodTimeoutId = null
    videoRestarting.value = false
  }

  // If in grace period and not too many errors, ignore
  if (videoRestarting.value || gracePeriodTimeoutId !== null) {
    return
  }

  // Clear any pending retries to avoid duplicate attempts
  if (retryTimeoutId !== null) {
    clearTimeout(retryTimeoutId)
    retryTimeoutId = null
  }

  // Show loading state immediately
  videoLoading.value = true
  mjpegFrameReceived.value = false

  // Auto-retry with exponential backoff (infinite retry, capped delay)
  retryCount++
  const delay = BASE_RETRY_DELAY * Math.pow(1.5, Math.min(retryCount - 1, 5))

  retryTimeoutId = window.setTimeout(() => {
    retryTimeoutId = null
    refreshVideo()
  }, delay)
}

// Stream device monitoring handlers (UI-only; notifications/state are handled by useConsoleEvents)
function handleStreamDeviceLost(data: { device: string; reason: string }) {
  videoError.value = true
  videoErrorMessage.value = t('console.deviceLostDesc', { device: data.device, reason: data.reason })

  // In WebRTC mode, the pipeline will attempt to restart itself.
  // Start an exponential-backoff reconnect loop so the session is
  // re-established automatically once the backend is ready again.
  if (videoMode.value !== 'mjpeg') {
    scheduleWebRTCRecovery()
  }
}

function scheduleWebRTCRecovery() {
  // Clear any previous timer
  if (webrtcRecoveryTimerId !== null) {
    clearTimeout(webrtcRecoveryTimerId)
    webrtcRecoveryTimerId = null
  }

  if (webrtcRecoveryAttempts >= MAX_WEBRTC_RECOVERY_ATTEMPTS) {
    console.warn('[Recovery] Max WebRTC recovery attempts reached, giving up')
    webrtcRecoveryAttempts = 0
    return
  }

  const delay = Math.min(
    WEBRTC_RECOVERY_BASE_DELAY * Math.pow(2, webrtcRecoveryAttempts),
    30000,
  )

  console.log(
    `[Recovery] Scheduling WebRTC reconnect attempt ${webrtcRecoveryAttempts + 1}/${MAX_WEBRTC_RECOVERY_ATTEMPTS} in ${delay}ms`,
  )

  webrtcRecoveryTimerId = window.setTimeout(async () => {
    webrtcRecoveryTimerId = null
    webrtcRecoveryAttempts++

    // Only reconnect if we are still in a WebRTC mode and error state
    if (videoMode.value === 'mjpeg' || !videoError.value) {
      webrtcRecoveryAttempts = 0
      return
    }

    console.log(`[Recovery] Attempting WebRTC reconnect (attempt ${webrtcRecoveryAttempts})`)
    try {
      await webrtc.disconnect()
      const ok = await connectWebRTCSerial('device-recovery')
      if (ok) {
        console.log('[Recovery] WebRTC reconnected successfully')
        videoError.value = false
        videoErrorMessage.value = ''
        webrtcRecoveryAttempts = 0
      } else {
        // Retry
        scheduleWebRTCRecovery()
      }
    } catch {
      scheduleWebRTCRecovery()
    }
  }, delay)
}

function cancelWebRTCRecovery() {
  if (webrtcRecoveryTimerId !== null) {
    clearTimeout(webrtcRecoveryTimerId)
    webrtcRecoveryTimerId = null
  }
  webrtcRecoveryAttempts = 0
}

function handleStreamRecovered(_data: { device: string }) {
  // Cancel any pending recovery timer – backend is back
  cancelWebRTCRecovery()

  // Reset video error state
  videoError.value = false
  videoErrorMessage.value = ''
  // Refresh video stream
  refreshVideo()
}

async function handleAudioStateChanged(data: { streaming: boolean; device: string | null }) {
  if (!data.streaming) {
    // Audio stopped, disconnect
    unifiedAudio.disconnect()
    return
  }

  // Audio started streaming
  if (videoMode.value !== 'mjpeg' && webrtc.isConnected.value) {
    // WebRTC mode: check if we have an audio track
    if (!webrtc.audioTrack.value) {
      // No audio track - need to reconnect WebRTC to get one
      // This happens when audio was enabled after WebRTC session was created
      await webrtc.disconnect()
      await new Promise(resolve => setTimeout(resolve, 300))
      await connectWebRTCSerial('audio track refresh')
      // After reconnect, the new session will have audio track
      // and the watch on audioTrack will add it to MediaStream
    } else {
      // We have audio track, ensure it's in MediaStream
      const currentStream = webrtcVideoRef.value?.srcObject as MediaStream | null
      if (currentStream && currentStream.getAudioTracks().length === 0) {
        currentStream.addTrack(webrtc.audioTrack.value)
      }
    }
  }

  // Connect unified audio when streaming starts (works for both MJPEG and WebRTC modes)
  // In MJPEG mode, this connects the WebSocket audio player
  // In WebRTC mode, this unmutes the video element
  await unifiedAudio.connect()
}

function handleStreamConfigChanging(data: any) {
  // Clear any existing retries and grace periods
  if (retryTimeoutId !== null) {
    clearTimeout(retryTimeoutId)
    retryTimeoutId = null
  }
  if (gracePeriodTimeoutId !== null) {
    clearTimeout(gracePeriodTimeoutId)
    gracePeriodTimeoutId = null
  }

  // Reset all counters and states
  videoRestarting.value = true
  pendingWebRTCReadyGate = true
  videoLoading.value = true
  videoError.value = false
  retryCount = 0
  consecutiveErrors = 0

  // Reset FPS when config changes (backend will send new FPS via WebSocket)
  backendFps.value = 0

  toast.info(t('console.videoRestarting'), {
    description: data.reason === 'device_switch' ? t('console.deviceSwitching') : t('console.configChanging'),
    duration: 5000,
  })
}

async function handleStreamConfigApplied(data: any) {
  // Reset consecutive error counter for new config
  consecutiveErrors = 0

  // Start grace period to ignore transient errors
  gracePeriodTimeoutId = window.setTimeout(() => {
    gracePeriodTimeoutId = null
    consecutiveErrors = 0 // Also reset when grace period ends
  }, GRACE_PERIOD)

  // Refresh video based on current mode
  videoRestarting.value = true

  // 如果正在进行模式切换，不需要在这里处理（WebRTCReady 事件会处理）
  if (isModeSwitching.value) {
    console.log('[StreamConfigApplied] Mode switch in progress, waiting for WebRTCReady')
    return
  }

  if (videoMode.value !== 'mjpeg') {
    // In WebRTC mode, reconnect WebRTC (session was closed due to config change)
    // connectWebRTCSerial() will wait on stream.webrtc_ready when gate is enabled.
    await switchToWebRTC(videoMode.value)
  } else {
    // In MJPEG mode, refresh the MJPEG stream
    refreshVideo()
  }

  videoRestarting.value = false

  toast.success(t('console.videoRestarted'), {
    description: `${data.device} - ${data.resolution[0]}x${data.resolution[1]} @ ${formatFpsValue(data.fps)}fps`,
    duration: 3000,
  })
}

// 处理 WebRTC 就绪事件 - 这是后端真正准备好接受 WebRTC 连接的信号
function handleWebRTCReady(data: { codec: string; hardware: boolean; transition_id?: string }) {
  console.log(`[WebRTCReady] Backend ready: codec=${data.codec}, hardware=${data.hardware}, transition_id=${data.transition_id || '-'}`)
  pendingWebRTCReadyGate = false
  videoSession.onWebRTCReady(data)
}

function handleStreamModeReady(data: { transition_id: string; mode: string }) {
  videoSession.onModeReady(data)
  if (data.mode === 'mjpeg') {
    pendingWebRTCReadyGate = false
  }
  videoRestarting.value = false
}

function handleStreamModeSwitching(data: { transition_id: string; to_mode: string; from_mode: string }) {
  // External mode switches: keep UI responsive and avoid black flash
  if (!isModeSwitching.value) {
    videoRestarting.value = true
    videoLoading.value = true
    captureFrameOverlay().catch(() => {})
  }
  pendingWebRTCReadyGate = true
  videoSession.onModeSwitching(data)
}

function handleStreamStateChanged(data: any) {
  const state = typeof data?.state === 'string' ? data.state : ''
  const reason = typeof data?.reason === 'string' && data.reason.length > 0 ? data.reason : null
  const nextRetry = typeof data?.next_retry_ms === 'number' && data.next_retry_ms > 0
    ? data.next_retry_ms
    : null

  streamSignalReason.value = reason
  streamNextRetryMs.value = nextRetry

  const previous = streamSignalState.value

  switch (state) {
    case 'streaming':
    case 'ready':
    case 'uninitialized':
      streamSignalState.value = 'ok'
      break
    case 'no_signal':
      streamSignalState.value = 'no_signal'
      break
    case 'device_lost':
      streamSignalState.value = 'device_lost'
      break
    case 'device_busy':
      streamSignalState.value = 'device_busy'
      break
  }

  if (state === 'error') {
    videoError.value = true
    videoErrorMessage.value = t('console.streamError')
  } else if (state === 'no_signal' && videoMode.value !== 'mjpeg') {
    cancelWebRTCRecovery()
    videoRestarting.value = false
    videoError.value = false
    videoErrorMessage.value = ''
  } else if (state === 'device_busy' && videoMode.value !== 'mjpeg') {
    cancelWebRTCRecovery()
    videoRestarting.value = true
    videoLoading.value = true
    videoError.value = false
    videoErrorMessage.value = ''
    if (previous !== 'device_busy') {
      captureFrameOverlay().catch(() => {})
    }
  } else if (state === 'device_lost' && videoMode.value !== 'mjpeg') {
    if (webrtcRecoveryTimerId === null && webrtcRecoveryAttempts === 0) {
      scheduleWebRTCRecovery()
    }
  } else if (state === 'streaming') {
    cancelWebRTCRecovery()
    videoError.value = false
    videoErrorMessage.value = ''
    videoRestarting.value = false
    if (
      videoMode.value === 'mjpeg'
      && (previous === 'no_signal' || previous === 'device_lost' || previous === 'device_busy')
    ) {
      refreshVideo()
    } else if (
      videoMode.value !== 'mjpeg'
      && (previous === 'no_signal' || previous === 'device_busy' || previous === 'device_lost')
    ) {
      if (webrtc.isConnected.value && !webrtc.isConnecting.value) {
        void rebindWebRTCVideo().then(() => {
          videoLoading.value = false
        })
      } else if (!webrtc.isConnected.value && !webrtc.isConnecting.value) {
        void connectWebRTCSerial('stream recovered').then(async (ok) => {
          if (ok) {
            await rebindWebRTCVideo()
            videoLoading.value = false
          } else if (webrtcRecoveryTimerId === null && webrtcRecoveryAttempts === 0) {
            scheduleWebRTCRecovery()
          }
        })
      }
    }
  }
}

const showSignalOverlay = computed(() => streamSignalState.value !== 'ok')

const signalOverlayInfo = computed(() => {
  const reason = streamSignalReason.value
  const reasonHintKey = reason ? `console.signal.reason.${reason}` : ''
  const hint = reasonHintKey && te(reasonHintKey) ? t(reasonHintKey) : ''

  switch (streamSignalState.value) {
    case 'no_signal':
      return {
        title: t('console.signal.noSignal.title'),
        detail: t('console.signal.noSignal.detail'),
        hint,
        tone: 'info' as const,
      }
    case 'device_lost':
      return {
        title: t('console.signal.deviceLost.title'),
        detail: t('console.signal.deviceLost.detail'),
        hint,
        tone: 'error' as const,
      }
    case 'device_busy':
      return {
        title: t('console.signal.deviceBusy.title'),
        detail: t('console.signal.deviceBusy.detail'),
        hint,
        tone: 'info' as const,
      }
    default:
      return { title: '', detail: '', hint: '', tone: 'info' as const }
  }
})

function handleStreamStatsUpdate(data: any) {
  // Always update clients count in store (for MJPEG mode display)
  if (typeof data.clients === 'number') {
    systemStore.updateStreamClients(data.clients)
  }

  // Only update FPS from MJPEG stats when in MJPEG mode
  // In WebRTC mode, FPS is updated from WebRTC stats
  if (videoMode.value !== 'mjpeg') {
    // Still update clientsStats for display purposes, but don't touch backendFps
    if (data.clients_stat && typeof data.clients_stat === 'object') {
      clientsStats.value = data.clients_stat
    }
    return
  }

  if (data.clients_stat && typeof data.clients_stat === 'object') {
    clientsStats.value = data.clients_stat
    const myStats = data.clients_stat[myClientId]
    if (myStats) {
      backendFps.value = myStats.fps || 0
    } else {
      const fpsList = Object.values(data.clients_stat)
        .map((s: any) => s?.fps || 0)
        .filter(f => f > 0)
      backendFps.value = fpsList.length > 0 ? Math.min(...fpsList) : 0
    }
  } else {
    backendFps.value = 0
  }
}

// Track if we've received the initial device_info
let initialDeviceInfoReceived = false
let initialModeRestoreDone = false
let initialModeRestoreInProgress = false

function normalizeServerMode(mode: string | undefined): VideoMode | null {
  if (!mode) return null
  if (mode === 'webrtc') return 'h264'
  if (mode === 'mjpeg' || mode === 'h264' || mode === 'h265' || mode === 'vp8' || mode === 'vp9') {
    return mode
  }
  return null
}

async function restoreInitialMode(serverMode: VideoMode) {
  if (initialModeRestoreDone || initialModeRestoreInProgress) return
  initialModeRestoreInProgress = true

  try {
    initialDeviceInfoReceived = true
    if (serverMode !== videoMode.value) {
      videoMode.value = serverMode
      localStorage.setItem('videoMode', serverMode)
    }

    if (serverMode !== 'mjpeg') {
      await connectWebRTCOnly(serverMode)
    } else if (mjpegTimestamp.value === 0) {
      refreshVideo()
    }

    initialModeRestoreDone = true
  } finally {
    initialModeRestoreInProgress = false
  }
}

function handleDeviceInfo(data: any) {
  const prevAudioStreaming = systemStore.audio?.streaming ?? false
  const prevAudioDevice = systemStore.audio?.device ?? null
  systemStore.updateFromDeviceInfo(data)
  ttydStatus.value = data.ttyd ?? null

  const nextAudioStreaming = systemStore.audio?.streaming ?? false
  const nextAudioDevice = systemStore.audio?.device ?? null
  if (
    prevAudioStreaming !== nextAudioStreaming ||
    prevAudioDevice !== nextAudioDevice
  ) {
    void handleAudioStateChanged({
      streaming: nextAudioStreaming,
      device: nextAudioDevice,
    })
  }

  // Skip mode sync if video config is being changed
  // This prevents false-positive mode changes during config switching
  if (data.video?.config_changing) {
    return
  }

  // Sync video mode from server's stream_mode
  if (data.video?.stream_mode) {
    const serverMode = normalizeServerMode(data.video.stream_mode)
    if (!serverMode) return

    if (!initialDeviceInfoReceived) {
      initialDeviceInfoReceived = true
      if (!initialModeRestoreDone && !initialModeRestoreInProgress) {
        void restoreInitialMode(serverMode)
        return
      }
    }

    if (initialModeRestoreInProgress) return
    if (serverMode !== videoMode.value) {
      syncToServerMode(serverMode)
    }
  }
}

// Handle stream mode change event from server (WebSocket broadcast)
function handleStreamModeChanged(data: { mode: string; previous_mode: string }) {
  const newMode = normalizeServerMode(data.mode)
  if (!newMode) return

  // 如果正在进行模式切换，忽略这个事件（这是我们自己触发的切换产生的）
  if (isModeSwitching.value) {
    console.log('[StreamModeChanged] Mode switch in progress, ignoring event')
    return
  }

  // Show toast notification only if this is an external mode change
  toast.info(t('console.streamModeChanged'), {
    description: t('console.streamModeChangedDesc', { mode: data.mode.toUpperCase() }),
    duration: 5000,
  })

  // Switch to new mode (external sync handled by device_info after mode_ready)
  if (newMode !== videoMode.value) {
    syncToServerMode(newMode)
  }
}

// 标记是否正在刷新视频（用于忽略清空 src 时触发的 error 事件）
let isRefreshingVideo = false
// 标记是否正在切换模式（防止竞态条件和 503 错误）
const isModeSwitching = videoSession.localSwitching

function reloadPage() {
  window.location.reload()
}

function refreshVideo() {
  backendFps.value = 0
  videoError.value = false
  videoErrorMessage.value = ''
  mjpegFrameReceived.value = false

  // Update timestamp to force MJPEG reconnection via reactive URL
  isRefreshingVideo = true
  videoLoading.value = true
  mjpegTimestamp.value = Date.now()

  // For MJPEG streams, the 'load' event fires when first frame arrives
  // But on reconnection it may not fire again, so use a timeout as fallback
  setTimeout(() => {
    isRefreshingVideo = false
    // Clear loading state after timeout - if stream failed, error handler will show error
    if (videoLoading.value) {
      videoLoading.value = false
    }
  }, 1500)
}

// MJPEG URL with cache-busting timestamp (reactive)
// Only return valid URL when in MJPEG mode and the backend reports a
// healthy stream.  When the backend goes offline (no_signal / device_lost
// / device_busy) we deliberately return an empty string so the `<img>`
// tag has no `src` and the 4-state overlay fully owns the video area —
// no more fake placeholder JPEG peeking through.
const mjpegTimestamp = ref(0)
const mjpegUrl = computed(() => {
  if (videoMode.value !== 'mjpeg') {
    return '' // Don't load MJPEG when in H264 mode
  }
  if (mjpegTimestamp.value === 0) {
    return '' // Don't load until refreshVideo() is called
  }
  if (streamSignalState.value !== 'ok') {
    return '' // Backend is offline; let the overlay own the viewport
  }
  return `${streamApi.getMjpegUrl(myClientId)}&t=${mjpegTimestamp.value}`
})

// Connect to WebRTC without changing server mode (for new clients joining existing session)
async function connectWebRTCOnly(codec: VideoMode = 'h264') {
  // 清除 MJPEG 相关的定时器
  if (retryTimeoutId !== null) {
    clearTimeout(retryTimeoutId)
    retryTimeoutId = null
  }
  if (gracePeriodTimeoutId !== null) {
    clearTimeout(gracePeriodTimeoutId)
    gracePeriodTimeoutId = null
  }
  retryCount = 0
  consecutiveErrors = 0

  // 停止 MJPEG 流 - 重置 timestamp 以停止请求
  mjpegTimestamp.value = 0
  if (videoRef.value) {
    videoRef.value.src = ''
    videoRef.value.removeAttribute('src')
  }

  videoLoading.value = true
  videoError.value = false
  videoErrorMessage.value = ''

  try {
    const success = await connectWebRTCSerial('connectWebRTCOnly')
    if (success) {
      toast.success(t('console.webrtcConnected'), {
        description: t('console.webrtcConnectedDesc'),
        duration: 3000,
      })

      // 强制重新绑定视频（即使 track 已存在）
      // 这解决了页面返回时视频不显示的问题
      await rebindWebRTCVideo()

      videoLoading.value = false
      videoMode.value = codec
      unifiedAudio.switchMode('webrtc')
    } else {
      throw new Error('WebRTC connection failed')
    }
  } catch {
    markWebRTCFailure(t('console.webrtcFailed'))
  }
}

// 强制重新绑定 WebRTC 视频到视频元素
// 解决页面切换后视频不显示的问题
async function rebindWebRTCVideo() {
  if (!webrtcVideoRef.value) return

  // 先清空再重新绑定，确保浏览器重新渲染
  webrtcVideoRef.value.srcObject = null
  await nextTick()

  if (webrtc.videoTrack.value) {
    const stream = webrtc.getMediaStream()
    if (stream) {
      webrtcVideoRef.value.srcObject = stream
      try {
        await webrtcVideoRef.value.play()
      } catch {
        // AbortError is expected when switching modes quickly, ignore it
      }
      await waitForVideoFirstFrame(webrtcVideoRef.value, 2000)
      clearFrameOverlay()
    }
  }
}

// WebRTC video mode handling (switches server mode)
async function switchToWebRTC(codec: VideoMode = 'h264') {
  // 清除 MJPEG 相关的定时器，防止切换后重新加载 MJPEG
  if (retryTimeoutId !== null) {
    clearTimeout(retryTimeoutId)
    retryTimeoutId = null
  }
  if (gracePeriodTimeoutId !== null) {
    clearTimeout(gracePeriodTimeoutId)
    gracePeriodTimeoutId = null
  }
  retryCount = 0
  consecutiveErrors = 0

  // 停止 MJPEG 流 - 重置 timestamp 以停止请求
  mjpegTimestamp.value = 0
  if (videoRef.value) {
    videoRef.value.src = ''
  }

  videoLoading.value = true
  videoError.value = false
  videoErrorMessage.value = ''
  pendingWebRTCReadyGate = true

  try {
    // Step 1: Disconnect existing WebRTC connection FIRST
    // This prevents ICE candidates from being sent to stale sessions
    // when backend closes sessions during codec switch
    if (webrtc.isConnected.value || webrtc.sessionId.value) {
      await webrtc.disconnect()
    }

    // Step 2: Call backend API to switch mode with specific codec
    const modeResp = await streamApi.setMode(codec)
    if (modeResp.transition_id) {
      videoSession.registerTransition(modeResp.transition_id)
      const [mode, webrtcReady] = await Promise.all([
        videoSession.waitForModeReady(modeResp.transition_id, 5000),
        videoSession.waitForWebRTCReady(modeResp.transition_id, 3000),
      ])

      if (mode && mode !== codec && mode !== 'webrtc') {
        console.warn(`[WebRTC] Backend mode_ready returned '${mode}', expected '${codec}', falling back`)
        throw new Error(`Backend switched to unexpected mode: ${mode}`)
      }

      if (!webrtcReady) {
        console.warn('[WebRTC] Backend not ready after timeout, attempting connection anyway')
      } else {
        console.log('[WebRTC] Backend ready signal received, connecting')
      }
    }

    // Step 3: Connect WebRTC with retry (backoff between retries)
    const MAX_ATTEMPTS = 3
    const RETRY_DELAYS = [200, 800]
    let success = false
    for (let attempt = 0; attempt < MAX_ATTEMPTS && !success; attempt++) {
      if (attempt > 0) {
        const delay = RETRY_DELAYS[attempt - 1] ?? RETRY_DELAYS[RETRY_DELAYS.length - 1]
        console.log(`[WebRTC] Connection failed, retrying in ${delay}ms (${MAX_ATTEMPTS - attempt} attempts left)`)
        await new Promise(resolve => setTimeout(resolve, delay))
      }
      success = await connectWebRTCSerial('switchToWebRTC')
    }
    if (success) {
      toast.success(t('console.webrtcConnected'), {
        description: t('console.webrtcConnectedDesc'),
        duration: 3000,
      })

      // 强制重新绑定视频
      await rebindWebRTCVideo()

      videoLoading.value = false

      // Step 4: Switch audio to WebRTC mode
      unifiedAudio.switchMode('webrtc')
    } else {
      throw new Error('WebRTC connection failed')
    }
  } catch {
    markWebRTCFailure(t('console.webrtcFailed'))
  }
}

async function switchToMJPEG() {
  videoLoading.value = true
  videoError.value = false
  videoErrorMessage.value = ''
  pendingWebRTCReadyGate = false

  // Step 1: Call backend API to switch mode FIRST
  // This ensures the MJPEG endpoint will accept our request
  try {
    const modeResp = await streamApi.setMode('mjpeg')
    if (modeResp.transition_id) {
      videoSession.registerTransition(modeResp.transition_id)
      const mode = await videoSession.waitForModeReady(modeResp.transition_id, 5000)
      if (mode && mode !== 'mjpeg') {
        console.warn(`[MJPEG] Backend mode_ready returned '${mode}', expected 'mjpeg'`)
      }
    }
  } catch (e) {
    console.error('Failed to switch to MJPEG mode:', e)
    // Continue anyway - the mode might already be correct
  }

  // Step 2: Disconnect WebRTC if connected or session still exists
  if (webrtc.isConnected.value || webrtc.sessionId.value) {
    await webrtc.disconnect()
  }

  // Clear WebRTC video
  if (webrtcVideoRef.value) {
    webrtcVideoRef.value.srcObject = null
  }

  // Step 3: Switch audio to WebSocket mode
  unifiedAudio.switchMode('ws')

  // Refresh MJPEG stream
  refreshVideo()
}

function syncToServerMode(mode: VideoMode) {
  if (videoSession.localSwitching.value || videoSession.backendSwitching.value) return
  if (mode === videoMode.value) return

  videoMode.value = mode
  localStorage.setItem('videoMode', mode)

  if (mode !== 'mjpeg') {
    connectWebRTCOnly(mode)
  } else {
    refreshVideo()
  }
}

// Handle video mode change
async function handleVideoModeChange(mode: VideoMode) {
  // 防止重复切换和竞态条件
  if (mode === videoMode.value) return
  if (!videoSession.tryStartLocalSwitch()) {
    console.log('[VideoMode] Switch throttled or in progress, ignoring')
    return
  }

  try {
    await captureFrameOverlay()

    // Reset mjpegTimestamp to 0 when switching away from MJPEG
    // This prevents mjpegUrl from returning a valid URL and stops MJPEG requests
    if (mode !== 'mjpeg') {
      mjpegTimestamp.value = 0
      // 完全清理 MJPEG 图片元素
      if (videoRef.value) {
        videoRef.value.src = ''
        videoRef.value.removeAttribute('src')
      }
      // 等待一小段时间确保浏览器取消 pending 请求
      await new Promise(resolve => setTimeout(resolve, 50))
    }

    videoMode.value = mode
    localStorage.setItem('videoMode', mode)

    // All WebRTC modes: h264, h265, vp8, vp9
    if (mode !== 'mjpeg') {
      await switchToWebRTC(mode)
    } else {
      await switchToMJPEG()
    }
  } finally {
    videoSession.endLocalSwitch()
  }
}

// Watch for WebRTC video track changes
watch(() => webrtc.videoTrack.value, async (track) => {
  if (track && webrtcVideoRef.value && videoMode.value !== 'mjpeg') {
    // 使用统一的重新绑定函数
    await rebindWebRTCVideo()
  }
})

// Watch for WebRTC audio track changes - update MediaStream when audio arrives
watch(() => webrtc.audioTrack.value, async (track) => {
  if (track && webrtcVideoRef.value && videoMode.value !== 'mjpeg') {
    // Audio track arrived, update the MediaStream to include it
    const currentStream = webrtcVideoRef.value.srcObject as MediaStream | null
    if (currentStream && currentStream.getAudioTracks().length === 0) {
      // Add audio track to existing stream
      currentStream.addTrack(track)
    }
  }
})

// Watch for WebRTC video element ref changes - set unified audio element
watch(webrtcVideoRef, (el) => {
  unifiedAudio.setWebRTCElement(el)
}, { immediate: true })

// Watch for WebRTC stats to update FPS display
// Watch the ref directly with deep: true to detect property changes
watch(webrtc.stats, (stats) => {
  if (videoMode.value !== 'mjpeg' && stats.framesPerSecond > 0) {
    backendFps.value = Math.round(stats.framesPerSecond)
    // WebRTC is receiving frames, set stream online
    systemStore.setStreamOnline(true)
    // Update aspect ratio from WebRTC video dimensions
    if (stats.frameWidth && stats.frameHeight) {
      videoAspectRatio.value = `${stats.frameWidth}/${stats.frameHeight}`
    }
  }
}, { deep: true })

// Watch for WebRTC connection state changes - auto-reconnect on disconnect
let webrtcReconnectTimeout: ReturnType<typeof setTimeout> | null = null
let webrtcReconnectFailures = 0
watch(() => webrtc.state.value, (newState, oldState) => {
  console.log('[WebRTC] State changed:', oldState, '->', newState)

  // Clear any pending reconnect
  if (webrtcReconnectTimeout) {
    clearTimeout(webrtcReconnectTimeout)
    webrtcReconnectTimeout = null
  }

  // Run before `shouldSuppressAutoReconnect()` so `device_busy` / `videoRestarting`
  // never blocks clearing the loading overlay when ICE becomes connected.
  if (videoMode.value !== 'mjpeg') {
    if (newState === 'connected') {
      systemStore.setStreamOnline(true)
      webrtcReconnectFailures = 0
      if (videoLoading.value) {
        void rebindWebRTCVideo().then(() => {
          videoLoading.value = false
        })
      }
    } else if (newState === 'disconnected' || newState === 'failed') {
      // Don't immediately set offline - wait for potential reconnect
      // The device_info event will eventually sync the correct state
    }
  }

  if (shouldSuppressAutoReconnect()) {
    return
  }

  // Auto-reconnect when disconnected (but was previously connected)
  if (newState === 'disconnected' && oldState === 'connected' && videoMode.value !== 'mjpeg') {
    webrtcReconnectTimeout = setTimeout(async () => {
      if (videoMode.value !== 'mjpeg' && webrtc.state.value === 'disconnected') {
        try {
          const success = await connectWebRTCSerial('auto reconnect')
          if (!success) {
            webrtcReconnectFailures += 1
            if (webrtcReconnectFailures >= 2) {
              markWebRTCFailure(t('console.webrtcFailed'))
            }
          }
        } catch {
          webrtcReconnectFailures += 1
          if (webrtcReconnectFailures >= 2) {
            markWebRTCFailure(t('console.webrtcFailed'))
          }
        }
      }
    }, 1000)
  }

  // Handle direct 'failed' state (ICE or DTLS failure)
  // Allow one automatic retry before marking as failed, consistent with
  // the disconnected->reconnect path that allows 2 failures.
  if (newState === 'failed' && videoMode.value !== 'mjpeg') {
    webrtcReconnectFailures += 1
    if (webrtcReconnectFailures >= 2) {
      markWebRTCFailure(t('console.webrtcFailed'))
    } else {
      webrtcReconnectTimeout = setTimeout(async () => {
        if (videoMode.value !== 'mjpeg' && webrtc.state.value !== 'connected') {
          const success = await connectWebRTCSerial('auto reconnect after failed')
          if (!success) {
            markWebRTCFailure(t('console.webrtcFailed'))
          }
        }
      }, 1000)
    }
  }
})

async function toggleFullscreen() {
  if (!videoContainerRef.value) return
  if (!document.fullscreenElement) {
    await videoContainerRef.value.requestFullscreen()
    isFullscreen.value = true
  } else {
    await document.exitFullscreen()
    isFullscreen.value = false
  }
}

// Theme toggle
function toggleTheme() {
  isDark.value = !isDark.value
  document.documentElement.classList.toggle('dark', isDark.value)
  localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
}

// Logout
async function logout() {
  await authStore.logout()
  router.push('/login')
}

// Change password function
async function handleChangePassword() {
  if (!newPassword.value || !confirmPassword.value) {
    toast.error(t('auth.passwordRequired'))
    return
  }

  if (newPassword.value !== confirmPassword.value) {
    toast.error(t('auth.passwordMismatch'))
    return
  }

  if (newPassword.value.length < 4) {
    toast.error(t('auth.passwordTooShort'))
    return
  }

  changingPassword.value = true
  try {
    await authApi.changePassword(currentPassword.value, newPassword.value)
    toast.success(t('auth.passwordChanged'))

    // Reset form and close dialog
    currentPassword.value = ''
    newPassword.value = ''
    confirmPassword.value = ''
    changePasswordDialogOpen.value = false
  } catch (e) {
    // Error toast is shown by API layer
    console.info('[ChangePassword] Failed:', e)
  } finally {
    changingPassword.value = false
  }
}

// ttyd (web terminal) functions
function openTerminal() {
  if (!ttydStatus.value?.running) return
  showTerminalDialog.value = true
}

function openTerminalInNewTab() {
  window.open('/api/terminal/', '_blank')
}

// ATX actions
async function handlePowerShort() {
  try {
    await atxApi.power('short')
    await systemStore.fetchAtxState()
  } catch {
    // ATX action failed
  }
}

async function handlePowerLong() {
  try {
    await atxApi.power('long')
    await systemStore.fetchAtxState()
  } catch {
    // ATX action failed
  }
}

async function handleReset() {
  try {
    await atxApi.power('reset')
    await systemStore.fetchAtxState()
  } catch {
    // ATX action failed
  }
}

async function handleWol(mac: string) {
  try {
    await atxConfigApi.sendWol(mac)
    toast.success(t('atx.wolSent'))
  } catch (e) {
    toast.error(t('atx.wolFailed'))
  }
}

// HID error handling - silently handle all HID errors
function handleHidError(_error: any, _operation: string) {
  // All HID errors are silently ignored
}

// HID channel selection: use WebRTC DataChannel when available, fallback to WebSocket
function sendKeyboardEvent(type: 'down' | 'up', key: CanonicalKey, modifier?: number) {
  // In WebRTC mode with DataChannel ready, use DataChannel for lower latency
  if (videoMode.value !== 'mjpeg' && webrtc.dataChannelReady.value) {
    const event: HidKeyboardEvent = {
      type: type === 'down' ? 'keydown' : 'keyup',
      key,
      modifier,
    }
    const sent = webrtc.sendKeyboard(event)
    if (sent) return
    // Fallback to WebSocket if DataChannel send failed
  }
  // Use WebSocket as fallback or for MJPEG mode
  hidApi.keyboard(type, key, modifier).catch(err => handleHidError(err, `keyboard ${type}`))
}

function sendMouseEvent(data: { type: 'move' | 'move_abs' | 'down' | 'up' | 'scroll'; x?: number; y?: number; button?: 'left' | 'right' | 'middle'; scroll?: number }) {
  // In WebRTC mode with DataChannel ready, use DataChannel for lower latency
  if (videoMode.value !== 'mjpeg' && webrtc.dataChannelReady.value) {
    const event: HidMouseEvent = {
      type: data.type === 'move_abs' ? 'moveabs' : data.type,
      x: data.x,
      y: data.y,
      button: data.button === 'left' ? 0 : data.button === 'middle' ? 1 : data.button === 'right' ? 2 : undefined,
      scroll: data.scroll,
    }
    const sent = webrtc.sendMouse(event)
    if (sent) return
    // Fallback to WebSocket if DataChannel send failed
  }
  // Use WebSocket as fallback or for MJPEG mode
  hidApi.mouse(data).catch(err => handleHidError(err, `mouse ${data.type}`))
}

// Check if a key should be blocked (prevented from default behavior)
function shouldBlockKey(e: KeyboardEvent): boolean {
  // In fullscreen mode, block all keys for maximum capture
  if (isFullscreen.value) {
    return true
  }

  // Don't block critical browser shortcuts in non-fullscreen mode
  const key = e.key.toUpperCase()

  // Don't block Ctrl+W (close tab), Ctrl+T (new tab), Ctrl+N (new window)
  if (e.ctrlKey && ['W', 'T', 'N'].includes(key)) return false

  // Don't block F11 (browser fullscreen toggle)
  if (key === 'F11') return false

  // Don't block Alt+Tab (already can't capture it anyway)
  if (e.altKey && key === 'TAB') return false

  // Block everything else
  return true
}

// Keyboard/Mouse event handling
function handleKeyDown(e: KeyboardEvent) {
  const container = videoContainerRef.value
  if (!container) return

  // Check focus in non-fullscreen mode
  if (!isFullscreen.value && !container.contains(document.activeElement)) return

  // Try to block the key if appropriate
  if (shouldBlockKey(e)) {
    e.preventDefault()
    e.stopPropagation()
  }

  // Show hint for Meta key in non-fullscreen mode
  if (!isFullscreen.value && (e.metaKey || e.key === 'Meta')) {
    toast.info(t('console.metaKeyHint'), {
      description: t('console.metaKeyHintDesc'),
      duration: 3000,
    })
  }

  const canonicalKey = keyboardEventToCanonicalKey(e.code, e.key)
  if (canonicalKey === undefined) {
    console.warn(`[HID] Unmapped key down: code=${e.code}, key=${e.key}`)
    return
  }

  if (!pressedKeys.value.includes(canonicalKey)) {
    pressedKeys.value = [...pressedKeys.value, canonicalKey]
  }

  const modifierMask = updateModifierMaskForKey(activeModifierMask.value, canonicalKey, true)
  activeModifierMask.value = modifierMask
  sendKeyboardEvent('down', canonicalKey, modifierMask)
}

function handleKeyUp(e: KeyboardEvent) {
  const container = videoContainerRef.value
  if (!container) return

  // Check focus in non-fullscreen mode
  if (!isFullscreen.value && !container.contains(document.activeElement)) return

  // Try to block the key if appropriate
  if (shouldBlockKey(e)) {
    e.preventDefault()
    e.stopPropagation()
  }

  const canonicalKey = keyboardEventToCanonicalKey(e.code, e.key)
  if (canonicalKey === undefined) {
    console.warn(`[HID] Unmapped key up: code=${e.code}, key=${e.key}`)
    return
  }

  pressedKeys.value = pressedKeys.value.filter(k => k !== canonicalKey)

  const modifierMask = updateModifierMaskForKey(activeModifierMask.value, canonicalKey, false)
  activeModifierMask.value = modifierMask
  sendKeyboardEvent('up', canonicalKey, modifierMask)
}

function getActiveVideoElement(): HTMLImageElement | HTMLVideoElement | null {
  return videoMode.value !== 'mjpeg' ? webrtcVideoRef.value : videoRef.value
}

function getActiveVideoAspectRatio(): number | null {
  if (videoMode.value !== 'mjpeg') {
    const video = webrtcVideoRef.value
    if (video?.videoWidth && video.videoHeight) {
      return video.videoWidth / video.videoHeight
    }
  } else {
    const image = videoRef.value
    if (image?.naturalWidth && image.naturalHeight) {
      return image.naturalWidth / image.naturalHeight
    }
  }

  if (!videoAspectRatio.value) return null
  const [width, height] = videoAspectRatio.value.split('/').map(Number)
  if (!width || !height) return null
  return width / height
}

function getRenderedVideoRect() {
  const videoElement = getActiveVideoElement()
  if (!videoElement) return null

  const rect = videoElement.getBoundingClientRect()
  if (rect.width <= 0 || rect.height <= 0) return null

  const contentAspectRatio = getActiveVideoAspectRatio()
  if (!contentAspectRatio) {
    return rect
  }

  const boxAspectRatio = rect.width / rect.height
  if (!Number.isFinite(boxAspectRatio) || boxAspectRatio <= 0) {
    return rect
  }

  if (boxAspectRatio > contentAspectRatio) {
    const width = rect.height * contentAspectRatio
    return {
      left: rect.left + (rect.width - width) / 2,
      top: rect.top,
      width,
      height: rect.height,
    }
  }

  const height = rect.width / contentAspectRatio
  return {
    left: rect.left,
    top: rect.top + (rect.height - height) / 2,
    width: rect.width,
    height,
  }
}

function getAbsoluteMousePosition(e: MouseEvent) {
  const rect = getRenderedVideoRect()
  if (!rect) return null

  const normalizedX = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
  const normalizedY = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height))

  return {
    x: Math.round(normalizedX * 32767),
    y: Math.round(normalizedY * 32767),
  }
}

function handleMouseMove(e: MouseEvent) {
  const videoElement = getActiveVideoElement()
  if (!videoElement) return

  if (mouseMode.value === 'absolute') {
    const absolutePosition = getAbsoluteMousePosition(e)
    if (!absolutePosition) return
    const { x, y } = absolutePosition

    mousePosition.value = { x, y }
    // Queue for throttled sending (absolute mode: just update pending position)
    pendingMouseMove = { type: 'move_abs', x, y }
    requestMouseMoveFlush()
  } else {
    // Relative mode: use movementX/Y when pointer is locked
    if (isPointerLocked.value) {
      const dx = e.movementX
      const dy = e.movementY

      // Only accumulate if there's actual movement
      if (dx !== 0 || dy !== 0) {
        // Accumulate deltas for throttled sending
        accumulatedDelta.x += dx
        accumulatedDelta.y += dy
        requestMouseMoveFlush()
      }

      // Update display position (accumulated delta for display only)
      mousePosition.value = {
        x: mousePosition.value.x + dx,
        y: mousePosition.value.y + dy,
      }
    }
  }
}

function hasPendingMouseMove(): boolean {
  if (mouseMode.value === 'absolute') return pendingMouseMove !== null
  return accumulatedDelta.x !== 0 || accumulatedDelta.y !== 0
}

function flushMouseMoveOnce(): boolean {
  if (mouseMode.value === 'absolute') {
    if (!pendingMouseMove) return false
    sendMouseEvent(pendingMouseMove)
    pendingMouseMove = null
    return true
  }

  if (accumulatedDelta.x === 0 && accumulatedDelta.y === 0) return false

  // Clamp to i8 range (-127 to 127)
  const clampedDx = Math.max(-127, Math.min(127, accumulatedDelta.x))
  const clampedDy = Math.max(-127, Math.min(127, accumulatedDelta.y))

  sendMouseEvent({ type: 'move', x: clampedDx, y: clampedDy })

  // Subtract sent amount (keep remainder for next send if clamped)
  accumulatedDelta.x -= clampedDx
  accumulatedDelta.y -= clampedDy
  return true
}

function scheduleMouseMoveFlush() {
  if (mouseFlushTimer !== null) return

  const interval = mouseMoveSendIntervalMs
  const now = Date.now()
  const elapsed = now - lastMouseMoveSendTime
  const delay = interval <= 0 ? 0 : Math.max(0, interval - elapsed)

  mouseFlushTimer = setTimeout(() => {
    mouseFlushTimer = null

    const burstLimit = mouseMoveSendIntervalMs <= 0 ? 8 : 1
    let sent = false
    for (let i = 0; i < burstLimit; i++) {
      if (!flushMouseMoveOnce()) break
      sent = true
      if (!hasPendingMouseMove()) break
    }
    if (sent) lastMouseMoveSendTime = Date.now()

    if (hasPendingMouseMove()) {
      scheduleMouseMoveFlush()
    }
  }, delay)
}

function requestMouseMoveFlush() {
  const interval = mouseMoveSendIntervalMs
  const now = Date.now()

  if (interval <= 0 || now - lastMouseMoveSendTime >= interval) {
    const burstLimit = interval <= 0 ? 8 : 1
    let sent = false
    for (let i = 0; i < burstLimit; i++) {
      if (!flushMouseMoveOnce()) break
      sent = true
      if (!hasPendingMouseMove()) break
    }
    if (sent) lastMouseMoveSendTime = Date.now()

    if (hasPendingMouseMove()) {
      scheduleMouseMoveFlush()
    }
    return
  }

  scheduleMouseMoveFlush()
}

// Track pressed mouse button for window-level mouseup handling
const pressedMouseButton = ref<'left' | 'right' | 'middle' | null>(null)

function handleMouseDown(e: MouseEvent) {
  e.preventDefault()

  // Auto-focus the video container to enable keyboard input
  const container = videoContainerRef.value
  if (container && document.activeElement !== container) {
    if (typeof container.focus === 'function') {
      container.focus()
    }
  }

  // In relative mode, request pointer lock on first click
  if (mouseMode.value === 'relative' && !isPointerLocked.value) {
    requestPointerLock()
    return
  }

  if (mouseMode.value === 'absolute') {
    const absolutePosition = getAbsoluteMousePosition(e)
    if (absolutePosition) {
      mousePosition.value = absolutePosition
      sendMouseEvent({ type: 'move_abs', ...absolutePosition })
      pendingMouseMove = null
    }
  }

  const button = e.button === 0 ? 'left' : e.button === 2 ? 'right' : 'middle'
  pressedMouseButton.value = button
  sendMouseEvent({ type: 'down', button })
}

function handleMouseUp(e: MouseEvent) {
  e.preventDefault()
  handleMouseUpInternal(e.button)
}

// Window-level mouseup handler (catches releases outside the container)
function handleWindowMouseUp(e: MouseEvent) {
  if (pressedMouseButton.value !== null) {
    handleMouseUpInternal(e.button)
  }
}

function handleMouseUpInternal(rawButton: number) {
  if (mouseMode.value === 'relative' && !isPointerLocked.value) {
    pressedMouseButton.value = null
    return
  }

  const button = rawButton === 0 ? 'left' : rawButton === 2 ? 'right' : 'middle'

  // Only send if this button was actually pressed
  if (pressedMouseButton.value !== button) {
    return
  }

  pressedMouseButton.value = null
  sendMouseEvent({ type: 'up', button })
}

function handleWheel(e: WheelEvent) {
  e.preventDefault()
  const scroll = e.deltaY > 0 ? -1 : 1
  sendMouseEvent({ type: 'scroll', scroll })
}

function handleContextMenu(e: MouseEvent) {
  e.preventDefault()
}

// Pointer Lock API for relative mouse mode
function requestPointerLock() {
  const container = videoContainerRef.value
  if (!container) return

  container.requestPointerLock().catch((err: Error) => {
    toast.error(t('console.pointerLockFailed'), {
      description: err.message,
    })
  })
}

function exitPointerLock() {
  if (document.pointerLockElement) {
    document.exitPointerLock()
  }
}

function handlePointerLockChange() {
  const container = videoContainerRef.value
  isPointerLocked.value = document.pointerLockElement === container

  if (isPointerLocked.value) {
    // Reset mouse position display when locked
    mousePosition.value = { x: 0, y: 0 }
    toast.info(t('console.pointerLocked'), {
      description: t('console.pointerLockedDesc'),
      duration: 3000,
    })
  }
}

function handlePointerLockError() {
  isPointerLocked.value = false
}

function handleFullscreenChange() {
  isFullscreen.value = !!document.fullscreenElement
}

function handleBlur() {
  pressedKeys.value = []
  activeModifierMask.value = 0
  // Release any pressed mouse button when window loses focus
  if (pressedMouseButton.value !== null) {
    const button = pressedMouseButton.value
    pressedMouseButton.value = null
    sendMouseEvent({ type: 'up', button })
  }
}

// Handle cursor visibility change from HidConfigPopover
function handleCursorVisibilityChange(e: Event) {
  const customEvent = e as CustomEvent<{ visible: boolean }>
  cursorVisible.value = customEvent.detail.visible
}

function clampMouseMoveSendIntervalMs(ms: number): number {
  if (!Number.isFinite(ms)) return DEFAULT_MOUSE_MOVE_SEND_INTERVAL_MS
  return Math.max(0, Math.min(1000, Math.floor(ms)))
}

function loadMouseMoveSendIntervalFromStorage(): number {
  const raw = localStorage.getItem('hidMouseThrottle')
  const parsed = raw === null ? NaN : Number(raw)
  return clampMouseMoveSendIntervalMs(
    Number.isFinite(parsed) ? parsed : DEFAULT_MOUSE_MOVE_SEND_INTERVAL_MS
  )
}

function setMouseMoveSendInterval(ms: number) {
  mouseMoveSendIntervalMs = clampMouseMoveSendIntervalMs(ms)

  if (mouseFlushTimer !== null) {
    clearTimeout(mouseFlushTimer)
    mouseFlushTimer = null
  }
  if (hasPendingMouseMove()) {
    requestMouseMoveFlush()
  }
}

function handleMouseSendIntervalChange(e: Event) {
  const customEvent = e as CustomEvent<{ intervalMs: number }>
  setMouseMoveSendInterval(customEvent.detail?.intervalMs)
}

function handleMouseSendIntervalStorage(e: StorageEvent) {
  if (e.key !== 'hidMouseThrottle') return
  setMouseMoveSendInterval(loadMouseMoveSendIntervalFromStorage())
}

function registerInteractionListeners() {
  if (interactionListenersBound) return

  window.addEventListener('keydown', handleKeyDown)
  window.addEventListener('keyup', handleKeyUp)
  window.addEventListener('blur', handleBlur)
  window.addEventListener('mouseup', handleWindowMouseUp)
  window.addEventListener('hidCursorVisibilityChanged', handleCursorVisibilityChange as EventListener)
  window.addEventListener('hidMouseSendIntervalChanged', handleMouseSendIntervalChange as EventListener)
  window.addEventListener('storage', handleMouseSendIntervalStorage)

  document.addEventListener('pointerlockchange', handlePointerLockChange)
  document.addEventListener('pointerlockerror', handlePointerLockError)
  document.addEventListener('fullscreenchange', handleFullscreenChange)

  interactionListenersBound = true
}

function unregisterInteractionListeners() {
  if (!interactionListenersBound) return

  window.removeEventListener('keydown', handleKeyDown)
  window.removeEventListener('keyup', handleKeyUp)
  window.removeEventListener('blur', handleBlur)
  window.removeEventListener('mouseup', handleWindowMouseUp)
  window.removeEventListener('hidCursorVisibilityChanged', handleCursorVisibilityChange as EventListener)
  window.removeEventListener('hidMouseSendIntervalChanged', handleMouseSendIntervalChange as EventListener)
  window.removeEventListener('storage', handleMouseSendIntervalStorage)

  document.removeEventListener('pointerlockchange', handlePointerLockChange)
  document.removeEventListener('pointerlockerror', handlePointerLockError)
  document.removeEventListener('fullscreenchange', handleFullscreenChange)

  interactionListenersBound = false
}

async function activateConsoleView() {
  isConsoleActive.value = true
  registerInteractionListeners()

  // REST snapshot: returning from Settings (or other routes) may have missed WS device_info
  void systemStore.fetchAllStates()
  void configStore.refreshHid().then(() => syncMouseModeFromConfig()).catch(() => {})

  // Ensure HID WebSocket is connected when console becomes active
  if (!hidWs.connected.value) {
    hidWs.connect().catch(() => {})
  }

  if (videoMode.value !== 'mjpeg' && webrtc.videoTrack.value) {
    await nextTick()
    await rebindWebRTCVideo()
    return
  }

  if (
    videoMode.value !== 'mjpeg'
    && !webrtc.isConnected.value
    && !webrtc.isConnecting.value
    && !videoSession.localSwitching.value
    && !videoSession.backendSwitching.value
    && !initialModeRestoreInProgress
  ) {
    await connectWebRTCOnly(videoMode.value)
  }
}

function deactivateConsoleView() {
  isConsoleActive.value = false
  handleBlur()
  exitPointerLock()
  unregisterInteractionListeners()
}

// ActionBar handlers
// (MSD and Settings are now handled by ActionBar component directly)

function handleToggleVirtualKeyboard() {
  virtualKeyboardVisible.value = !virtualKeyboardVisible.value
}

// Virtual keyboard key event handlers
function handleVirtualKeyDown(key: CanonicalKey) {
  // Add to pressedKeys for InfoBar display
  if (!pressedKeys.value.includes(key)) {
    pressedKeys.value = [...pressedKeys.value, key]
  }
}

function handleVirtualKeyUp(key: CanonicalKey) {
  // Remove from pressedKeys
  pressedKeys.value = pressedKeys.value.filter(k => k !== key)
}

function handleToggleMouseMode() {
  // Exit pointer lock when switching away from relative mode
  if (mouseMode.value === 'relative' && isPointerLocked.value) {
    exitPointerLock()
  }

  mouseMode.value = mouseMode.value === 'absolute' ? 'relative' : 'absolute'
  pendingMouseMove = null
  accumulatedDelta = { x: 0, y: 0 }
  // Reset position when switching modes
  lastMousePosition.value = { x: 0, y: 0 }
  mousePosition.value = { x: 0, y: 0 }

  if (mouseMode.value === 'relative') {
    toast.info(t('console.relativeModeHint'), {
      description: t('console.relativeModeHintDesc'),
      duration: 5000,
    })
  }
}

// Lifecycle
onMounted(async () => {
  // 1. 先订阅 WebSocket 事件，再连接（内部会 connect）
  consoleEvents.subscribe()

  // 3. Watch WebSocket connection states and sync to store
  watch([wsConnected, wsNetworkError], ([connected, netError], [_prevConnected, prevNetError]) => {
    systemStore.updateWsConnection(connected, netError)

    // Auto-refresh video when network recovers (wsNetworkError: true -> false)
    if (prevNetError === true && netError === false && connected === true) {
      refreshVideo()
    }
  }, { immediate: true })

  watch([() => hidWs.connected.value, () => hidWs.networkError.value], ([connected, netError]) => {
    systemStore.updateHidWsConnection(connected, netError)
  }, { immediate: true })

  // 4. 其他初始化
  await systemStore.startStream().catch(() => {})
  await systemStore.fetchAllStates()
  await configStore.refreshHid().then(() => {
    syncMouseModeFromConfig()
  }).catch(() => {})

  setMouseMoveSendInterval(loadMouseMoveSendIntervalFromStorage())

  watch(() => configStore.hid?.mouse_absolute, () => {
    syncMouseModeFromConfig()
  })

  const storedTheme = localStorage.getItem('theme')
  if (storedTheme === 'dark' || (!storedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    isDark.value = true
    document.documentElement.classList.add('dark')
  }

  // Note: Video mode is now synced from server via device_info event
  // The handleDeviceInfo function will automatically switch to the server's mode
  // localStorage preference is only used when server mode matches
  try {
    const modeResp = await streamApi.getMode()
    const serverMode = normalizeServerMode(modeResp?.mode)
    if (serverMode && !initialModeRestoreDone && !initialModeRestoreInProgress) {
      await restoreInitialMode(serverMode)
    }
  } catch (err) {
    console.warn('[Console] Failed to fetch stream mode on enter, fallback to WS events:', err)
  }
})

onActivated(() => {
  void activateConsoleView()
})

onDeactivated(() => {
  deactivateConsoleView()
})

onUnmounted(() => {
  deactivateConsoleView()

  // Reset initial device info flag
  initialDeviceInfoReceived = false
  initialModeRestoreDone = false
  initialModeRestoreInProgress = false

  // Clear mouse flush timer
  if (mouseFlushTimer !== null) {
    clearTimeout(mouseFlushTimer)
    mouseFlushTimer = null
  }

  // Clear all timers
  if (retryTimeoutId !== null) {
    clearTimeout(retryTimeoutId)
    retryTimeoutId = null
  }
  if (gracePeriodTimeoutId !== null) {
    clearTimeout(gracePeriodTimeoutId)
    gracePeriodTimeoutId = null
  }
  cancelWebRTCRecovery()
  videoSession.clearWaiters()

  // Reset counters
  retryCount = 0

  consoleEvents.unsubscribe()
  consecutiveErrors = 0

  // Disconnect WebRTC if connected or session still exists
  if (webrtc.isConnected.value || webrtc.sessionId.value) {
    void webrtc.disconnect()
  }

  // Exit pointer lock if active
  exitPointerLock()
})
</script>

<template>
  <div class="h-screen h-dvh flex flex-col bg-background">
    <!-- Header -->
    <header class="shrink-0 border-b border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900">
      <div class="px-2 sm:px-4">
        <div class="h-10 sm:h-14 flex items-center justify-between">
          <!-- Left: Logo -->
          <div class="flex items-center gap-2 sm:gap-6">
            <div class="flex items-center gap-1.5 sm:gap-2">
              <BrandMark size="md" class="hidden sm:block" />
              <BrandMark size="sm" class="sm:hidden" />
              <span class="font-bold text-sm sm:text-lg">One-KVM</span>
            </div>

            <!-- Mobile Status Indicators (inline, minimal) -->
            <div class="flex md:hidden items-center gap-1">
              <StatusCard
                :title="t('statusCard.video')"
                type="video"
                :status="videoStatus"
                :quick-info="videoQuickInfo"
                :error-message="videoErrorMessage"
                :details="videoDetails"
                compact
              />

              <StatusCard
                :title="t('statusCard.hid')"
                type="hid"
                :status="hidStatus"
                :quick-info="hidQuickInfo"
                :details="hidDetails"
                :hover-align="hidHoverAlign"
                compact
              />
            </div>
          </div>

          <!-- Right: Status Cards + User Menu -->
          <div class="flex items-center gap-1 sm:gap-2">
            <div class="hidden md:flex items-center gap-2">
              <!-- Video Status -->
              <StatusCard
                :title="t('statusCard.video')"
                type="video"
                :status="videoStatus"
                :quick-info="videoQuickInfo"
                :error-message="videoErrorMessage"
                :details="videoDetails"
              />

              <!-- Audio Status -->
              <StatusCard
                v-if="systemStore.audio?.available"
                :title="t('statusCard.audio')"
                type="audio"
                :status="audioStatus"
                :quick-info="audioQuickInfo"
                :error-message="audioErrorMessage"
                :details="audioDetails"
              />

              <!-- HID Status -->
              <StatusCard
                :title="t('statusCard.hid')"
                type="hid"
                :status="hidStatus"
                :quick-info="hidQuickInfo"
                :error-message="hidErrorMessage"
                :details="hidDetails"
                :hover-align="hidHoverAlign"
              />

              <!-- MSD Status - Hidden when CH9329 backend (no USB gadget support) -->
              <StatusCard
                v-if="showMsdStatusCard"
                :title="t('statusCard.msd')"
                type="msd"
                :status="msdStatus"
                :quick-info="msdQuickInfo"
                :error-message="msdErrorMessage"
                :details="msdDetails"
                hover-align="end"
              />
            </div>

            <!-- Separator -->
            <div class="h-6 w-px bg-slate-200 dark:bg-slate-700 hidden md:block mx-1" />

            <!-- Theme Toggle -->
            <Button variant="ghost" size="icon" class="h-8 w-8 hidden md:flex" :aria-label="t('common.toggleTheme')" @click="toggleTheme">
              <Sun v-if="isDark" class="h-4 w-4" />
              <Moon v-else class="h-4 w-4" />
            </Button>

            <!-- Language Toggle -->
            <LanguageToggleButton class="h-8 w-8 hidden md:flex" />

            <!-- User Menu -->
            <DropdownMenu>
              <DropdownMenuTrigger as-child>
                <Button variant="outline" size="sm" class="gap-1 sm:gap-1.5 h-7 sm:h-9 px-2 sm:px-3">
                  <span class="text-xs max-w-[60px] sm:max-w-[100px] truncate">{{ authStore.user || 'admin' }}</span>
                  <ChevronDown class="h-3 w-3 sm:h-3.5 sm:w-3.5" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem class="md:hidden" @click="toggleTheme">
                  <Sun v-if="isDark" class="h-4 w-4 mr-2" />
                  <Moon v-else class="h-4 w-4 mr-2" />
                  {{ isDark ? t('settings.lightMode') : t('settings.darkMode') }}
                </DropdownMenuItem>
                <DropdownMenuItem as-child class="md:hidden p-0">
                  <LanguageToggleButton
                    label-mode="next"
                    size="sm"
                    variant="ghost"
                    class="w-full justify-start rounded-sm px-2 py-1.5 font-normal shadow-none"
                  />
                </DropdownMenuItem>
                <DropdownMenuSeparator class="md:hidden" />
                <DropdownMenuItem @click="changePasswordDialogOpen = true">
                  <KeyRound class="h-4 w-4 mr-2" />
                  {{ t('auth.changePassword') }}
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem @click="logout">
                  <LogOut class="h-4 w-4 mr-2" />
                  {{ t('auth.logout') }}
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </div>
    </header>

    <!-- ActionBar -->
    <ActionBar
      :mouse-mode="mouseMode"
      :video-mode="videoMode"
      :ttyd-running="ttydStatus?.running"
      @toggle-fullscreen="toggleFullscreen"
      @toggle-stats="statsSheetOpen = true"
      @toggle-virtual-keyboard="handleToggleVirtualKeyboard"
      @toggle-mouse-mode="handleToggleMouseMode"
      @update:video-mode="handleVideoModeChange"
      @power-short="handlePowerShort"
      @power-long="handlePowerLong"
      @reset="handleReset"
      @wol="handleWol"
      @open-terminal="openTerminal"
    />

    <!-- Main Video Area -->
    <div class="flex-1 overflow-hidden relative">
      <!-- Dot Pattern Background -->
      <div
        class="absolute inset-0 bg-slate-100/80 dark:bg-slate-800/40 opacity-80"
        style="
          background-image: radial-gradient(circle, rgb(148 163 184 / 0.4) 1px, transparent 1px);
          background-size: 20px 20px;
        "
      />

      <!-- Video Container -->
      <div class="relative h-full w-full flex items-center justify-center p-1 sm:p-4">
        <div
          ref="videoContainerRef"
          class="relative bg-black overflow-hidden flex items-center justify-center"
          :style="{
            aspectRatio: videoAspectRatio ?? '16/9',
            maxWidth: '100%',
            maxHeight: '100%',
            minHeight: '120px',
          }"
          :class="{
            'opacity-60': videoLoading || videoError,
            'cursor-crosshair': cursorVisible,
            'cursor-none': !cursorVisible
          }"
          tabindex="0"
          @mousemove="handleMouseMove"
          @mousedown="handleMouseDown"
          @mouseup="handleMouseUp"
          @wheel.prevent="handleWheel"
          @contextmenu="handleContextMenu"
        >
          <!-- MJPEG Stream -->
          <img
            v-show="videoMode === 'mjpeg'"
            ref="videoRef"
            :src="mjpegUrl"
            class="w-full h-full object-contain"
            :alt="t('console.videoAlt')"
            @load="handleVideoLoad"
            @error="handleVideoError"
          />

          <!-- WebRTC Stream (H.264/H.265/VP8/VP9) -->
          <!-- Note: muted is controlled by unifiedAudio, not hardcoded -->
          <video
            v-show="videoMode !== 'mjpeg'"
            ref="webrtcVideoRef"
            class="w-full h-full object-contain"
            autoplay
            playsinline
          />

          <!-- Last-frame overlay (reduces black flash when switching modes) -->
          <img
            v-if="frameOverlayUrl"
            :src="frameOverlayUrl"
            class="absolute inset-0 w-full h-full object-contain pointer-events-none"
            alt=""
          />

          <!-- Loading Overlay with smooth transition and visual feedback -->
          <Transition name="fade">
            <div
              v-if="videoLoading"
              class="absolute inset-0 flex flex-col items-center justify-center bg-black/70 backdrop-blur-sm transition-opacity duration-300"
            >
              <!-- Animated scan line for visual feedback -->
              <div class="absolute inset-0 overflow-hidden pointer-events-none">
                <div class="absolute w-full h-0.5 bg-gradient-to-r from-transparent via-primary/40 to-transparent animate-pulse" style="top: 50%; animation-duration: 1.5s;" />
              </div>

              <Spinner class="h-10 w-10 sm:h-16 sm:w-16 text-white mb-2 sm:mb-4" />
              <p class="text-white/90 text-sm sm:text-lg font-medium text-center px-4">
                {{ webrtcLoadingMessage }}
              </p>
              <p class="text-white/50 text-xs sm:text-sm mt-1 sm:mt-2">
                {{ t('console.pleaseWait') }}
              </p>
            </div>
          </Transition>

          <!--
            Canonical 4-state signal overlay (no_signal / device_lost /
            device_busy).  Fully covers the video area with a solid dim
            backdrop so the browser never shows a frozen last frame or a
            transparent video element peeking through — the MJPEG `<img>`
            has its `src` cleared the moment the backend goes offline and
            the WebRTC track is simply obscured.  Sits below the loading /
            error overlays so those take precedence when both apply.
          -->
          <Transition name="fade">
            <div
              v-if="showSignalOverlay && !videoLoading && !videoError"
              class="absolute inset-0 flex flex-col items-center justify-center gap-3 p-4 transition-opacity duration-300 pointer-events-none"
              :class="{
                'bg-black/80 backdrop-blur-sm': signalOverlayInfo.tone === 'error',
                'bg-black/70 backdrop-blur-sm': signalOverlayInfo.tone !== 'error',
              }"
            >
              <MonitorOff
                class="h-10 w-10 sm:h-16 sm:w-16"
                :class="{
                  'text-slate-200': signalOverlayInfo.tone === 'info',
                  'text-red-300': signalOverlayInfo.tone === 'error',
                }"
              />
              <div class="text-center max-w-md">
                <p
                  class="font-semibold text-sm sm:text-lg text-white"
                >{{ signalOverlayInfo.title }}</p>
                <p
                  class="text-xs sm:text-sm mt-1 sm:mt-2"
                  :class="{
                    'text-slate-200/80': signalOverlayInfo.tone === 'info',
                    'text-red-100/80': signalOverlayInfo.tone === 'error',
                  }"
                >{{ signalOverlayInfo.detail }}</p>
                <p
                  v-if="signalOverlayInfo.hint"
                  class="text-[11px] sm:text-xs mt-2 text-white/50"
                >{{ signalOverlayInfo.hint }}</p>
              </div>
            </div>
          </Transition>

          <!-- Error Overlay with smooth transition and detailed info -->
          <Transition name="fade">
            <div
              v-if="videoError && !videoLoading"
              class="absolute inset-0 flex flex-col items-center justify-center bg-black/85 text-white gap-4 transition-opacity duration-300 p-4"
            >
              <MonitorOff class="h-10 w-10 sm:h-16 sm:w-16 text-slate-400" />
              <div class="text-center max-w-md px-2">
                <p class="font-medium text-sm sm:text-lg mb-1 sm:mb-2">{{ t('console.connectionFailed') }}</p>
                <p class="text-xs sm:text-sm text-slate-300 mb-2 sm:mb-3">{{ t('console.connectionFailedDesc') }}</p>
                <!-- Expandable error details -->
                <div v-if="videoErrorMessage" class="bg-slate-800/60 rounded-lg p-3 text-left">
                  <p class="text-xs text-slate-400 mb-1">{{ t('console.errorDetails') }}:</p>
                  <p class="text-sm text-slate-300 font-mono break-all">{{ videoErrorMessage }}</p>
                </div>
              </div>
              <div class="flex gap-2">
                <Button variant="secondary" size="sm" @click="reloadPage">
                  <RefreshCw class="h-4 w-4 mr-2" />
                  {{ t('console.reconnect') }}
                </Button>
              </div>
            </div>
          </Transition>
        </div>
      </div>
    </div>

    <!-- Virtual Keyboard - Above InfoBar when attached, or in body when floating -->
    <Teleport :to="virtualKeyboardAttached ? '#keyboard-anchor' : 'body'" :disabled="virtualKeyboardAttached">
      <VirtualKeyboard
        v-if="virtualKeyboardVisible"
        v-model:visible="virtualKeyboardVisible"
        v-model:attached="virtualKeyboardAttached"
        :caps-lock="keyboardLed.capsLock"
        :pressed-keys="pressedKeys"
        :consumer-enabled="virtualKeyboardConsumerEnabled"
        @key-down="handleVirtualKeyDown"
        @key-up="handleVirtualKeyUp"
      />
    </Teleport>

    <!-- Anchor for attached keyboard -->
    <div id="keyboard-anchor"></div>

    <!-- InfoBar (Status Bar) -->
    <InfoBar
      :pressed-keys="pressedKeys"
      :caps-lock="keyboardLed.capsLock"
      :num-lock="keyboardLed.numLock"
      :scroll-lock="keyboardLed.scrollLock"
      :keyboard-led-enabled="keyboardLedEnabled"
      :mouse-position="mousePosition"
      :debug-mode="false"
    />

    <!-- Stats Sheet -->
    <StatsSheet
      v-model:open="statsSheetOpen"
      :video-mode="videoMode"
      :mjpeg-fps="backendFps"
      :ws-latency="0"
      :webrtc-stats="webrtc.stats.value"
    />

    <!-- Terminal Dialog -->
    <Dialog v-model:open="showTerminalDialog">
      <DialogContent class="w-[98vw] sm:w-[95vw] max-w-5xl h-[90dvh] sm:h-[85dvh] max-h-[720px] p-0 flex flex-col overflow-hidden">
        <DialogHeader class="px-3 sm:px-4 py-2 sm:py-3 border-b shrink-0">
          <DialogTitle class="flex items-center justify-between w-full">
            <div class="flex items-center gap-2">
              <Terminal class="h-4 w-4 sm:h-5 sm:w-5" />
              <span class="text-sm sm:text-base">{{ t('extensions.ttyd.title') }}</span>
            </div>
            <Button
              variant="ghost"
              size="icon"
              class="h-7 w-7 sm:h-8 sm:w-8 mr-6 sm:mr-8"
              @click="openTerminalInNewTab"
              :aria-label="t('extensions.ttyd.openInNewTab')"
              :title="t('extensions.ttyd.openInNewTab')"
            >
              <ExternalLink class="h-3.5 w-3.5 sm:h-4 sm:w-4" />
            </Button>
          </DialogTitle>
        </DialogHeader>
        <div class="flex-1 min-h-0">
          <iframe
            v-if="showTerminalDialog"
            src="/api/terminal/"
            class="w-full h-full border-0"
            allow="clipboard-read; clipboard-write"
            scrolling="no"
          />
        </div>
      </DialogContent>
    </Dialog>

    <!-- Change Password Dialog -->
    <Dialog v-model:open="changePasswordDialogOpen">
      <DialogContent class="w-[95vw] max-w-md">
        <DialogHeader>
          <DialogTitle>{{ t('auth.changePassword') }}</DialogTitle>
        </DialogHeader>
        <div class="space-y-3 sm:space-y-4 py-2 sm:py-4">
          <div class="space-y-2">
            <Label for="currentPassword">{{ t('auth.currentPassword') }}</Label>
            <Input
              id="currentPassword"
              v-model="currentPassword"
              type="password"
              :placeholder="t('auth.currentPasswordPlaceholder')"
            />
          </div>
          <div class="space-y-2">
            <Label for="newPassword">{{ t('auth.newPassword') }}</Label>
            <Input
              id="newPassword"
              v-model="newPassword"
              type="password"
              :placeholder="t('auth.newPasswordPlaceholder')"
            />
          </div>
          <div class="space-y-2">
            <Label for="confirmPassword">{{ t('auth.confirmPassword') }}</Label>
            <Input
              id="confirmPassword"
              v-model="confirmPassword"
              type="password"
              :placeholder="t('auth.confirmPasswordPlaceholder')"
            />
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" @click="changePasswordDialogOpen = false">
            {{ t('common.cancel') }}
          </Button>
          <Button @click="handleChangePassword" :disabled="changingPassword">
            <Loader2 v-if="changingPassword" class="h-4 w-4 mr-2 animate-spin" />
            {{ t('common.confirm') }}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>

  </div>
</template>

<style scoped>
/* Smooth fade transition for video overlays */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
