@include('theme2.head')
@section('title', 'Host Live Stream')
@section('content')
@include('admin.message')
<!-- breadcrumb-area -->
@php
$gets = App\Breadcum::first();
@endphp
@if($gets['img'] !== NULL && $gets['img'] !== '')
<section class="breadcrumb-area d-flex p-relative align-items-center" style="background-image: url('{{ asset('/images/breadcum/'.$gets->img) }}')">
@else
<section class="breadcrumb-area d-flex p-relative align-items-center" style="background-image: url('{{ asset('Avatar::create($gets->text)->toBase64() ') }}')">
@endif
<div class="overlay-bg"></div>
    <div class="container">
        <div class="row align-items-center">
            <div class="col-xl-12 col-lg-12">
                <div class="breadcrumb-wrap text-left">
                    <div class="breadcrumb-title">
                        <h2>{{ __('Host Stream') }}</h2>    
                    </div>
                </div>
            </div>
            <div class="breadcrumb-wrap2">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{route('home')}}">{{__('Home')}}</a></li>
                        <li class="breadcrumb-item"><a href="{{route('streams.index')}}">{{__('Live Streams')}}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{__('Host Stream')}}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</section>
<!-- breadcrumb-area-end -->
<section class="courses pt-120 pb-120 p-relative fix">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div>
                            <h3>{{__('Hosting')}}: {{ $stream->title }}</h3>
                            <span class="badge bg-danger live-indicator">{{__('LIVE')}}</span>
                        </div>
                        <div class="viewer-count">
                            <i class="fas fa-eye"></i> <span id="viewer-count">0</span> {{__('viewers')}}
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="video-container">
                                    <div id="local-player" class="local-player"></div>
                                    <button id="fullscreen-btn" class="fullscreen-btn">
                                        <i class="fas fa-expand"></i>
                                    </button>
                                    <div class="controls mt-3">
                                        <button id="start-btn" class="btn btn-success btn-small">
                                            <i class="fas fa-play"></i> {{__('Start Live')}}
                                        </button>
                                        <button id="stop-btn" class="btn btn-danger btn-small" disabled>
                                            <i class="fas fa-stop"></i> {{__('Stop Stream')}}
                                        </button>
                                        <button id="screen-btn" class="btn btn-primary btn-small" disabled>
                                            <i class="fas fa-desktop"></i> {{__('Share Screen')}}
                                        </button>
                                        <button id="camera-btn" class="btn btn-secondary btn-small">
                                            <i class="fas fa-camera"></i> {{__('Switch to Camera')}}
                                        </button>                                                                          
                                    </div>
                                    <div id="share-container" class="share-section mt-3" style="display:none">
                                        <h4>{{__('Share Your Stream')}}</h4>
                                        <div class="input-group">
                                            <input type="text" id="share-url" class="form-control" readonly>
                                            <button id="copy-btn" class="btn btn-outline-success">
                                                <i class="fas fa-copy"></i> {{__('Copy')}}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="chat-container">
                                    <div class="card">
                                        <div class="card-header bg-primary text-white">
                                            {{__('Live Chat')}}
                                        </div>
                                        <div class="card-body p-0">
                                            <div id="chat-messages" class="chat-messages"></div>
                                            <div class="chat-input p-2">
                                                <div class="input-group">
                                                    <input type="text" id="chat-input" class="form-control" placeholder="{{__('Type a message...')}}" disabled>
                                                    <button id="send-btn" class="btn btn-primary" disabled>
                                                        <i class="fas fa-paper-plane"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<style>
    .live-indicator {
        display: none;
    }
    .live-indicator.active {
        display: inline-block;
        animation: pulse 2s infinite;
    }
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; }
    }
    .local-player {
        width: 100%;
        height: 480px;
        background-color: #1a1a1a;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
    }
    .chat-messages {
        height: 400px;
        overflow-y: auto;
        padding: 15px;
        background-color: #f8f9fa;
    }
    .message {
        margin-bottom: 10px;
        padding: 8px 12px;
        border-radius: 6px;
        max-width: 80%;
        word-break: break-word;
    }
    .message.remote {
        background-color: #e9ecef;
        align-self: flex-start;
    }
    .message.local {
        background-color: #007bff;
        color: white;
        align-self: flex-end;
        margin-left: auto;
    }
    .message .sender {
        font-weight: bold;
        font-size: 12px;
        margin-bottom: 4px;
    }
    .message .text {
        font-size: 14px;
    }
    .message .time {
        font-size: 10px;
        text-align: right;
        margin-top: 4px;
        opacity: 0.8;
    }
</style>
<script src="https://download.agora.io/sdk/release/AgoraRTC_N-4.22.2.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {

var baseUrl = "{{ url('/') }}";
    // Stream data
    const streamId = {{ $stream->id }};
    // const channelName = "{{ $stream->channel_name }}";
    // const appId = "{{ config('services.agora.app_id') }}";
    // const token = "{{ $token }}";
    const appId = "1c03a5f7b65d48ba9cec003ed6bb8ff5"; // Your App ID
    let channelName = "test-channel";
    let token = "007eJxTYGC7lble7qnRvL/p36elx5tftPq+x1Vvz46QM5/uzb8TeiVLgcEw2cA40TTNPMnMNMXEIinRMjk12cDAODXFLCnJIi3NtFrjV3pDICNDzBNGVkYGCATxeRhKUotLdJMzEvPyUnMYGABj/iXe"; // Replace this with a valid token!
    const userId = {{ Auth::id() }};
    const username = "{{ Auth::user()->name }}";
    // DOM elements
    const startBtn = document.getElementById("start-btn");
    const stopBtn = document.getElementById("stop-btn");
    const screenBtn = document.getElementById("screen-btn");
    const cameraBtn = document.getElementById("camera-btn");
    const viewerCountElem = document.getElementById("viewer-count");
    const shareContainer = document.getElementById("share-container");
    const shareUrlInput = document.getElementById("share-url");
    const copyBtn = document.getElementById("copy-btn");
    const liveIndicator = document.querySelector(".live-indicator");
    const chatMessages = document.getElementById("chat-messages");
    const chatInput = document.getElementById("chat-input");
    const sendBtn = document.getElementById("send-btn");
    // Create Agora client
    const client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
    // Tracks and state variables
    let localTracks = {
        videoTrack: null,
        audioTrack: null,
        screenTrack: null
    };
    let isScreenSharing = false;
    let currentViewers = 0;
    let lastMessageId = 0;
    // Update live status
    function setLiveStatus(isLive) {
        if (isLive) {
            liveIndicator.classList.add("active");
        } else {
            liveIndicator.classList.remove("active");
        }
    }
    // Add message to chat
    function addMessageToChat(message, sender, isLocal = false) {
        const messageDiv = document.createElement("div");
        messageDiv.className = `message ${isLocal ? 'local' : 'remote'}`;
        const senderDiv = document.createElement("div");
        senderDiv.className = "sender";
        senderDiv.textContent = sender;
        const textDiv = document.createElement("div");
        textDiv.className = "text";
        textDiv.textContent = message;
        const timeDiv = document.createElement("div");
        timeDiv.className = "time";
        timeDiv.textContent = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
        messageDiv.appendChild(senderDiv);
        messageDiv.appendChild(textDiv);
        messageDiv.appendChild(timeDiv);
        chatMessages.appendChild(messageDiv);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }
    // Send chat message to server
    async function sendChatMessage() {
        if (!chatInput.value.trim()) return;
        try {
            const response = await fetch(baseUrl + `/streams/${streamId}/message`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    message: chatInput.value.trim(),
                    username: username
                })
            });
            const data = await response.json();
            if (data.success) {
                addMessageToChat(data.message.message, data.message.username, true);
                chatInput.value = "";
                lastMessageId = data.message.id;
            }
        } catch (err) {
            console.error("Error sending message:", err);
        }
    }
    // Fetch new messages
    async function fetchMessages() {
        try {
            const response = await fetch(baseUrl + `/streams/${streamId}/messages?last_id=${lastMessageId}`);
            const data = await response.json();
            if (data.messages.length > 0) {
                data.messages.forEach(msg => {
                    addMessageToChat(msg.message, msg.username);
                    lastMessageId = msg.id;
                });
            }
        } catch (err) {
            console.error("Error fetching messages:", err);
        }
    }
   // Update the CSS for the local-player to handle fullscreen better
const localPlayer = document.getElementById("local-player");
const fullscreenBtn = document.getElementById("fullscreen-btn");

// Fullscreen functionality
fullscreenBtn.addEventListener("click", () => {
    if (document.fullscreenElement) {
        document.exitFullscreen();
        fullscreenBtn.innerHTML = '<i class="fas fa-expand"></i>';
        // Reset any custom styling when exiting fullscreen
        localPlayer.style.objectFit = "contain";
    } else {
        localPlayer.requestFullscreen();
        fullscreenBtn.innerHTML = '<i class="fas fa-compress"></i>';
        // Set the video to contain mode to maintain aspect ratio
        localPlayer.style.objectFit = "contain";
    }
});

// Add CSS to handle the video element inside the player
document.head.insertAdjacentHTML('beforeend', `
<style>
    .local-player video {
        object-fit: contain !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
    }
    
    /* When in fullscreen */
    .local-player:fullscreen {
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: black;
    }
    
    .local-player:fullscreen video {
        max-width: 100% !important;
        max-height: 100vh !important;
        object-fit: contain !important;
    }
</style>
`);
    // Update viewer count on server
    async function updateViewerCount(count) {
        try {
            await fetch(baseUrl + `/streams/${streamId}/viewers`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ count: count })
            });
        } catch (err) {
            console.error("Error updating viewer count:", err);
        }
    }
    // Generate share URL
    function generateShareUrl() {
        return baseUrl + `/streams/${streamId}`;
    }
    // Copy button handler
    copyBtn.addEventListener("click", () => {
        shareUrlInput.select();
        document.execCommand("copy");
        copyBtn.innerHTML = '<i class="fas fa-check"></i> Copied!';
        setTimeout(() => {
            copyBtn.innerHTML = '<i class="fas fa-copy"></i> Copy';
        }, 2000);
    });
    // Chat event listeners
    sendBtn.addEventListener("click", sendChatMessage);
    chatInput.addEventListener("keypress", (e) => {
        if (e.key === "Enter") sendChatMessage();
    });
    // Client event listeners
    client.on("user-joined", (user) => {
        currentViewers = client.remoteUsers.length + 1; // +1 includes the host
        viewerCountElem.textContent = currentViewers;
        updateViewerCount(currentViewers);
    });
    client.on("user-left", (user) => {
        currentViewers = client.remoteUsers.length + 1; // +1 includes the host
        viewerCountElem.textContent = currentViewers;
        updateViewerCount(currentViewers);
    });
    // Switch to screen sharing
    screenBtn.onclick = async function() {
        try {
            if (isScreenSharing) {
                // Switch back to camera
                await switchToCamera();
                screenBtn.innerHTML = '<i class="fas fa-desktop"></i> Share Screen';
                return;
            }
            // Start screen sharing
            localTracks.screenTrack = await AgoraRTC.createScreenVideoTrack({}, "auto");
            // If we already have a camera track, unpublish it
            if (localTracks.videoTrack) {
                await client.unpublish(localTracks.videoTrack);
                localTracks.videoTrack.close();
            }
            // Play locally and publish
            localTracks.screenTrack.play("local-player");
            await client.publish(localTracks.screenTrack);
            isScreenSharing = true;
            screenBtn.innerHTML = '<i class="fas fa-camera"></i> Switch to Camera';
            // Handle screen share ended
            localTracks.screenTrack.on("track-ended", async () => {
                await switchToCamera();
                screenBtn.innerHTML = '<i class="fas fa-desktop"></i> Share Screen';
            });
        } catch (err) {
            console.error("Screen share error:", err);
        }
    };
    // Switch to camera
    async function switchToCamera() {
        try {
            // Unpublish screen track if exists
            if (localTracks.screenTrack) {
                await client.unpublish(localTracks.screenTrack);
                localTracks.screenTrack.close();
                localTracks.screenTrack = null;
            }
            // Create and publish camera track
            localTracks.videoTrack = await AgoraRTC.createCameraVideoTrack();
            localTracks.videoTrack.play("local-player");
            await client.publish(localTracks.videoTrack);
            isScreenSharing = false;
        } catch (err) {
            console.error("Camera switch error:", err);
        }
    }
    // Camera button handler
    cameraBtn.onclick = async function() {
        if (isScreenSharing) {
            await switchToCamera();
            screenBtn.innerHTML = '<i class="fas fa-desktop"></i> Share Screen';
        }
    };
    // Start streaming
    startBtn.onclick = async function() {
        startBtn.disabled = true;
        try {
            // Join Agora channel
            await client.join(appId, channelName, token, null);
            // Create and publish tracks
            localTracks.audioTrack = await AgoraRTC.createMicrophoneAudioTrack();
            localTracks.videoTrack = await AgoraRTC.createCameraVideoTrack();
            localTracks.videoTrack.play("local-player");
            await client.publish(Object.values(localTracks).filter(track => track !== null));
            // Update stream status on server
            await fetch(baseUrl + `/streams/${streamId}/start`, {
                method: 'POST',
                headers: {
                }
            });
            // Enable buttons and UI elements
            setLiveStatus(true);
            stopBtn.disabled = false;
            screenBtn.disabled = false;
            chatInput.disabled = false;
            sendBtn.disabled = false;
            // Show share URL
            shareUrlInput.value = generateShareUrl();
            shareContainer.style.display = "block";
            // Start polling for messages
            setInterval(fetchMessages, 3000);
        } catch (err) {
            console.error("Stream error:", err);
            startBtn.disabled = false;
        }
    };
    // Stop streaming
    stopBtn.onclick = async function() {
        stopBtn.disabled = true;
        try {
            // Close local tracks
            Object.values(localTracks).forEach(track => {
                if (track) {
                    track.close();
                }
            });
            localTracks = { videoTrack: null, audioTrack: null, screenTrack: null };
            // Leave the channel
            await client.leave();
            // Update stream status on server
            await fetch(baseUrl + `/streams/${streamId}/end`, {
                method: 'POST',
                headers: {
                }
            });
            // Reset UI
            setLiveStatus(false);
            shareContainer.style.display = "none";
            screenBtn.disabled = true;
            chatInput.disabled = true;
            sendBtn.disabled = true;
            startBtn.disabled = false;
        } catch (err) {
            console.error("Error stopping stream:", err);
            stopBtn.disabled = false;
        }
    };
});


</script>


{{-- <div class="container">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <h3>Hosting: {{ $stream->title }}</h3>
                        <span class="badge bg-danger live-indicator">LIVE</span>
                    </div>
                    <div class="viewer-count">
                        <i class="fas fa-eye"></i> <span id="viewer-count">0</span> viewers
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="video-container">
                                <div id="local-player" class="local-player"></div>
                                <div class="controls mt-3">
                                    <button id="start-btn" class="btn btn-success">
                                        <i class="fas fa-play"></i> Start Live Stream
                                    </button>
                                    <button id="stop-btn" class="btn btn-danger" disabled>
                                        <i class="fas fa-stop"></i> Stop Stream
                                    </button>
                                    <button id="screen-btn" class="btn btn-primary" disabled>
                                        <i class="fas fa-desktop"></i> Share Screen
                                    </button>
                                    <button id="camera-btn" class="btn btn-secondary">
                                        <i class="fas fa-camera"></i> Switch to Camera
                                    </button>
                                </div>
                                <div id="share-container" class="share-section mt-3" style="display:none">
                                    <h4>Share Your Stream</h4>
                                    <div class="input-group">
                                        <input type="text" id="share-url" class="form-control" readonly>
                                        <button id="copy-btn" class="btn btn-outline-success">
                                            <i class="fas fa-copy"></i> Copy
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="chat-container">
                                <div class="card">
                                    <div class="card-header bg-primary text-white">
                                        Live Chat
                                    </div>
                                    <div class="card-body p-0">
                                        <div id="chat-messages" class="chat-messages"></div>
                                        <div class="chat-input p-2">
                                            <div class="input-group">
                                                <input type="text" id="chat-input" class="form-control" placeholder="Type a message..." disabled>
                                                <button id="send-btn" class="btn btn-primary" disabled>
                                                    <i class="fas fa-paper-plane"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .live-indicator {
        display: none;
    }
    .live-indicator.active {
        display: inline-block;
        animation: pulse 2s infinite;
    }
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; }
    }
    .local-player {
        width: 100%;
        height: 480px;
        background-color: #1a1a1a;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
    }
    .chat-messages {
        height: 400px;
        overflow-y: auto;
        padding: 15px;
        background-color: #f8f9fa;
    }
    .message {
        margin-bottom: 10px;
        padding: 8px 12px;
        border-radius: 6px;
        max-width: 80%;
        word-break: break-word;
    }
    .message.remote {
        background-color: #e9ecef;
        align-self: flex-start;
    }
    .message.local {
        background-color: #007bff;
        color: white;
        align-self: flex-end;
        margin-left: auto;
    }
    .message .sender {
        font-weight: bold;
        font-size: 12px;
        margin-bottom: 4px;
    }
    .message .text {
        font-size: 14px;
    }
    .message .time {
        font-size: 10px;
        text-align: right;
        margin-top: 4px;
        opacity: 0.8;
    }
</style>
<script src="https://download.agora.io/sdk/release/AgoraRTC_N-4.22.2.js"></script>
<script>
var baseUrl = "{{ url('/') }}";
    // Stream data
    const streamId = {{ $stream->id }};
    // const channelName = "{{ $stream->channel_name }}";
    // const appId = "{{ config('services.agora.app_id') }}";
    // const token = "{{ $token }}";
    const appId = "1c03a5f7b65d48ba9cec003ed6bb8ff5"; // Your App ID
    let channelName = "test-channel";
    let token = "007eJxTYAg7mhygvujRXm8Opc9+i68IPjJb9LZd1WbSwum9e3VmvVylwGCYbGCcaJpmnmRmmmJikZRomZyabGBgnJpilpRkkZZmqhrwLb0hkJEh5GIoMyMDBIL4PAwlqcUluskZiXl5qTkMDAC3CiP3"; // Replace this with a valid token!
    const userId = {{ Auth::id() }};
    const username = "{{ Auth::user()->name }}";
    // DOM elements
    const startBtn = document.getElementById("start-btn");
    const stopBtn = document.getElementById("stop-btn");
    const screenBtn = document.getElementById("screen-btn");
    const cameraBtn = document.getElementById("camera-btn");
    const viewerCountElem = document.getElementById("viewer-count");
    const shareContainer = document.getElementById("share-container");
    const shareUrlInput = document.getElementById("share-url");
    const copyBtn = document.getElementById("copy-btn");
    const liveIndicator = document.querySelector(".live-indicator");
    const chatMessages = document.getElementById("chat-messages");
    const chatInput = document.getElementById("chat-input");
    const sendBtn = document.getElementById("send-btn");
    // Create Agora client
    const client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
    // Tracks and state variables
    let localTracks = {
        videoTrack: null,
        audioTrack: null,
        screenTrack: null
    };
    let isScreenSharing = false;
    let currentViewers = 0;
    let lastMessageId = 0;
    // Update live status
    function setLiveStatus(isLive) {
        if (isLive) {
            liveIndicator.classList.add("active");
        } else {
            liveIndicator.classList.remove("active");
        }
    }
    // Add message to chat
    function addMessageToChat(message, sender, isLocal = false) {
        const messageDiv = document.createElement("div");
        messageDiv.className = `message ${isLocal ? 'local' : 'remote'}`;
        const senderDiv = document.createElement("div");
        senderDiv.className = "sender";
        senderDiv.textContent = sender;
        const textDiv = document.createElement("div");
        textDiv.className = "text";
        textDiv.textContent = message;
        const timeDiv = document.createElement("div");
        timeDiv.className = "time";
        timeDiv.textContent = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
        messageDiv.appendChild(senderDiv);
        messageDiv.appendChild(textDiv);
        messageDiv.appendChild(timeDiv);
        chatMessages.appendChild(messageDiv);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }
    // Send chat message to server
    async function sendChatMessage() {
        if (!chatInput.value.trim()) return;
        try {
            const response = await fetch(baseUrl + `/streams/${streamId}/message`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    message: chatInput.value.trim(),
                    username: username
                })
            });
            const data = await response.json();
            if (data.success) {
                addMessageToChat(data.message.message, data.message.username, true);
                chatInput.value = "";
                lastMessageId = data.message.id;
            }
        } catch (err) {
            console.error("Error sending message:", err);
        }
    }
    // Fetch new messages
    async function fetchMessages() {
        try {
            const response = await fetch(baseUrl + `/streams/${streamId}/messages?last_id=${lastMessageId}`);
            const data = await response.json();
            if (data.messages.length > 0) {
                data.messages.forEach(msg => {
                    addMessageToChat(msg.message, msg.username);
                    lastMessageId = msg.id;
                });
            }
        } catch (err) {
            console.error("Error fetching messages:", err);
        }
    }
    // Update viewer count on server
    async function updateViewerCount(count) {
        try {
            await fetch(baseUrl + `/streams/${streamId}/viewers`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ count: count })
            });
        } catch (err) {
            console.error("Error updating viewer count:", err);
        }
    }
    // Generate share URL
    function generateShareUrl() {
        return baseUrl + `/streams/${streamId}`;
    }
    // Copy button handler
    copyBtn.addEventListener("click", () => {
        shareUrlInput.select();
        document.execCommand("copy");
        copyBtn.innerHTML = '<i class="fas fa-check"></i> Copied!';
        setTimeout(() => {
            copyBtn.innerHTML = '<i class="fas fa-copy"></i> Copy';
        }, 2000);
    });
    // Chat event listeners
    sendBtn.addEventListener("click", sendChatMessage);
    chatInput.addEventListener("keypress", (e) => {
        if (e.key === "Enter") sendChatMessage();
    });
    // Client event listeners
    client.on("user-joined", (user) => {
        currentViewers = client.remoteUsers.length + 1; // +1 includes the host
        viewerCountElem.textContent = currentViewers;
        updateViewerCount(currentViewers);
    });
    client.on("user-left", (user) => {
        currentViewers = client.remoteUsers.length + 1; // +1 includes the host
        viewerCountElem.textContent = currentViewers;
        updateViewerCount(currentViewers);
    });
    // Switch to screen sharing
    screenBtn.onclick = async function() {
        try {
            if (isScreenSharing) {
                // Switch back to camera
                await switchToCamera();
                screenBtn.innerHTML = '<i class="fas fa-desktop"></i> Share Screen';
                return;
            }
            // Start screen sharing
            localTracks.screenTrack = await AgoraRTC.createScreenVideoTrack({}, "auto");
            // If we already have a camera track, unpublish it
            if (localTracks.videoTrack) {
                await client.unpublish(localTracks.videoTrack);
                localTracks.videoTrack.close();
            }
            // Play locally and publish
            localTracks.screenTrack.play("local-player");
            await client.publish(localTracks.screenTrack);
            isScreenSharing = true;
            screenBtn.innerHTML = '<i class="fas fa-camera"></i> Switch to Camera';
            // Handle screen share ended
            localTracks.screenTrack.on("track-ended", async () => {
                await switchToCamera();
                screenBtn.innerHTML = '<i class="fas fa-desktop"></i> Share Screen';
            });
        } catch (err) {
            console.error("Screen share error:", err);
        }
    };
    // Switch to camera
    async function switchToCamera() {
        try {
            // Unpublish screen track if exists
            if (localTracks.screenTrack) {
                await client.unpublish(localTracks.screenTrack);
                localTracks.screenTrack.close();
                localTracks.screenTrack = null;
            }
            // Create and publish camera track
            localTracks.videoTrack = await AgoraRTC.createCameraVideoTrack();
            localTracks.videoTrack.play("local-player");
            await client.publish(localTracks.videoTrack);
            isScreenSharing = false;
        } catch (err) {
            console.error("Camera switch error:", err);
        }
    }
    // Camera button handler
    cameraBtn.onclick = async function() {
        if (isScreenSharing) {
            await switchToCamera();
            screenBtn.innerHTML = '<i class="fas fa-desktop"></i> Share Screen';
        }
    };
    // Start streaming
    startBtn.onclick = async function() {
        startBtn.disabled = true;
        try {
            // Join Agora channel
            await client.join(appId, channelName, token, null);
            // Create and publish tracks
            localTracks.audioTrack = await AgoraRTC.createMicrophoneAudioTrack();
            localTracks.videoTrack = await AgoraRTC.createCameraVideoTrack();
            localTracks.videoTrack.play("local-player");
            await client.publish(Object.values(localTracks).filter(track => track !== null));
            // Update stream status on server
            await fetch(baseUrl + `/streams/${streamId}/start`, {
                method: 'POST',
                headers: {
                }
            });
            // Enable buttons and UI elements
            setLiveStatus(true);
            stopBtn.disabled = false;
            screenBtn.disabled = false;
            chatInput.disabled = false;
            sendBtn.disabled = false;
            // Show share URL
            shareUrlInput.value = generateShareUrl();
            shareContainer.style.display = "block";
            // Start polling for messages
            setInterval(fetchMessages, 3000);
        } catch (err) {
            console.error("Stream error:", err);
            startBtn.disabled = false;
        }
    };
    // Stop streaming
    stopBtn.onclick = async function() {
        stopBtn.disabled = true;
        try {
            // Close local tracks
            Object.values(localTracks).forEach(track => {
                if (track) {
                    track.close();
                }
            });
            localTracks = { videoTrack: null, audioTrack: null, screenTrack: null };
            // Leave the channel
            await client.leave();
            // Update stream status on server
            await fetch(baseUrl + `/streams/${streamId}/end`, {
                method: 'POST',
                headers: {
                }
            });
            // Reset UI
            setLiveStatus(false);
            shareContainer.style.display = "none";
            screenBtn.disabled = true;
            chatInput.disabled = true;
            sendBtn.disabled = true;
            startBtn.disabled = false;
        } catch (err) {
            console.error("Error stopping stream:", err);
            stopBtn.disabled = false;
        }
    };
</script> --}}