<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LiveKit Real-Time Translator</title>
    <script src="https://cdn.jsdelivr.net/npm/livekit-client/dist/livekit-client.umd.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            color: white;
        }

        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .setup-panel {
            background: white;
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #555;
        }

        input, select {
            width: 100%;
            padding: 12px;
            border: 2px solid #e1e5e9;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

        input:focus, select:focus {
            outline: none;
            border-color: #667eea;
        }

        .language-setup {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 25px;
            border: 2px solid #e9ecef;
        }

        .language-setup h3 {
            color: #495057;
            margin-bottom: 15px;
            font-size: 18px;
            text-align: center;
        }

        .language-selection {
            display: grid;
            grid-template-columns: 1fr;
            gap: 15px;
            margin-bottom: 20px;
        }

        .connect-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 50px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            width: 100%;
        }

        .connect-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }

        .connect-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .video-container {
            display: none;
            background: white;
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }

        .main-content {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }

        .video-section {
            display: flex;
            flex-direction: column;
        }

        .chat-section {
            display: flex;
            flex-direction: column;
            background: #f8f9fa;
            border-radius: 15px;
            padding: 0;
            overflow: hidden;
        }

        .video-layout {
            position: relative;
            margin-bottom: 20px;
        }

        .remote-video {
            width: 100%;
            height: 60vh;
            background: #000;
            border-radius: 15px;
            overflow: hidden;
            position: relative;
        }

        .local-video {
            position: absolute;
            bottom: 20px;
            right: 20px;
            width: 200px;
            height: 150px;
            background: #000;
            border-radius: 10px;
            overflow: hidden;
            border: 3px solid white;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            z-index: 10;
        }

        video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .video-label {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 12px;
            font-weight: 600;
        }

        .local-video .video-label {
            font-size: 10px;
            padding: 3px 8px;
        }

        .quick-connect {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .user-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin: 15px 0;
        }

        .user-btn {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
            border: none;
            padding: 15px 20px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .user-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        }

        .user-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .quick-note {
            font-size: 13px;
            color: #6c757d;
            text-align: center;
            margin-top: 10px;
            font-style: italic;
        }

        .manual-config {
            opacity: 0.8;
        }

        .manual-config h3 {
            color: #6c757d;
            font-size: 16px;
        }

        .translation-panel {
            display: flex;
            flex-direction: column;
            height: 100%;
            min-height: 500px;
        }

        .chat-header {
            background: #667eea;
            color: white;
            padding: 15px 20px;
            font-weight: 600;
            text-align: center;
        }

        .chat-messages {
            flex: 1;
            padding: 15px;
            overflow-y: auto;
            max-height: 400px;
            background: white;
        }

        .message-bubble {
            margin-bottom: 15px;
            padding: 12px 16px;
            border-radius: 18px;
            max-width: 85%;
            word-wrap: break-word;
            animation: slideIn 0.3s ease-out;
        }

        .message-bubble.my-message {
            background: #007bff;
            color: white;
            margin-left: auto;
            border-bottom-right-radius: 4px;
        }

        .message-bubble.remote-message {
            background: #e9ecef;
            color: #333;
            margin-right: auto;
            border-bottom-left-radius: 4px;
        }

        .message-text {
            font-size: 15px;
            font-weight: 600;
            line-height: 1.4;
            margin-bottom: 4px;
        }

        .original-text {
            font-size: 12px;
            opacity: 0.7;
            font-weight: 400;
            font-style: italic;
        }

        .my-message .original-text {
            color: rgba(255, 255, 255, 0.8);
        }

        .remote-message .original-text {
            color: #6c757d;
        }

        .message-status {
            font-size: 11px;
            opacity: 0.6;
            margin-top: 4px;
        }

        .language-badge {
            display: inline-block;
            background: rgba(0, 0, 0, 0.1);
            padding: 2px 6px;
            border-radius: 10px;
            font-size: 10px;
            margin-bottom: 4px;
        }

        .my-message .language-badge {
            background: rgba(255, 255, 255, 0.2);
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .language-indicator {
            background: #e9ecef;
            border-radius: 8px;
            padding: 10px 15px;
            margin-bottom: 15px;
            text-align: center;
        }

        .my-language {
            background: #d4edda;
            color: #155724;
        }

        .remote-language {
            background: #d1ecf1;
            color: #0c5460;
        }

        .controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }

        /* Maximized view styles */
        .video-container.maximized {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 1000;
            background: #000;
            border-radius: 0;
            padding: 0;
            margin: 0;
        }

        .video-container.maximized .main-content {
            grid-template-columns: 1fr;
            height: 100vh;
            gap: 0;
            margin: 0;
        }

        .video-container.maximized .video-section {
            position: relative;
            height: 100vh;
        }

        .video-container.maximized .video-layout {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            margin: 0;
        }

        .video-container.maximized .remote-video {
            width: 100%;
            height: 100vh;
            border-radius: 0;
        }

        .video-container.maximized .local-video {
            position: absolute;
            bottom: 30px;
            right: 30px;
            width: 250px;
            height: 180px;
            z-index: 1005;
            border: 3px solid rgba(255, 255, 255, 0.8);
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.5);
        }

        .video-container.maximized .chat-section {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 350px;
            height: 500px;
            z-index: 1004;
            background: rgba(248, 249, 250, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        }

        .video-container.maximized .controls {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1006;
            background: rgba(0, 0, 0, 0.7);
            padding: 15px 25px;
            border-radius: 50px;
            backdrop-filter: blur(10px);
            margin: 0;
        }

        .video-container.maximized .status {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 1003;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px 20px;
            border-radius: 25px;
            backdrop-filter: blur(10px);
            margin: 0;
        }

        .video-container.maximized .language-indicator {
            position: absolute;
            top: 80px;
            left: 20px;
            z-index: 1003;
            background: rgba(248, 249, 250, 0.9);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            margin: 5px 0;
            max-width: 300px;
        }

        .video-container.maximized .my-language {
            top: 80px;
        }

        .video-container.maximized .remote-language {
            top: 130px;
        }

        /* Maximize button styles */
        .maximize-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 20;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            opacity: 0.7;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }

        .maximize-btn:hover {
            background: rgba(0, 0, 0, 0.9);
            transform: scale(1.1);
            opacity: 1;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
        }

        .remote-video:hover .maximize-btn {
            opacity: 1;
            animation: pulse-gentle 2s infinite;
        }

        @keyframes pulse-gentle {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
        }

        .video-container.maximized .maximize-btn {
            position: fixed;
            top: 20px;
            left: 380px;
            z-index: 1007;
            background: rgba(220, 53, 69, 0.8);
            opacity: 1;
        }

        .video-container.maximized .maximize-btn:hover {
            background: rgba(220, 53, 69, 1);
            transform: scale(1.1);
        }

        /* Hide scrollbars in maximized mode for cleaner look */
        .video-container.maximized .chat-messages {
            scrollbar-width: thin;
            scrollbar-color: rgba(0,0,0,0.3) transparent;
        }

        .video-container.maximized .chat-messages::-webkit-scrollbar {
            width: 6px;
        }

        .video-container.maximized .chat-messages::-webkit-scrollbar-track {
            background: transparent;
        }

        .video-container.maximized .chat-messages::-webkit-scrollbar-thumb {
            background: rgba(0,0,0,0.3);
            border-radius: 3px;
        }

        .control-btn {
            background: #28a745;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 25px;
            cursor: pointer;
            font-weight: 600;
            transition: background-color 0.3s ease;
        }

        .control-btn:hover {
            background: #218838;
        }

        .control-btn.recording {
            background: #dc3545;
        }

        .control-btn.recording:hover {
            background: #c82333;
        }

        .control-btn.muted {
            background: #dc3545 !important;
            animation: pulse 2s infinite;
        }

        .control-btn.muted:hover {
            background: #c82333 !important;
        }

        .control-btn.video-off {
            background: #6c757d !important;
        }

        .control-btn.video-off:hover {
            background: #5a6268 !important;
        }

        /* Speech recognition status indicator */
        .speech-status {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 10px 15px;
            border-radius: 25px;
            font-size: 14px;
            z-index: 1000;
            display: none;
        }

        .speech-status.active {
            display: block;
            background: #28a745;
        }

        .speech-status.restarting {
            display: block;
            background: #ffc107;
            color: #000;
        }

        .speech-status.error {
            display: block;
            background: #dc3545;
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
            }
        }

        .status {
            text-align: center;
            margin: 20px 0;
            font-weight: 600;
        }

        .status.connected {
            color: #28a745;
        }

        .status.error {
            color: #dc3545;
        }

        .language-help {
            background: #e3f2fd;
            border: 1px solid #bbdefb;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
            color: #1565c0;
            font-size: 14px;
        }

        .azure-setup {
            background: #e8f5e8;
            border: 1px solid #c3e6c3;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
            color: #155724;
        }

        .azure-setup h3 {
            color: #155724;
            margin-bottom: 10px;
        }

        .translation-status {
            font-size: 11px;
            color: #6c757d;
            margin-top: 5px;
            font-style: italic;
        }

        .translation-loading {
            color: #007bff;
        }

        .translation-error {
            color: #dc3545;
        }

        .translation-success {
            color: #28a745;
        }

        .language-required {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
            color: #856404;
            text-align: center;
        }

        @media (max-width: 768px) {
            .user-buttons {
                grid-template-columns: 1fr;
            }
            
            .local-video {
                width: 120px;
                height: 90px;
                bottom: 10px;
                right: 10px;
            }
            
            .remote-video {
                height: 50vh;
            }
            
            .main-content {
                grid-template-columns: 1fr;
            }

            /* Mobile maximized view adjustments */
            .video-container.maximized .chat-section {
                width: 90vw;
                height: 40vh;
                top: 10px;
                right: 5vw;
                left: 5vw;
            }

            .video-container.maximized .local-video {
                width: 120px;
                height: 90px;
                bottom: 80px;
                right: 15px;
            }

            .video-container.maximized .controls {
                bottom: 10px;
                padding: 10px 15px;
                flex-wrap: wrap;
                gap: 10px;
            }

            .video-container.maximized .control-btn {
                padding: 8px 12px;
                font-size: 12px;
            }

            .video-container.maximized .language-indicator {
                max-width: 250px;
                font-size: 12px;
                padding: 8px 12px;
            }

            .video-container.maximized .maximize-btn {
                left: auto;
                right: 20px;
                top: 60px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🌍 LiveKit Real-Time Translator</h1>
            <p>Connect with people worldwide, speak in your language, understand in theirs</p>
        </div>

        <!-- Speech recognition status indicator -->
        <div class="speech-status" id="speechStatus">
            🎤 Listening...
        </div>

        <div class="azure-setup">
            <h3>🔧 Azure Translator Setup Required</h3>
            <p><strong>To use real translation:</strong> You need to set up Azure Translator service and enter your API credentials below. Without these, translations will not work.</p>
            <p><strong>Quick setup:</strong> Go to Azure Portal → Create "Translator" resource → Copy API key and endpoint URL.</p>
        </div>

        <div class="language-help">
            <strong>💡 How it works:</strong> Choose your language below, then connect to a room. When you speak with someone who has a different language selected, you'll see their speech translated into your language in real-time using Azure Translator!
        </div>

        <div class="setup-panel">
            <h2>🚀 Setup Your Translation Session</h2>
            
            <!-- Azure Translator Configuration -->
            <div class="azure-setup">
                <h3>Azure Translator API Configuration</h3>
                <div class="form-group">
                    <label for="azureApiKey">Azure Translator API Key:</label>
                    <input type="password" id="azureApiKey" placeholder="Enter your Azure Translator API key" value="1uEte0mF8QYbgqgeqJeVQwIleDq5MHrQq9lsW1mBCRYz3OdGi4aSJQQJ99BEAC5RqLJXJ3w3AAAbACOGRYCd">
                </div>
                <div class="form-group">
                    <label for="azureEndpoint">Azure Translator Endpoint:</label>
                    <input type="text" id="azureEndpoint" placeholder="https://api.cognitive.microsofttranslator.com" value="https://api.cognitive.microsofttranslator.com">
                </div>
                <div class="form-group">
                    <label for="azureRegion">Azure Region:</label>
                    <input type="text" id="azureRegion" placeholder="e.g., eastus, westus2, etc." value="westeurope">
                </div>
            </div>
            
            <!-- Language Selection (Now Prominent) -->
            <div class="language-setup">
                <h3>🗣️ Select Your Language</h3>
                <div class="language-selection">
                    <div class="form-group">
                        <label for="myLanguage">Choose the language you will speak:</label>
                        <select id="myLanguage" onchange="updateLanguageSelection()">
                            <option value="">-- Select Your Language --</option>
                            <option value="en">🇺🇸 English</option>
                            <option value="es">🇪🇸 Spanish</option>
                            <option value="fr">🇫🇷 French</option>
                            <option value="de">🇩🇪 German</option>
                            <option value="it">🇮🇹 Italian</option>
                            <option value="pt">🇧🇷 Portuguese</option>
                            <option value="ru">🇷🇺 Russian</option>
                            <option value="ja">🇯🇵 Japanese</option>
                            <option value="ko">🇰🇷 Korean</option>
                            <option value="zh">🇨🇳 Chinese (Mandarin)</option>
                            <option value="ar">🇸🇦 Arabic</option>
                            <option value="hi">🇮🇳 Hindi</option>
                            <option value="tr">🇹🇷 Turkish</option>
                            <option value="nl">🇳🇱 Dutch</option>
                            <option value="sv">🇸🇪 Swedish</option>
                        </select>
                    </div>
                </div>
                
                <div class="language-required" id="languageRequired">
                    ⚠️ Please select your language before connecting
                </div>
            </div>
            
            <!-- Quick Connect Buttons -->
            <div class="quick-connect">
                <h3>Quick Connect (Real LiveKit Server)</h3>
                <div class="user-buttons">
                    <button class="user-btn" id="user1Btn" onclick="connectAsUser(1)" disabled>
                        👤 Connect as User 1
                    </button>
                    <button class="user-btn" id="user2Btn" onclick="connectAsUser(2)" disabled>
                        👤 Connect as User 2
                    </button>
                </div>
                <p class="quick-note">Use two browser windows/tabs with different languages to test real translation!</p>
            </div>

            <hr style="margin: 30px 0; border: 1px solid #e1e5e9;">

            <!-- Manual Configuration -->
            <div class="manual-config">
                <h3>Manual Configuration</h3>
                
                <div class="form-group">
                    <label for="serverUrl">LiveKit Server URL:</label>
                    <input type="text" id="serverUrl" placeholder="wss://your-livekit-server.com" value="https://privateroom-nmts5ps0.livekit.cloud">
                </div>

                <div class="form-group">
                    <label for="accessToken">Access Token:</label>
                    <input type="text" id="accessToken" placeholder="Your LiveKit access token" value="">
                </div>

                <button class="connect-btn" id="manualConnectBtn" onclick="connectToRoom()" disabled>
                    🎥 Connect & Start Translating
                </button>
            </div>
        </div>

        <div class="video-container" id="videoContainer">
            <div class="status" id="connectionStatus">Connecting...</div>
            
            <div class="language-indicator my-language" id="myLanguageIndicator">
                🗣️ My Language: Not Selected
            </div>
            
            <div class="language-indicator remote-language" id="remoteLanguageIndicator" style="display: none;">
                👥 Remote Participant Language: Unknown
            </div>
            
            <div class="main-content">
                <div class="video-section">
                    <div class="video-layout">
                        <div class="remote-video">
                            <video id="remoteVideo" autoplay></video>
                            <div class="video-label">Remote Participant</div>
                            <button class="maximize-btn" id="maximizeBtn" onclick="toggleMaximize()" title="Maximize video">
                                ⛶
                            </button>
                        </div>
                        <div class="local-video">
                            <video id="localVideo" autoplay muted></video>
                            <div class="video-label">You</div>
                        </div>
                    </div>

                    <div class="controls">
                        <button class="control-btn" id="listenBtn" onclick="toggleListening()">
                            🎤 Start Listening
                        </button>
                        <button class="control-btn" id="muteBtn" onclick="toggleMute()">
                            🔊 Mute
                        </button>
                        <button class="control-btn" id="videoBtn" onclick="toggleVideo()">
                            📹 Turn Off Video
                        </button>
                        <button class="control-btn" id="audioTestBtn" onclick="testAudio()" style="display: none;">
                            🔊 Enable Audio
                        </button>
                        <button class="control-btn" id="testMessageBtn" onclick="sendTestMessage()">
                            💬 Test Message
                        </button>
                        <button class="control-btn" id="debugBtn" onclick="showDebugInfo()">
                            🔍 Debug Info
                        </button>
                    </div>
                </div>

                <div class="chat-section">
                    <div class="chat-header">
                        🔄 Live Translation
                    </div>
                    <div class="chat-messages" id="translationFeed">
                        <div class="message-bubble remote-message">
                            <div class="message-text">Welcome to LiveKit Real-Time Translator!</div>
                            <div class="original-text">Start speaking to see translations appear here...</div>
                        </div>
                    </div>
                    <div style="padding: 15px; border-top: 1px solid #e9ecef;">
                        <div style="display: flex; gap: 10px; margin-bottom: 10px;">
                            <input type="text" id="manualMessage" placeholder="Type a message and press Enter or click Send" style="flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 5px;">
                            <button onclick="sendManualMessage()" style="padding: 8px 15px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer;">Send</button>
                        </div>
                        <div style="font-size: 12px; color: #6c757d; text-align: center;">
                            Type to test messaging • Use speech recognition for voice translation
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let room;
        let localVideo;
        let remoteVideo;
        let isListening = false;
        let recognition;
        let isConnected = false;
        let isMuted = false;
        let isVideoOn = true;
        let myLanguage = '';
        let remoteParticipantLanguage = null;
        let azureApiKey = '';
        let azureEndpoint = 'https://api.cognitive.microsofttranslator.com';
        let azureRegion = '';

        // Speech recognition improvement variables
        let recognitionRestarting = false;
        let maxRestartAttempts = 10;
        let restartAttemptCount = 0;
        let lastTranscriptTime = Date.now();
        let speechTimeoutId = null;

        let isVideoMaximized = false;

        // Language mapping for display
        const languageNames = {
            'en': '🇺🇸 English',
            'es': '🇪🇸 Spanish', 
            'fr': '🇫🇷 French',
            'de': '🇩🇪 German',
            'it': '🇮🇹 Italian',
            'pt': '🇧🇷 Portuguese',
            'ru': '🇷🇺 Russian',
            'ja': '🇯🇵 Japanese',
            'ko': '🇰🇷 Korean',
            'zh': '🇨🇳 Chinese (Mandarin)',
            'ar': '🇸🇦 Arabic',
            'hi': '🇮🇳 Hindi',
            'tr': '🇹🇷 Turkish',
            'nl': '🇳🇱 Dutch',
            'sv': '🇸🇪 Swedish'
        };

        // Speech recognition language codes (different from translation codes)
        const speechLanguageCodes = {
            'en': 'en-US',
            'es': 'es-ES',
            'fr': 'fr-FR',
            'de': 'de-DE',
            'it': 'it-IT',
            'pt': 'pt-BR',
            'ru': 'ru-RU',
            'ja': 'ja-JP',
            'ko': 'ko-KR',
            'zh': 'zh-CN',
            'ar': 'ar-SA',
            'hi': 'hi-IN',
            'tr': 'tr-TR',
            'nl': 'nl-NL',
            'sv': 'sv-SE'
        };

        // User credentials for quick testing
        const userCredentials = {
            1: {
                serverUrl: 'https://privateroom-nmts5ps0.livekit.cloud',
                token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NDg4NjA0MDAsImlzcyI6IkFQSWc4d3hzVENKYkFvSCIsIm5hbWUiOiJ1c2VyMTIzIiwibmJmIjoxNzQ4Nzc0MDAwLCJzdWIiOiJ1c2VyMTIzIiwidmlkZW8iOnsicm9vbSI6Im15LXJvb20yIiwicm9vbUpvaW4iOnRydWV9fQ.tSS_Ijs0MishVx6YBUVUExraw2RVCzTLcxH4M-93q_k',
                name: 'user123'
            },
            2: {
                serverUrl: 'https://privateroom-nmts5ps0.livekit.cloud',
                token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NDg4NjA0MjIsImlzcyI6IkFQSWc4d3hzVENKYkFvSCIsIm5hbWUiOiJ1c2VyNDU2IiwibmJmIjoxNzQ4Nzc0MDIyLCJzdWIiOiJ1c2VyNDU2IiwidmlkZW8iOnsicm9vbSI6Im15LXJvb20yIiwicm9vbUpvaW4iOnRydWV9fQ.za2hH6TPOQwz-EJJPD8C4dEr6UWlKDzlWj-OwVS8KTg',
                name: 'user456'
            }
        };

        // Speech status management
        function updateSpeechStatus(status, type = 'active') {
            const statusEl = document.getElementById('speechStatus');
            statusEl.textContent = status;
            statusEl.className = `speech-status ${type}`;
            
            // Auto-hide non-active status after 3 seconds
            if (type !== 'active') {
                setTimeout(() => {
                    if (statusEl.className.includes(type)) {
                        statusEl.style.display = 'none';
                    }
                }, 3000);
            }
        }

        // Azure Translator API function
        async function translateText(text, fromLang, toLang) {
            // Get Azure credentials
            azureApiKey = document.getElementById('azureApiKey').value.trim();
            azureEndpoint = document.getElementById('azureEndpoint').value.trim();
            azureRegion = document.getElementById('azureRegion').value.trim();

            // Check if Azure credentials are provided
            if (!azureApiKey || !azureEndpoint) {
                throw new Error('Azure credentials not provided');
            }

            try {
                const url = `${azureEndpoint}/translate?api-version=3.0&from=${fromLang}&to=${toLang}`;
                
                const headers = {
                    'Ocp-Apim-Subscription-Key': azureApiKey,
                    'Content-Type': 'application/json',
                };

                // Add region header if provided
                if (azureRegion) {
                    headers['Ocp-Apim-Subscription-Region'] = azureRegion;
                }

                const response = await fetch(url, {
                    method: 'POST',
                    headers: headers,
                    body: JSON.stringify([{ text: text }])
                });

                if (!response.ok) {
                    throw new Error(`Azure API error: ${response.status} ${response.statusText}`);
                }

                const data = await response.json();
                
                if (data && data[0] && data[0].translations && data[0].translations[0]) {
                    console.log('Azure translation successful:', text, '->', data[0].translations[0].text);
                    return data[0].translations[0].text;
                } else {
                    throw new Error('Invalid response format from Azure API');
                }

            } catch (error) {
                console.error('Azure translation failed:', error);
                throw error;
            }
        }

        function updateLanguageSelection() {
            myLanguage = document.getElementById('myLanguage').value;
            const languageRequired = document.getElementById('languageRequired');
            const user1Btn = document.getElementById('user1Btn');
            const user2Btn = document.getElementById('user2Btn');
            const manualConnectBtn = document.getElementById('manualConnectBtn');
            
            if (myLanguage) {
                languageRequired.style.display = 'none';
                user1Btn.disabled = false;
                user2Btn.disabled = false;
                manualConnectBtn.disabled = false;
                
                // Update button text to show selected language
                const langName = languageNames[myLanguage];
                user1Btn.textContent = `👤 Connect as User 1 (${langName})`;
                user2Btn.textContent = `👤 Connect as User 2 (${langName})`;
                
                // Reinitialize speech recognition with new language if already connected
                if (isConnected) {
                    console.log('Language changed while connected, updating speech recognition...');
                    stopSpeechRecognition();
                    setupSpeechRecognition();
                    updateMyLanguageIndicator();
                    shareLanguagePreference();
                }
            } else {
                languageRequired.style.display = 'block';
                user1Btn.disabled = true;
                user2Btn.disabled = true;
                manualConnectBtn.disabled = true;
                
                user1Btn.textContent = '👤 Connect as User 1';
                user2Btn.textContent = '👤 Connect as User 2';
            }
        }

        function connectAsUser(userNumber) {
            if (!myLanguage) {
                alert('Please select your language first!');
                return;
            }

            const credentials = userCredentials[userNumber];
            if (!credentials) {
                alert('Invalid user number');
                return;
            }

            // Set the form values
            document.getElementById('serverUrl').value = credentials.serverUrl;
            document.getElementById('accessToken').value = credentials.token;

            // Update UI to show which user is connecting
            const connectBtn = document.querySelector('.connect-btn');
            connectBtn.textContent = `Connecting as ${credentials.name} (${languageNames[myLanguage]})...`;
            connectBtn.disabled = true;

            // Connect
            connectToRoom();
        }

        function showDebugInfo() {
            const debugInfo = {
                'Is Connected': isConnected,
                'Room Exists': !!room,
                'Local Participant': !!room?.localParticipant,
                'Room State': room?.state || 'No room',
                'My Language': myLanguage,
                'Remote Language': remoteParticipantLanguage,
                'Speech Recognition': !!recognition,
                'Is Listening': isListening,
                'Recognition Restarting': recognitionRestarting,
                'Restart Attempts': restartAttemptCount,
                'Azure API Key Set': !!document.getElementById('azureApiKey').value,
                'Participants Count': room?.participants?.size || 0
            };
            
            console.log('=== DEBUG INFO ===');
            Object.entries(debugInfo).forEach(([key, value]) => {
                console.log(`${key}: ${value}`);
            });
            console.log('==================');
            
            const debugText = Object.entries(debugInfo)
                .map(([key, value]) => `${key}: ${value}`)
                .join('\n');
                
            alert('Debug Info (also in console):\n\n' + debugText);
        }
        
        function sendManualMessage() {
            const messageInput = document.getElementById('manualMessage');
            const message = messageInput.value.trim();
            
            if (!message) {
                alert('Please type a message first');
                return;
            }
            
            console.log('Sending manual message:', message);
            messageInput.value = '';
            
            // Send the message
            handleMyTranscript(message);
        }
        
        function sendTestMessage() {
            const testMessages = [
                'Hello, can you hear me?',
                'This is a test message',
                'Testing the translation system',
                'How are you today?',
                'Nice to meet you!'
            ];
            
            const randomMessage = testMessages[Math.floor(Math.random() * testMessages.length)];
            console.log('Sending test message:', randomMessage);
            
            // Send the test message as if it was spoken
            handleMyTranscript(randomMessage);
        }
        
        // Add Enter key support for manual messages
        document.addEventListener('DOMContentLoaded', function() {
            // Wait for DOM to be ready, then add event listener
            setTimeout(() => {
                const messageInput = document.getElementById('manualMessage');
                if (messageInput) {
                    messageInput.addEventListener('keypress', function(e) {
                        if (e.key === 'Enter') {
                            sendManualMessage();
                        }
                    });
                }
            }, 1000);
        });

        function checkAudioPermissions() {
            // Test if audio context is allowed
            if (typeof AudioContext !== 'undefined' || typeof webkitAudioContext !== 'undefined') {
                const AudioCtx = AudioContext || webkitAudioContext;
                const audioContext = new AudioCtx();
                
                if (audioContext.state === 'suspended') {
                    console.warn('Audio context is suspended - user interaction required');
                    showAudioPermissionNotice();
                } else {
                    console.log('Audio context is ready');
                }
            }
            
            // Check if we can access microphone
            navigator.mediaDevices.getUserMedia({ audio: true, video: false })
                .then(stream => {
                    console.log('Microphone access confirmed');
                    stream.getTracks().forEach(track => track.stop()); // Clean up
                })
                .catch(error => {
                    console.warn('Microphone access denied:', error);
                });
        }

        function testAudio() {
            const audioElement = document.getElementById('remoteAudio');
            const audioTestBtn = document.getElementById('audioTestBtn');
            
            if (audioElement) {
                audioElement.play().then(() => {
                    console.log('Audio test successful');
                    updateConnectionStatus('✅ Connected! Audio enabled.', 'connected');
                    audioTestBtn.style.display = 'none';
                }).catch(error => {
                    console.error('Audio test failed:', error);
                    updateConnectionStatus('❌ Audio test failed. Check browser settings.', 'error');
                });
            }
            
            // Also test speech synthesis
            if ('speechSynthesis' in window) {
                const utterance = new SpeechSynthesisUtterance('Audio test');
                utterance.volume = 0.5;
                speechSynthesis.speak(utterance);
            }
        }

        function showAudioPermissionNotice() {
            // Show audio permission notice if autoplay is blocked
            const statusEl = document.getElementById('connectionStatus');
            const audioTestBtn = document.getElementById('audioTestBtn');
            
            statusEl.innerHTML = '🔊 Audio blocked by browser. Click "Enable Audio" button below.';
            statusEl.className = 'status error';
            audioTestBtn.style.display = 'inline-block';
        }

        async function connectToRoom() {
            if (!myLanguage) {
                alert('Please select your language first!');
                return;
            }

            const serverUrl = document.getElementById('serverUrl').value;
            const accessToken = document.getElementById('accessToken').value;
            const connectBtn = document.querySelector('.connect-btn');
            
            if (!serverUrl || !accessToken) {
                alert('Please provide server URL and access token!');
                return;
            }
            
            connectBtn.disabled = true;
            connectBtn.textContent = 'Connecting...';

            try {
                // Check if LiveKit is loaded
                if (typeof LivekitClient === 'undefined') {
                    throw new Error('LiveKit client library not loaded');
                }

                // Real LiveKit connection
                room = new LivekitClient.Room();
                
                room.on(LivekitClient.RoomEvent.ParticipantConnected, handleParticipantConnected);
                room.on(LivekitClient.RoomEvent.TrackSubscribed, handleTrackSubscribed);
                room.on(LivekitClient.RoomEvent.TrackUnsubscribed, handleTrackUnsubscribed);
                room.on(LivekitClient.RoomEvent.DataReceived, handleDataReceived);
                room.on(LivekitClient.RoomEvent.AudioPlaybackStatusChanged, handleAudioPlaybackChanged);
                room.on(LivekitClient.RoomEvent.Disconnected, handleRoomDisconnected);
                room.on(LivekitClient.RoomEvent.Connected, handleRoomConnected);
                
                console.log('Room event handlers set up');
                
                await room.connect(serverUrl, accessToken);
                
                console.log('✅ Room connected successfully');
                console.log('Room state:', room.state);
                console.log('Local participant:', room.localParticipant?.identity);
                
                // Enable camera and microphone using LiveKit v2 API
                console.log('Enabling camera and microphone...');
                
                try {
                    const cameraPublication = await room.localParticipant.setCameraEnabled(true);
                    console.log('Camera enabled:', cameraPublication);
                    
                    const microphonePublication = await room.localParticipant.setMicrophoneEnabled(true);
                    console.log('Microphone enabled:', microphonePublication);
                    
                    // Display local video
                    if (cameraPublication && cameraPublication.videoTrack) {
                        localVideo = document.getElementById('localVideo');
                        cameraPublication.videoTrack.attach(localVideo);
                        console.log('Local video attached');
                    }
                    
                    // Ensure we have local audio track
                    if (microphonePublication && microphonePublication.audioTrack) {
                        console.log('Local audio track enabled');
                    }
                    
                } catch (error) {
                    console.error('Failed to enable media devices:', error);
                    updateConnectionStatus('⚠️ Media access failed. Check permissions.', 'error');
                    
                    // Try to get user media directly as fallback
                    try {
                        const stream = await navigator.mediaDevices.getUserMedia({ 
                            video: true, 
                            audio: true 
                        });
                        localVideo = document.getElementById('localVideo');
                        localVideo.srcObject = stream;
                        console.log('Fallback: Got media stream directly');
                    } catch (mediaError) {
                        console.error('Fallback media access also failed:', mediaError);
                        alert('Please allow camera and microphone access to use the translator.');
                    }
                }

                // Send my language preference to other participants
                shareLanguagePreference();
                
                isConnected = true;
                showVideoInterface();
                updateConnectionStatus('✅ Connected! Ready to translate. Waiting for participants...', 'connected');
                
                // Check if we have audio permissions
                checkAudioPermissions();
                
            } catch (error) {
                console.error('Connection failed:', error);
                updateConnectionStatus(`❌ Connection failed: ${error.message}`, 'error');
            }
            
            connectBtn.disabled = false;
            connectBtn.textContent = '🎥 Connect & Start Translating';
        }

        function shareLanguagePreference() {
            if (room && room.localParticipant && myLanguage) {
                const data = JSON.stringify({
                    type: 'language_preference',
                    language: myLanguage
                });
                
                // Send language preference to all participants
                room.localParticipant.publishData(new TextEncoder().encode(data), {
                    reliable: true
                });
            }
        }

        function handleDataReceived(payload, participant) {
            console.log('=== DATA RECEIVED ===');
            console.log('From participant:', participant.identity);
            console.log('Payload size:', payload.byteLength);
            
            try {
                const decodedData = new TextDecoder().decode(payload);
                console.log('Decoded data:', decodedData);
                
                const data = JSON.parse(decodedData);
                console.log('Parsed data:', data);
                
                if (data.type === 'language_preference') {
                    console.log('Received language preference:', data.language);
                    remoteParticipantLanguage = data.language;
                    updateRemoteLanguageIndicator();
                }
                
                if (data.type === 'speech_transcript') {
                    console.log('Received speech transcript:', data.original, 'in language:', data.language);
                    // Display speech from remote participant
                    displayRemoteTranscript(data.original, data.language);
                }
            } catch (error) {
                console.error('❌ Error processing received data:', error);
                console.error('Raw payload:', payload);
            }
            
            console.log('=== DATA HANDLING COMPLETE ===');
        }

        function showVideoInterface() {
            document.querySelector('.setup-panel').style.display = 'none';
            document.getElementById('videoContainer').style.display = 'block';
            updateMyLanguageIndicator();
            
            // Initialize speech recognition
            console.log('Setting up speech recognition for interface...');
            setupSpeechRecognition();
            
            // Check if speech recognition was set up successfully
            setTimeout(() => {
                const listenBtn = document.getElementById('listenBtn');
                if (!recognition) {
                    listenBtn.textContent = '❌ Speech Recognition Failed';
                    listenBtn.disabled = true;
                    console.error('Speech recognition setup failed');
                } else {
                    console.log('Speech recognition ready');
                }
            }, 1000);
        }

        function updateMyLanguageIndicator() {
            const indicator = document.getElementById('myLanguageIndicator');
            indicator.textContent = `🗣️ My Language: ${languageNames[myLanguage] || myLanguage}`;
        }

        function updateRemoteLanguageIndicator() {
            const indicator = document.getElementById('remoteLanguageIndicator');
            if (remoteParticipantLanguage) {
                indicator.textContent = `👥 Remote Participant Language: ${languageNames[remoteParticipantLanguage] || remoteParticipantLanguage}`;
                indicator.style.display = 'block';
            }
        }

        // IMPROVED SPEECH RECOGNITION SYSTEM
        function setupSpeechRecognition() {
            if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
                console.warn('Speech recognition not supported');
                const listenBtn = document.getElementById('listenBtn');
                listenBtn.textContent = '❌ Speech Recognition Not Supported';
                listenBtn.disabled = true;
                return;
            }

            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
            recognition = new SpeechRecognition();
            
            // Enhanced configuration
            recognition.continuous = true;
            recognition.interimResults = true;
            recognition.maxAlternatives = 1;
            recognition.lang = speechLanguageCodes[myLanguage] || 'en-US';
            
            console.log('Speech recognition configured for language:', recognition.lang);
            
            recognition.onstart = function() {
                console.log('🎤 Speech recognition started');
                recognitionRestarting = false;
                restartAttemptCount = 0;
                updateSpeechStatus('🎤 Listening...', 'active');
                lastTranscriptTime = Date.now();
                
                // Clear any existing timeout
                if (speechTimeoutId) {
                    clearTimeout(speechTimeoutId);
                }
                
                // Set a watchdog timer to restart if no activity
                speechTimeoutId = setTimeout(() => {
                    if (isListening && recognition) {
                        console.log('⚠️ Speech recognition inactive for too long, restarting...');
                        restartSpeechRecognition();
                    }
                }, 30000); // 30 seconds of inactivity
            };
            
            recognition.onresult = function(event) {
                console.log('🗣️ Speech recognition result received, events:', event.results.length);
                lastTranscriptTime = Date.now();
                
                // Reset timeout since we got activity
                if (speechTimeoutId) {
                    clearTimeout(speechTimeoutId);
                    speechTimeoutId = setTimeout(() => {
                        if (isListening && recognition) {
                            console.log('⚠️ Speech recognition inactive for too long, restarting...');
                            restartSpeechRecognition();
                        }
                    }, 30000);
                }
                
                // Process all final results
                for (let i = event.resultIndex; i < event.results.length; i++) {
                    const result = event.results[i];
                    if (result.isFinal) {
                        const transcript = result[0].transcript.trim();
                        console.log('✅ Final transcript:', transcript);
                        if (transcript && transcript.length > 1) { // Avoid single character noise
                            handleMyTranscript(transcript);
                        }
                    } else {
                        // Show interim results
                        const interim = result[0].transcript.trim();
                        if (interim) {
                            updateSpeechStatus(`🎤 Listening: "${interim}"`, 'active');
                        }
                    }
                }
            };
            
            recognition.onerror = function(event) {
                console.error('❌ Speech recognition error:', event.error);
                
                if (speechTimeoutId) {
                    clearTimeout(speechTimeoutId);
                }
                
                const listenBtn = document.getElementById('listenBtn');
                
                switch (event.error) {
                    case 'not-allowed':
                    case 'service-not-allowed':
                        listenBtn.textContent = '❌ Microphone Access Denied';
                        updateConnectionStatus('❌ Microphone access denied. Please allow microphone permissions.', 'error');
                        updateSpeechStatus('❌ Microphone access denied', 'error');
                        isListening = false;
                        listenBtn.classList.remove('recording');
                        break;
                        
                    case 'network':
                        console.log('🔄 Network error, attempting restart...');
                        updateSpeechStatus('🔄 Network error, restarting...', 'restarting');
                        if (isListening) {
                            setTimeout(() => restartSpeechRecognition(), 1000);
                        }
                        break;
                        
                    case 'no-speech':
                        console.log('⚠️ No speech detected, continuing to listen...');
                        // Don't treat this as an error, just continue
                        if (isListening) {
                            setTimeout(() => restartSpeechRecognition(), 500);
                        }
                        break;
                        
                    case 'audio-capture':
                        console.log('🔄 Audio capture error, attempting restart...');
                        updateSpeechStatus('🔄 Audio error, restarting...', 'restarting');
                        if (isListening) {
                            setTimeout(() => restartSpeechRecognition(), 1000);
                        }
                        break;
                        
                    default:
                        console.log(`🔄 Unknown error (${event.error}), attempting restart...`);
                        updateSpeechStatus(`🔄 Error: ${event.error}, restarting...`, 'restarting');
                        if (isListening) {
                            setTimeout(() => restartSpeechRecognition(), 1000);
                        }
                        break;
                }
            };
            
            recognition.onend = function() {
                console.log('🛑 Speech recognition ended');
                
                if (speechTimeoutId) {
                    clearTimeout(speechTimeoutId);
                }
                
                if (isListening && !recognitionRestarting) {
                    console.log('🔄 Recognition ended unexpectedly, restarting...');
                    restartSpeechRecognition();
                } else if (!isListening) {
                    updateSpeechStatus('🔇 Stopped listening', 'error');
                }
            };
            
            console.log('✅ Speech recognition configured successfully');
        }

        function restartSpeechRecognition() {
            if (!isListening || recognitionRestarting) {
                return;
            }
            
            recognitionRestarting = true;
            restartAttemptCount++;
            
            console.log(`🔄 Restarting speech recognition (attempt ${restartAttemptCount}/${maxRestartAttempts})`);
            updateSpeechStatus(`🔄 Restarting... (${restartAttemptCount}/${maxRestartAttempts})`, 'restarting');
            
            if (restartAttemptCount > maxRestartAttempts) {
                console.error('❌ Max restart attempts reached, stopping...');
                isListening = false;
                recognitionRestarting = false;
                updateSpeechStatus('❌ Too many restart attempts', 'error');
                
                const listenBtn = document.getElementById('listenBtn');
                listenBtn.textContent = '🎤 Start Listening';
                listenBtn.classList.remove('recording');
                return;
            }
            
            try {
                if (recognition) {
                    recognition.stop();
                }
            } catch (error) {
                console.warn('Error stopping recognition:', error);
            }
            
            // Wait a bit before restarting
            setTimeout(() => {
                if (isListening && recognitionRestarting) {
                    try {
                        if (recognition) {
                            recognition.start();
                        }
                    } catch (error) {
                        console.error('Failed to restart recognition:', error);
                        // Try to create a new recognition instance
                        setTimeout(() => {
                            if (isListening) {
                                setupSpeechRecognition();
                                if (recognition) {
                                    try {
                                        recognition.start();
                                    } catch (e) {
                                        console.error('Failed to start new recognition:', e);
                                    }
                                }
                            }
                        }, 2000);
                    }
                }
            }, 1000 + (restartAttemptCount * 500)); // Increasing delay
        }

        function stopSpeechRecognition() {
            console.log('🛑 Stopping speech recognition');
            isListening = false;
            recognitionRestarting = false;
            restartAttemptCount = 0;
            
            if (speechTimeoutId) {
                clearTimeout(speechTimeoutId);
                speechTimeoutId = null;
            }
            
            if (recognition) {
                try {
                    recognition.stop();
                } catch (error) {
                    console.warn('Error stopping recognition:', error);
                }
            }
        }

        function handleMyTranscript(originalText) {
            console.log('=== HANDLING MY TRANSCRIPT ===');
            console.log('Original text:', originalText);
            console.log('My language:', myLanguage);
            console.log('Room exists:', !!room);
            console.log('Local participant exists:', !!room?.localParticipant);
            console.log('Is connected:', isConnected);
            
            // Always display my speech first (so user can see their own message)
            displayMyTranscript(originalText);
            
            // Share my transcript with other participants
            if (room && room.localParticipant) {
                const data = JSON.stringify({
                    type: 'speech_transcript',
                    original: originalText,
                    language: myLanguage,
                    timestamp: Date.now()
                });
                
                console.log('Sending data:', data);
                
                try {
                    const encodedData = new TextEncoder().encode(data);
                    room.localParticipant.publishData(encodedData, {
                        reliable: true
                    });
                    console.log('✅ Data sent successfully to participants');
                } catch (error) {
                    console.error('❌ Failed to send data to participants:', error);
                    // Update the message status to show it failed
                    updateLastMessageStatus('❌ Send failed');
                }
            } else {
                console.warn('⚠️ Room or local participant not available - message only shown locally');
                if (!room) {
                    console.warn('Room is null/undefined');
                } else if (!room.localParticipant) {
                    console.warn('Local participant is null/undefined');
                }
                updateLastMessageStatus('⚠️ Not connected to room');
            }
            
            console.log('=== TRANSCRIPT HANDLING COMPLETE ===');
        }
        
        function updateLastMessageStatus(status) {
            const translationFeed = document.getElementById('translationFeed');
            const lastMessage = translationFeed.lastElementChild;
            if (lastMessage && lastMessage.classList.contains('my-message')) {
                const statusEl = lastMessage.querySelector('.message-status');
                if (statusEl) {
                    statusEl.textContent = status;
                }
            }
        }

        function displayMyTranscript(originalText) {
            console.log('Displaying my transcript:', originalText);
            
            const translationFeed = document.getElementById('translationFeed');
            if (!translationFeed) {
                console.error('Translation feed element not found');
                return;
            }
            
            const messageEl = document.createElement('div');
            messageEl.className = 'message-bubble my-message';
            messageEl.innerHTML = `
                <div class="language-badge">${languageNames[myLanguage] || myLanguage}</div>
                <div class="message-text">${originalText}</div>
                <div class="message-status">Sent • ${new Date().toLocaleTimeString()}</div>
            `;
            
            translationFeed.appendChild(messageEl);
            translationFeed.scrollTop = translationFeed.scrollHeight;
            
            console.log('Message displayed successfully');
        }

        async function displayRemoteTranscript(originalText, fromLanguage) {
            const translationFeed = document.getElementById('translationFeed');
            
            // Create message element
            const messageEl = document.createElement('div');
            messageEl.className = 'message-bubble remote-message';
            
            // Create initial content
            const languageName = languageNames[fromLanguage] || fromLanguage;
            messageEl.innerHTML = `
                <div class="language-badge">${languageName}</div>
                <div class="message-text">${originalText}</div>
                <div class="original-text">Original: ${originalText}</div>
                <div class="translation-status translation-loading">🔄 Translating...</div>
            `;
            
            translationFeed.appendChild(messageEl);
            translationFeed.scrollTop = translationFeed.scrollHeight;
            
            // Translate if languages are different
            if (fromLanguage !== myLanguage) {
                try {
                    const translatedText = await translateText(originalText, fromLanguage, myLanguage);
                    
                    // Update the message with translation
                    messageEl.innerHTML = `
                        <div class="language-badge">${languageName}</div>
                        <div class="message-text">${translatedText}</div>
                        <div class="original-text">Original: ${originalText}</div>
                        <div class="translation-status translation-success">✅ Translated with Azure</div>
                    `;
                    
                    // Speak the translation
                    speakText(translatedText, myLanguage);
                    
                } catch (error) {
                    console.error('Translation error:', error);
                    messageEl.innerHTML = `
                        <div class="language-badge">${languageName}</div>
                        <div class="message-text">${originalText}</div>
                        <div class="original-text">Translation failed - check Azure settings</div>
                        <div class="translation-status translation-error">❌ Translation error</div>
                    `;
                }
            } else {
                // Same language, no translation needed
                messageEl.innerHTML = `
                    <div class="language-badge">${languageName}</div>
                    <div class="message-text">${originalText}</div>
                    <div class="translation-status">Same language - no translation needed</div>
                `;
            }
        }

        function toggleListening() {
            const listenBtn = document.getElementById('listenBtn');
            
            console.log('Toggle listening called. Current state:', isListening);
            console.log('Recognition object exists:', !!recognition);
            
            if (!recognition) {
                console.error('Speech recognition not initialized');
                alert('Speech recognition is not available. Please check your browser settings.');
                return;
            }
            
            if (!isListening) {
                try {
                    console.log('🎤 Starting speech recognition...');
                    restartAttemptCount = 0; // Reset attempt counter
                    recognitionRestarting = false;
                    recognition.start();
                    isListening = true;
                    listenBtn.textContent = '⏹️ Stop Listening';
                    listenBtn.classList.add('recording');
                    console.log('✅ Speech recognition started successfully');
                } catch (error) {
                    console.error('❌ Failed to start speech recognition:', error);
                    alert('Failed to start speech recognition: ' + error.message);
                }
            } else {
                try {
                    console.log('⏹️ Stopping speech recognition...');
                    stopSpeechRecognition();
                    listenBtn.textContent = '🎤 Start Listening';
                    listenBtn.classList.remove('recording');
                    updateSpeechStatus('🔇 Stopped listening', 'error');
                    console.log('✅ Speech recognition stopped successfully');
                } catch (error) {
                    console.error('❌ Failed to stop speech recognition:', error);
                }
            }
        }

        function toggleMaximize() {
            const videoContainer = document.getElementById('videoContainer');
            const maximizeBtn = document.getElementById('maximizeBtn');
            
            isVideoMaximized = !isVideoMaximized;
            
            if (isVideoMaximized) {
                // Enter maximized mode
                videoContainer.classList.add('maximized');
                maximizeBtn.innerHTML = '⊞'; // Restore icon
                maximizeBtn.title = 'Exit fullscreen';
                console.log('Video maximized');
                
                // Disable body scroll
                document.body.style.overflow = 'hidden';
                
                // Add escape key handler
                document.addEventListener('keydown', handleEscapeKey);
                
            } else {
                // Exit maximized mode
                videoContainer.classList.remove('maximized');
                maximizeBtn.innerHTML = '⛶'; // Maximize icon
                maximizeBtn.title = 'Maximize video';
                console.log('Video restored to normal view');
                
                // Re-enable body scroll
                document.body.style.overflow = 'auto';
                
                // Remove escape key handler
                document.removeEventListener('keydown', handleEscapeKey);
            }
        }

        function handleEscapeKey(event) {
            if (event.key === 'Escape' && isVideoMaximized) {
                toggleMaximize();
            }
        }

        function speakText(text, lang) {
            if ('speechSynthesis' in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = speechLanguageCodes[lang] || 'en-US';
                utterance.rate = 0.8;
                speechSynthesis.speak(utterance);
            }
        }

        function toggleMute() {
            isMuted = !isMuted;
            
            // Update button appearance
            const muteBtn = document.getElementById('muteBtn');
            if (isMuted) {
                muteBtn.textContent = '🔇 Unmute';
                muteBtn.style.background = '#dc3545';
                muteBtn.classList.add('muted');
            } else {
                muteBtn.textContent = '🔊 Mute';
                muteBtn.style.background = '#28a745';
                muteBtn.classList.remove('muted');
            }
            
            // Apply mute/unmute
            if (room && room.localParticipant) {
                try {
                    room.localParticipant.setMicrophoneEnabled(!isMuted);
                    console.log(`Microphone ${isMuted ? 'muted' : 'unmuted'} via LiveKit`);
                } catch (error) {
                    console.error('Failed to toggle microphone via LiveKit:', error);
                    // Fallback to direct stream control
                    toggleMuteViaStream();
                }
            } else {
                // Fallback
                toggleMuteViaStream();
            }
            
            // Update local video label to show mute status
            updateLocalVideoLabel();
        }
        
        function toggleMuteViaStream() {
            if (localVideo && localVideo.srcObject) {
                const audioTracks = localVideo.srcObject.getAudioTracks();
                audioTracks.forEach(track => {
                    track.enabled = !isMuted;
                });
                console.log(`Microphone ${isMuted ? 'muted' : 'unmuted'} via stream`);
            }
        }
        
        function updateLocalVideoLabel() {
            const localVideoLabel = document.querySelector('.local-video .video-label');
            if (localVideoLabel) {
                const muteStatus = isMuted ? ' (Muted)' : '';
                localVideoLabel.textContent = `You${muteStatus}`;
            }
        }

        function toggleVideo() {
            isVideoOn = !isVideoOn;
            
            // Update button appearance
            const videoBtn = document.getElementById('videoBtn');
            if (!isVideoOn) {
                videoBtn.textContent = '📹 Turn On Video';
                videoBtn.style.background = '#dc3545';
                videoBtn.classList.add('video-off');
            } else {
                videoBtn.textContent = '📹 Turn Off Video';
                videoBtn.style.background = '#28a745';
                videoBtn.classList.remove('video-off');
            }
            
            // Apply video on/off
            if (room && room.localParticipant) {
                try {
                    room.localParticipant.setCameraEnabled(isVideoOn);
                    console.log(`Camera ${isVideoOn ? 'enabled' : 'disabled'} via LiveKit`);
                } catch (error) {
                    console.error('Failed to toggle camera via LiveKit:', error);
                    // Fallback to direct stream control
                    toggleVideoViaStream();
                }
            } else {
                // Fallback
                toggleVideoViaStream();
            }
            
            // Update local video display
            updateLocalVideoDisplay();
        }
        
        function toggleVideoViaStream() {
            if (localVideo && localVideo.srcObject) {
                const videoTracks = localVideo.srcObject.getVideoTracks();
                videoTracks.forEach(track => {
                    track.enabled = isVideoOn;
                });
                console.log(`Camera ${isVideoOn ? 'enabled' : 'disabled'} via stream`);
            }
        }
        
        function updateLocalVideoDisplay() {
            const localVideoContainer = document.querySelector('.local-video');
            if (!isVideoOn) {
                localVideoContainer.style.background = '#2c3e50';
                localVideo.style.opacity = '0.3';
            } else {
                localVideoContainer.style.background = '#000';
                localVideo.style.opacity = '1';
            }
        }

        function updateConnectionStatus(message, className) {
            const statusEl = document.getElementById('connectionStatus');
            statusEl.textContent = message;
            statusEl.className = `status ${className}`;
        }

        function handleTrackUnsubscribed(track, publication, participant) {
            console.log('Track unsubscribed:', track.kind, 'from', participant.identity);
            if (track.kind === LivekitClient.Track.Kind.Audio) {
                // Clean up audio element if participant leaves
                const audioElement = document.getElementById('remoteAudio');
                if (audioElement) {
                    track.detach(audioElement);
                    console.log('Remote audio track detached');
                }
            }
        }

        function handleRoomConnected() {
            console.log('✅ Room connected event fired');
            isConnected = true;
            updateConnectionStatus('✅ Connected to room! Ready for translation.', 'connected');
        }
        
        function handleRoomDisconnected(reason) {
            console.log('❌ Room disconnected:', reason);
            isConnected = false;
            updateConnectionStatus(`❌ Disconnected from room: ${reason}`, 'error');
        }

        function handleAudioPlaybackChanged() {
            console.log('Audio playback status changed');
            // This can help debug audio issues
        }

        function handleParticipantConnected(participant) {
            console.log('Participant connected:', participant.identity);
            console.log('Participant audio tracks:', participant.audioTrackPublications.size);
            console.log('Participant video tracks:', participant.videoTrackPublications.size);
            
            updateConnectionStatus(`${participant.identity} joined! 🎉 Audio should work now.`, 'connected');
            
            // Send my language preference to the new participant
            setTimeout(() => {
                shareLanguagePreference();
            }, 1000);
        }

        function handleTrackSubscribed(track, publication, participant) {
            console.log('Track subscribed:', track.kind, 'from', participant.identity);
            if (track.kind === LivekitClient.Track.Kind.Video) {
                const remoteVideo = document.getElementById('remoteVideo');
                track.attach(remoteVideo);
            } else if (track.kind === LivekitClient.Track.Kind.Audio) {
                // Create or get audio element for remote participant audio
                let audioElement = document.getElementById('remoteAudio');
                if (!audioElement) {
                    audioElement = document.createElement('audio');
                    audioElement.id = 'remoteAudio';
                    audioElement.autoplay = true;
                    audioElement.controls = false;
                    audioElement.style.display = 'none'; // Hidden audio element
                    document.body.appendChild(audioElement);
                }
                
                // Attach the audio track to the audio element
                track.attach(audioElement);
                
                // Ensure audio is not muted and volume is appropriate
                audioElement.muted = false;
                audioElement.volume = 1.0;
                audioElement.setAttribute('playsinline', 'true');
                
                // Add event listeners for debugging
                audioElement.addEventListener('play', () => {
                    console.log('Remote audio started playing');
                    updateConnectionStatus('🔊 Audio connected! You should hear the remote participant.', 'connected');
                });
                
                audioElement.addEventListener('pause', () => {
                    console.log('Remote audio paused');
                });
                
                audioElement.addEventListener('error', (e) => {
                    console.error('Remote audio error:', e);
                });
                
                console.log('Remote audio track attached and configured for playback');
                
                // Try to play in case autoplay is blocked
                audioElement.play().catch(error => {
                    console.warn('Audio autoplay blocked, user interaction required:', error);
                    // Show a notification to user that they need to click to enable audio
                    showAudioPermissionNotice();
                });
            }
        }

        // Initialize
        document.addEventListener('DOMContentLoaded', function() {
            console.log('LiveKit Real-Time Translator with Azure API loaded');
            
            // Check if LiveKit is available
            if (typeof LivekitClient !== 'undefined') {
                console.log('LiveKit client library loaded successfully');
                console.log('LiveKit version:', LivekitClient.version || 'version info not available');
            } else {
                console.error('LiveKit client library failed to load');
                updateConnectionStatus('LiveKit library failed to load.', 'error');
            }
            
            // Initialize language selection
            updateLanguageSelection();
        });
    </script>
</body>
</html>