/* global chrome */
document.addEventListener('DOMContentLoaded', () => {
  const keys = [
    'endpoint',
    'token',
    'artworkEndpoint',
    'placeholderArtwork',
    'pausedTimeout',
    'metadataFetchInterval'
  ];
  function parseTimeToMs(input) {
    if (!input) return 0;
    const str = input.trim().toLowerCase();
    const match = str.match(/^(\d+(\.\d+)?)(\s*(ms|milliseconds?|s|sec|seconds?|m|min|minutes?|h|hr|hrs|hour|hours?))?$/);
    if (!match) return Number(str) || 0;
    const value = parseFloat(match[1]);
    const unit = match[4] || '';
    switch (unit) {
      case 'ms':
      case 'millisecond':
      case 'milliseconds':
        return value;
      case 's':
      case 'sec':
      case 'second':
      case 'seconds':
        return value * 1000;
      case 'm':
      case 'min':
      case 'minute':
      case 'minutes':
        return value * 60 * 1000;
      case 'h':
      case 'hr':
      case 'hrs':
      case 'hour':
      case 'hours':
        return value * 60 * 60 * 1000;
      default:
        return value;
    }
  }

  chrome.storage.sync.get(keys, (data) => {
    for (const key of keys) {
      const elem = document.getElementById(key);
      if (elem) {
        elem.value = data[key] != null ? String(data[key]) : '';
      } else {
        console.warn(`Element with id "${key}" not found in DOM`);
      }
    }
    const saveBtn = document.getElementById('save');
    if (saveBtn) {
      saveBtn.addEventListener('click', () => {
        const valuesToSave = {};

        for (const key of keys) {
          const elem = document.getElementById(key);
          let value = elem ? elem.value.trim() : '';
          // Parse time fields to ms
          if (key === 'pausedTimeout' || key === 'metadataFetchInterval') {
            value = parseTimeToMs(value);
          }
          valuesToSave[key] = value;
        }

        chrome.storage.sync.set(valuesToSave, () => {
          alert('Settings saved.');
        });
      });
    } else {
      console.error('Save button not found in DOM');
    }
  });
});
    if (typeof chrome !== "undefined" && chrome.runtime && chrome.runtime.getManifest) {
      document.getElementById('version').textContent = 'You are running Version: ' + chrome.runtime.getManifest().version;
    } else {
      document.getElementById('version').textContent = 'You are running Version: (unavailable)';
    }