<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="#212529">
    <title>IRC VideoChat - Terminal</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">

</head>
<body>
    <!-- Username Modal -->
    <div id="usernameModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>IRC Video Chat Server</h2>
                <p>* Connecting to #videochat...</p>
                <p>* Enter your nickname to join</p>
            </div>
            <form id="usernameForm">
                <div class="input-group">
                    <input type="text" id="usernameInput" placeholder="your_nickname" maxlength="20" required>
                </div>
                <button type="submit" id="joinButton">
                    Join Channel
                </button>
            </form>
        </div>
    </div>

    <!-- Main Chat Interface -->
    <div id="chatInterface" class="hidden">
        <header class="chat-header">
            <div class="header-left">
                <h1>#videochat</h1>
                <span id="participantCount">1 user</span>
                <span id="connectionQuality" class="connection-quality" title="Connection quality">
                    <span class="quality-indicator good">●</span>
                    <span class="quality-text">Good</span>
                </span>
            </div>
            <div class="header-right">
                <button id="themeToggle" class="header-btn" title="Toggle theme">
                    🌙
                </button>
                <button id="toggleSelfViewButton" class="header-btn" title="Toggle self view">
                    View
                </button>
            </div>
        </header>

        <main class="chat-main">
            <div class="main-content">
                <div id="remoteVideos" class="video-grid" aria-label="Remote Videos"></div>
                
                <!-- Self View (Initially hidden) -->
                <div id="selfViewContainer" class="self-view hidden">
                    <video id="selfVideo" autoplay muted></video>
                    <div class="self-view-label">
                        <span id="selfViewUsername">[SELF]</span>
                    </div>
                </div>
            </div>
            
            <!-- IRC-style Chat Panel -->
            <div id="chatPanel" class="chat-panel">
                <div class="chat-header-bar">
                    <span class="chat-title">[#videochat]</span>
                    <button id="toggleChatButton" class="chat-toggle-btn" title="Toggle chat">
                        <span>💬</span>
                    </button>
                </div>
                <div class="chat-messages" id="chatMessages">
                    <div class="system-message">* Now talking in #videochat</div>
                    <div class="system-message">* Topic is: Welcome to the video chat room</div>
                </div>
                <div class="chat-input-container">
                    <span class="chat-prompt">&gt;</span>
                    <input type="text" id="chatInput" class="chat-input" placeholder="Type a message..." maxlength="500">
                    <button id="sendButton" class="send-button">Send</button>
                </div>
            </div>
        </main>

        <footer class="chat-controls">
            <button id="muteButton" class="control-btn mute-btn">
                <span class="btn-icon">🎤</span>
                <span class="btn-text">mic</span>
            </button>
            <button id="videoButton" class="control-btn video-btn">
                <span class="btn-icon">📹</span>
                <span class="btn-text">cam</span>
            </button>
            <button id="mobileChatToggle" class="control-btn chat-btn mobile-only">
                <span class="btn-icon">💬</span>
                <span class="btn-text">chat</span>
            </button>
            <button id="hangupButton" class="control-btn hangup-btn">
                <span class="btn-icon">📞</span>
                <span class="btn-text">disconnect</span>
            </button>
        </footer>
        
        <!-- Mobile Chat Overlay -->
        <div id="mobileChatOverlay" class="mobile-chat-overlay hidden">
            <div class="mobile-chat-header">
                <h3>#videochat</h3>
                <button id="closeMobileChatButton" class="close-chat-btn">✕</button>
            </div>
            <div class="mobile-chat-messages" id="mobileChatMessages"></div>
            <div class="mobile-chat-input-container">
                <input type="text" id="mobileChatInput" class="mobile-chat-input" placeholder="Type a message..." maxlength="500">
                <button id="mobileSendButton" class="mobile-send-button">Send</button>
            </div>
        </div>
    </div>

    <!-- Hidden local video for WebRTC -->
    <video id="localVideo" autoplay muted style="display: none;"></video>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js"></script>
    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>