using System;
using System.Collections.Generic;
using System.IO;
using System.IO.Ports;
using System.Linq;
using System.Net;
using System.Net.Sockets;
using System.Net.WebSockets;
using System.Reflection;
using System.Security.Cryptography;
using System.Security.Policy;
using System.Text;
using System.Threading;
using System.Web;
using System.Web.UI.WebControls;
using System.Xml.Linq;
using static System.Net.Mime.MediaTypeNames;

// ============================================================
// Tic-Tac-Toe over WebSocket — Pure C# Console Application
// No ASP.NET, No Kestrel, No SignalR, No Framework
// Just a TcpListener, raw HTTP, WebSocket frame parsing,
// and your code.
// ============================================================

namespace console_simple_web_app_websocket_demo
{
    internal class Program
    {
        // --- Configuration ---
        static int Port = 8080;

        // --- Game state ---
        static Dictionary<string, GameRoom> Rooms = new Dictionary<string, GameRoom>();
        static int RoomCounter = 0;

        // --- Connected WebSocket clients ---
        static List<WsClient> AllClients = new List<WsClient>();

        // --- Lock for thread safety ---
        static object Lock = new object();

        static void Main(string[] args)
        {
            TcpListener listener = new TcpListener(IPAddress.Any, Port);
            listener.Start();

            Console.WriteLine($"Tic-Tac-Toe WebSocket Server started on port {Port}");
            Console.WriteLine($"Open browser: http://localhost:{Port}/");
            Console.WriteLine();

            while (true)
            {
                TcpClient client = listener.AcceptTcpClient();

                System.Threading.Thread thread = new System.Threading.Thread(() =>
                {
                    try
                    {
                        HandleClient(client);
                    }
                    catch (IOException) { }
                    catch (Exception ex)
                    {
                        Console.WriteLine("Error: " + ex.Message);
                    }
                    finally
                    {
                        client.Close();
                    }
                });

                thread.Start();
            }
        }

        // ============================================================
        // Layer 1: HTTP — Read request, route, respond or upgrade
        // ============================================================

        static void HandleClient(TcpClient client)
        {
            try
            {
                NetworkStream stream = client.GetStream();
                stream.ReadTimeout = 5000;

                // Wait briefly for data to arrive
                if (!stream.DataAvailable)
                {
                    // Give the client a moment to send data
                    System.Threading.Thread.Sleep(500);
                    if (!stream.DataAvailable) return; // nothing came, abandon
                }

                // --- Read headers byte-by-byte until \r\n\r\n ---
                StringBuilder headerBuilder = new StringBuilder();
                int prev3 = 0, prev2 = 0, prev1 = 0, current = 0;

                while (true)
                {
                    int b = stream.ReadByte();
                    if (b == -1) return;

                    headerBuilder.Append((char)b);

                    prev3 = prev2;
                    prev2 = prev1;
                    prev1 = current;
                    current = b;

                    if (prev3 == '\r' && prev2 == '\n' && prev1 == '\r' && current == '\n')
                        break;
                }

                string headerSection = headerBuilder.ToString();

                // --- Parse Content-Length ---
                int contentLength = 0;
                string[] headerLines = headerSection.Split(new[] { "\r\n" }, StringSplitOptions.None);

                foreach (string line in headerLines)
                {
                    if (line.StartsWith("Content-Length:", StringComparison.OrdinalIgnoreCase))
                    {
                        string val = line.Substring("Content-Length:".Length).Trim();
                        int.TryParse(val, out contentLength);
                        break;
                    }
                }

                // --- Read body ---
                string body = "";
                if (contentLength > 0)
                {
                    byte[] bodyBuffer = new byte[contentLength];
                    int totalRead = 0;
                    while (totalRead < contentLength)
                    {
                        int read = stream.Read(bodyBuffer, totalRead, contentLength - totalRead);
                        if (read == 0) break;
                        totalRead += read;
                    }
                    body = Encoding.UTF8.GetString(bodyBuffer, 0, totalRead);
                }

                // --- Parse request ---
                HttpRequest request = ParseHttpRequest(headerSection, body);
                Console.WriteLine($"{request.Method} {request.Path}");

                // --- Check for WebSocket upgrade ---
                string upgradeHeader = request.GetHeader("Upgrade");
                if (upgradeHeader != null && upgradeHeader.Equals("websocket", StringComparison.OrdinalIgnoreCase))
                {
                    HandleWebSocketUpgrade(client, stream, request);
                    return; // Connection is now WebSocket — don't close
                }

                // --- Normal HTTP routing ---
                string responseHtml;
                int statusCode = 200;

                switch (request.Path)
                {
                    case "/":
                    case "/lobby":
                        responseHtml = PageLobby(request);
                        break;
                    case "/game":
                        responseHtml = PageGame(request);
                        break;
                    case "/spectate":
                        responseHtml = PageSpectate(request);
                        break;
                    default:
                        responseHtml = PageNotFound();
                        statusCode = 404;
                        break;
                }

                // --- Send HTTP response ---
                string statusText = statusCode == 200 ? "OK" : "Not Found";
                string httpResponse =
                    $"HTTP/1.1 {statusCode} {statusText}\r\n" +
                    "Content-Type: text/html; charset=utf-8\r\n" +
                    $"Content-Length: {Encoding.UTF8.GetByteCount(responseHtml)}\r\n" +
                    "Connection: close\r\n" +
                    "\r\n" +
                    responseHtml;

                byte[] responseBytes = Encoding.UTF8.GetBytes(httpResponse);
                stream.Write(responseBytes, 0, responseBytes.Length);
                stream.Flush();
            }
            catch (Exception ex)
            {
                Console.WriteLine("Error: " + ex.Message);
            }
            finally
            {
                // Don't close WebSocket connections here —
                // they returned early from HandleWebSocketUpgrade
                // Normal HTTP connections are closed by Connection: close header
                // and the client will close after reading the response.
                // TcpClient.Close is handled by the WebSocket loop for upgraded connections.
            }
        }

        // ============================================================
        // WebSocket Handshake (RFC 6455)
        // ============================================================

        static void HandleWebSocketUpgrade(TcpClient client, NetworkStream stream, HttpRequest request)
        {
            // The WebSocket handshake is an HTTP Upgrade.
            // The client sends:
            //   Upgrade: websocket
            //   Connection: Upgrade
            //   Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
            //   Sec-WebSocket-Version: 13
            //
            // The server must:
            //   1. Take the Sec-WebSocket-Key value
            //   2. Append the magic GUID: "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
            //   3. SHA-1 hash the result
            //   4. Base64 encode the hash
            //   5. Send it back as Sec-WebSocket-Accept

            string clientKey = request.GetHeader("Sec-WebSocket-Key");

            if (clientKey == null)
            {
                try { client.Close(); } catch { }
                return;
            }

            // The magic string defined in RFC 6455 — never changes
            string magicString = "258EAFA5-E914-47DA-95CA-C5AB0DC85B11";
            string combined = clientKey + magicString;

            byte[] sha1Hash;
            using (SHA1 sha1 = SHA1.Create())
            {
                sha1Hash = sha1.ComputeHash(Encoding.UTF8.GetBytes(combined));
            }

            string acceptKey = Convert.ToBase64String(sha1Hash);

            // Send the upgrade response
            string response =
                "HTTP/1.1 101 Switching Protocols\r\n" +
                "Upgrade: websocket\r\n" +
                "Connection: Upgrade\r\n" +
                $"Sec-WebSocket-Accept: {acceptKey}\r\n" +
                "\r\n";

            byte[] responseBytes = Encoding.UTF8.GetBytes(response);
            stream.Write(responseBytes, 0, responseBytes.Length);
            stream.Flush();

            Console.WriteLine("  WebSocket connection established");

            // --- Parse query parameters from original request ---
            string roomId = request.GetQuery("room");
            string playerName = request.GetQuery("name");
            string role = request.GetQuery("role"); // "player" or "spectator"

            // --- Register this WebSocket client ---
            WsClient wsClient = new WsClient
            {
                Client = client,
                Stream = stream,
                Name = playerName ?? "Anonymous",
                RoomId = roomId ?? "",
                Role = role ?? "player"
            };

            lock (Lock)
            {
                AllClients.Add(wsClient);
            }

            // --- Join or create game room ---
            if (wsClient.Role == "player")
            {
                JoinAsPlayer(wsClient);
            }
            else
            {
                JoinAsSpectator(wsClient);
            }

            // --- Enter WebSocket message loop ---
            // Remove read timeout — WebSocket connections are long-lived
            stream.ReadTimeout = Timeout.Infinite;
            WebSocketMessageLoop(wsClient);
        }

        // ============================================================
        // WebSocket Frame Parser (RFC 6455)
        // ============================================================
        //
        // A WebSocket frame looks like this:
        //
        //  0                   1                   2                   3
        //  0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
        // +-+-+-+-+-------+-+-------------+-------------------------------+
        // |F|R|R|R| opcode|M| Payload len |    Extended payload length    |
        // |I|S|S|S|  (4)  |A|     (7)     |            (16/64)            |
        // |N|V|V|V|       |S|             |   (if payload len==126/127)   |
        // | |1|2|3|       |K|             |                               |
        // +-+-+-+-+-------+-+-------------+-------------------------------+
        // |    Masking-key (if MASK == 1)  |          Payload Data        |
        // +-------------------------------+-------------------------------+
        //
        // Client-to-server frames are ALWAYS masked.
        // Server-to-client frames are NEVER masked.
        //
        // Opcodes:
        //   0x1 = text frame
        //   0x8 = connection close
        //   0x9 = ping
        //   0xA = pong

        static string ReadWebSocketFrame(NetworkStream stream, out int opcode)
        {
            opcode = -1;

            // Byte 1: FIN bit + opcode
            int byte1 = stream.ReadByte();
            if (byte1 == -1) return null;

            opcode = byte1 & 0x0F;

            // Byte 2: MASK bit + payload length
            int byte2 = stream.ReadByte();
            if (byte2 == -1) return null;

            bool masked = (byte2 & 0x80) != 0;
            long payloadLength = byte2 & 0x7F;

            // Extended payload length
            if (payloadLength == 126)
            {
                // Next 2 bytes are the actual length (big-endian)
                byte[] lenBytes = ReadExact(stream, 2);
                if (lenBytes == null) return null;
                payloadLength = (lenBytes[0] << 8) | lenBytes[1];
            }
            else if (payloadLength == 127)
            {
                // Next 8 bytes are the actual length (big-endian)
                byte[] lenBytes = ReadExact(stream, 8);
                if (lenBytes == null) return null;
                payloadLength = 0;
                for (int i = 0; i < 8; i++)
                {
                    payloadLength = (payloadLength << 8) | lenBytes[i];
                }
            }

            // Read masking key (4 bytes, only if masked)
            byte[] maskKey = null;
            if (masked)
            {
                maskKey = ReadExact(stream, 4);
                if (maskKey == null) return null;
            }

            // Read payload
            byte[] payload = ReadExact(stream, (int)payloadLength);
            if (payload == null) return null;

            // Unmask the payload
            if (masked && maskKey != null)
            {
                for (int i = 0; i < payload.Length; i++)
                {
                    payload[i] = (byte)(payload[i] ^ maskKey[i % 4]);
                }
            }

            return Encoding.UTF8.GetString(payload);
        }

        static void SendWebSocketFrame(NetworkStream stream, string message)
        {
            byte[] payload = Encoding.UTF8.GetBytes(message);

            // Build frame: server-to-client is NOT masked
            byte[] frame;

            if (payload.Length <= 125)
            {
                frame = new byte[2 + payload.Length];
                frame[0] = 0x81; // FIN + text opcode
                frame[1] = (byte)payload.Length;
                Array.Copy(payload, 0, frame, 2, payload.Length);
            }
            else if (payload.Length <= 65535)
            {
                frame = new byte[4 + payload.Length];
                frame[0] = 0x81;
                frame[1] = 126;
                frame[2] = (byte)((payload.Length >> 8) & 0xFF);
                frame[3] = (byte)(payload.Length & 0xFF);
                Array.Copy(payload, 0, frame, 4, payload.Length);
            }
            else
            {
                frame = new byte[10 + payload.Length];
                frame[0] = 0x81;
                frame[1] = 127;
                long len = payload.Length;
                for (int i = 7; i >= 0; i--)
                {
                    frame[2 + (7 - i)] = (byte)((len >> (i * 8)) & 0xFF);
                }
                Array.Copy(payload, 0, frame, 10, payload.Length);
            }

            stream.Write(frame, 0, frame.Length);
            stream.Flush();
        }

        static void SendCloseFrame(NetworkStream stream)
        {
            // Close frame: opcode 0x8, no payload
            byte[] frame = new byte[] { 0x88, 0x00 };
            try
            {
                stream.Write(frame, 0, frame.Length);
                stream.Flush();
            }
            catch { }
        }

        static byte[] ReadExact(NetworkStream stream, int count)
        {
            byte[] buffer = new byte[count];
            int totalRead = 0;
            while (totalRead < count)
            {
                int read = stream.Read(buffer, totalRead, count - totalRead);
                if (read == 0) return null;
                totalRead += read;
            }
            return buffer;
        }

        // ============================================================
        // WebSocket Message Loop
        // ============================================================

        static void WebSocketMessageLoop(WsClient wsClient)
        {
            try
            {
                while (true)
                {
                    int opcode;
                    string message = ReadWebSocketFrame(wsClient.Stream, out opcode);

                    if (message == null || opcode == 0x8)
                    {
                        // Connection close
                        Console.WriteLine($"  WebSocket closed: {wsClient.Name}");
                        break;
                    }

                    if (opcode == 0x9)
                    {
                        // Ping — respond with pong
                        byte[] pong = new byte[] { 0x8A, 0x00 };
                        wsClient.Stream.Write(pong, 0, pong.Length);
                        wsClient.Stream.Flush();
                        continue;
                    }

                    if (opcode == 0x1)
                    {
                        // Text frame — process game message
                        Console.WriteLine($"  [{wsClient.Name}] {message}");
                        HandleGameMessage(wsClient, message);
                    }
                }
            }
            catch (Exception ex)
            {
                Console.WriteLine($"  WebSocket error ({wsClient.Name}): {ex.Message}");
            }
            finally
            {
                HandleDisconnect(wsClient);

                lock (Lock)
                {
                    AllClients.Remove(wsClient);
                }

                try { wsClient.Client.Close(); } catch { }
            }
        }

        // ============================================================
        // Game Engine
        // ============================================================

        static void JoinAsPlayer(WsClient wsClient)
        {
            lock (Lock)
            {
                GameRoom room;

                if (!string.IsNullOrEmpty(wsClient.RoomId) && Rooms.ContainsKey(wsClient.RoomId))
                {
                    room = Rooms[wsClient.RoomId];
                }
                else
                {
                    // Find a room waiting for a second player, or create a new one
                    room = null;
                    foreach (var r in Rooms.Values)
                    {
                        if (r.PlayerO == null && r.State == GameState.WaitingForPlayer)
                        {
                            room = r;
                            break;
                        }
                    }

                    if (room == null)
                    {
                        RoomCounter++;
                        string newRoomId = "room-" + RoomCounter;
                        room = new GameRoom { RoomId = newRoomId };
                        Rooms[newRoomId] = room;
                    }
                }

                wsClient.RoomId = room.RoomId;

                if (room.PlayerX == null)
                {
                    room.PlayerX = wsClient;
                    wsClient.Symbol = "X";

                    // Tell this player they're X and waiting
                    SendWebSocketFrame(wsClient.Stream,
                        $"system|Joined room {room.RoomId}. You are X. Waiting for opponent...");
                    SendWebSocketFrame(wsClient.Stream,
                        $"assign|X|{room.RoomId}");
                }
                else if (room.PlayerO == null)
                {
                    room.PlayerO = wsClient;
                    wsClient.Symbol = "O";
                    room.State = GameState.Playing;

                    // Tell this player they're O
                    SendWebSocketFrame(wsClient.Stream,
                        $"assign|O|{room.RoomId}");

                    // Notify both players the game has started
                    string startMsg = $"start|{room.PlayerX.Name} (X) vs {room.PlayerO.Name} (O)";
                    SendWebSocketFrame(room.PlayerX.Stream, startMsg);
                    SendWebSocketFrame(room.PlayerO.Stream, startMsg);

                    // Send initial board state
                    BroadcastGameState(room);
                }
                else
                {
                    // Room is full — switch to spectator
                    wsClient.Role = "spectator";
                    room.Spectators.Add(wsClient);
                    SendWebSocketFrame(wsClient.Stream,
                        "system|Room is full. You are now spectating.");
                    SendGameStateTo(wsClient, room);
                }
            }
        }

        static void JoinAsSpectator(WsClient wsClient)
        {
            lock (Lock)
            {
                if (!string.IsNullOrEmpty(wsClient.RoomId) && Rooms.ContainsKey(wsClient.RoomId))
                {
                    GameRoom room = Rooms[wsClient.RoomId];
                    room.Spectators.Add(wsClient);
                    SendWebSocketFrame(wsClient.Stream,
                        $"system|Spectating room {room.RoomId}");
                    SendWebSocketFrame(wsClient.Stream,
                        $"assign|spectator|{room.RoomId}");
                    SendGameStateTo(wsClient, room);
                }
                else
                {
                    SendWebSocketFrame(wsClient.Stream, "system|Room not found.");
                }
            }
        }

        static void HandleGameMessage(WsClient wsClient, string message)
        {
            // Message format: "move|cellIndex" (0-8)
            string[] parts = message.Split('|');

            if (parts[0] == "move" && parts.Length >= 2)
            {
                int cellIndex;
                if (!int.TryParse(parts[1], out cellIndex)) return;
                if (cellIndex < 0 || cellIndex > 8) return;

                lock (Lock)
                {
                    if (!Rooms.ContainsKey(wsClient.RoomId)) return;
                    GameRoom room = Rooms[wsClient.RoomId];

                    // Validate: game must be in progress
                    if (room.State != GameState.Playing) return;

                    // Validate: it must be this player's turn
                    if (room.CurrentTurn != wsClient.Symbol) return;

                    // Validate: cell must be empty
                    if (room.Board[cellIndex] != "") return;

                    // Make the move
                    room.Board[cellIndex] = wsClient.Symbol;

                    // Check for win or draw
                    string winner = CheckWinner(room.Board);

                    if (winner != null)
                    {
                        room.State = GameState.Finished;
                        room.Winner = winner;
                    }
                    else if (IsBoardFull(room.Board))
                    {
                        room.State = GameState.Finished;
                        room.Winner = "draw";
                    }
                    else
                    {
                        // Switch turns
                        room.CurrentTurn = room.CurrentTurn == "X" ? "O" : "X";
                    }

                    // Broadcast updated state to all connected clients in this room
                    BroadcastGameState(room);
                }
            }
            else if (parts[0] == "rematch")
            {
                lock (Lock)
                {
                    if (!Rooms.ContainsKey(wsClient.RoomId)) return;
                    GameRoom room = Rooms[wsClient.RoomId];

                    if (room.State != GameState.Finished) return;

                    // Reset the board
                    room.Board = new string[9];
                    for (int i = 0; i < 9; i++) room.Board[i] = "";
                    room.CurrentTurn = "X";
                    room.State = GameState.Playing;
                    room.Winner = null;

                    BroadcastGameState(room);

                    string msg = "system|New game started!";
                    if (room.PlayerX != null) SendSafe(room.PlayerX, msg);
                    if (room.PlayerO != null) SendSafe(room.PlayerO, msg);
                    foreach (var s in room.Spectators) SendSafe(s, msg);
                }
            }
            else if (parts[0] == "chat" && parts.Length >= 2)
            {
                lock (Lock)
                {
                    if (!Rooms.ContainsKey(wsClient.RoomId)) return;
                    GameRoom room = Rooms[wsClient.RoomId];

                    string chatMsg = $"chat|{wsClient.Name}|{parts[1]}";
                    if (room.PlayerX != null) SendSafe(room.PlayerX, chatMsg);
                    if (room.PlayerO != null) SendSafe(room.PlayerO, chatMsg);
                    foreach (var s in room.Spectators) SendSafe(s, chatMsg);
                }
            }
        }

        static void HandleDisconnect(WsClient wsClient)
        {
            lock (Lock)
            {
                if (!Rooms.ContainsKey(wsClient.RoomId)) return;
                GameRoom room = Rooms[wsClient.RoomId];

                if (wsClient.Role == "spectator")
                {
                    room.Spectators.Remove(wsClient);
                    return;
                }

                // A player disconnected
                string msg = $"system|{wsClient.Name} disconnected.";

                if (room.PlayerX == wsClient) room.PlayerX = null;
                if (room.PlayerO == wsClient) room.PlayerO = null;

                // If game was in progress, the other player wins by forfeit
                if (room.State == GameState.Playing)
                {
                    room.State = GameState.Finished;
                    room.Winner = wsClient.Symbol == "X" ? "O" : "X";
                    msg = $"system|{wsClient.Name} disconnected. {room.Winner} wins by forfeit!";
                }

                // Notify remaining player
                if (room.PlayerX != null) SendSafe(room.PlayerX, msg);
                if (room.PlayerO != null) SendSafe(room.PlayerO, msg);
                foreach (var s in room.Spectators) SendSafe(s, msg);

                if (room.State == GameState.Finished)
                {
                    BroadcastGameState(room);
                }

                // Clean up empty rooms
                if (room.PlayerX == null && room.PlayerO == null && room.Spectators.Count == 0)
                {
                    Rooms.Remove(room.RoomId);
                    Console.WriteLine($"  Room {room.RoomId} removed (empty)");
                }
            }
        }

        // ============================================================
        // Win Detection
        // ============================================================

        static int[][] WinLines = new int[][]
        {
        new[] {0, 1, 2}, // top row
        new[] {3, 4, 5}, // middle row
        new[] {6, 7, 8}, // bottom row
        new[] {0, 3, 6}, // left column
        new[] {1, 4, 7}, // middle column
        new[] {2, 5, 8}, // right column
        new[] {0, 4, 8}, // diagonal top-left to bottom-right
        new[] {2, 4, 6}  // diagonal top-right to bottom-left
        };

        static string CheckWinner(string[] board)
        {
            foreach (var line in WinLines)
            {
                string a = board[line[0]];
                string b = board[line[1]];
                string c = board[line[2]];

                if (a != "" && a == b && b == c)
                {
                    return a; // "X" or "O"
                }
            }
            return null;
        }

        static bool IsBoardFull(string[] board)
        {
            for (int i = 0; i < 9; i++)
            {
                if (board[i] == "") return false;
            }
            return true;
        }

        // ============================================================
        // State Broadcasting
        // ============================================================

        static void BroadcastGameState(GameRoom room)
        {
            // Format: "state|board|currentTurn|gameState|winner|playerXName|playerOName"
            // board = comma-separated 9 cells (empty string for blank)

            string boardStr = string.Join(",", room.Board);
            string xName = room.PlayerX != null ? room.PlayerX.Name : "";
            string oName = room.PlayerO != null ? room.PlayerO.Name : "";
            string stateMsg = $"state|{boardStr}|{room.CurrentTurn}|{room.State}|{room.Winner ?? ""}|{xName}|{oName}";

            if (room.PlayerX != null) SendSafe(room.PlayerX, stateMsg);
            if (room.PlayerO != null) SendSafe(room.PlayerO, stateMsg);
            foreach (var s in room.Spectators) SendSafe(s, stateMsg);
        }

        static void SendGameStateTo(WsClient wsClient, GameRoom room)
        {
            string boardStr = string.Join(",", room.Board);
            string xName = room.PlayerX != null ? room.PlayerX.Name : "";
            string oName = room.PlayerO != null ? room.PlayerO.Name : "";
            string stateMsg = $"state|{boardStr}|{room.CurrentTurn}|{room.State}|{room.Winner ?? ""}|{xName}|{oName}";

            SendSafe(wsClient, stateMsg);
        }

        static void SendSafe(WsClient wsClient, string message)
        {
            try
            {
                SendWebSocketFrame(wsClient.Stream, message);
            }
            catch { }
        }

        // ============================================================
        // Layer 2: Pages
        // ============================================================

        // --- Lobby Page ---
        static string PageLobby(HttpRequest request)
        {
            // Build room list
            StringBuilder roomList = new StringBuilder();

            lock (Lock)
            {
                if (Rooms.Count == 0)
                {
                    roomList.Append("<p class='no-rooms'>No active rooms. Create one by joining!</p>");
                }
                else
                {
                    foreach (var room in Rooms.Values)
                    {
                        string status;
                        string statusClass;

                        if (room.State == GameState.WaitingForPlayer)
                        {
                            status = "Waiting for opponent";
                            statusClass = "waiting";
                        }
                        else if (room.State == GameState.Playing)
                        {
                            status = "In progress";
                            statusClass = "playing";
                        }
                        else
                        {
                            status = "Finished";
                            statusClass = "finished";
                        }

                        string xName = room.PlayerX != null ? HtmlEncode(room.PlayerX.Name) : "—";
                        string oName = room.PlayerO != null ? HtmlEncode(room.PlayerO.Name) : "—";

                        roomList.Append($@"
                        <div class='room-card'>
                            <div class='room-header'>
                                <span class='room-name'>{HtmlEncode(room.RoomId)}</span>
                                <span class='room-status {statusClass}'>{status}</span>
                            </div>
                            <div class='room-players'>
                                <span>X: {xName}</span>
                                <span>O: {oName}</span>
                                <span>Spectators: {room.Spectators.Count}</span>
                            </div>
                            <div class='room-actions'>
                                <a href='/game?room={HtmlEncode(room.RoomId)}' class='btn btn-join'>Join</a>
                                <a href='/spectate?room={HtmlEncode(room.RoomId)}' class='btn btn-spectate'>Spectate</a>
                            </div>
                        </div>");
                    }
                }
            }

            string htmlPage = @"<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<title>Tic-Tac-Toe Lobby</title>
<style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
        font-family: 'Segoe UI', Arial, sans-serif;
        background: #1a1a2e;
        color: #e2e8f0;
        min-height: 100vh;
        padding: 40px 20px;
    }
    .container {
        max-width: 600px;
        margin: 0 auto;
    }
    h1 {
        text-align: center;
        font-size: 36px;
        margin-bottom: 8px;
        color: #fff;
    }
    .subtitle {
        text-align: center;
        color: #a8b2d1;
        margin-bottom: 40px;
    }
    .join-box {
        background: #16213e;
        border-radius: 16px;
        padding: 30px;
        margin-bottom: 30px;
    }
    .join-box h2 {
        margin-bottom: 20px;
        color: #e94560;
    }
    .form-row {
        margin-bottom: 15px;
    }
    .form-row label {
        display: block;
        margin-bottom: 6px;
        color: #a8b2d1;
        font-size: 14px;
    }
    .form-row input {
        width: 100%;
        padding: 12px;
        font-size: 16px;
        border: 2px solid #0f3460;
        border-radius: 8px;
        background: #1a1a2e;
        color: #e2e8f0;
    }
    .form-row input:focus {
        outline: none;
        border-color: #e94560;
    }
    .btn {
        display: inline-block;
        padding: 12px 24px;
        font-size: 16px;
        font-weight: bold;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        text-decoration: none;
        text-align: center;
    }
    .btn-play {
        background: #e94560;
        color: #fff;
        width: 100%;
        font-size: 18px;
        padding: 16px;
    }
    .btn-play:hover { background: #c13350; }
    .btn-join {
        background: #48bb78;
        color: #fff;
        font-size: 14px;
        padding: 8px 16px;
    }
    .btn-join:hover { background: #38a169; }
    .btn-spectate {
        background: #4a90d9;
        color: #fff;
        font-size: 14px;
        padding: 8px 16px;
    }
    .btn-spectate:hover { background: #357abd; }
    .rooms-section { margin-top: 10px; }
    .rooms-section h2 { color: #a8b2d1; margin-bottom: 15px; }
    .room-card {
        background: #16213e;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 12px;
        border-left: 4px solid #0f3460;
    }
    .room-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }
    .room-name { font-weight: bold; font-size: 18px; }
    .room-status {
        font-size: 13px;
        padding: 4px 10px;
        border-radius: 12px;
    }
    .room-status.waiting { background: #f6e05e; color: #744210; }
    .room-status.playing { background: #48bb78; color: #22543d; }
    .room-status.finished { background: #a0aec0; color: #2d3748; }
    .room-players {
        display: flex;
        gap: 20px;
        font-size: 14px;
        color: #a8b2d1;
        margin-bottom: 12px;
    }
    .room-actions { display: flex; gap: 10px; }
    .no-rooms { color: #6c7a96; font-style: italic; }
</style>
</head>
<body>
<div class='container'>
    <h1>Tic-Tac-Toe</h1>
    <p class='subtitle'>WebSocket Multiplayer</p>

    <div class='join-box'>
        <h2>Play</h2>
        <div class='form-row'>
            <label>Your Name</label>
            <input type='text' id='playerName' placeholder='Enter your name' value='' />
        </div>
        <div class='form-row'>
            <label>Room (leave blank to auto-match)</label>
            <input type='text' id='roomId' placeholder='e.g. room-1' value='' />
        </div>
        <br />
        <button class='btn btn-play' onclick='joinGame()'>Play</button>
    </div>

    <div class='rooms-section'>
        <h2>Active Rooms</h2>
        {{roomList}}
    </div>
</div>

<script>
    function joinGame() {
        var name = document.getElementById('playerName').value.trim();
        if (!name) { alert('Please enter your name.'); return; }
        var room = document.getElementById('roomId').value.trim();
        var url = '/game?name=' + encodeURIComponent(name);
        if (room) url += '&room=' + encodeURIComponent(room);
        window.location.href = url;
    }

    // Allow Enter key to join
    document.getElementById('playerName').addEventListener('keydown', function(e) {
        if (e.key === 'Enter') joinGame();
    });
    document.getElementById('roomId').addEventListener('keydown', function(e) {
        if (e.key === 'Enter') joinGame();
    });
</script>
</body>
</html>";

            htmlPage = htmlPage.Replace("{{roomList}}", roomList.ToString());

            return htmlPage;
        }

        // --- Game Page ---
        static string PageGame(HttpRequest request)
        {
            string playerName = request.GetQuery("name");
            string roomId = request.GetQuery("room");

            if (string.IsNullOrEmpty(playerName))
            {
                playerName = "Player";
            }

            playerName = EscapeJs(playerName);
            roomId = EscapeJs(roomId);

            string htmlPage = @"<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1' />
    <title>Tic-Tac-Toe</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Segoe UI', Arial, sans-serif;
            background: #1a1a2e;
            color: #e2e8f0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 30px 20px;
        }
        h1 { margin-bottom: 6px; color: #fff; }
        .info {
            color: #a8b2d1;
            margin-bottom: 20px;
            text-align: center;
            min-height: 24px;
        }
        .players {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-bottom: 20px;
            font-size: 18px;
        }
        .player {
            padding: 8px 20px;
            border-radius: 8px;
            background: #16213e;
        }
        .player.active {
            background: #0f3460;
            border: 2px solid #e94560;
        }
        .player .symbol { font-weight: bold; }
        .symbol-x { color: #e94560; }
        .symbol-o { color: #4a90d9; }
        .board {
            display: grid;
            grid-template-columns: repeat(3, 120px);
            grid-template-rows: repeat(3, 120px);
            gap: 6px;
            margin-bottom: 25px;
        }
        .cell {
            background: #16213e;
            border: 2px solid #0f3460;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s;
        }
        .cell:hover { background: #1e2d4d; border-color: #1a4a7a; }
        .cell.disabled { cursor: default; opacity: 0.7; }
        .cell.disabled:hover { background: #16213e; border-color: #0f3460; }
        .cell .x { color: #e94560; }
        .cell .o { color: #4a90d9; }
        .cell.win { border-color: #f6e05e; background: #2a2a1e; }
        .status {
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
            min-height: 30px;
        }
        .status.win { color: #48bb78; }
        .status.lose { color: #e94560; }
        .status.draw { color: #f6e05e; }
        .btn {
            padding: 12px 30px;
            font-size: 16px;
            font-weight: bold;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            color: #fff;
            margin: 5px;
        }
        .btn-rematch { background: #48bb78; }
        .btn-rematch:hover { background: #38a169; }
        .btn-lobby { background: #4a90d9; }
        .btn-lobby:hover { background: #357abd; }
        .btn-hidden { display: none; }
        .connection {
            position: fixed;
            bottom: 12px;
            right: 16px;
            font-size: 13px;
        }
        .connection.connected { color: #48bb78; }
        .connection.disconnected { color: #e94560; }
        .chat-section {
            width: 100%;
            max-width: 380px;
            margin-top: 20px;
        }
        .chat-box {
            background: #16213e;
            border-radius: 12px;
            padding: 15px;
            height: 150px;
            overflow-y: auto;
            margin-bottom: 10px;
            font-size: 14px;
        }
        .chat-box .msg { margin-bottom: 4px; }
        .chat-box .msg .name { color: #e94560; font-weight: bold; }
        .chat-box .msg .sys { color: #6c7a96; font-style: italic; }
        .chat-input-row { display: flex; gap: 8px; }
        .chat-input {
            flex: 1;
            padding: 10px;
            border: 2px solid #0f3460;
            border-radius: 8px;
            background: #1a1a2e;
            color: #e2e8f0;
            font-size: 14px;
        }
        .chat-input:focus { outline: none; border-color: #e94560; }
        .btn-send {
            padding: 10px 20px;
            background: #e94560;
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
        }
        .spectator-link {
            margin-top: 15px;
            font-size: 13px;
            color: #6c7a96;
        }
        .spectator-link a { color: #4a90d9; }
    </style>
</head>
<body>
    <h1>Tic-Tac-Toe</h1>
    <div id='info' class='info'>Connecting...</div>

    <div class='players'>
        <div id='playerX' class='player'>
            <span class='symbol symbol-x'>X</span> <span id='nameX'>—</span>
        </div>
        <div id='playerO' class='player'>
            <span class='symbol symbol-o'>O</span> <span id='nameO'>—</span>
        </div>
    </div>

    <div class='board' id='board'>
        <div class='cell' data-index='0' onclick='makeMove(0)'></div>
        <div class='cell' data-index='1' onclick='makeMove(1)'></div>
        <div class='cell' data-index='2' onclick='makeMove(2)'></div>
        <div class='cell' data-index='3' onclick='makeMove(3)'></div>
        <div class='cell' data-index='4' onclick='makeMove(4)'></div>
        <div class='cell' data-index='5' onclick='makeMove(5)'></div>
        <div class='cell' data-index='6' onclick='makeMove(6)'></div>
        <div class='cell' data-index='7' onclick='makeMove(7)'></div>
        <div class='cell' data-index='8' onclick='makeMove(8)'></div>
    </div>

    <div id='status' class='status'></div>

    <div id='buttons'>
        <button id='btnRematch' class='btn btn-rematch btn-hidden' onclick='requestRematch()'>Rematch</button>
        <a href='/' class='btn btn-lobby'>Lobby</a>
    </div>

    <div id='spectatorLink' class='spectator-link'></div>

    <div class='chat-section'>
        <div id='chatBox' class='chat-box'></div>
        <div class='chat-input-row'>
            <input type='text' id='chatInput' class='chat-input'
                   placeholder='Type a message...'
                   onkeydown=""if(event.key==='Enter')sendChat()"" />
            <button class='btn-send' onclick='sendChat()'>Send</button>
        </div>
    </div>

    <div id='connection' class='connection'>Connecting...</div>

    <script>
        var mySymbol = '';
        var myName = '{{playerName}}';
        var roomParam = '{{roomId}}';
        var ws;
        var gameState = 'waiting';

        function connect() {
            var wsUrl = 'ws://' + window.location.host + '/ws';
            wsUrl += '?name=' + encodeURIComponent(myName);
            wsUrl += '&role=player';
            if (roomParam) wsUrl += '&room=' + encodeURIComponent(roomParam);

            ws = new WebSocket(wsUrl);

            ws.onopen = function() {
                document.getElementById('connection').textContent = 'Connected';
                document.getElementById('connection').className = 'connection connected';
                document.getElementById('info').textContent = 'Waiting for opponent...';
            };

            ws.onmessage = function(event) {
                handleMessage(event.data);
            };

            ws.onclose = function() {
                document.getElementById('connection').textContent = 'Disconnected';
                document.getElementById('connection').className = 'connection disconnected';
            };

            ws.onerror = function() {
                document.getElementById('connection').textContent = 'Connection error';
                document.getElementById('connection').className = 'connection disconnected';
            };
        }

        function handleMessage(data) {
            var parts = data.split('|');
            var type = parts[0];

            if (type === 'assign') {
                mySymbol = parts[1];
                var roomId = parts[2];
                document.getElementById('info').textContent =
                    'You are ' + mySymbol + ' in ' + roomId;
                document.getElementById('spectatorLink').innerHTML =
                    'Spectate link: <a href=\""/spectate?room=' + encodeURIComponent(roomId) +
                    '\"" target=\""_blank\"">/spectate?room=' + roomId + '</a>';
            }
            else if (type === 'start') {
                document.getElementById('info').textContent = parts[1];
                gameState = 'playing';
            }
            else if (type === 'state') {
                // state|board|currentTurn|gameState|winner|xName|oName
                var board = parts[1].split(',');
                var currentTurn = parts[2];
                var state = parts[3];
                var winner = parts[4];
                var xName = parts[5];
                var oName = parts[6];

                // Update player names
                document.getElementById('nameX').textContent = xName || '—';
                document.getElementById('nameO').textContent = oName || '—';

                // Highlight active player
                document.getElementById('playerX').className =
                    'player' + (state === 'Playing' && currentTurn === 'X' ? ' active' : '');
                document.getElementById('playerO').className =
                    'player' + (state === 'Playing' && currentTurn === 'O' ? ' active' : '');

                // Update board cells
                var cells = document.querySelectorAll('.cell');
                var winLine = (winner && winner !== 'draw' && winner !== '')
                    ? getWinLine(board) : null;

                for (var i = 0; i < 9; i++) {
                    var cell = cells[i];
                    if (board[i] === 'X') {
                        cell.innerHTML = '<span class=\""x\"">X</span>';
                    } else if (board[i] === 'O') {
                        cell.innerHTML = '<span class=\""o\"">O</span>';
                    } else {
                        cell.innerHTML = '';
                    }

                    // Disable cells if game is over or not our turn
                    if (state === 'Finished' || currentTurn !== mySymbol || board[i] !== '') {
                        cell.classList.add('disabled');
                    } else {
                        cell.classList.remove('disabled');
                    }

                    // Highlight winning line
                    if (winLine && winLine.indexOf(i) !== -1) {
                        cell.classList.add('win');
                    } else {
                        cell.classList.remove('win');
                    }
                }

                // Update status
                var statusEl = document.getElementById('status');
                var rematchBtn = document.getElementById('btnRematch');

                if (state === 'Finished') {
                    gameState = 'finished';
                    rematchBtn.classList.remove('btn-hidden');

                    if (winner === 'draw') {
                        statusEl.textContent = ""It's a draw!"";
                        statusEl.className = 'status draw';
                    } else if (winner === mySymbol) {
                        statusEl.textContent = 'You win!';
                        statusEl.className = 'status win';
                    } else {
                        statusEl.textContent = winner + ' wins!';
                        statusEl.className = 'status lose';
                    }
                } else if (state === 'Playing') {
                    gameState = 'playing';
                    rematchBtn.classList.add('btn-hidden');

                    if (currentTurn === mySymbol) {
                        statusEl.textContent = 'Your turn (' + mySymbol + ')';
                        statusEl.className = 'status';
                    } else {
                        statusEl.textContent = 'Opponent\'s turn (' + currentTurn + ')';
                        statusEl.className = 'status';
                    }
                } else {
                    statusEl.textContent = 'Waiting...';
                    statusEl.className = 'status';
                }
            }
            else if (type === 'system') {
                addChatSystem(parts.slice(1).join('|'));
            }
            else if (type === 'chat') {
                addChatMessage(parts[1], parts.slice(2).join('|'));
            }
        }

        function makeMove(index) {
            if (gameState !== 'playing') return;
            if (!ws || ws.readyState !== WebSocket.OPEN) return;
            ws.send('move|' + index);
        }

        function requestRematch() {
            if (!ws || ws.readyState !== WebSocket.OPEN) return;
            ws.send('rematch');
        }

        function sendChat() {
            var input = document.getElementById('chatInput');
            var text = input.value.trim();
            if (!text) return;
            if (!ws || ws.readyState !== WebSocket.OPEN) return;
            ws.send('chat|' + text);
            input.value = '';
        }

        function addChatMessage(name, text) {
            var box = document.getElementById('chatBox');
            var div = document.createElement('div');
            div.className = 'msg';
            div.innerHTML = '<span class=\""name\"">' + escapeHtml(name) + ':</span> ' + escapeHtml(text);
            box.appendChild(div);
            box.scrollTop = box.scrollHeight;
        }

        function addChatSystem(text) {
            var box = document.getElementById('chatBox');
            var div = document.createElement('div');
            div.className = 'msg';
            div.innerHTML = '<span class=\""sys\"">' + escapeHtml(text) + '</span>';
            box.appendChild(div);
            box.scrollTop = box.scrollHeight;
        }

        function escapeHtml(str) {
            var div = document.createElement('div');
            div.textContent = str;
            return div.innerHTML;
        }

        // Find the 3 winning cells for highlight
        var winLines = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];
        function getWinLine(board) {
            for (var i = 0; i < winLines.length; i++) {
                var a = winLines[i][0], b = winLines[i][1], c = winLines[i][2];
                if (board[a] !== '' && board[a] === board[b] && board[b] === board[c]) {
                    return winLines[i];
                }
            }
            return null;
        }

        connect();
    </script>
</body>
</html>";

            htmlPage = htmlPage.Replace("{{playerName}}", playerName);
            htmlPage = htmlPage.Replace("{{roomId}}", roomId);

            return htmlPage;
        }

        // --- Spectate Page ---
        static string PageSpectate(HttpRequest request)
        {
            string roomId = request.GetQuery("room");

            string excaped_html_roomId = HtmlEncode(roomId);
            string escaped_js_roomId = EscapeJs(roomId);

            string htmlPage = @"";

            if (string.IsNullOrEmpty(roomId))
            {
                htmlPage = @"<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Spectate</title>
    <style>
        body { font-family: Arial, sans-serif; background: #1a1a2e; color: #e2e8f0;
               display: flex; align-items: center; justify-content: center; min-height: 100vh; }
        a { color: #4a90d9; }
    </style>
</head>
<body>
    <div style='text-align:center'>
        <h1>No room specified</h1>
        <p><a href='/'>Go to Lobby</a></p>
    </div>
</body>
</html>"";
        }

        return $@""<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1' />
    <title>Spectating {{excaped_html_roomId}}</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Segoe UI', Arial, sans-serif;
            background: #1a1a2e;
            color: #e2e8f0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 30px 20px;
        }
        h1 { margin-bottom: 6px; color: #fff; }
        .info { color: #a8b2d1; margin-bottom: 20px; }
        .badge {
            display: inline-block;
            padding: 4px 12px;
            background: #4a90d9;
            color: #fff;
            border-radius: 12px;
            font-size: 13px;
            margin-bottom: 20px;
        }
        .players {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-bottom: 20px;
            font-size: 18px;
        }
        .player {
            padding: 8px 20px;
            border-radius: 8px;
            background: #16213e;
        }
        .player.active {
            background: #0f3460;
            border: 2px solid #e94560;
        }
        .symbol-x { color: #e94560; font-weight: bold; }
        .symbol-o { color: #4a90d9; font-weight: bold; }
        .board {
            display: grid;
            grid-template-columns: repeat(3, 120px);
            grid-template-rows: repeat(3, 120px);
            gap: 6px;
            margin-bottom: 25px;
        }
        .cell {
            background: #16213e;
            border: 2px solid #0f3460;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            font-weight: bold;
        }
        .cell .x { color: #e94560; }
        .cell .o { color: #4a90d9; }
        .cell.win { border-color: #f6e05e; background: #2a2a1e; }
        .status {
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        .status.win { color: #48bb78; }
        .status.draw { color: #f6e05e; }
        .btn-lobby {
            padding: 12px 30px;
            font-size: 16px;
            font-weight: bold;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            color: #fff;
            background: #4a90d9;
            text-decoration: none;
        }
        .connection {
            position: fixed;
            bottom: 12px;
            right: 16px;
            font-size: 13px;
        }
        .connection.connected { color: #48bb78; }
        .connection.disconnected { color: #e94560; }
    </style>
</head>
<body>
    <h1>Tic-Tac-Toe</h1>
    <span class='badge'>Spectating</span>
    <div class='info'>{{excaped_html_roomId}}</div>

    <div class='players'>
        <div id='playerX' class='player'>
            <span class='symbol-x'>X</span> <span id='nameX'>—</span>
        </div>
        <div id='playerO' class='player'>
            <span class='symbol-o'>O</span> <span id='nameO'>—</span>
        </div>
    </div>

    <div class='board' id='board'>
        <div class='cell' data-index='0'></div>
        <div class='cell' data-index='1'></div>
        <div class='cell' data-index='2'></div>
        <div class='cell' data-index='3'></div>
        <div class='cell' data-index='4'></div>
        <div class='cell' data-index='5'></div>
        <div class='cell' data-index='6'></div>
        <div class='cell' data-index='7'></div>
        <div class='cell' data-index='8'></div>
    </div>

    <div id='status' class='status'></div>

    <a href='/' class='btn-lobby'>Lobby</a>

    <div id='connection' class='connection'>Connecting...</div>

    <script>
        var roomId = '{{escaped_js_roomId}}';
        var ws;

        function connect() {
            var wsUrl = 'ws://' + window.location.host + '/ws';
            wsUrl += '?name=Spectator&role=spectator&room=' + encodeURIComponent(roomId);

            ws = new WebSocket(wsUrl);

            ws.onopen = function() {
                document.getElementById('connection').textContent = 'Connected';
                document.getElementById('connection').className = 'connection connected';
            };

            ws.onmessage = function(event) {
                handleMessage(event.data);
            };

            ws.onclose = function() {
                document.getElementById('connection').textContent = 'Disconnected';
                document.getElementById('connection').className = 'connection disconnected';
            };
        }

        function handleMessage(data) {
            var parts = data.split('|');
            var type = parts[0];

            if (type === 'state') {
                var board = parts[1].split(',');
                var currentTurn = parts[2];
                var state = parts[3];
                var winner = parts[4];
                var xName = parts[5];
                var oName = parts[6];

                document.getElementById('nameX').textContent = xName || '—';
                document.getElementById('nameO').textContent = oName || '—';

                document.getElementById('playerX').className =
                    'player' + (state === 'Playing' && currentTurn === 'X' ? ' active' : '');
                document.getElementById('playerO').className =
                    'player' + (state === 'Playing' && currentTurn === 'O' ? ' active' : '');

                var cells = document.querySelectorAll('.cell');
                var winLine = (winner && winner !== 'draw' && winner !== '')
                    ? getWinLine(board) : null;

                for (var i = 0; i < 9; i++) {
                    if (board[i] === 'X') {
                        cells[i].innerHTML = '<span class=\""x\"">X</span>';
                    } else if (board[i] === 'O') {
                        cells[i].innerHTML = '<span class=\""o\"">O</span>';
                    } else {
                        cells[i].innerHTML = '';
                    }

                    if (winLine && winLine.indexOf(i) !== -1) {
                        cells[i].classList.add('win');
                    } else {
                        cells[i].classList.remove('win');
                    }
                }

                var statusEl = document.getElementById('status');
                if (state === 'Finished') {
                    if (winner === 'draw') {
                        statusEl.textContent = ""It's a draw!"";
                        statusEl.className = 'status draw';
                    } else {
                        statusEl.textContent = winner + ' wins!';
                        statusEl.className = 'status win';
                    }
                } else if (state === 'Playing') {
                    statusEl.textContent = currentTurn + ""'s turn"";
                    statusEl.className = 'status';
                } else {
                    statusEl.textContent = 'Waiting for players...';
                    statusEl.className = 'status';
                }
            }
        }

        var winLines = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];
        function getWinLine(board) {
            for (var i = 0; i < winLines.length; i++) {
                var a = winLines[i][0], b = winLines[i][1], c = winLines[i][2];
                if (board[a] !== '' && board[a] === board[b] && board[b] === board[c]) {
                    return winLines[i];
                }
            }
            return null;
        }

        connect();
    </script>
</body>
</html>";

                htmlPage = htmlPage.Replace("{{excaped_html_roomId}}", excaped_html_roomId);
                htmlPage = htmlPage.Replace("{{escaped_js_roomId}}", escaped_js_roomId);

            }

            return htmlPage;
        }

        // --- 404 Page ---
        static string PageNotFound()
        {
            return @"<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Not Found</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; padding: 60px;
               background: #1a1a2e; color: #e2e8f0; }
        h1 { color: #e94560; }
        a { color: #4a90d9; }
    </style>
</head>
<body>
    <h1>404 — Page Not Found</h1>
    <p><a href='/'>Go to Lobby</a></p>
</body>
</html>";
        }

        // ============================================================
        // HTTP Parser (same pattern as previous articles)
        // ============================================================

        static HttpRequest ParseHttpRequest(string headerSection, string body)
        {
            HttpRequest request = new HttpRequest();

            string[] lines = headerSection.Split(new[] { "\r\n" }, StringSplitOptions.None);
            string[] requestLine = lines[0].Split(' ');

            request.Method = requestLine[0].ToUpper();
            request.Path = requestLine.Length > 1 ? requestLine[1] : "/";

            for (int i = 1; i < lines.Length; i++)
            {
                int colon = lines[i].IndexOf(':');
                if (colon > 0)
                {
                    string key = lines[i].Substring(0, colon).Trim();
                    string value = lines[i].Substring(colon + 1).Trim();
                    request.Headers[key] = value;
                }
            }

            int qIndex = request.Path.IndexOf('?');
            if (qIndex >= 0)
            {
                string queryString = request.Path.Substring(qIndex + 1);
                request.Path = request.Path.Substring(0, qIndex);
                ParseFormData(queryString, request.Query);
            }

            if (request.Method == "POST" && body.Length > 0)
            {
                ParseFormData(body, request.Form);
            }

            request.Path = request.Path.ToLower().Trim().TrimEnd('/');
            if (request.Path == "") request.Path = "/";

            return request;
        }

        static void ParseFormData(string data, Dictionary<string, string> target)
        {
            string[] pairs = data.Split('&');
            foreach (string pair in pairs)
            {
                string[] kv = pair.Split(new[] { '=' }, 2);
                string key = HttpUtility.UrlDecode(kv[0]);
                string value = kv.Length > 1 ? HttpUtility.UrlDecode(kv[1]) : "";
                target[key] = value;
            }
        }

        // ============================================================
        // Utility
        // ============================================================

        static string HtmlEncode(string text)
        {
            if (string.IsNullOrEmpty(text)) return "";
            return text.Replace("&", "&amp;")
                       .Replace("<", "&lt;")
                       .Replace(">", "&gt;")
                       .Replace("\"", "&quot;")
                       .Replace("'", "&#39;");
        }

        static string EscapeJs(string text)
        {
            if (string.IsNullOrEmpty(text)) return "";
            return text.Replace("\\", "\\\\")
                       .Replace("'", "\\'")
                       .Replace("\"", "\\\"")
                       .Replace("\n", "\\n")
                       .Replace("\r", "\\r");
        }
    }

    // ============================================================
    // Models
    // ============================================================

    enum GameState
    {
        WaitingForPlayer,
        Playing,
        Finished
    }

    class GameRoom
    {
        public string RoomId { get; set; }
        public WsClient PlayerX { get; set; }
        public WsClient PlayerO { get; set; }
        public List<WsClient> Spectators { get; set; } = new List<WsClient>();
        public string[] Board { get; set; } = new string[] { "", "", "", "", "", "", "", "", "" };
        public string CurrentTurn { get; set; } = "X";
        public GameState State { get; set; } = GameState.WaitingForPlayer;
        public string Winner { get; set; }
    }

    class WsClient
    {
        public TcpClient Client { get; set; }
        public NetworkStream Stream { get; set; }
        public string Name { get; set; }
        public string RoomId { get; set; }
        public string Role { get; set; } // "player" or "spectator"
        public string Symbol { get; set; } // "X" or "O"
    }

    class HttpRequest
    {
        public string Method { get; set; } = "GET";
        public string Path { get; set; } = "/";

        public Dictionary<string, string> Headers { get; set; } =
            new Dictionary<string, string>(StringComparer.OrdinalIgnoreCase);

        public Dictionary<string, string> Query { get; set; } =
            new Dictionary<string, string>(StringComparer.OrdinalIgnoreCase);

        public Dictionary<string, string> Form { get; set; } =
            new Dictionary<string, string>(StringComparer.OrdinalIgnoreCase);

        public string GetHeader(string key)
        {
            return Headers.ContainsKey(key) ? Headers[key] : null;
        }

        public string GetForm(string key)
        {
            return Form.ContainsKey(key) ? Form[key] : "";
        }

        public int GetFormInt(string key)
        {
            string val = GetForm(key);
            int result;
            int.TryParse(val, out result);
            return result;
        }

        public string GetQuery(string key)
        {
            return Query.ContainsKey(key) ? Query[key] : "";
        }
    }
}