/* global jQuery */
(function ($) {
  "use strict";

  const contextMap = {
    dashboard: {
      title: "Dashboard",
      links: [
        { icon: "bi-grid-1x2-fill", label: "Overview", active: true },
        { icon: "bi-bar-chart-line", label: "Progress" },
        { icon: "bi-calendar-check", label: "Schedule" },
        { icon: "bi-megaphone", label: "Announcements" }
      ]
    },
    courses: {
      title: "My Lessons",
      links: [
        { icon: "bi-book-half", label: "All Lessons", active: true },
        { icon: "bi-play-circle", label: "In Progress" },
        { icon: "bi-check2-circle", label: "Completed" }
      ]
    },
    badges: {
      title: "Badges",
      links: [
        { icon: "bi-award", label: "Earned Badges", active: true },
        { icon: "bi-stars", label: "Milestones" },
        { icon: "bi-trophy", label: "Leaderboard" }
      ]
    },
    messages: {
      title: "Messages",
      links: [
        { icon: "bi-inbox", label: "Inbox", active: true },
        { icon: "bi-send", label: "Sent" },
        { icon: "bi-star", label: "Starred" }
      ]
    },
    activities: {
      title: "Activities",
      links: [
        { icon: "bi-joystick", label: "Learning Games", active: true },
        { icon: "bi-lightning-charge", label: "Quick Challenges" },
        { icon: "bi-rocket", label: "Skill Quests" }
      ]
    }
  };

  function renderContext(section) {
    const data = contextMap[section] || contextMap.dashboard;
    const $title = $("#contextTitle");
    const $links = $("#contextLinks");

    $title.text(data.title);
    const html = data.links
      .map(function (item) {
        const activeClass = item.active ? " is-active" : "";
        return '<a href="#" class="context-link' + activeClass + '"><i class="bi ' + item.icon + '"></i><span>' + item.label + "</span></a>";
      })
      .join("");

    $links.html(html);
  }

  function closeSidebarOnMobile() {
    if (window.matchMedia("(max-width: 991.98px)").matches) {
      $("body").removeClass("sidebar-open");
    }
  }

  $(function () {
    renderContext("dashboard");

    $(".top-link").on("click", function (e) {
      e.preventDefault();
      const section = $(this).data("section");
      $(".top-link").removeClass("is-active");
      $(this).addClass("is-active");
      renderContext(section);
      closeSidebarOnMobile();
    });

    $("#sidebarToggle, #layoutOverlay").on("click", function () {
      $("body").toggleClass("sidebar-open");
    });

    $("#sidebarClose").on("click", function () {
      $("body").removeClass("sidebar-open");
    });

    $("#contextLinks").on("click", ".context-link", function (e) {
      e.preventDefault();
      $("#contextLinks .context-link").removeClass("is-active");
      $(this).addClass("is-active");
      closeSidebarOnMobile();
    });

    $(window).on("resize", function () {
      if (window.matchMedia("(min-width: 992px)").matches) {
        $("body").removeClass("sidebar-open");
      }
    });
  });
})(jQuery);
