(function () {
  const CSV_URL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vSRr68pfVTkj6T7JmLbiykdHBmY42kYVp6-xrQY1LoPWqsJi7yW9pA45LCBBadkG84KxIs1Je_AkKvI/pub?output=csv";

  const LETTER_GROUPS = [
    "A", "B", "C", "D", "E", "F", "G", "H", "I", "J-K",
    "L", "M", "N", "O", "P-Q", "R", "S", "T", "U-V", "W-Z"
  ];

  const output = document.getElementById("buildingAccordionOutput");

  function clean(value) {
    return (value || "").toString().trim();
  }

  function escapeHTML(value) {
    return clean(value)
      .replace(/&/g, "&")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
  }

  function slug(value) {
    return clean(value)
      .toLowerCase()
      .replace(/[^a-z0-9]+/g, "-")
      .replace(/^-+|-+$/g, "");
  }

  function isUnavailable(value) {
    return clean(value) === "#";
  }

  function isTextOnly(row) {
    return (
      clean(row.eap_url).toLowerCase() === "text only" ||
      clean(row.quiz_url).toLowerCase() === "text only"
    );
  }

  function getLetterGroup(value) {
    const first = clean(value).charAt(0).toUpperCase();

    if (first === "J" || first === "K") return "J-K";
    if (first === "P" || first === "Q") return "P-Q";
    if (first === "U" || first === "V") return "U-V";
    if (["W", "X", "Y", "Z"].includes(first)) return "W-Z";
    if (/^[A-Z]$/.test(first)) return first;

    return "A";
  }

  function renderEAPButton(url) {
    if (isUnavailable(url) || !clean(url)) {
      return '<p class="mb-0 text-muted">EAP is not available</p>';
    }

    return `
      <a class="btn btn-primary btn-sm" href="/safety/files/includes/js/eap-directory/${escapeHTML(url)}" target="_blank" rel="noopener">
        <i class="fa-regular fa-sharp fa-file-pdf" aria-hidden="true"></i>
        <span>EAP</span>
      </a>
    `;
  }

  function renderQuizButton(url) {
    if (isUnavailable(url) || !clean(url)) {
      return '<p class="mb-0 text-muted">Quiz is not available</p>';
    }

    return `
      <a class="btn btn-warning btn-sm" href="/safety/files/includes/js/eap-directory/${escapeHTML(url)}" target="_blank" rel="noopener">
        <i class="fa-sharp fa-regular fa-ballot-check" aria-hidden="true"></i>
        <span>Quiz</span>
      </a>
    `;
  }

  function renderBuildingRow(row) {
    const buildingName = escapeHTML(row.building_name);

    if (isTextOnly(row)) {
      return `
        <div class="building-row border-top py-3">
          <p class="mb-0 font-weight-bold">${buildingName}</p>
        </div>
      `;
    }

    return `
      <div class="building-row border-top py-3">
        <div class="row align-items-center">
          <div class="col-12 col-md-6 mb-2 mb-md-0">
            <p class="mb-0 font-weight-bold">${buildingName}</p>
          </div>
          <div class="col-6 col-md-3">
            ${renderEAPButton(row.eap_url)}
          </div>
          <div class="col-6 col-md-3">
            ${renderQuizButton(row.quiz_url)}
          </div>
        </div>
      </div>
    `;
  }

  function renderCampusAccordion(letterGroup, campusUnit, rows, index) {
    const campusId = `campus-${slug(letterGroup)}-${slug(campusUnit)}-${index}`;
    const headingId = `${campusId}-heading`;
    const collapseId = `${campusId}-collapse`;

    return `
      <div class="card mb-2">
        <div class="card-header py-2" id="${headingId}">
          <h3 class="mb-0">
            <button class="btn btn-link btn-block text-left collapsed building-accordion-btn"
                    type="button"
                    data-toggle="collapse"
                    data-bs-toggle="collapse"
                    data-target="#${collapseId}"
                    data-bs-target="#${collapseId}"
                    aria-expanded="false"
                    aria-controls="${collapseId}">
              <span class="building-accordion-arrow fa" aria-hidden="true"></span>
              <span class="building-campus-title">${escapeHTML(campusUnit)}</span>
            </button>
          </h3>
        </div>

        <div id="${collapseId}" class="collapse" aria-labelledby="${headingId}">
          <div class="card-body">
            ${rows.map(renderBuildingRow).join("")}
          </div>
        </div>
      </div>
    `;
  }

  function renderLetterAccordion(groupName, rows, index) {
    const letterId = `letter-${slug(groupName)}-${index}`;
    const headingId = `${letterId}-heading`;
    const collapseId = `${letterId}-collapse`;

    const regularRows = rows.filter(row => !clean(row.campus_unit));
    const campusRows = rows.filter(row => clean(row.campus_unit));

    const campusGroups = {};
    campusRows.forEach(row => {
      const unit = clean(row.campus_unit);
      if (!campusGroups[unit]) campusGroups[unit] = [];
      campusGroups[unit].push(row);
    });

    const campusHTML = Object.keys(campusGroups)
      .sort()
      .map((unit, i) => renderCampusAccordion(groupName, unit, campusGroups[unit], i))
      .join("");

    return `
      <div class="card mb-3">
        <div class="card-header" id="${headingId}">
          <h2 class="mb-0">
            <button class="btn btn-link btn-block text-left collapsed building-accordion-btn"
                    type="button"
                    data-toggle="collapse"
                    data-bs-toggle="collapse"
                    data-target="#${collapseId}"
                    data-bs-target="#${collapseId}"
                    aria-expanded="false"
                    aria-controls="${collapseId}">
              <span class="building-accordion-arrow fa" aria-hidden="true"></span>
              <span class="building-accordion-title">${escapeHTML(groupName)}</span>
            </button>
          </h2>
        </div>

        <div id="${collapseId}" class="collapse" aria-labelledby="${headingId}">
          <div class="card-body">
            ${regularRows.map(renderBuildingRow).join("")}
            ${campusHTML}
          </div>
        </div>
      </div>
    `;
  }

  function buildAccordions(rows) {
    const grouped = {};

    LETTER_GROUPS.forEach(group => {
      grouped[group] = [];
    });

    rows.forEach(row => {
      const groupSource = clean(row.campus_unit) || clean(row.building_name);
      const group = getLetterGroup(groupSource);
      grouped[group].push(row);
    });

    Object.keys(grouped).forEach(group => {
      grouped[group].sort((a, b) => {
        const aSort = clean(a.campus_unit) || clean(a.building_name);
        const bSort = clean(b.campus_unit) || clean(b.building_name);
        return aSort.localeCompare(bSort);
      });
    });

    const activeGroups = LETTER_GROUPS.filter(group => grouped[group].length);
    const midpoint = Math.ceil(activeGroups.length / 2);

    const leftGroups = activeGroups.slice(0, midpoint);
    const rightGroups = activeGroups.slice(midpoint);

    output.innerHTML = `
      <div class="col-12 col-lg-6">
        ${leftGroups.map((group, i) => renderLetterAccordion(group, grouped[group], i)).join("")}
      </div>
      <div class="col-12 col-lg-6">
        ${rightGroups.map((group, i) => renderLetterAccordion(group, grouped[group], i + midpoint)).join("")}
      </div>
    `;
  }

  Papa.parse(CSV_URL, {
    download: true,
    header: true,
    skipEmptyLines: true,
    complete: function (results) {
      const rows = results.data
        .map(row => ({
          building_name: clean(row.building_name),
          eap_url: clean(row.eap_url),
          quiz_url: clean(row.quiz_url),
          campus_unit: clean(row.campus_unit)
        }))
        .filter(row => row.building_name);

      buildAccordions(rows);
    },
    error: function () {
      output.innerHTML = `
        <div class="col-12">
          <div class="alert alert-danger">
            Building information could not be loaded. Check that the Google Sheet is published as CSV.
          </div>
        </div>
      `;
    }
  });
})();