$(document).ready(function () {
  const current_path = window.location.pathname;

  function fetch_servers() {
    $.ajax({
      url: "/api/servers",
      type: "GET",
      success: function (data) {
        $("#serverList").empty();

        data.servers.forEach(function (server) {
          const card = `
                <div class="card server-card">
                  <div class="card-header">
                    <h3 class="card-title">${server.hostname} (${server.serverIP}:${server.serverPort})</h3>
                  </div>
                  <div class="card-body">
                    RCON Password: <input type="password" id="rconPassword" class="rcon-password-${server.id}" value="${server.rconPassword}" class="password-mask" disabled>
                    <button class="btn btn-sm btn-secondary toggle-password" server-id="${server.id}" class="hide-unhide-rcon">
                      <i class="fa fa-eye" server-id="${server.id}" id="toggleEyeIcon-${server.id}"></i>
                    </button>
                    <p class="status connected-status ${server.connected ? "connected" : "disconnected"}">
                      RCON Connected: ${server.connected ? "Yes" : "No"}
                    </p>
                    <p class="status authenticated-status ${server.authenticated ? "authenticated" : "not-authenticated"}">
                      RCON Authenticated: ${server.authenticated ? "Yes" : "No"}
                    </p>
                    ${!server.connected || !server.authenticated ? '<button class="btn btn-success" server-id="' + server.id + '" id="reconnect_server">Reconnect</button>' : ""}
                    <a href="/manage/${server.id}" class="btn btn-primary">Manage</a>
                    <button class="btn btn-danger" server-id='${server.id}' id="delete_server">Delete</button>
                  </div>
                </div>
              `;
          $("#serverList").append(card);
        });
        $(".toggle-password").click((event) => {
          let server_id = $(event.target).attr("server-id");
          toggle_password_visibility(server_id);
        });
        $("#reconnect_server").click(async (element) => {
          try {
            const server_id = $(element.target).attr("server-id");
            const response = await $.ajax({
              url: "/api/reconnect-server",
              type: "POST",
              data: JSON.stringify({ server_id: server_id }),
              headers: {
                "Content-Type": "application/json",
              },
            });
            if (response.status === 200) {
              fetch_servers();
            } else {
              console.error(
                "Server responded with a non-200 status code:",
                response.status,
              );
              alert("An error occurred while reconnecting to the server.");
            }
          } catch (error) {
            console.error(error);
            alert("An error occurred while reconnecting to the server.");
          }
        });
        $("#delete_server").click(async (element) => {
          const confirmed = confirm(
            "Are you sure you want to delete this server?",
          );
          if (confirmed) {
            window.server_id = $(element.target).attr("server-id");
            await send_post_request("/api/delete-server");
            fetch_servers();
          }
        });
      },
      error: function (error) {
        console.error(error);
        alert("An error occurred while fetching servers.");
      },
    });
  }
  if (current_path == "/servers") {
    fetch_servers();
  }

  function toggle_password_visibility(server_id) {
    const password_field = document.getElementsByClassName(
      "rcon-password-" + server_id,
    )[0];
    const eye_icon = document.getElementById(`toggleEyeIcon-${server_id}`);

    if (password_field.type === "password") {
      password_field.type = "text";
      eye_icon.classList.remove("fa-eye");
      eye_icon.classList.add("fa-eye-slash");
    } else {
      password_field.type = "password";
      eye_icon.classList.remove("fa-eye-slash");
      eye_icon.classList.add("fa-eye");
    }
  }

  async function send_post_request(apiEndpoint, data = {}) {
    try {
      data.server_id = window.server_id;
      const response = await fetch(apiEndpoint, {
        method: "POST",
        body: JSON.stringify(data),
        headers: {
          "Content-Type": "application/json",
        },
      });

      if (response.ok) {
        const data = await response.json();
        console.log(data.message);
        if (apiEndpoint == "/api/rcon") {
          if (data.message.includes("Response received")) {
            $("#rconResultBox").show();
            $("#rconResultText").text(
              data.message.split("Command sent! Response received:")[1],
            );
          } else {
            $("#rconResultBox").hide();
            alert(data.message);
          }
        } else {
          alert(data.message);
        }
      } else if (response.status == 401) {
        alert("Unauthorized, please reload and relogin.");
      } else {
        alert("Failed to perform the action");
      }
    } catch (error) {
      console.error("Error:", error);
      alert("An error occurred");
    }
  }

  $("#pause_game").on("click", function () {
    if (confirm("Are you sure you want to pause the game?")) {
      send_post_request("/api/pause");
    }
  });

  $("#unpause_game").on("click", function () {
    if (confirm("Are you sure you want to unpause the game?")) {
      send_post_request("/api/unpause");
    }
  });

  $("#restart_game").on("click", function () {
    if (confirm("Are you sure you want to restart the game?")) {
      send_post_request("/api/restart");
    }
  });

  $("#start_warmup").on("click", function () {
    if (confirm("Are you sure you want to start the warm-up?")) {
      send_post_request("/api/start-warmup");
    }
  });

  $("#swap_team").on("click", function () {
    if (confirm("Are you sure you want to swap teams?")) {
      send_post_request("/api/swap-team");
    }
  });

  $("#go_live").on("click", function () {
    if (confirm("Are you sure you want to go live?")) {
      send_post_request("/api/go-live");
    }
  });

  $("#rconInputBtn").on("click", function () {
    let data = {
      command: $("#rconInput").val(),
    };
    send_post_request("/api/rcon", data);
    $("#rconInput").val("");
  });

  $("#say_input_btn").on("click", function () {
    let data = {
      message: $("#say_input").val(),
    };
    send_post_request("/api/say-admin", data);
    $("#say_input").val("");
  });

  $("#list_backups").on("click", function () {
    send_post_request("/api/list-backups");
  });

  $("#restore_latest_backup").on("click", function () {
    if (confirm("Are you sure you want to restore the latest round backup?")) {
      send_post_request("/api/restore-latest-backup");
    }
  });

  $("#restore_backup").on("click", function () {
    const round_number = prompt("Enter round number to restore:");
    if (round_number !== null && round_number.trim() !== "") {
      const round_number_value = parseInt(round_number);
      if (!isNaN(round_number_value)) {
        send_post_request("/api/restore-round", {
          round_number: round_number_value,
        });
      } else {
        alert("Invalid round number. Please enter a valid number.");
      }
    } else {
      alert("Round number cannot be empty. Please enter a valid number.");
    }
  });
  $("#server_setup_form").on("submit", async function (event) {
    event.preventDefault();
    const data = {
      team1: $("#team1").val(),
      team2: $("#team2").val(),
      map: $("#map").val(),
      game: $("#game").val(),
      server_id: window.server_id,
    };
    send_post_request("/api/setup-game", data);
  });

  $("#game").on("change", function () {
    var map_list = [];
    var e = document.getElementById("game");
    if (e.value == "1" || e.value == "2" || e.value == "3" || e.value == "4") {
      // CASUAL OR COMPETITIVE
      // CS maps
      //map_list.push("cs_agency");
      map_list.push("cs_italy");
      map_list.push("cs_office");
      // DE maps (community)
      //map_list.push("de_basalt");
      map_list.push("de_edin"); // 3328169568
      map_list.push("de_grail"); // 3246527710
      //map_list.push("de_golden");
      //map_list.push("de_jura");
      //map_list.push("de_mills");
      //map_list.push("de_palacio");
      map_list.push("de_thera"); // 3121217565
      map_list.push("de_warden");
      // DE maps (valve)
      map_list.push("de_ancient");
      map_list.push("de_ancient_night");
      map_list.push("de_anubis");
      map_list.push("de_cache");
      map_list.push("de_dust2");
      map_list.push("de_inferno");
      map_list.push("de_mirage");
      map_list.push("de_nuke");
      map_list.push("de_overpass");
      map_list.push("de_train");
      map_list.push("de_vertigo");
      // WINGMAN maps
      map_list.push("de_assembly"); // 3071005299
      map_list.push("de_brewery"); // 2870304806
      map_list.push("de_dogtown"); // 3414036782
      //map_list.push("de_maginot"); // 3195399109
      map_list.push("de_memento"); // 3165559377
      map_list.push("de_mirage_bricks"); // 3464733042
      map_list.push("de_palais"); // 3257582863
      map_list.push("de_poseidon");
      map_list.push("de_rainfall"); // 3265650949
      map_list.push("de_rooftop"); // 3536622725
      map_list.push("de_sanctum");
      map_list.push("de_transit"); // 3542662073
      map_list.push("de_whistle"); // 3308613773
    } else if (e.value == "5") {
      // WINGMAN
      // DE maps (valve)
      map_list.push("de_inferno");
      map_list.push("de_nuke");
      map_list.push("de_overpass");
      map_list.push("de_vertigo");
      // Community maps
      map_list.push("de_assembly"); // 3071005299
      map_list.push("de_brewery"); // 2870304806
      map_list.push("de_dogtown"); // 3414036782
      //map_list.push("de_maginot"); // 3195399109
      map_list.push("de_memento"); // 3165559377
      map_list.push("de_mirage_bricks"); // 3464733042
      map_list.push("de_palais"); // 3257582863
      map_list.push("de_poseidon");
      map_list.push("de_rainfall"); // 3265650949
      map_list.push("de_rooftop"); // 3536622725
      map_list.push("de_sanctum");
      map_list.push("de_transit"); // 3542662073
      map_list.push("de_whistle"); // 3308613773
    } else if (e.value == "6") {
      // arms race
      map_list.push("ar_baggage");
      map_list.push("ar_pool_day");
      map_list.push("ar_shoots");
      map_list.push("ar_shoots_night");
    } else if (e.value == "7") {
      // other
      // WORKSHOP
      map_list.push("de_inferno_prophunt"); // 3608612434
      map_list.push("cs_office_prophunt"); // 3644811896
      map_list.push("de_mirage_prophunt"); // 3615968422
    }

    $("#map").empty();

    for (var i = 0; i < map_list.length; i++) {
      const opt =
        '<option value="' + map_list[i] + '">' + map_list[i] + "</option>";
      $("#map").append(opt);
    }
  });
});