{% extends "layout.html" %}
{% import "icons.html" as icons %}
{% import "card.html" as card %}

{% block content %}
  <div class="container mb-6">
    <div class="w-full mt-4 relative" style="height: 600px">
      <div class="size-full absolute" id="chart" hx-preserve="true"></div>
      <div
        id="empty-banner"
        style="display: none;"
        class="absolute z-10 size-full items-center justify-center"
      >
        <span class="text-2xl font-semibold">No historical data yet!</span>
      </div>
    </div>

    <div class="flex gap-6 mt-6 flex-col lg:flex-row">
      {% if divisions | length > 1 %}
        <div class="lg:max-w-96">
          {% call card.root() %}
            {% call card.header() %}
              {% call card.title() %}
                Division
              {% endcall %}
              {% call card.description() %}
                Select the division for the scoreboard
              {% endcall %}
            {% endcall %}
            {% call card.content() %}
              <div class="flex gap-2 flex-wrap">
                {% for division_id, division in divisions | items %}
                  <a
                    hx-boost="true"
                    hx-select="#screen"
                    hx-target="#screen"
                    hx-swap="outerHTML"
                    href="/scoreboard/{{ division_id }}"
                    class="relative"
                  >
                    <div
                      class="flex items-center px-3 py-2 rounded-md border border-input text-sm hover:bg-secondary"
                    >
                      {{ division.name }}
                    </div>
                    {% if selected_division_id == division_id %}
                      <div
                        class="size-3 rounded-full cursor-pointer bg-primary absolute -top-1 -right-1"
                      ></div>
                    {% endif %}
                  </a>
                {% endfor %}
              </div>
              {% if user.is_admin %}
                <div class="flex mt-4">
                  <button
                    class="px-4 py-2 gap-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
                    onclick="copyDivisionCTFtimeScoreboardFeed()"
                    title="Copy CTFtime scoreboard feed to clipboard"
                  >
                    <span>CTFtime Scoreboard Feed</span> {{ icons.copy() }}
                  </button>
                  <script>
                    function copyDivisionCTFtimeScoreboardFeed() {
                      navigator.clipboard.writeText(`${location}/ctftime`).then(
                        () => {
                          rhombus.toast.success(
                            "Copied CTFtime scoreboard feed to clipboard",
                          );
                        },
                        () => {
                          rhombus.toast.error(
                            "Failed to copy CTFtime scoreboard feed to clipboard",
                          );
                        },
                      );
                    }
                  </script>
                </div>
              {% endif %}
            {% endcall %}
          {% endcall %}
        </div>
      {% endif %}
      <div class="grow">
        {% call card.root() %}
          {% call card.header() %}
            {% call card.title() %}
              Leaderboard
            {% endcall %}
            {% call card.description() %}
              Current standing of all teams in the division
            {% endcall %}
          {% endcall %}
          {% call card.content() %}
            {% if leaderboard.entries | length > 0 %}
              <div class="w-full flex">
                <table class="table-fixed grow">
                  {% for entry in leaderboard.entries %}
                    <tr class="even:bg-secondary *:p-2">
                      <td>{{ entry.rank }}</td>
                      <td class="w-2/3">
                        <a
                          hx-boost="true"
                          hx-select="#screen"
                          hx-target="#screen"
                          hx-swap="outerHTML"
                          href="/team/{{ entry.team_id }}"
                          >{{ entry.team_name }}</a
                        >
                      </td>
                      <td>{{ entry.score }} points</td>
                    </tr>
                  {% endfor %}
                </table>
              </div>
              {% if leaderboard.num_pages > 1 %}
                <div class="flex justify-center">
                  <div>
                    {% for i in range(leaderboard.num_pages) %}
                      {% if i == 0 and page_num != 0 %}
                        <a
                          hx-boost="true"
                          hx-select="#screen"
                          hx-target="#screen"
                          hx-swap="outerHTML"
                          class="underline"
                          href="/scoreboard/{{ selected_division_id }}"
                          >1</a
                        >
                      {% elif i != page_num %}
                        <a
                          hx-boost="true"
                          hx-select="#screen"
                          hx-target="#screen"
                          hx-swap="outerHTML"
                          class="underline"
                          href="/scoreboard/{{ selected_division_id }}?page={{ i + 1 }}"
                          >{{ i + 1 }}</a
                        >
                      {% else %}
                        <span>{{ i + 1 }}</span>
                      {% endif %}
                    {% endfor %}
                  </div>
                </div>
              {% endif %}
            {% else %}
              <p>No teams in this division have solved a challenge yet!</p>
            {% endif %}
          {% endcall %}
        {% endcall %}
      </div>
    </div>
  </div>
  <div class="hidden" id="initial-scoreboard-json">
    {{- scoreboard | tojson -}}
  </div>
  <script>
    (function () {
      const chartElement = document.getElementById("chart");

      const setScoreboardTheme = () => {
        const isDark = document.documentElement.classList.contains("dark");
        if (window.scoreboardChart) {
          window.scoreboardChart.dispose();
        }
        if (isDark) {
          window.scoreboardChart = echarts.init(
            chartElement,
            "dark",
            undefined,
          );
        } else {
          window.scoreboardChart = echarts.init(chartElement, null, undefined);
        }
        if (window.mostRecentOptions)
          window.scoreboardChart.setOption(window.mostRecentOptions);
        window.scoreboardChart.resize();
      };

      setScoreboardTheme();
      const observer = new MutationObserver(() => setScoreboardTheme());
      observer.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ["class"],
      });

      const refetchHandler = async () => {
        const scoreboard_data = await (
          await fetch(window.location.pathname + ".json", {
            headers: { accept: "application/json" },
          })
        ).json();
        render(scoreboard_data);
      };

      const resizeHandler = () => {
        window.scoreboardChart.resize();
      };

      window.addEventListener("resize", resizeHandler);
      window.addEventListener("focus", refetchHandler);
      const periodicRefetch = setInterval(refetchHandler, 1000 * 60 * 2);

      window.deregister = () => {
        window.removeEventListener("resize", resizeHandler);
        window.removeEventListener("focus", refetchHandler);
        clearInterval(periodicRefetch);
      };

      render(
        JSON.parse(
          document.getElementById("initial-scoreboard-json").innerHTML,
        ),
      );

      function render(scoreboard_data) {
        if (Object.values(scoreboard_data).length === 0) {
          document.getElementById("empty-banner").style.display = "flex";
        }

        const seriesCommon = {
          type: "line",
          emphasis: {
            focus: "series",
          },
          lineStyle: {
            width: 4,
            // cap: "round",
          },
          // symbolSize: 10,
        };

        const optionsCommon = {
          tooltip: {
            trigger: "axis",
          },
          grid: {
            top: "70",
            left: "3%",
            right: "3%",
            bottom: "60",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
              dataZoom: {},
              myFullscreen: {
                show: true,
                title: "Fullscreen",
                icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
                onclick() {
                  document.exitFullscreen().catch(() => {});
                  chartElement.requestFullscreen();
                },
              },
            },
          },
          xAxis: {
            type: "time",
            minInterval: 1000 * 60 * 60,
          },
          dataZoom: [
            {
              type: "slider",
              height: 20,
              top: 35,
            },
          ],
          animationDuration: 0,
          backgroundColor: "transparent",
          yAxis: {
            type: "value",
            min: 0,
            minInterval: 100,
          },
        };

        const timestampOffset = new Date().getTimezoneOffset() * 60;

        const series = Object.values(scoreboard_data).map((team) => ({
          name: team.team_name,
          data: team.series.map((d) => ({
            value: [d.timestamp * 1000 + timestampOffset, d.total_score],
          })),
          ...seriesCommon,
        }));

        const options = {
          ...optionsCommon,
          legend: {
            data: series.map((s) => s.name),
            type: "scroll",
            orient: "horizontal",
            align: "left",
            bottom: 20,
          },
          series,
        };

        window.mostRecentOptions = options;
        window.scoreboardChart.setOption(options, true);
      }
    })();
  </script>
{% endblock %}