functions.js

let settingsData = null;
let settingsMap = new Map(); // maps ID (family << 8 | wire ID on v8) -> [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',
    'ublox_cold_fix_hour_interval'
]);

const hourIntervalSettings = new Set([
    'ublox_cold_fix_hour_interval'
]);

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

function isHourIntervalSetting(key) {
    return hourIntervalSettings.has(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,
    lp0_signal_checks: renderLp0SignalChecks,
    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,
    ublox_cold_fix_hour_interval: renderHoursInput,
    ublox_min_satellites_timer: renderSecondsInput,
    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
// Newest first. Files named in BETA_SETTINGS_FILES are development snapshots: the dropdown lists
// them in a "Beta" group at the bottom, after every release, so a release is always the first
// choice and the composer's default; the firmware match (findSettingsFileForFirmware) still
// selects them for a collar that reports that version.
const SETTINGS_FILES = [
    "settings-v8.1.0.json", // development snapshot (LP0 offload beta), see README
    "settings-v8.0.3.json",
    "settings-v8.0.2.json",
    "settings-v8.0.1.json",
    "settings-v8.0.0.json",
    "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 BETA_SETTINGS_FILES = new Set([
    "settings-v8.1.0.json"
]);
const BETA_SETTINGS_GROUP_LABEL = "Beta: development firmware";
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();
        if (window.handleAppVersionInfo) {
            window.handleAppVersionInfo(versionInfo);
        }
        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);
    }

    const makeOption = (file, beta) => {
        const option = document.createElement('option');
        option.value = `./settings/${file}`;
        option.textContent = beta ? `${file} (beta)` : file;
        return option;
    };
    SETTINGS_FILES.filter(file => !BETA_SETTINGS_FILES.has(file))
        .forEach(file => dropdown.appendChild(makeOption(file, false)));
    const betaFiles = SETTINGS_FILES.filter(file => BETA_SETTINGS_FILES.has(file));
    if (betaFiles.length) {
        const group = document.createElement('optgroup');
        group.label = BETA_SETTINGS_GROUP_LABEL;
        betaFiles.forEach(file => group.appendChild(makeOption(file, true)));
        dropdown.appendChild(group);
    }
}

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, deviceStatus = null) {
    settingsData = null;
    settingsMap = new Map();

    try {
        await loadSettingsMeta();
        const response = await fetch(selectedFile);
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
        }
        const data = await response.json();
        if (deviceStatus && schemaUsesFamilies(data) !== firmwareUsesFamilies(deviceStatus)) {
            throw new Error('This settings file uses a different protocol from the connected firmware. Select a matching settings version.');
        }
        settingsData = data;

        settingsMap = new Map();
        registerValues(settingsData.settings, "setting");
        registerValues(settingsData.commands, "command");
        registerValues(settingsData.values, "value");
    } catch (error) {
        settingsData = null;
        settingsMap = new Map();
        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 setSettingsGroupCollapsed(group, collapsed) {
    group.classList.toggle('is-collapsed', collapsed);
    const groupToggle = group.querySelector('.group-toggle');
    if (groupToggle) {
        groupToggle.setAttribute('aria-expanded', (!collapsed).toString());
    }
}

// Only one group of the settings list is open at a time: opening one folds the others. The
// scope is the closest .settings-accordion (the static Import / export group and the rendered
// categories share one), or the group's parent when there is none.
function expandSettingsGroup(group) {
    const scope = group.closest('.settings-accordion') || group.parentElement;
    if (scope) {
        scope.querySelectorAll('.settings-group').forEach(other => {
            if (other !== group) {
                setSettingsGroupCollapsed(other, true);
            }
        });
    }
    setSettingsGroupCollapsed(group, false);
}

function toggleGroup(group) {
    if (group.classList.contains('is-collapsed')) {
        expandSettingsGroup(group);
    } else {
        setSettingsGroupCollapsed(group, true);
    }
}


function registerValues(data, type) {
    for (const [key, value] of Object.entries(data)) {
        // Keep a unique address in existing DOM IDs and lookup maps. The original
        // byte ID is retained separately; commands never acquire a family byte.
        value.wireId = parseProtocolByte(value.id);
        if (type !== 'command' && schemaUsesFamilies(settingsData)) {
            const family = parseProtocolByte(value.family);
            value.id = `0x${toHex(family)}${toHex(value.wireId)}`;
        }
        value["type"] = type;
        if (settingsMap.has(parseInt(value.id, 16))) {
            throw new Error(`Duplicate settings address: ${value.id}`);
        }
        settingsMap.set(parseInt(value.id, 16), [key, value]);
    }
}

function parseProtocolByte(value) {
    const byte = typeof value === 'string' && /^0x[0-9a-f]{1,2}$/i.test(value)
        ? Number(value) : value;
    if (!Number.isInteger(byte) || byte < 0 || byte > 255) {
        throw new Error(`Invalid protocol byte: ${value}`);
    }
    return byte;
}

function schemaUsesFamilies(data = settingsData) {
    return Boolean(data && (data.settings_family ||
        Object.values(data.settings || {}).some(setting => setting.family !== undefined)));
}

function firmwareUsesFamilies(status) {
    // The v8 release includes the protocol introduced in development v7.4.
    return status.ver_fw_major > 7 || (status.ver_fw_major === 7 && status.ver_fw_minor >= 4);
}

function findSettingsFileForFirmware(status, files = SETTINGS_FILES) {
    return files.map(file => ({ file, version: file.match(/v(\d+)\.(\d+)\.(\d+)/) }))
        .filter(({ version }) => version && Number(version[1]) === status.ver_fw_major &&
            Number(version[2]) === status.ver_fw_minor)
        .sort((a, b) => Number(b.version[3]) - Number(a.version[3]))[0]?.file || null;
}

function getProtocolAddress(setting) {
    const id = parseProtocolByte(setting.wireId ?? setting.id);
    return setting.type !== 'command' && setting.family !== undefined
        ? [parseProtocolByte(setting.family), id] : [id];
}

function encodeProtocolRecord(setting, valueBytes) {
    return [...getProtocolAddress(setting), parseProtocolByte(valueBytes.length), ...valueBytes];
}

function isSingleReadCommand(key) {
    return key === 'cmd_send_single_setting' || key === 'cmd_send_single_val';
}

function encodeReadRequest(id, commandId) {
    const [key, command] = getById(commandId);
    const [, target] = getById(id);
    const expectedType = key === 'cmd_send_single_setting' ? 'setting' : 'value';
    if (!isSingleReadCommand(key) || target.type !== expectedType) {
        throw new Error('Select a matching setting or runtime value to read.');
    }
    return encodeProtocolRecord(command, getProtocolAddress(target));
}

function decodeSettingRecords(bytes, expectedType, onWarning = () => {}) {
    if (!settingsData) {
        throw new Error('Load a matching settings file before decoding settings.');
    }
    const hasFamily = schemaUsesFamilies();
    const headerLength = hasFamily ? 3 : 2;
    const records = [];
    for (let offset = 0; offset < bytes.length;) {
        if (bytes.length - offset < headerLength) {
            throw new Error('Truncated settings response header.');
        }
        const family = hasFamily ? bytes[offset++] : 0;
        const id = bytes[offset++];
        const length = bytes[offset++];
        if (bytes.length - offset < length) {
            throw new Error('Truncated settings response value.');
        }
        const valueBytes = bytes.slice(offset, offset + length);
        offset += length;
        const address = (family << 8) | id;
        const entry = settingsMap.get(address);
        if (!entry || entry[1].type !== expectedType) {
            onWarning(`Skipping unknown ${expectedType} address 0x${toHex(address)}.`);
            continue;
        }
        const [key, setting] = entry;
        if (length !== setting.length && !(setting.conversion === 'string' && length <= setting.length)) {
            onWarning(`Skipping ${key}: received ${length} bytes, expected ${setting.length}.`);
            continue;
        }
        records.push({ key, setting, value: bytesToSetting(setting, valueBytes) });
    }
    return records;
}

const credentialSettingKeys = new Set([
    'app_key', 'device_eui', 'app_eui', 'device_name', 'device_pin',
    'lp0_app_key', 'lp0_network_key', 'lp0_dev_addr', 'lp0_master_key',
    's_band_app_key', 's_band_network_key', 's_band_dev_adr'
]);

function isCredentialSetting(setting) {
    return Boolean(setting && credentialSettingKeys.has(getById(setting.id)[0]));
}

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(':');
}

// A message type name followed by its LoRaWAN port number, so people can tell the
// types apart by port as well as by name (the port is what the backend shows).
function formatPortLabelHtml(name, portNum) {
    return `${escapeHtml(name)} <span class="port-number">port ${escapeHtml(String(portNum))}</span>`;
}

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}">${formatPortLabelHtml(portName.replace(/^port_/, ""), portNum)}</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);
    if (schemaUsesFamilies() && meta && Array.isArray(meta.familyOptions)) {
        return meta.familyOptions;
    }
    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 getCategoryMeta(groupName) {
    if (!settingsMeta || !settingsMeta.categories) {
        return null;
    }
    return settingsMeta.categories[String(groupName || '').trim().toLowerCase()] || null;
}

function formatGroupTitle(groupName) {
    if (!groupName) {
        return '';
    }
    const normalized = String(groupName).trim().toLowerCase();
    const categoryMeta = getCategoryMeta(normalized);
    if (categoryMeta && categoryMeta.title) {
        return categoryMeta.title;
    }
    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 by the order in settings-meta.json (unknown groups after, "_other" last),
    // and settings inside a group by their listed order, then by display name.
    const groupRank = group => {
        if (group === '_other') return Number.MAX_SAFE_INTEGER;
        const categoryMeta = getCategoryMeta(group);
        return categoryMeta && Number.isFinite(categoryMeta.order) ? categoryMeta.order : 100000;
    };
    const settingRank = (group, key) => {
        const categoryMeta = getCategoryMeta(group);
        const listed = categoryMeta && Array.isArray(categoryMeta.settings) ? categoryMeta.settings : [];
        const index = listed.indexOf(key);
        return index === -1 ? listed.length : index;
    };
    const sortedGroups = Object.keys(grouped).sort((a, b) => {
        const rankDiff = groupRank(a) - groupRank(b);
        return rankDiff !== 0 ? rankDiff : a.localeCompare(b);
    }).reduce((acc, group) => {
        acc[group] = Object.keys(grouped[group]).sort((a, b) => {
            const rankDiff = settingRank(group, a) - settingRank(group, b);
            if (rankDiff !== 0) return rankDiff;
            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 getLoraDataRateHelperText() {
    const engine = typeof window !== 'undefined' ? window.PanelEngine : null;
    if (!engine || typeof engine.describeDataRate !== 'function') {
        return '';
    }
    const region = getSettingEffectiveValue('lr_region');
    const dataRate = Number.parseInt(getSettingEffectiveValue('lr_adr'), 10);
    const regionOption = (getSettingOptions('lr_region') || []).find(option => String(option.value) === String(region));
    const regionLabel = regionOption ? regionOption.label : `region ${region}`;
    if (!Number.isFinite(dataRate)) {
        return `The data rate number means a different spreading factor per region (${regionLabel} selected).`;
    }
    const described = engine.describeDataRate(region, dataRate);
    return described
        ? `DR${dataRate} is ${described} in ${regionLabel} (LoRaWAN Regional Parameters).`
        : `DR${dataRate} is not defined for ${regionLabel} (LoRaWAN Regional Parameters).`;
}

function getDynamicSettingHelperText(key) {
    if (key === 'gps_skipped_triggered_interval') {
        return getGpsSkippedTriggeredIntervalHelperText();
    }
    if (key === 'lr_adr') {
        return getLoraDataRateHelperText();
    }
    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');
    }
    if (normalizedKey === 'lr_adr' || normalizedKey === 'lr_region') {
        refreshDynamicSettingHelperByKey('lr_adr');
    }
}

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_SF7 (0x07)')}
            ${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_250 (0x05)')}
            ${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')}
            ${setting.length > 4 ? renderByteArrayField(setting.id, 4, 'Unused (reserved)', bytes[4], null, 'Currently not used') : ''}
        </div>
    `;
}

// LP0 signal checks (firmware 8.1 development builds): six bytes
// [master, CAD, RSSI enabled, RSSI magnitude, margin enabled, margin dB]. The RSSI byte is a
// positive magnitude (100 means -100 dBm); zero is a real threshold, not off.
const LP0_SIGNAL_CHECK_FIELDS = [
    { index: 0, label: 'All signal checks', options: [{ value: 0, label: '0 - Off (bypass every check)' }, { value: 1, label: '1 - On' }], help: 'Master switch. Off bypasses the CAD, RSSI and margin checks but keeps their values.' },
    { index: 1, label: 'CAD activity veto', options: [{ value: 0, label: '0 - Off' }, { value: 1, label: '1 - On' }], help: 'Channel activity detection before transmitting.' },
    { index: 2, label: 'Minimum RSSI check', options: [{ value: 0, label: '0 - Off' }, { value: 1, label: '1 - On' }], help: 'Rejects discovery packets weaker than the minimum, and stops after three consecutive weak packets.' },
    { index: 3, label: 'Minimum RSSI (magnitude, dBm)', min: 0, max: 125, help: '0 to 125. 100 means -100 dBm; a larger number admits weaker packets.' },
    { index: 4, label: 'Background margin check', options: [{ value: 0, label: '0 - Off' }, { value: 1, label: '1 - On' }], help: 'Requires a packet to be stronger than the background noise by the margin below.' },
    { index: 5, label: 'Minimum margin (dB)', min: 0, max: 127, help: '0 to 127 dB above the background RSSI.' }
];

function renderLp0SignalChecks(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">
            ${LP0_SIGNAL_CHECK_FIELDS.map(field => renderByteArrayField(setting.id, field.index, field.label, bytes[field.index], field.options || null, field.help)).join('')}
        </div>
    `;
}

function formatLp0SignalCheckLine(field, byte) {
    if (field.options) {
        return formatOptionPreview(field.label, byte, field.options);
    }
    const unit = field.index === 3 ? `-${byte} dBm` : `${byte} dB`;
    return formatOptionPreview(field.label, unit);
}

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 renderHoursInput(setting, value) {
    const hourValue = value === '' || value === undefined || value === null ? '' : Number(value);
    const days = Number.isFinite(hourValue) ? (hourValue / 24) : '';
    return `
        <label class="input-label" for="new-value-${setting.id}">Hours</label>
        <input type="number" id="new-value-${setting.id}" value="${value ?? ''}" min="0" step="1" oninput="__onInputChanged('${setting.id}')" />
        <div class="input-helper">Days: ${days === '' ? '—' : days}</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}`);

    // An empty field is not 0 (0 usually means "off"): leave it invalid until a number is typed.
    if (numericInput.value.trim() === '') {
        hiddenField.value = '';
        __onInputChanged(settingId);
        return;
    }
    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 (isHourIntervalSetting(key)) {
        const hours = Number(value);
        const display = Number.isFinite(hours) ? hours : value;
        const days = Number.isFinite(hours) ? (hours / 24) : value;
        return `<div class="import-preview-value">${escapeHtml(display)} <span class="import-preview-muted">hour(s)</span><div class="import-preview-subvalue">${escapeHtml(days)} day(s)</div></div>`;
    }

    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_/, ''),
            number: portNum,
            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}">${formatPortLabelHtml(port.name, port.number)}</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 === 'lp0_signal_checks') {
        return `
            <ul class="import-preview-list">
              ${LP0_SIGNAL_CHECK_FIELDS.map(field => `<li>${formatLp0SignalCheckLine(field, bytes[field.index])}</li>`).join('')}
            </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);
}

// The JSON form of a setting for an exported profile. Device values arrive typed (booleans
// and numbers from bytesToSetting), input values arrive as strings; both must export the
// same way, so a boolean is true for true, 'true', 1 and '1', never a string comparison.
function exportSettingValue(key, setting, value) {
    if (key === 'device_pin') {
        return formatDevicePinForDisplay(value);
    }
    if (setting.conversion === 'bool') {
        return value === true || value === 1 || ['true', '1'].includes(String(value).trim().toLowerCase());
    }
    if (['uint32', 'uint16', 'uint8', 'int32', 'int8', 'float'].includes(setting.conversion)) {
        return Number(value);
    }
    if (setting.conversion === 'byte_array') {
        return stripBytes(String(value ?? ''));
    }
    return value === undefined || value === null ? '' : 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 (isHourIntervalSetting(key) && Number.isFinite(minNum) && Number.isFinite(maxNum)) {
        return `${minNum}–${maxNum} hour(s)`;
    }

    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 (isHourIntervalSetting(key) && Number.isFinite(numericValue)) {
        return `${numericValue} hour(s)`;
    }

    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;
}

// Byte-array bounds. Most schemas give byte arrays an all-zero max, meaning "not checked";
// where the max carries real limits (lp0_signal_checks since firmware 8.1) each byte is
// checked against its own min and max, as the firmware does before saving.
function parseByteArrayBound(bound, expectedLength) {
    if (typeof bound !== 'string') {
        return null;
    }
    const hex = stripBytes(bound);
    if (hex.length !== expectedLength * 2) {
        return null;
    }
    return parseByteArrayValue(hex, expectedLength);
}

function validateByteArrayRange(setting, bytes) {
    const max = parseByteArrayBound(setting.max, setting.length);
    if (!max || max.every(byte => byte === 0)) {
        return;
    }
    const min = parseByteArrayBound(setting.min, setting.length) || new Uint8Array(setting.length);
    for (let i = 0; i < setting.length; i++) {
        if (bytes[i] < min[i] || bytes[i] > max[i]) {
            throw new Error(`Byte ${i + 1} must be between ${min[i]} and ${max[i]} (is ${bytes[i]})`);
        }
    }
}

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;
        const bytes = stringToUint8Array(byteArrayValue, setting.length);
        validateByteArrayRange(setting, bytes);
    } else if (setting.conversion === 'string') {
        if (value.length > setting.length) {
            throw new Error(`Max length is ${setting.length} characters`);
        }
    }
}

// iOS WebKit (Safari, and third-party browsers such as Bluefy, which is the only way to use
// Web Bluetooth on an iPhone or iPad) cannot save a Blob through an anchor download and has
// no Wake Lock API, and Bluefy ignores manufacturerData scan filters. These helpers keep the
// Chrome/Edge paths on Windows, Android, macOS and Linux exactly as they were and only
// change behaviour on iOS WebKit. iPadOS reports itself as a Mac with touch points.
function isIosWebKit() {
    if (typeof navigator === 'undefined') return false;
    const ua = navigator.userAgent || '';
    if (/iPhone|iPad|iPod/.test(ua)) return true;
    return navigator.platform === 'MacIntel' && Number(navigator.maxTouchPoints) > 1;
}

function isBluefyBrowser() {
    return typeof navigator !== 'undefined' && /Bluefy/i.test(navigator.userAgent || '');
}

function downloadViaAnchor(filename, contents, mimeType) {
    const blob = new Blob([contents], { type: mimeType });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    link.remove();
    setTimeout(() => URL.revokeObjectURL(url), 1000);
}

function canShareFile(file) {
    try {
        return typeof navigator.share === 'function'
            && typeof navigator.canShare === 'function'
            && navigator.canShare({ files: [file] });
    } catch (error) {
        return false;
    }
}

async function shareFile(filename, contents, mimeType) {
    const file = new File([contents], filename, { type: mimeType });
    if (!canShareFile(file)) return false;
    try {
        await navigator.share({ files: [file], title: filename });
        return true;
    } catch (error) {
        // AbortError: the person closed the share sheet; nothing else to do.
        if (error && error.name === 'AbortError') return true;
        return false;
    }
}

// On iOS a file cannot be downloaded, so the contents are shown in a dialog with a Share
// button (the iOS share sheet lets the person save to Files, Notes or mail) and a Copy
// button as the fallback that always works.
function showSaveFileDialog(filename, contents, mimeType) {
    let overlay = document.getElementById('save-file-overlay');
    if (!overlay) {
        overlay = document.createElement('div');
        overlay.id = 'save-file-overlay';
        overlay.className = 'dfu-waiting-overlay save-file-overlay hidden';
        overlay.setAttribute('role', 'dialog');
        overlay.setAttribute('aria-modal', 'true');
        overlay.innerHTML = `
          <div class="dfu-waiting-card save-file-card">
            <div class="dfu-waiting-text" id="save-file-title">Save file</div>
            <div class="flash-log-overlay-message" id="save-file-text"></div>
            <textarea id="save-file-contents" class="save-file-contents" readonly spellcheck="false"></textarea>
            <div class="ublox-fix-actions">
              <button id="save-file-share" type="button" class="primary">Share</button>
              <button id="save-file-copy" type="button" class="secondary">Copy</button>
              <button id="save-file-close" type="button" class="secondary">Close</button>
            </div>
          </div>`;
        document.body.appendChild(overlay);
        overlay.querySelector('#save-file-close').addEventListener('click', () => overlay.classList.add('hidden'));
    }
    const file = new File([contents], filename, { type: mimeType });
    const shareButton = overlay.querySelector('#save-file-share');
    const copyButton = overlay.querySelector('#save-file-copy');
    const textarea = overlay.querySelector('#save-file-contents');
    const shareable = canShareFile(file);
    overlay.querySelector('#save-file-title').textContent = filename;
    overlay.querySelector('#save-file-text').textContent = shareable
        ? 'This browser cannot download files. Share it to Files, Notes or mail, or copy the contents.'
        : 'This browser cannot download or share files. Copy the contents and paste them into Notes or a message.';
    textarea.value = contents;
    shareButton.classList.toggle('hidden', !shareable);
    shareButton.onclick = async () => {
        const shared = await shareFile(filename, contents, mimeType);
        if (!shared) showToast('Sharing failed. Copy the contents instead.');
    };
    copyButton.onclick = async () => {
        try {
            if (navigator.clipboard && navigator.clipboard.writeText) {
                await navigator.clipboard.writeText(contents);
            } else {
                textarea.focus();
                textarea.select();
                document.execCommand('copy');
            }
            showToast('Copied to clipboard');
        } catch (error) {
            textarea.focus();
            textarea.select();
            showToast('Copy failed. Select the text and copy it by hand.');
        }
    };
    overlay.classList.remove('hidden');
}

// Save a text file the way the platform allows. Chrome/Edge: a normal download, unchanged.
// iOS WebKit: the share sheet when called from a tap (gesture: true), else the dialog.
async function saveTextFileCompat(filename, contents, mimeType = 'text/plain', options = {}) {
    if (!isIosWebKit()) {
        downloadViaAnchor(filename, contents, mimeType);
        return 'download';
    }
    if (options.gesture && await shareFile(filename, contents, mimeType)) {
        return 'share';
    }
    showSaveFileDialog(filename, contents, mimeType);
    return 'dialog';
}

if (typeof window !== 'undefined') {
    window.isIosWebKit = isIosWebKit;
    window.isBluefyBrowser = isBluefyBrowser;
    window.saveTextFileCompat = saveTextFileCompat;
}

// ---- LP0 offload (firmware 8.1 development builds) -------------------------------------
// Pure decoders for the station statistics message (port 23, id 0x9D) and the reply to the
// offload start and cancel commands (0xCF, 0xD1). Layouts follow app/src/lp0/README.md
// ("Statistics wire layout", "Explicit saved-record actions") in the firmware repository.

const LP0_STATISTICS_STATUS_BITS = [
    { bit: 0, key: 'card_detected', label: 'SD card detected' },
    { bit: 1, key: 'card_writable', label: 'SD card writable' },
    { bit: 2, key: 'sdfs_unresponsive', label: 'SD reader unresponsive' },
    { bit: 3, key: 'sdfs_recovery_required', label: 'SD reader needs resync' },
    { bit: 4, key: 'sdfs_active', label: 'SD operation running' },
    { bit: 5, key: 'enabled', label: 'LP0 enabled' },
    { bit: 6, key: 'listening', label: 'Listening for trackers' },
    { bit: 7, key: 'session_active', label: 'Offload visit active' },
    { bit: 8, key: 'radio_fault', label: 'Radio fault' },
    { bit: 9, key: 'storage_queue_full', label: 'Storage queue full' },
    { bit: 10, key: 'flash_available', label: 'Flash logging available' },
    { bit: 11, key: 'sd_card_missing', label: 'SD card missing' },
    { bit: 12, key: 'sdfs_error', label: 'Storage fault latched' }
];

const LP0_STATISTICS_COUNTERS = [
    { key: 'visits_complete', label: 'Visits complete' },
    { key: 'visits_partial', label: 'Visits partial' },
    { key: 'visits_cancelled', label: 'Visits cancelled' },
    { key: 'visits_timed_out', label: 'Visits timed out' },
    { key: 'visits_failed', label: 'Visits failed' },
    { key: 'data_received', label: 'Data packets received' },
    { key: 'data_saved', label: 'Data packets saved' },
    { key: 'data_failed', label: 'Data saves failed' },
    { key: 'data_dropped', label: 'Data packets dropped' },
    { key: 'data_saved_bytes', label: 'Data bytes saved' },
    { key: 'sd_media_errors', label: 'SD media errors' },
    { key: 'sdfs_errors', label: 'SD reader errors' },
    { key: 'cad_rejections', label: 'CAD rejections' },
    { key: 'rssi_rejections', label: 'RSSI rejections' },
    { key: 'rx_rejections', label: 'Packets rejected' },
    { key: 'radio_errors', label: 'Radio errors' },
    { key: 'reports_generated', label: 'Reports generated' },
    { key: 'reports_superseded', label: 'Reports superseded' },
    { key: 'report_tx_failed', label: 'Report sends failed' },
    { key: 'report_rx_dropped', label: 'Received reports dropped' },
    { key: 'report_sd_failed', label: 'Received report saves failed' }
];

// `body` is the message body after the id and length bytes: 97 bytes for version 1,
// 102 bytes for versions 2 and 3. Throws on an unknown version or a short body.
function decodeLp0StatisticsMessage(body) {
    const bytes = body instanceof Uint8Array ? body : new Uint8Array(body);
    if (bytes.length < 1) {
        throw new Error('Empty statistics message');
    }
    const version = bytes[0];
    if (![1, 2, 3].includes(version)) {
        throw new Error(`Unknown statistics version ${version}`);
    }
    const expectedLength = version === 1 ? 97 : 102;
    if (bytes.length < expectedLength) {
        throw new Error(`Statistics body is ${bytes.length} bytes, expected ${expectedLength}`);
    }
    const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
    const latest = view.getUint16(1, true);
    const known = view.getUint16(3, true);
    const status = LP0_STATISTICS_STATUS_BITS
        .filter(entry => version >= 3 || entry.bit < 11)
        .map(entry => ({
            ...entry,
            known: (known & (1 << entry.bit)) !== 0,
            value: (known & (1 << entry.bit)) !== 0 ? (latest & (1 << entry.bit)) !== 0 : null
        }));
    const counters = {};
    LP0_STATISTICS_COUNTERS.forEach((counter, index) => {
        counters[counter.key] = view.getUint32(13 + index * 4, true);
    });
    let sdCapacityMb = null;
    let sdFreePercent = null;
    if (version >= 2) {
        const capacity = view.getUint32(97, true);
        const free = bytes[101];
        if (capacity !== 0xFFFFFFFF) {
            sdCapacityMb = capacity;
        }
        if (free !== 0xFF && free <= 100) {
            sdFreePercent = free;
        }
    }
    return {
        version,
        status,
        uptimeSeconds: view.getUint32(5, true),
        pendingSdJobs: view.getUint16(9, true),
        peakSdJobs: view.getUint16(11, true),
        counters,
        sdCapacityMb,
        sdFreePercent
    };
}

// One line for a list row: role health first, then the counts people look for.
function summarizeLp0Statistics(decoded) {
    const active = decoded.status.filter(entry => entry.value === true).map(entry => entry.label.toLowerCase());
    const unknown = decoded.status.filter(entry => !entry.known).length;
    const c = decoded.counters;
    const parts = [
        `Station statistics v${decoded.version}`,
        `up ${formatDurationCompact(decoded.uptimeSeconds)}`,
        active.length ? active.join(', ') : 'no status flags set',
        `${c.visits_complete} visits complete, ${c.visits_partial} partial, ${c.visits_failed + c.visits_timed_out + c.visits_cancelled} not completed`,
        `${c.data_saved} data packets saved (${c.data_saved_bytes} bytes), ${c.data_failed} failed, ${c.data_dropped} dropped`
    ];
    if (decoded.sdCapacityMb !== null || decoded.sdFreePercent !== null) {
        parts.push(`SD ${decoded.sdCapacityMb !== null ? `${decoded.sdCapacityMb} MB` : 'size unknown'}${decoded.sdFreePercent !== null ? `, ${decoded.sdFreePercent}% free` : ''}`);
    } else {
        parts.push('SD size unknown');
    }
    if (unknown) {
        parts.push(`${unknown} status flag${unknown === 1 ? '' : 's'} unknown`);
    }
    return parts.join('; ');
}

const LP0_OFFLOAD_STATES = ['idle', 'preparing', 'waiting', 'discovering', 'sending', 'cancelling', 'done', 'failed'];
const LP0_OFFLOAD_MEDIA = ['LP0', 'LoRaWAN', 'satellite', 'Bluetooth'];
const LP0_OFFLOAD_SELECTIONS = ['all records', 'confirmed records', 'unconfirmed records'];
// Zephyr errno values the firmware documents for the offload job reply.
const LP0_OFFLOAD_ERRNO = {
    0: 'ok',
    '-6': 'no station offered within three discovery attempts (ENXIO)',
    '-16': 'another offload still owns the radio or flash (EBUSY)',
    '-22': 'invalid medium, selection or port (EINVAL)',
    '-90': 'a selected message is too large for LP0 (EMSGSIZE)',
    '-95': 'medium not supported by this build (ENOTSUP)',
    '-100': 'satellite modem not detected or disabled (ENETDOWN)',
    '-107': 'Bluetooth connection no longer valid (ENOTCONN)',
    '-115': 'in progress (EINPROGRESS)',
    '-116': 'job ID does not match the current job (ESTALE)',
    '-125': 'cancelled (ECANCELED)'
};

// `body` is the 17 bytes after the command id and the length byte 17.
function decodeOffloadJobReply(body) {
    const bytes = body instanceof Uint8Array ? body : new Uint8Array(body);
    if (bytes.length < 17) {
        throw new Error(`Offload reply is ${bytes.length} bytes, expected 17`);
    }
    const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
    const result = view.getInt32(9, true);
    const state = bytes[4];
    const medium = bytes[5];
    const selection = bytes[6];
    return {
        jobId: view.getUint32(0, true),
        state,
        stateLabel: LP0_OFFLOAD_STATES[state] || `state ${state}`,
        medium,
        mediumLabel: LP0_OFFLOAD_MEDIA[medium] || `medium ${medium}`,
        selection,
        selectionLabel: LP0_OFFLOAD_SELECTIONS[selection] || `selection ${selection}`,
        port: bytes[7],
        attempts: bytes[8],
        result,
        resultLabel: LP0_OFFLOAD_ERRNO[String(result)] || `firmware error ${result}`,
        confirmed: view.getUint32(13, true)
    };
}

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);
}