_backup_script.js

const socket = window.socket || io('/', {
  transports: ['polling']
})
// keep a global reference to avoid redeclaration errors if script loads twice
window.socket = socket
const videoGrid = document.getElementById('video-grid')
// Determine room id: prefer server-provided, else extract last URL segment as in client
const ROOM_ID = (function() {
  if (window.ROOM_ID) return window.ROOM_ID
  const pathSegments = window.location.pathname.split('/').filter(s => s)
  const urlRoomId = pathSegments[pathSegments.length - 1]
  const isValidRoomId = urlRoomId && !['room','video','home'].includes(urlRoomId)
  return isValidRoomId ? urlRoomId : 'default-room'
})()

console.log('Viewinter frontend (backend/public/script.js) starting — ROOM_ID:', ROOM_ID, 'URL:', window.location.href)  

let myPeer
let myPeerInitialized = false
let myStream
const peers = {}
let pendingUsers = []
let myVAD = null
let isTranscriptionEnabled = false
let myUserName = `User${Math.floor(Math.random() * 10000)}`
let myUserId = null
let myTargetLanguage = '' // Target language for translation
const videoContainers = new Map() // Map userId -> container element

// Anime4K low-resolution decision threshold (only enhance if both width and height are <= these)
const ANIME4K_LOW_RES_THRESHOLD = { maxWidth: 480, maxHeight: 360 }

function isVideoLowResolution(videoEl) {
  const w = videoEl?.videoWidth || videoEl?.clientWidth || 0
  const h = videoEl?.videoHeight || videoEl?.clientHeight || 0
  if (!w || !h) return null // unknown yet (metadata not loaded)
  return (w <= ANIME4K_LOW_RES_THRESHOLD.maxWidth && h <= ANIME4K_LOW_RES_THRESHOLD.maxHeight)
}

// Global Anime4K state shared across functions
let globalAnimeState = {
  enabled: false,
  streams: new Map(), // userId -> { worker, workerReady, loopId, shuttingDown, sizeLocked }
  shaderLoaded: false,
  // Track per-user auto-disable cooldowns so we don't immediately re-enable a stream that was just auto-disabled
  disabledCooldowns: new Map()
} 

// Logging utility
function log(category, message, data = null) {
  const timestamp = new Date().toISOString().split('T')[1].slice(0, -1)
  const logMessage = `[${timestamp}] [${category}] ${message}`
  console.log(logMessage, data || '')
  
  // Also log to UI status panel
  const statusLog = document.getElementById('status-log')
  if (statusLog) {
    const logEntry = document.createElement('div')
    logEntry.textContent = `${timestamp.split('.')[0]} ${category}: ${message}`
    statusLog.insertBefore(logEntry, statusLog.firstChild)
    
    // Keep only last 10 entries
    while (statusLog.children.length > 10) {
      statusLog.removeChild(statusLog.lastChild)
    }
  }
}

// Configure ONNX Runtime for VAD
if (typeof ort !== 'undefined') {
  ort.env.wasm.wasmPaths = '/ort/'
  log('INIT', 'ONNX Runtime configured with WASM paths')
}

// Anime4K worker and shader cache (per script2 reference)
const anime4kShaderCandidates = [
  '/ported_shaders/upscale_cnn_x2_s.frag',
  '/ported_shaders/anime4k-webgl.frag'
]
let anime4kShaderCode = null
let anime4kLoadedPath = null
async function ensureShaderLoaded() {
  if (anime4kShaderCode) return anime4kShaderCode
  let lastErr = null
  for (const p of anime4kShaderCandidates) {
    try {
      const res = await fetch(p)
      if (res.ok) {
        anime4kShaderCode = await res.text()
        anime4kLoadedPath = p
        console.info('Loaded Anime4K shader from', p)
        try { setStatus(`Shader loaded: ${p}`, 'info') } catch (e) {}
        return anime4kShaderCode
      } else {
        lastErr = new Error(`Failed to fetch shader ${p}: ${res.status} ${res.statusText}`)
      }
    } catch (err) {
      lastErr = err
    }
  }
  try { setStatus('Failed to load any Anime4K shader', 'error') } catch (e) {}
  throw lastErr || new Error('No Anime4K shader candidates found')
}

// Utility: set a short status message shown in UI
function setStatus(msg, level = 'info') {
  const el = document.getElementById('status-bar')
  if (el) {
    el.textContent = msg
    el.classList.remove('info','error')
    el.classList.add(level)
  }
  console.log('STATUS:', msg)
}

// Test TURN server connectivity
function testTurnServer(turnConfig) {
  return new Promise((resolve, reject) => {
    console.log('Testing TURN config:', turnConfig)
    const pc = new RTCPeerConnection({ iceServers: [turnConfig] })
    let gotRelay = false
    
    pc.onicecandidate = (e) => {
      if (e.candidate) {
        console.log('Test ICE candidate:', e.candidate.type, e.candidate.protocol, e.candidate.address)
        if (e.candidate.type === 'relay') {
          console.log('TURN server is working! Got relay candidate:', e.candidate)
          console.log('✅ TURN server is working! Got relay candidate:', e.candidate)
          try { setStatus('TURN server working (relay candidate obtained)', 'info') } catch(e){}
          gotRelay = true
          pc.close()
          resolve('TURN server working - relay candidate obtained')
        }
      }
    }
    
    pc.onicegatheringstatechange = () => {
      console.log('Test ICE gathering state:', pc.iceGatheringState)
      if (pc.iceGatheringState === 'complete') {
        pc.close()
        if (!gotRelay) {
          try { setStatus('TURN server did not produce relay candidates', 'error') } catch(e){}
          reject('TURN server not producing relay candidates - may be blocked or auth failed')
        }
      }
    }
    
    // Create a dummy data channel to trigger ICE gathering
    pc.createDataChannel('test')
    pc.createOffer().then(offer => pc.setLocalDescription(offer))
    
    // Timeout after 10 seconds
    setTimeout(() => {
      if (!gotRelay) {
        pc.close()
        try { setStatus('TURN server test timeout - likely blocked by firewall/network', 'error') } catch(e){}
        reject('TURN server test timeout - likely blocked by firewall/network')
      }
    }, 10000)
  })
}

async function initializePeer() {
  console.log('\n╔════════════════════════════════════════╗')
  console.log('║   INITIALIZING PEER CONNECTION        ║')
  console.log('╚════════════════════════════════════════╗')
  try {
    console.log('⏳ Waiting for socket connection...')
    await new Promise((resolve) => {
      if (socket && socket.connected) return resolve()
      socket.on('connect', resolve)
      // fallback resolve after 5s to avoid hanging forever
      setTimeout(resolve, 5000)
    })

    console.log('✅ Socket connected or timed out, fetching TURN credentials...')
    const res = await fetch('https://octopus-app-ubcv5.ondigitalocean.app/api/turn-credentials')
    const data = await res.json()

    console.log('✅ Got TURN credentials:', (data.iceServers || []).length, 'servers')
    (data.iceServers || []).forEach((s, idx) => console.log(`  [${idx}] ${s.urls}`))

    const turnServers = (data.iceServers || []).filter(s => s.urls && s.urls.some(u => u.includes('turn')))
    if (turnServers.length > 0) {
      console.log('Testing TURN server connectivity...')
      testTurnServer(turnServers[0]).then(result => console.log('TURN server test result:', result)).catch(err => console.warn('TURN server test failed:', err))
    } else {
      console.warn('NO TURN servers found in ICE config!')
    }

    myPeer = new Peer({
      host: 'octopus-app-ubcv5.ondigitalocean.app',
      path: '/peerjs',
      secure: true,
      config: {
        iceServers: data.iceServers
      }
    })

    setupPeerListeners()
    await startMedia()
  } catch (err) {
    console.error('❌ Failed to initialize peer with TURN:', err)
    console.log('⚠️ Falling back to peer without TURN credentials')
    myPeer = new Peer({
      host: 'octopus-app-ubcv5.ondigitalocean.app',
      path: '/peerjs',
      secure: true
    })
    setupPeerListeners()
    await startMedia()
  }
}

initializePeer()

function setupPeerListeners() {
  myPeer.on('open', id => {
    myPeerInitialized = true
    myUserId = id
    log('PEER', `My peer ID assigned: ${id}`)
    log('SOCKET', `Joining room: ${ROOM_ID}`)
    socket.emit('join-room', ROOM_ID, id, myUserName)

    // If users joined while we were not ready, process them now
    if (pendingUsers.length > 0 && myStream) {
      processPendingUsers()
    }
  })

  myPeer.on('error', err => {
    console.error('PeerJS error:', err)
  })
} 

function startMedia() {
  const myVideo = document.createElement('video')
  myVideo.muted = true
  
  pendingUsers = pendingUsers || []  // Ensure pendingUsers array exists (managed globally) 

  console.log('Starting media access...')

  // Handle initial list of users already in room
  socket.on('room-users', users => {
    console.log('Users already in room:', users)
    if (myStream && users.length > 0) {
      users.forEach(userId => {
        console.log('Connecting to existing user:', userId)
        connectToNewUser(userId, myStream)
      })
    } else if (users.length > 0) {
      // Merge into pending users to call after we get our stream
      pendingUsers = Array.from(new Set([...(pendingUsers || []), ...users]))
      console.log('Stored pending users to call after getting stream:', pendingUsers)
    }
  })

  // Set up user-connected listener BEFORE getting media
  socket.on('user-connected', userId => {
    console.log('User connected:', userId)
    if (!myPeerInitialized) {
      console.log('Peer not initialized yet, queuing user:', userId)
      if (!pendingUsers.includes(userId)) pendingUsers.push(userId)
      return
    }
    if (myStream) {
      connectToNewUser(userId, myStream)
    } else {
      console.log('Waiting for local stream before connecting, queuing user:', userId)
      if (!pendingUsers.includes(userId)) pendingUsers.push(userId)
    }
  })

  socket.on('user-disconnected', userId => {
    console.log('User disconnected:', userId)
    if (peers[userId]) {
      console.log('Closing peer connection and removing video for:', userId)
      peers[userId].close()
      delete peers[userId]
    }
    
    // Remove the video container from videoContainers Map
    const containerData = videoContainers.get(userId)
    if (containerData) {
      console.log('Removing video container for:', userId)
      containerData.container.remove()
      videoContainers.delete(userId)
    } else {
      // Fallback: try to find and remove by video element
      const videoElements = document.querySelectorAll('video')
      videoElements.forEach(video => {
        if (video.dataset.userId === userId) {
          console.log('Removing video element (fallback) for:', userId)
          const container = video.closest('.video-container')
          if (container) {
            container.remove()
          } else {
            video.remove()
          }
        }
      })
    }
  })

  navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
  }).then(stream => {
    console.log('Got local stream')
    myStream = stream
    addVideoStream(myVideo, stream)
    
    // Broadcast username to room
    if (myUserId) {
      socket.emit('update-username', {
        roomId: ROOM_ID,
        userId: myUserId,
        userName: myUserName
      })
      log('USER', `Broadcasted initial username: ${myUserName}`)
    }
    
    // Auto-enable transcription
    isTranscriptionEnabled = true
    updateTranscriptionButton(true)
    initializeVAD()
    log('TRANSCRIPTION', 'Auto-enabled transcription after getting stream')
    
    // Call any users who were in the room before we got our stream
    if (pendingUsers.length > 0) {
      console.log('Calling pending users:', pendingUsers)
      processPendingUsers()
    }

    myPeer.on('call', call => {
      console.log('Receiving call from:', call.peer)
      
      call.answer(stream)
      const video = document.createElement('video')
      video.dataset.userId = call.peer
      
      // Monitor connection state for incoming calls too
      if (call.peerConnection) {
        console.log('Setting up peerConnection event handlers for incoming call from', call.peer)
        console.log('Initial ICE connection state (incoming):', call.peerConnection.iceConnectionState)
        console.log('Initial connection state (incoming):', call.peerConnection.connectionState)
        
        call.peerConnection.oniceconnectionstatechange = () => {
          const state = call.peerConnection.iceConnectionState
          console.log(`🔄 ICE connection state with ${call.peer}:`, state)
          
          if (state === 'failed' || state === 'disconnected') {
            console.error(`Connection ${state} with ${call.peer}`)
          } else if (state === 'connected' || state === 'completed') {
            console.log(`Successfully connected to ${call.peer}!`)
          }
        }
        
        call.peerConnection.onconnectionstatechange = () => {
          console.log(`🔄 Peer connection state with ${call.peer}:`, call.peerConnection.connectionState)
        }
      } else {
        console.error('No peerConnection object for incoming call from', call.peer)
      }
      
      call.on('stream', userVideoStream => {
        console.log('Received remote stream from:', call.peer)
        
        // Check if we already have a video for this user
        const existingVideo = document.querySelector(`video[data-user-id="${call.peer}"]`)
        if (existingVideo) {
          console.log('Already have video element for', call.peer, '- skipping duplicate')
          return
        }
        
        addVideoStream(video, userVideoStream)
      })
      
      call.on('close', () => {
        console.log('Incoming call closed with:', call.peer)
        video.remove()
      })
      
      call.on('error', err => {
        console.error('Incoming call error with', call.peer, ':', err)
      })
      
      peers[call.peer] = call
    })
  }).catch(err => {
    console.error('Media access error:', err)
  })
}

function connectToNewUser(userId, stream) {
  console.log('Calling user:', userId)
  const call = myPeer.call(userId, stream)
  
  if (!call) {
    console.error('Failed to create call - PeerJS may be disconnected')
    return
  }
  
  const video = document.createElement('video')
  
  // Monitor connection state
  if (call.peerConnection) {
    console.log('Setting up peerConnection event handlers for', userId)
    console.log('Initial ICE connection state:', call.peerConnection.iceConnectionState)
    console.log('Initial connection state:', call.peerConnection.connectionState)
    
    call.peerConnection.oniceconnectionstatechange = () => {
      const state = call.peerConnection.iceConnectionState
      console.log(`🔄 ICE connection state with ${userId}:`, state)
      
      if (state === 'failed' || state === 'disconnected') {
        console.error(`Connection ${state} with ${userId}, relay may not be working`)
      } else if (state === 'connected' || state === 'completed') {
        console.log(`Successfully connected to ${userId}!`)
      }
    }
    
    call.peerConnection.onconnectionstatechange = () => {
      console.log(`🔄 Peer connection state with ${userId}:`, call.peerConnection.connectionState)
    }
  } else {
    console.error('No peerConnection object for', userId)
    
    call.peerConnection.onicecandidate = (event) => {
      if (event.candidate) {
        const c = event.candidate
        console.log(`ICE candidate for ${userId}:`, c.type, c.protocol, c.address || 'no-address')
        if (c.type === 'relay') {
          console.log('🎉 RELAY (TURN) CANDIDATE FOUND!', c)
        }
      } else {
        console.log(`ICE candidate gathering complete for ${userId}`)
      }
    }
    
    call.peerConnection.onicegatheringstatechange = () => {
      console.log(`ICE gathering state with ${userId}:`, call.peerConnection.iceGatheringState)
    }
  }
  
  call.on('stream', userVideoStream => {
    console.log('Received stream from new user:', userId)
    
    // Check if we already have a video for this user
    const existingVideo = document.querySelector(`video[data-user-id="${userId}"]`)
    if (existingVideo) {
      console.log('Already have video element for', userId, '- skipping duplicate')
      return
    }
    
    video.dataset.userId = userId  // Tag video with user ID for cleanup
    addVideoStream(video, userVideoStream)
  })
  call.on('close', () => {
    console.log('Call closed with:', userId)
    const container = video.closest('.stream-container')
    if (container) container.remove()
    else video.remove()
  })
  call.on('error', err => {
    console.error('Call error with', userId, ':', err)
  })

  peers[userId] = call
}

function processPendingUsers() {
  if (pendingUsers.length === 0) return
  console.log('Processing pending users:', pendingUsers)
  const usersToConnect = [...pendingUsers]
  pendingUsers = []
  usersToConnect.forEach((userId) => {
    if (myStream) {
      console.log('Connecting to pending user:', userId)
      connectToNewUser(userId, myStream)
    } else {
      console.warn('No local stream available to connect to pending user:', userId)
    }
  })
}

// --- Anime4K per-remote helpers ---
async function enableAnimeForUser(userId) {
  if (!userId || userId === 'local') return

  // Respect a short cooldown after auto-disable to avoid immediate re-enable
  const cooldownUntil = globalAnimeState.disabledCooldowns.get(userId)
  if (cooldownUntil && cooldownUntil > Date.now()) {
    log('ANIME4K', `Skipping enable for ${userId} due to cooldown`, { cooldownUntil })
    return
  }

  if (globalAnimeState.streams.has(userId)) return // already enabled for this user

  const entry = videoContainers.get(userId)
  if (!entry) {
    console.warn('No container found for user to enable Anime4K:', userId)
    return
  }

  const videoEl = entry.container.querySelector('video')
  if (!videoEl) {
    console.warn('No video element found for', userId)
    return
  }

  // Decide whether to enhance based on resolution. If unknown (no metadata), wait for it.
  const lowRes = isVideoLowResolution(videoEl)
  if (lowRes === false) {
    log('ANIME4K', `Skipping Anime4K for ${userId} - resolution too high`, { width: videoEl.videoWidth, height: videoEl.videoHeight })
    return
  } else if (lowRes === null) {
    // Wait for metadata to decide
    videoEl.addEventListener('loadedmetadata', () => {
      const decided = isVideoLowResolution(videoEl)
      if (decided) {
        // Re-call the enable function to continue flow now that resolution is known
        enableAnimeForUser(userId)
      } else {
        log('ANIME4K', `Skipping Anime4K for ${userId} after metadata - not low-res`, { width: videoEl.videoWidth, height: videoEl.videoHeight })
      }
    }, { once: true })
    return
  }

  try {
    await ensureShaderLoaded()
  } catch (err) {
    log('ANIME4K', 'Failed to load shader', err)
    return
  }

  const worker = new Worker('/anime4kWorker.js')
  const state = { worker, workerReady: false, loopId: null, shuttingDown: false, sizeLocked: false }
  globalAnimeState.streams.set(userId, state)

  worker.postMessage({ type: 'load-shader', shaderCode: anime4kShaderCode })

  const canvas = entry.container.querySelector('canvas')
  const ctx = canvas.getContext('2d')

  worker.onmessage = e => {
    const msg = e.data
    if (msg.type === 'shader-ready') {
      state.workerReady = true
      log('ANIME4K', `Worker ready for ${userId}`)
    } else if (msg.type === 'frame' && msg.bitmap) {
      // Ignore frames while we're shutting down for this user to avoid race conditions
      if (state.shuttingDown) { try { msg.bitmap.close && msg.bitmap.close() } catch(_) {} ; return }
      try {
        const dpr = window.devicePixelRatio || 1
        const displayW = canvas.clientWidth || window.innerWidth || 640
        const displayH = canvas.clientHeight || window.innerHeight || 480
        const targetW = Math.max(1, Math.floor(displayW * dpr))
        const targetH = Math.max(1, Math.floor(displayH * dpr))
        if (canvas.width !== targetW || canvas.height !== targetH) {
          canvas.width = targetW
          canvas.height = targetH
        }
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        try { ctx.setTransform(1,0,0,1,0,0) } catch(e) {}
        ctx.imageSmoothingEnabled = true

        const bitmapW = msg.bitmap.width
        const bitmapH = msg.bitmap.height

              // If the source grows beyond the low-res threshold while Anime4K is active, auto-disable for that user
        if (bitmapW > ANIME4K_LOW_RES_THRESHOLD.maxWidth || bitmapH > ANIME4K_LOW_RES_THRESHOLD.maxHeight) {
          log('ANIME4K', `Detected higher-resolution frame for ${userId}; auto-disabling Anime4K for this user`, { bitmapW, bitmapH })
          // Prevent additional frames from being processed while we disable
          state.shuttingDown = true
          try { msg.bitmap.close && msg.bitmap.close() } catch(_) {}
          // set a short cooldown to prevent immediate re-enable
          globalAnimeState.disabledCooldowns.set(userId, Date.now() + 5000)
          // call handler synchronously to avoid transient layout expansion from a processed frame
          try { handleAutoDisable(userId, { reason: 'high-res-detected', bitmapW, bitmapH }) } catch (e) { console.warn('handleAutoDisable error', e) }
          return
        }

        // If not set yet, record initial bitmap size and compute fixed scale to keep framing stable
        if (!state.initialBitmapW || !state.initialBitmapH) {
          state.initialBitmapW = bitmapW
          state.initialBitmapH = bitmapH
          state.fixedScale = Math.min(canvas.width / state.initialBitmapW, canvas.height / state.initialBitmapH)
          state.fixedScale = Math.max(0.01, Math.min(10, state.fixedScale))

          // Lock container's aspect ratio to the source so enabling Anime4K doesn't change visible shape
          try {
            if (entry && entry.container && !state.aspectLocked) {
              // Capture current size and lock the container to the pixel size so turning Anime4K on doesn't expand the layout
              const rect = entry.container.getBoundingClientRect()

              // Disable transition while we set explicit sizes to avoid animated jumps
              entry.container.style.transition = 'none'

              // Lock explicit width/height (not min sizes) so the grid cell keeps the current box and doesn't reflow
              entry.container.style.width = Math.round(rect.width) + 'px'
              entry.container.style.height = Math.round(rect.height) + 'px'
              entry.container.style.boxSizing = 'border-box'

              // Also set stream container to center content and hide overflow so canvas is centered
              const sc = entry.container.querySelector('.stream-container')
              if (sc) {
                sc.style.display = 'flex'
                sc.style.alignItems = 'center'
                sc.style.justifyContent = 'center'
                sc.style.overflow = 'hidden'
              }

              // Keep aspect ratio as a hint (helps maintain proportions) and mark as size-locked
              entry.container.style.aspectRatio = `${state.initialBitmapW} / ${state.initialBitmapH}`
              state.aspectLocked = true
              state.sizeLocked = true
              log('ANIME4K', `Locked container width/height and aspect ratio for ${userId}`, { w: state.initialBitmapW, h: state.initialBitmapH, rect })
            }
          } catch (e) {
            console.warn('Failed to set aspect ratio/min-size for', userId, e)
          }
        } else if (bitmapW !== state.initialBitmapW || bitmapH !== state.initialBitmapH) {
          // Source resolution changed while still within low-res range; update fixedScale and locked aspect/min sizes
          log('ANIME4K', `Source resolution changed for ${userId}; updating scale`, { prevW: state.initialBitmapW, prevH: state.initialBitmapH, bitmapW, bitmapH })
          state.initialBitmapW = bitmapW
          state.initialBitmapH = bitmapH
          state.fixedScale = Math.min(canvas.width / state.initialBitmapW, canvas.height / state.initialBitmapH)
          state.fixedScale = Math.max(0.01, Math.min(10, state.fixedScale))
          try {
            const rect = entry.container.getBoundingClientRect()
            // Update explicit width/height to keep visible size steady when source resolution changes
            entry.container.style.width = Math.round(rect.width) + 'px'
            entry.container.style.height = Math.round(rect.height) + 'px'
            entry.container.style.boxSizing = 'border-box'
            if (state.aspectLocked) entry.container.style.aspectRatio = `${state.initialBitmapW} / ${state.initialBitmapH}`
            state.sizeLocked = true
          } catch (e) {
            console.warn('Failed updating locked sizes for', userId, e)
          }
        }

        // Use fixedScale based on initial bitmap so later higher-res frames don't cause zoom changes
        const drawW = Math.max(1, Math.floor(state.initialBitmapW * state.fixedScale))
        const drawH = Math.max(1, Math.floor(state.initialBitmapH * state.fixedScale))
        const offsetX = Math.floor((canvas.width - drawW) / 2)
        const offsetY = Math.floor((canvas.height - drawH) / 2)

        try {
          ctx.save()
          ctx.imageSmoothingQuality = 'high'
          ctx.translate(0, canvas.height)
          ctx.scale(1, -1)
          // Scale the incoming bitmap to the fixed draw size to preserve stable framing
          ctx.drawImage(msg.bitmap, 0, 0, bitmapW, bitmapH, offsetX, canvas.height - offsetY - drawH, drawW, drawH)
          ctx.restore()
        } catch (e) {
          ctx.drawImage(msg.bitmap, 0, 0, bitmapW, bitmapH, offsetX, offsetY, drawW, drawH)
        }
      } catch (err) {
        console.warn('Failed drawing worker frame for', userId, err)
      }
      try { msg.bitmap.close && msg.bitmap.close() } catch(_) {}
    } else if (msg.type === 'log') {
      log('ANIME4K', msg.message)
    } else if (msg.type === 'error') {
      console.error('Anime4K worker error for', userId, msg.message)
    }
  }

  // Prepare display: show canvas and hide remote video
  if (canvas) {
    canvas.style.display = 'block'
    canvas.style.width = '100%'
    canvas.style.height = '100%'
    canvas.style.objectFit = 'contain'
    canvas.style.objectPosition = 'center center'
  }
  if (videoEl) videoEl.style.display = 'none'

  // Add a small transition to prevent jarring resize when locking min sizes
  try { entry.container.style.transition = 'min-width 150ms ease, min-height 150ms ease' } catch(e) {}

  // Start capture loop
  const capture = document.createElement('canvas')
  const cctx = capture.getContext('2d')

  const loop = async () => {
    if (!state.workerReady) {
      state.loopId = requestAnimationFrame(loop)
      return
    }
    try {
      const w = videoEl.videoWidth || videoEl.clientWidth || 320
      const h = videoEl.videoHeight || videoEl.clientHeight || 240
      if (!w || !h) { state.loopId = requestAnimationFrame(loop); return }
      capture.width = w
      capture.height = h
      cctx.drawImage(videoEl, 0, 0, capture.width, capture.height)
      const img = cctx.getImageData(0, 0, capture.width, capture.height)
      state.worker.postMessage({
        type: 'frame',
        buffer: img.data.buffer,
        inputWidth: capture.width,
        inputHeight: capture.height,
        outputWidth: capture.width,
        outputHeight: capture.height,
        passes: 1
      }, [img.data.buffer])
    } catch (err) {
      console.warn('Failed to send frame to worker for', userId, err)
    }
    state.loopId = requestAnimationFrame(loop)
  }

  state.loopId = requestAnimationFrame(loop)
}

function disableAnimeForUser(userId) {
  const state = globalAnimeState.streams.get(userId)
  const entry = videoContainers.get(userId)
  if (!state) return

  // Prevent any queued frames from being processed and clear size lock marker
  state.shuttingDown = true
  state.sizeLocked = false

  if (state.loopId) cancelAnimationFrame(state.loopId)
  try { state.worker.terminate() } catch (e) {}
  // remove from active streams map now
  globalAnimeState.streams.delete(userId)

  // Restore canvas/video visibility
  if (entry) {
    const canvas = entry.container.querySelector('canvas')
    const videoEl = entry.container.querySelector('video')
    if (canvas) canvas.style.display = 'none'
    if (videoEl) {
      videoEl.style.display = 'block'
      videoEl.style.width = '100%'
      videoEl.style.height = '100%'
      videoEl.style.objectFit = 'contain'
      videoEl.style.objectPosition = 'center center'
    }

    // Restore container aspect ratio and min-size if we had locked it earlier
    try {
      if (state && state.aspectLocked) {
        // Disable transition to avoid lingering animated shrink that causes cropping
        entry.container.style.transition = 'none'

        // Force the container to release any locked pixels (set explicit zeroes)
        entry.container.style.minWidth = '0'
        entry.container.style.minHeight = '0'
        entry.container.style.aspectRatio = 'auto'
        entry.container.style.width = ''
        entry.container.style.height = ''

        const sc = entry.container.querySelector('.stream-container')
        if (sc) {
          sc.style.display = ''
          sc.style.alignItems = ''
          sc.style.justifyContent = ''
          sc.style.overflow = ''
        }

        // Force reflow so the browser recomputes layout immediately
        /* eslint-disable no-unused-expressions */ void entry.container.offsetHeight /* eslint-enable no-unused-expressions */

        // Additional resets to fully release layout anchors
        entry.container.style.minWidth = '0'
        entry.container.style.minHeight = '0'
        entry.container.style.maxWidth = ''
        entry.container.style.maxHeight = ''
        entry.container.style.width = ''
        entry.container.style.height = ''
        entry.container.style.boxSizing = ''

        // Try to ensure the video can resize naturally: clear inline size on the video and replay
        try {
          if (videoEl) {
            videoEl.style.width = ''
            videoEl.style.height = ''
            videoEl.style.objectFit = 'contain'
            // small play/pause cycle can force re-evaluation in some browsers
            videoEl.pause();
            videoEl.play().catch(() => {})
          }
        } catch(e) { console.warn('Error resetting video element styles for', userId, e) }

        // As a final aggressive layout reset, perform a clone-and-replace of the outer container to force immediate reflow
        try {
          const parent = entry.container.parentNode
          if (parent) {
            const next = entry.container.nextSibling
            const label = entry.userLabel
            const subtitle = entry.subtitleOverlay

            // Create a shallow clone of the container (no children) and move the children into it to preserve media nodes/events
            const fresh = entry.container.cloneNode(false)
            while (entry.container.firstChild) {
              fresh.appendChild(entry.container.firstChild)
            }

            if (next) parent.insertBefore(fresh, next)
            else parent.appendChild(fresh)
            parent.removeChild(entry.container)

            // Update our stored reference to the new container
            entry.container = fresh
            videoContainers.set(userId, { container: fresh, userLabel: label, subtitleOverlay: subtitle })

            // Force a synchronous reflow
            void fresh.offsetHeight
          }
        } catch (e) {
          console.warn('Failed replacing container for', userId, e)
        }

        // Clear transition setting to restore normal behavior
        entry.container.style.transition = ''

        state.aspectLocked = false
        log('ANIME4K', `Fully restored layout for ${userId}`)
      }
    } catch (e) {
      console.warn('Failed restoring aspect ratio/min-size for', userId, e)
    }
  }
}

// Handle auto-disable of Anime4K for a single user (e.g., stream became high-res)
function handleAutoDisable(userId, info = {}) {
  const entry = videoContainers.get(userId)
  const state = globalAnimeState.streams.get(userId)
  log('ANIME4K', `Auto-disabling Anime4K for ${userId}`, info)

  if (!entry) return

  // Show a temporary badge to indicate auto-disable reason
  try {
    const notice = document.createElement('div')
    notice.className = 'anime4k-auto-disabled'
    notice.textContent = info.reason === 'high-res-detected' ? 'Upscale paused (high-res)' : 'Upscale paused'
    notice.style.position = 'absolute'
    notice.style.top = '8px'
    notice.style.left = '8px'
    notice.style.padding = '6px 8px'
    notice.style.background = 'rgba(0,0,0,0.6)'
    notice.style.color = '#fff'
    notice.style.borderRadius = '6px'
    notice.style.fontSize = '12px'
    notice.style.zIndex = '60'
    entry.container.appendChild(notice)
    setTimeout(() => { try { notice.remove() } catch(e){} }, 2600)
  } catch (e) { console.warn('Failed to show auto-disable notice for', userId, e) }

  // Mark cooldown to avoid immediate re-enable
  try { globalAnimeState.disabledCooldowns.set(userId, Date.now() + 5000) } catch(e){}

  // Use the same disable path so behavior matches manual disable
  try {
    // If we still have state, set shuttingDown and clear any sizeLocked flag to ensure consistent behavior
    if (state) {
      state.shuttingDown = true
      state.sizeLocked = false
    }

    disableAnimeForUser(userId)

    // Force grid relayout to ensure sizing matches manual-disable flow
    try {
      const g = document.getElementById('video-grid')
      if (g) {
        g.style.display = 'none'
        /* force reflow */ void g.offsetHeight
        g.style.display = ''
      }
    } catch (e) { console.warn('Failed forcing grid relayout during auto-disable', userId, e) }
  } catch (e) {
    console.warn('Error during auto-disable for', userId, e)
  }
}

function addVideoStream(video, stream, opts = {}) {
  log('VIDEO', 'Adding video stream to grid', { tracks: stream.getTracks().length, streamId: stream.id })
  console.log('Adding video stream to grid, tracks:', stream.getTracks().length)
  
  // Outer wrapper for stream and overlays
  const outerContainer = document.createElement('div')
  outerContainer.className = 'video-container'
  // Ensure outer container fills grid cell
  outerContainer.style.width = '100%'
  outerContainer.style.height = '100%'
  outerContainer.style.display = 'block'
  
  const userLabel = document.createElement('div')
  userLabel.className = 'user-label'
  
  const subtitleOverlay = document.createElement('div')
  subtitleOverlay.className = 'subtitle-overlay'
  subtitleOverlay.style.zIndex = '40'
  userLabel.style.zIndex = '41'
  
  // Only show a badge for local preview; remove 'Participant' label for remotes
  const badgeLabel = opts.isLocal ? 'You' : ''
  video.srcObject = stream
  video.playsInline = true
  // Mute by default to allow autoplay in most browsers; users can unmute manually
  video.muted = true
  if (opts.isLocal) video.dataset.userId = 'local'

  // Inner stream container (video + overlays)
  const streamContainer = document.createElement('div')
  streamContainer.className = 'stream-container'
  // Make the stream container fill its parent's area so absolutely positioned media covers it
  streamContainer.style.position = 'relative'
  streamContainer.style.width = '100%'
  streamContainer.style.height = '100%'


  const badge = document.createElement('div')
  badge.className = 'stream-badge is-off'
  badge.textContent = badgeLabel
  badge.style.zIndex = '30'
  if (!opts.isLocal) {
    // hide badge and toggle for remote streams (remove "Participant" / "Remote" text)
    badge.style.display = 'none'
  }

  const toggle = document.createElement('button')
  toggle.className = 'stream-toggle'
  toggle.textContent = 'Anime4K: Off'
  // Hide per-stream toggle for remotes (global control handles them)
  if (!opts.isLocal) {
    toggle.style.display = 'none'
  }
  // Hide local controls that would otherwise overlap the preview
  if (opts.isLocal) {
    toggle.style.display = 'none'
  }



  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  canvas.style.position = 'absolute'
  canvas.style.top = '0'
  canvas.style.left = '0'
  canvas.style.width = '100%'
  canvas.style.height = '100%'
  canvas.style.objectFit = 'contain'
  canvas.style.display = 'none'
  canvas.style.zIndex = '2'
  // keep video visually behind overlays
  video.style.zIndex = '1'

  // append controls and media to the inner stream container
  streamContainer.appendChild(canvas)
  streamContainer.appendChild(video)
  streamContainer.appendChild(badge)
  streamContainer.appendChild(toggle)

  // Ensure local video uses contain and is centered to prevent top-cropping
  if (opts.isLocal) {
    video.style.objectFit = 'contain'
    video.style.objectPosition = 'center center'
    video.style.width = '100%'
    video.style.height = '100%'
    badge.style.display = 'none'
  } else {
    // For remote streams, also prevent crop and center the content
    video.style.objectFit = 'contain'
    video.style.objectPosition = 'center center'
  }

  video.addEventListener('loadedmetadata', () => {
    log('VIDEO', 'Video metadata loaded, attempting to play')
    video.play().then(() => {
      log('VIDEO', 'Video playing successfully')
    }).catch(err => {
      log('VIDEO', 'Video play failed', err)
    })
  })
  
  // assemble and append outer wrapper
  // Put overlays inside the stream container so they overlay the media correctly
  streamContainer.appendChild(userLabel)
  streamContainer.appendChild(subtitleOverlay)
  outerContainer.appendChild(streamContainer)
  const parentSlot = opts.isLocal ? document.getElementById('local-preview-slot') : null
  if (parentSlot && opts.isLocal) {
    // Ensure wrapper fills the slot so percentage-based children size correctly
    outerContainer.style.width = '100%'
    outerContainer.style.height = '100%'
    outerContainer.style.display = 'block'
    outerContainer.style.boxSizing = 'border-box'
    parentSlot.appendChild(outerContainer)
  } else {
    videoGrid.appendChild(outerContainer)
  }

  // Store container reference
  const userId = video.dataset.userId || 'local'
  videoContainers.set(userId, { container: outerContainer, userLabel, subtitleOverlay })

  log('VIDEO', 'Video element appended to grid', { totalVideos: videoGrid.childElementCount, userId })

  // If Anime4K is enabled globally, attempt enabling for this remote user (enableAnimeForUser will check resolution/metadata)
  if (!opts.isLocal && globalAnimeState.enabled) {
    enableAnimeForUser(userId)
  }
}

// VAD and Transcription Functions
async function initializeVAD() {
  if (!myStream) {
    log('VAD', 'Cannot initialize VAD: no stream available')
    return
  }
  
  if (myVAD) {
    log('VAD', 'VAD already initialized, stopping existing instance')
    myVAD.pause()
    myVAD = null
  }
  
  try {
    log('VAD', 'Initializing VAD with MicVAD.new()')
    const vadInstance = await vad.MicVAD.new({
      stream: myStream,
      positiveSpeechThreshold: 0.7,
      negativeSpeechThreshold: 0.35,
      redemptionFrames: 3,
      preSpeechPadFrames: 1,
      minSpeechFrames: 2,
      workletURL: '/vad/vad.worklet.bundle.min.js',
      modelURL: '/vad/silero_vad_legacy.onnx',
      onSpeechStart: () => {
        log('VAD', '🎤 Speech started - beginning recording')
        handleSpeechStart()
        // Add green border to local video
        const localContainer = videoContainers.get('local')
        if (localContainer) {
          localContainer.container.classList.add('speaking')
        }
      },
      onSpeechEnd: (audio) => {
        log('VAD', '⏸️  Speech ended - processing audio', { sampleLength: audio.length })
        handleSpeechEnd(audio)
        // Remove green border from local video
        const localContainer = videoContainers.get('local')
        if (localContainer) {
          localContainer.container.classList.remove('speaking')
        }
      }
    })
    
    await vadInstance.start()
    myVAD = vadInstance
    log('VAD', '✅ VAD initialized and started successfully')
    updateTranscriptionButton(true)
  } catch (error) {
    log('VAD', '❌ VAD initialization failed', error)
    console.error('VAD initialization error:', error)
    updateTranscriptionButton(false)
  }
}

function handleSpeechStart() {
  log('SPEECH', 'Speech detection triggered')
  // Visual indicator could be added here
}

async function handleSpeechEnd(audioData) {
  const timestamp = Date.now()
  log('SPEECH', 'Processing speech chunk', { 
    samples: audioData.length, 
    duration: `${(audioData.length / 16000).toFixed(2)}s`,
    timestamp 
  })
  
  try {
    // Convert Float32Array to WAV blob
    const wavBlob = await float32ToWav(audioData, 16000)
    log('AUDIO', 'Converted audio to WAV', { size: `${(wavBlob.size / 1024).toFixed(2)} KB` })
    
    // Send to backend for transcription
    const sourceLanguage = document.getElementById('source-language')?.value || ''
    log('SOCKET', '📤 Sending transcription request', { 
      roomId: ROOM_ID, 
      userId: myUserId, 
      userName: myUserName,
      sourceLanguage,
      audioSize: `${(wavBlob.size / 1024).toFixed(2)} KB`,
      isTranscriptionEnabled,
      hasMyUserId: !!myUserId,
      hasMyUserName: !!myUserName
    })
    
    socket.emit('transcribe-audio', {
      roomId: ROOM_ID,
      userId: myUserId,
      userName: myUserName,
      sourceLanguage,
      timestamp,
      audio: await blobToBase64(wavBlob)
    })
  } catch (error) {
    log('SPEECH', '❌ Error processing speech', error)
    console.error('Speech processing error:', error)
  }
}

// Audio conversion utilities
function float32ToWav(samples, sampleRate) {
  return new Promise((resolve) => {
    const buffer = new ArrayBuffer(44 + samples.length * 2)
    const view = new DataView(buffer)
    
    // WAV header
    const writeString = (offset, string) => {
      for (let i = 0; i < string.length; i++) {
        view.setUint8(offset + i, string.charCodeAt(i))
      }
    }
    
    writeString(0, 'RIFF')
    view.setUint32(4, 36 + samples.length * 2, true)
    writeString(8, 'WAVE')
    writeString(12, 'fmt ')
    view.setUint32(16, 16, true)
    view.setUint16(20, 1, true)
    view.setUint16(22, 1, true)
    view.setUint32(24, sampleRate, true)
    view.setUint32(28, sampleRate * 2, true)
    view.setUint16(32, 2, true)
    view.setUint16(34, 16, true)
    writeString(36, 'data')
    view.setUint32(40, samples.length * 2, true)
    
    // Convert float samples to 16-bit PCM
    const offset = 44
    for (let i = 0; i < samples.length; i++) {
      const s = Math.max(-1, Math.min(1, samples[i]))
      view.setInt16(offset + i * 2, s < 0 ? s * 0x8000 : s * 0x7FFF, true)
    }
    
    resolve(new Blob([buffer], { type: 'audio/wav' }))
  })
}

function blobToBase64(blob) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result.split(',')[1])
    reader.onerror = reject
    reader.readAsDataURL(blob)
  })
}

// Socket.io event handlers for transcription
socket.on('transcription-result', (data) => {
  log('TRANSCRIPTION', 'Received transcription result', {
    userId: data.userId,
    userName: data.userName,
    text: data.text,
    language: data.language
  })
  
  // Check if translation is needed:
  // - User must have selected a target language (not empty)
  // - Only translate OTHER people's speech (not your own)
  const needsTranslation = myTargetLanguage && myTargetLanguage !== '' && data.userId !== myUserId
  
  if (needsTranslation) {
    // Request translation for other people's speech
    log('TRANSLATION', `Requesting translation from ${data.language || 'auto'} to ${myTargetLanguage}`, {
      speaker: data.userName,
      originalText: data.text.substring(0, 50)
    })
    socket.emit('translate-text', {
      text: data.text,
      sourceLanguage: data.language || '',
      targetLanguage: myTargetLanguage,
      userId: data.userId,
      userName: data.userName
    })
  } else {
    // Display original text (no translation selected OR it's your own speech)
    const reason = !myTargetLanguage || myTargetLanguage === '' ? 'no target language selected' : 'own speech'
    log('TRANSCRIPTION', `Displaying original text (${reason})`)
    displaySubtitle(data.userId, data.userName, data.text)
  }
})

socket.on('transcription-error', (data) => {
  log('TRANSCRIPTION', '❌ Transcription error', data)
})

// Socket listener for translation results
socket.on('translation-result', (data) => {
  log('TRANSLATION', 'Received translation', {
    userId: data.userId,
    original: data.originalText,
    translated: data.translatedText
  })
  
  displaySubtitle(data.userId, data.userName, data.translatedText)
})

socket.on('translation-error', (data) => {
  log('TRANSLATION', '❌ Translation error', data)
  // Fallback to original text
  if (data.originalText) {
    displaySubtitle(data.userId, data.userName, data.originalText)
  }
})

// Socket listener for username updates
socket.on('username-updated', (data) => {
  log('USER', `Username updated for ${data.userId}: ${data.userName}`)
  
  // Update the label for this user's video
  const container = videoContainers.get(data.userId)
  if (container) {
    container.userLabel.textContent = data.userName
    log('USER', `Updated label for ${data.userId} to ${data.userName}`)
  } else {
    log('USER', `No container found for ${data.userId}`, { availableContainers: Array.from(videoContainers.keys()) })
  }
})

function displaySubtitle(userId, userName, text) {
  let container = videoContainers.get(userId)
  
  if (!container) {
    log('SUBTITLE', `⚠️  No container found for user ${userId}`, {
      availableContainers: Array.from(videoContainers.keys()),
      totalContainers: videoContainers.size
    })
    
    // Try to find container by checking all video elements for matching dataset.userId
    const videoElement = document.querySelector(`video[data-user-id="${userId}"]`)
    if (videoElement) {
      log('SUBTITLE', `Found video element for ${userId}, but container not in Map - rebuilding reference`)
      // Container exists but wasn't in Map - this shouldn't happen but let's handle it
      const containerElement = videoElement.closest('.video-container')
      if (containerElement) {
        container = {
          container: containerElement,
          userLabel: containerElement.querySelector('.user-label'),
          subtitleOverlay: containerElement.querySelector('.subtitle-overlay')
        }
        videoContainers.set(userId, container)
        log('SUBTITLE', `Rebuilt container reference for ${userId}`)
      }
    }
    
    if (!container) {
      log('SUBTITLE', `❌ Cannot display subtitle - no video element found for ${userId}`)
      return
    }
  }
  
  log('SUBTITLE', `Displaying subtitle for ${userName}`, { text: text.substring(0, 50) })
  
  // Update user label if needed
  if (container.userLabel.textContent !== userName) {
    container.userLabel.textContent = userName
  }
  
  // Display subtitle
  container.subtitleOverlay.textContent = text
  container.subtitleOverlay.classList.add('active')
  
  // Calculate duration based on text length (average reading speed: 200 words per minute)
  // Minimum 2 seconds, maximum 10 seconds
  const words = text.trim().split(/\s+/).length
  const readingTimeMs = Math.max(2000, Math.min(10000, words * 300))
  
  // Auto-hide after calculated duration
  setTimeout(() => {
    container.subtitleOverlay.classList.remove('active')
  }, readingTimeMs)
}

function updateTranscriptionButton(isActive) {
  const button = document.getElementById('toggle-transcription')
  const indicator = button.querySelector('.status-indicator')
  
  if (isActive) {
    button.textContent = 'Disable Transcription'
    indicator.classList.remove('inactive')
    indicator.classList.add('active')
    button.insertBefore(indicator, button.firstChild)
  } else {
    button.textContent = 'Enable Transcription'
    indicator.classList.remove('active')
    indicator.classList.add('inactive')
    button.insertBefore(indicator, button.firstChild)
  }
}

// UI Event Handlers
document.addEventListener('DOMContentLoaded', () => {
  log('UI', 'DOM loaded, setting up event handlers')
  
  const usernameInput = document.getElementById('username-input')
  const transcriptionBtn = document.getElementById('toggle-transcription')
  const targetLanguageSelect = document.getElementById('target-language')
  
  usernameInput?.addEventListener('change', (e) => {
    myUserName = e.target.value.trim() || 'Anonymous'
    log('USER', `Username set to: ${myUserName}`)
    
    // Update local video label
    const localContainer = videoContainers.get('local')
    if (localContainer) {
      localContainer.userLabel.textContent = myUserName
    }
    
    // Broadcast username to other users
    if (myUserId) {
      socket.emit('update-username', {
        roomId: ROOM_ID,
        userId: myUserId,
        userName: myUserName
      })
      log('USER', `Broadcasted username update to room`)
    }
  })
  
  transcriptionBtn?.addEventListener('click', async () => {
    isTranscriptionEnabled = !isTranscriptionEnabled
    log('TRANSCRIPTION', `Transcription toggled: ${isTranscriptionEnabled}`)
    
    if (isTranscriptionEnabled) {
      await initializeVAD()
    } else {
      if (myVAD) {
        log('VAD', 'Pausing VAD')
        myVAD.pause()
        myVAD = null
      }
      updateTranscriptionButton(false)
    }
  })
  
  const saveTranscriptBtn = document.getElementById('save-transcript')
  saveTranscriptBtn?.addEventListener('click', () => {
    log('TRANSCRIPT', 'Requesting transcript download')
    socket.emit('request-transcript', { roomId: ROOM_ID })
  })
  
  targetLanguageSelect?.addEventListener('change', (e) => {
    myTargetLanguage = e.target.value
    if (myTargetLanguage) {
      log('TRANSLATION', `Translation enabled to: ${myTargetLanguage}`)
    } else {
      log('TRANSLATION', 'Translation disabled')
    }
  })

  // Global Anime4K button control (applies to remote users, not local preview)
  const globalAnimeBtn = document.getElementById('toggle-anime4k')

  globalAnimeBtn?.addEventListener('click', async () => {
    // Toggle state
    globalAnimeState.enabled = !globalAnimeState.enabled
    if (globalAnimeState.enabled) {
      try {
        await ensureShaderLoaded()
      } catch (err) {
        log('ANIME4K', 'Failed to load shader', err)
        alert('Failed to load Anime4K shader; check console')
        globalAnimeState.enabled = false
        return
      }

      // Enable Anime4K for all existing remote streams
      for (const [userId, entry] of videoContainers.entries()) {
        if (userId === 'local') continue
        enableAnimeForUser(userId)
      }
      // Update button state (if it's a button with icon, toggle 'active' class and title)
      if (globalAnimeBtn.tagName === 'BUTTON') {
        globalAnimeBtn.classList.add('active')
        globalAnimeBtn.title = 'Disable Upscale'
        globalAnimeBtn.setAttribute('aria-pressed', 'true')
      } else {
        globalAnimeBtn.textContent = 'Disable Anime4K'
      }

      log('ANIME4K', 'Enabled for remote streams')
    } else {
      // Disable for all
      for (const userId of Array.from(globalAnimeState.streams.keys())) {
        disableAnimeForUser(userId)
      }
      if (globalAnimeBtn.tagName === 'BUTTON') {
        globalAnimeBtn.classList.remove('active')
        globalAnimeBtn.title = 'Enable Upscale'
        globalAnimeBtn.setAttribute('aria-pressed', 'false')
      } else {
        globalAnimeBtn.textContent = 'Enable Upscale'
      }

      log('ANIME4K', 'Disabled for remote streams')
    }
  })
})

// Socket listener for transcript download
socket.on('transcript-data', (data) => {
  log('TRANSCRIPT', 'Received transcript data', { lines: data.transcript.split('\n').length })
  
  // Create blob and trigger download
  const blob = new Blob([data.transcript], { type: 'text/plain' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = data.filename
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  URL.revokeObjectURL(url)
  
  log('TRANSCRIPT', `Downloaded: ${data.filename}`)
})