functions.js

let settingsData = null;
let settingsMap = new Map(); // maps int ID -> [key, meta]
let settingsMeta = null;
const intervalPatterns = [
    /^(?!.*advertisement).*_interval(?:_\d+|\d+)?$/, // matches _interval, _interval1, _interval2, _interval_2, etc., but not _advertisement_interval
    /^rf_scan_duration$/,
    /^(cold|hot)_fix_timeout$/,
    /^ublox_min_fix_time$/,
    /^cmdq_on_no_detection_wait_duration$/,
    /^fence_sampling_length$/
];

const intervalPatternExclusions = new Set([
    'satellite_max_messages_per_interval',
    'gps_motion_triggered_min_num_of_triggers_per_interval',
    'gps_skipped_triggered_interval'
]);

function isIntervalSetting(key) {
    return !intervalPatternExclusions.has(key) && intervalPatterns.some(rx => rx.test(key));
}

const grouping = {
    "^(hot|cold)_": "satellite",
    "^sat_send_flag$": "satellite",
    "^rejoin_interval$": "lr",
    "^app_(key|eui)$": "lr",
    "^device_eui$": "lr",
    "^horizontal_accuracy$": "ublox",
    "^motion_ths$": "gps",
    "^enable_motion_trig_gps$": "gps",
    "^rf_open_sky_detection": 0,
    "^rf_scan": 0,
    "(^.{2,}?)_": 1
};

const bitmapSettings = [/^.*_flag$/];
const customBitmaskRenderers = {
    gps_open_sky_detection_bitmask: renderOpenSkyDetectionBitmask
};

const skipPorts = ['port_lr_messaging', 'port_flash_log', 'port_values', 'port_messages', 'port_commands'];
const customByteArrayRenderers = {
    lp0_communication_params: renderLp0CommunicationParams,
    lp0_node_params: renderLp0NodeParams,
    outdoor_detection_parameters: renderOutdoorDetectionParameters,
    cmdq_searched_mac_address: renderMacAddressParameters
};

const customInputRenderers = {
    ble_advertisement_interval: renderMsInput,
    ble_auto_disconnect: renderMsInput,
    ble_scan_duration: renderMsInput,
    ble_scan_manufacturer_id: renderHexUint16Input,
    cmdq_scan_duration: renderMsInput,
    device_pin: renderDevicePinInput,
    external_switch_detection_trigger_debounce_ms: renderMsInput,
    gps_init_lat: renderLatitudeInput,
    gps_init_lon: renderLongitudeInput,
    ublox_interval1_start: renderUtcHourInput,
    ublox_interval2_start: renderUtcHourInput,
    satellite_interval1_start: renderUtcHourInput,
    satellite_send_interval2_start: renderUtcHourInput,
    vhf_interval1_start: renderUtcHourInput,
    vhf_interval2_start: renderUtcHourInput,
    vhf_time_between_packets_ms: renderMsInput,
    init_time: renderUnixTimeInput
};

// Static list of settings files
const SETTINGS_FILES = [
    "settings-v7.2.0.json",
    "settings-v7.1.0.json",
    "settings_v7.0.0.json",
    "settings-v5.0.1.json",
    "settings-v6.15.0.json",
    "settings-v6.14.1.json",
    "settings-v6.12.1.json",
    "settings-v6.11.0.json",
    "settings-v6.10.0.json",
    "settings-v6.9.0.json",
    "settings-v6.8.1.json",
    "settings-v4.4.2.json"
];
const SETTINGS_META_FILE = "settings-meta.json";
const APP_VERSION_FILE = "version.json";
window.SETTINGS_FILES = SETTINGS_FILES;

const dangerousCommands = [/_th$/, /set_hibernation_mode/, /almanac_update/];

function formatBuildTime(buildTime) {
    if (!buildTime) {
        return '';
    }
    const parsed = new Date(buildTime);
    if (Number.isNaN(parsed.getTime())) {
        return '';
    }
    return parsed.toISOString().slice(0, 10);
}

async function updateAppVersionBadge() {
    const versionElement = document.getElementById('app-version');
    if (!versionElement) {
        return;
    }

    try {
        const response = await fetch(APP_VERSION_FILE, { cache: 'no-store' });
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
        }
        const versionInfo = await response.json();
        const version = versionInfo.version || 'unknown';
        const commit = versionInfo.commit ? ` (${String(versionInfo.commit).slice(0, 7)})` : '';
        const buildDate = formatBuildTime(versionInfo.built_at);
        versionElement.textContent = `Version: ${version}${commit}${buildDate ? ` - ${buildDate}` : ''}`;
    } catch (error) {
        versionElement.textContent = 'Version: unavailable';
        console.warn('Failed to load app version:', error);
    }
}

document.addEventListener('DOMContentLoaded', () => {
    updateAppVersionBadge();
});

const minMaxValues = {
    'uint8': { min: 0, max: 255 },
    'uint16': { min: 0, max: 65535 },
    'uint32': { min: 0, max: 4294967295 },
    'int8': { min: -128, max: 127 },
    'int32': { min: -2147483648, max: 2147483647 },
    'float': { min: -3.4e38, max: 3.4e38 }
}

function populateSettingsIntoPage(firstItem = null) {
    const dropdown = document.getElementById('settings-dropdown');
    dropdown.innerHTML = ''; // Clear previous options

    if (firstItem) {
        const option = document.createElement('option');
        option.value = "";
        option.textContent = firstItem;
        dropdown.appendChild(option);
    }

    SETTINGS_FILES.forEach(file => {
        const option = document.createElement('option');
        option.value = `./settings/${file}`;
        option.textContent = file;
        dropdown.appendChild(option);
    });
}

async function loadSettingsMeta() {
    if (settingsMeta) {
        return;
    }
    try {
        const response = await fetch(SETTINGS_META_FILE);
        settingsMeta = await response.json();
    } catch (error) {
        console.warn('Failed to load settings metadata:', error);
        settingsMeta = { settings: {}, commands: {} };
    }
}

async function loadSettings(selectedFile) {
    settingsData = null;
    settingsMap = new Map();

    try {
        await loadSettingsMeta();
        const response = await fetch(selectedFile);
        settingsData = await response.json();

        settingsMap = new Map();
        registerValues(settingsData.settings, "setting");
        registerValues(settingsData.commands, "command");
        registerValues(settingsData.values, "value");
    } catch (error) {
        throw new Error(`Error loading settings: ${error.message}`);
    }
}

function __onInputChanged(settingId) {
    const [key, setting] = getById(settingId);
    const value = getInputValue(setting.id);
    const errorElement = document.getElementById(`input-error-${setting.id}`);
    const rawValueElement = document.getElementById(`raw-value-${setting.id}`);

    let valid = true;
    try {
        validateInput(key, setting, value);
        errorElement.innerText = '';
    } catch (error) {
        valid = false;
        errorElement.innerText = error.message;
    }

    if (rawValueElement) {
        rawValueElement.value = value ?? '';
    }

    if (typeof (onInputChanged) === typeof (Function)) {
        onInputChanged(setting, value, valid);
    }
    if (typeof window.handleSettingInputChange === 'function') {
        window.handleSettingInputChange(setting.id, value, valid, key, setting);
    }
    refreshDynamicSettingHelpers(key);
}

function setInputValue(settingId, value) {
    const [key, setting] = getById(settingId);
    document.getElementById(`input-container-${settingId}`).innerHTML = sanitizeRenderedInputHtml(renderInputControl(
        key,
        setting,
        normalizeRenderableValue(value)
    ));
    refreshDynamicSettingHelpers(key);
}

function clearInputValue(settingId) {
    const [key] = getById(settingId);
    const container = document.getElementById(`input-container-${settingId}`);
    if (!container) {
        return;
    }
    container.innerHTML = '';
    refreshDynamicSettingHelpers(key);
}

function setDefaultValue(settingId) {
    const [key, setting] = getById(settingId);
    const container = document.getElementById(`input-container-${settingId}`);
    if (!container) {
        return;
    }
    container.innerHTML = sanitizeRenderedInputHtml(
        renderInputControl(key, setting, normalizeRenderableValue(setting.default))
    );
    refreshDynamicSettingHelpers(key);
}

function getInputValue(settingId) {
    const el = document.getElementById(`new-value-${settingId}`);
    if (el) {
        return el.value.trim();
    }
}

function filterSettings() {
    const query = document.getElementById('settings-search').value.toLowerCase();
    const showNonDefaultOnly = document.getElementById('non-default-checkbox') ? document.getElementById('non-default-checkbox').checked : false;
    const settingsSection = document.getElementById('settings-section');
    const groups = settingsSection.querySelectorAll('.settings-group');

    groups.forEach(group => {
        const settingsContainer = group.querySelector('.settings-container');
        const groupToggle = group.querySelector('.group-toggle');
        let hasVisibleSettings = false;
        const settings = settingsContainer ? settingsContainer.querySelectorAll('.setting') : [];

        settings.forEach(setting => {
            const dataSearch = setting.getAttribute('data-search') || setting.querySelector('h4').textContent;
            const matchesSearch = dataSearch.toLowerCase().includes(query);
            const isNonDefault = setting.classList.contains('value-not-default');
            const shouldShow = matchesSearch && (!showNonDefaultOnly || isNonDefault);

            if (shouldShow) {
                setting.classList.remove('hidden');
                hasVisibleSettings = true;
            } else {
                setting.classList.add('hidden');
            }
        });

        if (hasVisibleSettings) {
            group.classList.remove('hidden');
            if (query || showNonDefaultOnly) {
                group.classList.remove('is-collapsed');
                if (groupToggle) {
                    groupToggle.setAttribute('aria-expanded', 'true');
                }
            }
        } else {
            group.classList.add('hidden');
        }
    });
}

function toggleGroup(group) {
    const isCollapsed = group.classList.toggle('is-collapsed');
    const groupToggle = group.querySelector('.group-toggle');
    if (groupToggle) {
        groupToggle.setAttribute('aria-expanded', (!isCollapsed).toString());
    }
}


function registerValues(data, type) {
    for (const [key, value] of Object.entries(data)) {
        // key is the string name of the setting
        // value includes: id, default, min, max, conversion, etc.
        value["type"] = type;
        settingsMap.set(parseInt(value.id, 16), [key, value]);
    }
}

function getByKey(key) {
    return settingsData.settings[key];
}

function getById(id) {
    if (typeof id === 'string' || id instanceof String) {
        id = parseInt(id, 16);
    }

    if (!settingsMap.has(id)) {
        throw new Error(`Value with ID ${toHex(id)} not found`);
    }

    return settingsMap.get(id);
}

function isBitmaskSetting(key) {
    return bitmapSettings.some(rx => rx.test(key)) || key in customBitmaskRenderers;
}

function convertUnitToSeconds(value, unit) {
    return value * parseInt(unit, 10);
}

function convertSecondsToUnit(valueInSeconds, unit) {
    return valueInSeconds / parseInt(unit);
}

function stripBytes(s) {
    return s.replace(/0x/g, '').replace(/[^0-9A-Fa-f]/g, '').toUpperCase();
}

function normalizeMacAddressInput(value) {
    return String(value || '')
        .trim()
        .replace(/[^0-9A-Fa-f]/g, '')
        .toUpperCase()
        .slice(0, 12);
}

function formatMacAddressForDisplay(value, expectedLength = 6) {
    const hex = normalizeMacAddressInput(value);
    const requiredHexLength = expectedLength * 2;
    if (!hex) {
        return '';
    }
    if (hex.length !== requiredHexLength) {
        return hex.match(/.{1,2}/g)?.join(':') || hex;
    }
    return hex.match(/.{2}/g).join(':');
}

function renderPortCheckboxes(setting, value) {
    const defaultVal = parseInt(value || 0, 10);
    let html = `
          <!-- hidden field to store the final bitmask -->
          <input type="hidden" id="new-value-${setting.id}" value="${defaultVal}" />
          <div class="checkbox-scroll">
        `;
    for (const [portName, portNum] of Object.entries(settingsData.ports)) {
        if (skipPorts.includes(portName)) {
            continue;
        }

        const bitIsSet = (defaultVal & (1 << (portNum - 1))) !== 0;
        const checkboxId = `${portName}-${setting.id}`;
        html += `
            <div class="checkbox-container">
              <input type="checkbox"
                id="${checkboxId}"
                onchange="updateBitmaskForSetting('${setting.id}')"
                ${bitIsSet ? 'checked' : ''}
              />
              <label for="${checkboxId}">${portName.replace(/^port_/, "")}</label>
            </div>
          `;
    }
    html += `</div>`;
    return html;
}

function renderOpenSkyDetectionBitmask(setting, value) {
    const defaultVal = parseInt(value || 0, 10);
    const bands = [
        { bit: 7, label: 'Enabled' },
        { bit: 6, label: '100–200 MHz' },
        { bit: 5, label: '400–500 MHz' },
        { bit: 4, label: '800–1000 MHz' },
        { bit: 3, label: '1200–1400 MHz' },
        { bit: 2, label: '1500–1600 MHz' },
        { bit: 1, label: '1800–2100 MHz' },
        { bit: 0, label: '2400–2500 MHz' }
    ];
    let html = `
          <input type="hidden" id="new-value-${setting.id}" value="${defaultVal}" />
          <div class="checkbox-scroll">
        `;
    for (const band of bands) {
        const bitIsSet = (defaultVal & (1 << band.bit)) !== 0;
        const checkboxId = `band-${band.bit}-${setting.id}`;
        html += `
            <div class="checkbox-container">
              <input type="checkbox"
                id="${checkboxId}"
                onchange="updateCustomBitmask('${setting.id}', ${band.bit})"
                ${bitIsSet ? 'checked' : ''}
              />
              <label for="${checkboxId}">${band.label}</label>
            </div>
          `;
    }
    html += `</div>`;
    return html;
}

function renderIntervalSetting(key, setting, value) {
    const defaultSeconds = parseInt(value || 0, 10);

    // Guess a default unit based on the numeric value:
    // >=86400 => days, >=3600 => hours, >=60 => minutes, else seconds
    const guessedUnit = (key === 'cold_fix_timeout' || key === 'hot_fix_timeout') ? '1' : guessTimeUnit(defaultSeconds);
    // Convert the default seconds into that guessed unit
    const displayValueInGuessedUnit = Math.round(convertSecondsToUnit(defaultSeconds, guessedUnit));

    const lockToSeconds = key === 'cold_fix_timeout' || key === 'hot_fix_timeout';
    return `
        <!-- hidden actual seconds value -->
        <input type="hidden" id="new-value-${setting.id}" value="${defaultSeconds}" />
        <div class="interval-container">
            <!-- The numeric input displayed to user -->
            <input type="number"
            id="interval-num-${setting.id}"
            oninput="updateIntervalValue('${setting.id}')"
            value="${displayValueInGuessedUnit}" />

            <!-- The time unit select, with guessedUnit pre-selected -->
            ${lockToSeconds
                ? `<input type="hidden" id="interval-unit-${setting.id}" value="1" /><span class="interval-unit-label">second(s)</span>`
                : `<select id="interval-unit-${setting.id}" onchange="updateIntervalUnit('${setting.id}')">
                    <option value="1"${guessedUnit === '1' ? ' selected' : ''}>second(s)</option>
                    <option value="60"${guessedUnit === '60' ? ' selected' : ''}>minute(s)</option>
                    <option value="3600"${guessedUnit === '3600' ? ' selected' : ''}>hour(s)</option>
                    <option value="86400"${guessedUnit === '86400' ? ' selected' : ''}>day(s)</option>
                  </select>`
            }
        </div>
      `;
}

function guessTimeUnit(seconds) {
    if (seconds >= 86400 && (seconds % 86400 === 0)) {
        return '86400';
    } else if (seconds >= 3600 && (seconds % 3600 === 0)) {
        return '3600';
    } else if (seconds >= 60 && (seconds % 60 === 0)) {
        return '60';
    }
    return '1';
}

function formatSettingName(settingName, group) {
    if (settingName.startsWith(group + "_")) {
        settingName = settingName.replace(group + "_", "");
    }

    return settingName;
}

function getSettingMeta(key) {
    return settingsMeta && settingsMeta.settings ? settingsMeta.settings[key] : null;
}

function getCommandMeta(key) {
    return settingsMeta && settingsMeta.commands ? settingsMeta.commands[key] : null;
}

function getCommandInputMeta(key) {
    const meta = getCommandMeta(key);
    if (!meta) {
        return null;
    }
    if (meta.input && meta.input.source) {
        if (meta.input.source === 'values') {
            return { source: 'values' };
        }
        if (meta.input.source === 'settings') {
            return { source: 'settings' };
        }
    }
    if (meta.options || meta.input) {
        return meta;
    }
    return null;
}

function getCommandValueOptions() {
    if (!settingsData || !settingsData.values) {
        return [];
    }
    return Object.entries(settingsData.values)
        .map(([name, meta]) => ({
            name,
            id: meta.id
        }))
        .sort((a, b) => a.name.localeCompare(b.name));
}

function getCommandSettingOptions() {
    if (!settingsData || !settingsData.settings) {
        return [];
    }
    return Object.entries(settingsData.settings)
        .map(([name, meta]) => ({
            name,
            id: meta.id
        }))
        .sort((a, b) => a.name.localeCompare(b.name));
}

function getSettingLabel(key, group) {
    const meta = getSettingMeta(key);
    if (meta) {
        if (meta.display_name) {
            return meta.display_name;
        }
        if (meta.label) {
            return meta.label;
        }
    }
    return formatSettingName(key, group).replace(/_/g, " ");
}

function getSettingDescription(key) {
    const meta = getSettingMeta(key);
    return meta && meta.description ? meta.description : "";
}

function renderSettingInfoTrigger(description, details = []) {
    const parts = [];
    if (description) {
        parts.push(String(description).trim());
    }
    if (Array.isArray(details)) {
        details
            .map((detail) => String(detail || '').trim())
            .filter(Boolean)
            .forEach((detail) => parts.push(detail));
    }
    if (!parts.length) {
        return '';
    }
    const tooltipText = parts.join('\n');
    const safeTooltip = escapeHtml(tooltipText);
    return `<button type="button" class="setting-info-button" aria-label="${safeTooltip}" data-tooltip="${safeTooltip}" title="${safeTooltip}">i</button>`;
}

function getSettingOptions(key) {
    const meta = getSettingMeta(key);
    return meta && Array.isArray(meta.options) ? meta.options : null;
}

function getCommandLabel(key) {
    const meta = getCommandMeta(key);
    if (meta) {
        if (meta.display_name) {
            return meta.display_name;
        }
        if (meta.label) {
            return meta.label;
        }
    }
    return key.replace(/^cmd_/, "").replace(/_/g, " ");
}

function getCommandDescription(key) {
    const meta = getCommandMeta(key);
    return meta && meta.description ? meta.description : "";
}

function getGroupName(key) {
    const meta = getSettingMeta(key);
    if (meta && meta.category) {
        return meta.category;
    }
    for (const [rx, groupName] of Object.entries(grouping)) {
        const match = key.match(rx);
        if (match) {
            if (typeof groupName === 'number') {
                return match[groupName];
            } else {
                return groupName;
            }
        }
    }
    return key;
}

function formatGroupTitle(groupName) {
    if (!groupName) {
        return '';
    }
    const normalized = String(groupName).trim().toLowerCase();
    const customGroupTitles = {
        ble: 'BLE',
        ble_scan: 'BLE Scan',
        cmdq: 'CMDQ',
        gps: 'GPS',
        lorawan: 'LoRaWAN',
        lp0: 'LP0',
        lr_gps: 'LR GPS',
        lr_messaging: 'Messaging',
        outdoor: 'Outdoor detection',
        s_band: 'S-Band Satellite',
        satellite: 'Iridium Satellite',
        vhf: 'VHF',
        wifi_scan: 'WiFi Scan'
    };
    if (customGroupTitles[normalized]) {
        return customGroupTitles[normalized];
    }
    return String(groupName).replace(/_/g, ' ');
}

function groupAndSortSettings() {
    const grouped = {};
    const other = {};
    const keepSingletonGroups = new Set(['status', 'memfault']);

    for (const key in settingsData.settings) {
        const groupName = getGroupName(key);
        if (!grouped[groupName]) {
            grouped[groupName] = {};
        }
        grouped[groupName][key] = settingsData.settings[key];
    }

    // Move singletons into "_other"
    for (const prefix in grouped) {
        if (Object.keys(grouped[prefix]).length === 1 && !keepSingletonGroups.has(prefix)) {
            const [singleKey] = Object.keys(grouped[prefix]);
            other[singleKey] = grouped[prefix][singleKey];
            delete grouped[prefix];
        }
    }

    if (Object.keys(other).length > 0) {
        grouped["_other"] = other;
    }

    for (const groupName in grouped) {
        for (const key in grouped[groupName]) {
            grouped[groupName][key].display_name = getSettingLabel(key, groupName);
            const description = getSettingDescription(key);
            if (description) {
                grouped[groupName][key].description = description;
            }
        }
    }

    // Sort groups
    const sortedGroups = Object.keys(grouped).sort().reduce((acc, group) => {
        acc[group] = Object.keys(grouped[group]).sort((a, b) => {
            const nameA = grouped[group][a].display_name.toLowerCase();
            const nameB = grouped[group][b].display_name.toLowerCase();
            return nameA.localeCompare(nameB);
        }).reduce((groupAcc, key) => {
            groupAcc[key] = grouped[group][key];
            return groupAcc;
        }, {});
        return acc;
    }, {});

    return sortedGroups;
}

function renderInput(key, setting) {
    if (setting.length === 0) {
        return '';
    }

    return `<div class="input-container" id="input-container-${setting.id}">${sanitizeRenderedInputHtml(
        renderInputControl(key, setting, normalizeRenderableValue(setting.default))
    )}</div>`;
}

function renderInputContainer(key, setting) {
    return `<div class="input-container" id="input-container-${setting.id}"></div>`;
}

function renderInputControl(key, setting, value) {
    if (setting.length === 0) {
        return '';
    }

    value = normalizeRenderableValue(value);

    // Build the "include" checkbox + label
    let html = '';

    // 0) Special byte array renderers
    if (customByteArrayRenderers[key]) {
        value = stripBytes(value);
        html += customByteArrayRenderers[key](setting, value);
    }

    // 1) Custom input renderers
    else if (customInputRenderers[key]) {
        html += customInputRenderers[key](setting, value);
        if (key === 'device_pin') {
            value = normalizeDevicePinStorageValue(value);
        }
    }

    // 2) If it's one of the bitmask settings -> render custom or port checkboxes
    else if (isBitmaskSetting(key) && (setting.conversion === 'uint32' || setting.conversion === 'uint8')) {
        if (customBitmaskRenderers[key]) {
            html += customBitmaskRenderers[key](setting, value);
        } else {
            html += renderPortCheckboxes(setting, value);
        }
    }

    // 3) If the key ends with "_interval" -> render numeric + time-unit select (with auto-guess)
    else if (isIntervalSetting(key)) {
        html += renderIntervalSetting(key, setting, value);
    }

    // 4) If metadata provides options -> render select + raw value
    else if (getSettingOptions(key)) {
        const metaOptions = getSettingOptions(key);
        html += `<select id="new-value-${setting.id}" onchange="__onInputChanged('${setting.id}')">`;
        for (const option of metaOptions) {
            const optionValue = option.value;
            const selected = String(optionValue) === String(value) ? ' selected' : '';
            html += `<option value="${optionValue}"${selected}>${option.label}</option>`;
        }
        html += `</select>`;
        html += `
          <label class="raw-value-label" for="raw-value-${setting.id}">Raw value</label>
          <input type="text" id="raw-value-${setting.id}" class="raw-value" value="${value ?? ''}" readonly />
        `;
    }

    // 5) If it's a normal bool
    else if (setting.conversion === 'bool') {
        const boolValue = String(value).toLowerCase() === 'true';
        html += `<select id="new-value-${setting.id}" onchange="__onInputChanged('${setting.id}')">`;
        if (boolValue) {
            html += `<option value="true" selected>true</option><option value="false">false</option>`;
        } else {
            html += `<option value="true">true</option><option value="false" selected>false</option>`;
        }
        html += `</select>`;
    }

    // 6) If it's a normal numeric input
    else if (['uint32', 'uint16', 'uint8', 'int32', 'int8', 'float'].includes(setting.conversion)) {
        const min = setting.min != undefined ? setting.min : minMaxValues[setting.conversion].min;
        const max = setting.max != undefined ? setting.max : minMaxValues[setting.conversion].max;
        html += `<input
         type="number"
         id="new-value-${setting.id}"
         min="${min}"
         max="${max}"
         step="${setting.conversion === 'float' ? '0.01' : '1'}"
         value="${value}"
         oninput="__onInputChanged('${setting.id}')"
       />`;
    }

    // 7) If it's a byte_array
    else if (setting.conversion === 'byte_array') {
        value = stripBytes(value);
        html += `<textarea id="new-value-${setting.id}" rows="4" oninput="__onInputChanged('${setting.id}')">${value}</textarea>`;
    }

    // 8) If it's a string
    else if (setting.conversion === 'string') {
        html += `<input type="text" id="new-value-${setting.id}" value="${value}" oninput="__onInputChanged('${setting.id}')"/>`;
    }

    // 9) Otherwise unknown/custom, default to text
    else {
        html += `<input type="text" id="new-value-${setting.id}" value="${value}" oninput="__onInputChanged('${setting.id}')"/>`;
    }

    let errorText = '';
    try {
        validateInput(key, setting, value);
    } catch (error) {
        errorText = error.message;
    }

    html += `<div class="input-error" id="input-error-${setting.id}">${errorText}</div>`; // close input-container
    html += renderDynamicSettingHelper(key, setting);

    return html;
}

function formatDurationCompact(totalSeconds) {
    const seconds = Number(totalSeconds);
    if (!Number.isFinite(seconds) || seconds < 0) {
        return '—';
    }
    if (seconds === 0) {
        return '0 seconds';
    }

    const units = [
        { size: 86400, label: 'day' },
        { size: 3600, label: 'hour' },
        { size: 60, label: 'minute' },
        { size: 1, label: 'second' }
    ];
    const parts = [];
    let remaining = Math.round(seconds);

    for (const unit of units) {
        if (remaining < unit.size) {
            continue;
        }
        const count = Math.floor(remaining / unit.size);
        remaining -= count * unit.size;
        parts.push(`${count} ${unit.label}${count === 1 ? '' : 's'}`);
        if (parts.length === 2) {
            break;
        }
    }

    return parts.join(' ');
}

function getSettingEffectiveValue(key) {
    if (!settingsData || !settingsData.settings || !settingsData.settings[key]) {
        return null;
    }
    const setting = settingsData.settings[key];
    const currentValue = getInputValue(setting.id);
    if (currentValue !== undefined && currentValue !== null && String(currentValue).trim() !== '') {
        return currentValue;
    }
    return normalizeRenderableValue(setting.default);
}

function getGpsSkippedTriggeredIntervalHelperText() {
    const skippedRaw = getSettingEffectiveValue('gps_skipped_triggered_interval');
    const intervalRaw = getSettingEffectiveValue('ublox_send_interval');
    const skippedCount = Number.parseInt(skippedRaw, 10);
    const intervalSeconds = Number.parseInt(intervalRaw, 10);

    if (!Number.isFinite(intervalSeconds) || intervalSeconds < 0) {
        return 'Set ublox send interval to estimate how long the device may wait before forcing a GPS fix.';
    }

    const intervalLabel = formatDurationCompact(intervalSeconds);
    if (!Number.isFinite(skippedCount) || skippedCount < 0) {
        return `Ublox send interval is currently ${intervalLabel}.`;
    }

    if (skippedCount === 0) {
        return `0 means the device performs a GPS fix on every ublox send interval (${intervalLabel}).`;
    }

    const maxSkipDuration = skippedCount * intervalSeconds;
    return `With ublox send interval at ${intervalLabel}, the device may skip fixes for about ${formatDurationCompact(maxSkipDuration)} before forcing a new fix if no motion is detected.`;
}

function getDynamicSettingHelperText(key) {
    if (key === 'gps_skipped_triggered_interval') {
        return getGpsSkippedTriggeredIntervalHelperText();
    }
    return '';
}

function renderDynamicSettingHelper(key, setting) {
    const text = getDynamicSettingHelperText(key);
    if (!text) {
        return '';
    }
    return `<div class="input-helper dynamic-setting-helper" id="dynamic-helper-${setting.id}">${escapeHtml(text)}</div>`;
}

function refreshDynamicSettingHelperByKey(key) {
    const setting = settingsData && settingsData.settings ? settingsData.settings[key] : null;
    if (!setting) {
        return;
    }
    const helper = document.getElementById(`dynamic-helper-${setting.id}`);
    if (!helper) {
        return;
    }
    helper.textContent = getDynamicSettingHelperText(key);
}

function refreshDynamicSettingHelpers(key) {
    const normalizedKey = String(key || '');
    if (normalizedKey === 'gps_skipped_triggered_interval' || normalizedKey === 'ublox_send_interval') {
        refreshDynamicSettingHelperByKey('gps_skipped_triggered_interval');
    }
}

function parseByteArrayValue(value, expectedLength) {
    const hex = stripBytes(value || '');
    const bytes = new Uint8Array(expectedLength);
    for (let i = 0; i < expectedLength; i++) {
        const start = i * 2;
        if (start + 2 <= hex.length) {
            bytes[i] = parseInt(hex.substr(start, 2), 16);
        } else {
            bytes[i] = 0;
        }
    }
    return bytes;
}

function renderByteArrayField(settingId, index, label, value, options, helpText, readOnly) {
    const inputId = `byte-${settingId}-${index}`;
    const control = options
        ? `<select id="${inputId}" onchange="updateLp0ByteArray('${settingId}')">
            ${options.map(option => `<option value="${option.value}"${option.value === value ? ' selected' : ''}>${option.label}</option>`).join('')}
           </select>`
        : `<input type="number"
            id="${inputId}"
            min="0"
            max="255"
            value="${value}"
            ${readOnly ? 'readonly' : ''}
            oninput="updateLp0ByteArray('${settingId}')"
          />`;

    return `
        <div class="byte-array-field">
            <label for="${inputId}">${label}</label>
            ${control}
            ${helpText ? `<div class="byte-array-help">${helpText}</div>` : ''}
        </div>
    `;
}

function renderLp0CommunicationParams(setting, value) {
    const bytes = parseByteArrayValue(value, setting.length);
    return `
        <input type="hidden" id="new-value-${setting.id}" value="${bytesToHex(bytes)}" />
        <div class="byte-array-grid">
            ${renderByteArrayField(setting.id, 0, 'Spreading factor', bytes[0], [
                { value: 0x05, label: 'LR11XX_RADIO_LORA_SF5 (0x05)' },
                { value: 0x06, label: 'LR11XX_RADIO_LORA_SF6 (0x06)' },
                { value: 0x07, label: 'LR11XX_RADIO_LORA_SF7 (0x07)' },
                { value: 0x08, label: 'LR11XX_RADIO_LORA_SF8 (0x08)' },
                { value: 0x09, label: 'LR11XX_RADIO_LORA_SF9 (0x09)' },
                { value: 0x0A, label: 'LR11XX_RADIO_LORA_SF10 (0x0A)' },
                { value: 0x0B, label: 'LR11XX_RADIO_LORA_SF11 (0x0B)' },
                { value: 0x0C, label: 'LR11XX_RADIO_LORA_SF12 (0x0C)' }
            ], 'Default: LR11XX_RADIO_LORA_SF9 (0x09)')}
            ${renderByteArrayField(setting.id, 1, 'Bandwidth', bytes[1], [
                { value: 0x08, label: 'LR11XX_RADIO_LORA_BW_10 (10.42 kHz, 0x08)' },
                { value: 0x01, label: 'LR11XX_RADIO_LORA_BW_15 (15.63 kHz, 0x01)' },
                { value: 0x09, label: 'LR11XX_RADIO_LORA_BW_20 (20.83 kHz, 0x09)' },
                { value: 0x02, label: 'LR11XX_RADIO_LORA_BW_31 (31.25 kHz, 0x02)' },
                { value: 0x0A, label: 'LR11XX_RADIO_LORA_BW_41 (41.67 kHz, 0x0A)' },
                { value: 0x03, label: 'LR11XX_RADIO_LORA_BW_62 (62.50 kHz, 0x03)' },
                { value: 0x04, label: 'LR11XX_RADIO_LORA_BW_125 (125.00 kHz, 0x04)' },
                { value: 0x05, label: 'LR11XX_RADIO_LORA_BW_250 (250.00 kHz, 0x05)' },
                { value: 0x06, label: 'LR11XX_RADIO_LORA_BW_500 (500.00 kHz, 0x06)' },
                { value: 0x0D, label: 'LR11XX_RADIO_LORA_BW_200 (203.00 kHz, 0x0D)' },
                { value: 0x0E, label: 'LR11XX_RADIO_LORA_BW_400 (406.00 kHz, 0x0E)' },
                { value: 0x0F, label: 'LR11XX_RADIO_LORA_BW_800 (812.00 kHz, 0x0F)' }
            ], 'Default: LR11XX_RADIO_LORA_BW_125 (0x04)')}
            ${renderByteArrayField(setting.id, 2, 'Coding rate', bytes[2], [
                { value: 0x00, label: 'LR11XX_RADIO_LORA_NO_CR (0x00)' },
                { value: 0x01, label: 'LR11XX_RADIO_LORA_CR_4_5 (0x01)' },
                { value: 0x02, label: 'LR11XX_RADIO_LORA_CR_4_6 (0x02)' },
                { value: 0x03, label: 'LR11XX_RADIO_LORA_CR_4_7 (0x03)' },
                { value: 0x04, label: 'LR11XX_RADIO_LORA_CR_4_8 (0x04)' },
                { value: 0x05, label: 'LR11XX_RADIO_LORA_CR_LI_4_5 (0x05)' },
                { value: 0x06, label: 'LR11XX_RADIO_LORA_CR_LI_4_6 (0x06)' },
                { value: 0x07, label: 'LR11XX_RADIO_LORA_CR_LI_4_8 (0x07)' }
            ], 'Default: LR11XX_RADIO_LORA_CR_4_5 (0x01)')}
            ${renderByteArrayField(setting.id, 3, 'RX1 window delay (seconds)', bytes[3], null, 'Must match across devices in the same network')}
            ${renderByteArrayField(setting.id, 4, 'Unused (reserved)', bytes[4], null, 'Currently not used')}
        </div>
    `;
}

function renderLp0NodeParams(setting, value) {
    const bytes = parseByteArrayValue(value, setting.length);
    return `
        <input type="hidden" id="new-value-${setting.id}" value="${bytesToHex(bytes)}" />
        <div class="byte-array-grid">
            ${renderByteArrayField(setting.id, 0, 'Offload feature', bytes[0], [
                { value: 0, label: '0 - Offload feature off' },
                { value: 1, label: '1 - Device is a tracker' },
                { value: 2, label: '2 - Device is an offload station' }
            ])}
            ${renderByteArrayField(setting.id, 1, 'Offload station ID', bytes[1])}
            ${renderByteArrayField(setting.id, 2, 'Max overlapping nodes', bytes[2])}
            ${renderByteArrayField(setting.id, 3, 'Use LoRaWAN header for ping', bytes[3], [
                { value: 0, label: '0 - Disabled' },
                { value: 1, label: '1 - Enabled' }
            ], 'Currently unused; pings use LoRaWAN header')}
            ${renderByteArrayField(setting.id, 4, 'Ping interval (seconds)', bytes[4], null, '0-255; 0 = ping ASAP after idle')}
        </div>
    `;
}

function renderOutdoorDetectionParameters(setting, value) {
    const bytes = parseByteArrayValue(value, setting.length);
    return `
        <input type="hidden" id="new-value-${setting.id}" value="${bytesToHex(bytes)}" />
        <div class="byte-array-grid">
            ${renderByteArrayField(setting.id, 0, 'Bias (byte 0)', bytes[0], null, 'Little-endian, value * 1000')}
            ${renderByteArrayField(setting.id, 1, 'Bias (byte 1)', bytes[1], null, 'Little-endian, value * 1000')}
            ${renderByteArrayField(setting.id, 2, 'Temperature weight (byte 0)', bytes[2], null, 'Little-endian, value * 1000')}
            ${renderByteArrayField(setting.id, 3, 'Temperature weight (byte 1)', bytes[3], null, 'Little-endian, value * 1000')}
            ${renderByteArrayField(setting.id, 4, 'Accelerometer weight (byte 0)', bytes[4], null, 'Little-endian, value * 1000')}
            ${renderByteArrayField(setting.id, 5, 'Accelerometer weight (byte 1)', bytes[5], null, 'Little-endian, value * 1000')}
            ${renderByteArrayField(setting.id, 6, 'Hour weight (byte 0)', bytes[6], null, 'Little-endian, value * 1000')}
            ${renderByteArrayField(setting.id, 7, 'Hour weight (byte 1)', bytes[7], null, 'Little-endian, value * 1000')}
            ${renderByteArrayField(setting.id, 8, 'TZ offset (byte 0)', bytes[8], null, 'Seconds, little-endian')}
            ${renderByteArrayField(setting.id, 9, 'TZ offset (byte 1)', bytes[9], null, 'Seconds, little-endian')}
            ${renderByteArrayField(setting.id, 10, 'TZ offset (byte 2)', bytes[10], null, 'Seconds, little-endian')}
            ${renderByteArrayField(setting.id, 11, 'TZ offset (byte 3)', bytes[11], null, 'Seconds, little-endian')}
        </div>
    `;
}

function renderMsInput(setting, value) {
    const msValue = value === '' || value === undefined || value === null ? '' : Number(value);
    const seconds = Number.isFinite(msValue) ? (msValue / 1000) : '';
    return `
        <label class="input-label" for="new-value-${setting.id}">Milliseconds</label>
        <input type="number" id="new-value-${setting.id}" value="${value ?? ''}" min="0" oninput="updateMsValue('${setting.id}')" />
        <div class="input-helper">Seconds: ${seconds === '' ? '—' : seconds}</div>
        <label class="raw-value-label" for="raw-value-${setting.id}">Raw value</label>
        <input type="text" id="raw-value-${setting.id}" class="raw-value" value="${value ?? ''}" readonly />
    `;
}

function renderSecondsInput(setting, value) {
    const secondsValue = value === '' || value === undefined || value === null ? '' : Number(value);
    const minutes = Number.isFinite(secondsValue) ? (secondsValue / 60) : '';
    return `
        <label class="input-label" for="new-value-${setting.id}">Seconds</label>
        <input type="number" id="new-value-${setting.id}" value="${value ?? ''}" min="0" oninput="updateSecondsValue('${setting.id}')" />
        <div class="input-helper">Minutes: ${minutes === '' ? '—' : minutes}</div>
        <label class="raw-value-label" for="raw-value-${setting.id}">Raw value</label>
        <input type="text" id="raw-value-${setting.id}" class="raw-value" value="${value ?? ''}" readonly />
    `;
}

function formatUtcHourLabel(value) {
    if (!Number.isFinite(value)) {
        return 'UTC hour not set';
    }
    const hour = Math.max(0, Math.min(23, Math.trunc(value)));
    return `${String(hour).padStart(2, '0')}:00 UTC`;
}

function formatUtcOffsetLabelFromTimezoneOffset(offsetMinutes) {
    const safeOffset = Number.isFinite(offsetMinutes) ? offsetMinutes : 0;
    const sign = safeOffset <= 0 ? '+' : '-';
    const absolute = Math.abs(safeOffset);
    const hours = Math.floor(absolute / 60);
    const minutes = absolute % 60;
    return `UTC${sign}${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
}

function getBrowserTimezoneLabel() {
    const timezoneName = typeof Intl !== 'undefined' && Intl.DateTimeFormat
        ? Intl.DateTimeFormat().resolvedOptions().timeZone
        : '';
    const offsetLabel = formatUtcOffsetLabelFromTimezoneOffset(new Date().getTimezoneOffset());
    return timezoneName ? `${timezoneName} (${offsetLabel})` : offsetLabel;
}

function formatTimeOfDay(minutesSinceMidnight) {
    const safeMinutes = ((Math.trunc(minutesSinceMidnight) % 1440) + 1440) % 1440;
    const hours = Math.floor(safeMinutes / 60);
    const minutes = safeMinutes % 60;
    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
}

function normalizeUtcHourValue(rawValue) {
    const normalized = String(rawValue || '').replace(/[^\d]/g, '');
    let hour = normalized === '' ? '' : parseInt(normalized, 10);
    if (hour !== '' && Number.isFinite(hour)) {
        hour = Math.max(0, Math.min(23, hour));
    }
    return hour;
}

function formatLocalTimeValueFromUtcHour(value) {
    if (!Number.isFinite(value)) {
        return '';
    }
    const hour = Math.max(0, Math.min(23, Math.trunc(value)));
    const timezoneOffset = new Date().getTimezoneOffset();
    const localMinutes = (hour * 60) - timezoneOffset;
    return formatTimeOfDay(localMinutes);
}

function getUtcHourLocalHelperLabel() {
    return `Browser timezone: ${getBrowserTimezoneLabel()}. Local time is converted back to a whole UTC hour.`;
}

function syncUtcHourDisplay(hour, rawValueElement, helperElement, localTimeElement, localHelperElement) {
    if (rawValueElement) {
        rawValueElement.value = hour === '' ? '' : hour.toString();
    }
    if (helperElement) {
        helperElement.textContent = formatUtcHourLabel(hour);
    }
    if (localTimeElement) {
        localTimeElement.value = hour === '' ? '' : formatLocalTimeValueFromUtcHour(hour);
    }
    if (localHelperElement) {
        localHelperElement.textContent = getUtcHourLocalHelperLabel();
    }
}

function convertLocalTimeInputToUtcHour(localTimeValue) {
    const match = String(localTimeValue || '').match(/^(\d{2}):(\d{2})$/);
    if (!match) {
        return { hour: '', normalizedLocalValue: '' };
    }

    const localHours = parseInt(match[1], 10);
    const localMinutes = parseInt(match[2], 10);
    if (!Number.isFinite(localHours) || !Number.isFinite(localMinutes)) {
        return { hour: '', normalizedLocalValue: '' };
    }

    const timezoneOffset = new Date().getTimezoneOffset();
    const utcMinutesRaw = ((localHours * 60) + localMinutes + timezoneOffset + 1440) % 1440;
    const roundedUtcMinutes = (Math.round(utcMinutesRaw / 60) * 60) % 1440;
    const hour = ((roundedUtcMinutes / 60) % 24 + 24) % 24;
    return {
        hour,
        normalizedLocalValue: formatLocalTimeValueFromUtcHour(hour)
    };
}

function renderUtcHourInput(setting, value) {
    const hourValue = value === '' || value === undefined || value === null ? '' : Number(value);
    const safeValue = Number.isFinite(hourValue) ? Math.max(0, Math.min(23, Math.trunc(hourValue))) : '';
    return `
        <label class="input-label" for="new-value-${setting.id}">UTC hour</label>
        <input type="number" id="new-value-${setting.id}" value="${safeValue}" min="0" max="23" step="1" oninput="updateUtcHourValue('${setting.id}')" />
        <div class="input-helper" id="utc-hour-helper-${setting.id}">${formatUtcHourLabel(safeValue)}</div>
        <label class="input-label" for="local-time-${setting.id}">Local time (browser)</label>
        <input type="time" id="local-time-${setting.id}" value="${safeValue === '' ? '' : formatLocalTimeValueFromUtcHour(safeValue)}" step="60" oninput="updateLocalUtcHourValue('${setting.id}')" />
        <div class="input-helper" id="local-timezone-helper-${setting.id}">${getUtcHourLocalHelperLabel()}</div>
        <label class="raw-value-label" for="raw-value-${setting.id}">Raw value</label>
        <input type="text" id="raw-value-${setting.id}" class="raw-value" value="${safeValue}" readonly />
    `;
}

function renderUnixTimeInput(setting, value) {
    const hasValue = !isInvalidInputValue(value) && String(value).trim() !== '';
    const seconds = hasValue ? Number(value) : NaN;
    const date = Number.isFinite(seconds) ? new Date(seconds * 1000) : null;
    const dateValue = date ? formatLocalDateTime(date) : '';
    const utcValue = date ? date.toISOString().replace('.000Z', ' UTC') : '—';
    return `
        <label class="input-label" for="datetime-${setting.id}">Date & time (local)</label>
        <input type="datetime-local" id="datetime-${setting.id}" value="${dateValue}" onchange="updateUnixTimeValue('${setting.id}')" />
        <div class="input-helper" id="utc-datetime-helper-${setting.id}">UTC: ${utcValue}</div>
        <label class="raw-value-label" for="raw-value-${setting.id}">Raw value (unix seconds)</label>
        <input type="text" id="raw-value-${setting.id}" class="raw-value" value="${value ?? ''}" readonly />
        <input type="hidden" id="new-value-${setting.id}" value="${value ?? ''}" />
    `;
}

function normalizeDevicePinStorageValue(value) {
    const normalized = normalizeRenderableValue(value);
    if (normalized === '') {
        return '';
    }
    const asString = String(normalized).trim();
    if (/^\d{1,4}$/.test(asString)) {
        const padded = asString.padStart(4, '0');
        return padded.split('').map((digit) => `0${digit}`).join('').toUpperCase();
    }
    const hex = stripBytes(asString);
    if (hex.length === 8) {
        return hex.toUpperCase();
    }
    return '';
}

function devicePinDigitsFromStorage(value) {
    const raw = normalizeDevicePinStorageValue(value);
    if (!raw) {
        return '';
    }
    const pairs = raw.match(/.{2}/g) || [];
    if (pairs.length !== 4) {
        return '';
    }
    const digits = pairs.map((pair) => pair[1]);
    if (digits.some((digit) => !/^\d$/.test(digit))) {
        return '';
    }
    return digits.join('');
}

function formatDevicePinForDisplay(value) {
    const digits = devicePinDigitsFromStorage(value);
    return digits || String(normalizeRenderableValue(value) || '');
}

function renderDevicePinInput(setting, value) {
    const raw = normalizeDevicePinStorageValue(value);
    const digits = devicePinDigitsFromStorage(value);
    return `
        <label class="input-label" for="pin-value-${setting.id}">PIN (4 digits)</label>
        <input type="text" id="pin-value-${setting.id}" value="${digits}" maxlength="4" inputmode="numeric" pattern="[0-9]*" oninput="updateDevicePinValue('${setting.id}')" />
        <label class="raw-value-label" for="raw-value-${setting.id}">Raw value (hex bytes)</label>
        <input type="text" id="raw-value-${setting.id}" class="raw-value" value="${raw}" readonly />
        <input type="hidden" id="new-value-${setting.id}" value="${raw}" />
    `;
}

function updateDevicePinValue(settingId) {
    const input = document.getElementById(`pin-value-${settingId}`);
    const hiddenField = document.getElementById(`new-value-${settingId}`);
    const rawValueElement = document.getElementById(`raw-value-${settingId}`);
    if (!input || !hiddenField) {
        return;
    }
    const digits = (input.value || '').replace(/\D/g, '').slice(0, 4);
    if (input.value !== digits) {
        input.value = digits;
    }
    const raw = digits.length === 4
        ? digits.split('').map((digit) => `0${digit}`).join('').toUpperCase()
        : '';
    hiddenField.value = raw;
    if (rawValueElement) {
        rawValueElement.value = raw;
    }
    __onInputChanged(settingId);
}

function updateUtcHourValue(settingId) {
    const input = document.getElementById(`new-value-${settingId}`);
    const rawValueElement = document.getElementById(`raw-value-${settingId}`);
    const helperElement = document.getElementById(`utc-hour-helper-${settingId}`);
    const localTimeElement = document.getElementById(`local-time-${settingId}`);
    const localHelperElement = document.getElementById(`local-timezone-helper-${settingId}`);
    if (!input) {
        return;
    }

    const hour = normalizeUtcHourValue(input.value);
    input.value = hour === '' ? '' : hour.toString();
    syncUtcHourDisplay(hour, rawValueElement, helperElement, localTimeElement, localHelperElement);

    __onInputChanged(settingId);
}

function updateLocalUtcHourValue(settingId) {
    const input = document.getElementById(`new-value-${settingId}`);
    const rawValueElement = document.getElementById(`raw-value-${settingId}`);
    const helperElement = document.getElementById(`utc-hour-helper-${settingId}`);
    const localTimeElement = document.getElementById(`local-time-${settingId}`);
    const localHelperElement = document.getElementById(`local-timezone-helper-${settingId}`);
    if (!input || !localTimeElement) {
        return;
    }

    const { hour, normalizedLocalValue } = convertLocalTimeInputToUtcHour(localTimeElement.value);
    localTimeElement.value = normalizedLocalValue;
    input.value = hour === '' ? '' : hour.toString();
    syncUtcHourDisplay(hour, rawValueElement, helperElement, localTimeElement, localHelperElement);
    __onInputChanged(settingId);
}

function isInvalidInputValue(value) {
    if (value === undefined || value === null) {
        return true;
    }
    if (typeof value === 'number' && !Number.isFinite(value)) {
        return true;
    }
    if (typeof value === 'string') {
        const normalized = value.trim().toLowerCase();
        return normalized === 'undefined' || normalized === 'null' || normalized === 'nan';
    }
    return false;
}

function normalizeRenderableValue(value) {
    return isInvalidInputValue(value) ? '' : value;
}

function sanitizeRenderedInputHtml(html) {
    return String(html)
        .replace(/(value=)(['"])(undefined|null|nan)\2/gi, '$1$2$2')
        .replace(/(value=)(['"])\s*(undefined|null|nan)\s*\2/gi, '$1$2$2');
}

function renderMacAddressParameters(setting, value) {
    const bytes = parseByteArrayValue(value, setting.length);
    const rawHex = bytesToHex(bytes);
    const mac = formatMacAddressForDisplay(rawHex, setting.length);
    return `
        <label class="input-label" for="mac-value-${setting.id}">MAC address</label>
        <input
            type="text"
            id="mac-value-${setting.id}"
            value="${mac}"
            maxlength="${setting.length * 3 - 1}"
            placeholder="FF:FF:FF:FF:FF:FF"
            autocapitalize="characters"
            spellcheck="false"
            oninput="updateMacAddressValue('${setting.id}')"
        />
        <label class="raw-value-label" for="raw-value-${setting.id}">Raw value (hex bytes)</label>
        <input type="text" id="raw-value-${setting.id}" class="raw-value" value="${rawHex}" readonly />
        <input type="hidden" id="new-value-${setting.id}" value="${rawHex}" />
        <div class="input-helper" id="mac-preview-${setting.id}">MAC: ${mac}</div>
    `;
}

function renderHexUint16Input(setting, value) {
    const numValue = value === '' || value === undefined || value === null ? '' : Number(value);
    const hexValue = Number.isFinite(numValue) ? `0x${numValue.toString(16).toUpperCase().padStart(4, '0')}` : '';
    return `
        <label class="input-label" for="hex-value-${setting.id}">Hex value</label>
        <input type="text" id="hex-value-${setting.id}" value="${hexValue}" placeholder="0x0000" oninput="updateHexValue('${setting.id}')"/>
        <label class="raw-value-label" for="raw-value-${setting.id}">Raw value (decimal)</label>
        <input type="text" id="raw-value-${setting.id}" class="raw-value" value="${value ?? ''}" readonly />
        <input type="hidden" id="new-value-${setting.id}" value="${value ?? ''}" />
    `;
}

function renderLatitudeInput(setting, value) {
    return renderCoordinateInput(setting, value, 'Latitude', -90, 90);
}

function renderLongitudeInput(setting, value) {
    return renderCoordinateInput(setting, value, 'Longitude', -180, 180);
}

function renderCoordinateInput(setting, value, label, min, max) {
    const rawValue = value === '' || value === undefined || value === null ? '' : Number(value);
    const degrees = Number.isFinite(rawValue) ? (rawValue / 1e7).toFixed(7) : '';
    return `
        <label class="input-label" for="coord-value-${setting.id}">${label} (decimal degrees)</label>
        <input type="text" id="coord-value-${setting.id}" value="${degrees}" inputmode="decimal" placeholder="${min} to ${max}" oninput="updateCoordinateValue('${setting.id}', ${min}, ${max})"/>
        <label class="raw-value-label" for="raw-value-${setting.id}">Raw value</label>
        <input type="text" id="raw-value-${setting.id}" class="raw-value" value="${value ?? ''}" readonly />
        <input type="hidden" id="new-value-${setting.id}" value="${value ?? ''}" />
    `;
}

function updateLp0ByteArray(settingId) {
    const [_, setting] = getById(settingId);
    const bytes = new Uint8Array(setting.length);
    for (let i = 0; i < setting.length; i++) {
        const input = document.getElementById(`byte-${settingId}-${i}`);
        let value = input ? parseInt(input.value, 10) : 0;
        if (isNaN(value)) {
            value = 0;
        }
        value = Math.min(255, Math.max(0, value));
        if (input && !input.readOnly) {
            input.value = value;
        }
        bytes[i] = value;
    }
    const hiddenField = document.getElementById(`new-value-${settingId}`);
    hiddenField.value = bytesToHex(bytes);
    const macPreview = document.getElementById(`mac-preview-${settingId}`);
    if (macPreview) {
        macPreview.textContent = `MAC: ${Array.from(bytes).map(toHex).join(':')}`;
    }
    __onInputChanged(settingId);
}

function updateMacAddressValue(settingId) {
    const [_, setting] = getById(settingId);
    const input = document.getElementById(`mac-value-${settingId}`);
    const hiddenField = document.getElementById(`new-value-${settingId}`);
    const rawValueElement = document.getElementById(`raw-value-${settingId}`);
    const macPreview = document.getElementById(`mac-preview-${settingId}`);
    if (!input || !hiddenField) {
        return;
    }

    const normalizedHex = normalizeMacAddressInput(input.value);
    const formattedMac = formatMacAddressForDisplay(normalizedHex, setting.length);
    input.value = formattedMac;
    hiddenField.value = normalizedHex;

    if (rawValueElement) {
        rawValueElement.value = normalizedHex;
    }
    if (macPreview) {
        macPreview.textContent = `MAC: ${formattedMac || '—'}`;
    }

    __onInputChanged(settingId);
}

function updateMsValue(settingId) {
    const input = document.getElementById(`new-value-${settingId}`);
    const rawValueElement = document.getElementById(`raw-value-${settingId}`);
    if (rawValueElement && input) {
        rawValueElement.value = input.value ?? '';
    }
    __onInputChanged(settingId);
}

function updateSecondsValue(settingId) {
    const input = document.getElementById(`new-value-${settingId}`);
    const rawValueElement = document.getElementById(`raw-value-${settingId}`);
    if (rawValueElement && input) {
        rawValueElement.value = input.value ?? '';
    }
    __onInputChanged(settingId);
}

function updateUnixTimeValue(settingId) {
    const dateInput = document.getElementById(`datetime-${settingId}`);
    const hiddenField = document.getElementById(`new-value-${settingId}`);
    const rawValueElement = document.getElementById(`raw-value-${settingId}`);
    const utcHelperElement = document.getElementById(`utc-datetime-helper-${settingId}`);
    if (!dateInput || !hiddenField) {
        return;
    }
    const date = dateInput.value ? new Date(dateInput.value) : null;
    const seconds = date && !Number.isNaN(date.getTime())
        ? Math.floor(date.getTime() / 1000)
        : '';
    hiddenField.value = seconds.toString();
    if (rawValueElement) {
        rawValueElement.value = seconds.toString();
    }
    if (utcHelperElement) {
        utcHelperElement.textContent = `UTC: ${date && !Number.isNaN(date.getTime()) ? date.toISOString().replace('.000Z', ' UTC') : '—'}`;
    }
    __onInputChanged(settingId);
}

function updateHexValue(settingId) {
    const hexInput = document.getElementById(`hex-value-${settingId}`);
    const hiddenField = document.getElementById(`new-value-${settingId}`);
    const rawValueElement = document.getElementById(`raw-value-${settingId}`);
    if (!hexInput || !hiddenField) {
        return;
    }
    const clean = hexInput.value.trim().replace(/^0x/i, '');
    const parsed = parseInt(clean, 16);
    const value = Number.isNaN(parsed) ? '' : parsed;
    hiddenField.value = value.toString();
    if (rawValueElement) {
        rawValueElement.value = value.toString();
    }
    __onInputChanged(settingId);
}

function updateCoordinateValue(settingId, min, max) {
    const input = document.getElementById(`coord-value-${settingId}`);
    const hiddenField = document.getElementById(`new-value-${settingId}`);
    const rawValueElement = document.getElementById(`raw-value-${settingId}`);
    if (!input || !hiddenField) {
        return;
    }
    const normalized = input.value.trim().replace(',', '.');
    const parsed = parseFloat(normalized);
    const clamped = Number.isFinite(parsed)
        ? Math.min(max, Math.max(min, parsed))
        : null;
    const rawValue = clamped === null ? '' : Math.round(clamped * 1e7);
    hiddenField.value = rawValue.toString();
    if (rawValueElement) {
        rawValueElement.value = rawValue.toString();
    }
    __onInputChanged(settingId);
}

function updateBitmaskForSetting(settingId) {
    const hiddenField = document.getElementById(`new-value-${settingId}`);
    let bitmask = 0;
    for (const [portName, portNum] of Object.entries(settingsData.ports)) {
        const cbId = `${portName}-${settingId}`;
        const cb = document.getElementById(cbId);
        if (cb && cb.checked) {
            bitmask |= (1 << (portNum - 1));
        }
    }
    hiddenField.value = (bitmask >>> 0).toString();
    __onInputChanged(settingId);
}

function updateCustomBitmask(settingId, bit) {
    const hiddenField = document.getElementById(`new-value-${settingId}`);
    if (!hiddenField) {
        return;
    }
    let bitmask = parseInt(hiddenField.value, 10) || 0;
    bitmask ^= (1 << bit);
    hiddenField.value = (bitmask & 0xFF).toString();
    __onInputChanged(settingId);
}

// Called when user changes the numeric input for an interval
function updateIntervalValue(settingId) {
    const numericInput = document.getElementById(`interval-num-${settingId}`);
    const unitSelect = document.getElementById(`interval-unit-${settingId}`);
    const hiddenField = document.getElementById(`new-value-${settingId}`);

    let displayVal = parseFloat(numericInput.value) || 0;
    if (displayVal < 0) displayVal = 0; // clamp if needed

    // Convert displayVal from the selected unit -> seconds
    const totalSeconds = convertUnitToSeconds(displayVal, unitSelect.value);

    // Store in hidden
    hiddenField.value = Math.round(totalSeconds).toString();

    __onInputChanged(settingId);
}


// Called when user changes the time unit
function updateIntervalUnit(settingId) {
    const numericInput = document.getElementById(`interval-num-${settingId}`);
    const unitSelect = document.getElementById(`interval-unit-${settingId}`);
    const hiddenField = document.getElementById(`new-value-${settingId}`);

    // Current total seconds in hidden
    let currentSeconds = parseInt(hiddenField.value, 10) || 0;

    // Convert to new unit
    const displayVal = Math.ceil(convertSecondsToUnit(currentSeconds, unitSelect.value));

    numericInput.value = displayVal;

    // Convert displayVal from the selected unit -> seconds
    const totalSeconds = convertUnitToSeconds(displayVal, unitSelect.value);

    // Store in hidden
    hiddenField.value = Math.round(totalSeconds).toString();

    // We keep storing in hidden as seconds
    __onInputChanged(settingId);
}


function toHex(byte) {
    return byte.toString(16).toUpperCase().padStart(2, '0');
}

function bytesToHex(bytes) {
    return Array.from(bytes).map(toHex).join('');
}

function escapeHtml(value) {
    return String(value)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
}

function formatLocalDateTime(date) {
    const pad = value => String(value).padStart(2, '0');
    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
}

function formatLocalDateTimeDisplay(date) {
    const pad = value => String(value).padStart(2, '0');
    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
}

function formatSettingValueForPreview(key, setting, value, compareValue = null, mode = null) {
    if (value === undefined || value === null || value === '') {
        return '<span class="import-preview-empty">—</span>';
    }

    const msKeys = new Set([
        'external_switch_detection_trigger_debounce_ms',
        'vhf_time_between_packets_ms'
    ]);

    if (msKeys.has(key)) {
        const ms = Number(value);
        const seconds = Number.isFinite(ms) ? (ms / 1000) : value;
        return `<div class="import-preview-value">${escapeHtml(Number.isFinite(ms) ? ms : value)} <span class="import-preview-muted">ms</span><div class="import-preview-subvalue">${escapeHtml(seconds)} sec</div></div>`;
    }

    if (key === 'init_time') {
        const seconds = Number(value);
        const date = Number.isFinite(seconds) ? new Date(seconds * 1000) : null;
        const display = date ? formatLocalDateTimeDisplay(date) : value;
        return `<div class="import-preview-value">${escapeHtml(display)}<div class="import-preview-subvalue">Unix: ${escapeHtml(Number.isFinite(seconds) ? seconds : value)} sec</div></div>`;
    }

    if (key === 'gps_init_lat' || key === 'gps_init_lon') {
        const raw = Number(value);
        const degrees = Number.isFinite(raw) ? (raw / 1e7) : value;
        return `<div class="import-preview-value">${escapeHtml(degrees)} <span class="import-preview-muted">degrees</span><div class="import-preview-subvalue">Raw: ${escapeHtml(Number.isFinite(raw) ? raw : value)}</div></div>`;
    }

    if (key === 'device_pin') {
        const digits = devicePinDigitsFromStorage(value);
        const raw = normalizeDevicePinStorageValue(value);
        return `<div class="import-preview-value">${escapeHtml(digits || '—')} <span class="import-preview-muted">PIN</span><div class="import-preview-subvalue">Raw: ${escapeHtml(raw || value)}</div></div>`;
    }

    if (key === 'cmdq_searched_mac_address') {
        const raw = stripBytes(String(value || ''));
        const mac = formatMacAddressForDisplay(raw, setting.length);
        return `<div class="import-preview-value">${escapeHtml(mac || '—')} <span class="import-preview-muted">MAC</span><div class="import-preview-subvalue">Raw: ${escapeHtml(raw || '—')}</div></div>`;
    }

    if (customByteArrayRenderers[key]) {
        return formatCustomByteArrayPreview(key, setting, value);
    }

    if (isBitmaskSetting(key) && setting.conversion === 'uint32') {
        return formatBitmaskPreview(key, value, compareValue, mode);
    }

    if (isIntervalSetting(key)) {
        const seconds = parseInt(value, 10) || 0;
        const guessedUnit = guessTimeUnit(seconds);
        const displayValue = Math.round(convertSecondsToUnit(seconds, guessedUnit));
        const unitLabel = guessedUnit === '86400' ? 'day(s)'
            : guessedUnit === '3600' ? 'hour(s)'
                : guessedUnit === '60' ? 'minute(s)'
                    : 'second(s)';
        return `<div class="import-preview-value">${escapeHtml(displayValue)} <span class="import-preview-muted">${escapeHtml(unitLabel)}</span><div class="import-preview-subvalue">${escapeHtml(seconds)} sec</div></div>`;
    }

    const metaOptions = getSettingOptions(key);
    if (metaOptions) {
        const match = metaOptions.find(option => String(option.value) === String(value));
        if (match) {
            return `<span class="import-preview-mono">${escapeHtml(match.label)}</span>`;
        }
    }

    if (setting.conversion === 'bool') {
        if (value === true || value === 'true' || value === 1 || value === '1') {
            return '<span class="import-preview-bool import-preview-bool-true">true</span>';
        }
        if (value === false || value === 'false' || value === 0 || value === '0') {
            return '<span class="import-preview-bool import-preview-bool-false">false</span>';
        }
        return escapeHtml(value);
    }

    if (setting.conversion === 'byte_array') {
        try {
            const bytes = parseByteArrayValue(value, setting.length);
            return `<div class="import-preview-mono">${bytes.map(b => `0x${toHex(b)}`).join(' ')}</div>`;
        } catch (error) {
            return `<div class="import-preview-mono">${escapeHtml(value)}</div>`;
        }
    }

    if (['uint32', 'uint16', 'uint8', 'int32', 'int8', 'float'].includes(setting.conversion)) {
        const num = Number(value);
        return `<span class="import-preview-mono">${escapeHtml(Number.isFinite(num) ? num : value)}</span>`;
    }

    return escapeHtml(value);
}

function formatBitmaskPreview(key, value, compareValue = null, mode = null) {
    const bitmask = parseInt(value, 10) || 0;
    const compareBitmask = compareValue == null ? null : (parseInt(compareValue, 10) || 0);
    const ports = [];
    const safeKey = (key || 'bitmask').toString().replace(/[^A-Za-z0-9_-]/g, '');
    for (const [portName, portNum] of Object.entries(settingsData.ports || {})) {
        if (skipPorts.includes(portName)) {
            continue;
        }
        const mask = (1 << (portNum - 1));
        const isSet = (bitmask & mask) !== 0;
        const wasSet = compareBitmask == null ? null : (compareBitmask & mask) !== 0;

        let tagClass = '';
        if (mode === 'next' && compareBitmask != null && isSet && !wasSet) {
            tagClass = 'import-preview-tag-added';
        } else if (mode === 'next' && compareBitmask != null && !isSet && wasSet) {
            tagClass = 'import-preview-tag-removed';
        }

        ports.push({
            id: `import-preview-${safeKey}-${mode || 'value'}-${portNum}`,
            name: portName.replace(/^port_/, ''),
            checked: isSet,
            className: tagClass
        });
    }

    if (!ports.length) {
        return '<span class="import-preview-empty">none</span>';
    }

    return `
        <div class="import-preview-checkboxes">
          ${ports.map(port => `
            <div class="import-preview-checkbox ${port.className}">
              <input type="checkbox" id="${port.id}" ${port.checked ? 'checked' : ''} disabled />
              <label for="${port.id}">${escapeHtml(port.name)}</label>
            </div>
          `).join('')}
        </div>
    `;
}

function formatCustomByteArrayPreview(key, setting, value) {
    let bytes;
    try {
        bytes = parseByteArrayValue(value, setting.length);
    } catch (error) {
        return `<div class="import-preview-mono">${escapeHtml(value)}</div>`;
    }

    if (key === 'lp0_communication_params') {
        const sfOptions = [
            { value: 0x05, label: 'LR11XX_RADIO_LORA_SF5 (0x05)' },
            { value: 0x06, label: 'LR11XX_RADIO_LORA_SF6 (0x06)' },
            { value: 0x07, label: 'LR11XX_RADIO_LORA_SF7 (0x07)' },
            { value: 0x08, label: 'LR11XX_RADIO_LORA_SF8 (0x08)' },
            { value: 0x09, label: 'LR11XX_RADIO_LORA_SF9 (0x09)' },
            { value: 0x0A, label: 'LR11XX_RADIO_LORA_SF10 (0x0A)' },
            { value: 0x0B, label: 'LR11XX_RADIO_LORA_SF11 (0x0B)' },
            { value: 0x0C, label: 'LR11XX_RADIO_LORA_SF12 (0x0C)' }
        ];
        const bwOptions = [
            { value: 0x08, label: 'LR11XX_RADIO_LORA_BW_10 (10.42 kHz, 0x08)' },
            { value: 0x01, label: 'LR11XX_RADIO_LORA_BW_15 (15.63 kHz, 0x01)' },
            { value: 0x09, label: 'LR11XX_RADIO_LORA_BW_20 (20.83 kHz, 0x09)' },
            { value: 0x02, label: 'LR11XX_RADIO_LORA_BW_31 (31.25 kHz, 0x02)' },
            { value: 0x0A, label: 'LR11XX_RADIO_LORA_BW_41 (41.67 kHz, 0x0A)' },
            { value: 0x03, label: 'LR11XX_RADIO_LORA_BW_62 (62.50 kHz, 0x03)' },
            { value: 0x04, label: 'LR11XX_RADIO_LORA_BW_125 (125.00 kHz, 0x04)' },
            { value: 0x05, label: 'LR11XX_RADIO_LORA_BW_250 (250.00 kHz, 0x05)' },
            { value: 0x06, label: 'LR11XX_RADIO_LORA_BW_500 (500.00 kHz, 0x06)' },
            { value: 0x0D, label: 'LR11XX_RADIO_LORA_BW_200 (203.00 kHz, 0x0D)' },
            { value: 0x0E, label: 'LR11XX_RADIO_LORA_BW_400 (406.00 kHz, 0x0E)' },
            { value: 0x0F, label: 'LR11XX_RADIO_LORA_BW_800 (812.00 kHz, 0x0F)' }
        ];
        const crOptions = [
            { value: 0x00, label: 'LR11XX_RADIO_LORA_NO_CR (0x00)' },
            { value: 0x01, label: 'LR11XX_RADIO_LORA_CR_4_5 (0x01)' },
            { value: 0x02, label: 'LR11XX_RADIO_LORA_CR_4_6 (0x02)' },
            { value: 0x03, label: 'LR11XX_RADIO_LORA_CR_4_7 (0x03)' },
            { value: 0x04, label: 'LR11XX_RADIO_LORA_CR_4_8 (0x04)' },
            { value: 0x05, label: 'LR11XX_RADIO_LORA_CR_LI_4_5 (0x05)' },
            { value: 0x06, label: 'LR11XX_RADIO_LORA_CR_LI_4_6 (0x06)' },
            { value: 0x07, label: 'LR11XX_RADIO_LORA_CR_LI_4_8 (0x07)' }
        ];

        return `
            <ul class="import-preview-list">
              <li>${formatOptionPreview('Spreading factor', bytes[0], sfOptions)}</li>
              <li>${formatOptionPreview('Bandwidth', bytes[1], bwOptions)}</li>
              <li>${formatOptionPreview('Coding rate', bytes[2], crOptions)}</li>
              <li>${formatOptionPreview('RX1 window delay', `${bytes[3]} sec`)}</li>
              <li>${formatOptionPreview('Unused', bytes[4])}</li>
            </ul>
        `;
    }

    if (key === 'lp0_node_params') {
        const offloadOptions = [
            { value: 0, label: '0 - Offload feature off' },
            { value: 1, label: '1 - Device is a tracker' },
            { value: 2, label: '2 - Device is an offload station' }
        ];
        const headerOptions = [
            { value: 0, label: '0 - Disabled' },
            { value: 1, label: '1 - Enabled' }
        ];

        return `
            <ul class="import-preview-list">
              <li>${formatOptionPreview('Offload feature', bytes[0], offloadOptions)}</li>
              <li>${formatOptionPreview('Offload station ID', bytes[1])}</li>
              <li>${formatOptionPreview('Max overlapping nodes', bytes[2])}</li>
              <li>${formatOptionPreview('Use LoRaWAN header for ping', bytes[3], headerOptions)}</li>
              <li>${formatOptionPreview('Ping interval', `${bytes[4]} sec`)}</li>
            </ul>
        `;
    }

    if (key === 'cmdq_searched_mac_address') {
        return `<div class="import-preview-mono">${escapeHtml(formatMacAddressForDisplay(bytesToHex(bytes), setting.length) || '—')}</div>`;
    }

    return `<div class="import-preview-mono">${bytes.map(b => `0x${toHex(b)}`).join(' ')}</div>`;
}

function formatOptionPreview(label, value, options) {
    if (Array.isArray(options)) {
        const match = options.find(option => option.value === value);
        return `<strong>${escapeHtml(label)}:</strong> ${escapeHtml(match ? match.label : value)}`;
    }
    return `<strong>${escapeHtml(label)}:</strong> ${escapeHtml(value)}`;
}

function normalizeSettingValueForCompare(key, setting, value) {
    if (key === 'device_pin') {
        return normalizeDevicePinStorageValue(value);
    }

    if (key === 'cmdq_searched_mac_address') {
        return normalizeMacAddressInput(value);
    }

    if (value === undefined || value === null || value === '') {
        return '';
    }

    if (isIntervalSetting(key)) {
        const seconds = parseInt(value, 10);
        return Number.isFinite(seconds) ? seconds : value;
    }

    if (isBitmaskSetting(key) && setting.conversion === 'uint32') {
        const bitmask = parseInt(value, 10);
        return Number.isFinite(bitmask) ? bitmask : value;
    }

    if (setting.conversion === 'bool') {
        if (value === true || value === 'true' || value === 1 || value === '1') {
            return true;
        }
        if (value === false || value === 'false' || value === 0 || value === '0') {
            return false;
        }
        return value;
    }

    if (setting.conversion === 'byte_array') {
        return stripBytes(String(value));
    }

    if (['uint32', 'uint16', 'uint8', 'int32', 'int8', 'float'].includes(setting.conversion)) {
        const num = Number(value);
        return Number.isFinite(num) ? num : value;
    }

    return String(value);
}

function isSettingValueEqual(key, setting, currentValue, nextValue) {
    const currentNorm = normalizeSettingValueForCompare(key, setting, currentValue);
    const nextNorm = normalizeSettingValueForCompare(key, setting, nextValue);
    return currentNorm === nextNorm;
}

function stringToUint8Array(hexString, expectedLength) {
    if (!hexString || typeof hexString !== 'string') {
        return new Uint8Array();
    }
    hexString = hexString.trim();
    if (!/^[0-9A-Fa-f\s]*$/.test(hexString)) {
        throw new Error('Contains non-hex characters.');
    }
    const requiredHexLength = expectedLength * 2;
    if (hexString.length !== requiredHexLength) {
        throw new Error(`Length must be ${requiredHexLength} hex chars for ${expectedLength} bytes`);
    }
    const result = new Uint8Array(expectedLength);
    for (let i = 0; i < expectedLength; i++) {
        const byteStr = hexString.substr(i * 2, 2);
        result[i] = parseInt(byteStr, 16);
    }
    return result;
}

function bytesToSetting(setting, bytes) {
    if (setting.conversion === 'uint32') {
        return new DataView(new Uint8Array(bytes).buffer).getUint32(0, true);
    } else if (setting.conversion === 'uint16') {
        return new DataView(new Uint8Array(bytes).buffer).getUint16(0, true);
    } else if (setting.conversion === 'uint8') {
        return bytes[0];
    } else if (setting.conversion === 'int32') {
        return new DataView(new Uint8Array(bytes).buffer).getInt32(0, true);
    } else if (setting.conversion === 'int8') {
        return new DataView(new Uint8Array(bytes).buffer).getInt8(0);
    } else if (setting.conversion === 'bool') {
        return bytes[0] !== 0;
    } else if (setting.conversion === 'float') {
        return new DataView(new Uint8Array(bytes).buffer).getFloat32(0, true);
    } else if (setting.conversion === 'byte_array') {
        return bytesToHex(bytes);
    } else if (setting.conversion === 'string') {
        return new TextDecoder().decode(new Uint8Array(bytes));
    } else {
        throw new Error(`Unknown conversion type: ${setting.conversion}`);
    }
}

function settingToBytes(key, setting, value) {
    if (setting.length === 0) {
        return new Uint8Array();
    }

    if (!setting.conversion) {
        throw new Error('Missing conversion type');
    }

    validateInput(key, setting, value);

    if (setting.conversion === 'uint32') {
        const intValue = parseInt(value, 10);
        return new Uint8Array(new Uint32Array([intValue]).buffer);
    } else if (setting.conversion === 'uint16') {
        const intValue = parseInt(value, 10);
        return new Uint8Array(new Uint16Array([intValue]).buffer);
    } else if (setting.conversion === 'uint8' || setting.conversion === 'int8') {
        return new Uint8Array([parseInt(value, 10)]);
    } else if (setting.conversion === 'int32') {
        const intValue = parseInt(value, 10);
        return new Uint8Array(new Int32Array([intValue]).buffer);
    } else if (setting.conversion === 'float') {
        return new Uint8Array(new Float32Array([parseFloat(value)]).buffer);
    } else if (setting.conversion === 'bool') {
        return new Uint8Array([value.toString().toLowerCase() === 'true' ? 1 : 0]);
    } else if (setting.conversion === 'byte_array') {
        if (key === 'device_pin') {
            const normalizedPin = normalizeDevicePinStorageValue(value);
            return stringToUint8Array(normalizedPin, setting.length);
        }
        if (key === 'cmdq_searched_mac_address') {
            const normalizedMac = normalizeMacAddressInput(value);
            return stringToUint8Array(normalizedMac, setting.length);
        }
        return stringToUint8Array(value, setting.length);
    } else if (setting.conversion === 'string') {
        return new TextEncoder().encode(value);
    } else {
        throw new Error(`Unknown conversion type: ${setting.conversion}`);
    }
}

function formatRangeLabel(key, min, max) {
    const minNum = Number(min);
    const maxNum = Number(max);

    if (isIntervalSetting(key) && Number.isFinite(minNum) && Number.isFinite(maxNum)) {
        const unit = (key === 'cold_fix_timeout' || key === 'hot_fix_timeout') ? '1' : guessTimeUnit(Math.max(minNum, maxNum));
        const displayMin = Math.round(convertSecondsToUnit(minNum, unit));
        const displayMax = Math.round(convertSecondsToUnit(maxNum, unit));
        const unitLabel = unit === '86400' ? 'day(s)'
            : unit === '3600' ? 'hour(s)'
                : unit === '60' ? 'minute(s)'
                    : 'second(s)';
        return `${displayMin}–${displayMax} ${unitLabel} (raw: ${minNum}–${maxNum} sec)`;
    }

    if (key === 'init_time' && Number.isFinite(minNum) && Number.isFinite(maxNum)) {
        const minDate = formatLocalDateTimeDisplay(new Date(minNum * 1000));
        const maxDate = formatLocalDateTimeDisplay(new Date(maxNum * 1000));
        return `${minDate}–${maxDate} (unix: ${minNum}–${maxNum} sec)`;
    }

    if (key === 'ble_scan_manufacturer_id' && Number.isFinite(minNum) && Number.isFinite(maxNum)) {
        const toHexRange = value => `0x${Math.round(value).toString(16).toUpperCase().padStart(4, '0')}`;
        return `${toHexRange(minNum)}–${toHexRange(maxNum)} (decimal: ${minNum}–${maxNum})`;
    }

    if ((key === 'gps_init_lat' || key === 'gps_init_lon') && Number.isFinite(minNum) && Number.isFinite(maxNum)) {
        const minDeg = minNum / 1e7;
        const maxDeg = maxNum / 1e7;
        return `${minDeg}–${maxDeg} degrees (raw: ${minNum}–${maxNum})`;
    }

    return `${min} and ${max}`;
}

function formatSettingBoundLabel(key, setting, value) {
    const numericValue = Number(value);
    const msKeys = new Set([
        'external_switch_detection_trigger_debounce_ms',
        'vhf_time_between_packets_ms'
    ]);
    const utcHourKeys = new Set([
        'ublox_interval1_start',
        'ublox_interval2_start',
        'satellite_interval1_start',
        'satellite_send_interval2_start',
        'vhf_interval1_start',
        'vhf_interval2_start'
    ]);

    if (msKeys.has(key) && Number.isFinite(numericValue)) {
        return `${numericValue} ms (${numericValue / 1000} sec)`;
    }

    if (isIntervalSetting(key) && Number.isFinite(numericValue)) {
        const unit = (key === 'cold_fix_timeout' || key === 'hot_fix_timeout') ? '1' : guessTimeUnit(numericValue);
        const displayValue = Math.round(convertSecondsToUnit(numericValue, unit));
        const unitLabel = unit === '86400' ? 'day(s)'
            : unit === '3600' ? 'hour(s)'
                : unit === '60' ? 'minute(s)'
                    : 'second(s)';
        return `${displayValue} ${unitLabel} (raw: ${numericValue} sec)`;
    }

    if (key === 'init_time' && Number.isFinite(numericValue)) {
        return `${formatLocalDateTimeDisplay(new Date(numericValue * 1000))} (unix: ${numericValue} sec)`;
    }

    if (key === 'ble_scan_manufacturer_id' && Number.isFinite(numericValue)) {
        return `0x${Math.round(numericValue).toString(16).toUpperCase().padStart(4, '0')} (decimal: ${numericValue})`;
    }

    if ((key === 'gps_init_lat' || key === 'gps_init_lon') && Number.isFinite(numericValue)) {
        return `${(numericValue / 1e7).toFixed(7)} degrees (raw: ${numericValue})`;
    }

    if (utcHourKeys.has(key) && Number.isFinite(numericValue)) {
        return `${formatUtcHourLabel(numericValue)} (raw: ${Math.trunc(numericValue)})`;
    }

    if (setting.conversion === 'bool') {
        return String(value) === 'true' || value === true || value === 1 ? 'true' : 'false';
    }

    return `${value}`;
}

function getSettingConstraintDetails(key, setting) {
    const details = [];

    if (['uint32', 'uint16', 'uint8', 'int32', 'int8', 'float'].includes(setting.conversion)) {
        const mm = minMaxValues[setting.conversion] || {};
        const min = setting.min != undefined ? setting.min : mm.min;
        const max = setting.max != undefined ? setting.max : mm.max;
        if (min != undefined) {
            details.push(`Min: ${formatSettingBoundLabel(key, setting, min)}`);
        }
        if (max != undefined) {
            details.push(`Max: ${formatSettingBoundLabel(key, setting, max)}`);
        }
        return details;
    }

    if (setting.conversion === 'bool') {
        details.push('Min: false');
        details.push('Max: true');
        return details;
    }

    if (setting.conversion === 'string' && Number.isFinite(setting.length)) {
        details.push(`Max length: ${setting.length} characters`);
        return details;
    }

    if (key === 'device_pin') {
        details.push('Min: 0000');
        details.push('Max: 9999');
        return details;
    }

    return details;
}

function validateInput(key, setting, value) {
    if (setting.length === 0) {
        return;
    }
    if (['uint32', 'uint16', 'uint8', 'int32', 'int8', 'float'].includes(setting.conversion)) {
        const parsedValue = (setting.conversion === 'float')
            ? parseFloat(value)
            : parseInt(value, 10);
        if (isNaN(parsedValue)) {
            throw new Error(`Must be a number`);
        }

        if (['uint32', 'uint16', 'uint8', 'int32', 'int8'].includes(setting.conversion) && !Number.isInteger(parseFloat(value))) {
            throw new Error(`Must be a whole number`);
        }

        if (setting.min != undefined && setting.max != undefined && (parsedValue < setting.min || parsedValue > setting.max)) {
            throw new Error(`Must be between ${formatRangeLabel(key, setting.min, setting.max)}`);
        }

        // Check min and max values for uint8, uint16, uint32, int8, int32, etc.
        const mm = minMaxValues[setting.conversion];

        if (mm && (parsedValue < mm.min || parsedValue > mm.max)) {
            throw new Error(`Must be between ${formatRangeLabel(key, mm.min, mm.max)}`);
        }
    } else if (setting.conversion === 'bool') {
        const valLower = value.toString().toLowerCase();
        if (valLower !== 'true' && valLower !== 'false') {
            throw new Error(`Must be 'true' or 'false'`);
        }
    } else if (setting.conversion === 'byte_array') {
        const byteArrayValue = key === 'device_pin'
            ? normalizeDevicePinStorageValue(value)
            : key === 'cmdq_searched_mac_address'
                ? normalizeMacAddressInput(value)
                : value;
        stringToUint8Array(byteArrayValue, setting.length);
    } else if (setting.conversion === 'string') {
        if (value.length > setting.length) {
            throw new Error(`Max length is ${setting.length} characters`);
        }
    }
}

let toastTimeout;

function showToast(message) {
    // Clear the previous timer if the button is pressed quickly
    if (toastTimeout) {
        clearTimeout(toastTimeout);
    }

    const toast = document.getElementById('toast');
    toast.innerText = message;
    toast.style.opacity = '1';
    toast.style.visibility = 'visible';

    // Hide the toast after 3 seconds
    toastTimeout = setTimeout(() => {
        toast.style.opacity = '0';
        toastTimeout = setTimeout(() => {
            toast.style.visibility = 'hidden';
        }, 500); // Ensure visibility is hidden after fade-out
    }, 3000);
}