/*
.modal-content {
      max-height: 95vh;
      overflow-y: scroll;
}
*/

// Emergency alert handling JS updated for enhanced alert styling by severity (2025 design)
//2.1

try {
  $(document).ready(function () {
    $.ajax({
      type: "GET",
      url: "/appdata/site-alerts.json?c=" + Math.random(),
      jsonp: "callback",
      jsonpCallback: "jsonCallback",
      contentType: "application/json",
      dataType: "jsonp",
      error: function (e) {
        console.log(e);
        console.log(e.message);
      },
    });
  });
} catch (err) {
  console.log(err.message);
}

function displaySiteAlert(data) {
  if (typeof notifScope == "undefined") notifScope = "site-wide";
  let infoMsgTarget = notifScope == "portal" ? $("#banner") : $("#navbarUsers");

  let emergencyText = "";
  let allDis = [],
    allDisTxt = "";

  if (data.length > 0) {
    // Insert updated alert styles based on new design system
    $("head").append(`	
<style>
#emgcyModal { border-radius: 0; }
.emgcyBody { padding-top: 16px; font-size: 18px; }
#emgcyHeader {
    background-color: #A9082B;
    color: white;
    text-align: center;
    padding: 1.5rem;
    font-size: 1.4em;
}
#emgcyHeader, #emgcyHeader .fa-exclamation-triangle {
    display: flex;
    flex-direction: row;
    gap: 13px;
    align-items: center;
}
#emgcyHeader .fa-exclamation-triangle {
    font-size: 30px;
}
#emgcyModal .modal-body { padding: 1rem 30px 1rem; }
.emgcyBody > a { text-decoration: underline; }
.emgcyPubDate, .emgcyLink, .emgcyClose { text-align: center; }
.emgcyPubDate { font-weight: bold; font-size: 16px; padding-bottom: 1.3rem; }
.emgcyLink { padding-top: 1.5rem }
.btn-outline-extreme {
    color: #A9082B;
    border-color: #A9082B;
    border-radius: 0.1875rem;
    border: 1px solid #A9082B;
}
.btn-outline-extreme:hover {
    color: #fff;
    background-color: #A9082B;
    border-color: #A9082B;
}
.btn-outline-severe {
    color: #A9082B;
    background-color: #FFF;
    border-color: #FFF;
}
.btn-outline-severe:hover {
    color: #FFF;
    border-color: #FFF;
    background-color: #A9082B;
}
button.float-right.mt-1.btn.text-white.ml-1.dismiss-alert {
    padding-top: 0;
    padding-bottom: 0;
}
@media (max-width: 767.98px) {
    .modal-content #emgcyHeader div { width: 18rem; }
    .emgcyLink a {
        color: #A9082B;
        text-align: center;
        font-size: 1.125rem;
        line-height: 2.4rem;
        width: 100%;
        height: 3.2rem;
    }
    .alert-container .col-md-1 {
      position: absolute;
      right: 0px;
    }
}
@media (min-width: 768px) {
    .modal-dialog { max-width: 596px; }
    .modal-body { padding: 1rem 3rem; }
    .modal-content { margin: 2.3rem; }
    .emgcyLink a {
        color: #A9082B;
        text-align: center;
        font-size: 1.125rem;
        line-height: 2.2rem;
        width: 17.5rem;
        height: 3rem;
    }
}

@media (max-width: 574.98px) {
    moderateMsg {
      font-size: 16px;
    }
}

/* Hide scrollbar for Chrome, Safari and Opera */
.modal-content::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.modal-content {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}

div#collapseOne:last-child {
    margin-bottom: 2rem;
}

#alertAccordion:not(.collapsed) i.fas.fa-angle-down.rotate-icon {
    transform: rotate(180deg);
}

.modal-content {
      max-height: 95vh;
      overflow-y: scroll;
}

.modal {
      z-index: 2000;
}

.alert.alert-site-wide.alert-primary.alert-dismissable {
      background-color: #115D6F;
}

.alert.alert-site-wide.alert-primary.alert-dismissable:has(.emergency-alert-item),
.alert.alert-site-wide.alert-primary.alert-dismissable:has(.extreme-alert-item),
.alert.alert-site-wide.alert-primary.alert-dismissable:has(.severe-alert-item),
.alert.alert-site-wide.alert-primary.alert-dismissable:has(.moderate-alert-item) {
      background-color: #A9082B !important;
}

</style>
        `);

    data.forEach((ann) => {
      if (ann["scope"] == "site-wide" || notifScope == ann["scope"]) {
        if (!hasAnnBeenDismissed(ann["id"])) {
          let svrty = ann["severity"].toLowerCase();

          switch (svrty) {
            case "emergency":
            case "extreme":
              emergencyText += renderExtremeModal(ann);
              break;
            case "severe":
              infoMsgTarget.after(renderSevereBanner(ann));
              break;
            case "moderate":
              infoMsgTarget.after(renderModerateBanner(ann));
              break;
            case "minor":
            case "unknown":
              infoMsgTarget.after(renderMinorBanner(ann));
              break;
            case "status alert":
              if (ann["scope"] == "portal") {
                $("#navbarUsers").append(
                  `<div class="card p-2"><strong>${ann["title"]}</strong> ${ann["fulldescription"]}<div class="small text-right text-muted">Posted:${ann["pubDate"]}</div></div>`,
                );
                $("#statusPanel .countNbr").text(
                  $("#navbarUsers>.card").length,
                );
              }
              break;
            default:
              // fallback
              break;
          }
        } else {
          let svrty = ann["severity"].toLowerCase();
          allDis.push(ann);
          allDisTxt += `<hr><div class="${svrty}-alert-item"><strong>${ann["pubDate"]}</strong> - ${ann["title"]}${ann["fulldescription"] ? ":" : ""} ${ann["fulldescription"]}</div>`;
        }
      }
    });

    if (allDis.length > 0) {
      infoMsgTarget.after(`<div class="alert alert-site-wide alert-primary alert-dismissable" style="margin-bottom:0; border:0;" role="alert">
        <div class="container d-flex align-items-center">
          <div class="accordion" style="margin-bottom:0;padding:.2rem 0rem;border:0;color:white;margin-top:0;" id="dismissedNots">
            <div>
              <div role="alert" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" class="collapsed" id="alertAccordion">
                <span class="title small">${allDis.length} Dismissed Notifications </span>
                <span class="accicon" style="margin-left: 5px"><i class="fas fa-angle-down rotate-icon"></i></span>
              </div>
              <div id="collapseOne" class="collapse" data-parent="#dismissedNots">${allDisTxt}</div>
            </div>
          </div>
        </div>
      </div>
      <style>
          #dismissedNots a, #dismissedNots a:link, #dismissedNots a:visited {
          color: #fff !important;
          text-decoration: underline;
          }
          #dismissedNots a:hover, #dismissedNots a:focus {
          color: #cce6f2 !important;
          text-decoration: underline;
          }
        </style>`);
    }

    if (emergencyText != "") {
      $("body").before(
        `<div class="modal alert-site-wide" id="emgcyModal" tabindex="-1">${emergencyText}</div>`,
      );
      $("#emgcyModal").modal();
    }
  }

  $(".dismiss-alert").click(function () {
    $(".dismissable", $(this).closest(".alert-site-wide")).each(function () {
      let alertID = $(this).prop("id");
      let arr = getLocalStorageArr("dismissedAlerts");
      arr.push(alertID);
      setLocalStorageArr("dismissedAlerts", arr);
    });
  });
}

// Extreme (modal) alert, fully redesigned
function renderExtremeModal(ann) {
  return `
<div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
        <div id="emgcyHeader" style="display:flex; flex-direction: row; gap: 13px; justify-content: center; align-items: center; padding-top: 32px; padding-bottom: 32px;  align-items: start">
            <span class="fal fa-exclamation-triangle" aria-hidden="true" style="font-size: 30px"></span>
            <div style="font-size: 1.5rem; font-style: normal; font-weight: 400; line-height: normal; text-align: left;">
                SCU BRONCO ALERT NOTIFICATION
            </div>
        </div>
        <div class="modal-body">
            <div class="emgcyBody dismissable" id="${ann["id"]}">
                <div class="emgcyPubDate">${ann["pubDate"]}</div>
                <p>${ann["title"]}${ann["fulldescription"] ? ":" : ""} ${ann["fulldescription"]}</p>
            </div>
            <div class="emgcyLink">
                <a href="proxy.php?url=https://www.scu.edu/emergency/" class="btn btn-outline-extreme dismiss-alert" data-dismiss="modal" onclick="setTimeout(() => window.location.href='https://www.scu.edu/emergency/', 150);" style="border-radius: 0.1875rem; border: 1px solid #A9082B;">Latest Emergency Updates</a>
            </div>
            <div class="emgcyClose">
                <a href="proxy.php?url=#" data-dismiss="modal" class="dismiss-alert" aria-label="Close" style="color: #A9082B; display: inline-block; margin: 2.5rem 15px 1.2rem;">
                    <div style="display: flex; flex-direction: column; align-items: center; min-width: 44px; min-height: 44px; justify-content: center; gap: 6px;">
                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1.55505 12L2.33257 11.2225L6 7.55505L9.66743 11.2225L10.445 12L12 10.445L11.2225 9.66743L7.55505 6L11.2225 2.33257L12 1.55505L10.445 0L9.66743 0.777525L6 4.44495L2.33257 0.777525L1.55505 0L0 1.55505L0.777523 2.33257L4.44495 6L0.777523 9.66743L0 10.445L1.55505 12Z"
                                  fill="#A9082B"/>
                        </svg>
                        <span style="font-size: 0.875rem">Dismiss</span>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>`;
}

// Severe banner, redesigned
function renderSevereBanner(ann) {
  return `
<div class="alert alert-site-wide alert-primary alert-dismissable" style="margin-bottom:0;background-color:#A9082B;border:0;" role="alert" id="${ann["id"]}">
    <div class="container d-flex align-items-center dismissable" id="${ann["id"]}">
        <div class="alert-container text-white mr-auto w-100">
            <div class="emgcyPubDate" style="text-align: left!important; padding-top: 3.5rem; padding-bottom: 24px;">${ann["pubDate"]}</div>
            <div id="emgcyHeader" style="display: flex; gap: 6px; text-align: left!important; padding: 0 0 10px 0; margin-bottom:12px; align-items: start">
                <span class="fal fa-exclamation-triangle" aria-hidden="true" style="margin-top: 6px; padding-right: 10px;"></span>
                BRONCO ALERT EMERGENCY INFORMATION
            </div>
            <p class="severeMsg"><strong>${ann["title"]}</strong>${ann["fulldescription"] ? " : " : ""}${ann["fulldescription"] || ""}</p>
            <div class="emgcyLink">
                <a href="proxy.php?url=https://www.scu.edu/emergency/" class="btn btn-outline-severe">Latest Emergency Updates</a>
            </div>
        </div>
    </div>
    <div class="emgcyClose">
        <a href="proxy.php?url=#" data-dismiss="alert" class="dismiss-alert" aria-label="Close"
           style="color: #FFF; display: inline-block; margin: 2.5rem 15px 3.2rem;">
            <div style="display: flex; flex-direction: column; align-items: center; min-height: 44px; justify-content: center">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.55505 12L2.33257 11.2225L6 7.55505L9.66743 11.2225L10.445 12L12 10.445L11.2225 9.66743L7.55505 6L11.2225 2.33257L12 1.55505L10.445 0L9.66743 0.777525L6 4.44495L2.33257 0.777525L1.55505 0L0 1.55505L0.777523 2.33257L4.44495 6L0.777523 9.66743L0 10.445L1.55505 12Z"
                          fill="#FFF"/>
                </svg>
                <span>Dismiss</span>
            </div>
        </a>
    </div>
</div>`;
}

// Moderate banner, updated for new styles (minor visual changes) #9F2623
function renderModerateBanner(ann) {
  return `
<div class="alert alert-site-wide alert-primary alert-dismissable mb-0" style="background-color:#9F2623;border:0;" role="alert" id="${ann["id"]}">
    <div class="container d-flex align-items-center dismissable" id="${ann["id"]}">
        <div class="alert-container text-white mr-auto pt-3 row w-100">
            <div class="col-md-11">
                <p class="moderateMsg" style="text-align: left;"><strong>${ann["title"]}${ann["fulldescription"] ? ": " : ""}</strong>${ann["fulldescription"]}</p>
            </div>
            <div class="col-md-1">
                <button type="button" class="float-right mt-1 btn text-white ml-1 dismiss-alert" data-dismiss="alert" aria-label="Close">
                    <span class="fal fa-times-square" style="font-size: 22px;"></span>
                </button>
            </div>
        </div>
    </div>
</div>`;
}

// Minor/Unknown status, just background color change from Moderate #135C6D
function renderMinorBanner(ann) {
  return `
<div class="alert alert-site-wide alert-primary alert-dismissable mb-0" style="background-color:#135C6D;border:0;" role="alert" id="${ann["id"]}">
    <div class="container d-flex align-items-center dismissable" id="${ann["id"]}">
        <div class="alert-container text-white mr-auto pt-3 row w-100">
            <div class="col-md-11">
                <p class="moderateMsg" style="text-align: left;"><strong>${ann["title"]}${ann["fulldescription"] ? ": " : ""}</strong>${ann["fulldescription"]}</p>
            </div>
            <div class="col-md-1">
                <button type="button" class="float-right mt-1 btn text-white ml-1 dismiss-alert" data-dismiss="alert" aria-label="Close">
                    <span class="fal fa-times-square" style="font-size: 22px;"></span>
                </button>
            </div>
        </div>
    </div>
</div>`;
}

function hasAnnBeenDismissed(id) {
  const dismissed = getLocalStorageArr("dismissedAlerts");
  return dismissed.includes(id);
}

function setLocalStorageArr(name, value) {
  localStorage.setItem(name, JSON.stringify(value));
}

function getLocalStorageArr(name) {
  try {
    const storedVal = localStorage.getItem(name);
    if (!storedVal) return [];
    const parsedArr = JSON.parse(storedVal);
    return Array.isArray(parsedArr) ? parsedArr : [];
  } catch (err) {
    console.log(err.message);
    return [];
  }
}

// getstyles() unused, styles are now inlined above