<%- include('./components/wrapper') %>

        <main id="content" class="flex-1">
          <div class="py-6">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
              <!-- Content -->
              <script>
                let session = 0;
                let afkTime = 0;
                
                function connect() {
                  const ws = new WebSocket(`${window.location.href.startsWith("https://") ? "wss" : "ws"}://${window.location.href.replace("http://", "").replace("https://", "").split("/")[0]}/afkwspath`);
                  ws.onopen = () => {
                    console.log("[WS] Connected to websocket.");
                    document.getElementById("coinCountdown").innerHTML = "Connected to websocket.";
                  };
                  ws.onmessage = (msg) => {
                    let z = JSON.parse(msg.data);
                    if (z.type == "count") {
                      document.getElementById("coinCountdown").innerHTML = `${z.amount} seconds`;
                      afkTime++;
                      const hours = Math.floor(afkTime / 3600);
                      const minutes = Math.floor((afkTime % 3600) / 60);
                      const seconds = afkTime % 60;
                      document.getElementById("afkTime").innerHTML = `${hours} hours, ${minutes} minutes, and ${seconds} seconds`;
                    } else if (z.type == "coin") {
                      session++;
                      currentCoins++;
                      document.getElementById("sessionEarn").innerHTML = `${session} coins`;
                      document.getElementById("currentCoins").innerHTML = `${parseInt("<%= coins %>") + session} coins`;
                    }
                  };
                  ws.onerror = (err) => {
                    console.log("[WS] Error connecting to websocket.");
                    console.log(err);
                    document.getElementById("coinCountdown").innerHTML = "Reconnecting...";
                    document.getElementById("sessionEarn").innerHTML = `Reconnecting...`;
                    document.getElementById("currentCoins").innerHTML = `Reconnecting...`;
                    setTimeout(() => {
                      connect();
                    }, 750);
                  };
                  ws.onclose = () => {
                    document.getElementById("coinCountdown").innerHTML = "Reconnecting...";
                    document.getElementById("sessionEarn").innerHTML = `Reconnecting...`;
                    document.getElementById("currentCoins").innerHTML = `Reconnecting...`;
                    setTimeout(() => {
                      connect();
                    }, 750);
                  };
                }
                connect();
              </script>
              <p class="text-white">You are currently earning coins using the AFK page!</p>
              <p class="text-gray-400">
                You will earn a coin in
                <code class="text-white" id="coinCountdown">Connecting to websocket...</code>
              </p>
              <p class="text-gray-400">
                This earning session you have earned
                <code class="text-white" id="sessionEarn">0 coins</code>
              </p>
              <p class="text-gray-400">
                Your current balance
                <code class="text-white" id="currentCoins"><%= coins %> coins</code>
              </p>
              <p class="text-gray-400">
                You have been AFK for
                <code class="text-white" id="afkTime">0 hours, 0 minutes, and 0 seconds</code>
              </p>
            </div>
          </div>
        </main>
      </div>
    </div>

<%- include('./components/footer') %>