{{ define "content" }}
<link href="/static/css/pages/nrg-lcp.css" rel="stylesheet" />
<script src="/static/js/number-grid-component.js"></script>
<script src="/static/js/drop-select-component.js"></script>
<script src="/static/js/color-select-component.js"></script>
<script src="/static/js/inputFields.js"></script>

{{ template "nrgheader" . }}

<div class="upper" style="color: var(--text-normal)">
  <div id="btntip" display="none" style="position: absolute; display: none;z-index: 1300;"></div>
  <div class="svg-wrapper" id="svg-container">
    <!-- SVG will be loaded dynamically -->
  </div>

</div>
<hr style="border: 1px solid var(--tab-bg)" />

<div class="lower tab" style="color: var(--text-normal)">
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="tablinks tab-button active" id="ConfigButton" data-bs-toggle="tab" data-bs-target="#config-tab"
        type="button" role="tab" aria-controls="Config" aria-selected="true">
        Configuration
      </button>
    </li>

    <li class="nav-item" role="presentation">
      <button class="tab-separator" id="ConfigButtonSeparator" type="button" role="tab" aria-hidden="true">
        <i class="icon-tab-separator"></i>
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="tablinks tab-button" id="BreakawayButton" data-bs-toggle="tab" data-bs-target="#breakaways-tab"
        type="button" role="tab" aria-controls="Breakaways" aria-selected="false">
        Breakaways
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="tab-separator" id="BreakawayButtonSeparator" type="button" role="tab" aria-hidden="true">
        <i class="icon-tab-separator"></i>
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="tablinks tab-button" id="Macrobutton" data-bs-toggle="tab" data-bs-target="#macros-tab"
        type="button" role="tab" aria-controls="Macrobutton" aria-selected="false">
        Macros
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="tab-separator" id="macroButtonSeparator" type="button" role="tab" aria-hidden="true">
        <i class="icon-tab-separator"></i>
      </button>
    </li>

    <li class="nav-item" role="presentation">
      <button class="tablinks tab-button" id="KeyConfigButton" data-bs-toggle="tab" data-bs-target="#keyconfig-tab"
        type="button" role="tab" aria-controls="KeycolorButton" aria-selected="false">
        Key Colors
      </button>
    </li>


    <li class="nav-item" role="presentation">
      <button class="tab-separator" id="keyConfigSeparator" type="button" role="tab" aria-hidden="true">
        <i class="icon-tab-separator"></i>
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="tablinks tab-button" id="KeyAssignments" data-bs-toggle="tab" data-bs-target="#keyassignments-tab"
        type="button" role="tab" aria-controls="KeyassignButton" aria-selected="false">
        Key Assignments
      </button>
    </li>
    <li class="nav-item" role="presentation" style="margin-left: auto;"><div id="saved" style="display: none; padding: 8px 20px 4px 20px;">Saved</div></li>
  </ul>
  <!-- ****************       tabs       ***********************  -->
  <div class="tab-content" id="theTabContent" style="margin-top:0;">
    <!-- config tab -->
    <div class="tab-pane fade show active" id="config-tab" role="tabpanel" aria-labelledby="ConfigButton">
      <div>
        <form id="config" style="margin: 10px 0 0 20px;">
          <div class="config-grid" style="width: 100%;">
            <div class="grid-item-label" id="aliasSetLabel">Alias Set</div>
            <div class="grid-item-input">
              <div class="select-wrapper">
                <select class="custom-select" name="aliasSets" id="aliasSets" aria-labelledby="aliasSetLabel">
                  <option value="0" selected="selected">None</option>
                </select>
              </div>
            </div>

            <div class="grid-item-label">Cutbus Mode:</div>
            <div class="grid-item-input">
              <div class="pe-3 d-inline-block">
                <input type="radio" class="form-check-input" id="off" value="0" name="cbMode" checked />
                <label for="off" class="form-check-label">Off</label>
              </div>
              <div class="pe-3 d-inline-block">
                <input type="radio" class="form-check-input" id="normal" value="1" name="cbMode" />
                <label for="normal" class="form-check-label">Normal</label>
              </div>
            </div>

            <div class="grid-item-label">Cutbus 1 Destination</div>
            <div class="grid-item-input">
              <drop-select class="" name="cutbus1" id="cutbus1" aria-labelledby="cutbus1">
                <option></option>
              </drop-select>
            </div>

            <div class="grid-item-label">Cutbus 2 Destinaion</div>
            <div class="grid-item-input">
              <drop-select class="" name="cutbus2" id="cutbus2" aria-labelledby="cutbus2">
                <option></option>
              </drop-select>
            </div>

            <div class="grid-item-label">Panel Brightness</div>
            <div class="grid-item-input">
              <span class="number-wrapper">
                <input class="form-control rounded-0 number-size" type="number" id="onBrightness" min="0" max="10" oninput="restrictNumberField(this)" />
              </span>
            </div>

            <div class="grid-item-wrapper" id="bwyResetContainer">
              <div class="grid-item-label">Breakaway Reset</div>
              <div class="grid-item-input"><input class="form-check-input" type="checkbox" id="bwyResetCheckbox"
                  name="bwyReset" />
              </div>
            </div>

            <div class="grid-item-wrapper" id="bwayWarningContainer">
              <div class="grid-item-label">Breakaway Warning Mode</div>
              <div class="grid-item-input">
                <div class="select-wrapper">
                  <select class="custom-select" name="bwayWarning" id="bwayWarning" aria-labelledby="bwmMode">
                    <option value="0" selected="selected">Default</option>
                    <option value="1">No</option>
                  </select>
                </div>
              </div>
            </div>

            <div class="grid-item-wrapper" id="mcEnabledContainer">
              <div class="grid-item-label">Machine Control Enabled</div>
              <div class="grid-item-input">
                <input class="form-check-input" type="checkbox" id="mcEnabled" name="mcEnabled" />
              </div>
            </div>

            <div class="grid-item-wrapper" id="mcLevelContainer">
              <div class="grid-item-label">Machine Control Level</div>
              <div class="grid-item-input">
                <span class="number-wrapper"><input class="form-control rounded-1 number-size" style="max-width: 4rem"
                    type="number" id="mcLevel" min="1" max="32" /></span>
              </div>
            </div>

            <div class="grid-item-label">Protect Mode:</div>
            <div class="grid-item-input">
              <div class="pe-3 d-inline-block">
                <input type="radio" class="form-check-input" id="otherpanels" value="0" name="protectMode" checked />
                <label for="otherpanels" class="form-check-label pe-3">Block Other Panels</label>
              </div>
              <div class="d-inline-block">
                <input type="radio" class="form-check-input" id="allpanels" value="1" name="protectMode" />
                <label for="allpanels" class="form-check-label">Block All Panels</label>
              </div>
            </div>

            <div class="grid-item-label"><button type="button" class="btn btn-text" name="btnLoadDefaults"
                id="btnLoadDefaults" style="margin-inline-start: -2px;margin-top: 8px;">Load Defaults</button></div>
            <div class="grid-item-input">

            </div>

          </div>
        </form>
      </div>
    </div>
    <!-- breakaway tab -->
    <div class="tab-pane fade" id="breakaways-tab" role="tabpanel" aria-labelledby="BreakawayButton">
      <div style="max-width: 100%">
        <table class="table align-middle" style="color: var(--text-normal);">
          <thead>
            <tr>
              <th>ID</th>
              <th>Name</th>
              <th id="selection">Selection</th>
              <th></th>
            </tr>
          </thead>
          <tbody id="bwayTableBody">
          </tbody>
        </table>
      </div>
    </div>
    <!-- keyColors tab -->
    <div class="tab-pane fade" id="keyconfig-tab" role="tabpanel" aria-labelledby="KeyConfigButton">
      <div style="max-width: 100%;">
        <form id="keyconfig">
          <table class="table align-middle" style="color: var(--text-normal);">

            <thead>
              <tr>
                <th>Key Mode</th>
                <th>Selected</th>
                <th>Default</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Destination</td>
                <td>
                  <color-select id="DSTselectedColor"></color-select>
                </td>
                <td> <color-select id="DSTdefaultColor" rgb-enum="0"></color-select></td>
              </tr>
              <tr>
                <td>Source</td>
                <td>
                  <color-select id="SRCselectedColor"></color-select>
                </td>
                <td> <color-select id="SRCdefaultColor" rgb-enum="0"></color-select></td>
              </tr>
              <tr>
                <td>Crosspoint</td>
                <td>
                  <color-select id="XPTselectedColor"></color-select>
                </td>
                <td> <color-select id="XPTdefaultColor" rgb-enum="0"></color-select></td>
              </tr>
              <tr>
                <td>Level</td>
                <td>
                  <color-select id="LVLselectedColor"></color-select>
                </td>
                <td> <color-select id="LVLdefaultColor" rgb-enum="0"></color-select></td>
              </tr>
              <tr>
                <td>Macro</td>
                <td>
                  <color-select id="MACRselectedColor"></color-select>
                </td>
                <td> <color-select id="MACRdefaultColor" rgb-enum="0"></color-select></td>
              </tr>
              <tr>
                <td>Protect</td>
                <td>
                  <color-select id="PROTselectedColor"></color-select>
                </td>
                <td> <color-select id="PROTdefaultColor" rgb-enum="0"></color-select></td>
              </tr>
              <tr>
                <td>Take</td>
                <td>
                  <color-select id="TAKEselectedColor"></color-select>
                </td>
                <td> <color-select id="TAKEdefaultColor" rgb-enum="0"></color-select></td>
              </tr>
              <tr>
                <td>Take Cancel</td>
                <td>
                  <color-select id="UNTAKEselectedColor"></color-select>
                </td>
                <td> <color-select id="UNTAKEdefaultColor" rgb-enum="0"></color-select></td>
              </tr>
              <tr>
                <td>Chop</td>
                <td>
                  <color-select id="CHOPselectedColor"></color-select>
                </td>
                <td> <color-select id="CHOPdefaultColor" rgb-enum="0"></color-select></td>
              </tr>
              <tr>
                <td>Lock</td>
                <td>
                  <color-select id="LOCKselectedColor"></color-select>
                </td>
                <td> <color-select id="LOCKdefaultColor" rgb-enum="0"></color-select></td>
              </tr>
              <tr>
                <td>Salvo</td>
                <td>
                  <color-select id="SALVselectedColor"></color-select>
                </td>
                <td> <color-select id="SALVdefaultColor" rgb-enum="0"></color-select></td>
              </tr>
              <tr>
                <td>Shift</td>
                <td>
                  <color-select id="SHIFTselectedColor"></color-select>
                </td>
                <td> <color-select id="SHIFTdefaultColor" rgb-enum="0"></color-select></td>
              </tr>
              <tr>
                <td>Unassigned</td>
                <td>
                  <color-select id="UNselectedColor"></color-select>
                </td>
                <td> <color-select id="UNdefaultColor" rgb-enum="0"></color-select></td>
              </tr>

            </tbody>
          </table>
        </form>
      </div>
    </div>
    <!-- macro tab -->
    <div class="tab-pane fade" id="macros-tab" role="tabpanel" aria-labelledby="MacroButton">
      <div id="macros-container" style="max-width: 100%;">
        <!-- Macros will be added here -->
      </div>

    </div>
    <!-- key assignments tab -->
    <div class="tab-pane fade" id="keyassignments-tab" role="tabpanel" aria-labelledby="KeyAssignments">
      <div class="keyassignments-container" style="max-width: 100%;">
        <table id="keyassignments-table" class="table keyassignments">
          <thead>
            <tr>
              <th>ID</th>
              <th>Key Mode</th>
              <th style="min-width:10rem;">Value 1</th>
              <th style="min-width:10rem;">Value 2</th>
              <th style="min-width:10rem;">Value 3</th>
            </tr>
          </thead>
          <tbody id="keyassignments-table-body"></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!--Load Defaults confirmation modal-->
<div class="modal" id="loadDefaultsModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog"
  aria-labelledby="loadDefaultsModalLabel">
  <div class="modal-dialog modal-dialog-centered modal-remove-alias-size">
    <div class="modal-content">
      <div class="modal-header info-header justify-content-between">
        <span class="modal-title" id="loadDefaultsModalLabel"><i class="icon-restore icon-white"></i>Confirm Load
          Defaults</span>
        <span class="btn btn-transparent" onclick="hideDialog('loadDefaultsModal');"><i
            class="icon-close-header"></i></span>
      </div>
      <div class="modal-body">
        <p class="container-data">Are you sure you want to overwrite this configuration with default values?</p>
      </div>
      <div class="modal-footer justify-content-between">
        <button id="canceLoadDefaultsButton" class="btn btn-text btn-outline-secondary" tabindex="1"
          onclick="hideDialog('loadDefaultsModal');">Cancel</button>
        <button id="confirmLoadDefaultsButton" class="btn btn-text" tabindex="0"
          onclick="confirmLoadDefaults();">Apply</button>
      </div>
    </div>
  </div>
</div>

</main>
</body>

</html>

<script>
  const unassignedId = 4294967295;
  let currentButton = 0;
  let currentButtonData = [];
  let macrosData = null;
  let rcpConfigData = null;
  let keyConfigData = null;
  let BUTTON_QTY = 0;
  let keyConfigCache = null;
  let rcpConfigCache = null;
  let macrosCache = null;
  let macroNames = [];
  let sourceList = [];
  let destList = [];
  let levelList = [];
  let salvoList = [];
  let aliasSetList = [];
  let breakawayList = [{ id: 0, name: 'Tied' }]; //default if if not used because of PANEL_MODE. XPT accespts a BWY as third data value
  const protectionList = [{ id: 0, name: 'Enable'}, {id: unassignedId, name: 'Disable'}]

  // Lookup maps for fast ID-to-name conversion
  let destLookupMap = {};
  let sourceLookupMap = {};
  let salvoLookupMap = {};
  let levelLookupMap = {};
  let breakawayLookupMap = {};

  //panel mode to be suplied by system.  
  // LOCAL=stand-alone NRG, (Breakaways/levels disabled)
  // MASTER=Controler mode (this NRG controls other units. Beakaways/Levels enabled), 
  // REMOTE=External control (this NRG controlled by external Ultricore instance. Beakaways/Levels enabled)  
  let PANEL_MODE = {{ .PanelMode }};

  const NRG_IMAGES = {
    'NRG-1RU': "nrg-lcp-fr1.svg",
    'NRG-2RU': "nrg-lcp-fr2.svg"
  }

  let keyConfigCacheIsDirty = false;
  let rcpConfigCacheIsDirty = false;
  let macrosCacheIsDirty = false;

  // Suppress user event handling during initial hydration/population
  let suppressFormEvents = true;

  let buttonColorMaps = null;
  let sources = {};

  // Cache setter functions that update data and isDirty flags
  function setKeyConfigCache (newData, markDirty = true) {
    keyConfigCache = JSON.parse(JSON.stringify(newData));
    BUTTON_QTY = keyConfigCache.keyConfig.numKeysPerRow * keyConfigCache.keyConfig.numRows;
    if (markDirty) {
      keyConfigCacheIsDirty = true;
    }
    checkCacheDirty();
  }

  function setRcpConfigCache (newData, markDirty = true) {
    rcpConfigCache = JSON.parse(JSON.stringify(newData));
    if (markDirty) {
      rcpConfigCacheIsDirty = true;
    }
    checkCacheDirty();
  }

  function setMacrosCache (newData, markDirty = true) {
    macrosCache = JSON.parse(JSON.stringify(newData));
    if (markDirty) {
      macrosCacheIsDirty = true;
    }
    checkCacheDirty();
  }

  function updateConfigurationLabel(label) {
    $('#currentConfiguration').text(label);
  }

  async function checkDefaultConfiguration() {
    const [defaultRcpResponse, defaultKeyResponse, defaultMacroResponse] = await Promise.all([
      fetch("/lcp/files/get?file=default_RCPConfig").then(response => response.json()),
      fetch("/lcp/files/get?file=default_keyConfig").then(response => response.json()),
      fetch("/lcp/files/get?file=default_macros").then(response => response.json())
    ]);
    if (JSON.stringify(rcpConfigCache) !== JSON.stringify(defaultRcpResponse.content)) {
      updateConfigurationLabel("Custom configuration");
    } else if (JSON.stringify(keyConfigCache) !== JSON.stringify(defaultKeyResponse.content)) {
      updateConfigurationLabel("Custom configuration");
    } else if (JSON.stringify(macrosCache) !== JSON.stringify(defaultMacroResponse.content)) {
      updateConfigurationLabel("Custom configuration");
    }
  }

  // Helper function to get the processed macros array from the cache
  function getMacrosArray () {
    if (!macrosCache) return [];
    return createMacrosCache(macrosCache);
  }

  // Update specific parts of caches with isDirty tracking
  function updateKeyConfigCacheProperty (path, value, markDirty = true) {
    if (keyConfigCache) {
      // Handle nested property paths like 'keyConfig.keys'
      const pathParts = path.split('.');
      let current = keyConfigCache;

      // Navigate to the parent object
      for (let i = 0; i < pathParts.length - 1; i++) {
        if (current[pathParts[i]]) {
          current = current[pathParts[i]];
        } else {
          //Path  not found in keyConfigCache
          return;
        }
      }

      const lastKey = pathParts[pathParts.length - 1];
      const existingValue = current[lastKey];
      const newValueCopy = JSON.parse(JSON.stringify(value));
      const areEqual = (typeof existingValue === 'object' || typeof newValueCopy === 'object')
        ? JSON.stringify(existingValue) === JSON.stringify(newValueCopy)
        : existingValue === newValueCopy;
      if (areEqual) {
        return; // No change; avoid dirty state
      }

      // Set the final property only if changed
      current[lastKey] = newValueCopy;

      if (markDirty && !suppressFormEvents) {
        keyConfigCacheIsDirty = true;
        checkCacheDirty();
      }
    }
  }

  function updateRcpConfigCacheProperty (path, value, markDirty = true) {
    if (rcpConfigCache) {
      // Handle nested property paths like 'RCPConfig.keyOptions.DST.selectedColor.RGB_Enum'
      const pathParts = path.split('.');
      let current = rcpConfigCache;

      // Navigate to the parent object
      for (let i = 0; i < pathParts.length - 1; i++) {
        if (current[pathParts[i]]) {
          current = current[pathParts[i]];
        } else {
          //Path not found in rcpConfigCache
          return;
        }
      }

      const lastKey = pathParts[pathParts.length - 1];
      const existingValue = current[lastKey];
      const newValue = value;
      const areEqual = (typeof existingValue === 'object' || typeof newValue === 'object')
        ? JSON.stringify(existingValue) === JSON.stringify(newValue)
        : existingValue === newValue;
      if (areEqual) {
        return; // No change; avoid dirty state
      }

      // Set the final property only if changed
      current[lastKey] = newValue;

      if (markDirty && !suppressFormEvents) {
        rcpConfigCacheIsDirty = true;
        checkCacheDirty();
      }
    }
  }

  function updateMacrosCacheAtIndex (index, eventData, markDirty = true) {
    if (macrosCache && macrosCache.macros && index >= 0 && index < macrosCache.macros.length) {
      // Ensure macrosCache.macros exists and is an array
      if (!Array.isArray(macrosCache.macros)) {
        macrosCache.macros = [];
      }
      macrosCache.macros[index] = JSON.parse(JSON.stringify(eventData));
      if (markDirty) {
        macrosCacheIsDirty = true;
        checkCacheDirty();
      }
    }
  }


  // Functions to reset isDirty flags (typically called after save operations)
  function resetKeyConfigCacheDirty () {
    keyConfigCacheIsDirty = false;
    checkCacheDirty();
  }

  function resetRcpConfigCacheDirty () {
    rcpConfigCacheIsDirty = false;
    checkCacheDirty();
  }

  function resetMacrosCacheDirty () {
    macrosCacheIsDirty = false;
    checkCacheDirty();
  }

  function isAnyCacheDirty () {
    return keyConfigCacheIsDirty || rcpConfigCacheIsDirty || macrosCacheIsDirty;
  }

  function checkCacheDirty () {
    let saveBtnState = true;
    let saveBtn = $('#savebtn')
    saveBtn.removeClass("btn-active");
    if (keyConfigCacheIsDirty || rcpConfigCacheIsDirty || macrosCacheIsDirty) {
      saveBtn.addClass("btn-active");
      saveBtnState = false
    }
    saveBtn.prop("disabled", saveBtnState);
    $('#cancelbtn').prop("disabled", saveBtnState);
  }

  // Save API functions for each cache type
  async function saveKeyConfigCache () {
    if (!keyConfigCacheIsDirty || !keyConfigCache) {
      //Key config cache not dirty or empty, skipping save
      return;
    }

    try {
      //Saving key config cache...
      const formData = new FormData();
      formData.append('filename', 'keyConfig');
      formData.append('content', JSON.stringify(keyConfigCache));

      const response = await fetch('/lcp/files/post', {
        method: 'POST',
        body: formData
      });

      if (!response.ok) {
        throw new Error(`Key config save failed: ${response.status} ${response.statusText}`);
      }

      resetKeyConfigCacheDirty();
      //Key config cache saved successfully
    } catch (error) {
      console.error('Failed to save key config cache:', error);
      throw error;
    }
  }

  async function saveRcpConfigCache () {
    if (!rcpConfigCacheIsDirty || !rcpConfigCache) {
      return;
    }

    try {
      //Saving RCP config cache...
      const formData = new FormData();
      formData.append('filename', 'RCPConfig');
      formData.append('content', JSON.stringify(rcpConfigCache));

      const response = await fetch('/lcp/files/post', {
        method: 'POST',
        body: formData
      });

      if (!response.ok) {
        throw new Error(`RCP config save failed: ${response.status} ${response.statusText}`);
      }

      resetRcpConfigCacheDirty();
    } catch (error) {
      console.error('Failed to save RCP config cache:', error);
      throw error;
    }
  }

  async function saveMacrosCache () {
    if (!macrosCacheIsDirty || !macrosCache) {
      return;
    }

    try {
      //Saving macros cache...
      const formData = new FormData();
      formData.append('filename', 'macros');
      formData.append('content', JSON.stringify(macrosCache));

      const response = await fetch('/lcp/files/post', {
        method: 'POST',
        body: formData
      });

      if (!response.ok) {
        throw new Error(`Macros save failed: ${response.status} ${response.statusText}`);
      }

      resetMacrosCacheDirty();
    } catch (error) {
      console.error('Failed to save macros cache:', error);
      throw error;
    }
  }

  async function saveAllDirtyCaches () {
    const savePromises = [];

    // Only save caches that are dirty
    if (keyConfigCacheIsDirty) {
      savePromises.push(saveKeyConfigCache());
    }
    if (rcpConfigCacheIsDirty) {
      savePromises.push(saveRcpConfigCache());
    }
    if (macrosCacheIsDirty) {
      savePromises.push(saveMacrosCache());
    }

    if (savePromises.length === 0) {
      //No dirty caches to save
      return;
    }

    // Save all dirty caches in parallel
    try {
      await Promise.all(savePromises);

      showSaveNotification('All changes saved successfully', 'success');
    } catch (error) {
      console.error('Failed to save one or more caches:', error);
      showSaveNotification('Failed to save changes. Please try again.', 'error');
      throw error;
    }
  }

  // Manual save function (can be called by user action)
  async function manualSave () {
    if (!isAnyCacheDirty()) {
      showSaveNotification('No changes to save', 'info');
      return;
    }

    try {
      showSaveNotification('Saving changes...', 'info');
      await saveAllDirtyCaches();
    } catch (error) {
      // Error notification already shown in saveAllDirtyCaches
      console.error('Manual save failed:', error);
    }
  }

  // Simple notification system for save feedback
  function showSaveNotification (message, type = 'info') {
    console.log(`[${type.toUpperCase()}] ${message}`);
    const savedMsg = document.getElementById('saved');
    if (savedMsg) {
      savedMsg.style.display = 'block';
      setTimeout(() => {
        savedMsg.style.display = 'none';
      }, 2000);
    }
  }

  function loadDefaultsHandler () {
    displayDialog("loadDefaultsModal");
  }

  async function confirmLoadDefaults () {
    hideDialog('loadDefaultsModal');

    try {
      showSaveNotification('Loading default configuration...', 'info');

      // Fetch all three config files from the /tmp/lcpFiles/ directory using "default_" prefix
      const [rcpResponse, keyResponse, macroResponse] = await Promise.all([
        fetch("/lcp/files/get?file=default_RCPConfig").then(response => response.json()),
        fetch("/lcp/files/get?file=default_keyConfig").then(response => response.json()),
        fetch("/lcp/files/get?file=default_macros").then(response => response.json())
      ]);

      // Load into caches - marking as dirty so they'll be saved
      setRcpConfigCache(rcpResponse.content, true); // true = mark as dirty
      setKeyConfigCache(keyResponse.content, true); // true = mark as dirty
      setMacrosCache(macroResponse.content, true); // true = mark as dirty

      // Update UI with new values
      populateRCPConfig(rcpConfigCache);
      
      // Update key assignments and macros table if they're visible
      if (typeof createKeyAssignmentRows === 'function') {
        createKeyAssignmentRows();
      }
      if (typeof populateMacrosTableFromCache === 'function') {
        populateMacrosTableFromCache();
      }

      // Trigger saves to persist the loaded defaults
      await saveAllDirtyCaches();

      showSaveNotification('Default configuration loaded and saved successfully', 'success');
      
      // Optional: Reload page to ensure all UI is refreshed
      setTimeout(() => {
        window.location.reload();
      }, 1000);

    } catch (error) {
      console.error('Load defaults failed:', error);
      showSaveNotification('Failed to load default configuration. Please try again.', 'error');
    }
  }

  async function reloadConfigs () {
    try {
      const [rcpResponse, keyResponse, macroResponse] = await Promise.all([
        fetch("/lcp/files/get?file=RCPConfig").then(response => response.json()),
        fetch("/lcp/files/get?file=keyConfig").then(response => response.json()),
        fetch("/lcp/files/get?file=macros").then(response => response.json())
      ]);

      // Load into caches and clear dirty flags
      setRcpConfigCache(rcpResponse.content, false);
      resetRcpConfigCacheDirty();
      setKeyConfigCache(keyResponse.content, false);
      resetKeyConfigCacheDirty();
      setMacrosCache(macroResponse.content, false);
      resetMacrosCacheDirty();

      // Update UI with new values
      populateRCPConfig(rcpConfigCache);
      buttonColorMaps = createButtonColorMaps();
      updateAllButtonColors();
      // Update key assignments and macros table if they're visible
      if (typeof createKeyAssignmentRows === 'function') {
        createKeyAssignmentRows();
      }
      if (typeof populateMacrosTableFromCache === 'function') {
        populateMacrosTableFromCache();
      }
      buttonColorMaps = createButtonColorMaps();
      updateDependentUI();
      bwyNames = rcpConfigCache.RCPConfig.breakaways.filter(bwy => bwy.name).map((bwy, index) => ({ id: index + 1, value: bwy.name }));
      document.getElementById('cutbus1').selectById(String(rcpConfigCache.RCPConfig.cutbusDest[0]));
      document.getElementById('cutbus2').selectById(String(rcpConfigCache.RCPConfig.cutbusDest[1]));
    } catch (error) {
      console.error('Load defaults failed:', error);
      showSaveNotification('Failed to load default configuration. Please try again.', 'error');
    }
  }

  // Function to update RCP config cache from current form values
  function updateRcpConfigFromForm () {
    if (!rcpConfigCache) return;

    // Read all form values and update cache
    const updatedConfig = {
      destLabelAliasSet: parseInt(document.getElementById('aliasSets')?.value || '0'),
      srcLabelAliasSet: parseInt(document.getElementById('aliasSets')?.value || '0'),
      cutbusMode: parseInt(document.querySelector('input[name="cbMode"]:checked')?.value || 0),
      cutbusDest: [
        parseInt(document.getElementById('cutbus1')?.selected?.id || 0),
        parseInt(document.getElementById('cutbus2')?.selected?.id || 0)
      ],
      onBrightness: parseInt(document.getElementById('onBrightness')?.value || 0),
      breakawayReset: document.getElementById('bwyResetCheckbox')?.checked || false,
      breakawayWarningMode: parseInt(document.getElementById('bwayWarning')?.value || 0),
      mcEnabled: document.getElementById('mcEnabled')?.checked || false,
      mcLevel: parseInt(document.getElementById('mcLevel')?.value || 0),
      protectBlockMode: parseInt(document.querySelector('input[name="protectMode"]:checked')?.value || 0),
      breakaways: []
    };

    // Update breakaways
    if(PANEL_MODE !== "LOCAL") {//prevent non visible form elements defaulting to nothing in LOCAL mode
      for (let i = 1; i <= 16; i++) {
        const bitmaskElement = document.getElementById(`bwaymask-${i}`);
        const nameElement = document.getElementById(`bwayName-${i}`);
        updatedConfig.breakaways.push({
          pattern: bitmaskElement?.bitmask || 0,
          name: nameElement?.value || ''
        });
      }
    }
    else {
      updatedConfig.breakaways = rcpConfigCache.RCPConfig.breakaways;
    }

    // Update the cache with all changes at once
    Object.keys(updatedConfig).forEach(key => {
      updateRcpConfigCacheProperty(`RCPConfig.${key}`, updatedConfig[key]);
    });


  }

  // Function to setup single consolidated RCP config form listener
  function setupRcpConfigFormListeners () {
    // Find the RCP config form container - adjust selector as needed
    const rcpConfigContainer = document.querySelector('#tab-content-tab1') || document.body;
    const bwayContainer = document.querySelector('#breakaways-tab');

    // Add specific change listener for aliasSets select element
    const aliasSetsSelect = document.getElementById('aliasSets');
    if (aliasSetsSelect) {
      aliasSetsSelect.addEventListener('change', (e) => {
        if (suppressFormEvents) { return; }

        // Update the RCP config cache with the new alias set selection
        const selectedAliasSetId = e.target.value;

        fetchAliasData();
      });
    }

    bwayContainer.addEventListener('change', (e) => {
      if (suppressFormEvents) { return; }

      const [field, index] = e.target.id.split('-');
      const value = e.target.value;

      updateRcpConfigFromForm();
    });
    // Single change listener that handles all form changes
    rcpConfigContainer.addEventListener('change', (e) => {
      if (suppressFormEvents) { return; }
      // Check if the changed element is part of RCP config
      const isRcpConfigElement =
        e.target.matches('input[name="cbMode"]') ||
        e.target.matches('#cutbus1, #cutbus2') ||
        e.target.matches('#onBrightness') ||
        e.target.matches('#mcLevel, #bwayWarning, #aliasSets') ||
        e.target.matches('input[name="protectMode"]');

      if (e.target.matches('input[name="cbMode"]')) {
        if (parseInt(e.target.value) > 0) {
          document.getElementById("cutbus1").setDisabled(false);
          document.getElementById("cutbus2").setDisabled(false);
        } else {
          document.getElementById("cutbus1").setDisabled(true);
          document.getElementById("cutbus2").setDisabled(true);
        }
      }

      if (isRcpConfigElement) {
        updateRcpConfigFromForm();
      }
    });


  }

  // Color gradient definitions based on the original RCP-QE18 key colours
  const gradientColors = {
    0: { hue: 0, saturation: 0, lightness: [40, 35, 30] },       // off
    1: { hue: 180, saturation: 100, lightness: [50, 40, 30] },   // cyan
    2: { hue: 0, saturation: 0, lightness: [50, 40, 30] },       // 10% white
    3: { hue: 0, saturation: 0, lightness: [60, 50, 40] },       // light gray
    4: { hue: 0, saturation: 0, lightness: [70, 60, 50] },       // light gray
    5: { hue: 0, saturation: 0, lightness: [90, 80, 70] },       // white
    6: { hue: 0, saturation: 100, lightness: [50, 40, 30] },     // red
    7: { hue: 15, saturation: 100, lightness: [50, 40, 30] },    // red-orange
    8: { hue: 30, saturation: 100, lightness: [50, 40, 30] },    // orange
    9: { hue: 45, saturation: 100, lightness: [50, 40, 30] },    // yellow-orange
    10: { hue: 60, saturation: 100, lightness: [50, 40, 30] },   // yellow
    11: { hue: 75, saturation: 100, lightness: [50, 40, 30] },   // yellow-green
    12: { hue: 120, saturation: 100, lightness: [50, 40, 30] },  // green
    13: { hue: 150, saturation: 100, lightness: [50, 40, 30] },  // green-cyan
    14: { hue: 180, saturation: 100, lightness: [50, 40, 30] },  // cyan
    15: { hue: 225, saturation: 100, lightness: [50, 40, 30] },  // blue-cyan
    16: { hue: 270, saturation: 100, lightness: [50, 40, 30] },  // blue
    17: { hue: 300, saturation: 100, lightness: [50, 40, 30] },  // blue-purple
    18: { hue: 330, saturation: 100, lightness: [50, 40, 30] },  // purple
    19: { hue: 0, saturation: 100, lightness: [23, 20, 17] },    // dark red
    20: { hue: 15, saturation: 100, lightness: [23, 20, 17] },   // dark red-orange
    21: { hue: 30, saturation: 100, lightness: [23, 20, 17] },   // dark orange
    22: { hue: 45, saturation: 100, lightness: [23, 20, 17] },   // dark yellow-orange
    23: { hue: 60, saturation: 100, lightness: [23, 20, 17] },   // dark yellow
    24: { hue: 75, saturation: 100, lightness: [23, 20, 17] },   // dark yellow-green
    25: { hue: 120, saturation: 100, lightness: [23, 20, 17] },  // dark green
    26: { hue: 150, saturation: 100, lightness: [23, 20, 17] },  // dark green-cyan
    27: { hue: 180, saturation: 100, lightness: [23, 20, 17] },  // dark cyan
    28: { hue: 225, saturation: 100, lightness: [23, 20, 17] },  // dark blue-cyan
    29: { hue: 270, saturation: 100, lightness: [23, 20, 17] },  // dark blue
    30: { hue: 300, saturation: 100, lightness: [23, 20, 17] },  // dark purple
    31: { hue: 330, saturation: 100, lightness: [23, 20, 17] }   // dark purple-red
  };

  function clearButtonSelection (curButton = null) {
    const svg = document.getElementById("svg1");
    // Get all buttons with id starting with "btn" (excluding the svg itself)
    const allButtons = Array.from(svg.querySelectorAll('[id^="btn"]'));

    // Remove 'active-btn' from all buttons and reset text colors
    allButtons.forEach(btn => {
      btn.classList.remove("active-btn");
      const buttonNumber = btn.id.substring(3);
      const textElement = document.getElementById("text" + buttonNumber);
      if (textElement) {
        textElement.style.fill = ''; // Reset to default
      }
    });

    // If curButton > 0, add 'active-btn' to that button
    if (curButton > 0) {
      const targetBtn = document.getElementById("btn" + curButton);
      const targetTextElement = document.getElementById("text" + curButton);
      if (targetBtn) {
        targetBtn.classList.add("active-btn");

        // Set the stroke color to match the button's selected color
        const selectedColor = getButtonColor(curButton, buttonColorMaps, 'selected');
        const strokeColor = getStrokeColorFromGradient(selectedColor);
        targetBtn.style.setProperty('--active-stroke-color', strokeColor);
      }

      // Set text color to dark grey for the active button
      if (targetTextElement) {
        targetTextElement.style.fill = '#333333';
      }
    }
  }
  function resetButtonColors () {
    // Reset all button colors to default
    for (let i = 1; i <= 40; i++) {
      const button = document.getElementById(`btn${i}`);
      if (button) {
        const defaultColor = getButtonColor(i, buttonColorMaps, 'default');
        button.style.fill = `url(#grad${defaultColor})`;
      }
    }
  }

  function closeDialog () {
    currentButton = 0;
    hideDialog("buttonModal");
    resetButtonColors();
    clearButtonSelection();
  }

  function fillCutbusSelects () {
    cb1 = document.getElementById("cutbus1");
    cb1.options = formatListData(destList);

    cb2 = document.getElementById('cutbus2');
    cb2.options = formatListData(destList);
  }

  function formatListData (data) {
    return data.map(item => ({
      id: String(item.id), // Convert ID to string for compatibility
      value: item.name
    }));
  }

  // Lookup map creation functions for fast ID-to-name conversion
  function createDestinationLookupMap () {
    destLookupMap = {};
    destList.forEach(dest => {
      destLookupMap[dest.id] = dest.name;
    });
  }

  function createSourceLookupMap () {
    sourceLookupMap = {};
    sourceList.forEach(src => {
      sourceLookupMap[src.id] = src.name;
    });
  }
  function createSalvoLookupMap () {
    salvoLookupMap = {};
    salvoList.forEach(salvo => {
      salvoLookupMap[salvo.id] = salvo.name;
    });
  }

  function createLevelLookupMap () {
    levelLookupMap = {};

    const levelsToUse = levelList.length > 0 ? levelList : [{ "id": 0, "name": "SDI" }];

    levelsToUse.forEach(level => {
      levelLookupMap[level.id] = level.name;
    });
  }

  function createBreakawayList () {
    // Always start with the default "SDI" option so XPT has valid BWY in LOCAL mode
    breakawayList = [{ id: 0, name: 'SDI' }];

    // If PANEL_MODE is not LOCAL, populate from RCPConfig.breakaways
    if (PANEL_MODE !== "LOCAL" && rcpConfigCache && rcpConfigCache.RCPConfig && rcpConfigCache.RCPConfig.breakaways) {
      breakawayList = [];
      rcpConfigCache.RCPConfig.breakaways.forEach((breakaway, index) => {
        if (breakaway.name) {
          breakawayList.push({
            id: index,
            name: breakaway.name
          });
        }
      });
    }
    createBreakawayLookupMap();
  }

  function createBreakawayLookupMap () {
    breakawayLookupMap = {};
    // Breakaways come from rcpConfigCache.RCPConfig.breakaways
    if (rcpConfigCache && rcpConfigCache.RCPConfig && rcpConfigCache.RCPConfig.breakaways) {
      rcpConfigCache.RCPConfig.breakaways.forEach((breakaway, index) => {
        if (breakaway.name) {
          breakawayLookupMap[index] = breakaway.name;
        }
      });
    }
  }

  // Fast lookup helper functions
  function getDestinationNameById (id) {
    return destLookupMap[id] || `Id ${id} (Invalid)`;
  }

  function getSourceNameById (id) {
    return sourceLookupMap[id] || `Id ${id} (Invalid)`;
  }

  function getLevelNameById (id) {

    // Try direct lookup first
    let result = levelLookupMap[id];

    // If not found, try with +1 offset (0-based to 1-based conversion)
    if (!result && id >= 0) {
      result = levelLookupMap[id + 1];
    }

    // If still not found, try with -1 offset (1-based to 0-based conversion)
    if (!result && id > 0) {
      result = levelLookupMap[id - 1];
    }

    return result || `Lvl ${id}`;
  }

  function getMacroNameById (id) {
    return macroNames[id]?.value || `Macro ${id}`;
  }

  function getBreakawayNameById (id) {
    return breakawayLookupMap[id] || `Bway ${id}`;
  }

  function getSalvoNameById (id) {
    return salvoLookupMap[id] || `Id ${id} (Invalid)`;
  }

  function fillEventDataSelect (elementId, eventType, selectedId) {
    const selectElement = document.getElementById(elementId);
    if (!selectElement) return;
    let currentOptions = [];

    switch (eventType) {
      case 'DST'://DST
        currentOptions = formatListData(destList);
        selectElement.options = currentOptions;
        break;
      case 'SRC'://SRC
        currentOptions = formatListData(sourceList);
        selectElement.options = currentOptions;
        break;
      case 'PROT'://protect
        currentOptions = formatListData(protectionList);
        selectElement.options = currentOptions;
        break;
      case 'MACR'://macro
        if (rcpConfigCache && rcpConfigCache.RCPConfig && rcpConfigCache.RCPConfig.macroNames) {
          macroNames = rcpConfigCache.RCPConfig.macroNames.map((macroName, idx) => ({ id: idx, name: macroName }));
        }
        // Extract current macro number from elementId to prevent loops
        const macroMatch = elementId.match(/macro-(\d+)-event/);
        const currentMacroId = macroMatch ? macroMatch[1] : null;
        // If selectedId references the current macro, clear it before filtering to prevent errors
        if (selectedId && String(selectedId) === currentMacroId) {
          selectElement.clearSelection();
          selectedId = null;
        }
        // Filter out current macro to prevent circular references
        currentOptions = currentMacroId ? macroNames.filter(m => m.id !== currentMacroId - 1) : macroNames;
        selectElement.options = formatListData(currentOptions);
        break;
      case 'SALV'://salvo       
        currentOptions = formatListData(salvoList);
        selectElement.options = currentOptions;
        break;
    }

    // Validate and set the selected value
    if (selectedId && selectedId > 0) {
      // Validate that the selectedId still exists in the current options
      const isValidValue = validateValueExistsForEventType(eventType, selectedId, currentOptions);

      if (isValidValue) {
        selectElement.selectById(selectedId.toString());
      } else {
        // Value no longer exists, clear the selection
        selectElement.clearSelection();
      }
    } else {
      selectElement.selectById('0');
    }
  }

  // Add this new validation function for macro events
  function validateValueExistsForEventType (eventType, valueId, currentOptions) {
    if (!currentOptions || currentOptions.length === 0) {
      return false;
    }

    // Convert valueId to string for comparison (since options use string IDs)
    const valueIdStr = String(valueId);

    // Check if the value exists in the current options
    return currentOptions.some(option => option.id === valueIdStr);
  }

  function populateRCPConfig (config) {
    //populate the RCPConfig form from the config object
    if (!config) { return; }
    // Avoid firing change listeners during programmatic population
    const previousSuppress = suppressFormEvents;
    suppressFormEvents = true;
    // Populate aliasSets select element with options from aliasSetList
    const aliasSetsSelect = document.getElementById("aliasSets");
    if (aliasSetsSelect && aliasSetList && aliasSetList.length > 0) {

      aliasSetsSelect.innerHTML = '<option value="0" selected="selected">None</option>';

      aliasSetList.forEach(aliasSet => {
        const option = document.createElement('option');
        option.value = aliasSet.id;
        option.textContent = aliasSet.name;
        aliasSetsSelect.appendChild(option);
      });
    }
    document.getElementById("aliasSets").value = (config.RCPConfig.destLabelAliasSet);
    const cbModeValue = String(config.RCPConfig.cutbusMode);
    document.querySelectorAll('input[name="cbMode"]').forEach(r => { r.checked = (r.value === cbModeValue); });

    document.getElementById("onBrightness").value = config.RCPConfig.onBrightness;
    document.getElementById("bwyResetCheckbox").checked = config.RCPConfig.breakawayReset;
    document.getElementById("bwayWarning").value = config.RCPConfig.breakawayWarningMode;
    document.getElementById("mcEnabled").checked = config.RCPConfig.mcEnabled;
    document.getElementById("mcLevel").value = config.RCPConfig.mcLevel;
    const pModeValue = String(config.RCPConfig.protectBlockMode)
    document.querySelectorAll('input[name="protectMode"]').forEach(r => { r.checked = (r.value === pModeValue); });

    const cutbus1 = document.getElementById("cutbus1");
    const cutbus2 = document.getElementById("cutbus2");
    if (cbModeValue === '0') {
      cutbus1.setDisabled(true);
      cutbus2.setDisabled(true);
    } else {
      cutbus1.setDisabled(false);
      cutbus2.setDisabled(false);
    }

    //if bways enabled, populate the breakaway table
    if (PANEL_MODE != "LOCAL") {

      //function hydrateBwayTable(rows) {
      config.RCPConfig.breakaways.forEach((row, idx) => {
        const i = idx + 1;
        const nameEl = document.getElementById(`bwayName-${i}`);
        const gridEl = document.getElementById(`bwaymask-${i}`);
        if (nameEl) nameEl.value = row.name ?? '';
        if (gridEl && row.pattern !== undefined) gridEl.bitmask = row.pattern;
      });


    }


    //colors
    const keyOptions = Object.keys(config.RCPConfig.keyOptions || {});
    const colorTypes = ['selectedColor', 'defaultColor'];

    keyOptions.forEach(keyOption => {
      colorTypes.forEach(colorType => {
        const elementId = `${keyOption}${colorType}`;
        const element = document.getElementById(elementId);
        if (element && config.RCPConfig.keyOptions[keyOption] && config.RCPConfig.keyOptions[keyOption][colorType]) {
          element.setAttribute('rgb-enum', config.RCPConfig.keyOptions[keyOption][colorType].RGB_Enum);
        }
      });
    });


    // Restore previous suppression state
    suppressFormEvents = previousSuppress;
    aliasSetsSelect.focus();
  }



  /*---------------------------------BREAKAWAYS---------------------------------*/

  function createBwayRow (index) {
    const tr = document.createElement('tr');

    // ID cell
    const tdId = document.createElement('td');
    tdId.textContent = String(index);
    tr.appendChild(tdId);

    // Name input cell
    const tdName = document.createElement('td');
    const input = document.createElement('input');
    input.className = 'form-control rounded-1 number-size';
    input.type = 'text';
    input.id = `bwayName-${index}`;
    input.setAttribute('aria-labelledby', 'selection');
    tdName.appendChild(input);
    tr.appendChild(tdName);

    // Number grid component cell
    const tdGrid = document.createElement('td');
    const comp = document.createElement('number-grid-component');
    comp.id = `bwaymask-${index}`;
    tdGrid.appendChild(comp);
    tr.appendChild(tdGrid);

    // Empty cell (preserved)
    const tdEmpty = document.createElement('td');
    tr.appendChild(tdEmpty);

    return tr;
  }

  function buildBwayTable (rowCount = 16) {
    suppressFormEvents = true;
    const tbody = document.getElementById('bwayTableBody');
    if (!tbody) return;
    tbody.replaceChildren();
    for (let i = 1; i <= rowCount; i += 1) {
      tbody.appendChild(createBwayRow(i));
    }

    // Populate from cache if data is available
    if (rcpConfigCache?.RCPConfig?.breakaways) {
      const breakaways = rcpConfigCache.RCPConfig.breakaways;

      // Use setTimeout to ensure components are ready
      setTimeout(() => {
        const stillSuppressed = suppressFormEvents;
        suppressFormEvents = true;

        for (let i = 1; i <= Math.min(rowCount, breakaways.length); i++) {
          const breakaway = breakaways[i - 1];

          // Populate name
          const nameInput = document.getElementById(`bwayName-${i}`);
          if (nameInput && breakaway.name) {
            nameInput.value = breakaway.name;
          }

          // Populate bitmask
          const maskComponent = document.getElementById(`bwaymask-${i}`);
          if (maskComponent && typeof breakaway.pattern !== 'undefined') {
            maskComponent.bitmask = breakaway.pattern;
          }
        }

        suppressFormEvents = stillSuppressed;
      }, 0);
    }

    suppressFormEvents = false;
  }

  /*---------------------------------KEY ASSIGNMENTS---------------------------------*/


  const KEYMODE_OPTIONS = [
    { value: "Destination", id: 'DST', col1: "Default", col2: "Shift 1", col3: "Shift 2" },
    { value: "Source", id: 'SRC', col1: "Default", col2: "Shift 1", col3: "Shift 2" },
    { value: "Crosspoint", id: 'XPT', col1: "Destination", col2: "Source", col3: "Mask" },
    { value: "DST Shift 1", id: 'DST1', col1: "disabled", col2: "disabled", col3: "disabled" },
    { value: "DST Shift 2", id: 'DST2', col1: "disabled", col2: "disabled", col3: "disabled" },
    { value: "SRC Shift 1", id: 'SRC1', col1: "disabled", col2: "disabled", col3: "disabled" },
    { value: "SRC Shift 2", id: 'SRC2', col1: "disabled", col2: "disabled", col3: "disabled" },
    { value: "Macro", id: 'MACR', col1: "Macro", col2: "disabled", col3: "disabled" },
    { value: "Salvo", id: 'SALV', col1: "Salvo", col2: "disabled", col3: "disabled" },
    { value: "Level", id: 'LVL', col1: "Level", col2: "disabled", col3: "disabled" },
    { value: "Take", id: 'TAKE', col1: "disabled", col2: "disabled", col3: "disabled" },
    { value: "Take Cancel", id: 'UNTAKE', col1: "disabled", col2: "disabled", col3: "disabled" },
    { value: "Protect", id: 'PROT', col1: "disabled", col2: "disabled", col3: "disabled" },
    { value: "Panel Lock", id: 'LOCK', col1: "disabled", col2: "disabled", col3: "disabled" },
    { value: "Chop", id: 'CHOP', col1: "disabled", col2: "disabled", col3: "disabled" },
    { value: "Unassigned", id: 'UN', col1: "disabled", col2: "disabled", col3: "disabled" },
  ];

  const updateRowUI = (tr, initialValues = null) => {
    const headerCells = document.querySelectorAll("#keyassignments-table th");
    const keyModeSelect = tr.querySelector("select");
    const selectedOption = KEYMODE_OPTIONS.find((opt) => opt.id == keyModeSelect.value);
    const dropSelects = tr.querySelectorAll("drop-select");

    if (!selectedOption) return;

    // Store the current focus state
    const wasKeyModeFocused = document.activeElement === keyModeSelect;



    // Update options based on key mode       
    switch (selectedOption.id) {
      case "DST":
        const formattedDestList = formatListData(destList);
        dropSelects.forEach((ds, index) => {
          ds.options = formattedDestList;
        });
        break;
      case "SRC":
        const formattedSourceList = formatListData(sourceList);
        dropSelects.forEach((ds, index) => {
          ds.options = formattedSourceList;
        });
        break;
      case "XPT":
        if (dropSelects.length > 2) {
          dropSelects[0].options = formatListData(destList);
          dropSelects[1].options = formatListData(sourceList);
          dropSelects[2].options = [...formatListData(breakawayList)]; //, ...formatListData(levelList) maybe later?
        }
        break;
      case "MACR":
        // Only first column is enabled for Macro
        if (dropSelects.length > 0) {
          const macrosArray = getMacrosArray();
          const formattedMacros = macrosArray.map((macro, index) => ({
            id: String(index),
            value: `Macro ${index + 1}`
          }));
          dropSelects[0].options = formattedMacros;
        }
        break;
      case "SALV":
        if (dropSelects.length > 0) {
          dropSelects[0].options = formatListData(salvoList);
        }
        break;
      case "BRK":
        if (dropSelects.length > 0) {
          dropSelects[0].options = formatListData(breakawayList);
        }
        break;
      case "LVL":
        if (dropSelects.length > 0) {
          dropSelects[0].options = formatListData(levelList);
        }
        break;
      default:
        // For modes with all columns disabled (SRC1, SRC2, DST1, DST2, etc.)
        dropSelects.forEach((ds) => (ds.options = []));
        break;
    }

    // Set initial values if provided, with validation
    if (initialValues) {
      for (let j = 0; j < 3; j++) {
        if (initialValues[j] !== undefined) {
          // Validate that the value still exists in the current options
          const isValidValue = validateValueExists(selectedOption.id, initialValues[j], dropSelects[j].options);

          // Convert numeric ID to string value that matches the options
          let valueName;
          
            switch (selectedOption.id) {
              case "DST":
                valueName = getDestinationNameById(initialValues[j]);
                break;
              case "SRC":
                valueName = getSourceNameById(initialValues[j]);
                break;
              case "MACR":
                valueName = getMacroNameById(initialValues[j]);
                break;
              case "BRK":
                valueName = getBreakawayNameById(initialValues[j]);
                break;
              case "LVL":
                valueName = getLevelNameById(initialValues[j]);
                break;
              case "SALV":
                valueName = getSalvoNameById(initialValues[j]);
                break;
              default:
                valueName = String(initialValues[j]);
            }
          
          if (isValidValue) {
            // For modes with name conversion functions, use selectByValue
            if (["DST", "SRC", "MACR", "BRK", "LVL", "SALV"].includes(selectedOption.id)) {
              dropSelects[j].selectByValue(valueName);
            } else {
              // Use selectById for modes without name conversion (SALV, XPT, etc.)
              dropSelects[j].selectById(String(initialValues[j]));
            }
          } else {
            // Value no longer exists, show invalid selection message
            dropSelects[j].setInvalidSelection(initialValues[j], valueName, '');
          }
        }
      }
    }
  

    const cols = [selectedOption.col1, selectedOption.col2, selectedOption.col3];
    cols.forEach((col, index) => {
      const header = headerCells[index + 2];
      const dropSelect = dropSelects[index];

      if (col === "disabled") {
        header.textContent = `Value ${index + 1}`;
        header.classList.add("faded");
        dropSelect.setDisabled(true);
      } else {
        header.textContent = col;
        header.classList.remove("faded");
        dropSelect.setDisabled(false);
      }
    });

  };

  function validateValueExists (keyMode, valueId, currentOptions) {
    if (!currentOptions || currentOptions.length === 0) {
      return false;
    }

    const valueIdStr = String(valueId);
    return currentOptions.some(option => option.id === valueIdStr);
  }

  function updateKeyConfigFromRow (tr, rowIndex) {
    // Get the key mode select element
    const keyModeSelect = tr.querySelector('select');
    const dropSelects = tr.querySelectorAll('drop-select');

    if (!keyModeSelect || !dropSelects.length) {
      console.error('Could not find required elements in row');
      return;
    }

    // Get the selected key mode
    const selectedKeyMode = keyModeSelect.value;

    // Extract values from drop-selects
    let values = [];
    dropSelects.forEach((ds, index) => {      
       if (ds.disabled) {  // Skip disabled drop-selects - they should return 0
        values.push(0);
        return;
      }
      const selectedOption = ds.selected;
      if (selectedOption && selectedOption.id) {
        let numericId = parseInt(selectedOption.id) || 0;
        values.push(numericId);
      } else {
        values.push(0); // Default value if nothing selected
      }
    }); 

    // Handle SHIFT mode conversion
    let finalKeyMode = selectedKeyMode;
    const shifts = ["DST1", "DST2", "SRC1", "SRC2"];
    if (shifts.includes(selectedKeyMode)) {
      const shiftIndex = shifts.indexOf(selectedKeyMode);
      finalKeyMode = "SHIFT";
      values[0] = shiftIndex;
    }

    // Update the keyConfigCache
    const newKeyData = [finalKeyMode, values];

    // Use the existing update function to mark as dirty
    if (keyConfigCache && keyConfigCache.keyConfig && keyConfigCache.keyConfig.keys) {
      keyConfigCache.keyConfig.keys[rowIndex] = newKeyData;
      keyConfigCacheIsDirty = true;
      checkCacheDirty();

      // Update the button color for this key
      updateButtonColorForKey(rowIndex + 1, finalKeyMode);
    }
  }

  function updateButtonColorForKey (buttonNumber, keyType) {
    // Update button color maps with new key type
    buttonColorMaps = updateButtonColorMaps(buttonNumber, keyType, buttonColorMaps, rcpConfigCache);

    // Update the SVG button color
    const btnElement = document.getElementById("btn" + buttonNumber);
    if (btnElement) {
      const defaultColor = getButtonColor(buttonNumber, buttonColorMaps, 'default');
      btnElement.style.fill = `url(#grad${defaultColor})`;

      // If this button is currently selected, also update to selected color
      if (currentButton === buttonNumber) {
        const selectedColor = getButtonColor(buttonNumber, buttonColorMaps, 'selected');
        btnElement.style.fill = `url(#grad${selectedColor})`;
      }

    } else {
      console.warn(`Button element btn${buttonNumber} not found`);
    }
  }

  function createKeyAssignmentRows () {
    const tbody = document.getElementById('keyassignments-table-body');
    let numRows = 40;
    // for (let i = 1; i <= numRows; i++) {
    keyConfigCache.keyConfig.keys.forEach((keyData, index) => {
      const tr = document.createElement("tr");
      let keyMode = keyData[0];
      const values = keyData[1];

      if (keyMode === "SHIFT") {
        const shiftValue = values[0];
        const shiftTypes = ["DST1", "DST2", "SRC1", "SRC2"];
        keyMode = shiftTypes[shiftValue] || keyMode;
      }
      // Column 1: Row ID
      const td1 = document.createElement("td");
      td1.textContent = index + 1;
      tr.appendChild(td1);

      // Column 2: Key Mode Select
      const td2 = document.createElement("td");
      const selwrapper = document.createElement("div");
      selwrapper.className = "select-wrapper";
      selwrapper.style.minWidth = "4rem";
      const select = document.createElement("select");
      select.className = 'custom-select';
      select.id = `row-${index + 1}-keymode`;
      KEYMODE_OPTIONS.forEach((opt) => {
        const option = document.createElement("option");
        option.value = opt.id;
        option.textContent = opt.value;
        if (PANEL_MODE === "LOCAL" && (opt.id === "BRK" || opt.id === "BRKSTP")) {
          option.disabled = true;
        }
        select.appendChild(option);
      });

      // Set the initial key mode value based on keyData
      select.value = keyMode;

      select.addEventListener("change", () => {
        // Calculate default values based on the new key mode
        const newKeyMode = select.value;
        let defaultValues = null;
        
        // Set default values for each key mode
        switch (newKeyMode) {
          case "SRC":
          case "DST":
            // Default to "Unassigned" (4294967295) for all three columns
            defaultValues = [unassignedId, unassignedId, unassignedId];
            break;
          case "XPT":
            defaultValues = [unassignedId, unassignedId, 0];
            break;
          case "SALV":
            defaultValues = [unassignedId, 0, 0];
            break;           
          default:
            // No default values for other modes
            defaultValues = [0, 0, 0];
            break;
        }
        
        // Pass default values to updateRowUI so it can set them on the drop-selects
        updateRowUI(tr, defaultValues);
        // Defer updateKeyConfigFromRow to ensure DOM updates from updateRowUI are complete
        setTimeout(() => {
          updateKeyConfigFromRow(tr, index);
        }, 0);
       
      });
      selwrapper.appendChild(select);
      td2.appendChild(selwrapper);
      tr.appendChild(td2);

      // Columns 3, 4, 5: mode values
      const dropSelectOptions = [{ id: 0, value: 'default' }];

      for (let j = 0; j < 3; j++) {
        const td = document.createElement("td");
        const dropSelect = document.createElement("drop-select");
        dropSelect.id = `row-${index + 1}-value-${j + 1}`;
        dropSelect.options = dropSelectOptions;
        // Also set as data attribute
        // dropSelect.setAttribute('data-options', JSON.stringify(dropSelectOptions));
        td.appendChild(dropSelect);
        tr.appendChild(td);
      }

      tbody.appendChild(tr);
      updateRowUI(tr, values);

      // Add click event listener for row selection
      tr.addEventListener('click', (e) => {
        // Don't trigger row selection if clicking on the key mode select
        if (e.target.tagName === 'SELECT') {
          return;
        }
        handleRowSelect(e);
      });

      // Add event listeners to form controls within the row
      const selectedRow = tr.querySelector('select');
      const dropSelects = tr.querySelectorAll('drop-select');

      // Select row when any control is interacted with
      selectedRow.addEventListener('click', handleRowSelect);
      selectedRow.addEventListener('change', handleRowSelect);
      dropSelects.forEach(ds => {
        // Only handle row selection on drop-select clicks, not on the key mode select
        ds.addEventListener('click', (e) => {
          // Don't trigger row selection if clicking on disabled drop-selects
          if (!ds.disabled) {
            handleRowSelect(e);
          }
        });
        ds.addEventListener('change', (e) => {
          updateKeyConfigFromRow(tr, index);
          handleRowSelect(e);
        });
      });
    });
  }

  const handleRowSelect = (e) => {
    // If no event is provided, we can't determine which row to select
    if (!e || !e.target) return;

    const tr = e.target.closest("tr");
    if (!tr) return;

    // Don't update UI if the key mode select is focused
    const keyModeSelect = tr.querySelector('select');
    if (document.activeElement === keyModeSelect) {
      return;
    }

    const currentlySelected = document.querySelector("tr.selected");
    if (currentlySelected) {
      currentlySelected.classList.remove("selected");
    }
    tr.classList.add("selected");

    // When a row is selected, update its UI based on its current state
    updateRowUI(tr);

    // Highlight the corresponding button in the SVG
    highlightButtonForRow(tr);
  };

  const handleRowSelectOnly = (e) => {
    // If no event is provided, we can't determine which row to select
    if (!e || !e.target) return;

    const tr = e.target.closest("tr");
    if (!tr) return;

    const currentlySelected = document.querySelector("tr.selected");
    if (currentlySelected) {
      currentlySelected.classList.remove("selected");
    }
    tr.classList.add("selected");

    // Highlight the corresponding button in the SVG
    highlightButtonForRow(tr);
  };

  /*---------------------------------MACROS---------------------------------*/


  function addMacroEvent (macroNum, eventNum = 0, eventData = null, updateCache = true) {
    //add a new event to the macro table
    let table = document.getElementById('macro-' + macroNum + '-events-table');
    table.classList.add('event-table');
    let eventCount = eventNum == 0 ? table.rows.length + 1 : eventNum;
    const newRow = document.createElement('tr');
    newRow.id = `macro-${macroNum}-event-${eventCount}-row`;
    newRow.innerHTML = `
          <td style="padding-inline: 6px;">${eventCount}</td>
      <td>
          <div class="select-wrapper" style="min-width:4rem;">
            <select class="custom-select" id="macro-${macroNum}-event-${eventCount}-type" name="eventType">
              <option value=0>Switch</option>
              <option value=1>Macro</option>
              <option value=2>Protect</option>
              <option value=3>Salvo</option>
            </select>
          </div>
        </td>
        <td>
          <drop-select class="" name="eventPrimary" id="macro-${macroNum}-event-${eventCount}-primary" aria-labelledby="c">
          </drop-select>
        </td>
        <td>
          <drop-select class="" name="eventSrc" id="macro-${macroNum}-event-${eventCount}-secondary" aria-labelledby="eventSrc">
          </drop-select>
        </td>
        <td><number-grid-component id="macro-${macroNum}-event-${eventCount}-lvlmask"></number-grid-component></td> 
        <td><button class="btn btn-text" id="macro-${macroNum}-event-${eventCount}-delete">Delete</button></td>`;
    table.appendChild(newRow);

    poplateMacroEvent(macroNum, eventCount, eventData);

    // Update the macrosCache to capture the new event (only if updateCache is true)
    if (updateCache) {
      updateMacrosCacheFromTable(macroNum);
    }

  }

  function poplateMacroEvent (macroNum, eventNum, eventData) {

    if (eventData) {
      document.getElementById(`macro-${macroNum}-event-${eventNum}-type`).value = eventData[0];
      document.getElementById(`macro-${macroNum}-event-${eventNum}-lvlmask`).bitmask = 0;// prevent startup event triggering???? Thanks for nothing Claude...
      switch (eventData[0]) {
        case 0://switch
          fillEventDataSelect(`macro-${macroNum}-event-${eventNum}-primary`, 'DST', eventData[1]);
          fillEventDataSelect(`macro-${macroNum}-event-${eventNum}-secondary`, 'SRC', eventData[2]);
          document.getElementById(`macro-${macroNum}-event-${eventNum}-lvlmask`).bitmask = eventData[3];
          break;
        case 1://macro
          fillEventDataSelect(`macro-${macroNum}-event-${eventNum}-primary`, 'MACR', eventData[1]);
          document.getElementById(`macro-${macroNum}-event-${eventNum}-secondary`).setAttribute('disabled', '');

          document.getElementById(`macro-${macroNum}-event-${eventNum}-lvlmask`).setAttribute('disabled', '');
          break;
        case 2://protect
          fillEventDataSelect(`macro-${macroNum}-event-${eventNum}-primary`, 'DST', eventData[1]);
          fillEventDataSelect(`macro-${macroNum}-event-${eventNum}-secondary`, 'PROT', eventData[2]);
          document.getElementById(`macro-${macroNum}-event-${eventNum}-lvlmask`).bitmask = eventData[3];
          break;
        case 3://salvo
          fillEventDataSelect(`macro-${macroNum}-event-${eventNum}-primary`, 'SALV', eventData[1]);
          document.getElementById(`macro-${macroNum}-event-${eventNum}-secondary`).setAttribute('disabled', '');
          document.getElementById(`macro-${macroNum}-event-${eventNum}-lvlmask`).setAttribute('disabled', '');
          break;
      }

    } else {
      //no eventData, default to switch
      document.getElementById(`macro-${macroNum}-event-${eventNum}-type`).value = 0;
      fillEventDataSelect(`macro-${macroNum}-event-${eventNum}-primary`, 'DST');
      fillEventDataSelect(`macro-${macroNum}-event-${eventNum}-secondary`, 'SRC');
      document.getElementById(`macro-${macroNum}-event-${eventNum}-lvlmask`).bitmask = 1;
    }
  }

  function createMacrosTable () {
    // This function creates a table in the macros-container, with each row populated from rcpConfigCache.macroNames.
    const macrosContainer = document.getElementById('macros-container');
    // Clear any existing content
    macrosContainer.innerHTML = '';

    // Check if macroNames exists and is an array
    if (!rcpConfigCache || !Array.isArray(rcpConfigCache.RCPConfig.macroNames)) {
      macrosContainer.innerHTML = '<div class="text-danger">No macros found in configuration.</div>';
      return;
    }

    // Create table
    const table = document.createElement('table');
    table.className = 'table align-middle';
    // table.style.maxWidth = '56rem';
    table.style.color = 'var(--text-normal)';
    table.style.margin = 'auto';

    const headerRow = document.createElement('thead');
    headerRow.style.zIndex = '10';
    const headerRowTr = document.createElement('tr');
    const headerRowTh1 = document.createElement('th');
    const headerRowTh2 = document.createElement('th');
    headerRowTh1.textContent = 'Macro';
    headerRowTr.appendChild(headerRowTh1);
    headerRowTh2.textContent = 'Events';
    headerRowTr.appendChild(headerRowTh2);
    headerRow.appendChild(headerRowTr);
    table.appendChild(headerRow);


    // Table body
    const tbody = document.createElement('tbody');

    rcpConfigCache.RCPConfig.macroNames.forEach((macroName, idx) => {
      const row = document.createElement('tr');
      const macroNum = idx + 1;
      row.id = `macro-row-${macroNum}`;
      macroNames.push({ id: idx, value: macroName });

      // Macro name cell
      const nameCell = document.createElement('td');
      nameCell.textContent = macroName;
      nameCell.style.width = '5rem';

      // Action cell with button
      const actionCell = document.createElement('td');
      actionCell.id = `macro-row-${macroNum}-action`;
      actionCell.style.padding = '0';
      const btn = document.createElement('button');
      btn.className = 'btn btn-text';
      btn.style.margin = '0.5rem';
      btn.textContent = 'Add Event';
      btn.id = `addEvent-macro-${macroNum}-event`;
      btn.onclick = () => addMacroEvent(macroNum, 0, [0, 0, 0, 1]);

      const eventTable = document.createElement('table');
      eventTable.id = `macro-${macroNum}-events-table`;

      actionCell.appendChild(eventTable);
      actionCell.appendChild(btn);

      row.appendChild(nameCell);
      row.appendChild(actionCell);
      tbody.appendChild(row);
    });

    table.appendChild(tbody);
    macrosContainer.appendChild(table);
  }

  function populateMacrosTableFromCache () {
    const macrosArray = getMacrosArray();
    if (!Array.isArray(macrosArray)) return;

    macrosArray.forEach((macroEvents, macroIdx) => {
      const macroNum = macroIdx + 1;
      if (!Array.isArray(macroEvents)) return;
      macroEvents.forEach((eventData, eventIdx) => {
        // eventIdx is zero-based, event number is eventIdx + 1
        // Don't update cache during initial population to avoid marking as dirty
        addMacroEvent(macroNum, eventIdx + 1, eventData, false);
      });
    });
  }

  function updateMacrosTable (updatedMacroIndex = null) {
    // Rebuild the macros events UI from the current cache.
    // If updatedMacroIndex is provided (0-based), only that macro row is rebuilt.
    const macrosContainer = document.getElementById('macros-container');
    if (!macrosContainer) return;

    const macrosArray = getMacrosArray();
    if (!Array.isArray(macrosArray)) return;

    // Ensure the base table exists
    if (macrosContainer.children.length === 0) {
      createMacrosTable();
    }

    // Update macro names, if available
    if (rcpConfigCache && rcpConfigCache.RCPConfig && Array.isArray(rcpConfigCache.RCPConfig.macroNames)) {
      rcpConfigCache.RCPConfig.macroNames.forEach((macroName, idx) => {
        const macroNum = idx + 1;
        const nameCell = document.querySelector(`#macro-row-${macroNum} td:first-child`);
        if (nameCell) nameCell.textContent = macroName;
      });
    }

    const rebuildMacroEvents = (macroIndex) => {
      const macroNum = macroIndex + 1;
      const eventTable = document.getElementById(`macro-${macroNum}-events-table`);
      if (!eventTable) return;

      // Clear existing rows
      eventTable.innerHTML = '';

      const macroEvents = Array.isArray(macrosArray[macroIndex]) ? macrosArray[macroIndex] : [];
      macroEvents.forEach((eventData, eventIdx) => {
        // Do not update cache while rehydrating UI
        addMacroEvent(macroNum, eventIdx + 1, eventData, false);
      });
    };

    if (updatedMacroIndex !== null && updatedMacroIndex >= 0 && updatedMacroIndex < macrosArray.length) {
      rebuildMacroEvents(updatedMacroIndex);
    } else {
      for (let i = 0; i < macrosArray.length; i++) {
        rebuildMacroEvents(i);
      }
    }
  }

  function macroEvent (event) {

    // Handle macro event type changes
    const macroEventTypePattern = /^macro-(\d+)-event-(\d+)-type$/;
    const typeMatch = event.target.id.match(macroEventTypePattern);

    if (typeMatch) {
      // Only handle change events for type changes, not click events
      if (event.type !== 'change') {
        return;
      }

      const macroNumber = parseInt(typeMatch[1]);
      const eventNumber = parseInt(typeMatch[2]);
      const selectedValue = event.target.value;

      // Handle the change based on the selected value
      handleMacroEventTypeChange(macroNumber, eventNumber, selectedValue, event.target);
      return;
    }

    // Handle macro event delete button clicks
    const macroEventDeletePattern = /^macro-(\d+)-event-(\d+)-delete$/;
    const deleteMatch = event.target.id.match(macroEventDeletePattern);

    if (deleteMatch) {
      const macroNumber = parseInt(deleteMatch[1]);
      const eventNumber = parseInt(deleteMatch[2]);

      deleteMacroEvent(macroNumber, eventNumber);
      return;
    }
    if (event.type == 'change') {
      // Skip if this is a type change event (already handled above)
      if (event.target.id.match(/^macro-(\d+)-event-(\d+)-type$/)) {
        return;
      }

      const macroEventPattern = /^macro-(\d+)-event-(\d+)-/;
      const match = event.target.id.match(macroEventPattern);
      if (match) {
        const macroNumber = parseInt(match[1]);
        updateMacrosCacheFromTable(macroNumber);
      }

    }

  }

  function deleteMacroEvent (macroNum, eventNum) {
    // Get the table and the row to delete
    const table = document.getElementById(`macro-${macroNum}-events-table`);
    const rowToDelete = document.getElementById(`macro-${macroNum}-event-${eventNum}-row`);

    if (!table || !rowToDelete) {
      console.error(`Could not find table or row for macro ${macroNum}, event ${eventNum}`);
      return;
    }

    // Remove the row from the table
    table.removeChild(rowToDelete);
    // Update row numbers for remaining events
    updateMacroEventNumbers(macroNum);
    // Update the macrosCache to reflect the deletion
    updateMacrosCacheFromTable(macroNum);

  }

  function updateMacroEventNumbers (macroNum) {
    const table = document.getElementById(`macro-${macroNum}-events-table`);
    if (!table) return;

    // Get all rows except the header
    const rows = Array.from(table.rows); //.slice(1); // Skip header row

    rows.forEach((row, index) => {
      const newEventNum = index + 1;

      // Update row ID
      row.id = `macro-${macroNum}-event-${newEventNum}-row`;

      // Update event number in first column
      const firstCell = row.cells[0];
      if (firstCell) {
        firstCell.textContent = newEventNum;
      }

      // Find all elements within this row that have IDs matching the macro event pattern
      const elementsInRow = row.querySelectorAll('[id*="macro-"][id*="-event-"]');

      elementsInRow.forEach(element => {
        // Extract the current ID and replace the event number part
        const currentId = element.id;
        // Pattern: macro-{macroNum}-event-{oldEventNum}-{suffix}
        const idPattern = new RegExp(`^(macro-${macroNum}-event-)(\\d+)(-.*)?$`);
        const match = currentId.match(idPattern);

        if (match) {
          const prefix = match[1]; // "macro-{macroNum}-event-"
          const suffix = match[3] || ''; // "-type", "-primary", etc. (or empty string)
          const newId = `${prefix}${newEventNum}${suffix}`;

          element.id = newId;

          // Update name attributes for form elements
          if (element.name && element.name.includes('event')) {
            element.name = element.name.replace(/event\d+/, `event${newEventNum}`);
          }
        }
      });
    });
  }

  function handleMacroEventTypeChange (macroNumber, eventNumber, selectedValue, element) {
    // Get the associated elements for this macro event
    const primaryElement = document.getElementById(`macro-${macroNumber}-event-${eventNumber}-primary`);
    const secondaryElement = document.getElementById(`macro-${macroNumber}-event-${eventNumber}-secondary`);
    const lvlmaskElement = document.getElementById(`macro-${macroNumber}-event-${eventNumber}-lvlmask`);

    // Handle different event types
    switch (parseInt(selectedValue)) {
      case 0: // Switch

        if (primaryElement) {
          // Fill primary element with DST options
          fillEventDataSelect(`macro-${macroNumber}-event-${eventNumber}-primary`, 'DST', 0);
          secondaryElement.style.pointerEvents = '';
          secondaryElement.setDisabled(false);
          fillEventDataSelect(`macro-${macroNumber}-event-${eventNumber}-secondary`, 'SRC', 0);
          lvlmaskElement.disabled = false;
          lvlmaskElement.bitmask = 1;
        }
        break;
      case 1: // Macro
        if (primaryElement) {
          // Fill primary element with Macro options
          fillEventDataSelect(`macro-${macroNumber}-event-${eventNumber}-primary`, 'MACR');
          // Temporarily prevent focus events
          secondaryElement.style.pointerEvents = 'none';
          secondaryElement.setDisabled(true);
          // Restore pointer events after a brief delay
          setTimeout(() => {
            secondaryElement.style.pointerEvents = '';
          }, 50);
          lvlmaskElement.bitmask = 0;
          lvlmaskElement.setAttribute('disabled', '');
        }
        break;
      case 2: // Protect

        if (primaryElement) {
          // Fill primary element with Protect options
          fillEventDataSelect(`macro-${macroNumber}-event-${eventNumber}-primary`, 'DST', 0);
          fillEventDataSelect(`macro-${macroNumber}-event-${eventNumber}-secondary`, 'PROT', 0);
          lvlmaskElement.disabled = false;
          lvlmaskElement.bitmask = 1;

          // Temporarily prevent focus events
          secondaryElement.style.pointerEvents = 'none';
          secondaryElement.setDisabled(false);
          // Restore pointer events after a brief delay
          setTimeout(() => {
            secondaryElement.style.pointerEvents = '';
          }, 50);
        }
        break;
      case 3: // Salvo

        if (primaryElement) {
          // Fill primary element with Salvo options
          fillEventDataSelect(`macro-${macroNumber}-event-${eventNumber}-primary`, 'SALV',0);

          // Temporarily prevent focus events
          secondaryElement.style.pointerEvents = 'none';
          secondaryElement.setDisabled(true);
          // Restore pointer events after a brief delay
          setTimeout(() => {
            secondaryElement.style.pointerEvents = '';
          }, 50);
          lvlmaskElement.bitmask = 0;
          lvlmaskElement.setAttribute('disabled', '');
        }
        break;
      default:
        console.log(`Unknown event type: ${selectedValue}`);
    }

    // Update the cache to trigger save after event type change
    updateMacrosCacheFromTable(macroNumber);
  }

  function createMacrosCache (sourceData) {
    // Handle both direct array and object with macros property

    let macroArray;
    if (Array.isArray(sourceData)) {
      macroArray = sourceData;
    } else if (sourceData && Array.isArray(sourceData.macros)) {
      macroArray = sourceData.macros;
    } else {
      console.error('Invalid macro data format - expected {macros: [[]...]} or array');
      return [];
    }

    // Create cache maintaining complete array structure for all macro slots
    // This ensures proper indexing for setMacrosCache and other functions
    const cache = [];

    macroArray.forEach((macroEvents, index) => {
      // Always add to cache to maintain complete array structure
      if (Array.isArray(macroEvents)) {
        // Deep copy the macro events
        cache[index] = JSON.parse(JSON.stringify(macroEvents));
      } else {
        // Initialize as empty array for non-array elements
        cache[index] = [];
      }
    });

    return cache;
  }

  function updateMacrosCacheFromTable (macroNum) {
    // Get the table for this macro
    const table = document.getElementById(`macro-${macroNum}-events-table`);
    if (!table) {
      console.error(`Could not find table for macro ${macroNum}`);
      return;
    }

    // Get all rows except the header (if any)
    const rows = Array.from(table.rows);

    // Create new events array for this macro
    const events = [];

    rows.forEach((row, index) => {
      const eventNum = index + 1;

      // Get references to the form elements
      const typeElement = document.getElementById(`macro-${macroNum}-event-${eventNum}-type`);
      const primaryElement = document.getElementById(`macro-${macroNum}-event-${eventNum}-primary`);
      const secondaryElement = document.getElementById(`macro-${macroNum}-event-${eventNum}-secondary`);
      const lvlmaskElement = document.getElementById(`macro-${macroNum}-event-${eventNum}-lvlmask`);

      if (typeElement && primaryElement && secondaryElement && lvlmaskElement) {
        // Extract values based on element type
        const eventType = parseInt(typeElement.value) || 0;
        const primary = primaryElement.selected ? parseInt(primaryElement.selected.id) || 0 : 0;
        const secondary = secondaryElement.selected ? parseInt(secondaryElement.selected.id) || 0 : 0;
        const levelMask = lvlmaskElement.bitmask || 0;

        // Create event array: [eventType, primary, secondary, levelMask]
        events.push([eventType, primary, secondary, levelMask]);
      }
    });

    // Update the macrosCache (convert 1-based macro number to 0-based array index)
    const cacheIndex = macroNum - 1;
    const macrosArray = getMacrosArray();
    if (cacheIndex >= 0 && cacheIndex < macrosArray.length) {
      updateMacrosCacheAtIndex(cacheIndex, events);
    } else {
      console.error(`Invalid macro number ${macroNum} for cache update`);
    }
  }

  /*---------------------------------BUTTON LOGIC---------------------------------*/
  function handleImageClick (e) {

    if (e.target.id.startsWith("btn")) {
      // Store previous button to reset its color
      const previousButton = currentButton;
      currentButton = e.target.id.substring(3);

      // Reset previous button color to default if there was one
      if (previousButton > 0 && previousButton != currentButton) {
        const prevButton = document.getElementById("btn" + previousButton);
        const prevTextElement = document.getElementById("text" + previousButton);
        if (prevButton) {
          const defaultColor = getButtonColor(previousButton, buttonColorMaps, 'default');
          prevButton.style.fill = `url(#grad${defaultColor})`;
        }
        // Reset previous button text color to default
        if (prevTextElement) {
          prevTextElement.style.fill = ''; // Reset to default
        }
      }

      // Set current button to selected color
      const currButton = document.getElementById("btn" + currentButton);
      const currTextElement = document.getElementById("text" + currentButton);
      if (currButton) {
        const selectedColor = getButtonColor(currentButton, buttonColorMaps, 'selected');
        currButton.style.fill = `url(#grad${selectedColor})`;

        // Set the stroke color for the focus ring
        const strokeColor = getStrokeColorFromGradient(selectedColor);
        currButton.style.setProperty('--active-stroke-color', strokeColor);
      }

      // Set current button text to dark grey for better contrast
      if (currTextElement) {
        currTextElement.style.fill = '#333333';
      }

      //clear otherButtons
      clearButtonSelection(currentButton);

      // Switch to Key Assignments tab and select the corresponding row
      selectKeyAssignmentRow(currentButton);
    }

  }

  function highlightButtonForRow (tr) {
    // Get the row index from the first cell (row number)
    const rowNumberCell = tr.querySelector('td:first-child');
    if (!rowNumberCell) return;

    const rowNumber = parseInt(rowNumberCell.textContent);
    const buttonNumber = rowNumber; // Row number corresponds to button number    

    // Store previous button to reset its color
    const previousButton = currentButton;
    currentButton = buttonNumber;

    // Reset previous button color to default if there was one
    if (previousButton > 0 && previousButton != currentButton) {
      const prevButton = document.getElementById("btn" + previousButton);
      const prevTextElement = document.getElementById("text" + previousButton);
      if (prevButton) {
        const defaultColor = getButtonColor(previousButton, buttonColorMaps, 'default');
        prevButton.style.fill = `url(#grad${defaultColor})`;
      }
      // Reset previous button text color to default
      if (prevTextElement) {
        prevTextElement.style.fill = ''; // Reset to default
      }
    }

    // Set current button to selected color
    const currButton = document.getElementById("btn" + currentButton);
    const currTextElement = document.getElementById("text" + currentButton);
    if (currButton) {
      const selectedColor = getButtonColor(currentButton, buttonColorMaps, 'selected');
      currButton.style.fill = `url(#grad${selectedColor})`;

      // Set the stroke color for the focus ring
      const strokeColor = getStrokeColorFromGradient(selectedColor);
      currButton.style.setProperty('--active-stroke-color', strokeColor);
    }

    // Set current button text to dark grey for better contrast
    if (currTextElement) {
      currTextElement.style.fill = '#333333';
    }

    // Clear other buttons
    clearButtonSelection(currentButton);
  }

  function selectKeyAssignmentRow (buttonNumber) {
    // Switch to Key Assignments tab if not already active
    const keyAssignmentsTab = document.getElementById('KeyAssignments');
    const keyAssignmentsTabPane = document.getElementById('keyassignments-tab');

    if (keyAssignmentsTab && keyAssignmentsTabPane) {
      // Remove active class from all tabs and add to Key Assignments tab
      document.querySelectorAll('.tab-button').forEach(tab => {
        tab.classList.remove('active');
        tab.setAttribute('aria-selected', 'false');
      });

      document.querySelectorAll('.tab-pane').forEach(pane => {
        pane.classList.remove('show', 'active');
      });

      // Activate Key Assignments tab
      keyAssignmentsTab.classList.add('active');
      keyAssignmentsTab.setAttribute('aria-selected', 'true');
      keyAssignmentsTabPane.classList.add('show', 'active');
    }

    // Find and select the corresponding row (button number - 1 for 0-based index)
    const rowIndex = buttonNumber - 1;
    const tableBody = document.getElementById('keyassignments-table-body');
    const targetRow = tableBody.children[rowIndex];

    if (targetRow) {
      // Remove selection from all other rows
      document.querySelectorAll('#keyassignments-table tr').forEach(tr => {
        tr.classList.remove('selected');
      });
      // Select the target row
      targetRow.classList.add('selected');
      targetRow.style.scrollMarginTop = '50px';
      targetRow.scrollIntoView({ behavior: 'smooth', block: 'start', container: 'nearest' });
    }
  }

  // Handle clicks outside the key assignments table to deselect rows
  document.addEventListener('click', (e) => {
    const keyAssignmentsTable = document.getElementById('keyassignments-table');
    const keyAssignmentsTab = document.getElementById('keyassignments-tab');

    // Check if click is outside the key assignments table and the tab is active
    // Also check that the click is not on a button (to avoid interfering with button clicks)
    if (keyAssignmentsTable && keyAssignmentsTab &&
      !keyAssignmentsTable.contains(e.target) &&
      !e.target.id.startsWith('btn') &&
      keyAssignmentsTab.classList.contains('active')) {

      // Deselect any selected row
      const selectedRow = document.querySelector('#keyassignments-table tr.selected');
      if (selectedRow) {
        selectedRow.classList.remove('selected');
        resetButtonColors();
        clearButtonSelection();

      }
    }
  });


  function assignButtonColors () {
    for (let i = 0; i < BUTTON_QTY; i++) {
      const btn = document.getElementById(`btn${i + 1}`);
      const keyType = keyConfigCache.keyConfig.keys[i][0];
      const defaultColor = rcpConfigCache.RCPConfig.keyOptions[keyType].defaultColor.RGB_Enum;

      if (defaultColor) {
        btn.setAttribute('fill', `url(#grad${defaultColor})`);
      } else {
        btn.setAttribute('fill', `url(#gradDef)`);
      }
    }
  }

  // Custom tooltip for SVG elements as bs tooltip does not handle svg elements 
  function showBtnTip (button, text) {
    let tooltip = document.getElementById("btntip");
    const buttonRect = button.getBoundingClientRect();

    tooltip.innerHTML = text;
    tooltip.style.display = "block";

    // Position above the button
    tooltip.style.left = (buttonRect.left + buttonRect.width - tooltip.offsetWidth / 2) + 'px';
    tooltip.style.top = (buttonRect.top - tooltip.offsetHeight - 5) + 'px';
  }

  function hideBtnTip () {
    var tooltip = document.getElementById("btntip");
    tooltip.style.display = "none";
  }

  function handleButtonHover (button, isHovering) {
    // const button = e.target;
    const buttonNumber = parseInt(button.id.substring(3));
    const textElement = document.getElementById(`text${buttonNumber}`);


    if (isHovering) {
      const selectedColor = getButtonColor(buttonNumber, buttonColorMaps, 'selected');

      // const selectedColor = selectedButtonMap[buttonNumber];
      button.style.fill = `url(#grad${selectedColor})`;
      button.style.transition = 'all 0.2s ease';

      // Change text color to dark grey for better contrast on hover
      if (textElement) {
        textElement.style.fill = '#333333';
        textElement.style.transition = 'fill 0.2s ease';
      }

    } else {

      if (currentButton > 0 && buttonNumber == currentButton) {
        // This is the selected button - keep it selected color
        const selectedColor = getButtonColor(buttonNumber, buttonColorMaps, 'selected');
        button.style.fill = `url(#grad${selectedColor})`;

        // Keep text dark for selected button
        if (textElement) {
          textElement.style.fill = '#333333';
        }
      } else {
        // This is not the selected button - revert to default color
        const defaultColor = getButtonColor(buttonNumber, buttonColorMaps, 'default');
        // const defaultColor = defaultButtonMap[buttonNumber];
        button.style.fill = `url(#grad${defaultColor})`;

        // Revert text color to default
        if (textElement) {
          textElement.style.fill = '#f9f9f9'; // Reset to default
        }
      }

      // Remove SVG tooltip
      hideBtnTip();
    }

  }

  function addButtonHoverEvents () {
    for (let i = 1; i <= BUTTON_QTY; i++) { //up to 80 buttons for 2RU
      const button = document.getElementById(`btn${i}`);
      if (button) {
        // Add mouseenter event (hover in)
        button.addEventListener('mouseenter', function (e) {
          const button = e.target;
          handleButtonHover(button, true);
          const buttonNumber = parseInt(button.id.substring(3));
          const tooltipText = getButtonTooltipText(buttonNumber);
          showBtnTip(button, tooltipText);
        });

        // Add mouseleave event (hover out)
        button.addEventListener('mouseleave', function (e) {
          handleButtonHover(button, false);
        });
      }
    }
  }

  function getButtonTooltipText (buttonNumber) {
    const btnType = keyConfigCache.keyConfig.keys[buttonNumber - 1][0];
    const btnValues = keyConfigCache.keyConfig.keys[buttonNumber - 1][1];
    const buttonTipText = {
      'DST': 'Destination',
      'SRC': 'Source',
      'BRK': 'Breakaway',
      'LVL': 'Level',
      'PROT': 'Protect',
      'DEAS': 'MC Deassign',
      'CHOP': 'Chop',
      'MC': 'MC ON/OFF',
      'UN': 'Unassigned',
      'SHIFT': 'Shift',
      'XPT': 'XPT',
      'TAKE': 'Take',
      'UNTAKE': 'Take Cancel',
      'BRKSTP': 'Bway Step',
      'LOCK': 'Lock',
      'SALV': 'Salvo',
      'MACR': 'Macro',
    }
    let tooltipText = '';

    switch (btnType) {
      case 'DST':
        if (Array.isArray(btnValues)) {
          const destNames = btnValues.map(id => getDestinationNameById(id)).join(' | ');
          tooltipText = `DST: ${destNames}`;
        } else {
          tooltipText = `DST | ${getDestinationNameById(btnValues[0])}`;
        }
        break;

      case 'SRC':
        if (Array.isArray(btnValues)) {
          const srcNames = btnValues.map(id => getSourceNameById(id)).join(' | ');
          tooltipText = `SRC: ${srcNames}`;
        } else {
          tooltipText = `SRC: ${getSourceNameById(btnValues[0])}`;
        }
        break;
      case 'BRK':
        if (Array.isArray(btnValues)) {
          tooltipText = `BWAY: ${getBreakawayNameById(btnValues[0])}`;
        } else {
          tooltipText = `BWAY: ${getBreakawayNameById(btnValues[0])}`;
        }
        break;
      case 'LVL':
        if (Array.isArray(btnValues)) {
          tooltipText = `LVL: ${getLevelNameById(btnValues[0])}`;
        } else {
          tooltipText = `LVL: ${getLevelNameById(btnValues[0])}`;
        }
        break;
      case 'MACR':
        tooltipText = `${buttonTipText['MACR']} ${btnValues[0]+1}`;
        break;
      case 'SHIFT':
        const shiftType = ['DST Shift 1', 'DST Shift 2', 'SRC Shift 1', 'SRC Shift 2'];
        tooltipText = shiftType[(btnValues[0])] || 'SHIFT';
        break;
      case 'XPT':
        tooltipText = `XPT: ${destLookupMap[btnValues[0]]} | ${sourceLookupMap[btnValues[1]]} | ${breakawayLookupMap[btnValues[2]]}`;
        break;
      case 'SALV':
      tooltipText = `SALVO: ${salvoLookupMap[btnValues[0]]}`;
        break;
      default:
        tooltipText = ` ${buttonTipText[btnType]}`;
        break;
    }
    return tooltipText;
  }


  /**
  * Merges a new key into the arr array at the specified index.
  * If the index exists, it replaces the existing value.
  * If the index is out of bounds, it extends the array.
  *
  * @param {Array} arr - The original arr array.
  * @param {[number, [string, number[]]]} update - The update as [index, newItem].
  * @returns {Array} The updated  array.
  */
  function mergeKeyAtIndex (arr, update) {
    const [index, newItem] = update;
    // Create a shallow copy to avoid mutating the original array
    const updatedArr = [...arr];

    if (index >= 0) {
      updatedArr[index] = newItem;
    }

    return updatedArr;
  }

  /**
  * Creates a map of button numbers to their selected colors
  * Limited to only the physical buttons (numKeysPerRow * numRows)
  * @param {Object} keyConfig - The key configuration object (keyConfigCache.keyConfig)
  * @param {Object} rcpConfigCache - The RCP configuration object (rcpConfigCache.RCPConfig)
  * @returns {Object} Map where key is button number (1-based) and value is selected color RGB_Enum
  */
  function createSelectedButtonMap (keyConfig = keyConfigCache.keyConfig, rcpConf = rcpConfigCache.RCPConfig) {
    const selectedButtonMap = {};

    // Calculate the actual number of physical buttons
    const numPhysicalButtons = keyConfig.numKeysPerRow * keyConfig.numRows;

    // Iterate through only the physical buttons (limit to actual hardware)
    for (let index = 0; index < numPhysicalButtons && index < keyConfig.keys.length; index++) {
      const keyData = keyConfig.keys[index];
      const buttonNumber = index + 1; // Convert 0-based index to 1-based button number
      const keyType = keyData[0]; // First element is the key type (e.g., 'DST', 'SRC', 'TAKE')

      // Get the selected color for this key type from RCP config
      if (rcpConf.keyOptions && rcpConf.keyOptions[keyType]) {
        const selectedColor = rcpConf.keyOptions[keyType].selectedColor.RGB_Enum;
        selectedButtonMap[buttonNumber] = selectedColor;
      } else {
        // Fallback to default color if key type not found
        console.warn(`Key type '${keyType}' not found in keyOptions for button ${buttonNumber}`);
        selectedButtonMap[buttonNumber] = 0; // Default to color 0
      }
    }

    return selectedButtonMap;
  }

  /**
 * Creates both selected and default button color maps in one pass
 * Limited to only the physical buttons (numKeysPerRow * numRows)
 * @param {Object} keyConfig - The key configuration object (keyConfigCache.keyConfig)
 * @param {Object} rcpConf - The RCP configuration object (rcpConfigCache.RCPConfig)
 * @returns {Object} Object containing both selectedButtonMap and defaultButtonMap
 */
  function createButtonColorMaps (keyConf = keyConfigCache, rcpConf = rcpConfigCache) {
    const selectedButtonMap = {};
    const defaultButtonMap = {};

    // Calculate the actual number of physical buttons
    const numPhysicalButtons = keyConf.keyConfig.numKeysPerRow * keyConf.keyConfig.numRows;

    // Iterate through only the physical buttons (limit to actual hardware)
    for (let index = 0; index < numPhysicalButtons && index < keyConf.keyConfig.keys.length; index++) {
      const keyData = keyConf.keyConfig.keys[index];
      const buttonNumber = index + 1; // Convert 0-based index to 1-based button number
      const keyType = keyData[0]; // First element is the key type (e.g., 'DST', 'SRC', 'TAKE')

      // Get both colors for this key type from RCP config
      if (rcpConf.RCPConfig.keyOptions && rcpConf.RCPConfig.keyOptions[keyType]) {
        const selectedColor = rcpConf.RCPConfig.keyOptions[keyType].selectedColor.RGB_Enum;
        const defaultColor = rcpConf.RCPConfig.keyOptions[keyType].defaultColor.RGB_Enum;

        selectedButtonMap[buttonNumber] = selectedColor;
        defaultButtonMap[buttonNumber] = defaultColor;
      } else {
        // Fallback to default color if key type not found
        console.warn(`Key type '${keyType}' not found in keyOptions for button ${buttonNumber}`);
        selectedButtonMap[buttonNumber] = 0; // Default to color 0
        defaultButtonMap[buttonNumber] = 0; // Default to color 0
      }
    }

    return { selectedButtonMap, defaultButtonMap };
  }

  /**
  * Gets the color for a specific button
  * @param {number} buttonNumber - The button number (1-based)
  * @param {Object} buttonMaps - Object containing selectedButtonMap and defaultButtonMap
  * @param {string} colorType - 'selected' or 'default'
  * @returns {number} The RGB_Enum value for the requested color
  */
  function getButtonColor (buttonNumber, buttonMaps, colorType = 'default') {
    if (!buttonMaps) {
      buttonMaps = createButtonColorMaps();
    }

    const mapToUse = colorType === 'selected' ? buttonMaps.selectedButtonMap : buttonMaps.defaultButtonMap;
    return mapToUse[buttonNumber] || 0; // Return 0 if button not found
  }

  /**
  * Updates both button maps when configuration changes
  * @param {number} buttonNumber - The button number that changed (1-based)
  * @param {string} newKeyType - The new key type for this button
  * @param {Object} buttonMaps - The existing maps to update
  * @param {Object} rcpConf - The RCP configuration object
  * @returns {Object} Updated button maps object
  */
  function updateButtonColorMaps (buttonNumber, newKeyType, buttonMaps, rcpConf = rcpConfigCache) {
    const updatedMaps = {
      selectedButtonMap: { ...buttonMaps.selectedButtonMap },
      defaultButtonMap: { ...buttonMaps.defaultButtonMap }
    };

    if (rcpConf.RCPConfig.keyOptions && rcpConf.RCPConfig.keyOptions[newKeyType]) {
      const selectedColor = rcpConf.RCPConfig.keyOptions[newKeyType].selectedColor.RGB_Enum;
      const defaultColor = rcpConf.RCPConfig.keyOptions[newKeyType].defaultColor.RGB_Enum;

      updatedMaps.selectedButtonMap[buttonNumber] = selectedColor;
      updatedMaps.defaultButtonMap[buttonNumber] = defaultColor;
    } else {
      console.warn(`Key type '${newKeyType}' not found in keyOptions for button ${buttonNumber}`);
      updatedMaps.selectedButtonMap[buttonNumber] = 0;
      updatedMaps.defaultButtonMap[buttonNumber] = 0;
    }

    return updatedMaps;
  }


  // Function to create all radial gradients dynamically
  function createDynamicGradients () {
    const svg = document.getElementById("svg1");
    if (!svg) {
      console.error("SVG element not found");
      return;
    }

    const defs = svg.querySelector("defs");
    if (!defs) {
      console.error("SVG defs element not found");
      return;
    }

    // Create gradients 0-31
    for (let i = 0; i <= 31; i++) {
      const colorDef = gradientColors[i];
      if (!colorDef) continue;

      const gradient = document.createElementNS("http://www.w3.org/2000/svg", "radialGradient");
      gradient.setAttribute("id", `grad${i}`);
      gradient.setAttribute("cx", "50%");
      gradient.setAttribute("cy", "50%");
      gradient.setAttribute("r", "50%");
      gradient.setAttribute("fx", "50%");
      gradient.setAttribute("fy", "50%");

      // Create three stops with different lightness values
      const stops = [
        { offset: "0%", lightness: colorDef.lightness[0] },
        { offset: "75%", lightness: colorDef.lightness[1] },
        { offset: "100%", lightness: colorDef.lightness[2] }
      ];

      stops.forEach(stop => {
        const stopElement = document.createElementNS("http://www.w3.org/2000/svg", "stop");
        stopElement.setAttribute("offset", stop.offset);
        stopElement.setAttribute("stop-color",
          `hsl(${colorDef.hue},${colorDef.saturation}%,${stop.lightness}%)`);
        gradient.appendChild(stopElement);
      });

      defs.appendChild(gradient);
    }


  }

  // Function to convert gradient number to stroke color
  function getStrokeColorFromGradient (gradientNum) {
    const colorDef = gradientColors[gradientNum];
    if (!colorDef) {
      return 'hsl(0,0%,70%)'; // fallback to light gray
    }

    // Use a lighter version of the gradient's primary color for the stroke
    return `hsl(${colorDef.hue},${colorDef.saturation}%,70%)`;
  }

  // Function to load SVG dynamically  --  loading svg directly in <img> element we loose css/js interactivity 
  function loadSVG () {
    const nrgType = "{{.NRGType}}";

    // Determine which SVG file to load based on nrgType
    const svgFileName = NRG_IMAGES[nrgType] || NRG_IMAGES['NRG-1RU'];

    return fetch(`/static/images/${svgFileName}`)
      .then(response => {
        if (!response.ok) {
          throw new Error('Failed to load SVG: ' + response.statusText);
        }
        return response.text();
      })
      .then(svgContent => {
        const svgContainer = document.getElementById('svg-container');
        if (svgContainer) {
          svgContainer.innerHTML = svgContent;

          // Create dynamic gradients after SVG is loaded
          createDynamicGradients();

          return true;
        } else {
          console.error('SVG container not found');
          return false;
        }
      })
      .catch(error => {
        console.error('Error loading SVG:', error);
        return false;
      });
  }

  // Function to set up color change event listeners
  function setupColorChangeListeners () {
    const keyTypes = ['DST', 'SRC', 'XPT', 'LVL', 'BRK', 'BRKSTP', 'MACR', 'PROT', 'TAKE', 'UNTAKE', 'CHOP', 'LOCK', 'MC', 'DEAS', 'SALV', 'SHIFT', 'UN'];

    keyTypes.forEach(keyType => {
      // Listen for selected color changes
      const selectedColorElement = document.getElementById(`${keyType}selectedColor`);
      if (selectedColorElement) {
        selectedColorElement.addEventListener('change', (event) => {
          if (suppressFormEvents) { return; }
          handleColorChange(keyType, 'selected', event.detail.value);
        });
      }

      // Listen for default color changes
      const defaultColorElement = document.getElementById(`${keyType}defaultColor`);
      if (defaultColorElement) {
        defaultColorElement.addEventListener('change', (event) => {
          if (suppressFormEvents) { return; }
          handleColorChange(keyType, 'default', event.detail.value);
        });
      }
    });
  }

  // Function to handle color changes
  function handleColorChange (keyType, colorType, newRgbEnum) {

    // Update rcpConfigCache using the new setter function
    if (rcpConfigCache.RCPConfig.keyOptions && rcpConfigCache.RCPConfig.keyOptions[keyType]) {
      if (colorType === 'selected') {
        updateRcpConfigCacheProperty(`RCPConfig.keyOptions.${keyType}.selectedColor.RGB_Enum`, newRgbEnum);
      } else {
        updateRcpConfigCacheProperty(`RCPConfig.keyOptions.${keyType}.defaultColor.RGB_Enum`, newRgbEnum);
      }
    }

    // Update buttonColorMaps
    buttonColorMaps = createButtonColorMaps();

    // Update gradients if the color changed
    updateGradientColor(newRgbEnum);

    // Update all SVG button colors
    updateAllButtonColors();

    // Update focus ring for current button if any
    if (currentButton > 0) {
      clearButtonSelection(currentButton);
    }
  }

  // Function to update a specific gradient color
  function updateGradientColor (rgbEnum) {
    const svg = document.getElementById("svg1");
    if (!svg) return;

    const defs = svg.querySelector("defs");
    if (!defs) return;

    // Find existing gradient or create new one if needed
    let gradient = defs.querySelector(`#grad${rgbEnum}`);
    if (!gradient) {
      // Create new gradient if it doesn't exist
      const colorDef = gradientColors[rgbEnum];
      if (colorDef) {
        gradient = document.createElementNS("http://www.w3.org/2000/svg", "radialGradient");
        gradient.setAttribute("id", `grad${rgbEnum}`);
        gradient.setAttribute("cx", "50%");
        gradient.setAttribute("cy", "50%");
        gradient.setAttribute("r", "50%");
        gradient.setAttribute("fx", "50%");
        gradient.setAttribute("fy", "50%");

        // Create three stops with different lightness values
        const stops = [
          { offset: "0%", lightness: colorDef.lightness[0] },
          { offset: "75%", lightness: colorDef.lightness[1] },
          { offset: "100%", lightness: colorDef.lightness[2] }
        ];

        stops.forEach(stop => {
          const stopElement = document.createElementNS("http://www.w3.org/2000/svg", "stop");
          stopElement.setAttribute("offset", stop.offset);
          stopElement.setAttribute("stop-color",
            `hsl(${colorDef.hue},${colorDef.saturation}%,${stop.lightness}%)`);
          gradient.appendChild(stopElement);
        });

        defs.appendChild(gradient);
      }
    }
  }

  // Function to update all button colors in the SVG
  function updateAllButtonColors () {

    for (let i = 1; i <= BUTTON_QTY; i++) {
      const button = document.getElementById(`btn${i}`);
      if (button) {
        // Get the key type for this button
        const keyType = keyConfigCache.keyConfig.keys[i - 1] ? keyConfigCache.keyConfig.keys[i - 1][0] : 'UN';

        // Determine if this is the currently selected button
        const isCurrentButton = (currentButton === i);
        const colorType = isCurrentButton ? 'selected' : 'default';

        // Get the appropriate color
        const color = getButtonColor(i, buttonColorMaps, colorType);

        // Update the button fill
        button.style.fill = `url(#grad${color})`;
      }
    }
  }

  function setupSources () {
    sourceList.push({ name: 'Unassigned', id: unassignedId });
    {{ range .Sources }}
      sourceList.push({ name: {{ .Name }}, id: {{ .UiId }} });
    {{ end }}
    // Create lookup map immediately after populating the list
    createSourceLookupMap();
  }

  function setupDestinations () {
    destList.push({ name: 'Unassigned', id: unassignedId });
    {{ range .Destinations }}
      destList.push({ name: {{ .Name }}, id: {{ .UiId }} });
    {{ end }}
  
    createDestinationLookupMap();
  }

  function setupLevels () {
    {{ range .Levels }}
      levelList.push({ name: {{ .Name }}, id: {{ .Id }} });
    {{ end }}
    levelList.forEach(level => level.id -= 1);
    createLevelLookupMap();
  }

  function setupSalvos () {    
    {{ range .Salvos }}
      salvoList.push({ name: {{ .Name }}, id: {{ .UiId  }} });
    {{ end }}
  
    salvoList.unshift({ name: 'Unassigned', id: unassignedId });
    createSalvoLookupMap();
  }

  function setupAliasSets () {
    {{ range .AliasSets }}
      aliasSetList.push({ name: {{ .Name }}, id: {{ .Id }} });
    {{ end }}
  }

</script>

<script id="pageInit" type="text/javascript" charset="utf-8">
  document.addEventListener("DOMContentLoaded", function () {
    // Hide breakaway button and separator if PANEL_MODE is LOCAL
    if (PANEL_MODE === "LOCAL") {
      const breakawayButton = document.getElementById("BreakawayButton");
      const breakawaySeparator = document.getElementById("BreakawayButtonSeparator");
      if (breakawayButton) {
        breakawayButton.style.display = "none";
      }
      if (breakawaySeparator) {
        breakawaySeparator.style.display = "none";
      }
      //hide Bway and MC config items
      document.getElementById("bwyResetContainer").style.display = "none";
      document.getElementById("bwayWarningContainer").style.display = "none";
      document.getElementById("mcEnabledContainer").style.display = "none";
      document.getElementById("mcLevelContainer").style.display = "none";
    }

    setupSources();
    setupDestinations();
    setupLevels();
    setupSalvos();
    setupAliasSets();

    // Wait for both SVG and all configuration data to be loaded before executing dependent functions
    Promise.all([
      loadSVG(), // SVG loading Promise
      Promise.all([
        fetch("/lcp/files/get?file=RCPConfig").then(response => response.json()),
        fetch("/lcp/files/get?file=keyConfig").then(response => response.json()),
        fetch("/lcp/files/get?file=macros").then(response => response.json())
      ])
    ]).then(([svgLoaded, [rcpData, keyData, macroData]]) => {
      // Store the loaded data       
      setRcpConfigCache(rcpData.content, false); // false = don't mark as dirty on initial load

      setKeyConfigCache(keyData.content, false); // false = don't mark as dirty on initial load

      setMacrosCache(macroData.content, false); // false = don't mark as dirty on initial load

      (async () => {await checkDefaultConfiguration()})()

      if (svgLoaded) {
        // SVG-dependent initialization that also needs loaded data
        assignButtonColors(); // Now has access to rcpConfigCache
        document.querySelector("#buttons").addEventListener("click", handleImageClick);
        addButtonHoverEvents();
      }
      // Populate form fields from cache while suppressing change/save side-effects
      populateRCPConfig(rcpConfigCache);

      // Check if destLabelAliasSet > 0 and refetch alias data if needed
      if (rcpConfigCache.RCPConfig.destLabelAliasSet > 0) {
        fetchAliasData();
      }

      // Create breakaway list and lookup map after RCP config is loaded
      createBreakawayList();

      // Execute other functions that depend on loaded data
      (async () => {
        if ('whenDefined' in customElements) {
          await customElements.whenDefined('number-grid-component');
          if (PANEL_MODE != "LOCAL") {
            buildBwayTable(16);
          }
          createMacrosTable();
          populateMacrosTableFromCache();

          // Wait for color-select elements to be defined before setting up listeners
          await customElements.whenDefined('color-select');
          // Listen for color changes in Key Colors tab
          setupColorChangeListeners();
          await customElements.whenDefined('drop-select');
          createKeyAssignmentRows();
        }
      })()

      buttonColorMaps = createButtonColorMaps();

      setupRcpConfigFormListeners(); // Setup event listeners for RCP config form changes

      bwyNames = rcpConfigCache.RCPConfig.breakaways.filter(bwy => bwy.name).map((bwy, index) => ({ id: index + 1, value: bwy.name }));

      // Now that all data is loaded, populate the cutbus dropdowns
      fillCutbusSelects();
      // Apply saved selections now that options are loaded
      document.getElementById('cutbus1').selectById(String(rcpConfigCache.RCPConfig.cutbusDest[0]));
      document.getElementById('cutbus2').selectById(String(rcpConfigCache.RCPConfig.cutbusDest[1]));

    }).catch(error => {
      console.error('Error loading SVG or configuration data:', error);
    });

    //listen for macro editing    
    document.getElementById("macros-container").addEventListener("change", (event) => macroEvent(event));
    document.getElementById("macros-container").addEventListener("click", (event) => macroEvent(event));

    // Add event listener for Load Defaults button
    const btnLoadDefaults = document.getElementById('btnLoadDefaults');
    if (btnLoadDefaults) {
      btnLoadDefaults.addEventListener('click', loadDefaultsHandler);
    }

    checkCacheDirty();
    // End initial hydration; allow subsequent user changes to trigger saves
    suppressFormEvents = false;
    addWSDBListener();
  });
</script>

<script id="websocket" type="text/javascript" charset="utf-8">
  function addWSDBListener () {
    let socket = new WebSocket("ws://" + window.location.hostname + ":8080/acws"); //listen to active controller websocket
    socket.onopen = function () {
      console.log("Status: Connected\n");
    };
    socket.onmessage = function (event) {
      const msg = JSON.parse(event.data);
      // console.log("GOT event", msg);

      // Handle different table change notifications
      switch (msg.table) {
        case SOURCE_TABLE:
        case SOURCE_ALIAS_TABLE:
          fetchAliasesForType('source').then(sources => {
            parseAndUpdateLists(sources, 'source');
            createSourceLookupMap();
            updateDependentUI();
          }).catch(error => {
            console.error('Failed to fetch sources:', error);
          });
          break;

        case DESTINATION_TABLE:
        case DESTINATION_ALIAS_TABLE:
          fetchAliasesForType('destination').then(destinations => {
            parseAndUpdateLists(destinations, 'destination');
            createDestinationLookupMap();
            updateDependentUI();
            updateCutbusDropdowns();
          }).catch(error => {
            console.error('Failed to fetch destinations:', error);
          });
          break;

        case LEVEL_TABLE:
          handleLevelsChange();
          break;

        case SALVO_TABLE:
          handleSalvosChange();
          break;

        case ALIAS_SET_TABLE:
          handleAliasSetsChange();
          break;

        case DATABASE_TABLE:
          location.reload(true); // force reload on database change
          break;

        case LCP_CONFIGURATION_TABLE:
          (async () => {await checkDefaultConfiguration()})()

        default:
          // console.log('Unknown table change:', msg.table);
          break;
      }
    };
    socket.onerror = function (event) {
      console.log("Connection Error: " + JSON.stringify(event));
    };
    socket.onclose = function (event) {
      console.log("Socket is closed. Reconnect will be attempted in 1 second. Error Code: " + event.code + ", Reason: " + event.reason);
      setTimeout(function () {
        addWSDBListener();
      }, 1000);
    };
  }

  async function handleLevelsChange () {
    try {
      const response = await fetch('/lcp/levels');
      const levels = await response.json();

      levelList.length = 0;
      levels.forEach(level => {
        levelList.push({ name: level.name, id: level.id - 1 }); // Offset ID by 1
      });
      createLevelLookupMap();
      updateDependentUI();
    } catch (error) {
      console.error('Failed to handle levels change:', error);
    }
  }

  async function handleSalvosChange () {
    try {
      const response = await fetch('/lcp/salvos');
      const salvos = await response.json();
      salvoList.length = 0;
      if (salvos) {
        salvoList.push({ name: 'Unassigned', id: unassignedId });
        salvos.forEach(salvo => {
          salvoList.push({ name: salvo.name, id: salvo.uiId });
        });
        createSalvoLookupMap();
        updateDependentUI();
      }
    }
    catch (error) {
      console.error('Failed to handle salvos change:', error);
    }
  }

  async function handleAliasSetsChange () {
    try {
      const response = await fetch('/lcp/aliasSets');
      const aliasSets = await response.json();
      aliasSetList.length = 0;
      if (aliasSets) {
        aliasSets.forEach(aliasSet => {
          aliasSetList.push({ name: aliasSet.name, id: aliasSet.id });
        });
        // Update the select dropdown
        const aliasSetsSelect = document.getElementById('aliasSets');
        if (aliasSetsSelect) {
          const currentValue = aliasSetsSelect.value;
          aliasSetsSelect.innerHTML = '<option value="0">None</option>';
          aliasSetList.forEach(aliasSet => {
            const option = document.createElement('option');
            option.value = aliasSet.id;
            option.textContent = aliasSet.name;
            aliasSetsSelect.appendChild(option);
          });
          // Restore the previous selection if it still exists
          if (currentValue && Array.from(aliasSetsSelect.options).some(opt => opt.value === currentValue)) {
            aliasSetsSelect.value = currentValue;
          } else {
            aliasSetsSelect.value = '0';
            // Update RCPConfig cache when alias set is reset to '0'
            if (rcpConfigCache && rcpConfigCache.RCPConfig) {
              updateRcpConfigCacheProperty('RCPConfig.destLabelAliasSet', 0);
              updateRcpConfigCacheProperty('RCPConfig.srcLabelAliasSet', 0);
              saveRcpConfigCache();
            }
          }
        }
        updateDependentUI();
      }
    }
    catch (error) {
      console.error('Failed to handle alias sets change:', error);
    }
  }

  async function fetchAliasesForType (aliasType, aliasSetId = null) {
    if (!aliasSetId) {
      const aliasSetsSelect = document.getElementById('aliasSets');
      aliasSetId = parseInt(aliasSetsSelect ? aliasSetsSelect.value : '0');
    }
    
    const path = aliasType === 'source' ? `/lcp/sourcealiases?aliasSetId=${aliasSetId}` : `/lcp/destinationaliases?aliasSetId=${aliasSetId}`;
    try {
      const response = await fetch(path);
      return await response.json();
    } catch (error) {
      console.error('Failed to fetch aliases:', error);
      return [];
    }
  }

  function parseAndUpdateLists (aliases, aliasType) {
    // Parse response based on aliasType and update appropriate list
    if (aliasType === 'destination') {
      // Update destList for destination aliases
      destList.length = 0;
      destList.push({ name: 'Unassigned', id: unassignedId });
      aliases.forEach(alias => {
        destList.push({
          name: alias.name, 
          id: alias.uiId
        });
      });
      createDestinationLookupMap();
    } else if (aliasType === 'source') {
      // Update sourceList for source aliases
      sourceList.length = 0;
      sourceList.push({ name: 'Unassigned', id: unassignedId });
      aliases.forEach(alias => {
        sourceList.push({
          name: alias.name,
          id: alias.uiId
        });
      });
      createSourceLookupMap();
    }
  }

  async function fetchAliasData (changeType = null) {
    try {
      const aliasSetsSelect = document.getElementById('aliasSets');
      const aliasSetId = parseInt(aliasSetsSelect ? aliasSetsSelect.value : '0');
      if (changeType === null) {
        // If changeType is null, run queries for both 'destination' and 'source'
        const aliasTypes = ['destination', 'source'];

        for (const aliasType of aliasTypes) {
          const aliases = await fetchAliasesForType(aliasType, aliasSetId);
          parseAndUpdateLists(aliases, aliasType);
        }
      } else {
        // If changeType is specified, run single query
        const aliases = await fetchAliasesForType(changeType, aliasSetId);
        parseAndUpdateLists(aliases, changeType);
      }
      updateDependentUI();
    } catch (error) {
      console.error('Failed to fetch alias data:', error);
    }
  }

  function updateDependentUI () {
    refreshKeyAssignmentsTable();
    updateMacrosTable();
  }

  function refreshKeyAssignmentsTable () {
    //refresh the key assignments table
    // Store the currently selected row if any
    const currentlySelectedRow = document.querySelector('#keyassignments-table tbody tr.selected');
    const selectedRowIndex = currentlySelectedRow ?
      Array.from(currentlySelectedRow.parentNode.children).indexOf(currentlySelectedRow) : -1;

    // Clear the table body
    const tbody = document.getElementById('keyassignments-table-body');
    if (tbody) {
      // Remove all child nodes from tbody (safer than innerHTML)
      while (tbody.firstChild) {
        tbody.removeChild(tbody.firstChild);
      }

      createKeyAssignmentRows();

      // Restore row selection
      if (selectedRowIndex >= 0) {
        const newRows = tbody.children;
        if (newRows[selectedRowIndex]) {
          newRows[selectedRowIndex].classList.add('selected');
          // Also highlight the corresponding button in the SVG
          highlightButtonForRow(newRows[selectedRowIndex]);

          // Scroll the table to the selected row
          const tableContainer = document.querySelector('.keyassignments-container');
          if (tableContainer) {
            const selectedRow = newRows[selectedRowIndex];
            const rowTop = selectedRow.offsetTop;
            const containerHeight = tableContainer.clientHeight;
            const rowHeight = selectedRow.offsetHeight;

            const scrollTop = rowTop - (containerHeight / 4) + (rowHeight / 2);

            tableContainer.scrollTop = Math.max(0, scrollTop);
          }
        }
      }
    } else {
      console.warn('Could not find keyassignments-table-body element');
    }
  }

  function updateCutbusDropdowns () {
    const cb1 = document.getElementById('cutbus1');
    const cb2 = document.getElementById('cutbus2');

    if (cb1 && destList && destList.length > 0) {
      const formattedDestList = formatListData(destList);
      const currentSelection = cb1.selected;

      cb1.options = formattedDestList;
      cb1.focusedIndex = -1;

      // Clear filter cache
      if (cb1._filterCache) {
        cb1._filterCache.clear();
        cb1._lastFilterQuery = '';
      }

      // Restore selection
      if (currentSelection.value && formattedDestList.length > 0) {
        const matchingOption = formattedDestList.find(option =>
          option.id === currentSelection.id
        );

        if (matchingOption) {
          cb1.selectById(matchingOption.id);
        } else {
          cb1.selectById('0');
        }
      }
    }
    if (cb2 && destList && destList.length > 0) {
      const formattedDestList = formatListData(destList);
      const currentSelection = cb2.selected;

      cb2.options = formattedDestList;
      cb2.focusedIndex = -1;

      // Clear filter cache
      if (cb2._filterCache) {
        cb2._filterCache.clear();
        cb2._lastFilterQuery = '';
      }

      // Restore selection
      if (currentSelection.value && formattedDestList.length > 0) {
        const matchingOption = formattedDestList.find(option =>
          option.id === currentSelection.id
        );

        if (matchingOption) {
          cb2.selectById(matchingOption.id);
        } else {
          cb2.selectById('0');
        }
      }
    }
  }
</script>



{{ end }}