package main

import (
	"context"
	"encoding/json"
	"flag"
	"fmt"
	"log"
	"net/http"
	"sync"
	"time"

	"github.com/sorti/openspeak/internal/client"
	pb "github.com/sorti/openspeak/pkg/api/openspeak/v1"
)

// GUIApp represents the GUI application state
type GUIApp struct {
	grpcClient        *client.GRPCClient
	currentUser       string
	token             string
	channels          []*pb.Channel
	selectedChannelID string
	micMuted          bool
	speakerMuted      bool
	mu                sync.RWMutex
}

var guiApp *GUIApp

func main() {
	port := flag.Int("port", 8080, "HTTP server port")
	flag.Parse()

	guiApp = &GUIApp{}

	// Serve static files and API endpoints
	http.HandleFunc("/", serveHTML)
	http.HandleFunc("/api/login", handleLogin)
	http.HandleFunc("/api/channels", handleChannels)
	http.HandleFunc("/api/join", handleJoin)
	http.HandleFunc("/api/leave", handleLeave)
	http.HandleFunc("/api/mute", handleMute)
	http.HandleFunc("/api/members", handleMembers)
	http.HandleFunc("/api/status", handleStatus)

	addr := fmt.Sprintf(":%d", *port)
	log.Printf("OpenSpeak GUI Server starting on http://localhost:%d", *port)
	if err := http.ListenAndServe(addr, nil); err != nil {
		log.Fatal(err)
	}
}

// serveHTML serves the main HTML page
func serveHTML(w http.ResponseWriter, r *http.Request) {
	w.Header().Set("Content-Type", "text/html; charset=utf-8")
	fmt.Fprint(w, htmlContent)
}

// handleLogin authenticates with the server
func handleLogin(w http.ResponseWriter, r *http.Request) {
	if r.Method != http.MethodPost {
		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
		return
	}

	var req struct {
		Host  string `json:"host"`
		Port  int    `json:"port"`
		Token string `json:"token"`
	}

	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
		http.Error(w, "Invalid request", http.StatusBadRequest)
		return
	}

	// Connect to gRPC server
	grpcClient, err := client.NewGRPCClient(req.Host, req.Port)
	if err != nil {
		json.NewEncoder(w).Encode(map[string]string{"error": fmt.Sprintf("Connection failed: %v", err)})
		return
	}

	// Authenticate
	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
	defer cancel()

	loginResp, err := grpcClient.Login(ctx, req.Token)
	if err != nil {
		grpcClient.Close()
		json.NewEncoder(w).Encode(map[string]string{"error": fmt.Sprintf("Authentication failed: %v", err)})
		return
	}

	// Store client, user info, and token
	guiApp.mu.Lock()
	guiApp.grpcClient = grpcClient
	guiApp.currentUser = loginResp.UserId
	guiApp.token = req.Token
	guiApp.mu.Unlock()

	// Load channels (token is already stored in grpcClient and will be added by ListChannels)
	ctx, cancel = context.WithTimeout(context.Background(), 5*time.Second)
	defer cancel()

	resp, err := grpcClient.ListChannels(ctx)
	if err != nil {
		json.NewEncoder(w).Encode(map[string]string{"error": fmt.Sprintf("Failed to load channels: %v", err)})
		return
	}

	guiApp.mu.Lock()
	guiApp.channels = resp.Channels
	guiApp.mu.Unlock()

	w.Header().Set("Content-Type", "application/json")
	json.NewEncoder(w).Encode(map[string]interface{}{
		"success": true,
		"user":    guiApp.currentUser,
		"channels": len(resp.Channels),
	})
}

// handleChannels returns the list of channels
func handleChannels(w http.ResponseWriter, r *http.Request) {
	if r.Method != http.MethodGet {
		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
		return
	}

	guiApp.mu.RLock()
	channels := guiApp.channels
	guiApp.mu.RUnlock()

	if channels == nil {
		http.Error(w, "Not logged in", http.StatusUnauthorized)
		return
	}

	type ChannelInfo struct {
		ID        string `json:"id"`
		Name      string `json:"name"`
		Members   int    `json:"members"`
		IsCurrent bool   `json:"isCurrent"`
	}

	guiApp.mu.RLock()
	currentChannelID := guiApp.selectedChannelID
	guiApp.mu.RUnlock()

	var result []ChannelInfo
	for _, ch := range channels {
		result = append(result, ChannelInfo{
			ID:        ch.Id,
			Name:      ch.Name,
			Members:   len(ch.MemberIds),
			IsCurrent: ch.Id == currentChannelID,
		})
	}

	w.Header().Set("Content-Type", "application/json")
	json.NewEncoder(w).Encode(result)
}

// handleJoin joins a channel
func handleJoin(w http.ResponseWriter, r *http.Request) {
	if r.Method != http.MethodPost {
		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
		return
	}

	var req struct {
		ChannelID string `json:"channelId"`
	}

	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
		http.Error(w, "Invalid request", http.StatusBadRequest)
		return
	}

	guiApp.mu.Lock()
	grpcClient := guiApp.grpcClient
	guiApp.mu.Unlock()

	if grpcClient == nil {
		http.Error(w, "Not logged in", http.StatusUnauthorized)
		return
	}

	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
	defer cancel()

	_, err := grpcClient.JoinChannel(ctx, req.ChannelID)
	if err != nil {
		json.NewEncoder(w).Encode(map[string]string{"error": fmt.Sprintf("Failed to join: %v", err)})
		return
	}

	guiApp.mu.Lock()
	guiApp.selectedChannelID = req.ChannelID
	guiApp.mu.Unlock()

	w.Header().Set("Content-Type", "application/json")
	json.NewEncoder(w).Encode(map[string]bool{"success": true})
}

// handleLeave leaves a channel
func handleLeave(w http.ResponseWriter, r *http.Request) {
	if r.Method != http.MethodPost {
		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
		return
	}

	guiApp.mu.Lock()
	grpcClient := guiApp.grpcClient
	channelID := guiApp.selectedChannelID
	guiApp.mu.Unlock()

	if grpcClient == nil || channelID == "" {
		http.Error(w, "Not in a channel", http.StatusBadRequest)
		return
	}

	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
	defer cancel()

	_, err := grpcClient.LeaveChannel(ctx, channelID)
	if err != nil {
		json.NewEncoder(w).Encode(map[string]string{"error": fmt.Sprintf("Failed to leave: %v", err)})
		return
	}

	guiApp.mu.Lock()
	guiApp.selectedChannelID = ""
	guiApp.mu.Unlock()

	w.Header().Set("Content-Type", "application/json")
	json.NewEncoder(w).Encode(map[string]bool{"success": true})
}

// handleMute toggles microphone mute
func handleMute(w http.ResponseWriter, r *http.Request) {
	if r.Method != http.MethodPost {
		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
		return
	}

	guiApp.mu.Lock()
	grpcClient := guiApp.grpcClient
	guiApp.micMuted = !guiApp.micMuted
	micMuted := guiApp.micMuted
	speakerMuted := guiApp.speakerMuted
	guiApp.mu.Unlock()

	if grpcClient == nil {
		http.Error(w, "Not logged in", http.StatusUnauthorized)
		return
	}

	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
	defer cancel()

	_, err := grpcClient.SetMuteStatus(ctx, micMuted, speakerMuted)
	if err != nil {
		json.NewEncoder(w).Encode(map[string]string{"error": fmt.Sprintf("Failed to set mute: %v", err)})
		return
	}

	w.Header().Set("Content-Type", "application/json")
	json.NewEncoder(w).Encode(map[string]interface{}{
		"success":   true,
		"micMuted":  micMuted,
		"speakerMuted": speakerMuted,
	})
}

// handleMembers returns members of a channel
func handleMembers(w http.ResponseWriter, r *http.Request) {
	if r.Method != http.MethodGet {
		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
		return
	}

	channelID := r.URL.Query().Get("id")
	if channelID == "" {
		http.Error(w, "Missing channel id", http.StatusBadRequest)
		return
	}

	guiApp.mu.RLock()
	grpcClient := guiApp.grpcClient
	guiApp.mu.RUnlock()

	if grpcClient == nil {
		http.Error(w, "Not logged in", http.StatusUnauthorized)
		return
	}

	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
	defer cancel()

	resp, err := grpcClient.ListMembers(ctx, channelID)
	if err != nil {
		json.NewEncoder(w).Encode(map[string]interface{}{"error": fmt.Sprintf("Failed to load members: %v", err)})
		return
	}

	w.Header().Set("Content-Type", "application/json")
	json.NewEncoder(w).Encode(map[string]interface{}{
		"members": resp.MemberIds,
	})
}

// handleStatus returns current status
func handleStatus(w http.ResponseWriter, r *http.Request) {
	if r.Method != http.MethodGet {
		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
		return
	}

	guiApp.mu.RLock()
	defer guiApp.mu.RUnlock()

	if guiApp.grpcClient == nil {
		http.Error(w, "Not logged in", http.StatusUnauthorized)
		return
	}

	var currentChannelName string
	for _, ch := range guiApp.channels {
		if ch.Id == guiApp.selectedChannelID {
			currentChannelName = ch.Name
			break
		}
	}

	w.Header().Set("Content-Type", "application/json")
	json.NewEncoder(w).Encode(map[string]interface{}{
		"user":              guiApp.currentUser,
		"currentChannel":    currentChannelName,
		"micMuted":          guiApp.micMuted,
		"speakerMuted":      guiApp.speakerMuted,
	})
}

const htmlContent = `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenSpeak - Voice Communication Platform</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .login-container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            padding: 40px;
            width: 100%;
            max-width: 400px;
            text-align: center;
        }

        .login-container h1 {
            color: #667eea;
            margin-bottom: 10px;
            font-size: 32px;
        }

        .login-container p {
            color: #666;
            margin-bottom: 30px;
            font-size: 14px;
        }

        .form-group {
            margin-bottom: 20px;
            text-align: left;
        }

        .form-group label {
            display: block;
            color: #333;
            font-weight: 600;
            margin-bottom: 8px;
            font-size: 14px;
        }

        .form-group input {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e0e0e0;
            border-radius: 6px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .form-group input:focus {
            outline: none;
            border-color: #667eea;
        }

        .form-group input::placeholder {
            color: #999;
        }

        .login-button {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .login-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
        }

        .login-button:active {
            transform: translateY(0);
        }

        .status-message {
            margin-top: 20px;
            padding: 12px;
            border-radius: 6px;
            font-size: 14px;
        }

        .status-message.error {
            background: #ffe0e0;
            color: #d32f2f;
        }

        .status-message.success {
            background: #e0ffe0;
            color: #388e3c;
        }

        .status-message.loading {
            background: #e0e7ff;
            color: #667eea;
        }

        .main-container {
            display: none;
            background: white;
            border-radius: 12px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            width: 100%;
            max-width: 1200px;
            height: 90vh;
            max-height: 700px;
            flex-direction: column;
        }

        .main-container.active {
            display: flex;
        }

        .top-bar {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 12px 12px 0 0;
        }

        .top-bar h1 {
            font-size: 24px;
        }

        .disconnect-button {
            padding: 10px 20px;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.4);
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            transition: background 0.3s;
        }

        .disconnect-button:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .content {
            display: flex;
            flex: 1;
            overflow: hidden;
        }

        .sidebar {
            width: 280px;
            border-right: 1px solid #e0e0e0;
            overflow-y: auto;
            padding: 20px;
            background: #f8f9fa;
        }

        .sidebar h2 {
            color: #333;
            font-size: 16px;
            margin-bottom: 15px;
        }

        .channel-item {
            padding: 12px 15px;
            margin-bottom: 8px;
            background: white;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
            border: 2px solid transparent;
            font-size: 14px;
            color: #333;
        }

        .channel-item:hover {
            background: #f0f0f0;
        }

        .channel-item.active {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        .channel-count {
            font-size: 12px;
            opacity: 0.7;
            margin-left: 5px;
        }

        .main-panel {
            flex: 1;
            padding: 30px;
            overflow-y: auto;
        }

        .channel-header {
            color: #667eea;
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .content-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }

        .section {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
        }

        .section h3 {
            color: #333;
            font-size: 16px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .section h3::before {
            content: "👥";
            margin-right: 10px;
            font-size: 20px;
        }

        .members-list {
            max-height: 300px;
            overflow-y: auto;
        }

        .member-item {
            padding: 10px 12px;
            background: white;
            margin-bottom: 8px;
            border-radius: 4px;
            font-size: 14px;
            color: #333;
        }

        .member-item::before {
            content: "👤 ";
            margin-right: 8px;
        }

        .status-section h3 {
            color: #333;
            font-size: 16px;
            margin-bottom: 15px;
        }

        .status-section h3::before {
            content: "🎙️";
            margin-right: 10px;
            font-size: 18px;
        }

        .status-item {
            padding: 10px 0;
            color: #666;
            font-size: 14px;
            border-bottom: 1px solid #e0e0e0;
        }

        .status-item:last-child {
            border-bottom: none;
        }

        .status-value {
            color: #333;
            font-weight: 600;
        }

        .button-group {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .action-button {
            flex: 1;
            padding: 12px 20px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .action-button.join {
            background: #4caf50;
            color: white;
        }

        .action-button.join:hover {
            background: #45a049;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
        }

        .action-button.leave {
            background: #f44336;
            color: white;
        }

        .action-button.leave:hover {
            background: #da190b;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(244, 67, 54, 0.3);
        }

        .action-button.mute {
            background: #ff9800;
            color: white;
        }

        .action-button.mute:hover {
            background: #e68900;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 152, 0, 0.3);
        }

        .action-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        .no-selection {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #999;
            font-size: 18px;
        }

        @media (max-width: 900px) {
            .content-grid {
                grid-template-columns: 1fr;
            }

            .sidebar {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid #e0e0e0;
            }

            .content {
                flex-direction: column;
            }
        }

        .loader {
            display: inline-block;
            width: 8px;
            height: 8px;
            background: #667eea;
            border-radius: 50%;
            animation: pulse 1.5s ease-in-out infinite;
            margin-left: 5px;
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.3; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.2); }
        }
    </style>
</head>
<body>
    <!-- Login Container -->
    <div class="login-container" id="loginContainer">
        <h1>🎤 OpenSpeak</h1>
        <p>Voice Communication Platform</p>

        <div class="form-group">
            <label for="hostInput">Server Host</label>
            <input type="text" id="hostInput" value="localhost" placeholder="localhost">
        </div>

        <div class="form-group">
            <label for="portInput">Server Port</label>
            <input type="text" id="portInput" value="50051" placeholder="50051">
        </div>

        <div class="form-group">
            <label for="tokenInput">Admin Token</label>
            <input type="password" id="tokenInput" placeholder="Enter your admin token...">
        </div>

        <button class="login-button" onclick="handleLogin()">Login</button>

        <div class="status-message" id="loginStatus" style="display: none;"></div>
    </div>

    <!-- Main Container -->
    <div class="main-container" id="mainContainer">
        <div class="top-bar">
            <h1>🎤 OpenSpeak</h1>
            <div>
                <span id="userName" style="margin-right: 30px;">User: -</span>
                <button class="disconnect-button" onclick="handleDisconnect()">Disconnect</button>
            </div>
        </div>

        <div class="content">
            <div class="sidebar">
                <h2>Channels</h2>
                <div id="channelsList"></div>
            </div>

            <div class="main-panel">
                <div id="noSelection" class="no-selection">
                    👇 Select a channel to continue
                </div>

                <div id="channelContent" style="display: none;">
                    <div class="channel-header">
                        <span id="channelTitle">-</span>
                        <span style="font-size: 14px; color: #999;"></span>
                    </div>

                    <div class="content-grid">
                        <div class="section">
                            <h3>Members</h3>
                            <div class="members-list" id="membersList"></div>
                        </div>

                        <div class="section">
                            <h3 style="color: #333;">Status</h3>
                            <div class="status-section">
                                <div class="status-item">
                                    Current User: <span class="status-value" id="statusUser">-</span>
                                </div>
                                <div class="status-item">
                                    Channel: <span class="status-value" id="statusChannel">-</span>
                                </div>
                                <div class="status-item">
                                    Microphone: <span class="status-value" id="statusMic">🎤 Unmuted</span>
                                </div>
                                <div class="status-item">
                                    Speaker: <span class="status-value" id="statusSpeaker">🔊 On</span>
                                </div>
                            </div>

                            <div class="button-group">
                                <button class="action-button mute" onclick="handleMute()">🎤 Toggle Microphone</button>
                            </div>

                            <div class="button-group">
                                <button class="action-button join" id="joinButton" onclick="handleJoin()">Join Channel</button>
                                <button class="action-button leave" id="leaveButton" onclick="handleLeave()" style="display: none;">Leave Channel</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let currentUser = null;
        let channels = [];
        let selectedChannelId = null;

        async function handleLogin() {
            const host = document.getElementById('hostInput').value;
            const port = document.getElementById('portInput').value;
            const token = document.getElementById('tokenInput').value;
            const statusEl = document.getElementById('loginStatus');

            if (!token) {
                statusEl.className = 'status-message error';
                statusEl.textContent = '❌ Token cannot be empty';
                statusEl.style.display = 'block';
                return;
            }

            statusEl.className = 'status-message loading';
            statusEl.textContent = '🔄 Connecting...';
            statusEl.style.display = 'block';

            try {
                const response = await fetch('/api/login', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ host, port: parseInt(port), token })
                });

                const data = await response.json();

                if (data.error) {
                    statusEl.className = 'status-message error';
                    statusEl.textContent = '❌ ' + data.error;
                    statusEl.style.display = 'block';
                    return;
                }

                // Login successful
                currentUser = data.user;
                document.getElementById('loginContainer').style.display = 'none';
                document.getElementById('mainContainer').classList.add('active');
                document.getElementById('userName').textContent = '👤 User: ' + currentUser;

                loadChannels();
                updateStatus();
            } catch (error) {
                statusEl.className = 'status-message error';
                statusEl.textContent = '❌ ' + error.message;
                statusEl.style.display = 'block';
            }
        }

        async function loadChannels() {
            try {
                const response = await fetch('/api/channels');
                channels = await response.json();

                const channelsList = document.getElementById('channelsList');
                channelsList.innerHTML = '';

                channels.forEach(ch => {
                    const div = document.createElement('div');
                    div.className = 'channel-item' + (ch.isCurrent ? ' active' : '');
                    div.textContent = ch.name;
                    const span = document.createElement('span');
                    span.className = 'channel-count';
                    span.textContent = '(' + ch.members + ')';
                    div.appendChild(span);
                    div.onclick = () => selectChannel(ch.id);
                    channelsList.appendChild(div);
                });
            } catch (error) {
                console.error('Error loading channels:', error);
            }
        }

        function selectChannel(channelId) {
            selectedChannelId = channelId;
            const channel = channels.find(ch => ch.id === channelId);

            if (channel) {
                document.getElementById('noSelection').style.display = 'none';
                document.getElementById('channelContent').style.display = 'block';
                document.getElementById('channelTitle').textContent = channel.name;
                document.getElementById('statusChannel').textContent = channel.name;

                loadMembers(channelId);
                updateJoinLeaveButton(channel.isCurrent);
                loadChannels(); // Refresh to update active state
            }
        }

        async function loadMembers(channelId) {
            try {
                const response = await fetch('/api/members?id=' + channelId);
                const data = await response.json();

                const membersList = document.getElementById('membersList');
                membersList.innerHTML = '';

                if (data.members && data.members.length > 0) {
                    data.members.forEach(member => {
                        const div = document.createElement('div');
                        div.className = 'member-item';
                        div.textContent = member;
                        membersList.appendChild(div);
                    });
                } else {
                    membersList.innerHTML = '<div class="member-item">No members</div>';
                }
            } catch (error) {
                console.error('Error loading members:', error);
            }
        }

        async function handleJoin() {
            if (!selectedChannelId) return;

            try {
                const response = await fetch('/api/join', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ channelId: selectedChannelId })
                });

                const data = await response.json();

                if (data.success) {
                    loadChannels();
                    loadMembers(selectedChannelId);
                    updateStatus();
                }
            } catch (error) {
                console.error('Error joining channel:', error);
            }
        }

        async function handleLeave() {
            if (!selectedChannelId) return;

            try {
                const response = await fetch('/api/leave', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' }
                });

                const data = await response.json();

                if (data.success) {
                    loadChannels();
                    loadMembers(selectedChannelId);
                    updateStatus();
                }
            } catch (error) {
                console.error('Error leaving channel:', error);
            }
        }

        async function handleMute() {
            try {
                const response = await fetch('/api/mute', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' }
                });

                const data = await response.json();

                if (data.success) {
                    updateStatus();
                }
            } catch (error) {
                console.error('Error toggling mute:', error);
            }
        }

        async function updateStatus() {
            try {
                const response = await fetch('/api/status');
                const data = await response.json();

                document.getElementById('statusUser').textContent = data.user;
                document.getElementById('statusChannel').textContent = data.currentChannel || 'None';
                document.getElementById('statusMic').textContent = data.micMuted ? '🔇 Muted' : '🎤 Unmuted';
                document.getElementById('statusSpeaker').textContent = data.speakerMuted ? '🔇 Off' : '🔊 On';

                updateJoinLeaveButton(data.currentChannel !== '');
            } catch (error) {
                console.error('Error updating status:', error);
            }
        }

        function updateJoinLeaveButton(inChannel) {
            const joinBtn = document.getElementById('joinButton');
            const leaveBtn = document.getElementById('leaveButton');

            if (inChannel) {
                joinBtn.style.display = 'none';
                leaveBtn.style.display = 'block';
            } else {
                joinBtn.style.display = 'block';
                leaveBtn.style.display = 'none';
            }
        }

        function handleDisconnect() {
            document.getElementById('mainContainer').classList.remove('active');
            document.getElementById('loginContainer').style.display = 'block';
            document.getElementById('tokenInput').value = '';
            currentUser = null;
            channels = [];
            selectedChannelId = null;
        }

        // Auto-refresh status every 2 seconds
        setInterval(updateStatus, 2000);
    </script>
</body>
</html>`