/**
 * Interview Call & Live Assessment Review Engine
 * Handles WebRTC 2-Way Calling, Candidate Screen Sharing, Real-Time Sync,
 * Proctoring Alerts, SOS Audio Ringtone, Tab Switching, and Silent Call Recording.
 */

import { initMeteredIceServers } from './metered.js';
import { globalAudioMonitor, AudioActivityMonitor, SPEAKING_ACTIVE_CLASSES } from './audio-monitor.js';
import { RecordingCompositor } from './recording-compositor.js';

// --- Global Audio Ringtone Synthesizer Engine ---
export class CallRingtoneEngine {
    constructor() {
        this.ctx = null;
        this.interval = null;
        this.isPlaying = false;
    }

    init() {
        try {
            if (!this.ctx) {
                const AudioCtx = window.AudioContext || window.webkitAudioContext;
                this.ctx = new AudioCtx();
            }
            if (this.ctx && this.ctx.state === 'suspended') {
                this.ctx.resume();
            }
        } catch (e) {
            console.log('Audio init warning:', e);
        }
    }

    start() {
        if (typeof document !== 'undefined' && document.body && document.body.dataset.interviewId) return;
        if (typeof window !== 'undefined' && window.location.pathname.includes('/candidate/')) return;
        this.init();
        if (this.isPlaying) return;
        this.isPlaying = true;

        this.playTone();
        if (this.interval) clearInterval(this.interval);
        this.interval = setInterval(() => {
            if (this.isPlaying) this.playTone();
        }, 2400);
    }

    playTone() {
        this.init();
        if (!this.ctx || !this.isPlaying) return;
        try {
            const now = this.ctx.currentTime;
            const osc1 = this.ctx.createOscillator();
            const osc2 = this.ctx.createOscillator();
            const gain = this.ctx.createGain();

            osc1.type = 'sine';
            osc2.type = 'sine';

            osc1.frequency.setValueAtTime(523.25, now);
            osc2.frequency.setValueAtTime(659.25, now);

            gain.gain.setValueAtTime(0.001, now);
            gain.gain.linearRampToValueAtTime(0.35, now + 0.08);
            gain.gain.setValueAtTime(0.35, now + 1.1);
            gain.gain.exponentialRampToValueAtTime(0.001, now + 1.3);

            osc1.connect(gain);
            osc2.connect(gain);
            gain.connect(this.ctx.destination);

            osc1.start(now);
            osc2.start(now);

            osc1.stop(now + 1.35);
            osc2.stop(now + 1.35);
        } catch (e) {}
    }

    stop() {
        this.isPlaying = false;
        if (this.interval) {
            clearInterval(this.interval);
            this.interval = null;
        }
    }
}

export const callRingtone = new CallRingtoneEngine();

// State variables
let currentInterviewId = null;
let currentSubmissionUniqueId = null;
let interviewerPeer = null;
let screenReceiverPeer = null;

export function getCandidatePeerId() {
    if (!currentInterviewId && typeof document !== 'undefined' && document.body?.dataset?.interviewId) {
        currentInterviewId = document.body.dataset.interviewId;
    }
    if (!currentSubmissionUniqueId && typeof document !== 'undefined' && document.body?.dataset?.submissionId) {
        currentSubmissionUniqueId = document.body.dataset.submissionId;
    }
    if (!currentInterviewId) return '';

    const subId = (currentSubmissionUniqueId && currentSubmissionUniqueId !== String(currentInterviewId))
        ? currentSubmissionUniqueId
        : null;

    return subId ? ('cand_' + currentInterviewId + '_' + subId) : ('cand_' + currentInterviewId);
}

export function getMyInterviewerPeerId() {
    const currentUserId = window.currentUserId || 0;
    if (!currentInterviewId && typeof document !== 'undefined' && document.body?.dataset?.interviewId) {
        currentInterviewId = document.body.dataset.interviewId;
    }
    if (!currentSubmissionUniqueId && typeof document !== 'undefined' && document.body?.dataset?.submissionId) {
        currentSubmissionUniqueId = document.body.dataset.submissionId;
    }
    if (!currentInterviewId) return '';

    const subId = (currentSubmissionUniqueId && currentSubmissionUniqueId !== String(currentInterviewId))
        ? currentSubmissionUniqueId
        : null;

    return subId
        ? ('interviewer_' + currentInterviewId + '_' + subId + '_' + currentUserId)
        : ('interviewer_' + currentInterviewId + '_' + currentUserId);
}

export function getInterviewerScreenPeerId(userId = null) {
    const currentUserId = userId !== null ? userId : (window.currentUserId || 0);
    if (!currentInterviewId && typeof document !== 'undefined' && document.body?.dataset?.interviewId) {
        currentInterviewId = document.body.dataset.interviewId;
    }
    if (!currentSubmissionUniqueId && typeof document !== 'undefined' && document.body?.dataset?.submissionId) {
        currentSubmissionUniqueId = document.body.dataset.submissionId;
    }
    if (!currentInterviewId) return '';

    const subId = (currentSubmissionUniqueId && currentSubmissionUniqueId !== String(currentInterviewId))
        ? currentSubmissionUniqueId
        : null;

    return subId
        ? ('interviewer_screen_' + currentInterviewId + '_' + subId + '_' + currentUserId)
        : ('interviewer_screen_' + currentInterviewId + '_' + currentUserId);
}
let interviewerLocalStream = null;
let activeCall = null;
let isInterviewerMicOn = true;
let isInterviewerCamOn = true;
let screenZoomLevel = 1.0;
let candVidZoomLevel = 1.0;
let activeViolations = [];
let sosPollInterval = null;
let peerHeartbeatTimer = null;
let acknowledgedViolationCount = 0;
let sosDismissed = false;
let sosAutoTriggerDisabled = true;
let currentTabScreenshotEnabled = true;
let interviewerSigChannel = null;
let interviewerPeerConnection = null;
let liveSyncChannel = null;
let panelistMeshTiles = new Map();
let latestActivePeers = [];

// Ringing & Call state
let activeIncomingCall = null;
let iAmTheCaller = false;
let ringTimeoutTimer = null;
const dismissedCallIds = new Set();

export function formatProctoringLogDetails(l) {
    let detailsObj = l.details;
    if (typeof detailsObj === 'string') {
        try { detailsObj = JSON.parse(detailsObj); } catch(e) {}
    }

    const type = l.type || '';

    if (type === 'multiple_faces') {
        const count = (typeof detailsObj === 'object' && detailsObj && detailsObj.face_count) ? detailsObj.face_count : 2;
        return `Multiple faces detected in camera frame (${count} faces)`;
    }

    if (type === 'face_missing') {
        return 'Candidate face is not visible in camera frame';
    }

    if (type === 'looking_away' || type === 'prolonged_looking_away') {
        if (typeof detailsObj === 'object' && detailsObj && (detailsObj.reasons || typeof detailsObj.yaw === 'number')) {
            const reasonLabels = {
                'head_yaw': 'Head Yaw',
                'head_up': 'Head Pitch Up',
                'head_down': 'Head Pitch Down',
                'eye_gaze_left': 'Eye Gaze Left',
                'eye_gaze_right': 'Eye Gaze Right',
                'eye_gaze_down': 'Eye Gaze Down'
            };
            const reasonsStr = Array.isArray(detailsObj.reasons)
                ? detailsObj.reasons.map(r => reasonLabels[r] || r.replace(/_/g, ' ')).join(', ')
                : '';

            const durationPrefix = (type === 'prolonged_looking_away') ? 'Looking away continuously (>10s)' : 'Looking away from camera';
            return reasonsStr ? `${durationPrefix} (${reasonsStr})` : durationPrefix;
        } else if (typeof l.details === 'string' && l.details && !l.details.startsWith('{')) {
            return l.details;
        }
        return type === 'prolonged_looking_away' ? 'Candidate prolonged looking away' : 'Candidate looking away from camera';
    }

    if (type === 'phone_detected') {
        const label = (typeof detailsObj === 'object' && detailsObj && detailsObj.label) ? detailsObj.label : 'cell phone';
        return `Possible mobile phone detected in camera frame (${label})`;
    }

    if (type === 'prolonged_corner_gaze') {
        if (typeof detailsObj === 'object' && detailsObj && (detailsObj.corner_label || detailsObj.corner)) {
            const cornerLabel = detailsObj.corner_label || (detailsObj.corner || 'screen corner').replace(/_/g, ' ');
            const dur = detailsObj.duration_s || Math.round((detailsObj.duration_ms || 18000) / 1000);
            return `Fixated on ${cornerLabel} for ${dur}s`;
        }
        return 'Candidate fixated on screen corner for prolonged period';
    }

    if (type === 'talking_secondary_person') {
        return typeof l.details === 'string' && !l.details.startsWith('{') ? l.details : 'Candidate detected speaking out loud to a secondary person';
    }

    if (typeof l.details === 'object' && l.details !== null) {
        try { return JSON.stringify(l.details); } catch(e) { return String(l.details); }
    }

    return l.details || '';
}
const endedCallIds = new Set();
let globalCallChannel = null;
const adminPageLoadTimestamp = Date.now();

let globalIceServers = window.globalIceServers || [
    { urls: 'stun:stun.l.google.com:19302' },
    { urls: 'stun:stun.cloudflare.com:3478' }
];

export function getInitials(name) {
    if (!name) return 'CD';
    const parts = name.trim().split(/\s+/);
    if (parts.length >= 2) {
        return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
    }
    const str = name.trim();
    if (str.length >= 2) {
        return (str[0] + str[str.length - 1]).toUpperCase();
    }
    return str.toUpperCase();
}

export function zoomScreen(delta) {
    screenZoomLevel = Math.max(0.5, Math.min(3.0, screenZoomLevel + delta));
    const screenVid = document.getElementById('interviewer-screen-video');
    if (screenVid) {
        screenVid.style.transform = `scale(${screenZoomLevel})`;
    }
}

export function resetZoomScreen() {
    screenZoomLevel = 1.0;
    zoomScreen(0);
}

export function toggleFullscreenScreen() {
    const wrapper = document.getElementById('screen-wrapper');
    if (!wrapper) return;
    if (!document.fullscreenElement) {
        wrapper.requestFullscreen().catch(err => console.log(err));
    } else {
        document.exitFullscreen();
    }
}

export function zoomCandVideo(delta) {
    if (delta === 0) candVidZoomLevel = 1.0;
    else candVidZoomLevel = Math.max(0.5, Math.min(3.0, candVidZoomLevel + delta));
    const vid = document.getElementById('interviewer-cand-video');
    if (vid) {
        vid.style.transform = `scale(-${candVidZoomLevel}, ${candVidZoomLevel})`;
        vid.style.transformOrigin = 'center center';
        vid.style.transition = 'transform 0.2s ease';
    }
}

export function toggleSosAutoTrigger() {
    sosAutoTriggerDisabled = !sosAutoTriggerDisabled;
    const toggleSw = document.getElementById('sosToggle');
    const btn = document.getElementById('sos-toggle-btn');

    if (toggleSw) {
        if (sosAutoTriggerDisabled) {
            toggleSw.classList.remove('on');
        } else {
            toggleSw.classList.add('on');
        }
    }
    if (btn) {
        if (sosAutoTriggerDisabled) {
            btn.innerHTML = '<i class="fa-solid fa-bell-slash mr-1"></i> SOS Auto-Trigger: OFF';
            btn.className = 'px-3 py-1.5 text-xs font-semibold rounded-lg border border-red-500 bg-red-500/15 text-red-300';
        } else {
            btn.innerHTML = '<i class="fa-solid fa-bell mr-1"></i> SOS Auto-Trigger: ON';
            btn.className = 'px-3 py-1.5 text-xs font-semibold rounded-lg border border-indigo-500 bg-indigo-500/15 text-indigo-300';
        }
    }
}

export function openReportPage() {
    if (!currentInterviewId) return;
    window.open(`/interviews/${currentInterviewId}/report`, '_blank');
}

export function toggleTabScreenshotCapture() {
    if (!currentInterviewId) return;
    const newStatus = !currentTabScreenshotEnabled;
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || window.csrfToken;
    fetch(`/interviews/${currentInterviewId}/toggle-tab-screenshot`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrfToken
        },
        body: JSON.stringify({ enable: newStatus })
    })
    .then(r => r.json())
    .then(res => {
        if (res.success) {
            currentTabScreenshotEnabled = res.enable_tab_switch_screenshot;
            updateScreenshotToggleBtnUI(currentTabScreenshotEnabled);
            if (typeof window.Swal !== 'undefined') {
                window.Swal.fire({
                    icon: 'info',
                    title: 'Screenshot Setting Updated',
                    text: res.message,
                    timer: 2500,
                    showConfirmButton: false,
                    toast: true,
                    position: 'top-end'
                });
            }
        }
    })
    .catch(() => {});
}

export function updateScreenshotToggleBtnUI(enabled) {
    const btn = document.getElementById('modal-toggle-screenshot-btn');
    if (btn) {
        if (enabled) {
            btn.innerHTML = '<i class="fa-solid fa-camera mr-1"></i> ENABLED';
            btn.className = 'px-2.5 py-1 text-xs font-bold bg-emerald-600 hover:bg-emerald-500 text-white rounded-md cursor-pointer border-none';
        } else {
            btn.innerHTML = '<i class="fa-solid fa-camera-retro mr-1"></i> DISABLED';
            btn.className = 'px-2.5 py-1 text-xs font-bold bg-red-600 hover:bg-red-500 text-white rounded-md cursor-pointer border-none';
        }
    }
}

let currentInspectorTab = null;

export function closeInspectorPanel() {
    currentInspectorTab = null;
    try {
        if (currentInterviewId) {
            sessionStorage.removeItem('interview_inspector_tab_' + currentInterviewId);
        }
    } catch(e) {}

    const details = document.getElementById('inspector-details');
    if (details) details.open = false;

    const tabs = ['logs', 'code', 'notes', 'drawing', 'recordings', 'screenshots'];
    tabs.forEach(t => {
        const contentEl = document.getElementById(`tab-content-${t}`);
        const btnEl = document.getElementById(`tab-btn-${t}`);
        if (contentEl) contentEl.style.display = 'none';
        if (btnEl) {
            btnEl.classList.remove('bg-indigo-600', 'text-white');
            btnEl.classList.add('text-slate-400', 'hover:bg-white/5');
        }
    });
}

export function switchIdeTab(tab, event = null) {
    if (event) {
        event.stopPropagation();
    }

    const details = document.getElementById('inspector-details');

    // If user clicks the currently active open tab button, toggle it collapsed
    if (currentInspectorTab === tab && details && details.open) {
        closeInspectorPanel();
        return;
    }

    currentInspectorTab = tab;
    try {
        if (currentInterviewId) {
            sessionStorage.setItem('interview_inspector_tab_' + currentInterviewId, tab);
        }
    } catch(e) {}

    if (details) details.open = true;

    const tabs = ['logs', 'code', 'notes', 'drawing', 'recordings', 'screenshots'];
    const tabMeta = {
        logs: { title: 'Proctoring Logs', icon: 'fa-solid fa-shield-halved' },
        notes: { title: 'Candidate Notepad', icon: 'fa-solid fa-note-sticky' },
        drawing: { title: 'Candidate Drawing Board', icon: 'fa-solid fa-pen' },
        recordings: { title: 'Saved Video Recordings', icon: 'fa-solid fa-film' },
        screenshots: { title: 'Tab Switch Screenshots', icon: 'fa-solid fa-image' },
        code: { title: 'Candidate Code', icon: 'fa-solid fa-code' }
    };

    const floatingTitle = document.getElementById('inspector-floating-text');
    const floatingIcon = document.getElementById('inspector-floating-icon');

    if (tabMeta[tab]) {
        if (floatingTitle) floatingTitle.innerText = tabMeta[tab].title;
        if (floatingIcon) floatingIcon.className = `${tabMeta[tab].icon} text-indigo-400`;
    }

    tabs.forEach(t => {
        const contentEl = document.getElementById(`tab-content-${t}`);
        const btnEl = document.getElementById(`tab-btn-${t}`);
        if (contentEl) {
            contentEl.style.display = (t === tab) ? 'block' : 'none';
        }
        if (btnEl) {
            if (t === tab) {
                btnEl.classList.add('bg-indigo-600', 'text-white');
                btnEl.classList.remove('text-slate-400', 'hover:bg-white/5');
            } else {
                btnEl.classList.remove('bg-indigo-600', 'text-white');
                btnEl.classList.add('text-slate-400', 'hover:bg-white/5');
            }
        }
    });
}

// Click outside to dismiss floating inspector details
if (typeof document !== 'undefined') {
    document.addEventListener('click', function(e) {
        const details = document.getElementById('inspector-details');
        if (details && details.open && !details.contains(e.target)) {
            closeInspectorPanel();
        }
    });
}

export function triggerIncomingCallRing(callData, isRealtimeBroadcast = false) {
    if (!callData || !callData.id) return;
    if (typeof document !== 'undefined' && document.body && document.body.dataset.interviewId) return;
    if (typeof window !== 'undefined' && window.location.pathname.includes('/candidate/')) return;
    if (endedCallIds.has(callData.id) || dismissedCallIds.has(callData.id)) return;
    if (iAmTheCaller && currentInterviewId == callData.id) return;
    if (interviewerLocalStream && currentInterviewId == callData.id) return;

    if (callData.call_started_at) {
        const startedTime = new Date(callData.call_started_at).getTime();
        const elapsedMs = Date.now() - startedTime;
        if (elapsedMs > 8000 && !isRealtimeBroadcast) {
            dismissedCallIds.add(callData.id);
            return;
        }
    } else if (!isRealtimeBroadcast) {
        dismissedCallIds.add(callData.id);
        return;
    }

    activeIncomingCall = callData;
    const nameEl = document.getElementById('incoming-cand-name');
    const infoEl = document.getElementById('incoming-starter-info');
    const modalEl = document.getElementById('incoming-call-modal');
    if (nameEl) nameEl.innerText = callData.candidate_name;
    if (infoEl) infoEl.innerText = '📞 Call initiated by: ' + (callData.starter_name || 'Panelist');
    if (modalEl) modalEl.classList.add('active');
    callRingtone.start();

    if (ringTimeoutTimer) clearTimeout(ringTimeoutTimer);
    let remainingMs = 8000;
    if (callData.call_started_at) {
        const startedTime = new Date(callData.call_started_at).getTime();
        const elapsedMs = Date.now() - startedTime;
        remainingMs = Math.max(1000, 8000 - elapsedMs);
    }

    ringTimeoutTimer = setTimeout(() => {
        declineIncomingCall(true);
    }, remainingMs);
}

export function pollGlobalActiveCalls() {
    if (typeof document !== 'undefined' && document.body && document.body.dataset.interviewId) return;
    if (typeof window !== 'undefined' && window.location.pathname.includes('/candidate/')) return;

    fetch('/interviews/active-calls', {
        headers: { 'Accept': 'application/json' }
    })
    .then(r => r.json())
    .then(data => {
        if (!data || !data.active_calls || data.active_calls.length === 0) {
            if (activeIncomingCall) declineIncomingCall(true);
            return;
        }

        const incoming = data.active_calls.find(call => {
            if (endedCallIds.has(call.id)) return false;
            if (iAmTheCaller && currentInterviewId == call.id) return false;
            if (interviewerLocalStream && currentInterviewId == call.id) return false;
            if (dismissedCallIds.has(call.id)) return false;
            return true;
        });

        if (incoming) {
            const startedTime = incoming.call_started_at ? new Date(incoming.call_started_at).getTime() : 0;
            if (startedTime > 0 && startedTime < (adminPageLoadTimestamp - 4000)) {
                dismissedCallIds.add(incoming.id);
                return;
            }
            if (!activeIncomingCall || activeIncomingCall.id !== incoming.id) {
                triggerIncomingCallRing(incoming, false);
            }
        } else if (activeIncomingCall) {
            declineIncomingCall(true);
        }
    })
    .catch(() => {});
}

export function acceptIncomingCall() {
    callRingtone.stop();
    if (ringTimeoutTimer) {
        clearTimeout(ringTimeoutTimer);
        ringTimeoutTimer = null;
    }
    const modal = document.getElementById('incoming-call-modal');
    if (modal) modal.classList.remove('active');

    if (activeIncomingCall) {
        const targetCall = activeIncomingCall;
        activeIncomingCall = null;
        if (window.location.pathname.includes('/interviews/' + targetCall.id)) {
            startInterviewerCall(true);
        } else {
            window.location.href = `/interviews/${targetCall.id}?join_call=1`;
        }
    }
}

export function declineIncomingCall(silent = false) {
    callRingtone.stop();
    if (ringTimeoutTimer) {
        clearTimeout(ringTimeoutTimer);
        ringTimeoutTimer = null;
    }
    const modal = document.getElementById('incoming-call-modal');
    if (modal) modal.classList.remove('active');

    if (activeIncomingCall) {
        dismissedCallIds.add(activeIncomingCall.id);
        activeIncomingCall = null;
    }

    if (!silent && typeof window.Swal !== 'undefined') {
        window.Swal.fire({
            icon: 'info',
            title: 'Call Missed / Declined',
            text: 'You can click "Join Active Call" from the list whenever you are ready.',
            timer: 3000,
            showConfirmButton: false,
            toast: true,
            position: 'top-end'
        });
    }
}

export function subscribeLiveSync(interviewId) {
    if (liveSyncChannel) {
        try { liveSyncChannel.close(); } catch(e) {}
    }
    liveSyncChannel = new BroadcastChannel('live_sync_' + interviewId);
    liveSyncChannel.onmessage = function(event) {
        const data = event.data;
        if (!data) return;

        if (data.type === 'code_sync') {
            if (data.language) {
                const langEl = document.getElementById('modal-code-lang');
                if (langEl) langEl.innerText = data.language.toUpperCase();
            }
            if (data.code !== undefined) {
                const codeEl = document.getElementById('modal-code-display');
                if (codeEl) codeEl.innerText = data.code || '// Candidate has not typed any code yet.';
            }
        } else if (data.type === 'notes_sync') {
            if (data.notes !== undefined) {
                const notesEl = document.getElementById('modal-notes-display');
                if (notesEl) notesEl.innerText = data.notes || 'No candidate notes written yet.';
            }
        } else if (data.type === 'drawing_sync') {
            const drawingImg = document.getElementById('modal-drawing-img');
            const noDrawing = document.getElementById('no-drawing-placeholder');
            if (data.drawing) {
                if (drawingImg) {
                    drawingImg.src = data.drawing;
                    drawingImg.style.display = 'block';
                }
                if (noDrawing) noDrawing.style.display = 'none';
            } else {
                if (drawingImg) drawingImg.style.display = 'none';
                if (noDrawing) noDrawing.style.display = 'block';
            }
        } else if (data.type === 'peer_state_changed') {
            const isCandPeer = data.role === 'candidate' || (data.peer_id && data.peer_id.startsWith('cand_'));
            if (isCandPeer) {
                const isMicOn = (data.mic_on !== undefined) ? Boolean(data.mic_on) : true;
                const isCamOn = (data.cam_on !== undefined) ? Boolean(data.cam_on) : true;
                updateCandidateStatusIcons(isMicOn, isCamOn);
            }
            pollReviewData();
        } else if (data.type === 'chat_message' || data.type === 'violation_logged' || data.type === 'violation_occurred') {
            pollReviewData();
        }
    };

    if (interviewerSigChannel) {
        try { interviewerSigChannel.close(); } catch(e) {}
    }
    interviewerSigChannel = new BroadcastChannel('webrtc_call_' + interviewId);
    interviewerSigChannel.onmessage = function(event) {
        const data = event.data;
        if (!data) return;
        if (data.type === 'peer_state_changed') {
            const isCandPeer = data.role === 'candidate' || (data.peer_id && data.peer_id.startsWith('cand_'));
            if (isCandPeer) {
                const isMicOn = (data.mic_on !== undefined) ? Boolean(data.mic_on) : true;
                const isCamOn = (data.cam_on !== undefined) ? Boolean(data.cam_on) : true;
                updateCandidateStatusIcons(isMicOn, isCamOn);
            }
            setTimeout(pollReviewData, 500);
        } else if (data.type === 'violation_occurred' || data.type === 'violation_logged' || data.type === 'candidate_joined' || data.type === 'tab_switch') {
            setTimeout(pollReviewData, 500);
        }
    };
}

export function openReviewModal(id, name, uid, autoJoinCall = false) {
    currentInterviewId = id;
    currentSubmissionUniqueId = uid;
    acknowledgedViolationCount = 0;
    sosDismissed = false;

    const toggleSw = document.getElementById('sosToggle');
    if (toggleSw) {
        if (sosAutoTriggerDisabled) {
            toggleSw.classList.remove('on');
        } else {
            toggleSw.classList.add('on');
        }
    }

    const candNameEl = document.getElementById('modal-cand-name');
    const candUidEl = document.getElementById('modal-cand-uid');
    if (candNameEl) candNameEl.innerText = name;
    if (candUidEl) candUidEl.innerText = 'Unique Submission ID: ' + uid;

    const candInitials = getInitials(name);
    const avatarCircle = document.getElementById('modal-cand-avatar-circle');
    const avatarName = document.getElementById('cand-avatar-name');
    if (avatarCircle) avatarCircle.innerText = candInitials;
    if (avatarName) avatarName.innerText = name;

    const reviewModal = document.getElementById('review-modal');
    if (reviewModal) reviewModal.classList.add('active');

    resetZoomScreen();
    if (document.getElementById('inspector-content-container')) {
        let savedInspectorTab = null;
        try {
            savedInspectorTab = sessionStorage.getItem('interview_inspector_tab_' + id);
        } catch(e) {}

        if (savedInspectorTab) {
            switchIdeTab(savedInspectorTab);
        } else {
            closeInspectorPanel();
        }
    } else if (document.getElementById('tab-btn-logs')) {
        switchIdeTab('logs');
    } else if (document.getElementById('tab-btn-notes')) {
        switchIdeTab('notes');
    } else {
        switchIdeTab('code');
    }
    updateCandidateStatusIcons(false, false, false);

    initInterviewerSigChannel();
    subscribeLiveSync(id);
    pollReviewData();
    if (sosPollInterval) clearInterval(sosPollInterval);
    sosPollInterval = setInterval(pollReviewData, 6000);

    if (peerHeartbeatTimer) clearInterval(peerHeartbeatTimer);
    peerHeartbeatTimer = setInterval(() => {
        sendInterviewerPeerHeartbeat('heartbeat');
    }, 6000);

    if (autoJoinCall) {
        setTimeout(() => {
            startInterviewerCall(true);
        }, 400);
    }
}

export function sendInterviewerPeerHeartbeat(action = 'heartbeat') {
    if (!currentInterviewId) return;
    const currentUserId = window.currentUserId || 0;
    const currentUserName = window.currentUserName || 'Interviewer';
    const currentUserRole = window.currentUserRole || 'interviewer';
    const myPeerId = getMyInterviewerPeerId();
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || window.csrfToken;

    fetch(`/interviews/${currentInterviewId}/peer-heartbeat`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrfToken
        },
        body: JSON.stringify({
            peer_id: myPeerId,
            name: currentUserName,
            role: currentUserRole,
            mic_on: isInterviewerMicOn,
            cam_on: isInterviewerCamOn,
            action: action
        })
    }).catch(() => {});
}

function isTrueVal(val) {
    if (val === undefined || val === null) return true;
    if (val === false || val === 'false' || val === 0 || val === '0') return false;
    return Boolean(val);
}

export function updateCandidateStatusIcons(isMicOn, isCamOn, isJoined = true) {
    const micOn = isTrueVal(isMicOn);
    const camOn = isTrueVal(isCamOn);

    const candMicIcon = document.getElementById('cand-mic-status');
    const candCamIcon = document.getElementById('cand-cam-status');
    const candPlaceholder = document.getElementById('cand-video-placeholder');
    const candStatusText = document.getElementById('cand-status-text') || (candPlaceholder ? candPlaceholder.querySelector('.status') : null);
    const candVid = document.getElementById('interviewer-cand-video');
    const screenVid = document.getElementById('interviewer-screen-video');
    const candVidWrapper = document.getElementById('cand-video-wrapper');
    const screenWrapper = document.getElementById('screen-wrapper');
    const screenPlaceholder = document.getElementById('screen-video-placeholder');
    const joinedPill = document.getElementById('candidate-joined-pill');

    if (!isJoined) {
        if (candVid) candVid.srcObject = null;
        if (screenVid) screenVid.srcObject = null;

        if (joinedPill) {
            joinedPill.className = 'pill gray inline-flex items-center gap-1.5 font-semibold text-[11px] px-2.5 py-0.5 rounded-full border border-slate-700 text-slate-400 bg-slate-800/60';
            joinedPill.innerHTML = '<i class="fa-solid fa-circle text-[8px] text-slate-500"></i> Not Joined';
        }
        if (candMicIcon) {
            candMicIcon.className = 'fa-solid fa-microphone-slash text-slate-500 text-[10px]';
            candMicIcon.title = 'Candidate Not Joined';
        }
        if (candCamIcon) {
            candCamIcon.className = 'fa-solid fa-video-slash text-slate-500 text-[10px]';
            candCamIcon.title = 'Candidate Not Joined';
        }
        if (candVidWrapper) {
            candVidWrapper.style.opacity = '0.4';
            candVidWrapper.style.filter = 'grayscale(60%)';
            candVidWrapper.style.transition = 'all 0.3s ease';
        }
        if (screenWrapper) {
            screenWrapper.style.opacity = '0.4';
            screenWrapper.style.filter = 'grayscale(60%)';
            screenWrapper.style.transition = 'all 0.3s ease';
        }
        if (candPlaceholder) {
            candPlaceholder.style.display = 'flex';
            if (candStatusText) candStatusText.innerText = 'Candidate Not Joined';
        }
        if (screenPlaceholder) {
            screenPlaceholder.style.display = 'flex';
        }
        return;
    }

    const candidateStreamConnected = candVid && candVid.srcObject && (candVid.srcObject.active || (candVid.srcObject.getTracks && candVid.srcObject.getTracks().length > 0));

    // Joined state: restore styles & active icons
    if (joinedPill) {
        joinedPill.className = 'pill green inline-flex items-center gap-1.5 font-semibold text-[11px] px-2.5 py-0.5 rounded-full border border-emerald-500/30 text-emerald-400 bg-emerald-500/10';
        joinedPill.innerHTML = '<i class="fa-solid fa-circle text-[8px] text-emerald-400 animate-pulse"></i> Joined';
    }
    if (candVidWrapper) {
        candVidWrapper.style.opacity = '1';
        candVidWrapper.style.filter = 'none';
    }
    if (screenWrapper) {
        screenWrapper.style.opacity = '1';
        screenWrapper.style.filter = 'none';
    }

    if (candMicIcon && isMicOn !== undefined) {
        candMicIcon.className = micOn ? 'fa-solid fa-microphone text-[#21c274] text-[10px]' : 'fa-solid fa-microphone-slash text-[#ef4a5f] text-[10px]';
        candMicIcon.title = micOn ? 'Mic On' : 'Mic Muted';
    }
    if (candCamIcon && isCamOn !== undefined) {
        candCamIcon.className = camOn ? 'fa-solid fa-video text-[#21c274] text-[10px]' : 'fa-solid fa-video-slash text-[#ef4a5f] text-[10px]';
        candCamIcon.title = camOn ? 'Camera On' : 'Camera Off';
    }
    if (candPlaceholder) {
        if (!camOn) {
            candPlaceholder.style.display = 'flex';
            if (candStatusText) candStatusText.innerText = 'Camera Turned Off';
        } else if (candidateStreamConnected) {
            candPlaceholder.style.display = 'none';
        } else {
            candPlaceholder.style.display = 'flex';
            if (candStatusText) candStatusText.innerText = 'Waiting for candidate camera stream...';
        }
    }
}

export function pollReviewData() {
    if (!currentInterviewId) return;
    const myPeerId = getMyInterviewerPeerId();
    const candPeerId = getCandidatePeerId();

    if (interviewerLocalStream) {
        sendInterviewerPeerHeartbeat('heartbeat');
    }

    fetch(`/interviews/${currentInterviewId}/poll`, {
        headers: { 'Accept': 'application/json' }
    })
        .then(r => {
            if (!r.ok) return null;
            const contentType = r.headers.get('content-type');
            if (!contentType || !contentType.includes('application/json')) return null;
            return r.json();
        })
        .then(data => {
            if (!data) return;

            if (data.active_peers && Array.isArray(data.active_peers)) {
                latestActivePeers = data.active_peers;
            }

            const isCallEnded = (data.call_status === 'ended');

            if (isCallEnded) {
                // When call status is "Call Ended", do NOT check for candidate status
                updateCandidateStatusIcons(false, false, false);
                const screenVid = document.getElementById('interviewer-screen-video');
                const screenPlace = document.getElementById('screen-video-placeholder');
                if (screenVid) screenVid.srcObject = null;
                if (screenPlace) screenPlace.style.display = 'flex';
                if (typeof window.updateScreenShareLayout === 'function') {
                    window.updateScreenShareLayout(false);
                }

                panelistMeshTiles.forEach((_, pid) => {
                    removePanelistTile(pid);
                });
            } else {
                const candVid = document.getElementById('interviewer-cand-video');
                const candidateStreamConnected = candVid && candVid.srcObject && (candVid.srcObject.active || (candVid.srcObject.getTracks && candVid.srcObject.getTracks().length > 0));

                const candidatePeer = (data.active_peers && Array.isArray(data.active_peers))
                    ? data.active_peers.find(p => p.role === 'candidate' || (p.peer_id && (p.peer_id === candPeerId || (p.peer_id.startsWith('cand_') && !p.peer_id.startsWith('cand_screen_')))))
                    : null;

                const isCandidateJoined = Boolean(candidatePeer) || Boolean(candidateStreamConnected);

                if (isCandidateJoined) {
                    const isMicOn = candidatePeer ? isTrueVal(candidatePeer.mic_on) : true;
                    const isCamOn = candidatePeer ? isTrueVal(candidatePeer.cam_on) : true;
                    updateCandidateStatusIcons(isMicOn, isCamOn, true);
                } else {
                    updateCandidateStatusIcons(false, false, false);
                }

                if (data.active_peers && Array.isArray(data.active_peers)) {
                    const activeIds = new Set(data.active_peers.map(p => p.peer_id));

                    data.active_peers.forEach(p => {
                        if (p.peer_id && p.peer_id !== myPeerId) {
                            let roleLabel = p.role === 'admin' ? ('Admin ' + (p.name || '')) : (p.name ? ('Panelist ' + p.name) : 'Panelist');
                            const isMicOn = isTrueVal(p.mic_on);
                            const isCamOn = isTrueVal(p.cam_on);

                            const isCandPeer = p.role === 'candidate' || (p.peer_id && (p.peer_id === candPeerId || (p.peer_id.startsWith('cand_') && !p.peer_id.startsWith('cand_screen_'))));
                            if (isCandPeer) {
                                if (interviewerLocalStream && interviewerPeer && interviewerPeer.open && !candidateStreamConnected) {
                                    try {
                                        const outCall = interviewerPeer.call(p.peer_id, interviewerLocalStream);
                                        if (outCall) {
                                            outCall.on('stream', remoteStream => {
                                                if (candVid) safePlayMediaStream(candVid, remoteStream);
                                                updateCandidateStatusIcons(isMicOn, isCamOn, true);
                                            });
                                        }
                                    } catch(e) {}
                                }
                            } else if (p.peer_id.startsWith('interviewer_') || p.role === 'interviewer' || p.role === 'admin') {
                                if (interviewerLocalStream && interviewerPeer && interviewerPeer.open) {
                                    if (!panelistMeshTiles.has(p.peer_id)) {
                                        try {
                                            const outCall = interviewerPeer.call(p.peer_id, interviewerLocalStream);
                                            if (outCall) {
                                                outCall.on('stream', remoteStream => {
                                                    addOrUpdatePanelistTile(p.peer_id, remoteStream, roleLabel, isMicOn, isCamOn);
                                                });
                                            }
                                        } catch(e) {}
                                    } else {
                                        addOrUpdatePanelistTile(p.peer_id, panelistMeshTiles.get(p.peer_id), roleLabel, isMicOn, isCamOn);
                                    }
                                } else {
                                    addOrUpdatePanelistTile(p.peer_id, panelistMeshTiles.get(p.peer_id) || null, roleLabel, isMicOn, isCamOn);
                                }
                            }
                        }
                    });

                    panelistMeshTiles.forEach((_, pid) => {
                        if (!activeIds.has(pid)) {
                            removePanelistTile(pid);
                        }
                    });
                }
            }

            const codeLang = document.getElementById('modal-code-lang');
            const codeDisplay = document.getElementById('modal-code-display');
            const outputDisplay = document.getElementById('modal-output-display');
            const notesDisplay = document.getElementById('modal-notes-display');

            if (codeLang) codeLang.innerText = (data.submitted_language || 'UNKNOWN').toUpperCase();
            if (codeDisplay) codeDisplay.innerText = data.submitted_code || '// Candidate has not typed any code yet.';
            if (outputDisplay) outputDisplay.innerText = data.code_output || 'No execution output.';
            if (notesDisplay) notesDisplay.innerText = data.candidate_notes || 'No candidate notes written yet.';

            const drawingImg = document.getElementById('modal-drawing-img');
            const noDrawing = document.getElementById('no-drawing-placeholder');
            if (data.candidate_drawing) {
                if (drawingImg) {
                    drawingImg.src = data.candidate_drawing;
                    drawingImg.style.display = 'block';
                }
                if (noDrawing) noDrawing.style.display = 'none';
            } else {
                if (drawingImg) drawingImg.style.display = 'none';
                if (noDrawing) noDrawing.style.display = 'block';
            }

            // Saved recordings
            const recContainer = document.getElementById('modal-recordings-container');
            if (recContainer) {
                const recPath = data.recording_path;
                let recList = data.recordings || [];
                if (recList.length === 0 && recPath) {
                    recList = [{ url: recPath, created_at: new Date().toISOString(), original_index: 0 }];
                }

                if (recList.length > 0) {
                    recList.sort((a, b) => {
                        const timeA = a.created_at ? new Date(a.created_at).getTime() : 0;
                        const timeB = b.created_at ? new Date(b.created_at).getTime() : 0;
                        return timeB - timeA;
                    });

                    let recHtml = `<div class="text-xs text-sky-400 font-bold mb-2.5 flex justify-between items-center">
                        <span>📹 Stored Video Sessions (${recList.length} recording${recList.length > 1 ? 's' : ''})</span>
                        <span class="text-[0.65rem] text-slate-400">📜 Scroll to view older recordings</span>
                    </div>`;

                    recList.forEach((r, displayIdx) => {
                        let videoUrl = typeof r === 'string' ? r : (r.stream_url || r.url || recPath);
                        if (videoUrl && !videoUrl.startsWith('http') && !videoUrl.startsWith('/')) {
                            videoUrl = '/' + videoUrl;
                        }
                        if (videoUrl && videoUrl.includes('/storage/')) {
                            videoUrl = videoUrl.replace('/storage/', '/media-stream/');
                        }
                        const origIdx = (typeof r === 'object' && r.original_index !== undefined) ? r.original_index : displayIdx;
                        const dateObj = (r && r.created_at) ? new Date(r.created_at) : new Date();
                        const dateStr = dateObj.toLocaleDateString() + ' ' + dateObj.toLocaleTimeString();
                        const downloadUrl = (typeof r === 'object' && r.download_url) ? r.download_url : (`/interviews/${currentInterviewId}/download-recording?index=${origIdx}`);
                        const mimeType = (typeof r === 'object' && r.mime_type) ? r.mime_type : ((videoUrl && videoUrl.includes('.mp4')) ? 'video/mp4' : 'video/webm');

                        recHtml += `<div class="bg-white/5 border border-slate-700/60 rounded-xl p-3 mb-3">
                            <div class="flex justify-between items-center mb-2">
                                <div>
                                    <strong class="text-white text-xs">📹 Session Recording #${recList.length - displayIdx}</strong>
                                    <span class="text-[0.7rem] text-slate-400 ml-2">📅 ${dateStr}</span>
                                </div>
                                <a href="${downloadUrl}" target="_blank" download class="bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs px-3 py-1 rounded-md text-decoration-none inline-flex items-center gap-1">
                                    📥 Download Video
                                </a>
                            </div>
                            <video controls preload="metadata" class="w-full max-h-[240px] rounded-lg bg-black outline-none border border-white/10">
                                <source src="${videoUrl}" type="${mimeType}">
                                <source src="${videoUrl}">
                                Your browser does not support video playback.
                            </video>
                        </div>`;
                    });
                    recContainer.innerHTML = recHtml;
                } else {
                    recContainer.innerHTML = '<div class="text-slate-400 text-xs text-center pt-10">No video recordings saved for this candidate yet.</div>';
                }
            }

            // Live Chat history
            const chatHistory = document.getElementById('interviewer-chat-history');
            const interviewerColors = ['#6366f1', '#10b981', '#f59e0b', '#ec4899', '#8b5cf6', '#06b6d4', '#f97316'];

            if (chatHistory && data.warnings) {
                if (data.warnings.length > 0) {
                    let chatHtml = '';
                    data.warnings.forEach(w => {
                        const isCand = (w.sent_by === null || w.sent_by === undefined);
                        const senderName = isCand
                            ? (data.candidate_name || 'Candidate')
                            : (w.sender ? w.sender.name : 'Interviewer');

                        const color = isCand
                            ? '#38bdf8'
                            : interviewerColors[(w.sent_by || 1) % interviewerColors.length];

                        const badgeLabel = isCand ? 'Candidate' : 'Panelist';
                        const badgeClass = isCand ? 'bg-sky-500/20 text-sky-300 border-sky-500/30' : 'bg-indigo-500/20 text-indigo-300 border-indigo-500/30';

                        chatHtml += `<div class="chat-message mb-2 p-2.5 rounded-lg transition-all w-full shrink-0" style="background: ${color}1a; border-color: ${color};">
                            <div class="flex justify-between items-center mb-1 gap-2">
                                <div class="flex items-center gap-1.5 min-w-0">
                                    <span class="w-1.5 h-1.5 rounded-full shrink-0" style="background: ${color};"></span>
                                    <strong class="text-xs truncate" style="color: ${color};">${senderName}</strong>
                                    <span class="text-[9.5px] uppercase font-bold px-1.5 py-0.2 rounded ${badgeClass} border shrink-0">${badgeLabel}</span>
                                </div>
                                <span class="text-[10.5px] text-slate-500 shrink-0 font-mono">${new Date(w.created_at || Date.now()).toLocaleTimeString()}</span>
                            </div>
                            <div class="text-slate-200 text-xs leading-relaxed font-medium pl-3 break-words">${w.message}</div>
                        </div>`;
                    });
                    chatHistory.className = 'bg-[#0d1220] border border-[#1b2233] rounded-[9px] h-full overflow-y-auto p-3 flex flex-col gap-2 mb-2.5';
                    chatHistory.innerHTML = chatHtml;
                    chatHistory.scrollTop = chatHistory.scrollHeight;
                } else {
                    chatHistory.className = 'bg-[#0d1220] border border-[#1b2233] rounded-[9px] h-full overflow-y-auto p-3 mb-2.5';
                    chatHistory.innerHTML = '<div class="h-full w-full flex items-center justify-center text-xs text-[#5b637a] italic">No chat history. Send a message below.</div>';
                }
            }

            currentTabScreenshotEnabled = (data.enable_tab_switch_screenshot !== undefined) ? Boolean(data.enable_tab_switch_screenshot) : true;
            updateScreenshotToggleBtnUI(currentTabScreenshotEnabled);

            // Screenshots container
            const shotContainer = document.getElementById('modal-screenshots-container');
            if (shotContainer) {
                const shotList = data.tab_switch_screenshots || [];
                if (shotList.length > 0) {
                    let shotHtml = `<div class="text-xs text-amber-400 font-bold mb-2.5 flex justify-between items-center">
                        <span>📸 Tab-Switch Screenshots Captured (${shotList.length})</span>
                        <span class="text-[0.65rem] text-slate-400">Click image to enlarge full size</span>
                    </div><div class="grid grid-cols-2 sm:grid-cols-3 gap-3">`;

                    shotList.forEach((s) => {
                        let url = typeof s === 'string' ? s : (s.url || s.full_url);
                        if (url && !url.startsWith('http') && !url.startsWith('/')) {
                            url = '/' + url;
                        }
                        const timeStr = (s && s.timestamp) ? new Date(s.timestamp).toLocaleTimeString() : '';
                        shotHtml += `<div class="bg-white/5 border border-slate-700/60 rounded-lg p-2 text-center">
                            <img src="${url}" class="w-full h-[110px] object-cover rounded-md cursor-pointer border border-white/10" onclick="window.open('${url}', '_blank')" title="Click to view full image" />
                            <div class="text-[0.65rem] text-slate-400 mt-1">📅 ${timeStr}</div>
                            <a href="${url}" target="_blank" download class="bg-amber-600 text-white text-[0.65rem] font-bold px-2 py-0.5 rounded inline-block mt-1">
                                📥 View / Download
                            </a>
                        </div>`;
                    });
                    shotHtml += `</div>`;
                    shotContainer.innerHTML = shotHtml;
                } else {
                    shotContainer.innerHTML = '<div class="text-slate-400 text-xs text-center pt-10">No tab-switch screenshots captured for this candidate yet.</div>';
                }
            }

            // Header live pulse dot & buttons visibility
            const livePulseDot = document.getElementById('live-call-pulse');
            const recStartBtn = document.getElementById('btn-start-recording');
            const recStopBtn = document.getElementById('btn-stop-recording');
            const startBtn = document.getElementById('btn-start-call');
            const leaveBtn = document.getElementById('btn-leave-call');
            const endAllBtn = document.getElementById('btn-end-all-call');
            const micBtn = document.getElementById('btn-toggle-interviewer-mic');
            const camBtn = document.getElementById('btn-toggle-interviewer-cam');

            const timelinePill = document.getElementById('timeline-status-pill');

            if (data.call_status) {
                if (data.call_status === 'active') {
                    if (!interviewerLocalStream) {
                        if (livePulseDot) livePulseDot.style.display = 'none';
                        if (startBtn) {
                            const icon = startBtn.querySelector('i');
                            const span = startBtn.querySelector('span');
                            if (icon) icon.className = 'fa-solid fa-phone';
                            if (span) span.innerText = 'Join Call';
                            startBtn.style.display = 'inline-flex';
                        }
                        if (leaveBtn) leaveBtn.style.display = 'none';
                        if (endAllBtn) endAllBtn.style.display = 'none';
                        if (micBtn) micBtn.style.display = 'none';
                        if (camBtn) camBtn.style.display = 'none';
                        if (recStartBtn) recStartBtn.style.display = 'none';
                        if (recStopBtn) recStopBtn.style.display = 'none';

                        if (timelinePill) {
                            const icon = timelinePill.querySelector('i');
                            const span = timelinePill.querySelector('span');
                            if (icon) icon.className = 'fa-solid fa-circle text-[8px] animate-pulse';
                            if (span) span.innerText = 'Call in progress';
                            timelinePill.className = 'pill blue live inline-flex items-center gap-1.5 font-semibold text-[11px] px-2.5 py-1 rounded-full border border-[rgba(75,130,247,0.35)] text-[#4b82f7] bg-[rgba(75,130,247,0.12)]';
                        }
                    } else {
                        if (livePulseDot) livePulseDot.style.display = 'inline-block';
                        if (startBtn) startBtn.style.display = 'none';
                        if (leaveBtn) leaveBtn.style.display = 'inline-flex';
                        if (endAllBtn) endAllBtn.style.display = 'inline-flex';
                        if (micBtn) micBtn.style.display = 'inline-flex';
                        if (camBtn) camBtn.style.display = 'inline-flex';
                        if (recStartBtn && (!adminMediaRecorder || adminMediaRecorder.state === 'inactive')) {
                            recStartBtn.style.display = 'inline-flex';
                        }

                        if (timelinePill) {
                            const icon = timelinePill.querySelector('i');
                            const span = timelinePill.querySelector('span');
                            if (icon) icon.className = 'fa-solid fa-circle text-[8px] animate-pulse';
                            if (span) span.innerText = 'Connected (Live)';
                            timelinePill.className = 'pill blue live inline-flex items-center gap-1.5 font-semibold text-[11px] px-2.5 py-1 rounded-full border border-[rgba(75,130,247,0.35)] text-[#4b82f7] bg-[rgba(75,130,247,0.12)]';
                        }
                    }
                } else if (data.call_status === 'ended' || data.call_status === 'idle') {
                    if (interviewerLocalStream && data.call_status === 'ended') leaveInterviewerCall();
                    if (livePulseDot) livePulseDot.style.display = 'none';
                    if (startBtn) {
                        const icon = startBtn.querySelector('i');
                        const span = startBtn.querySelector('span');
                        if (data.call_status === 'ended') {
                            if (icon) icon.className = 'fa-solid fa-phone-slash';
                            if (span) span.innerText = 'Call Ended';
                            startBtn.disabled = true;
                            startBtn.style.opacity = '0.5';
                            startBtn.style.cursor = 'not-allowed';
                            startBtn.style.pointerEvents = 'none';
                            startBtn.style.display = 'inline-flex';
                        } else {
                            if (icon) icon.className = 'fa-solid fa-phone';
                            if (span) span.innerText = 'Start Call';
                            startBtn.disabled = false;
                            startBtn.style.opacity = '1';
                            startBtn.style.cursor = 'pointer';
                            startBtn.style.pointerEvents = 'auto';
                            startBtn.style.display = 'inline-flex';
                        }
                    }
                    if (leaveBtn) leaveBtn.style.display = 'none';
                    if (endAllBtn) endAllBtn.style.display = 'none';
                    if (micBtn) micBtn.style.display = 'none';
                    if (camBtn) camBtn.style.display = 'none';
                    if (recStartBtn) recStartBtn.style.display = 'none';
                    if (recStopBtn) recStopBtn.style.display = 'none';

                    if (timelinePill && data.call_status === 'ended') {
                        const icon = timelinePill.querySelector('i');
                        const span = timelinePill.querySelector('span');
                        if (icon) icon.className = 'fa-solid fa-circle text-[8px]';
                        if (span) span.innerText = 'Call ended';
                        timelinePill.className = 'pill red inline-flex items-center gap-1.5 font-semibold text-[11px] px-2.5 py-1 rounded-full border border-[rgba(239,74,95,0.32)] text-[#ef4a5f] bg-[rgba(239,74,95,0.1)]';
                    }
                }
            }

            // Proctoring logs
            const logsDisplay = document.getElementById('modal-logs-display');
            let logsHtml = '';
            let currentViolations = [];

            if (data.proctor_logs && data.proctor_logs.length > 0) {
                data.proctor_logs.forEach(l => {
                    if (l.type === 'proctoring_summary_report') return;

                    let icoClass = 'amber';
                    let faIcon = 'fa-solid fa-window-restore';
                    let isFlag = false;

                    if (l.type === 'focus_lost') { icoClass = 'amber'; faIcon = 'fa-solid fa-window-restore'; }
                    else if (l.type === 'gaze_anomaly' || l.type === 'gaze_fixed_staring') { icoClass = 'amber'; faIcon = 'fa-solid fa-eye'; }
                    else if (l.type === 'looking_away') { icoClass = 'amber'; faIcon = 'fa-solid fa-eye-slash'; }
                    else if (l.type === 'face_missing') { icoClass = 'red'; faIcon = 'fa-solid fa-user-slash'; isFlag = true; }
                    else if (l.type === 'multiple_faces') { icoClass = 'red'; faIcon = 'fa-solid fa-users-viewfinder'; isFlag = true; }
                    else if (l.type === 'prolonged_looking_away') { icoClass = 'red'; faIcon = 'fa-solid fa-clock-rotate-left'; isFlag = true; }
                    else if (l.type === 'phone_detected') { icoClass = 'red'; faIcon = 'fa-solid fa-mobile-screen-button'; isFlag = true; }
                    else if (l.type === 'prolonged_corner_gaze') { icoClass = 'amber'; faIcon = 'fa-solid fa-arrows-to-eye'; isFlag = true; }
                    else if (l.type === 'talking_secondary_person') { icoClass = 'red'; faIcon = 'fa-solid fa-user-group'; isFlag = true; }
                    else if (l.type === 'gaze_lower_device' || l.type === 'reading_external_device') { icoClass = 'red'; faIcon = 'fa-solid fa-mobile-screen'; isFlag = true; }
                    else if (l.type === 'question_repeat_lower' || l.type === 'question_repetition') { icoClass = 'red'; faIcon = 'fa-solid fa-comments'; isFlag = true; }
                    else if (l.type === 'talking_on_phone') { icoClass = 'red'; faIcon = 'fa-solid fa-phone'; isFlag = true; }
                    else if (l.type === 'external_ai_detected') { icoClass = 'red'; faIcon = 'fa-solid fa-robot'; isFlag = true; }
                    else if (l.type === 'tab_switch') { icoClass = 'amber'; faIcon = 'fa-solid fa-window-restore'; }
                    else if (l.type === 'paste_event') { icoClass = 'red'; faIcon = 'fa-solid fa-paste'; isFlag = true; }
                    else if (l.type === 'copy_event') { icoClass = 'amber'; faIcon = 'fa-solid fa-copy'; }

                    if (['paste_event', 'copy_event', 'tab_switch', 'focus_lost', 'gaze_anomaly', 'gaze_fixed_staring', 'gaze_lower_device', 'question_repeat_lower', 'question_repetition', 'external_ai_detected', 'talking_secondary_person', 'talking_on_phone', 'reading_external_device', 'looking_away', 'face_missing', 'multiple_faces', 'prolonged_looking_away', 'prolonged_corner_gaze', 'phone_detected'].includes(l.type)) {
                        currentViolations.push(l);
                    }

                    let screenshotLink = l.screenshot_url ? `<a href="${l.screenshot_url}" target="_blank" class="text-sky-400 underline ml-1 font-medium">[<i class="fa-solid fa-camera mr-0.5"></i> Screenshot]</a>` : '';
                    let aiBadge = '';

                    if (l.ai_verdict) {
                        const confPct = Math.round((l.ai_verdict.confidence || 0.85) * 100);
                        const engineName = l.ai_verdict.engine || 'AI Engine';
                        const toolName = l.ai_verdict.ai_tool_detected ? ` &bull; Detected: <strong>${l.ai_verdict.ai_tool_detected}</strong>` : '';
                        aiBadge = `<div class="mt-1 text-[11px] text-red-300"><b>AI inspector &middot; ${confPct}% cheating confidence</b> (${engineName}${toolName})</div>`;
                        isFlag = true;
                    }

                    const formattedType = (l.type || 'violation').replace(/_/g, ' ');
                    const titleCap = formattedType.charAt(0).toUpperCase() + formattedType.slice(1);
                    const humanDetails = formatProctoringLogDetails(l);
                    const timeString = new Date(l.timestamp).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit', second: '2-digit', hour12: true });

                    logsHtml += `<div class="log-item flex gap-2.5 p-3 border-b border-[#1b2233] last:border-b-0 ${isFlag ? 'bg-[rgba(239,74,95,0.1)] flag' : ''}">
                        <div class="log-ico w-6 h-6 rounded-md flex-shrink-0 flex items-center justify-center text-[11px] mt-0.5 ${icoClass === 'amber' ? 'bg-[rgba(240,169,57,0.12)] text-[#f0a939]' : 'bg-[rgba(239,74,95,0.1)] text-[#ef4a5f]'}">
                            <i class="${faIcon}"></i>
                        </div>
                        <div>
                            <div class="log-text text-xs leading-relaxed text-slate-300"><b class="text-white ${isFlag ? '!text-[#ef4a5f]' : ''}">${titleCap}</b> &mdash; ${humanDetails}${screenshotLink}${aiBadge}</div>
                            <div class="log-time text-[10.5px] text-slate-500 mt-0.5">${timeString}</div>
                        </div>
                    </div>`;
                });
            } else {
                logsHtml = '<div class="p-4 text-center text-emerald-400 text-xs font-medium"><i class="fa-solid fa-circle-check mr-1"></i> Zero proctoring violations recorded.</div>';
            }
            if (logsDisplay) logsDisplay.innerHTML = logsHtml;

            activeViolations = currentViolations;
            const totalViolations = currentViolations.length;

            // Trigger SOS Modal Popup and Ringtone Alarm ONLY if NEW unacknowledged violations occurred & SOS Auto-Trigger is active
            if (totalViolations > 0 && totalViolations > acknowledgedViolationCount && !sosAutoTriggerDisabled) {
                sosDismissed = false;
                const newViolations = currentViolations.slice(acknowledgedViolationCount);
                openSosModal(newViolations);
            }
        })
        .catch(() => {});
}

export function openSosModal(specificViolations = null) {
    let violationsToDisplay = specificViolations;
    if (!violationsToDisplay || violationsToDisplay.length === 0) {
        if (acknowledgedViolationCount > 0 && activeViolations.length > acknowledgedViolationCount) {
            violationsToDisplay = activeViolations.slice(acknowledgedViolationCount);
        } else {
            violationsToDisplay = activeViolations;
        }
    }

    let html = '';
    if (violationsToDisplay && violationsToDisplay.length > 0) {
        violationsToDisplay.forEach(v => {
            let typeTitle = (v.type || '').toUpperCase();
            if (v.type === 'external_ai_detected') {
                typeTitle = 'candidate might use external ai';
            } else if (v.type === 'tab_switch') {
                typeTitle = 'Candidate Switched Browser Tab';
            } else if (v.type === 'multiple_faces') {
                typeTitle = 'Multiple Faces Detected';
            } else if (v.type === 'face_missing') {
                typeTitle = 'Candidate Face Not Visible';
            } else if (v.type === 'looking_away') {
                typeTitle = 'Candidate Looking Away';
            } else if (v.type === 'prolonged_looking_away') {
                typeTitle = 'Prolonged Looking Away (>10s)';
            } else if (v.type === 'phone_detected') {
                typeTitle = 'Mobile Phone Detected';
            } else if (v.type === 'talking_secondary_person') {
                typeTitle = 'Candidate Talking to Secondary Person';
            } else if (v.type === 'talking_on_phone') {
                typeTitle = 'Candidate Talking on Phone';
            } else if (v.type === 'reading_external_device') {
                typeTitle = 'Candidate Reading from External Device';
            } else if (v.type === 'question_repetition' || v.type === 'question_repeat_lower') {
                typeTitle = 'Candidate Reading Question Out Loud';
            }
            const borderCol = (v.type === 'external_ai_detected' || v.type === 'multiple_faces' || v.type === 'phone_detected' || v.type === 'face_missing' || v.type === 'prolonged_looking_away') ? 'border-red-500' : 'border-amber-500';
            const textCol = (v.type === 'external_ai_detected' || v.type === 'multiple_faces' || v.type === 'phone_detected' || v.type === 'face_missing' || v.type === 'prolonged_looking_away') ? 'text-red-300' : 'text-amber-300';
            const vDetails = formatProctoringLogDetails(v);
            const vTime = new Date(v.timestamp).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit', second: '2-digit', hour12: true });

            html += `<div class="mb-2.5 p-2 bg-white/5 rounded-md border-l-4 ${borderCol}">
                <strong class="${textCol}">🚨 ${typeTitle}:</strong> ${vDetails}
                <div class="text-[0.65rem] text-slate-400 mt-1">Timestamp: ${vTime}</div>
            </div>`;
        });
    } else {
        html = '<div class="text-slate-300 text-sm">Potential proctoring alert flagged by engine.</div>';
    }
    const listEl = document.getElementById('sos-violation-list');
    const modalEl = document.getElementById('sos-modal');
    if (listEl) listEl.innerHTML = html;
    if (modalEl) modalEl.classList.add('active');

    try {
        callRingtone.start();
    } catch(e) {}
}

export function stopSosAlarm() {
    try {
        callRingtone.stop();
    } catch(e) {}

    const modalEl = document.getElementById('sos-modal');
    if (modalEl) modalEl.classList.remove('active');

    acknowledgedViolationCount = activeViolations.length;
    sosDismissed = true;
}

export function disableSosAndStopAlarm() {
    sosAutoTriggerDisabled = true;
    const toggleSw = document.getElementById('sosToggle');
    const btn = document.getElementById('sos-toggle-btn');
    if (toggleSw) toggleSw.classList.remove('on');
    if (btn) {
        btn.innerHTML = '<i class="fa-solid fa-bell-slash mr-1"></i> SOS Auto-Trigger: OFF';
        btn.className = 'px-3 py-1.5 text-xs font-semibold rounded-lg border border-red-500 bg-red-500/15 text-red-300';
    }
    stopSosAlarm();
}

export function interviewerLogoutAction() {
    const form = document.getElementById('logout-form');
    if (typeof window.Swal !== 'undefined') {
        window.Swal.fire({
            title: 'Logout of Portal?',
            text: 'Are you sure you want to log out of your session?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#ef4444',
            cancelButtonColor: '#475569',
            confirmButtonText: 'Yes, Logout'
        }).then((result) => {
            if (result.isConfirmed && form) {
                form.submit();
            }
        });
    } else if (form) {
        form.submit();
    }
}

export function regenerateCandidatePassword() {
    if (!currentInterviewId) return;
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || window.csrfToken;

    if (typeof window.Swal !== 'undefined') {
        window.Swal.fire({
            title: 'Regenerate Candidate Password?',
            text: 'This will invalidate the candidate\'s current password and issue a new system password.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#eab308',
            cancelButtonColor: '#475569',
            confirmButtonText: 'Regenerate Now'
        }).then((result) => {
            if (result.isConfirmed) {
                fetch(`/interviews/${currentInterviewId}/regenerate-password`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken
                    }
                })
                .then(r => r.json())
                .then(res => {
                    if (res.success) {
                        window.Swal.fire({
                            icon: 'success',
                            title: 'New Password Generated!',
                            text: 'New Candidate Passcode: ' + res.new_password,
                            confirmButtonColor: '#6366f1'
                        }).then(() => window.location.reload());
                    }
                });
            }
        });
    }
}

export function blockCandidateAction() {
    if (!currentInterviewId) return;
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || window.csrfToken;

    if (typeof window.Swal !== 'undefined') {
        window.Swal.fire({
            title: '⛔ Block Candidate Email & IP?',
            text: 'This will immediately terminate the candidate session and block their email and client IP address.',
            icon: 'error',
            showCancelButton: true,
            confirmButtonColor: '#ef4444',
            cancelButtonColor: '#475569',
            confirmButtonText: 'Yes, Block Candidate'
        }).then((result) => {
            if (result.isConfirmed) {
                fetch(`/interviews/${currentInterviewId}/block-candidate`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken
                    }
                })
                .then(r => r.json())
                .then(res => {
                    if (res.success) {
                        window.Swal.fire({
                            icon: 'success',
                            title: 'Candidate Blocked',
                            text: res.message,
                            confirmButtonColor: '#6366f1'
                        }).then(() => {
                            closeReviewModal();
                            window.location.reload();
                        });
                    }
                });
            }
        });
    }
}

export { initMeteredIceServers, globalAudioMonitor, AudioActivityMonitor, SPEAKING_ACTIVE_CLASSES };

export function safePlayMediaStream(videoElem, stream, isSelf = false) {
    if (!videoElem || !stream) return;
    const isScreenShare = (videoElem.id === 'interviewer-screen-video');
    if (isSelf || isScreenShare) {
        videoElem.muted = true;
    }
    if (videoElem.srcObject !== stream) {
        videoElem.srcObject = stream;
    }

    // Attach dynamic emerald speaking border VAD monitor
    if (!isScreenShare && stream.getAudioTracks && stream.getAudioTracks().length > 0) {
        let targetId = null;
        let monitorKey = videoElem.id;

        if (videoElem.id === 'interviewer-cand-video') {
            targetId = 'cand-video-wrapper';
        } else if (videoElem.id === 'interviewer-self-video') {
            targetId = 'self-video-wrapper';
        } else if (videoElem.id === 'webcam') {
            targetId = 'cand-self-video-box';
        } else if (videoElem.id === 'interviewer-video-default') {
            targetId = 'interviewer-placeholder-box';
        } else if (videoElem.id.startsWith('panelist-video-')) {
            const pid = videoElem.id.replace('panelist-video-', '');
            targetId = 'panelist-tile-' + pid;
        } else if (videoElem.id.startsWith('cand-iv-video-')) {
            const pid = videoElem.id.replace('cand-iv-video-', '');
            targetId = 'cand-iv-tile-' + pid;
        }

        if (targetId) {
            globalAudioMonitor.attach(monitorKey, stream, targetId);
        }
    }

    const playPromise = videoElem.play();
    if (playPromise !== undefined) {
        playPromise.catch(err => {
            if (err.name === 'AbortError' || err.name === 'NotAllowedError') {
                videoElem.onloadedmetadata = () => {
                    videoElem.play().catch(() => {});
                };
                if (!isSelf && !isScreenShare) {
                    videoElem.muted = true;
                    videoElem.play().catch(() => {});
                    const unmuteHandler = () => {
                        videoElem.muted = false;
                        videoElem.play().catch(() => {});
                    };
                    window.addEventListener('click', unmuteHandler, { once: true });
                    window.addEventListener('keydown', unmuteHandler, { once: true });
                    window.addEventListener('touchstart', unmuteHandler, { once: true });
                }
            }
        });
    }
}

export function addOrUpdatePanelistTile(peerId, stream, name = 'Panelist', micOn = true, camOn = true) {
    const currentUserId = window.currentUserId || 0;
    const myPeerId = getMyInterviewerPeerId();
    if (!peerId || peerId === myPeerId) return;
    const grid = document.getElementById('panelist-mesh-grid');
    if (!grid) return;

    let tile = document.getElementById('panelist-tile-' + peerId);
    let videoElem;
    const initials = getInitials(name);

    if (!tile) {
        tile = document.createElement('div');
        tile.id = 'panelist-tile-' + peerId;
        tile.className = 'video-tile relative w-[220px] aspect-video shrink-0 bg-[#0d1220] border border-[#1b2233] rounded-[10px] overflow-hidden flex flex-col items-center justify-center transition-all duration-200';

        tile.innerHTML = `
            <video id="panelist-video-${peerId}" autoplay playsinline class="w-full h-full object-cover origin-center transition-transform duration-200" style="transform: scaleX(-1);"></video>
            <div id="mesh-placeholder-${peerId}" class="absolute inset-0 flex flex-col items-center justify-center bg-[#0d1220]/95 text-slate-400 text-xs z-10 p-3" style="display: ${camOn && stream ? 'none' : 'flex'};">
                <div class="av w-[58px] h-[58px] rounded-full bg-gradient-to-br from-[#5b8bff] to-[#3b63e0] flex items-center justify-center text-white font-semibold text-[19px] mb-2.5 shadow-md shadow-[#4b82f7]/20">
                    ${initials}
                </div>
                <div class="name text-[13.5px] font-semibold text-white">${name}</div>
                <div class="status text-[11.5px] text-[#5b637a] mt-1 text-center px-3">${camOn && stream ? 'Connecting video...' : 'Camera turned off'}</div>
            </div>
            <span class="tile-tag absolute left-2.5 bottom-2.5 text-[10px] font-semibold tracking-wide px-2.5 py-1 rounded-md bg-black/50 text-slate-300 border border-[#1b2233] z-20 flex items-center gap-1.5 backdrop-blur-sm">
                <span>${name}</span>
                <span class="w-px h-2.5 bg-white/20 mx-0.5"></span>
                <i id="mesh-mic-${peerId}" class="${micOn ? 'fa-solid fa-microphone text-[#21c274]' : 'fa-solid fa-microphone-slash text-[#ef4a5f]'} text-[10px]" title="${micOn ? 'Mic On' : 'Mic Muted'}"></i>
                <i id="mesh-cam-${peerId}" class="${camOn ? 'fa-solid fa-video text-[#21c274]' : 'fa-solid fa-video-slash text-[#ef4a5f]'} text-[10px]" title="${camOn ? 'Camera On' : 'Camera Off'}"></i>
            </span>
        `;

        grid.appendChild(tile);
        videoElem = document.getElementById('panelist-video-' + peerId);
    } else {
        videoElem = document.getElementById('panelist-video-' + peerId);
        const meshMicIcon = document.getElementById('mesh-mic-' + peerId);
        const meshCamIcon = document.getElementById('mesh-cam-' + peerId);
        const meshPlaceholder = document.getElementById('mesh-placeholder-' + peerId);

        if (meshMicIcon) {
            meshMicIcon.className = micOn ? 'fa-solid fa-microphone text-[#21c274] text-[10px]' : 'fa-solid fa-microphone-slash text-[#ef4a5f] text-[10px]';
            meshMicIcon.title = micOn ? 'Mic On' : 'Mic Muted';
        }
        if (meshCamIcon) {
            meshCamIcon.className = camOn ? 'fa-solid fa-video text-[#21c274] text-[10px]' : 'fa-solid fa-video-slash text-[#ef4a5f] text-[10px]';
            meshCamIcon.title = camOn ? 'Camera On' : 'Camera Off';
        }
        if (meshPlaceholder) {
            meshPlaceholder.style.display = (camOn && stream) ? 'none' : 'flex';
        }
    }

    if (videoElem && stream) {
        safePlayMediaStream(videoElem, stream);
        stream.onaddtrack = () => {
            safePlayMediaStream(videoElem, stream);
            const meshPlaceholder = document.getElementById('mesh-placeholder-' + peerId);
            if (meshPlaceholder && camOn) meshPlaceholder.style.display = 'none';
        };
    }

    if (stream) {
        panelistMeshTiles.set(peerId, stream);
    }
}

export function removePanelistTile(peerId) {
    globalAudioMonitor.detach('panelist-video-' + peerId);
    const tile = document.getElementById('panelist-tile-' + peerId);
    if (tile) tile.remove();
    panelistMeshTiles.delete(peerId);
}

export async function initInterviewerPeer() {
    if (!currentInterviewId || typeof window.Peer === 'undefined') return;
    const iceServers = await initMeteredIceServers();

    const currentUserId = window.currentUserId || 0;
    const currentUserName = window.currentUserName || 'Interviewer';
    const myPeerId = getMyInterviewerPeerId();
    const candPeerId = getCandidatePeerId();

    if (interviewerPeer && !interviewerPeer.destroyed) {
        try { interviewerPeer.destroy(); } catch(e) {}
    }

    interviewerPeer = new window.Peer(myPeerId, {
        config: { iceServers: iceServers }
    });

    interviewerPeer.on('open', id => {
        console.log('[WebRTC Interviewer] Registered PeerJS ID:', id);
        if (interviewerSigChannel) {
            interviewerSigChannel.postMessage({
                type: 'peer_joined',
                peer_id: id,
                user_id: currentUserId,
                user_name: currentUserName,
                role: 'interviewer'
            });
        }
    });

    function handleIncomingScreenStream(screenStream) {
        console.log('[WebRTC Screen] Attaching incoming screen stream to video element');
        const screenVid = document.getElementById('interviewer-screen-video');
        const placeholder = document.getElementById('screen-video-placeholder');
        if (typeof window.updateScreenShareLayout === 'function') {
            window.updateScreenShareLayout(true);
        }
        if (screenStream && screenStream.getVideoTracks) {
            screenStream.getVideoTracks().forEach(track => {
                track.onended = () => {
                    if (typeof window.updateScreenShareLayout === 'function') {
                        window.updateScreenShareLayout(false);
                    }
                };
            });
        }
        if (screenVid && screenStream) {
            screenVid.muted = true;
            if (screenVid.srcObject !== screenStream) {
                screenVid.srcObject = screenStream;
            }
            screenVid.play().catch(() => {});
            screenStream.onaddtrack = () => {
                screenVid.muted = true;
                if (screenVid.srcObject !== screenStream) {
                    screenVid.srcObject = screenStream;
                }
                screenVid.play().catch(() => {});
                if (placeholder) placeholder.style.display = 'none';
            };
        }
        if (placeholder) placeholder.style.display = 'none';
    }

    interviewerPeer.on('call', async call => {
        console.log('[WebRTC Interviewer] Incoming PeerJS call from:', call.peer);
        if (call.peer && call.peer.startsWith('cand_screen_')) {
            call.on('stream', screenStream => {
                console.log('[WebRTC Screen] Screen stream received on main peer from:', call.peer);
                handleIncomingScreenStream(screenStream);
            });
            try { call.answer(); } catch(e) {}
            return;
        }

        const sendStream = interviewerLocalStream || new MediaStream();
        call.on('stream', remoteStream => {
            console.log('[WebRTC Interviewer] Stream received from peer:', call.peer);
            if (call.peer === candPeerId || (call.peer && call.peer.startsWith('cand_') && !call.peer.startsWith('cand_screen_'))) {
                console.log('[WebRTC Interviewer] Candidate video stream connected! Candidate ID:', call.peer);
                const candVid = document.getElementById('interviewer-cand-video');
                if (candVid) safePlayMediaStream(candVid, remoteStream);
                const candCamIcon = document.getElementById('cand-cam-status');
                const isCamOn = candCamIcon ? candCamIcon.classList.contains('fa-video') : true;
                updateCandidateStatusIcons(true, isCamOn, true);
            } else {
                const peerInfo = latestActivePeers.find(p => p.peer_id === call.peer);
                const roleLabel = peerInfo ? (peerInfo.role === 'admin' ? ('Admin ' + (peerInfo.name || '')) : ('Panelist ' + (peerInfo.name || ''))) : 'Panelist';
                const isMicOn = peerInfo ? isTrueVal(peerInfo.mic_on) : true;
                const isCamOn = peerInfo ? isTrueVal(peerInfo.cam_on) : true;
                addOrUpdatePanelistTile(call.peer, remoteStream, roleLabel, isMicOn, isCamOn);
            }

            const badge = document.getElementById('interviewer-call-status');
            if (badge) {
                badge.innerText = 'CONNECTED (LIVE)';
                badge.className = 'px-2.5 py-1 text-xs font-semibold rounded-full bg-emerald-500/30 text-emerald-300 border border-emerald-500';
            }
        });

        call.on('error', err => {
            console.error('[WebRTC Interviewer] Call error from peer:', call.peer, err);
        });

        try { call.answer(sendStream); } catch(e) {
            console.error('[WebRTC Interviewer] Error answering call:', e);
        }
    });

    const screenPeerId = getInterviewerScreenPeerId();
    if (screenReceiverPeer && !screenReceiverPeer.destroyed) {
        try { screenReceiverPeer.destroy(); } catch(e) {}
    }
    screenReceiverPeer = new window.Peer(screenPeerId, {
        config: { iceServers: iceServers }
    });
    screenReceiverPeer.on('call', call => {
        console.log('[WebRTC Screen] Incoming screen call from:', call.peer);
        call.on('stream', screenStream => {
            console.log('[WebRTC Screen] Screen stream received from:', call.peer);
            handleIncomingScreenStream(screenStream);
        });
        try { call.answer(); } catch(e) {
            console.error('[WebRTC Screen] Error answering screen call:', e);
        }
    });

    // Also attempt legacy singleton screen peer if current user is admin / user 1
    const subId = (currentSubmissionUniqueId && currentSubmissionUniqueId !== String(currentInterviewId))
        ? currentSubmissionUniqueId
        : null;
    const legacyScreenPeerId = subId ? ('interviewer_screen_' + currentInterviewId + '_' + subId) : ('interviewer_screen_' + currentInterviewId);

    if (legacyScreenPeerId !== screenPeerId && (currentUserId === 1 || window.currentUserRole === 'admin')) {
        try {
            const legacyScreenPeer = new window.Peer(legacyScreenPeerId, {
                config: { iceServers: iceServers }
            });
            legacyScreenPeer.on('call', call => {
                try { call.answer(); } catch(e) {}
                call.on('stream', screenStream => {
                    handleIncomingScreenStream(screenStream);
                });
            });
            legacyScreenPeer.on('error', () => {});
        } catch(e) {}
    }
}

export function initInterviewerSigChannel() {
    if (!currentInterviewId) return;
    if (interviewerSigChannel) interviewerSigChannel.close();

    interviewerSigChannel = new BroadcastChannel('webrtc_call_' + currentInterviewId);
    const currentUserId = window.currentUserId || 0;
    const currentUserName = window.currentUserName || 'Interviewer';
    const myPeerId = getMyInterviewerPeerId();
    const candPeerId = getCandidatePeerId();

    interviewerSigChannel.onmessage = async (event) => {
        const msg = event.data;
        if (!msg) return;

        if (msg.type === 'violation_occurred') {
            pollReviewData();
        }

        if (msg.type === 'peer_joined' || msg.type === 'candidate_ready' || msg.type === 'peer_presence_ack' || msg.type === 'interviewer_joined') {
            if (msg.peer_id && msg.peer_id !== myPeerId) {
                if (msg.type === 'peer_joined') {
                    interviewerSigChannel.postMessage({
                        type: 'peer_presence_ack',
                        peer_id: myPeerId,
                        user_id: currentUserId,
                        user_name: currentUserName,
                        role: 'interviewer'
                    });
                }

                if (interviewerLocalStream && interviewerPeer && interviewerPeer.open) {
                    try {
                        const outCall = interviewerPeer.call(msg.peer_id, interviewerLocalStream);
                        if (outCall) {
                            outCall.on('stream', remoteStream => {
                                if (msg.peer_id === candPeerId || (msg.peer_id && msg.peer_id.startsWith('cand_') && !msg.peer_id.startsWith('cand_screen_'))) {
                                    const candVid = document.getElementById('interviewer-cand-video');
                                    if (candVid) safePlayMediaStream(candVid, remoteStream);
                                    const candCamIcon = document.getElementById('cand-cam-status');
                                    const isCamOn = candCamIcon ? candCamIcon.classList.contains('fa-video') : true;
                                    updateCandidateStatusIcons(undefined, isCamOn);
                                } else {
                                    addOrUpdatePanelistTile(msg.peer_id, remoteStream, msg.user_name || 'Panelist');
                                }

                                const badge = document.getElementById('interviewer-call-status');
                                if (badge) {
                                    badge.innerText = 'CONNECTED (LIVE)';
                                    badge.className = 'px-2.5 py-1 text-xs font-semibold rounded-full bg-emerald-500/30 text-emerald-300 border border-emerald-500';
                                }
                            });
                        }
                    } catch(e) {}
                }
            }
        } else if (msg.type === 'peer_left') {
            if (msg.peer_id === candPeerId || (msg.peer_id && msg.peer_id.startsWith('cand_') && !msg.peer_id.startsWith('cand_screen_'))) {
                const placeholder = document.getElementById('cand-video-placeholder');
                if (placeholder) placeholder.style.display = 'flex';
            } else if (msg.peer_id) {
                removePanelistTile(msg.peer_id);
            }
        } else if (msg.type === 'answer' && msg.sender === 'candidate' && interviewerPeerConnection) {
            await interviewerPeerConnection.setRemoteDescription(new RTCSessionDescription(msg.answer));
        } else if (msg.type === 'ice-candidate' && msg.sender === 'candidate' && interviewerPeerConnection && msg.candidate) {
            try {
                await interviewerPeerConnection.addIceCandidate(new RTCIceCandidate(msg.candidate));
            } catch(e) {}
        } else if (msg.type === 'end_call_all') {
            leaveInterviewerCall(false);
        }
    };
}

export function startInterviewerCall(isRejoin = false) {
    if (!currentInterviewId) return;
    const startBtn = document.getElementById('btn-start-call');
    if (startBtn && startBtn.disabled) return;
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || window.csrfToken;
    const currentUserName = window.currentUserName || 'Interviewer';

    if (!isRejoin) {
        iAmTheCaller = true;
        const candNameEl = document.getElementById('modal-cand-name');
        const candName = candNameEl ? candNameEl.innerText : 'Candidate';
        if (!globalCallChannel) {
            globalCallChannel = new BroadcastChannel('global_call_alerts');
        }
        globalCallChannel.postMessage({
            type: 'incoming_call',
            interview_id: currentInterviewId,
            candidate_name: candName,
            starter_name: currentUserName,
            call_started_at: new Date().toISOString()
        });
    }

    initInterviewerSigChannel();

    fetch(`/interviews/${currentInterviewId}/call-status`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrfToken
        },
        body: JSON.stringify({ call_status: 'active', is_rejoin: isRejoin })
    });

    const handleStream = (stream) => {
        interviewerLocalStream = stream;
        const selfVid = document.getElementById('interviewer-self-video');
        const selfPlace = document.getElementById('self-video-placeholder');
        if (selfVid) {
            selfVid.muted = true;
            safePlayMediaStream(selfVid, stream, true);
        }
        if (selfPlace) selfPlace.style.display = 'none';

        const micBtn = document.getElementById('btn-toggle-interviewer-mic');
        const camBtn = document.getElementById('btn-toggle-interviewer-cam');
        const startBtn = document.getElementById('btn-start-call');
        const leaveBtn = document.getElementById('btn-leave-call');
        const endAllBtn = document.getElementById('btn-end-all-call');
        const recStartBtn = document.getElementById('btn-start-recording');

        if (micBtn) micBtn.style.display = 'inline-flex';
        if (camBtn) camBtn.style.display = 'inline-flex';
        if (startBtn) startBtn.style.display = 'none';
        if (leaveBtn) leaveBtn.style.display = 'inline-flex';
        if (endAllBtn) endAllBtn.style.display = 'inline-flex';
        if (recStartBtn && (!adminMediaRecorder || adminMediaRecorder.state === 'inactive')) {
            recStartBtn.style.display = 'inline-flex';
        }

        if (interviewerSigChannel) {
            interviewerSigChannel.postMessage({ type: 'interviewer_joined', sender: 'interviewer' });
        }

        if (!interviewerPeer || interviewerPeer.destroyed) {
            initInterviewerPeer();
        }

        const makePeerJSCall = () => {
            if (!interviewerPeer || interviewerPeer.destroyed) return;
            const candPeerId = getCandidatePeerId();
            const myPeerId = getMyInterviewerPeerId();
            activeCall = interviewerPeer.call(candPeerId, stream);

            if (activeCall) {
                activeCall.on('stream', candRemoteStream => {
                    const candVid = document.getElementById('interviewer-cand-video');
                    const placeholder = document.getElementById('cand-video-placeholder');
                    if (candVid) safePlayMediaStream(candVid, candRemoteStream);
                    if (placeholder) placeholder.style.display = 'none';

                    candRemoteStream.onaddtrack = () => {
                        if (placeholder) placeholder.style.display = 'none';
                        if (candVid) safePlayMediaStream(candVid, candRemoteStream);
                    };

                    const badge = document.getElementById('interviewer-call-status');
                    if (badge) {
                        badge.innerText = 'CONNECTED (LIVE)';
                        badge.className = 'px-2.5 py-1 text-xs font-semibold rounded-full bg-emerald-500/30 text-emerald-300 border border-emerald-500';
                    }
                });
            }

            // Also call any other already-active interviewers
            if (Array.isArray(latestActivePeers)) {
                latestActivePeers.forEach(p => {
                    if (p.peer_id && p.peer_id !== myPeerId && p.peer_id.startsWith('interviewer_')) {
                        try {
                            const outCall = interviewerPeer.call(p.peer_id, stream);
                            if (outCall) {
                                const roleLabel = p.role === 'admin' ? ('Admin ' + (p.name || '')) : ('Panelist ' + (p.name || ''));
                                const isMicOn = isTrueVal(p.mic_on);
                                const isCamOn = isTrueVal(p.cam_on);
                                outCall.on('stream', remoteStream => {
                                    addOrUpdatePanelistTile(p.peer_id, remoteStream, roleLabel, isMicOn, isCamOn);
                                });
                            }
                        } catch(e) {}
                    }
                });
            }
        };

        if (interviewerPeer && interviewerPeer.open) {
            makePeerJSCall();
        } else if (interviewerPeer) {
            interviewerPeer.on('open', makePeerJSCall);
        }
    };

    const audioConstraints = {
        echoCancellation: true,
        noiseSuppression: true,
        autoGainControl: true
    };

    navigator.mediaDevices.getUserMedia({ video: true, audio: audioConstraints })
        .then(handleStream)
        .catch(() => {
            navigator.mediaDevices.getUserMedia({ video: true, audio: true })
                .then(handleStream)
                .catch(() => {
                    navigator.mediaDevices.getUserMedia({ video: false, audio: true })
                        .then(handleStream)
                        .catch(() => {
                            navigator.mediaDevices.getUserMedia({ video: true, audio: false })
                                .then(handleStream)
                                .catch(err => console.log('WebRTC Stream init error:', err));
                        });
                });
        });
}

export function leaveInterviewerCall(isEndAll = false) {
    sendInterviewerPeerHeartbeat('leave');
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || window.csrfToken;
    const endingId = currentInterviewId;

    if (interviewerSigChannel) {
        try {
            interviewerSigChannel.postMessage({
                type: 'peer_left',
                peer_id: getMyInterviewerPeerId()
            });
        } catch(e) {}
    }

    if (endingId && isEndAll) {
        endedCallIds.add(endingId);
        dismissedCallIds.add(endingId);

        if (globalCallChannel) {
            try {
                globalCallChannel.postMessage({
                    type: 'call_ended',
                    interview_id: endingId
                });
            } catch(e) {}
        }

        if (interviewerSigChannel) {
            try {
                interviewerSigChannel.postMessage({ type: 'end_call_all', interview_id: endingId });
            } catch(e) {}
        }

        fetch(`/interviews/${endingId}/call-status`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify({ call_status: 'ended' })
        }).catch(() => {});
    }

    if (interviewerLocalStream) {
        try {
            interviewerLocalStream.getTracks().forEach(t => t.stop());
        } catch(e) {}
        interviewerLocalStream = null;
    }
    if (activeCall) {
        try { activeCall.close(); } catch(e) {}
        activeCall = null;
    }
    if (interviewerPeer) {
        try { interviewerPeer.destroy(); } catch(e) {}
        interviewerPeer = null;
    }
    if (screenReceiverPeer) {
        try { screenReceiverPeer.destroy(); } catch(e) {}
        screenReceiverPeer = null;
    }

    updateCandidateStatusIcons(false, false, false);

    const candPlace = document.getElementById('cand-video-placeholder');
    const screenPlace = document.getElementById('screen-video-placeholder');
    const selfPlace = document.getElementById('self-video-placeholder');
    if (candPlace) candPlace.style.display = 'flex';
    if (screenPlace) screenPlace.style.display = 'flex';
    if (selfPlace) selfPlace.style.display = 'flex';

    const candVid = document.getElementById('interviewer-cand-video');
    if (candVid) candVid.srcObject = null;

    const screenVid = document.getElementById('interviewer-screen-video');
    if (screenVid) screenVid.srcObject = null;

    const selfVid = document.getElementById('interviewer-self-video');
    if (selfVid) selfVid.srcObject = null;

    panelistMeshTiles.forEach((_, pid) => {
        removePanelistTile(pid);
    });

    const livePulseDot = document.getElementById('live-call-pulse');
    if (livePulseDot) livePulseDot.style.display = 'none';

    const startBtn = document.getElementById('btn-start-call');
    if (startBtn) {
        const icon = startBtn.querySelector('i');
        const span = startBtn.querySelector('span');
        if (isEndAll) {
            if (icon) icon.className = 'fa-solid fa-phone-slash';
            if (span) span.innerText = 'Call Ended';
            startBtn.disabled = true;
            startBtn.style.opacity = '0.5';
            startBtn.style.cursor = 'not-allowed';
            startBtn.style.pointerEvents = 'none';
            startBtn.style.display = 'inline-flex';
        } else {
            if (icon) icon.className = 'fa-solid fa-phone';
            if (span) span.innerText = 'Join Call';
            startBtn.disabled = false;
            startBtn.style.opacity = '1';
            startBtn.style.cursor = 'pointer';
            startBtn.style.pointerEvents = 'auto';
            startBtn.style.display = 'inline-flex';
        }
    }

    const leaveBtn = document.getElementById('btn-leave-call');
    if (leaveBtn) leaveBtn.style.display = 'none';

    const endAllBtn = document.getElementById('btn-end-all-call');
    if (endAllBtn) endAllBtn.style.display = 'none';

    const micBtn = document.getElementById('btn-toggle-interviewer-mic');
    if (micBtn) micBtn.style.display = 'none';

    const camBtn = document.getElementById('btn-toggle-interviewer-cam');
    if (camBtn) camBtn.style.display = 'none';

    const recStartBtn = document.getElementById('btn-start-recording');
    if (recStartBtn) recStartBtn.style.display = 'none';

    const recStopBtn = document.getElementById('btn-stop-recording');
    if (recStopBtn) recStopBtn.style.display = 'none';
    if (adminMediaRecorder && adminMediaRecorder.state !== 'inactive') {
        try { adminMediaRecorder.stop(); } catch(e) {}
    }

    const timelinePill = document.getElementById('timeline-status-pill');
    if (timelinePill && isEndAll) {
        const icon = timelinePill.querySelector('i');
        const span = timelinePill.querySelector('span');
        if (icon) icon.className = 'fa-solid fa-circle text-[8px]';
        if (span) span.innerText = 'Call ended';
        timelinePill.className = 'pill red inline-flex items-center gap-1.5 font-semibold text-[11px] px-2.5 py-1 rounded-full border border-[rgba(239,74,95,0.32)] text-[#ef4a5f] bg-[rgba(239,74,95,0.1)]';
    }
}

export function endCallForAll() {
    const executeEndCall = () => {
        callRingtone.stop();
        const modal = document.getElementById('incoming-call-modal');
        if (modal) modal.classList.remove('active');
        activeIncomingCall = null;
        iAmTheCaller = false;
        leaveInterviewerCall(true);
    };

    if (typeof window.Swal !== 'undefined') {
        window.Swal.fire({
            title: '🛑 End Call for All Participants?',
            text: 'This will terminate the 2-way call session for candidate and all panelists.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#ef4444',
            cancelButtonColor: '#475569',
            confirmButtonText: 'Yes, End Call for All'
        }).then((result) => {
            if (result.isConfirmed) {
                executeEndCall();
            }
        });
    } else {
        if (confirm('End Call for All Participants?')) {
            executeEndCall();
        }
    }
}

// MediaRecorder & Recording Compositor
let adminMediaRecorder = null;
let adminRecordedChunks = [];
let recordingCompositor = null;
let recordingTimerInterval = null;
let recordingStartTime = null;

export function startCallRecording() {
    if (!currentInterviewId) {
        alert('Please open an active candidate interview session first.');
        return;
    }
    if (!interviewerLocalStream) {
        alert('Please start or join the call before recording.');
        return;
    }

    const candVid = document.getElementById('interviewer-cand-video');
    const candNameEl = document.getElementById('modal-cand-name');
    const candidateName = candNameEl ? candNameEl.innerText.trim() : 'Candidate';

    // 1. Initialize RecordingCompositor (1920x1080 @ 30fps)
    recordingCompositor = new RecordingCompositor({
        width: 1920,
        height: 1080,
        fps: 30,
        getParticipantsData: () => {
            const candStream = (candVid && candVid.srcObject) ? candVid.srcObject : null;
            const candCamIcon = document.getElementById('cand-cam-status');
            const candMicIcon = document.getElementById('cand-mic-status');
            const isCandCamOn = candCamIcon ? candCamIcon.classList.contains('fa-video') : true;
            const isCandMicOn = candMicIcon ? candMicIcon.classList.contains('fa-microphone') : true;

            const panelistsList = [];
            const panelistStreamsList = [];

            panelistMeshTiles.forEach((stream, pid) => {
                const peerInfo = latestActivePeers.find(p => p.peer_id === pid);
                const pMicEl = document.getElementById('mesh-mic-' + pid);
                const pCamEl = document.getElementById('mesh-cam-' + pid);
                const isMicOn = pMicEl ? pMicEl.classList.contains('fa-microphone') : (peerInfo ? isTrueVal(peerInfo.mic_on) : true);
                const isCamOn = pCamEl ? pCamEl.classList.contains('fa-video') : (peerInfo ? isTrueVal(peerInfo.cam_on) : true);
                const pName = peerInfo ? (peerInfo.name || 'Panelist') : 'Panelist';
                const pRole = peerInfo ? (peerInfo.role === 'admin' ? 'Admin' : 'Panelist') : 'Panelist';

                panelistsList.push({
                    peerId: pid,
                    name: pName,
                    role: pRole,
                    micOn: isMicOn,
                    camOn: isCamOn
                });

                if (stream) {
                    panelistStreamsList.push({ peerId: pid, stream: stream });
                }
            });

            return {
                candidateStream: candStream,
                candidateName: candidateName,
                candidateCamOn: isCandCamOn,
                candidateMicOn: isCandMicOn,
                selfStream: interviewerLocalStream,
                selfName: window.currentUserName || 'Interviewer',
                selfCamOn: isInterviewerCamOn,
                selfMicOn: isInterviewerMicOn,
                panelists: panelistsList,
                panelistStreams: panelistStreamsList
            };
        }
    });

    try {
        recordingCompositor.start();
        const streamToRecord = recordingCompositor.getStream();

        adminRecordedChunks = [];
        let options = {};
        if (typeof MediaRecorder.isTypeSupported === 'function') {
            if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8,opus')) {
                options = { mimeType: 'video/webm;codecs=vp8,opus' };
            } else if (MediaRecorder.isTypeSupported('video/webm')) {
                options = { mimeType: 'video/webm' };
            }
        }

        try {
            adminMediaRecorder = new MediaRecorder(streamToRecord, options);
        } catch(errOpt) {
            adminMediaRecorder = new MediaRecorder(streamToRecord);
        }

        adminMediaRecorder.ondataavailable = function(e) {
            if (e.data && e.data.size > 0) {
                adminRecordedChunks.push(e.data);
            }
        };

        adminMediaRecorder.onstop = function() {
            if (recordingCompositor) {
                recordingCompositor.stop();
                recordingCompositor = null;
            }
            if (adminRecordedChunks.length === 0) return;
            const recMime = adminMediaRecorder.mimeType || 'video/webm';
            const isMp4 = recMime.includes('mp4');
            const ext = isMp4 ? 'mp4' : 'webm';
            const blobType = isMp4 ? 'video/mp4' : 'video/webm';

            const blob = new Blob(adminRecordedChunks, { type: blobType });
            uploadRecordedBlob(blob, ext);
        };

        adminMediaRecorder.start(1000);
        recordingStartTime = Date.now();

        // Update UI buttons & Live Timer
        const recStartBtn = document.getElementById('btn-start-recording');
        const recStopBtn = document.getElementById('btn-stop-recording');
        if (recStartBtn) recStartBtn.style.display = 'none';
        if (recStopBtn) recStopBtn.style.display = 'inline-flex';

        if (recordingTimerInterval) clearInterval(recordingTimerInterval);
        recordingTimerInterval = setInterval(() => {
            const timerEl = document.getElementById('rec-live-timer');
            if (timerEl && recordingStartTime) {
                const totalSec = Math.floor((Date.now() - recordingStartTime) / 1000);
                const mins = String(Math.floor(totalSec / 60)).padStart(2, '0');
                const secs = String(totalSec % 60).padStart(2, '0');
                timerEl.innerText = `(${mins}:${secs})`;
            }
        }, 1000);

        if (typeof window.Swal !== 'undefined') {
            window.Swal.fire({
                icon: 'info',
                title: 'Composite Recording Started',
                text: 'Recording composite layout (Candidate, Screen, and Panelists in HD).',
                toast: true,
                position: 'top-end',
                timer: 3500,
                showConfirmButton: false
            });
        }
    } catch(e) {
        if (recordingCompositor) {
            recordingCompositor.stop();
            recordingCompositor = null;
        }
        alert('Recording failed to initialize: ' + e.message);
    }
}

export function stopCallRecording() {
    if (recordingTimerInterval) {
        clearInterval(recordingTimerInterval);
        recordingTimerInterval = null;
    }
    if (adminMediaRecorder && adminMediaRecorder.state !== 'inactive') {
        adminMediaRecorder.stop();
    }
    if (recordingCompositor) {
        recordingCompositor.stop();
        recordingCompositor = null;
    }
    const recStartBtn = document.getElementById('btn-start-recording');
    const recStopBtn = document.getElementById('btn-stop-recording');
    if (recStartBtn) recStartBtn.style.display = 'inline-flex';
    if (recStopBtn) recStopBtn.style.display = 'none';
}

export function uploadRecordedBlob(blob, ext = 'webm') {
    if (!currentInterviewId && typeof document !== 'undefined') {
        currentInterviewId = document.body?.dataset?.interviewId || window.interviewId;
    }
    if (!currentInterviewId) {
        console.error('Cannot upload recording: missing interview ID');
        return;
    }
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || window.csrfToken;

    const formData = new FormData();
    formData.append('video', blob, `interview_${currentInterviewId}_${Date.now()}.${ext}`);
    formData.append('_token', csrfToken);

    fetch(`/candidate/upload-recording/${currentInterviewId}`, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'X-CSRF-TOKEN': csrfToken,
            'X-Requested-With': 'XMLHttpRequest'
        },
        body: formData
    })
    .then(async r => {
        const contentType = r.headers.get('content-type') || '';
        const isJson = contentType.includes('application/json');
        if (!r.ok) {
            const errText = await r.text();
            let errMsg = `Upload failed (HTTP ${r.status})`;
            if (isJson) {
                try {
                    const errJson = JSON.parse(errText);
                    if (errJson && errJson.message) errMsg = errJson.message;
                } catch(e) {}
            }
            throw new Error(errMsg);
        }
        if (isJson) {
            return r.json();
        }
        const text = await r.text();
        try {
            return JSON.parse(text);
        } catch(e) {
            return { success: true };
        }
    })
    .then(res => {
        if (res && res.success) {
            if (typeof window.Swal !== 'undefined') {
                window.Swal.fire({
                    icon: 'success',
                    title: 'Recording Saved!',
                    text: 'Call recording saved successfully to server and candidate report.',
                    toast: true,
                    position: 'top-end',
                    timer: 3500,
                    showConfirmButton: false
                });
            }
            pollReviewData();
        } else if (res && res.message) {
            if (typeof window.Swal !== 'undefined') {
                window.Swal.fire({
                    icon: 'warning',
                    title: 'Recording Notice',
                    text: res.message,
                    toast: true,
                    position: 'top-end',
                    timer: 4000,
                    showConfirmButton: false
                });
            }
        }
    })
    .catch(err => {
        console.error('Recording upload error:', err);
        if (typeof window.Swal !== 'undefined') {
            window.Swal.fire({
                icon: 'error',
                title: 'Recording Upload Failed',
                text: err.message || 'Failed to save recording to server.',
                toast: true,
                position: 'top-end',
                timer: 4500,
                showConfirmButton: false
            });
        }
    });
}

export function toggleInterviewerMic() {
    if (!interviewerLocalStream) return;
    const audioTracks = interviewerLocalStream.getAudioTracks();
    if (audioTracks.length === 0) return;

    isInterviewerMicOn = !isInterviewerMicOn;
    audioTracks[0].enabled = isInterviewerMicOn;

    const btn = document.getElementById('btn-toggle-interviewer-mic');
    if (btn) {
        const icon = btn.querySelector('i');
        if (icon) {
            icon.className = isInterviewerMicOn ? 'fa-solid fa-microphone' : 'fa-solid fa-microphone-slash';
        }

        btn.title = isInterviewerMicOn ? 'Mic On (Click to Mute)' : 'Mic Muted (Click to Unmute)';

        if (isInterviewerMicOn) {
            btn.classList.remove('bg-[#ef4a5f]', 'border-[#ef4a5f]', 'hover:bg-[#d63d51]', 'text-white');
            btn.classList.add('bg-[#0d1220]', 'text-slate-300', 'border-[#232b3d]');
        } else {
            btn.classList.remove('bg-[#0d1220]', 'text-slate-300', 'border-[#232b3d]');
            btn.classList.add('bg-[#ef4a5f]', 'border-[#ef4a5f]', 'hover:bg-[#d63d51]', 'text-white');
        }
    }

    const selfMicIcon = document.getElementById('self-mic-status');
    if (selfMicIcon) {
        selfMicIcon.className = isInterviewerMicOn ? 'fa-solid fa-microphone text-[#21c274] text-[10px]' : 'fa-solid fa-microphone-slash text-[#ef4a5f] text-[10px]';
        selfMicIcon.title = isInterviewerMicOn ? 'Mic On' : 'Mic Muted';
    }

    sendInterviewerPeerHeartbeat();
}

export function toggleInterviewerCam() {
    const selfPlaceholder = document.getElementById('self-video-placeholder');
    const selfVid = document.getElementById('interviewer-self-video');

    isInterviewerCamOn = !isInterviewerCamOn;

    const btn = document.getElementById('btn-toggle-interviewer-cam');
    if (btn) {
        const icon = btn.querySelector('i');
        if (icon) {
            icon.className = isInterviewerCamOn ? 'fa-solid fa-video' : 'fa-solid fa-video-slash';
        }
        btn.title = isInterviewerCamOn ? 'Cam On (Click to Turn Off)' : 'Cam Off (Click to Turn On)';

        if (isInterviewerCamOn) {
            btn.classList.remove('bg-[#ef4a5f]', 'border-[#ef4a5f]', 'hover:bg-[#d63d51]', 'text-white');
            btn.classList.add('bg-[#0d1220]', 'text-slate-300', 'border-[#232b3d]');
        } else {
            btn.classList.remove('bg-[#0d1220]', 'text-slate-300', 'border-[#232b3d]');
            btn.classList.add('bg-[#ef4a5f]', 'border-[#ef4a5f]', 'hover:bg-[#d63d51]', 'text-white');
        }
    }

    const selfCamIcon = document.getElementById('self-cam-status');
    if (selfCamIcon) {
        selfCamIcon.className = isInterviewerCamOn ? 'fa-solid fa-video text-[#21c274] text-[10px]' : 'fa-solid fa-video-slash text-[#ef4a5f] text-[10px]';
        selfCamIcon.title = isInterviewerCamOn ? 'Camera On' : 'Camera Off';
    }

    if (interviewerLocalStream) {
        const videoTracks = interviewerLocalStream.getVideoTracks();
        if (videoTracks.length > 0) {
            videoTracks[0].enabled = isInterviewerCamOn;
        }
    } else if (isInterviewerCamOn) {
        navigator.mediaDevices.getUserMedia({ video: true, audio: false })
            .then(stream => {
                interviewerLocalStream = stream;
                if (selfVid) {
                    selfVid.srcObject = stream;
                    selfVid.play().catch(() => {});
                }
                if (selfPlaceholder) selfPlaceholder.style.display = 'none';
            })
            .catch(() => {});
        sendInterviewerPeerHeartbeat();
        return;
    }

    if (selfPlaceholder) selfPlaceholder.style.display = isInterviewerCamOn ? 'none' : 'flex';
    sendInterviewerPeerHeartbeat();
}

export function closeReviewModal() {
    if (sosPollInterval) clearInterval(sosPollInterval);
    if (peerHeartbeatTimer) clearInterval(peerHeartbeatTimer);
    if (liveSyncChannel) {
        try { liveSyncChannel.close(); } catch(e) {}
        liveSyncChannel = null;
    }
    leaveInterviewerCall(false);
    const modal = document.getElementById('review-modal');
    if (modal) modal.classList.remove('active');
}

export function sendSilentWarning() {
    const input = document.getElementById('warning-input');
    if (!input) return;
    const msg = input.value.trim();
    if (!msg || !currentInterviewId) return;
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || window.csrfToken;

    input.value = '';
    if (liveSyncChannel) {
        liveSyncChannel.postMessage({ type: 'chat_message', message: msg, sender: 'interviewer' });
    }

    fetch(`/interviews/${currentInterviewId}/warning`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrfToken
        },
        body: JSON.stringify({ message: msg })
    })
    .then(r => r.json())
    .then(() => {
        pollReviewData();
    });
}

export function setCurrentInterviewId(id) {
    currentInterviewId = id;
}

// Bind functions onto window object for template inline onclick handlers
if (typeof window !== 'undefined') {
    window.CallRingtoneEngine = CallRingtoneEngine;
    window.callRingtone = callRingtone;
    window.getInitials = getInitials;
    window.zoomScreen = zoomScreen;
    window.resetZoomScreen = resetZoomScreen;
    window.toggleFullscreenScreen = toggleFullscreenScreen;
    window.zoomCandVideo = zoomCandVideo;
    window.toggleSosAutoTrigger = toggleSosAutoTrigger;
    window.openReportPage = openReportPage;
    window.toggleTabScreenshotCapture = toggleTabScreenshotCapture;
    window.updateScreenshotToggleBtnUI = updateScreenshotToggleBtnUI;
    window.switchIdeTab = switchIdeTab;
    window.triggerIncomingCallRing = triggerIncomingCallRing;
    window.pollGlobalActiveCalls = pollGlobalActiveCalls;
    window.acceptIncomingCall = acceptIncomingCall;
    window.declineIncomingCall = declineIncomingCall;
    window.subscribeLiveSync = subscribeLiveSync;
    window.openReviewModal = openReviewModal;
    window.sendInterviewerPeerHeartbeat = sendInterviewerPeerHeartbeat;
    window.pollReviewData = pollReviewData;
    window.openSosModal = openSosModal;
    window.stopSosAlarm = stopSosAlarm;
    window.disableSosAndStopAlarm = disableSosAndStopAlarm;
    window.toggleSosAutoTrigger = toggleSosAutoTrigger;
    window.interviewerLogoutAction = interviewerLogoutAction;
    window.regenerateCandidatePassword = regenerateCandidatePassword;
    window.blockCandidateAction = blockCandidateAction;
    window.startInterviewerCall = startInterviewerCall;
    window.leaveInterviewerCall = leaveInterviewerCall;
    window.endCallForAll = endCallForAll;
    window.startCallRecording = startCallRecording;
    window.stopCallRecording = stopCallRecording;
    window.toggleInterviewerMic = toggleInterviewerMic;
    window.toggleInterviewerCam = toggleInterviewerCam;
    window.closeReviewModal = closeReviewModal;
    window.sendSilentWarning = sendSilentWarning;
    window.setCurrentInterviewId = setCurrentInterviewId;
    window.closeInspectorPanel = closeInspectorPanel;

    // Attach listeners
    ['click', 'keydown', 'touchstart'].forEach(evt => {
        document.addEventListener(evt, () => callRingtone.init(), { passive: true });
    });

    globalCallChannel = new BroadcastChannel('global_call_alerts');
    globalCallChannel.onmessage = (event) => {
        const data = event.data;
        if (!data) return;

        if (data.type === 'incoming_call') {
            if (typeof document !== 'undefined' && document.body && document.body.dataset.interviewId) return;
            if (typeof window !== 'undefined' && window.location.pathname.includes('/candidate/')) return;
            triggerIncomingCallRing({
                id: data.interview_id,
                candidate_name: data.candidate_name,
                submission_unique_id: data.submission_unique_id,
                starter_name: data.starter_name,
                call_started_at: data.call_started_at || new Date().toISOString()
            }, true);
        } else if (data.type === 'call_ended') {
            endedCallIds.add(data.interview_id);
            dismissedCallIds.add(data.interview_id);
            callRingtone.stop();
            if (ringTimeoutTimer) {
                clearTimeout(ringTimeoutTimer);
                ringTimeoutTimer = null;
            }
            const modal = document.getElementById('incoming-call-modal');
            if (modal) modal.classList.remove('active');
            if (activeIncomingCall && activeIncomingCall.id == data.interview_id) {
                activeIncomingCall = null;
            }
            if (currentInterviewId && currentInterviewId == data.interview_id) {
                updateCandidateStatusIcons(false, false, false);
                leaveInterviewerCall(false);
            }
        }
    };

    setInterval(pollGlobalActiveCalls, 6000);
}