<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JustStudy CE</title>
    <link rel="icon" type="image/x-icon" href="/assets/img/favicon.ico">
    <link href="assets/css/Comfortaa-Bold.ttf" rel="stylesheet">
    <style>
        :root {
            --background: #36393f;
            --sidebar: #2f3136;
            --chat-bg: #36393f;
            --secondary-bg: #2c2f33;
            --text-color: #dcddde;
            --accent-color: #7289da;
            --border-color: #202225;
            --input-bg: #202225;
        }

        body {
            margin: 0;
            font-family: "Helvetica", sans-serif;
            color: var(--text-color);
            background-color: var(--background);
            overflow: hidden;
        }

        .maincontent {
            display: flex;
            flex-direction: row;
            height: 100vh;
        }

        .leftsidecontent {
            width: 4vw;
            background-color: var(--sidebar);
            display: flex;
            flex-direction: column;
            align-items: center; 
            padding-top: 1vw;
            box-sizing: border-box;
            overflow-y: scroll;
            scrollbar-width: none;
            overflow-x:hidden;
        }
        .rightsidecontent{
            width: 11vw;
            background-color: var(--sidebar);
            display: flex;
            flex-direction: column;
            align-items: center; 
            padding-top: 1vw;
            box-sizing: border-box;
            overflow-y: scroll;
            scrollbar-width: none;
            overflow-x:hidden;
        }
        .chatcontent {
            flex: 1;
            display: flex;
            flex-direction: column;
            background-color: var(--chat-bg);
            position: relative;
            scrollbar-width: none;
        }

        .content {
            overflow-y: auto;
            overflow-x: hidden;
            flex: 1;
            scrollbar-width: none;
            padding: 1vw;
            box-sizing: border-box;
        }

        .bottombar {
            display: flex;
            background-color: var(--secondary-bg);
            padding: 0.5vw;
        }

        .textinput {
            flex: 1 1 auto;
            height: 2vw;
            font-size: 1vw;
            background-color: var(--input-bg);
            border: none;
            color: var(--text-color);
            padding: 0.3vw 0.5vw;
            outline: none;
            border-radius: 0.2vw;
        }

        .leftsidecontent-inputfield {
            background-color: var(--input-bg);
            border: none;
            padding: 0.4vw;
            margin: 0.4vw;
            width: 13vw;
            color: var(--text-color);
            outline: none;
            border-radius: 0.2vw;
        }

        .content-bt {
            background-color: var(--accent-color);
            border: none;
            padding: 0.6vw;
            margin: 0.4vw;
            width: 14vw;
            color: #fff;
            cursor: pointer;
            border-radius: 0.2vw;
            font-size: 1vw;
        }

        .content-bt:hover {
            opacity: 0.9;
        }

        .white-text {
            font-size: 1vw;
            margin-left: 1.5vw;
            padding: 0.4vw;
            color: var(--text-color);
        }

        .textbox {
            background-color: var(--secondary-bg);
            padding: 0.7vw;
            border-radius: 0.4vw;
            margin: 0.4vw;
            max-width: 83vw;
            width: auto;
            font-size: 1vw;
            word-break: break-all;
        }

        .textbox-name {
            font-size: 0.9vw;
            margin-left: 0.4vw;
            padding: 0.4vw;
            color: var(--accent-color);
        }
        .bg {
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: -1;
            background-color: var(--background);
        }
        .leftsidecontent-icon-container {
            width: 3vw;
            height: 3vw;
            justify-content: center;
            align-items: center;
            margin-bottom: 1vw;
        }
        .server-icon-container {
            width: 3vw;
            height: 3vw;
            justify-content: center;
            align-items: center;
            margin-bottom: 1vw;
            backdrop-filter: blur(1.6vw);
            -webkit-backdrop-filter: blur(1vw);
            background-color: rgba(116, 116, 116, 0.2);
            border-radius: 2vw;
            transition: all 0.3s ease;
        }
        .server-icon-container:hover {
            border-radius: 0.5vw;
            background-color: rgba(125, 255, 166, 0.581);
        }
        .leftsidecontent-icon {
            transition: all 0.4s ease; 
            border-radius: 2vw;
            border: #7289da00 0.15vw solid;
        }
        .leftsidecontent-icon:hover {
            border: #ffc400 0.15vw solid;
            border-radius: 0.5vw;
        }
        .popup {
            display: none;
            position: fixed;
            background: rgb(27, 27, 27);
            border: 0.01vw solid rgb(107, 107, 107);
            border-radius: 0.5vw;
            padding: 0.5vw;
            color: white;
            font-size: 0.7vw;
            transform: translateY(20%);
            transition: all 0.2s ease;
            pointer-events: none;
            box-shadow: 0.1vw 0.1vw 0.2vw rgba(0, 0, 0, 0.5);
        }
        .userinfo-container{
            height: 3vw;
            width: 10vw;
            display: flex; 
            align-items: center; 
            justify-content: space-between;
        }
        .usericon-container{
            width: 3vw;
            height: 3vw;
            margin-bottom: 2vw;
            margin-top: 2vw;
            border-radius: 2vw;
            overflow: hidden;
            justify-content: center;
            align-items: center;
            display: flex;
            border: var(--accent-color) 0.15vw solid;
        }
        .usericon{
            border-radius: 2vw;
        }
        .AddServerPopup{
            width: 20vw;
            height: 15vw;
            background-color: var(--sidebar);
            border-radius: 1vw;
            position:fixed;
            left: 50%;
            top: 50%;
            display: none;
            flex-direction: column;
            align-items: center; 
            transform: translate(-50%,-50%);
            transition: all 0.1s ease;
            opacity: 0;
            font-family: comfortaa , sans-serif;
        }
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: black;
            opacity: 0;
            display: none;
        }
        .ShowOverlayAnim{
            animation: ShowOverlay ease-in 0.2s forwards;
        }
        .HideOverlayAnim{
            animation: HideOverlay ease-out 0.2s forwards;
        }
        @keyframes ShowOverlay {
            0% {
                opacity: 0;
                display: none;
            }
            100% {
                display: block;
                opacity: 0.5;
            }
        }
        @keyframes HideOverlay {
            0% {
                opacity: 0.5;
                display: block;
            }
            100% {
                opacity: 0;
                display: none;
            }
        } 
        .smoothshow{
            animation: AddServerPopupShow ease-in 0.2s forwards;
        }
        .smoothhide{
            animation: AddServerPopupHide ease-out 0.2s forwards;
        }
        @keyframes AddServerPopupShow {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes AddServerPopupHide {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        } 
        .popuptext{
            font-size: 2vw;
            color:white;
        }
        .popupinput{
            flex: 0 1 auto;
            height: 2vw;
            font-size: 1vw;
            background-color: var(--input-bg);
            border: none;
            color: var(--text-color);
            padding: 0.3vw 0.5vw;
            outline: none;
            border-radius: 0.2vw;
            margin-top: 0.4vw;
            margin-bottom: 0.4vw;
        }
    </style>
</head>
<body>
    <div class="maincontent" id="maincontent">
        
    </div>
    <div class="overlay"></div>
    <div class="AddServerPopup" id="AddServerPopup"> 
        <span class="popuptext" style="margin-bottom: 0.4vw; margin-top: 0.8vw; font-weight: bold;">Join a group</span>
        <span class="popuptext" style="margin-bottom: 1vw; margin-left: 0.5vw; margin-right: 0.5vw;font-weight:100; font-size: 1vw; text-align: center;">
            Input a server id and then you can chat with your buddys
        </span>
        <input class="popupinput" placeholder="Enter URL here"></input>
        <button class="content-bt" onclick="joinServer('gk1ksG153kA1')">Join</button>
    </div>
    <div class="bg"></div>
    <script>
        function InitLogin(){
            
        }
        function InitChat(){
            const maincontainer = document.getElementById("maincontent");
            maincontainer.innerHTML = `
            <div class="leftsidecontent" id="leftsidecontent">
                <div class="server-icon-container" id="AddGroup">
                    <img src="/assets/img/roundAddIcon.png" class="leftsidecontent-icon" style="width: 95%; height: 95%;">
                </div>
            </div>
            <div class="chatcontent">
                <div id="content" class="content"></div>
                <div class="bottombar">
                    <input class="textinput" placeholder="Enter URL here"></input>
                </div>
            </div>
            <div class="rightsidecontent" id="rightsidecontent"></div>
            `;
        }
        InitChat();
        function handleOverlayAnimationEnd() {
            const overlay = document.querySelector(".overlay");
            overlay.style.display = "none";
            console.log("true")
            overlay.removeEventListener("animationend", handleOverlayAnimationEnd);
        }
        function addServerPopup(){
            const popup = document.getElementById("AddServerPopup");
            const overlay = document.querySelector(".overlay");
            popup.style.display = "flex";
            popup.classList.remove("smoothhide");
            popup.classList.add("smoothshow");
            overlay.style.display = "block";
            overlay.classList.remove("HideOverlayAnim");
            overlay.classList.add("ShowOverlayAnim");
            popup.querySelectorAll("input").forEach((key) =>{
                key.disabled = false;
            })
        }
        function joinServer(id){
            const popup = document.getElementById("AddServerPopup");
            const overlay = document.querySelector(".overlay");
            popup.classList.remove("smoothshow");
            popup.classList.add("smoothhide");
            overlay.classList.remove("ShowOverlayAnim");
            overlay.classList.add("HideOverlayAnim");
            overlay.addEventListener("animationend", handleOverlayAnimationEnd);
            popup.querySelectorAll("input").forEach((key) =>{
                key.disabled = true;
            })
        }
        function initServerContent(){
            const popup = document.createElement("div");
            popup.classList.add("popup");
            popup.textContent = "Add Group";
            document.body.appendChild(popup);

            const container = document.getElementById("AddGroup");
            container.addEventListener("mouseover", () => {
                const rect = container.getBoundingClientRect();
                popup.style.display = "block";
                const viewportWidth = window.innerWidth;
                const leftInVW = (rect.left + window.scrollX) / viewportWidth * 100;
                popup.style.left = `${leftInVW + 4}vw`; 
                popup.style.top = `${rect.top + window.scrollY}px`;
            });
            container.addEventListener("click",() => {
                addServerPopup();
            });
            container.addEventListener("mouseout", () => {
                popup.style.display = "none";
            });
        }
        initServerContent();

        function makebox(text, name, isself, iconurl) {
            const container = document.createElement("div");
            container.style.display = "flex";
            container.style.flexDirection = "column";
            container.style.alignItems = isself ? "flex-end" : "flex-start"; 

            const textdiv = document.createElement("span");
            textdiv.classList.add("textbox-name");
            textdiv.innerText = name;

            const box = document.createElement("div");
            box.classList.add("textbox");
            box.innerText = text;
            box.style.width = "auto";
            box.style.textAlign = "left";

            const userinfocontainer = document.createElement("div");
            userinfocontainer.classList.add("userinfo-container");

            const iconcontainer = document.createElement("div");
            iconcontainer.classList.add("usericon-container");

            const icon = document.createElement("img");
            icon.src = iconurl;
            icon.style.width = "90%";
            icon.style.height = "90%";
            icon.classList.add("usericon-icon");
            iconcontainer.appendChild(icon);

            if (isself){
                userinfocontainer.appendChild(iconcontainer);
                userinfocontainer.appendChild(textdiv);
            } else {
                userinfocontainer.appendChild(textdiv);
                userinfocontainer.appendChild(iconcontainer);
            }

            container.appendChild(userinfocontainer);
            container.appendChild(box);
            document.getElementById("content").appendChild(container);
            document.getElementById("content").scrollTop = document.getElementById("content").scrollHeight;
        }

        function makeServer(name, iconurl, id) {
            const container = document.createElement("div");
            container.classList.add("leftsidecontent-icon-container");

            const icon = document.createElement("img");
            icon.src = iconurl;
            icon.style.width = "90%";
            icon.style.height = "90%";
            icon.classList.add("leftsidecontent-icon");
            container.appendChild(icon);
            document.getElementById("leftsidecontent").insertBefore(container, document.getElementById("AddGroup"));

            const popup = document.createElement("div");
            popup.classList.add("popup");
            popup.textContent = name;
            document.body.appendChild(popup);

            container.addEventListener("mouseover", () => {
                const rect = container.getBoundingClientRect();
                popup.style.display = "block";
                const viewportWidth = window.innerWidth;
                const leftInVW = (rect.left + window.scrollX) / viewportWidth * 100;
                popup.style.left = `${leftInVW + 4}vw`; 
                popup.style.top = `${rect.top + window.scrollY}px`;
            });

            container.addEventListener("mouseout", () => {
                popup.style.display = "none";
            });
        }

        function makeRightSideUser(name, iconurl) {
            const container = document.createElement("div");
            container.style.display = "flex";
            container.style.flexDirection = "row";
            container.style.alignItems = "center";
            container.style.marginTop = "0.5vw";
            container.style.marginLeft = "0.5vw";
            container.style.marginBottom = "0.5vw";
            container.style.height = "3.5vw";
            container.style.width = "95%";

            const iconcontainer = document.createElement("div");
            iconcontainer.classList.add("usericon-container");
            iconcontainer.style.display = "flex";
            iconcontainer.style.alignItems = "center";
            iconcontainer.style.justifyContent = "center";
            iconcontainer.style.width = "2.5vw";
            iconcontainer.style.height = "2.5vw";
            iconcontainer.style.marginRight = "1vw";

            const icon = document.createElement("img");
            icon.src = iconurl;
            icon.style.width = "90%";
            icon.style.height = "90%";
            icon.style.objectFit = "cover";

            iconcontainer.appendChild(icon);
            container.appendChild(iconcontainer);

            const nameDiv = document.createElement("div");
            nameDiv.style.fontSize = "1vw";
            nameDiv.innerText = name;

            container.appendChild(nameDiv);

            document.getElementById("rightsidecontent").appendChild(container);
        }


        makeServer("JustStudy CE", "/assets/img/favicon.ico");
        makeServer("Sarah Day", "https://media.discordapp.net/attachments/1217413923893022741/1329070703034503248/ALV-UjWgKNWx2uwqndYbO-nnfgacSXHMsanDU-emLQwI4A9LrUf-vOQs272-p-k-rw-no.png?ex=6789010c&is=6787af8c&hm=84206b10920e5b84f033cd87bce911389f88d5ebbff59626fef16226b187feb9&=&quality=lossless");
        makeServer("JustStudy Test Server", "/assets/img/favicon.ico");

        makeRightSideUser("John Doe", "/assets/img/user.svg");
        makeRightSideUser("Jane Smith", "/assets/img/user.svg");

        const socket = new WebSocket("ws://localhost:9001");
        let uuid;

        function uuidv4() {
            const a = crypto.getRandomValues(new Uint16Array(8));
            let i = 0;
            return '00-0-4-1-000'.replace(/[^-]/g, 
                s => (a[i++] + s * 0x10000 >> s).toString(16).padStart(4, '0')
            );
        }

        socket.addEventListener("open", () => {
            console.log("Connected to WebSocket server");
            const textinput = document.querySelector(".textinput");

            textinput.addEventListener("keydown", (e) => {
                if (e.key === "Enter" && textinput.value !== "") {
                    const date = new Date();
                    makebox(
                        textinput.value,
                        "You " + date.getHours() + ":" + String(date.getMinutes()).padStart(2, "0"),
                        true,
                        "/assets/img/user.svg"
                    );
                    document.getElementById("content").scrollTop = document.getElementById("content").scrollHeight;
                    
                    const message = textinput.value;
                    textinput.value = "";
                    uuid = uuidv4();
                    const jsonpayload = {
                        uuid: uuid,
                        message: message,
                        name: "test",
                        time: date.getHours() + ":" + String(date.getMinutes()).padStart(2, "0")
                    };
                    socket.send(JSON.stringify(jsonpayload));
                }
            }); 
        });

        socket.addEventListener("message", (event) => {
            try {
                const data = JSON.parse(event.data);
                if (data && data.uuid !== uuid) {
                    makebox(
                        data.message,
                        data.name + " " + data.time,
                        false,
                        "/assets/img/user.svg"
                    );
                }
            } catch (e) {
                console.log("message too long? error: " + e);
            }
        });

        socket.addEventListener("error", (error) => {
            console.error("WebSocket error:", error);
        });

        socket.addEventListener("close", () => {
            console.log("WebSocket connection closed");
        });
    </script>
</body>
</html>
