{%- import "macros/svgs.jinja" as svg -%}

{%- set jupyter_name = "Jupyter4NFDI" -%}

{#- Get all systems configured for this hub,
    sort them by weight and assign status ids -#}
{#- Jupyter should always be first -#}
{%- set incident_services = custom_config.get("incidentCheck", {}).get("services", {}) -%}
{%- set systems_default_order = [["JUPYTER", incident_services.get("JUPYTER", 40)]] -%}
{%- for system in custom_config.get("systems", {}) | sort(attribute='weight') -%}
  {%- set system = system.upper().replace("-", '') -%}
  {%- set status_id = incident_services.get(system, 0) -%}
  {%- do systems_default_order.append([system, status_id]) -%}
{%- endfor -%}

{%- macro random_int(len) -%}
  {%- for _ in range(len) -%}
      {{ range(10) | random }}
  {%- endfor -%}
{%- endmacro -%}

{%- macro number_of_users(system) -%}
  {%- if system == "jupyter" -%}
    {%- set system_svg = svg.users_svg -%}
    {%- set url_suffix = "" -%}
  {%- elif system == "jsccloud"%}
    {%- set system_svg = svg.servers_svg -%}
    {%- set url_suffix = "var-system=JSC-Cloud" -%}
  {%- else -%}
    {%- set system_svg = svg.servers_svg -%}
    {%- set url_suffix = "var-system=" + system.upper() -%}
  {%- endif -%}
<a class="system-users d-inline-block text-muted ms-1" 
  data-bs-toggle="tooltip" data-bs-placement="top" title="Number of active {%- if system == 'jupyter' %} users in the last 24 hours {%- else %} servers {%- endif -%}"
  href="https://{{hostname}}/grafana/?{{url_suffix}}" target="_blank">
  <span id="{{system}}-users">0</span>
  <span> {{ system_svg | safe }} </span>
  <div class="system-users-link-div d-inline-block">
    <span class="system-users-link" id="{{system}}-users-link">
      {{ svg.link_svg | safe }}
    </span>
  </div>
</a>
{%- endmacro -%}

{%- macro ampel(system, system_id) -%}
{%- set system_lower = system.lower() %}
<div id="ampel-{{system_lower}}" class="text-center">
  <img class="ampel-img" src='{{static_url( "images/footer/systems/" + system_lower + ".svg?v=" + random_int(10) )}}' />
  <a id="ampel-{{system_lower}}-tooltip" href="https://status.jsc.fz-juelich.de/services/{{system_id}}" target="_blank" class="align-middle" data-bs-toggle="tooltip" data-bs-placement="top">
    {%- if system == "JUPYTER" -%}
    {{ jupyter_name }}
    {%- elif system == "JSCCLOUD" -%}
    JSC-Cloud
    {%- else -%}
    {{ system }}
    {%- endif -%}
  </a>
  {{ number_of_users(system_lower) }}
</div>
{%- endmacro -%}

{%- macro create_carousel_systems(start_index, length) -%}
{%- set end_index = start_index + length -%}
{%- for system_config in systems_default_order %}
  {%- if loop.index0 >= start_index and loop.index0 < end_index %}
{{ ampel(system_config[0], system_config[1]) }}
  {%- endif -%}
{%- endfor -%}
{%- endmacro -%}


{%- block footer -%}
<footer class="navbar mt-auto p-0">
  <div id="footer-top" class="container-fluid justify-content-evenly p-4">
    {#- We create a carousel to be able to show all systems in the footer #}
    <div id="footerSystemsCarousel" class="carousel carousel-dark slide w-100" data-bs-ride="carousel" data-bs-interval="10000">
      <div  id="carousel-inner" class="carousel-inner">
        <!-- Carousel items will be injected here dynamically via JavaScript -->
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#footerSystemsCarousel" data-bs-slide="prev" style="width: unset;">
        <span class="carousel-control-prev-icon"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#footerSystemsCarousel" data-bs-slide="next" style="width: unset;">
        <span class="carousel-control-next-icon"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </div>
  <div id="footer-bottom" class="container-fluid justify-content-center">
    {%- set logo_width = "220px" -%}
    {%- set div_classes = "px-2 text-center" %}
    <a class="py-2 {{div_classes}}" target="_blank" href="https://www.fz-juelich.de">&copy; Forschungszentrum Jülich</a>
    <div class="flex-grow-1 {{div_classes}}">
      {%- set footer_margin = "m-1" %}
      <a href="{{ base_url }}imprint">Legal Notice</a>
      <span class="{{ footer_margin }}">|</span>
      <a href="{{ base_url }}privacy">Privacy Policy</a>
      <span class="{{ footer_margin }}">|</span>
      <a href="{{ base_url }}terms">Terms of Service</a>
      <span class="{{ footer_margin }}">|</span>
      <a href="mailto:ds-support@fz-juelich.de?subject=Jupyter4NFDI Support&amp;body=Please describe your problem here. (english or german)">Support</a>
    </div>
    <div class="py-4 {{div_classes}}">
      <a href="https://www.nfdi.de/" target="_blank">
        <img id="helmholtz-logo" src='{{ static_url("images/nfdi-logo-small.svg", include_version=False) }}' height="60px">
      </a>
    </div>
  </div>
</footer>
{%- endblock -%}


{%- block script -%}
<script type="text/javascript">
require(["jquery", "home/utils"], function (
  $, 
  utils
) {
  "use strict";



  const carouselInner = $('#carousel-inner');

    // Define how many items per screen size
  const breakpoints = {
      xl: 5, // Extra-large screens (≥1200px)
      lg: 4, // Large screens (≥992px)
      md: 3, // Medium screens (≥768px)
      sm: 2, // Small screens (≥576px)
      xs: 1  // Extra-small screens (<576px)
  };

  // Function to get the number of items per page based on window width
  function getItemsPerPage() {
    const width = $(window).width();
    if (width >= 1200) return breakpoints.xl;
    if (width >= 992) return breakpoints.lg;
    if (width >= 768) return breakpoints.md;
    if (width >= 576) return breakpoints.sm;
    return breakpoints.xs;
  }

  function randomInt(len) {
    let result = '';
    for (let i = 0; i < len; i++) {
        result += Math.floor(Math.random() * 10);
    }
    return result;
  }

  function numberOfUsers(system) {
    let systemSvg, urlSuffix, tooltipTitle;

    const usersSvg = `{{ svg.users_svg | safe }}`;
    const serversSvg = `{{ svg.servers_svg | safe }}`;
    const linkSvg = `{{ svg.link_svg | safe }}`;

    if (system === "jupyter") {
        systemSvg = usersSvg;
        urlSuffix = "";
        tooltipTitle = "Number of active users in the last 24 hours";
    } else if (system === "jsccloud") {
        systemSvg = serversSvg;
        urlSuffix = "var-system=JSC-Cloud";
        tooltipTitle = "Number of active servers";
    } else {
        systemSvg = linkSvg;
        urlSuffix = `var-system=${system.toUpperCase()}`;
        tooltipTitle = "Number of active servers";
    }

    const anchorElement = `
        <a class="system-users d-inline-block text-muted ms-1" 
           data-bs-toggle="tooltip" data-bs-placement="top" 
           title="${tooltipTitle}" 
           href="https://{{hostname | safe}}/grafana/?${urlSuffix}" 
           target="_blank">
           <span id="${system}-users">0</span>
           <span>${systemSvg}</span>
           <div class="system-users-link-div d-inline-block">
               <span class="system-users-link" id="${system}-users-link">
                   {{ svg.linkSvg | safe }}
               </span>
           </div>
        </a>`;
    
    return anchorElement;
  }

  function ampel(system, systemId) {
    const systemLower = system.toLowerCase();
    const imgVersion = randomInt(10);

    var base_url = window.jhdata.base_url;
    const staticUrl = base_url + "static";

    let displayName;
    if (system === "JUPYTER") {
        displayName = {{ jupyter_name | tojson | safe }};
    } else if (system === "JSCCLOUD") {
        displayName = "JSC-Cloud";
    } else {
        displayName = system;
    }

    const ampelHtml = `
      <div id="ampel-${systemLower}" class="text-center">
          <img class="ampel-img" src="${staticUrl}/images/footer/systems/${systemLower}.svg?v=${imgVersion}" />
          <a id="ampel-${systemLower}-tooltip" 
              href="https://status.jsc.fz-juelich.de/services/${systemId}" 
              target="_blank" 
              class="align-middle" 
              data-bs-toggle="tooltip" 
              data-bs-placement="top">
              ${displayName}
          </a>
          ${numberOfUsers(systemLower)}
      </div>`;

    return ampelHtml;
  }

  function create_carousel_systems(start, numElements) { 
    let carouselSystem = '';
    const end_index = start + numElements;
    let order = {{ systems_default_order | tojson | safe  }};

    for (let i = start; i < start + numElements; i++) {
      let system_config = order[i];
      carouselSystem += ampel(system_config[0], system_config[1]);
    }
    return carouselSystem;
  }

  // Function to dynamically create carousel pages
  function createCarouselPages() {
    carouselInner.empty(); // Clear existing carousel items
    const itemsPerPage = getItemsPerPage(); 
    const totalSystems = {{ systems_default_order | length }}; // Total number of systems
    let pageNum = 1;

    for (let i = 0; i < totalSystems; i += itemsPerPage) {
        let carouselItem = $('<div>').addClass('carousel-item');
        if (i === 0) carouselItem.addClass('active'); // First item is active by default

        let systemPage = $('<div>').addClass('d-flex justify-content-evenly');
        systemPage.attr('id', "systems-page-" + pageNum);

        // Create systems for this page
        const systemsDiv = create_carousel_systems(i, Math.min(totalSystems - i, itemsPerPage));

        // Append systems to page and page to carousel
        $(systemPage).append(systemsDiv);
        $(carouselItem).append(systemPage);
        carouselInner.append(carouselItem);
        pageNum++;
    }
  }

  function reorderSystems(incidentsData) {
    const systemsDefaultOrder = {{ systems_default_order | tojson}};
    // Create copy of data and filter it
    var systemsFiltered = { ...incidentsData };
    for (let key in systemsFiltered) {
      if (systemsFiltered[key].health < 30) delete systemsFiltered[key];
    }
    delete systemsFiltered["JUPYTER"]; // Jupyter should always be first

    var systemsFilteredandSortedBySeverity = Object.keys(systemsFiltered).sort((a, b) => systemsFiltered[a]["health"] < systemsFiltered[b]["health"]);

    // Finally, create sorted list with all systems
    var systemsSorted = ["JUPYTER"];
    systemsFilteredandSortedBySeverity.forEach((system) => {
        systemsSorted.push(system);
    });
    systemsDefaultOrder.forEach(systemConfig => {
      var system = systemConfig[0];
      if (!systemsSorted.includes(system)) {
        systemsSorted.push(system);
      }
    }) 

    var carousel_exists = $("#footerSystemsCarousel").length;
    // Recreate footer with systems in the sorted order
    for (const [index, system] of systemsSorted.entries()) {
      let ampel = $(`#ampel-${system.toLowerCase()}`);
      ampel.remove();
      if (!carousel_exists) {
        $("#systems-page-1").append(ampel);
      }
      else {
        if (index < 4) $("#systems-page-1").append(ampel);
        else $("#systems-page-2").append(ampel);
      }
    }
  }

  function updateSystemHoverTooltips() {
    const incidents = {{ incidents | tojson }};
    for (const [system, systemInfo] of Object.entries(incidents)) {
      if (systemInfo.incident) {
        $(`#ampel-${system.toLowerCase()}-tooltip`)
          .attr('data-bs-original-title', systemInfo.incident);
      }
    }
    reorderSystems(incidents);
  }

  // Update the carousel when the window is resized
  $(window).resize(function () {
    createCarouselPages();
  });
  
  $(document).ready(function() {
    createCarouselPages();
    updateSystemHoverTooltips();
    utils.updateNumberOfUsers();
  })

  if (!(window.location.pathname.endsWith("home") || window.location.pathname.includes("spawn-pending"))) {
    console.log("setup SSE")
    let userSpawnerNotificationUrl = `${jhdata.base_url}api/users/${jhdata.user}/notifications/spawners?_xsrf=${window.jhdata.xsrf_token}`;
    evtSourcesGlobal["footer"] = new EventSource(userSpawnerNotificationUrl);
    evtSourcesGlobal["footer"].onmessage = (e) => {
      utils.updateNumberOfUsers();
    };
  }
  
})
</script>
{%- endblock -%}