app.js

/* LIVE PARTY v5.0 */
import { initializeApp } from "https://www.gstatic.com/firebasejs/11.5.0/firebase-app.js";
import { getDatabase, ref, set, get, push, onValue, onChildAdded, remove, onDisconnect }
  from "https://www.gstatic.com/firebasejs/11.5.0/firebase-database.js";

const firebaseConfig = { apiKey: "AIzaSyBGnFw13ko0b4KAs7plpFmHlg0GohowElA", authDomain: "webrtc-cd5af.firebaseapp.com", databaseURL: "https://webrtc-cd5af-default-rtdb.asia-southeast1.firebasedatabase.app", projectId: "webrtc-cd5af" };
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);

const cfAppId = 'e6be1e8812248470630854d4277238af';
const cfAppSecret = '3f671947386a7bf692d8326e509e3797be3c37c295337c98a6414d563c0bfeb3';
const turnId = '86014ad259cbd5b3dbef1f0867bbe15b';

async function fetchIceServers() {
  // NOTE: Cloudflare TURN requires a valid Key ID and Secret.
  // We've moved this to only fire when needed to avoid distracting 401 errors on load.
  if (window._turnLoaded) return;
  try {
    const res = await fetch(`https://rtc.live.cloudflare.com/v1/turn/keys/${turnId}/credentials/generate-ice-servers`, {
      method: "POST", headers: { "Authorization": `Bearer ${cfAppSecret}`, "Content-Type": "application/json" },
      body: JSON.stringify({ ttl: 86400 })
    });
    if (res.status === 401) {
      console.warn("Cloudflare TURN: Unauthorized (401). Falling back to Google/Apple STUN.");
      return;
    }
    const data = await res.json();
    if (data.iceServers) {
      servers.iceServers = [...servers.iceServers, ...data.iceServers];
      logStatus("Cloudflare optimized routes enabled.");
      window._turnLoaded = true;
    }
  } catch (e) {}
}
fetchIceServers(); // Start pre-fetching ICE servers immediately for Jio/Airtel compatibility

const servers = {
  iceServers: [
    { urls: ["stun:stun.l.google.com:19302", "stun:stun1.l.google.com:19302", "stun:stun2.l.google.com:19302"] },
    { urls: ["stun:stun.cloudflare.com:3478", "stun:iphone-ice.apple.com:3478"] }
  ],
  iceCandidatePoolSize: 10,
  bundlePolicy: "max-bundle"
};

class RealtimeApp {
  constructor(appId, basePath = 'https://rtc.live.cloudflare.com/v1') { this.prefixPath = `${basePath}/apps/${appId}`; }
  async sendRequest(url, body, method = 'POST') {
    const res = await fetch(url, { method, mode: 'cors', headers: { 'content-type': 'application/json', Authorization: `Bearer ${cfAppSecret}` }, body: JSON.stringify(body) });
    return await res.json();
  }
  checkErrors(result, tracksCount = 0) {
    if (result.errorCode) throw new Error(result.errorDescription);
    for (let i = 0; i < tracksCount; i++) if (result.tracks[i].errorCode) throw new Error(`tracks[${i}]: ${result.tracks[i].errorDescription}`);
  }
  async newSession(offerSDP) {
    const res = await this.sendRequest(`${this.prefixPath}/sessions/new`, { sessionDescription: { type: 'offer', sdp: offerSDP } });
    this.checkErrors(res); this.sessionId = res.sessionId; return res;
  }
  async newTracks(trackObjects, offerSDP = null) {
    const body = { tracks: trackObjects };
    if (offerSDP) body.sessionDescription = { type: 'offer', sdp: offerSDP };
    const res = await this.sendRequest(`${this.prefixPath}/sessions/${this.sessionId}/tracks/new`, body);
    this.checkErrors(res, trackObjects.length); return res;
  }
  async sendAnswerSDP(answer) {
    const res = await this.sendRequest(`${this.prefixPath}/sessions/${this.sessionId}/renegotiate`, { sessionDescription: { type: 'answer', sdp: answer } }, 'PUT');
    this.checkErrors(res);
  }
  async renegotiate() {
    const pc = isHost ? screenPcMap["host_cf"] : viewerPc;
    if (!pc) return;
    logStatus("Starting Renegotiation/ICE Restart...");
    const offer = await pc.createOffer({ iceRestart: true });
    const mungedSdp = applyCodecPreferences(offer.sdp);
    await pc.setLocalDescription({ type: 'offer', sdp: mungedSdp });
    const res = await this.sendRequest(`${this.prefixPath}/sessions/${this.sessionId}/renegotiate`, { sessionDescription: { type: 'offer', sdp: mungedSdp } }, 'PUT');
    this.checkErrors(res);
    await pc.setRemoteDescription(new RTCSessionDescription(res.sessionDescription));
    logStatus("Renegotiation complete.");
  }
}

const RES_MAP = { 
  "2160p": { width: 3840, height: 2160 }, 
  "1440p": { width: 2560, height: 1440 }, 
  "1080p": { width: 1920, height: 1080 }, 
  "720p": { width: 1280, height: 720 }, 
  "480p": { width: 854, height: 480 }, 
  "360p": { width: 640, height: 360 }, 
  "240p": { width: 426, height: 240 }, 
  "144p": { width: 256, height: 144 } 
};

/* STATE */
let localStream = null, roomId = "", isHost = false, myName = "", sessionType = "party";
let screenPcMap = {}, viewerPc = null;
let connectedViewers = {}, pendingViewers = {};
let statsInterval = null, timerInterval = null, startTime = 0, prevBytesStat = 0;
let firebaseUnsubs = [], bgAudioSet = false, iceRestartCount = 0;
let audioCtx = null, movieNode = null, duckingActive = false;
let myVoiceStream = null, voicePcs = {}, silenceLoop = null;
let cfApp = null, myCfSessionId = null, myCfTrackNames = {};
let movieGainNode = null, hostInfo = null; 
let reconnectToken = localStorage.getItem("nova_reconnect_token") || Math.random().toString(36).substring(2, 10);
localStorage.setItem("nova_reconnect_token", reconnectToken);
let approvedTokens = {}; // Host: stores vid -> token
let typingUsers = {};
let typingStopTimer = null;
let typingWriteTimer = null;
let typingActive = false;
let typingLastWrite = 0;
const MAX_ICE_RESTARTS = 3;
const isMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);

let wakeLock = null;
async function requestWakeLock() {
  try { if ('wakeLock' in navigator) { wakeLock = await navigator.wakeLock.request('screen'); logStatus("WakeLock active"); } } catch (_) { }
}

function gestureUnlock() {
  if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  if (audioCtx.state === "suspended") audioCtx.resume();
  
  const osc = audioCtx.createOscillator();
  const g = audioCtx.createGain();
  g.gain.value = 0; osc.connect(g); g.connect(audioCtx.destination);
  osc.start(); osc.stop(audioCtx.currentTime + 0.1);

  const bg = document.getElementById("bgAudio"), sl = document.getElementById("silenceLoop");
  if (bg) { bg.play().catch(() => { }); bg.pause(); }
  if (sl) { sl.play().catch(() => { }); sl.pause(); }
  requestWakeLock();
  logStatus("Audio & WakeLock unlocked.");
}

function logIce(pc, label) { pc.onicegatheringstatechange = () => console.log(`[ICE ${label}] gather:${pc.iceGatheringState}`); pc.oniceconnectionstatechange = () => console.log(`[ICE ${label}] ice:${pc.iceConnectionState}`); }
function logCandidate(c, label) { if (!c) return; const t = c.candidate?.match(/typ (\w+)/)?.[1] || '?'; console.log(`[ICE ${label}] ${t}|${c.candidate?.substring(0, 60)}`); }

window.toggleNoHeat = (on) => {
  document.body.classList.toggle('no-heat', on);
  localStorage.setItem('no_heat_mode', on);
  
  // Update UI Elements
  const mainBtn = document.getElementById('noHeatBtnMain');
  const quickBtn = document.getElementById('noHeatBtnQuick');
  const toggle = document.getElementById('noHeatToggle');
  
  if (toggle) toggle.checked = on;

  if (on) {
    if (window._dynamicActive) window.toggleDynamic();
    if (mainBtn) mainBtn.style.background = "#339933 !important";
    if (mainBtn) mainBtn.querySelector('.material-symbols-outlined').style.color = "#000";
    showToast("🔋 No-Heat Mode Active: Green/Black");
  } else {
    if (mainBtn) mainBtn.style.background = "#000 !important";
    if (mainBtn) mainBtn.querySelector('.material-symbols-outlined').style.color = "#339933";
    showToast("✨ Premium Effects Restored");
  }
};

/* HELPERS */
function playProceduralSound(type) {
  try {
    const ctx = new (window.AudioContext || window.webkitAudioContext)();
    const osc = ctx.createOscillator();
    const gain = ctx.createGain();
    osc.connect(gain); gain.connect(ctx.destination);
    if (type === "join") { osc.type = "sine"; osc.frequency.setValueAtTime(440, ctx.currentTime); osc.frequency.exponentialRampToValueAtTime(880, ctx.currentTime + 0.2); gain.gain.setValueAtTime(0.1, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.5); }
    else { osc.type = "sine"; osc.frequency.setValueAtTime(880, ctx.currentTime); osc.frequency.exponentialRampToValueAtTime(440, ctx.currentTime + 0.2); gain.gain.setValueAtTime(0.1, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.5); }
    osc.start(); osc.stop(ctx.currentTime + 0.5);
  } catch (_) { }
}

function esc(s) { return String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"); }

function startSilenceLoop() {
  if (silenceLoop) return;
  try {
    const audio = document.getElementById("silenceLoop");
    if (!audio) return;

    // True silent WAV (44 bytes, 1 sample, 16-bit PCM, value=0) — zero humming
    const silentWav = "data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YQAAAAA=";
    audio.src = silentWav;
    audio.loop = true;
    audio.volume = 0; // absolute zero — no hum possible
    audio.play().then(() => {
      silenceLoop = { audio };
      logStatus("Silence keep-alive active (silent WAV).");
    }).catch(() => {});
  } catch (e) { }
}
function stopSilenceLoop() {
  if (silenceLoop) {
    try { silenceLoop.audio.pause(); silenceLoop.audio.src = ""; } catch (e) { }
    silenceLoop = null;
  }
}
function nameToHsl(n) { let h = 0; for (const c of String(n)) h = c.charCodeAt(0) + ((h << 5) - h); return `hsl(${Math.abs(h) % 360},65%,48%)`; }

function getChatName() {
  return document.getElementById("userName")?.value.trim() || (isHost ? "Host" : "Viewer");
}

function getTypingId() {
  return window._myVid || (isHost ? "host" : reconnectToken);
}

function getTypingRef() {
  if (!roomId) return null;
  return ref(db, `rooms/${roomId}/typing/${getTypingId()}`);
}

function renderTypingStatus() {
  const now = Date.now();
  const activeNames = Object.entries(typingUsers)
    .filter(([id, data]) => id !== getTypingId() && data?.name && now - (data.ts || 0) < 6000)
    .map(([, data]) => data.name);

  const uniqueNames = [...new Set(activeNames)].slice(0, 3);
  const text = uniqueNames.length === 0
    ? ""
    : uniqueNames.length === 1
      ? `${uniqueNames[0]} is typing...`
      : uniqueNames.length === 2
        ? `${uniqueNames[0]} and ${uniqueNames[1]} are typing...`
        : `${uniqueNames[0]}, ${uniqueNames[1]} and ${uniqueNames.length - 2} more are typing...`;

  const markup = text ? `<span class="typing-label">${esc(text)}</span><span class="typing-dots" aria-hidden="true"><span></span><span></span><span></span></span>` : "";
  ["chatTypingStatus", "fsChatTypingStatus"].forEach(id => {
    const el = document.getElementById(id);
    if (!el) return;
    if (!text) {
      el.hidden = true;
      el.innerHTML = "";
      return;
    }
    el.hidden = false;
    el.innerHTML = markup;
  });
}

async function publishTypingState(active) {
  const typingRef = getTypingRef();
  if (!typingRef) return;

  if (!active) {
    typingActive = false;
    typingLastWrite = 0;
    clearTimeout(typingWriteTimer);
    clearTimeout(typingStopTimer);
    try { await remove(typingRef); } catch (_) { }
    return;
  }

  const now = Date.now();
  if (now - typingLastWrite < 700 && typingActive) return;
  typingActive = true;
  typingLastWrite = now;
  try {
    await set(typingRef, { name: getChatName(), ts: now });
    onDisconnect(typingRef).remove();
  } catch (_) { }
}

function stopLocalTyping() {
  clearTimeout(typingStopTimer);
  clearTimeout(typingWriteTimer);
  publishTypingState(false);
}

function handleChatTyping(sourceEl) {
  const val = sourceEl?.value?.trim?.() || "";
  if (!val) {
    stopLocalTyping();
    return;
  }

  publishTypingState(true);
  clearTimeout(typingStopTimer);
  typingStopTimer = setTimeout(() => {
    const chatVal = document.getElementById("chatInput")?.value.trim() || document.getElementById("fsChatInput")?.value.trim() || "";
    if (!chatVal) stopLocalTyping();
  }, 1500);
}

function startTypingListener() {
  if (!roomId) return;
  const unsub = onValue(ref(db, `rooms/${roomId}/typing`), snap => {
    typingUsers = snap.val() || {};
    renderTypingStatus();
  });
  firebaseUnsubs.push(unsub);
}

/* ===== COUPLE FEATURES ===== */

// Reaction sounds via Web Audio
function playReactionSound(emoji) {
  try {
    if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    if (audioCtx.state === 'suspended') audioCtx.resume();
    const ctx = audioCtx;
    const freqMap = { '❤️':880, '💕':1047, '😍':783, '🎉':1319, '✨':1046, '🔥':220, '😂':523, '👍':659, '🍿':440, '😮':587, '💀':196, '👏':330 };
    const freq = freqMap[emoji] || 523;
    const o = ctx.createOscillator(); const g = ctx.createGain();
    o.connect(g); g.connect(ctx.destination);
    o.type = ['❤️','💕','😍'].includes(emoji) ? 'sine' : 'triangle';
    o.frequency.value = freq;
    g.gain.setValueAtTime(0.2, ctx.currentTime);
    g.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.4);
    o.start(); o.stop(ctx.currentTime + 0.4);
  } catch(_) {}
}

// Heartbeat – sends to Firebase, both screens show heart
window.sendHeartbeat = async () => {
  if (!roomId) return showToast('⚠️ Join a room first');
  const icon = document.getElementById('heartbeatIcon');
  if (icon) { icon.classList.add('heartbeat-anim'); setTimeout(() => icon.classList.remove('heartbeat-anim'), 700); }
  await set(ref(db, `rooms/${roomId}/heartbeat`), { from: myName, ts: Date.now() });
  window._showHeartWave?.();
  playReactionSound('❤️');
};

// Drifted Off – sends notification to partner
window.sendDriftedOff = async () => {
  if (!roomId) return;
  await set(ref(db, `rooms/${roomId}/signals/driftedOff`), { from: myName, ts: Date.now() });
  showToast('🌙 Your partner has been notified');
};

// Apply ambient glow to video wrap when streaming
function setAmbientGlow(on) {
  const wrap = document.getElementById('videoWrap');
  if (wrap) wrap.classList.toggle('streaming', on);
}


// Set cursor style based on role
function applyRoleCursor() {
  document.body.classList.remove('host-cursor', 'viewer-cursor');
  if (isHost) document.body.classList.add('host-cursor');
  else document.body.classList.add('viewer-cursor');
}

// Show session buttons after joining
function showSessionButtons() {
  ['drawToggleToolbar', 'drawToggleToolbarFS'].forEach(id => {
    const el = document.getElementById(id);
    if (el) el.style.display = 'flex';
  });
  // Host-only Tools
  if (isHost) {
    ['changeScreenBtn', 'quickResSelect', 'quickResSelectFS', 'refreshBtn'].forEach(id => {
      const el = document.getElementById(id);
      if (el) el.style.display = 'flex';
    });
  }
}

// Hide session buttons when leaving
function hideSessionButtons() {
  ['drawToggleToolbar', 'drawToggleToolbarFS', 'changeScreenBtn', 'quickResSelect', 'quickResSelectFS', 'refreshBtn'].forEach(id => {
    const el = document.getElementById(id);
    if (el) el.style.display = 'none';
  });
}

// Announce mood to Firebase at session start
async function publishMood() {
  if (!roomId || !window._currentMood) return;
  const mood = window._currentMood;
  await set(ref(db, `rooms/${roomId}/mood`), { ...mood, name: myName });
  // Update panel mood bar
  const bar = document.getElementById('moodBar');
  const moodEl = document.getElementById('moodEmoji');
  const labelEl = document.getElementById('moodLabel');
  if (bar) { bar.style.display = 'flex'; }
  if (moodEl) moodEl.textContent = mood.emoji;
  if (labelEl) labelEl.textContent = mood.label;
}

// Listen to partner's mood
function listenMood() {
  onValue(ref(db, `rooms/${roomId}/mood`), snap => {
    const m = snap.val(); if (!m || m.name === myName) return;
    const bar = document.getElementById('moodBar');
    if (bar) bar.style.display = 'flex';
    document.getElementById('moodEmoji').textContent = m.emoji;
    document.getElementById('moodLabel').textContent = `${m.label} (${m.name})`;
  });
}

// Listen to heartbeat events
function listenHeartbeat() {
  onValue(ref(db, `rooms/${roomId}/heartbeat`), snap => {
    const h = snap.val(); if (!h || h.from === myName) return;
    window._showHeartWave?.();
    playReactionSound('❤️');
  });
}

// Listen to stream status for pause/resume
function listenStreamStatus() {
  onValue(ref(db, `rooms/${roomId}/signals/streamStatus`), snap => {
    const s = snap.val(); if (!s) return;
    const overlay = document.getElementById('waitOverlay');
    if (overlay) {
      if (s.active === false && !isHost) {
        overlay.style.display = 'flex';
        document.getElementById('waitOverlayTitle').textContent = "Waiting for Host";
        document.getElementById('waitOverlaySub').textContent = "Host has paused screen sharing. Stay tuned.";
      } else if (s.active === true) {
        overlay.style.display = 'none';
      }
    }
  });
}

// Time capsule – save session on leave
function saveTimeCapsule() {
  if (!roomId || !startTime) return;
  const dur = Math.floor((Date.now() - startTime) / 60000);
  const capsule = { roomId, date: new Date().toLocaleDateString(), duration: dur + ' min', mood: window._currentMood?.label || '—', role: isHost ? 'Host' : 'Viewer' };
  const prev = JSON.parse(localStorage.getItem('saath_memories') || '[]');
  prev.unshift(capsule); if (prev.length > 20) prev.pop();
  localStorage.setItem('saath_memories', JSON.stringify(prev));
  if (dur >= 2) showToast(`✨ ${dur} min together saved in memories!`);
}

window.handleScreenEnd = () => {
  if (!isHost) return;
  const overlay = document.getElementById('waitOverlay');
  if (overlay) {
    overlay.style.display = 'flex';
    document.getElementById('waitOverlayTitle').textContent = "Screen Share Paused";
    document.getElementById('waitOverlaySub').textContent = "Click 'Change Screen' below to resume sharing.";
  }
  if (roomId && db) set(ref(db, `rooms/${roomId}/signals/streamStatus`), { active: false, ts: Date.now() });
};

// Bootstrap draw + secret note listeners for both host and viewer
function bootstrapCoupleFeatures() {
  const helpers = { set, ref, onValue, onChildAdded, push };
  window._myName = myName;
  window._startDrawListener?.(roomId, db, helpers);
  window._startThemeSyncListener?.(roomId, db, helpers);
  listenHeartbeat();
  listenMood();
  listenStreamStatus();
  publishMood();
  applyRoleCursor();
  showSessionButtons();
}

window.logStatus = msg => {
  const c = document.getElementById("logBox");
  if (c) c.innerHTML = `<div>${new Date().toLocaleTimeString()} - ${esc(msg)}</div>` + c.innerHTML;
  if (window._pipWin && window._pipWin.document) {
     const pipStats = window._pipWin.document.getElementById("pip-stats");
     if (pipStats) pipStats.innerHTML = `<div>${new Date().toLocaleTimeString()} - ${esc(msg)}</div>` + pipStats.innerHTML;
  }
};

function logStatus(msg) {
  console.log(`[STATUS] ${msg}`);
  const log = document.getElementById("connLog");
  if (log) {
    const el = document.createElement("div");
    el.textContent = `[${new Date().toLocaleTimeString([], { hour12: false, minute: '2-digit', second: '2-digit' })}] ${msg}`;
    log.appendChild(el); log.scrollTop = log.scrollHeight;
    if (log.children.length > 50) log.children[0].remove();
  }
}

function mungerPreferH264(sdp) {
  const lines = sdp.split("\r\n"); let videoIdx = -1;
  for (let i = 0; i < lines.length; i++) { if (lines[i].startsWith("m=video ")) { videoIdx = i; break; } }
  if (videoIdx === -1) return sdp;
  const mLine = lines[videoIdx].split(" "); const payloads = mLine.slice(3);
  let h264Payloads = [];
  for (let i = 0; i < lines.length; i++) {
    if (lines[i].startsWith("a=rtpmap:") && lines[i].toLowerCase().includes("h264")) {
      const p = lines[i].split(":")[1].split(" ")[0]; if (payloads.includes(p)) h264Payloads.push(p);
    }
  }
  if (!h264Payloads.length) return sdp;
  const others = payloads.filter(p => !h264Payloads.includes(p));
  mLine.splice(3, mLine.length - 3, ...h264Payloads, ...others);
  lines[videoIdx] = mLine.join(" "); return lines.join("\r\n");
}

/* MIC MANAGEMENT */
let micMeterInterval = null;
async function refreshAudioDevices() {
  try {
    const devices = await navigator.mediaDevices.enumerateDevices();
    const micSelect = document.getElementById("micSelect");
    if (!micSelect) return;
    const prev = micSelect.value; micSelect.innerHTML = "";
    devices.filter(d => d.kind === "audioinput").forEach(d => {
      const opt = document.createElement("option"); opt.value = d.deviceId; opt.textContent = d.label || `Mic ${micSelect.length + 1}`;
      micSelect.appendChild(opt);
    });
    if (prev && [...micSelect.options].some(o => o.value === prev)) micSelect.value = prev;
  } catch (_) { }
}

function getMicConstraints() {
  const devId = document.getElementById("micSelect")?.value;
  const echo = document.getElementById("micEcho")?.checked ?? true;
  const noise = document.getElementById("micNoise")?.checked ?? true;
  const agc = document.getElementById("micAGC")?.checked ?? true;
  const con = { audio: { echoCancellation: echo, noiseSuppression: noise, autoGainControl: agc } };
  if (devId) con.audio.deviceId = { exact: devId };
  return con;
}

window.refreshMicMeter = async () => {
  if (micMeterInterval) { clearInterval(micMeterInterval); micMeterInterval = null; }
  const fill = document.getElementById("micMeterFill"); if (fill) fill.style.width = "0%";
  try {
    const stream = await navigator.mediaDevices.getUserMedia(getMicConstraints());
    const ctx = new (window.AudioContext || window.webkitAudioContext)();
    const source = ctx.createMediaStreamSource(stream);
    const analyzer = ctx.createAnalyser(); analyzer.fftSize = 256;
    source.connect(analyzer);
    const data = new Uint8Array(analyzer.frequencyBinCount);
    micMeterInterval = setInterval(() => {
      analyzer.getByteFrequencyData(data);
      const vol = data.reduce((a, b) => a + b, 0) / data.length;
      if (fill) fill.style.width = Math.min(100, vol * 2) + "%";
    }, 100);
    // Cleanup after 5s or when tab changes
    setTimeout(() => { clearInterval(micMeterInterval); stream.getTracks().forEach(t => t.stop()); ctx.close(); if (fill) fill.style.width = "0%"; }, 5000);
  } catch (_) { }
};
// Trigger device list on load WITHOUT requesting permission immediately
navigator.mediaDevices.addEventListener("devicechange", refreshAudioDevices);
refreshAudioDevices(); // Only enumerates, doesn't prompt

/* STABILITY HELPERS */
function mungerPreferOpus(sdp) {
  const lines = sdp.split("\r\n");
  let audioIdx = -1;
  for (let i = 0; i < lines.length; i++) { if (lines[i].startsWith("m=audio ")) { audioIdx = i; break; } }
  if (audioIdx === -1) return sdp;
  // ULTRA-FIDELITY: 510kbps Stereo (Max Opus Specs) for original-quality music and movies
  let newSdp = sdp.replace(/a=fmtp:(\d+) (.*)/g, (m, p1, p2) => {
    if (sdp.includes("a=rtpmap:" + p1 + " opus/48000")) {
      return `a=fmtp:${p1} minptime=10;useinbandfec=1;stereo=1;sprop-stereo=1;maxaveragebitrate=510000`;
    }
    return m;
  });
  return newSdp;
}

function mungerPreferVP9(sdp) {
  const lines = sdp.split("\r\n");
  let videoIdx = -1;
  for (let i = 0; i < lines.length; i++) { if (lines[i].startsWith("m=video ")) { videoIdx = i; break; } }
  if (videoIdx === -1) return sdp;
  const mLine = lines[videoIdx].split(" ");
  const payloads = mLine.slice(3);
  let vp9Payloads = [];
  for (let i = 0; i < lines.length; i++) {
    if (lines[i].startsWith("a=rtpmap:") && lines[i].toLowerCase().includes("vp9")) {
      const p = lines[i].split(":")[1].split(" ")[0];
      if (payloads.includes(p)) vp9Payloads.push(p);
    }
  }
  if (!vp9Payloads.length) return sdp;
  const otherPayloads = payloads.filter(p => !vp9Payloads.includes(p));
  mLine.splice(3, mLine.length - 3, ...vp9Payloads, ...otherPayloads);
  lines[videoIdx] = mLine.join(" ");
  return lines.join("\r\n");
}

function mungerPreferAV1(sdp) {
  const lines = sdp.split("\r\n");
  let videoIdx = -1;
  for (let i = 0; i < lines.length; i++) { if (lines[i].startsWith("m=video ")) { videoIdx = i; break; } }
  if (videoIdx === -1) return sdp;
  const mLine = lines[videoIdx].split(" ");
  const payloads = mLine.slice(3);
  let av1Payloads = [];
  for (let i = 0; i < lines.length; i++) {
    if (lines[i].startsWith("a=rtpmap:") && lines[i].toLowerCase().includes("av1")) {
      const p = lines[i].split(":")[1].split(" ")[0];
      if (payloads.includes(p)) av1Payloads.push(p);
    }
  }
  if (!av1Payloads.length) return sdp;
  const others = payloads.filter(p => !av1Payloads.includes(p));
  mLine.splice(3, mLine.length - 3, ...av1Payloads, ...others);
  lines[videoIdx] = mLine.join(" ");
  return lines.join("\r\n");
}

function mungerPreferH265(sdp) {
  const lines = sdp.split("\r\n");
  let videoIdx = -1;
  for (let i = 0; i < lines.length; i++) { if (lines[i].startsWith("m=video ")) { videoIdx = i; break; } }
  if (videoIdx === -1) return sdp;
  const mLine = lines[videoIdx].split(" ");
  const payloads = mLine.slice(3);
  let h265Payloads = [];
  for (let i = 0; i < lines.length; i++) {
    // Chrome uses H265 or HEVC in rtpmap
    if (lines[i].startsWith("a=rtpmap:") && (lines[i].toLowerCase().includes("h265") || lines[i].toLowerCase().includes("hevc"))) {
      const p = lines[i].split(":")[1].split(" ")[0];
      if (payloads.includes(p)) h265Payloads.push(p);
    }
  }
  if (!h265Payloads.length) return sdp;
  const others = payloads.filter(p => !h265Payloads.includes(p));
  mLine.splice(3, mLine.length - 3, ...h265Payloads, ...others);
  lines[videoIdx] = mLine.join(" ");
  return lines.join("\r\n");
}

function applyCodecPreferences(sdp) {
  let res = mungerPreferOpus(sdp);
  const codec = document.getElementById("preferredCodec")?.value || "h264";
  if (codec === "av1") res = mungerPreferAV1(res);
  else if (codec === "h265") res = mungerPreferH265(res);
  else if (codec === "vp9") res = mungerPreferVP9(res);
  else res = mungerPreferH264(res);
  return res;
}

/* UI */
const scrollChat = () => { const c = document.getElementById("chatMessages"); if (c) { requestAnimationFrame(() => { c.scrollTop = c.scrollHeight; setTimeout(() => { c.scrollTop = c.scrollHeight; }, 100); }); } };
function showToast(msg) { const t = document.getElementById("toast"); if (!t) return; t.textContent = msg; t.classList.add("show"); clearTimeout(t._t); t._t = setTimeout(() => t.classList.remove("show"), 3500); }

function addSystemMsg(text) { const c = document.getElementById("chatMessages"); if (!c) return; const el = document.createElement("div"); el.className = "chat-system"; el.textContent = text; c.appendChild(el); scrollChat(); }

function addFloatingChatMsg(sender, text) {
  const overlay = document.getElementById("fullscreenChatOverlay"); if (!overlay) return;
  const el = document.createElement("div"); el.className = "fs-chat-msg";
  el.innerHTML = `<b>${esc(sender)}</b> ${esc(text)}`; overlay.appendChild(el);
  el.addEventListener("animationend", () => el.remove(), { once: true });
}

window.shareRoom = () => { const r = document.getElementById("roomId")?.value.trim() || roomId; if (!r) return showToast("⚠️ Start a session first"); const url = `${location.origin}${location.pathname}?room=${encodeURIComponent(r)}`; if (navigator.share) { navigator.share({ title: "Join my Watch Party! 🍿", url }).catch(() => { }); } else { navigator.clipboard?.writeText(url).then(() => showToast("🔗 Link copied!")).catch(() => showToast(url)); } };

function updateConnStatus(state) { const dot = document.getElementById("connDot"), label = document.getElementById("connLabel"); if (!dot || !label) return; dot.classList.remove("connected", "connecting", "live"); if (state === "connected") { dot.classList.add("connected"); label.textContent = "CONNECTED"; } else if (state === "connecting") { dot.classList.add("connecting"); label.textContent = "CONNECTING..."; } else { label.textContent = "DISCONNECTED"; } }

function changeActionBtns(mode) { const c = document.getElementById("actionBtns"); if (!c) return; if (mode === "session") { c.innerHTML = `<button class="btn-action end" onclick="leaveCall()"><span class="material-symbols-outlined">stop_circle</span> Leave Session</button>`; } else { c.innerHTML = `<button class="btn-action host" onclick="confirmHost()"><span class="material-symbols-outlined">cast</span> Start Host Session</button><button class="btn-action join" onclick="confirmJoin()"><span class="material-symbols-outlined">login</span> Join Watch Party</button>`; } }

/* PEOPLE TAB */
function renderPeopleTab() {
  const c = document.getElementById("peopleList"); if (!c) return;
  let html = "";
  const pending = Object.entries(pendingViewers);
  if (isHost && pending.length > 0) { html += `<div class="ppl-section">⏳ Waiting to Join</div>`; for (const [vid, d] of pending) { const col = nameToHsl(d.name); html += `<div class="ppl-item pending-item"><div class="ppl-av" style="background:${col}">${d.name[0].toUpperCase()}</div><div class="ppl-name">${esc(d.name)}</div><div class="ppl-btns"><button class="pa-btn approve" onclick="approveViewer('${vid}','${esc(d.name)}')"><span class="material-symbols-outlined">check</span></button><button class="pa-btn deny" onclick="denyViewer('${vid}','${esc(d.name)}')"><span class="material-symbols-outlined">close</span></button></div></div>`; } }

  html += `<div class="ppl-section">👥 In Session</div>`;
  
  // Show "You"
  const colMe = nameToHsl(myName || "User");
  const myRole = isHost ? "HOST" : "YOU";
  html += `<div class="ppl-item"><div class="ppl-av" style="background:${colMe}">${(myName || "U")[0].toUpperCase()}</div><div class="ppl-name">${esc(myName || "User")} <span class="role-badge">${myRole}</span></div></div>`;

  // Show Host if someone else is hosting
  if (!isHost && hostInfo && hostInfo.name !== myName) {
    const colHost = nameToHsl(hostInfo.name);
    html += `<div class="ppl-item"><div class="ppl-av" style="background:${colHost}">${hostInfo.name[0].toUpperCase()}</div><div class="ppl-name">${esc(hostInfo.name)} <span class="role-badge">HOST</span></div></div>`;
  }

  const connectedArr = Object.entries(connectedViewers);
  for (const [vid, p] of connectedArr) {
    if (p.name === myName) continue;
    const col = nameToHsl(p.name);
    html += `<div class="ppl-item"><div class="ppl-av" style="background:${col}">${p.name[0].toUpperCase()}</div><div class="ppl-name">${esc(p.name)}</div>${isHost ? `<button class="pa-btn kick" onclick="kickViewer('${vid}','${esc(p.name)}')"><span class="material-symbols-outlined">person_remove</span></button>` : ""}</div>`;
  }

  if (!html) html = `<div class="ppl-empty"><span class="material-symbols-outlined">group</span><p>No one yet</p></div>`;
  c.innerHTML = html;
  const badge = document.getElementById("peopleBadge"); if (badge) { badge.textContent = pending.length; badge.style.display = pending.length > 0 ? "flex" : "none"; }
  if (window._pipWin && window._pipWin.document) {
    const pipPpl = window._pipWin.document.getElementById("pip-ppl");
    if (pipPpl) pipPpl.innerHTML = html;
  }
}

window.approveViewer = async (vid, name) => { 
  const token = pendingViewers[vid]?.token;
  if (token) approvedTokens[vid] = token;
  await set(ref(db, `rooms/${roomId}/waitroom/${vid}/status`), "approved"); 
  delete pendingViewers[vid]; 
  renderPeopleTab(); 
};
window.denyViewer = async (vid, name) => { await set(ref(db, `rooms/${roomId}/waitroom/${vid}/status`), "denied"); setTimeout(() => remove(ref(db, `rooms/${roomId}/waitroom/${vid}`)), 3000); delete pendingViewers[vid]; renderPeopleTab(); showToast(`✗ ${name} declined`); };
window.kickViewer = async (vid, name) => { await set(ref(db, `rooms/${roomId}/viewers/${vid}/kicked`), true); setTimeout(() => remove(ref(db, `rooms/${roomId}/viewers/${vid}`)), 2000); try { screenPcMap[vid]?.close(); } catch (_) { } delete screenPcMap[vid]; delete connectedViewers[vid]; renderPeopleTab(); showToast(`👢 ${name} removed`); };
window.muteAllViewers = async () => { if (!isHost || !roomId) return; await set(ref(db, `rooms/${roomId}/muteAll`), Date.now()); showToast("🤫 Muted all viewers"); };
window.applyBitrateNow = () => { logStatus("Bitrate dynamically managed by Cloudflare SFU."); };

window.pushHostSettings = () => {
  if (!isHost || !roomId) return;
  const sRes = document.getElementById("scrResS")?.value || "1080p";
  const sFps = document.getElementById("scrFpsS")?.value || "30";
  const sCodec = document.getElementById("preferredCodec")?.value || "h264";
  const sDel = document.getElementById("streamDelaySlider")?.value || "0.05";
  set(ref(db, `rooms/${roomId}/settings`), { quality: sRes, fps: sFps, codec: sCodec, bitrate: "Auto", delay: sDel, type: sessionType });
};

window.setMode = (m) => {
  sessionType = m;
  document.getElementById("modalMode").value = m;
  document.getElementById("modeParty").style.background = m === 'party' ? 'var(--accent-dim)' : 'var(--surface)';
  document.getElementById("modeParty").style.borderColor = m === 'party' ? 'var(--accent)' : 'var(--glass-border)';
  document.getElementById("modeBroadcast").style.background = m === 'broadcast' ? 'var(--accent-dim)' : 'var(--surface)';
  document.getElementById("modeBroadcast").style.borderColor = m === 'broadcast' ? 'var(--accent)' : 'var(--glass-border)';
  document.getElementById("micOptionHost").style.display = m === 'broadcast' ? 'none' : 'flex';
};

window.replaceScreenShareBtn = async () => {
  if (!isHost || !roomId) return;
  const resStr = document.getElementById("scrResS")?.value || "1080p", fpsStr = document.getElementById("scrFpsS")?.value || "30";
  const { width, height } = RES_MAP[resStr] || RES_MAP["1080p"], fps = parseInt(fpsStr) || 30;
  const con = { video: { width: { ideal: width }, height: { ideal: height }, frameRate: { ideal: fps, max: fps } }, audio: { channelCount: 2, sampleRate: 48000, autoGainControl: false, echoCancellation: false, noiseSuppression: false } };
  let newStream;
  try { newStream = await navigator.mediaDevices.getDisplayMedia(con); }
  catch { con.audio = true; try { newStream = await navigator.mediaDevices.getDisplayMedia(con); } catch { con.audio = false; newStream = await navigator.mediaDevices.getDisplayMedia(con); } }

  if (!newStream) return;
  const vt = newStream.getVideoTracks()[0]; if (vt && "contentHint" in vt) vt.contentHint = "detail";

  // Stop old tracks
  if (localStream) { localStream.getTracks().forEach(t => t.stop()); }
  localStream = newStream;
  const video = document.getElementById("remoteVideo"); video.srcObject = localStream;
  vt.onended = () => window.handleScreenEnd();

  // Hide wait overlay and notify viewers
  const overlay = document.getElementById('waitOverlay');
  if (overlay) overlay.style.display = 'none';
  if (roomId && db) set(ref(db, `rooms/${roomId}/signals/streamStatus`), { active: true, ts: Date.now() });

  // Replace tracks and apply bitrate
  Object.values(screenPcMap).forEach(async pc => {
    const senders = pc.getSenders();
    for (const track of localStream.getTracks()) {
      const sender = senders.find(s => s.track && s.track.kind === track.kind);
      if (sender) await sender.replaceTrack(track);
      else pc.addTransceiver(track, { direction: 'sendonly' });
    }
    await optimizeHostSender(pc);
  });

  // Update Firebase host metadata with STABLE NAMES (already movie-v/movie-a)
  set(ref(db, `rooms/${roomId}/host`), {
    name: myName,
    created: Date.now(),
    cfSessionId: cfApp.sessionId,
    cfTrackVideo: "movie-v",
    cfTrackAudio: "movie-a",
    role: 'host'
  });
  showToast("🔄 Quality updated & audio stabilized");
};

/* CAPTURE */
async function captureScreen() {
  const resStr = document.getElementById("scrRes")?.value || "1080p", fpsStr = document.getElementById("scrFps")?.value || "30";
  const { width, height } = RES_MAP[resStr] || RES_MAP["1080p"], fps = parseInt(fpsStr) || 30;
  const con = { 
    video: { 
      width: { ideal: width }, 
      height: { ideal: height }, 
      frameRate: { ideal: fps, max: fps },
      displaySurface: "monitor" 
    }, 
    audio: { 
      echoCancellation: false, 
      noiseSuppression: false, 
      autoGainControl: false,
      channelCount: 2,
      sampleRate: 48000,
      suppressLocalAudioPlayback: false 
    },
    systemAudio: "include" // Modern hint for system audio
  };

  try { 
    // Attempt with system audio inclusion
    localStream = await navigator.mediaDevices.getDisplayMedia(con); 
  } catch (e) {
    console.warn("Screen capture with audio failed, retrying without audio hint", e);
    delete con.systemAudio;
    try { localStream = await navigator.mediaDevices.getDisplayMedia(con); }
    catch { con.audio = false; localStream = await navigator.mediaDevices.getDisplayMedia(con); }
  }

  // Mix Mic if enabled (only if not in broadcast mode)
  if (document.getElementById("modalHostMic")?.checked && sessionType !== 'broadcast') {
    try {
      const micStream = await navigator.mediaDevices.getUserMedia(getMicConstraints());
      const ctx = new (window.AudioContext || window.webkitAudioContext)();
      const dest = ctx.createMediaStreamDestination();

      const existingAudioTracks = localStream.getAudioTracks();
      if (existingAudioTracks.length > 0) {
        const source1 = ctx.createMediaStreamSource(new MediaStream([existingAudioTracks[0]]));
        source1.connect(dest);
      }
      const source2 = ctx.createMediaStreamSource(micStream);
      source2.connect(dest);

      const mixedTrack = dest.stream.getAudioTracks()[0];
      // Do NOT stop existing tracks since source1 needs them flowing!
      existingAudioTracks.forEach(t => localStream.removeTrack(t));
      localStream.addTrack(mixedTrack);
      localStream._micStream = micStream; // store to stop later
    } catch (e) { console.warn("Mic capture failed", e); }
  }

  const vt = localStream.getVideoTracks()[0]; if (vt && "contentHint" in vt) vt.contentHint = "detail";
  vt.onended = () => window.handleScreenEnd();

  // Initial overlay clear
  const overlay = document.getElementById('waitOverlay');
  if (overlay) overlay.style.display = 'none';
  if (roomId && db) set(ref(db, `rooms/${roomId}/signals/streamStatus`), { active: true, ts: Date.now() });

  const video = document.getElementById("remoteVideo"); video.srcObject = localStream; video.muted = true;
  return localStream;
}

/* OPTIMIZE SENDER */
async function optimizeHostSender(pc, vid = null) {
  // Use a high cap to allow auto-bitrate to scale up, while prioritizing FPS
  let mbps = 25; 
  const fps = parseInt(document.getElementById("scrFps")?.value || "30") || 30;

  for (const s of pc.getSenders()) {
    if (!s.track) continue;
    const p = s.getParameters();
    if (s.track.kind === "video") {
      if (!p.encodings?.length || p.encodings.length < 3) continue;

      // PRIORITIZE FPS (Smoothness) over resolution
      p.degradationPreference = "maintain-framerate"; 

      // High Layer (Layer 2)
      p.encodings[2].maxBitrate = mbps * 1_000_000;
      p.encodings[2].maxFramerate = fps;
      p.encodings[2].networkPriority = "high";
      p.encodings[2].priority = "high";

      // Mid Layer (Layer 1)
      p.encodings[1].maxBitrate = 2_500_000;
      p.encodings[1].scaleResolutionDownBy = 2.0;

      // Low Layer (Layer 0) - starting from 144p
      p.encodings[0].maxBitrate = 500_000;
      p.encodings[0].scaleResolutionDownBy = 4.0;

    } else if (s.track.kind === "audio") {
      if (!p.encodings?.length) p.encodings = [{}];
      p.encodings[0].networkPriority = "high";
      p.encodings[0].priority = "high"; 
    }
    try { await s.setParameters(p); } catch (e) { console.warn("Failed to set parameters", e); }
  }
  logStatus(`FPS Priority Active: Target ${fps} FPS (Auto-Bitrate)`);
}

/* HOST */
window.confirmHost = async () => {
  gestureUnlock();
  roomId = document.getElementById("roomId").value.trim(); myName = document.getElementById("userName").value.trim() || "Host";
  if (!roomId) { roomId = Math.random().toString(36).substr(2, 8).toUpperCase(); document.getElementById("roomId").value = roomId; }
  sessionType = document.getElementById("modalMode")?.value || "party";
  logStatus(`Host session starting (${sessionType} mode)...`);
  try { await captureScreen(); } catch { logStatus("Capture canceled"); return showToast("⚠️ Screen share cancelled"); }
  isHost = true;
  logStatus("Screen captured successfully");
  window._myVid = "host";
  startSilenceLoop();
  document.getElementById("noSignal").classList.add("hidden");
  document.getElementById("liveBadge").style.display = "flex";
  document.getElementById("sourceTag").style.display = ""; document.getElementById("sourceTag").textContent = "HOSTING";
  updateConnStatus("connected"); changeActionBtns("session");
  hostInfo = { name: myName, role: 'host' };
  document.getElementById("hostOnlySettings")?.style.removeProperty("display");
  document.getElementById("lowDataGroup") && (document.getElementById("lowDataGroup").style.display = "none");
  if (sessionType === "broadcast") {
    document.getElementById("micBtnMain").style.display = "none";
    document.getElementById("micBtnChat").style.display = "none";
  }
  window.switchTab("chat"); renderPeopleTab();
  setAmbientGlow(true);
  bootstrapCoupleFeatures();
  _reconnectAttempt = 0; _startConnPoll();

  // Add pre-show countdown button
  const hostBtns = document.getElementById("hostOnlySettings");
  if (hostBtns && !document.getElementById('countdownTriggerBtn')) {
    const cb = document.createElement('button');
    cb.id = 'countdownTriggerBtn'; cb.className = 'btn-action'; cb.style.cssText = 'background:rgba(201,75,123,0.1);border-color:rgba(201,75,123,0.3);color:var(--accent);font-size:12px;height:34px;margin-bottom:10px;';
    cb.innerHTML = '<span class="material-symbols-outlined" style="font-size:16px;">movie</span> Pre-Show Countdown';
    cb.onclick = () => { startPreShowCountdown(5); };
    hostBtns.prepend(cb);
  }

  cfApp = new RealtimeApp(cfAppId);
  const pc = new RTCPeerConnection(servers);
  screenPcMap["host_cf"] = pc; // Keep reference to cleanup later

  pc.ontrack = e => {
    const track = e.track;
    if (track.kind === "audio") {
      logStatus(`Host received Voice track: ${track.id}`);
      const au = document.createElement("audio");
      au.id = `voice_${track.id}`;
      au.autoplay = true;
      au.srcObject = new MediaStream([track]);
      document.body.appendChild(au);
      track.onended = () => { if (au.parentNode) au.parentNode.removeChild(au); };
      track.onmute = () => { if (au.parentNode) au.parentNode.removeChild(au); };
    }
  };

  let localTransceivers = [];
  if (localStream) {
    localStream.getTracks().forEach(track => {
      localTransceivers.push(pc.addTransceiver(track, { direction: "sendonly" }));
    });
  }

  const offer1 = await pc.createOffer();
  const munged1 = applyCodecPreferences(offer1.sdp);
  await pc.setLocalDescription({ type: 'offer', sdp: munged1 });
  const newSessionResult = await cfApp.newSession(munged1);
  await pc.setRemoteDescription(new RTCSessionDescription(newSessionResult.sessionDescription));

  await new Promise((resolve, reject) => {
    pc.addEventListener('iceconnectionstatechange', ev => {
      if (pc.iceConnectionState === 'connected') resolve();
    });
    setTimeout(resolve, 5000); // safety fallback
  });

  logStatus("Cloudflare SFU Host Session Created.");
  myCfSessionId = cfApp.sessionId;

  let trackObjects = localTransceivers.map(t => { 
    const isVid = t.sender.track.kind === 'video';
    return { location: 'local', mid: t.mid, trackName: isVid ? "movie-v" : "movie-a" }; 
  });

  const offer2 = await pc.createOffer();
  const munged2 = applyCodecPreferences(offer2.sdp);
  await pc.setLocalDescription({ type: 'offer', sdp: munged2 });
  const newLocalTracksResult = await cfApp.newTracks(trackObjects, munged2);
  await pc.setRemoteDescription(new RTCSessionDescription(newLocalTracksResult.sessionDescription));
  logStatus("Tracks published to Cloudflare SFU.");

  const roomRef = ref(db, `rooms/${roomId}`);
  logStatus(`Registering host in room: ${roomId}`);
  await set(ref(db, `rooms/${roomId}/host`), {
    name: myName,
    created: Date.now(),
    cfSessionId: myCfSessionId,
    cfTrackVideo: "movie-v",
    cfTrackAudio: "movie-a",
    role: 'host',
    mood: window._currentMood?.label || 'Movie Night'
  }).catch(e => logStatus(`Firebase Error: ${e.message}`));
  onDisconnect(roomRef).remove();

  // Waitroom UI
  const unsubW = onChildAdded(ref(db, `rooms/${roomId}/waitroom`), snap => {
    const vid = snap.key, data = snap.val(); if (!data || !vid || data.status) return;
    
    // Auto-Accept logic for network reconnections
    if (data.token && Object.values(approvedTokens).includes(data.token)) {
      logStatus(`Auto-approving reconnection for ${data.name}`);
      set(ref(db, `rooms/${roomId}/waitroom/${vid}/status`), "approved");
      // Update approvedTokens with new vid
      Object.keys(approvedTokens).forEach(k => { if (approvedTokens[k] === data.token) delete approvedTokens[k]; });
      approvedTokens[vid] = data.token;
      return;
    }

    logStatus(`Approval request from: ${data.name || "Viewer"}`);
    pendingViewers[vid] = { name: data.name || "Viewer", token: data.token }; 
    renderPeopleTab(); showToast(`🔔 ${data.name} wants to join`); window.switchTab("people");
  });

  // Voice Pull Listener
  const unsubVoice = onChildAdded(ref(db, `rooms/${roomId}/voice`), async snap => {
    const peerVid = snap.key; if (peerVid === window._myVid || !snap.val()) return;
    pullVoiceTracks(snap.val().cfSessionId, snap.val().trackName, pc);
  });

  firebaseUnsubs.push(unsubW, unsubVoice);

  const unsubV = onValue(ref(db, `rooms/${roomId}/viewers`), snap => {
    const current = snap.val() || {};
    // Check for newcomers
    Object.keys(current).forEach(vid => {
       if (!connectedViewers[vid]) {
         get(ref(db, `rooms/${roomId}/viewers/${vid}/ready`)).then(s => { 
           const n = s.val()?.name || "Viewer"; 
           connectedViewers[vid] = { name: n }; 
           renderPeopleTab(); 
           addSystemMsg(`👋 ${n} joined`); 
           playProceduralSound("join"); 
         });
       }
    });
    // Check for departures
    Object.keys(connectedViewers).forEach(vid => {
       if (!current[vid]) {
         const n = connectedViewers[vid].name;
         delete connectedViewers[vid];
         renderPeopleTab();
         addSystemMsg(`🚪 ${n} left`);
       }
    });

  }); firebaseUnsubs.push(unsubV);

  startHostStats(); startChatListener(); startTypingListener(); startReactionListener();
  window.pushHostSettings();
  showToast("🎬 Live! Room: " + roomId);
};


/* VIEWER */
window.confirmJoin = async () => {
  gestureUnlock();
  roomId = document.getElementById("roomId").value.trim(); myName = document.getElementById("userName").value.trim() || "Viewer";
  if (!roomId) return showToast("⚠️ Enter Room Code");
  logStatus(`Joining room: ${roomId}`);
  if (myName) localStorage.setItem("watchparty_name", myName);
  isHost = false; bgAudioSet = false; updateConnStatus("connecting");

  // Mobile Gesture Unlock
  const v = document.getElementById("remoteVideo"); if (v) { v.play().catch(() => { }); }

  document.getElementById("hostOnlySettings") && (document.getElementById("hostOnlySettings").style.display = "none");
  document.getElementById("lowDataGroup") && (document.getElementById("lowDataGroup").style.display = "flex");
  const myVid = "v_" + Math.random().toString(36).substr(2, 9);
  window._myVid = myVid;
  logStatus(`Waitroom ID: ${myVid}`);
  await set(ref(db, `rooms/${roomId}/waitroom/${myVid}`), { name: myName, requestedAt: Date.now(), token: reconnectToken }).catch(e => logStatus(`Waitroom Write Error: ${e.message}`));
  onDisconnect(ref(db, `rooms/${roomId}/waitroom/${myVid}`)).remove();
  const ns = document.getElementById("noSignal"); ns.classList.remove("hidden");
  ns.querySelector("h3").textContent = "Waiting for host..."; ns.querySelector("p").textContent = "Host will let you in shortly";
  logStatus("Sent join request, waiting for approval...");
  const unsubS = onValue(ref(db, `rooms/${roomId}/waitroom/${myVid}/status`), async ss => {
    const status = ss.val(); if (!status) return; unsubS();
    if (status === "approved") { logStatus("Request Approved!"); ns.classList.add("hidden"); await proceedJoin(myVid, myName); }
    else { logStatus("Request Declined."); showToast("❌ Host declined your request"); updateConnStatus("disconnected"); changeActionBtns("init"); ns.querySelector("h3").textContent = "Waiting for Screen Share"; ns.querySelector("p").textContent = "Connect to join or host a session"; }
  }); firebaseUnsubs.push(unsubS);
};

async function proceedJoin(myVid, userName) {
  try {
    logStatus("Starting connection sequence...");
    onDisconnect(ref(db, `rooms/${roomId}/viewers/${myVid}`)).remove();
    startSilenceLoop();
    await set(ref(db, `rooms/${roomId}/viewers/${myVid}/ready`), { name: userName });

    logStatus("Fetching session config in parallel...");
    const [hostSnap, sessionTypeSnap] = await Promise.all([
      get(ref(db, `rooms/${roomId}/host`)),
      get(ref(db, `rooms/${roomId}/settings/type`))
    ]);

    const hostData = hostSnap.val();
    if (!hostData || !hostData.cfSessionId) {
      logStatus("Host not running Cloudflare SFU. Aborting.");
      showToast("❌ Host not broadcasting");
      return leaveCall();
    }
    hostInfo = hostData;
    logStatus(`Host found with CF Session: ${hostData.cfSessionId.substring(0, 6)}...`);
    
    sessionType = sessionTypeSnap.val() || "party";
    logStatus(`Session Mode: ${sessionType}`);
    
    if (sessionType === "broadcast") {
      document.getElementById("micBtnMain").style.display = "none";
      document.getElementById("micBtnChat").style.display = "none";
    }
    const unsubType = onValue(ref(db, `rooms/${roomId}/settings/type`), s => { if (s.val()) sessionType = s.val(); });
    firebaseUnsubs.push(unsubType);

    cfApp = new RealtimeApp(cfAppId);
    // Use bundlePolicy: "max-bundle" and iceCandidatePoolSize for speed
    const pc = new RTCPeerConnection({ ...servers, iceCandidatePoolSize: 15 }); viewerPc = pc;
    const video = document.getElementById("remoteVideo"), remoteStream = new MediaStream();
    video.srcObject = remoteStream; video.muted = true; // Use bgAudio sink
    const hostAudID = "movie-a"; // Always use stable name for audio

    let currentDelayHint = 0.05;

    pc.ontrack = e => {
      const track = e.track;
      logStatus(`Received track: ${track.kind} (ID: ${track.id})`);
      
      // Volume/Audio Control Setup (already unlocked by gesture)
      if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      if (audioCtx.state === "suspended") audioCtx.resume();

      if (!movieGainNode) {
        movieGainNode = audioCtx.createGain();
        movieGainNode.gain.value = window._movieVol || 1.0;
        movieGainNode.connect(audioCtx.destination);
        window.updateGain = (v) => { if (movieGainNode) movieGainNode.gain.setValueAtTime(v, audioCtx.currentTime); };
      }

      if (e.receiver) {
        if (track.kind === "audio") { try { e.receiver.playoutDelayHint = 0; } catch (_) { } }
        else {
          try { e.receiver.playoutDelayHint = currentDelayHint; } catch (_) { }
          if ("contentHint" in track) track.contentHint = "detail";
          const unsubDel = onValue(ref(db, `rooms/${roomId}/settings/delay`), s => {
            if (s.val()) {
              currentDelayHint = parseFloat(s.val());
              try { e.receiver.playoutDelayHint = currentDelayHint; } catch (_) { }
            }
          }); firebaseUnsubs.push(unsubDel);
        }
      }
      if (!remoteStream.getTracks().find(t => t.id === track.id)) remoteStream.addTrack(track);

      video.play().catch((e) => {
        if (e.name === 'AbortError') return; // Ignore rapid play/pause interrupts
        logStatus("Autoplay blocked. User interaction required.");
        const overlay = document.getElementById("autoplayOverlay");
        if (overlay) overlay.style.display = "flex";
      });

      // IDENTIFY: Movie Audio vs Viewer Voice
      // hostAudID should match track.id (or track.id starts with it if browser prepends)
      const isMovieAud = track.kind === "audio" && (track.id === hostAudID || (hostAudID && track.id.includes(hostAudID)));

      if (isMovieAud && !bgAudioSet) {
        bgAudioSet = true;
        const bg = document.getElementById("bgAudio");
        bg.srcObject = new MediaStream([track]);
        
        // Connect to Web Audio for volume control
        const source = audioCtx.createMediaStreamSource(bg.srcObject);
        source.connect(movieGainNode);
        
        bg.play().catch(e => {
          if (e.name === 'AbortError') return;
          logStatus(`Audio play error trace: ${e.message}`);
          const overlay = document.getElementById("autoplayOverlay");
          if (overlay) overlay.style.display = "flex";
        }).then(() => {
          logStatus("Movie audio started (via Web Audio)");
          if ("mediaSession" in navigator) {
            navigator.mediaSession.metadata = new MediaMetadata({ title: `Room: ${roomId}`, artist: "Live Party", album: "Watch Party", artwork: [{ src: "https://webrtc-cd5af.firebaseapp.com/icon.png", sizes: "512x512", type: "image/png" }] });
            navigator.mediaSession.playbackState = "playing";
            const playP = () => { bg.play(); if (audioCtx.state === 'suspended') audioCtx.resume(); navigator.mediaSession.playbackState = "playing"; };
            const pauseP = () => { bg.pause(); navigator.mediaSession.playbackState = "paused"; };
            navigator.mediaSession.setActionHandler('play', playP);
            navigator.mediaSession.setActionHandler('pause', pauseP);
          }
        }).catch(e => logStatus(`Audio play error trace: ${e.message}`));
      } else if (track.kind === "audio" && !isMovieAud) {
        // Only play if it's NOT our own voice track (precautionary)
        const auId = `voice_${track.id}`;
        if (document.getElementById(auId)) return;

        const au = document.createElement("audio");
        au.id = auId;
        au.autoplay = true;
        au.srcObject = new MediaStream([track]);
        document.body.appendChild(au);
        track.onended = () => { if (au.parentNode) au.parentNode.removeChild(au); };
        track.onmute = () => { if (au.parentNode) au.parentNode.removeChild(au); };
      }
    };

    iceRestartCount = 0; // reset on success

    pc.onconnectionstatechange = () => {
    logStatus(`[Viewer] ${pc.connectionState}`);
    if (pc.connectionState === "connected") { 
      updateConnStatus("connected"); 
      document.getElementById("noSignal").classList.add("hidden"); 
      document.getElementById("sourceTag").style.display = ""; 
      document.getElementById("sourceTag").textContent = "WATCHING"; 
      
      const refreshBtn = document.getElementById("refreshBtn");
      if (refreshBtn) refreshBtn.style.display = "flex";
      
      changeActionBtns("session"); 
      window.switchTab("chat"); 
      renderPeopleTab(); 
      showToast("🎬 Connected!"); 
      iceRestartCount = 0; 
    }
    if (pc.connectionState === "failed" || pc.connectionState === "disconnected") {
      logStatus("Connection lost. Attempting silent recovery...");
      updateConnStatus("connecting");
      setTimeout(() => {
        if (pc.connectionState === "failed" || pc.connectionState === "disconnected") {
          window.attemptSilentReconnect();
        }
      }, 3000);
    }
  };

    onValue(ref(db, `rooms/${roomId}/viewers/${myVid}/kicked`), s => { if (s.val()) { showToast("⛔ Removed by host"); leaveCall(); } });
    onValue(ref(db, `rooms/${roomId}/muteAll`), s => { if (s.val() && myVoiceStream) { toggleVoiceChat(); showToast("🤫 Host muted microphones"); } });

    let trackObjects = [];
    if (hostData.cfTrackVideo) trackObjects.push({ location: 'remote', sessionId: hostData.cfSessionId, trackName: hostData.cfTrackVideo });
    if (hostData.cfTrackAudio) trackObjects.push({ location: 'remote', sessionId: hostData.cfSessionId, trackName: hostData.cfTrackAudio });

    if (trackObjects.length === 0) {
      logStatus("Host sent no tracks!"); return;
    }

    // Explicit transceivers to ensure SDP has media sections
    pc.addTransceiver('audio', { direction: 'recvonly' });
    pc.addTransceiver('video', { direction: 'recvonly' });

    logStatus("Creating cloudflare viewer session...");
    const offer3 = await pc.createOffer();
    const munged3 = applyCodecPreferences(offer3.sdp);
    await pc.setLocalDescription({ type: 'offer', sdp: munged3 });
    const newSessionResult = await cfApp.newSession(munged3);
    logStatus("Setting Session Remote Description...");
    await pc.setRemoteDescription(new RTCSessionDescription(newSessionResult.sessionDescription));

    logStatus(`Requesting ${trackObjects.length} tracks from Host`);
    const newRemoteTracksResult = await cfApp.newTracks(trackObjects);
    if (newRemoteTracksResult.requiresImmediateRenegotiation) {
      switch (newRemoteTracksResult.sessionDescription.type) {
        case 'offer':
          logStatus("Applying incoming Offer from CF");
          await pc.setRemoteDescription(new RTCSessionDescription(newRemoteTracksResult.sessionDescription));
          const answer = await pc.createAnswer();
          const mungedAns = applyCodecPreferences(answer.sdp);
          await pc.setLocalDescription({ type: 'answer', sdp: mungedAns });
          await cfApp.sendAnswerSDP(mungedAns);
          logStatus("Answer sent for incoming tracks.");
          break;
        default: throw new Error("Expected offer SDP from Cloudflare");
      }
    }

    const unsubPV = onChildAdded(ref(db, `rooms/${roomId}/viewers`), s => {
      const vid = s.key; if (!vid) return;
      // Allow self addition to pass so I appear in my own People list
      get(ref(db, `rooms/${roomId}/viewers/${vid}/ready`)).then(sn => { const n = sn.val()?.name || "Viewer"; if (!connectedViewers[vid]) { connectedViewers[vid] = { name: n }; renderPeopleTab(); playProceduralSound("join"); } });
    });
    const unsubPR = onChildAdded(ref(db, `rooms/${roomId}/viewers`), () => renderPeopleTab());
    const unsubPD = onValue(ref(db, `rooms/${roomId}/viewers`), snap => {
      const current = snap.val() || {};
      Object.keys(connectedViewers).forEach(vid => { if (!current[vid] && vid !== myVid) { const name = connectedViewers[vid].name; delete connectedViewers[vid]; renderPeopleTab(); addSystemMsg(`🚪 ${name} left`); playProceduralSound("leave"); } });
    });
    firebaseUnsubs.push(unsubPV, unsubPR, unsubPD);

    // Voice Pull Listener
    const unsubVoice = onChildAdded(ref(db, `rooms/${roomId}/voice`), async snap => {
      const peerVid = snap.key; if (peerVid === window._myVid || !snap.val()) return;
      pullVoiceTracks(snap.val().cfSessionId, snap.val().trackName, pc);
    }); firebaseUnsubs.push(unsubVoice);

    startChatListener(); startTypingListener(); startReactionListener(); startStats(pc);
    bootstrapCoupleFeatures();
    _reconnectAttempt = 0; _startConnPoll();

  } catch (err) {
    logStatus(`Viewer Crash: ${err.message}`);
    console.error(err);
    showToast("❌ Connection error");
    updateConnStatus("disconnected");
    leaveCall();
  }
}

/* LEAVE */
/* LEAVE */
window.leaveCall = async () => {
  saveTimeCapsule();
  setAmbientGlow(false);
  hideSessionButtons();
  stopLocalTyping();
  typingUsers = {};
  renderTypingStatus();
  const wo = document.getElementById('waitOverlay'); if(wo) wo.style.display = 'none';
  document.body.classList.remove('host-cursor','viewer-cursor');
  stopStats(); stopSilenceLoop(); firebaseUnsubs.forEach(u => { try { u(); } catch (_) { } }); firebaseUnsubs = [];
  Object.values(screenPcMap).forEach(pc => { try { pc.close(); } catch (_) { } }); screenPcMap = {};
  if (viewerPc) { try { viewerPc.close(); } catch (_) { } viewerPc = null; }
  if (localStream) { localStream.getTracks().forEach(t => t.stop()); localStream = null; }
  if (myVoiceStream) { myVoiceStream.getTracks().forEach(t => t.stop()); myVoiceStream = null; }
  const bg = document.getElementById("bgAudio"); if (bg) { bg.srcObject = null; bg.pause(); }
  if (isHost && roomId) remove(ref(db, `rooms/${roomId}`));
  const ns = document.getElementById("noSignal"); ns.classList.remove("hidden"); ns.querySelector("h3").textContent = "Waiting for Screen Share"; ns.querySelector("p").textContent = "Connect to join or host a session";
  document.getElementById("remoteVideo").srcObject = null;
  document.getElementById("liveBadge").style.display = "none";
  ["sourceTag", "qualityTag", "refreshBtn"].forEach(id => { const e = document.getElementById(id); if (e) e.style.display = "none"; });
  document.getElementById("hostOnlySettings") && (document.getElementById("hostOnlySettings").style.display = "none");
  const moodBar = document.getElementById("moodBar"); if (moodBar) moodBar.style.display = "none";
  const ou = document.getElementById("onlyUsBadge"); if (ou) ou.style.display = "none";
  const snd = document.getElementById("secretNoteDrawer"); if (snd) snd.classList.remove("open");
  updateConnStatus("disconnected"); changeActionBtns("init");
  document.getElementById("chatMessages").innerHTML = `<div style="text-align:center;color:var(--text-muted);margin-top:30px;font-size:11px;">💬 Messages visible to everyone</div>`;
  const fsC = document.getElementById("fsChatMessages");
  if (fsC) fsC.innerHTML = "";
  connectedViewers = {}; pendingViewers = {}; renderPeopleTab();
  roomId = ""; isHost = false; bgAudioSet = false; myName = ""; hostInfo = null; showToast("👋 Disconnected");
};

/* CHAT */
window.sendChat = () => {
  const inp = document.getElementById("chatInput"), msg = inp?.value.trim();
  if (!msg || !roomId) return;
  const name = document.getElementById("userName")?.value.trim() || (isHost ? "Host" : "Viewer");
  stopLocalTyping();
  push(ref(db, `rooms/${roomId}/chat`), { sender: name, text: msg, time: Date.now() });
  inp.value = "";
  inp.style.height = "auto";
};

window.handleChatImageUpload = (source) => {
  let file;
  if (source instanceof File) file = source;
  else if (source.files && source.files[0]) file = source.files[0];
  if (!file || !roomId) return;

  if (file.size > 8000000) { showToast("⚠️ Image too large (Max 8MB)"); if(source.value) source.value = ""; return; }
  const reader = new FileReader();
  reader.onload = (e) => {
    const img = new Image();
    img.onload = () => {
      const canvas = document.createElement("canvas");
      let w = img.width, h = img.height;
      if (w > 1280) { h = h * (1280 / w); w = 1280; } // high-quality resize
      canvas.width = w; canvas.height = h;
      canvas.getContext("2d").drawImage(img, 0, 0, w, h);
      const b64 = canvas.toDataURL("image/jpeg", 0.85);
      const name = document.getElementById("userName")?.value.trim() || (isHost ? "Host" : "Viewer");
      push(ref(db, `rooms/${roomId}/chat`), { sender: name, text: null, image: b64, time: Date.now() });
    };
    img.src = e.target.result;
  };
  reader.readAsDataURL(file);
  if (source.value) source.value = "";
};

// Clipboard Paste Support for Images
["chatInput", "fsChatInput"].forEach(id => {
  const el = document.getElementById(id);
  if (!el) return;
  el.addEventListener("input", (e) => handleChatTyping(e.target));
  el.addEventListener("blur", () => stopLocalTyping());
  el.addEventListener("paste", (e) => {
    const items = (e.clipboardData || e.originalEvent.clipboardData).items;
    for (let i = 0; i < items.length; i++) {
      if (items[i].type.indexOf("image") !== -1) {
        const file = items[i].getAsFile();
        window.handleChatImageUpload(file);
        showToast("📸 Pasting image...");
      }
    }
  });
});

function startChatListener() {
  if (!roomId) return; const ts = Date.now(); const myN = document.getElementById("userName")?.value.trim() || (isHost ? "Host" : "Viewer");
  const unsub = onChildAdded(ref(db, `rooms/${roomId}/chat`), snap => {
    const d = snap.val(); if (!d || d.time < ts - 1000) return;
    const msgId = `chat_${snap.key}`; if (document.getElementById(msgId)) return;
    const wrap = document.createElement("div"); wrap.className = "chat-msg"; wrap.id = msgId;
    const isMe = d.sender === myN, time = new Date(d.time).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
    const col = nameToHsl(d.sender), init = d.sender[0]?.toUpperCase() || "?";

    let contentHtml = "";
    if (d.image) contentHtml = `<img src="${d.image}" onclick="window.fullScreenImg(this.src)" style="cursor:pointer;" />`;
    else contentHtml = esc(d.text);

    wrap.innerHTML = `
      <div class="chat-msg-header"><div class="chat-av" style="background:${col}">${init}</div><span class="chat-sender" style="color:${isMe ? "var(--accent)" : "var(--pink-soft)"}">${isMe ? "You" : esc(d.sender)}</span><span class="chat-time">${time}</span></div>
      <div class="chat-bubble ${isMe ? "me" : "other"}">${contentHtml}</div>
    `;
    const c = document.getElementById("chatMessages"); if (c) { c.appendChild(wrap); scrollChat(); }
    const fsC = document.getElementById("fsChatMessages");
    if (fsC) { fsC.insertAdjacentHTML('beforeend', wrap.outerHTML); fsC.scrollTop = fsC.scrollHeight; }
    if (!document.getElementById("contentChat")?.classList.contains("active")) {
      const badge = document.getElementById("chatBadge"); if (badge) { badge.style.display = "inline-flex"; }
      try { new Audio("https://actions.google.com/sounds/v1/water/water_drop.ogg").play(); } catch (e) { }
    }
    if (d.text) {
      addFloatingChatMsg(isMe ? "You" : d.sender, d.text);
      // Mirror to PiP window if open
      window._pipMsgHandler?.(d.sender, esc(d.text), isMe);
    }
  }); firebaseUnsubs.push(unsub);
}

window.fullScreenImg = (src) => {
  const overlay = document.createElement('div');
  overlay.className = 'fs-img-overlay';
  overlay.innerHTML = `<img src="${src}" />`;
  overlay.onclick = () => overlay.remove();
  document.body.appendChild(overlay);
};

/* REACTIONS */
window.sendReaction = emoji => {
  if (!roomId) return showToast("⚠️ Connect first");
  push(ref(db, `rooms/${roomId}/reactions`), { emoji, sender: window.myName || "Anonymous", time: Date.now() });
};
function startReactionListener() { 
  if (!roomId) return; 
  const ts = Date.now(); 
  const u = onChildAdded(ref(db, `rooms/${roomId}/reactions`), snap => { 
    const d = snap.val(); 
    if (!d || d.time < ts) return; 
    triggerEmojiUI(d.emoji); 
    const muteToggle = document.getElementById("muteReactionsToggle");
    if (!muteToggle || !muteToggle.checked) {
      playReactionSound(d.emoji);
    }
  }); 
  firebaseUnsubs.push(u); 
}
function triggerEmojiUI(emoji) {
  const ov = document.getElementById("emojiOverlay");
  if (ov) {
    const el = document.createElement("div"); 
    el.className = "emoji-bubble";
    el.textContent = emoji; 
    el.style.left = (5 + Math.random() * 85) + "%";
    ov.appendChild(el); 
    el.onanimationend = () => el.remove();
  }
  // Mirror to PiP window if open
  try {
    if (window._pipWin && !window._pipWin.closed) {
      const pipOv = window._pipWin.document.getElementById('pip-reaction-overlay');
      if (pipOv) {
        const pe = window._pipWin.document.createElement('div');
        pe.textContent = emoji;
        pe.style.cssText = 'position:absolute;font-size:28px;left:'+(10+Math.random()*70)+'%;bottom:220px;animation:pipEmojiFloat 1.8s ease forwards;pointer-events:none;';
        pipOv.appendChild(pe);
        setTimeout(() => pe.remove(), 1900);
      }
    }
  } catch(_) {}
}

/* STATS — Viewer (inbound) */
let cumulativeBytes = 0;
/* STATS — Viewer (inbound) */
function startStats(pc) {
  if (!pc) return; startTime = Date.now(); prevBytesStat = 0; cumulativeBytes = 0;
  const iv = isMobile ? 3000 : 2000;
  statsInterval = setInterval(async () => {
    try {
      const stats = await pc.getStats();
      let inb = null, pair = null, codecId = null, jitter = 0;
      stats.forEach(r => {
        if (r.type === "inbound-rtp" && r.kind === "video") { inb = r; codecId = r.codecId; jitter = r.jitter || 0; }
        if (r.type === "candidate-pair" && r.state === "succeeded" && !pair) pair = r;
      });
      let codecName = "Auto";
      if (codecId) {
        const codecStat = stats.get(codecId);
        if (codecStat) codecName = codecStat.mimeType.split('/')[1] || "Auto";
      }

      if (inb) {
        const b = inb.bytesReceived || 0; cumulativeBytes = b;
        const br = ((b - prevBytesStat) * 8 / (iv / 1000) / 1_000_000).toFixed(1); prevBytesStat = b;
        const e = id => document.getElementById(id);
        if (e("statBitrate")) e("statBitrate").innerHTML = `${br}<span class="stat-unit"> Mbps</span>`;
        if (e("barBitrate")) e("barBitrate").style.width = Math.min(br / 12 * 100, 100) + "%";
        if (e("statFps")) e("statFps").textContent = Math.round(inb.framesPerSecond || 0);
        if (e("statRes")) e("statRes").textContent = `${inb.frameWidth || 0}×${inb.frameHeight || 0}`;
        if (e("statCodec")) e("statCodec").textContent = codecName;
        const lossNum = ((inb.packetsLost || 0) / Math.max(inb.packetsReceived || 1, 1) * 100); const loss = lossNum.toFixed(1);
        if (e("statLoss")) e("statLoss").textContent = `${loss}%`;
        const tag = e("qualityTag"); if (tag) { tag.style.display = ""; const h = inb.frameHeight || 0; tag.textContent = h >= 1080 ? "1080p" : h >= 720 ? "720p" : `${h}p`; }
        if (!pair && document.getElementById("statRtt")) document.getElementById("statRtt").innerHTML = `~${Math.round(jitter * 1000)}<span class="stat-unit"> ms</span>`;
      }
      if (pair && document.getElementById("statRtt")) document.getElementById("statRtt").innerHTML = `${Math.round((pair.currentRoundTripTime || 0) * 1000)}<span class="stat-unit"> ms</span>`;
    } catch (_) { }
  }, iv);
  timerInterval = setInterval(() => {
    const s = Math.floor((Date.now() - startTime) / 1000);
    const mbs = (cumulativeBytes / 1_000_000).toFixed(1);
    const bt = mbs > 1000 ? `${(mbs / 1000).toFixed(2)} GB` : `${mbs} MB`;
    const el = document.getElementById("statDuration");
    if (el) el.innerHTML = `${String(Math.floor(s / 3600)).padStart(2, "0")}:${String(Math.floor((s % 3600) / 60)).padStart(2, "0")}:${String(s % 60).padStart(2, "0")} <span style="font-size:10px;color:rgba(6,182,212,0.8);margin-left:6px;font-weight:bold;">⤓ ${bt}</span>`;
  }, 1000);
}

/* STATS — Host (outbound) */
function startHostStats() {
  startTime = Date.now(); prevBytesStat = 0; cumulativeBytes = 0; const iv = 2000;
  statsInterval = setInterval(async () => { const pcs = Object.values(screenPcMap).filter(p => p.connectionState === "connected"); if (!pcs.length) return; try { const pc = pcs[0]; const stats = await pc.getStats(); let out = null, rin = null, pair = null, codecId = null; stats.forEach(r => { if (r.type === "outbound-rtp" && r.kind === "video") { out = r; codecId = r.codecId; } if (r.type === "remote-inbound-rtp" && r.kind === "video") rin = r; if (r.type === "candidate-pair" && r.state === "succeeded" && !pair) pair = r; }); let codecName = "Auto"; if (codecId) { const cStat = stats.get(codecId); if (cStat) codecName = cStat.mimeType.split('/')[1] || "Auto"; } if (out) { const b = out.bytesSent || 0; cumulativeBytes = b; const br = ((b - prevBytesStat) * 8 / (iv / 1000) / 1_000_000).toFixed(1); prevBytesStat = b; const e = id => document.getElementById(id); if (e("statBitrate")) e("statBitrate").innerHTML = `${br}<span class="stat-unit"> Mbps</span>`; if (e("barBitrate")) e("barBitrate").style.width = Math.min(br / 12 * 100, 100) + "%"; if (e("statFps")) e("statFps").textContent = Math.round(out.framesPerSecond || 0); if (e("statRes")) e("statRes").textContent = `${out.frameWidth || 0}×${out.frameHeight || 0}`; const qlr = out.qualityLimitationReason; if (e("statCodec")) e("statCodec").textContent = qlr && qlr !== "none" ? `⚠️ ${qlr} (Codec: ${codecName})` : codecName; if (rin) { const loss = ((rin.packetsLost || 0) / Math.max(out.packetsSent || 1, 1) * 100).toFixed(1); if (e("statLoss")) e("statLoss").textContent = `${loss}%`; } const tag = e("qualityTag"); if (tag) { tag.style.display = ""; const h = out.frameHeight || 0; tag.textContent = h >= 1080 ? "1080p" : h >= 720 ? "720p" : `${h}p`; } } if (pair && document.getElementById("statRtt")) document.getElementById("statRtt").innerHTML = `${Math.round((pair.currentRoundTripTime || 0) * 1000)}<span class="stat-unit"> ms</span>`; } catch (_) { } }, iv);
  timerInterval = setInterval(() => {
    const s = Math.floor((Date.now() - startTime) / 1000);
    const mbs = (cumulativeBytes / 1_000_000).toFixed(1);
    const bt = mbs > 1000 ? `${(mbs / 1000).toFixed(2)} GB` : `${mbs} MB`;
    const el = document.getElementById("statDuration");
    if (el) el.innerHTML = `${String(Math.floor(s / 3600)).padStart(2, "0")}:${String(Math.floor((s % 3600) / 60)).padStart(2, "0")}:${String(s % 60).padStart(2, "0")} <span style="font-size:10px;color:rgba(16,185,129,0.8);margin-left:6px;font-weight:bold;">↑ ${bt}</span>`;
  }, 1000);
}

function stopStats() { clearInterval(statsInterval); clearInterval(timerInterval); }
window.generateRoom = () => { const c = Math.random().toString(36).substr(2, 6).toUpperCase(); const el = document.getElementById("roomId"); if (el) el.value = c; showToast("🎲 Room code generated"); };

let voiceNegotiationMutex = false;
async function pullVoiceTracks(sessionId, trackName, pc) {
  if (!cfApp || !pc) return;
  while (voiceNegotiationMutex) await new Promise(r => setTimeout(r, 100)); // basic queue
  voiceNegotiationMutex = true;
  try {
    logStatus(`Pulling voice track ${trackName}...`);
    const newRemoteTracksResult = await cfApp.newTracks([{ location: "remote", sessionId, trackName }]);
    if (newRemoteTracksResult.requiresImmediateRenegotiation) {
      switch (newRemoteTracksResult.sessionDescription.type) {
        case 'offer':
          await pc.setRemoteDescription(new RTCSessionDescription(newRemoteTracksResult.sessionDescription));
          const ansVoice = await pc.createAnswer();
          const mungedVoiceAns = applyCodecPreferences(ansVoice.sdp);
          await pc.setLocalDescription({ type: 'answer', sdp: mungedVoiceAns });
          await cfApp.sendAnswerSDP(mungedVoiceAns);
          break;
      }
    }
  } catch (e) { logStatus(`Voice Pull error: ${e.message}`); }
  finally { voiceNegotiationMutex = false; }
}

/* VOICE CHAT (CLOUDFLARE SFU) */
window.toggleVoiceChat = async () => {
  if (sessionType === 'broadcast') return showToast("🚫 Mic disabled in Broadcast mode");
  
  const micBtnMain = document.getElementById("micBtnMain"), micBtnChat = document.getElementById("micBtnChat");
  const micIconMain = document.getElementById("micIconMain"), micIconChat = document.getElementById("micIconChat");

  if (myVoiceStream) {
    myVoiceStream.getTracks().forEach(t => t.stop()); myVoiceStream = null;
    if (micBtnMain) { micBtnMain.style.background = "var(--red)"; micIconMain.textContent = "mic_off"; }
    const fsMic = document.getElementById("fsMicBtn");
    if (fsMic) { fsMic.style.background = "var(--red)"; fsMic.querySelector('.material-symbols-outlined').textContent = "mic_off"; }
    if (micIconChat) { micIconChat.textContent = "mic_off"; micIconChat.style.color = "var(--red)"; }
    showToast("🔇 Mic OFF");
    remove(ref(db, `rooms/${roomId}/voice/${window._myVid || "host"}`));
    return;
  }

  try {
    myVoiceStream = await navigator.mediaDevices.getUserMedia({ audio: true }); // getMicConstraints normally, simplify for tests
    if (micBtnMain) { micBtnMain.style.background = "var(--accent)"; micIconMain.textContent = "mic"; }
    const fsMic = document.getElementById("fsMicBtn");
    if (fsMic) { fsMic.style.background = "var(--accent)"; fsMic.querySelector('.material-symbols-outlined').textContent = "mic"; }
    if (micIconChat) { micIconChat.textContent = "mic"; micIconChat.style.color = "var(--accent)"; }
    showToast("🎤 Mic ON");

    // 1. Identify active session
    const myVid = isHost ? "host" : (window._myVid || "v_" + Math.random().toString(36).substr(2, 5));
    window._myVid = myVid;

    const pc = isHost ? screenPcMap["host_cf"] : viewerPc;
    if (!pc || !cfApp) {
      showToast("⚠️ Cloudflare connection not ready for Voice.");
      return;
    }

    // 2. Publish to SFU
    logStatus("Publishing Voice track to Cloudflare SFU...");
    const audioTrack = myVoiceStream.getAudioTracks()[0];
    const trans = pc.addTransceiver(audioTrack, { direction: "sendonly" });

    const offerVoice = await pc.createOffer();
    const mungedVoice = applyCodecPreferences(offerVoice.sdp);
    await pc.setLocalDescription({ type: 'offer', sdp: mungedVoice });
    const publishRes = await cfApp.newTracks([{ location: "local", mid: trans.mid, trackName: audioTrack.id }], mungedVoice);
    await pc.setRemoteDescription(new RTCSessionDescription(publishRes.sessionDescription));
    logStatus("Voice Track successfully published via Edge.");

    // 3. Announce track ID universally so others can pull it
    set(ref(db, `rooms/${roomId}/voice/${myVid}`), {
      name: myName, active: true, ts: Date.now(),
      cfSessionId: cfApp.sessionId, trackName: audioTrack.id
    });
    onDisconnect(ref(db, `rooms/${roomId}/voice/${myVid}`)).remove();

    // The listener for pulling others' voice tracks should be in join flows!

  } catch (e) { console.error(e); logStatus(`Voice Chat Error: ${e.message}`); showToast("❌ Mic Access or Network Denied"); }
};

window.applyBitrateNow = async () => {
  const pc = isHost ? screenPcMap["host_cf"] : null;
  if (pc) {
    await optimizeHostSender(pc);
    showToast("📶 Bitrate updated");
  } else {
    logStatus("Bitrate dynamically managed by Cloudflare SFU.");
  }
};

window.manualResync = async () => {
  logStatus("Manual Resync Triggered.");
  if (isHost) {
    if (cfApp) {
      try { await cfApp.renegotiate(); showToast("🔄 Host Stream Refreshed"); }
      catch (e) { logStatus("Host refresh failed"); }
    }
  } else {
    showToast("🔄 Refreshing Stream...");
    window.attemptSilentReconnect();
  }
};

window.attemptSilentReconnect = () => {
  logStatus("Global Network Recovery initiated...");
  if (viewerPc) { try { viewerPc.close(); } catch(_) {} viewerPc = null; }
  firebaseUnsubs.forEach(u => typeof u === 'function' && u());
  firebaseUnsubs = [];
  window.confirmJoin(); 
};

window.recoverAutoplay = () => {
  const ov = document.getElementById("autoplayOverlay");
  if (ov) ov.style.display = "none";
  gestureUnlock();
  const vid = document.getElementById("remoteVideo");
  const aud = document.getElementById("bgAudio");
  if (vid) vid.play().catch(console.error);
  if (aud) aud.play().catch(console.error);
};

/* PiP — auto on visibility change */
document.addEventListener("visibilitychange", async () => {
  const video = document.getElementById("remoteVideo");
  if (document.hidden) {
    if (video?.srcObject && document.pictureInPictureEnabled && !document.pictureInPictureElement) {
       try { await video.requestPictureInPicture(); } catch (_) { }
    }
  } else {
    // Return from PiP if needed (optional)
    if (document.pictureInPictureElement) {
      try { await document.exitPictureInPicture(); } catch (_) { }
    }
  }
});
document.getElementById("remoteVideo")?.addEventListener("enterpictureinpicture", () => { const v = document.getElementById("remoteVideo"), a = document.getElementById("bgAudio"); if (v) v.muted = false; if (a) a.muted = true; });
document.getElementById("remoteVideo")?.addEventListener("leavepictureinpicture", () => { const v = document.getElementById("remoteVideo"), a = document.getElementById("bgAudio"); if (v) v.muted = true; if (a) a.muted = false; });

if ("serviceWorker" in navigator) window.addEventListener("load", () => navigator.serviceWorker.register("sw.js").catch(() => { }));

// ===== SMART NETWORK RECONNECT =====
let _reconnectTimer = null, _reconnectAttempt = 0, _connPollInterval = null;

async function _tryReconnect() {
  if (!roomId || !cfApp) return;
  _reconnectAttempt++;
  const delay = Math.min(1500 * _reconnectAttempt, 12000);
  logStatus(`Reconnect attempt #${_reconnectAttempt} in ${delay}ms...`);
  showToast(`🔄 Reconnecting... (${_reconnectAttempt})`);

  clearTimeout(_reconnectTimer);
  _reconnectTimer = setTimeout(async () => {
    try {
      const pc = isHost ? screenPcMap['host_cf'] : viewerPc;
      const state = pc?.iceConnectionState;

      if (state === 'connected' || state === 'completed') {
        logStatus('Connection self-recovered.');
        showToast('✅ Connected!');
        _reconnectAttempt = 0;
        return;
      }

      await cfApp.renegotiate();
      logStatus('Renegotiate succeeded.');
      showToast('✅ Reconnected!');
      _reconnectAttempt = 0;
    } catch (e) {
      logStatus(`Reconnect #${_reconnectAttempt} failed: ${e.message}`);
      if (_reconnectAttempt < 6) {
        _tryReconnect();
      } else {
        showToast('⚠️ Connection lost permanently. Please refresh.');
      }
    }
  }, delay);
}

// Trigger reconnect when network comes back
window.addEventListener('online', () => {
  logStatus('Network online — checking connection...');
  // Small stabilization delay
  setTimeout(() => {
    if (!roomId) return;
    const pc = isHost ? screenPcMap['host_cf'] : viewerPc;
    const state = pc?.iceConnectionState;
    if (state && state !== 'connected' && state !== 'completed') {
      if (_reconnectAttempt === 0) _tryReconnect();
    } else {
      showToast('📶 Network restored');
    }
  }, 1200);
});

// Poll connection health every 8s and auto-restart if stuck in disconnected/failed
function _startConnPoll() {
  clearInterval(_connPollInterval);
  _connPollInterval = setInterval(() => {
    if (!roomId || !cfApp) return;
    const pc = isHost ? screenPcMap['host_cf'] : viewerPc;
    if (!pc) return;
    const bad = ['disconnected','failed','closed'];
    if (bad.includes(pc.iceConnectionState)) {
      logStatus(`Poll detected bad ICE state: ${pc.iceConnectionState}`);
      if (_reconnectAttempt === 0) { _reconnectAttempt = 0; _tryReconnect(); }
    }
  }, 8000);
}

window.addEventListener('offline', () => { logStatus('Network offline.'); showToast('📵 Network offline...'); });

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible' && roomId) {
    const pc = isHost ? screenPcMap['host_cf'] : viewerPc;
    if (pc && ['disconnected','failed'].includes(pc.iceConnectionState)) {
      logStatus('Tab visible — connection bad, reconnecting...');
      if (_reconnectAttempt === 0) _tryReconnect();
    }
  }
});