// ========== THEME PICKER + THEME BUILDER ==========
(function () {
  var themeBeforeBuilder = null;
  var editingSlug = null;
  var advancedOverrides = {}; // tracks which advanced fields user manually changed

  // Display names for built-in themes
  var THEME_LABELS = {
    dark: 'Dark',
    light: 'Light',
    blue: 'Blue',
    black: 'Black',
    nord: 'Nord',
    dracula: 'Dracula',
    'solarized-dark': 'Solarized Dark',
    'solarized-light': 'Solarized Light',
    taxi: 'Taxi',
    ocean: 'Ocean',
  };

  // Color picker field definitions: [css-prop, label, section]
  var FIELDS = [
    ['bg',            'Background',    'base'],
    ['card-base',     'Card',          'base'],
    ['fg',            'Text',          'base'],
    ['muted',         'Muted Text',    'base'],
    ['border',        'Border',        'base'],
    ['accent',        'Accent',        'accent'],
    ['accent-strong', 'Accent Strong', 'accent'],
    ['ok-bg',         'OK Background', 'status'],
    ['ok-fg',         'OK Text',       'status'],
    ['bad-bg',        'Error Bg',      'status'],
    ['bad-fg',        'Error Text',    'status'],
    ['dot-ok',        'Dot OK',        'status'],
    ['dot-bad',       'Dot Error',     'status'],
    ['uptime',        'Uptime Bar',    'status'],
    ['hover',         'Hover',         'advanced'],
    ['card-hover',    'Card Hover',    'advanced'],
    ['base',          'Tags/Badges',   'advanced'],
    ['fg-muted',      'Dim Text',      'advanced'],
    ['success',       'Success',       'advanced'],
    ['error',         'Error',         'advanced'],
    ['warning',       'Warning',       'advanced'],
  ];

  // ─── Theme Cycle Button ───────────────────────────────

  var themeBtn = document.getElementById('theme');
  if (!themeBtn) return;
  var themeLabel = document.getElementById('theme-label');

  function getLabelFor(t) {
    if (THEME_LABELS[t]) return THEME_LABELS[t];
    var userThemes = safeGetJSON(window.USER_THEMES_KEY, {});
    if (userThemes[t]) return userThemes[t].name || t;
    return t;
  }

  function updateLabel() {
    if (themeLabel) themeLabel.textContent = getLabelFor(window.getActiveTheme());
  }

  themeBtn.addEventListener('click', function () {
    var list = window.THEMES.slice();
    var current = window.getActiveTheme();
    var idx = list.indexOf(current);
    var next = list[(idx + 1) % list.length];
    window.applyTheme(next);
    updateLabel();
  });

  updateLabel();

  // ─── Theme Builder Modal ───────────────────────────────

  function buildFieldsHTML() {
    var sections = { base: 'Base Colors', accent: 'Accent', status: 'Status', advanced: 'Advanced (auto-derived)' };
    var grouped = {};
    FIELDS.forEach(function (f) {
      if (!grouped[f[2]]) grouped[f[2]] = [];
      grouped[f[2]].push(f);
    });

    var html = '';
    Object.keys(sections).forEach(function (key) {
      if (key === 'advanced') {
        html += '<div id="theme-builder-advanced-toggle" class="theme-builder-advanced-toggle" style="margin:12px 0 4px;cursor:pointer;color:var(--accent);font-size:.85rem;user-select:none;">Show advanced colors &#9660;</div>';
        html += '<div id="theme-builder-advanced" class="theme-builder-section" style="display:none;">';
      } else {
        html += '<div class="theme-builder-section">';
      }
      html += '<div class="theme-builder-section-title">' + sections[key] + '</div>';
      (grouped[key] || []).forEach(function (f) {
        html += '<div class="theme-builder-row">' +
          '<span class="theme-builder-label">' + f[1] + '</span>' +
          '<input type="color" class="theme-builder-color" data-prop="' + f[0] + '"' + (key === 'advanced' ? ' data-advanced="1"' : '') + ' value="#000000" />' +
          '<span class="theme-builder-hex" data-hex="' + f[0] + '">#000000</span>' +
          '</div>';
      });
      html += '</div>';
    });
    return html;
  }

  function buildStartFromOptions() {
    return window.THEMES.map(function (t) {
      return '<option value="' + t + '">' + getLabelFor(t) + '</option>';
    }).join('');
  }

  var modalHTML = '<div id="theme-builder-modal" class="weather-modal">' +
    '<div class="weather-modal-content" style="min-width:420px;max-width:560px;">' +
    '<h3>Theme Builder</h3>' +

    // Edit existing user themes dropdown
    '<div id="theme-builder-existing" style="margin-bottom:16px;display:none;">' +
    '<label style="font-size:.85rem;color:var(--muted);margin-right:8px;">Edit:</label>' +
    '<select id="theme-builder-edit-select" style="padding:6px 10px;background:var(--card-bg);color:var(--fg);border:1px solid var(--border);border-radius:6px;font-size:.85rem;margin-right:8px;">' +
    '<option value="">— New Theme —</option>' +
    '</select>' +
    '<button id="theme-builder-delete" style="padding:4px 10px;background:color-mix(in srgb,var(--bad-fg) 15%,transparent);border:1px solid var(--bad-fg);color:var(--bad-fg);border-radius:6px;font-size:.8rem;cursor:pointer;">Delete</button>' +
    '</div>' +

    '<div style="margin-bottom:16px;">' +
    '<label style="font-size:.85rem;color:var(--muted);margin-right:8px;">Name:</label>' +
    '<input type="text" id="theme-builder-name" maxlength="20" placeholder="My Theme" ' +
    'style="padding:6px 10px;background:var(--card-bg);color:var(--fg);border:1px solid var(--border);border-radius:6px;font-size:.85rem;width:140px;" />' +
    '</div>' +

    '<div style="margin-bottom:16px;display:flex;align-items:center;">' +
    '<label style="font-size:.85rem;color:var(--muted);margin-right:8px;cursor:pointer;" for="theme-builder-lightbg">' +
    '<input type="checkbox" id="theme-builder-lightbg" style="margin-right:6px;cursor:pointer;vertical-align:middle;" />' +
    'Light background (use dark logo)</label>' +
    '</div>' +

    '<div style="margin-bottom:16px;">' +
    '<label style="font-size:.85rem;color:var(--muted);margin-right:8px;">Start from:</label>' +
    '<select id="theme-builder-start" style="padding:6px 10px;background:var(--card-bg);color:var(--fg);border:1px solid var(--border);border-radius:6px;font-size:.85rem;">' +
    buildStartFromOptions() +
    '</select>' +
    '</div>' +

    '<div class="theme-builder-preview" id="theme-builder-preview">' +
    '<div class="theme-builder-card" id="theme-preview-card">' +
    '<div class="preview-title">Sample Card</div>' +
    '<div class="preview-muted">Secondary text preview</div>' +
    '<div class="preview-badges">' +
    '<span class="preview-badge" id="preview-badge-ok">ON</span>' +
    '<span class="preview-badge" id="preview-badge-bad">OFF</span>' +
    '</div>' +
    '<div class="preview-dots">' +
    '<span><span class="preview-dot" id="preview-dot-ok"></span> Online</span>' +
    '<span><span class="preview-dot" id="preview-dot-bad"></span> Offline</span>' +
    '</div>' +
    '<button class="preview-btn" id="preview-accent-btn">Accent Button</button>' +
    '</div>' +
    '</div>' +

    buildFieldsHTML() +

    '<div class="weather-modal-buttons">' +
    '<button id="theme-builder-cancel">Cancel</button>' +
    '<button id="theme-builder-import" style="margin-left:auto;" title="Import theme from JSON file">Import</button>' +
    '<button id="theme-builder-export" title="Export theme as JSON file">Export</button>' +
    '<button id="theme-builder-save" class="btn-accent">Save Theme</button>' +
    '</div>' +
    '</div></div>';

  injectModal('theme-builder-modal', modalHTML);

  var modal = document.getElementById('theme-builder-modal');
  var startSelect = document.getElementById('theme-builder-start');
  var nameInput = document.getElementById('theme-builder-name');
  var editSelect = document.getElementById('theme-builder-edit-select');
  var existingSection = document.getElementById('theme-builder-existing');
  var lightBgCheck = document.getElementById('theme-builder-lightbg');
  var pickers = modal.querySelectorAll('.theme-builder-color');
  var advancedSection = document.getElementById('theme-builder-advanced');
  var advancedToggle = document.getElementById('theme-builder-advanced-toggle');
  var exportBtn = document.getElementById('theme-builder-export');

  // ─── Advanced toggle ───────────────────────────────

  var advancedVisible = false;
  advancedToggle.addEventListener('click', function () {
    advancedVisible = !advancedVisible;
    advancedSection.style.display = advancedVisible ? '' : 'none';
    advancedToggle.innerHTML = advancedVisible
      ? 'Hide advanced colors &#9650;'
      : 'Show advanced colors &#9660;';
  });

  // ─── Color picker helpers ───────────────────────────────

  function getCurrentColors() {
    var colors = {};
    pickers.forEach(function (p) {
      colors[p.dataset.prop] = p.value;
    });
    colors['card-bg'] = colors['card-base'];
    return colors;
  }

  function getBaseColors() {
    var colors = {};
    pickers.forEach(function (p) {
      if (!p.dataset.advanced) colors[p.dataset.prop] = p.value;
    });
    colors['card-bg'] = colors['card-base'];
    if (lightBgCheck.checked) colors.lightBg = true;
    return colors;
  }

  function updateAdvancedFromDerived() {
    var base = getBaseColors();
    var derived = window.deriveExtendedColors ? window.deriveExtendedColors(base) : {};
    pickers.forEach(function (p) {
      if (p.dataset.advanced && !advancedOverrides[p.dataset.prop]) {
        var val = derived[p.dataset.prop] || '#333333';
        p.value = val;
        var hex = modal.querySelector('[data-hex="' + p.dataset.prop + '"]');
        if (hex) hex.textContent = val.toUpperCase();
      }
    });
  }

  function loadThemeIntoPickers(themeName) {
    var colors = window.THEME_COLORS[themeName];
    if (!colors) return;
    advancedOverrides = {};
    pickers.forEach(function (p) {
      var val = colors[p.dataset.prop] || '#000000';
      if (val.startsWith('rgba') || val.startsWith('color-mix')) val = '#333333';
      p.value = val;
      var hex = modal.querySelector('[data-hex="' + p.dataset.prop + '"]');
      if (hex) hex.textContent = val.toUpperCase();
    });
    lightBgCheck.checked = !!colors.lightBg;
    updatePreview();
  }

  function loadUserThemeIntoPickers(slug) {
    var userThemes = safeGetJSON(window.USER_THEMES_KEY, {});
    var theme = userThemes[slug];
    if (!theme) return;
    advancedOverrides = {};
    pickers.forEach(function (p) {
      var val = theme[p.dataset.prop] || '#000000';
      p.value = val;
      var hex = modal.querySelector('[data-hex="' + p.dataset.prop + '"]');
      if (hex) hex.textContent = val.toUpperCase();
      // If theme has explicit advanced values, mark as overridden
      if (p.dataset.advanced && theme[p.dataset.prop]) {
        advancedOverrides[p.dataset.prop] = true;
      }
    });
    nameInput.value = theme.name || '';
    lightBgCheck.checked = !!theme.lightBg;
    // Fill any missing advanced fields from derivation
    updateAdvancedFromDerived();
    updatePreview();
  }

  function updatePreview() {
    var c = getCurrentColors();
    var preview = document.getElementById('theme-builder-preview');
    var card = document.getElementById('theme-preview-card');
    var title = card.querySelector('.preview-title');
    var muted = card.querySelector('.preview-muted');
    var badgeOk = document.getElementById('preview-badge-ok');
    var badgeBad = document.getElementById('preview-badge-bad');
    var dotOk = document.getElementById('preview-dot-ok');
    var dotBad = document.getElementById('preview-dot-bad');
    var btn = document.getElementById('preview-accent-btn');
    var dots = card.querySelector('.preview-dots');

    preview.style.background = c['bg'];
    card.style.background = c['card-base'];
    card.style.borderColor = c['border'];
    title.style.color = c['fg'];
    muted.style.color = c['muted'];
    badgeOk.style.background = c['ok-bg'];
    badgeOk.style.color = c['ok-fg'];
    badgeBad.style.background = c['bad-bg'];
    badgeBad.style.color = c['bad-fg'];
    dotOk.style.background = c['dot-ok'];
    dotBad.style.background = c['dot-bad'];
    dots.style.color = c['fg'];
    btn.style.background = c['accent'];
    btn.style.color = c['bg'];
  }

  function applyColorsLive(colors) {
    // Include derived colors for full live preview
    var derived = window.deriveExtendedColors ? window.deriveExtendedColors(colors) : {};
    window.THEME_PROPS.forEach(function (prop) {
      var val = colors[prop] || derived[prop];
      if (val) {
        document.documentElement.style.setProperty('--' + prop, val);
      }
    });
  }

  // Wire up color pickers
  pickers.forEach(function (p) {
    p.addEventListener('input', function () {
      var hex = modal.querySelector('[data-hex="' + p.dataset.prop + '"]');
      if (hex) hex.textContent = p.value.toUpperCase();

      // Track manual advanced overrides
      if (p.dataset.advanced) {
        advancedOverrides[p.dataset.prop] = true;
      } else {
        // Base color changed — re-derive advanced values (unless overridden)
        updateAdvancedFromDerived();
      }

      updatePreview();
      applyColorsLive(getCurrentColors());
    });
  });

  // Light-bg checkbox should re-derive advanced colors
  lightBgCheck.addEventListener('change', function () {
    updateAdvancedFromDerived();
    updatePreview();
    applyColorsLive(getCurrentColors());
  });

  startSelect.addEventListener('change', function () {
    advancedOverrides = {};
    loadThemeIntoPickers(startSelect.value);
    applyColorsLive(getCurrentColors());
  });

  // Populate and refresh the edit-existing dropdown
  function refreshEditDropdown() {
    var userThemes = safeGetJSON(window.USER_THEMES_KEY, {});
    var slugs = Object.keys(userThemes);
    editSelect.innerHTML = '<option value="">— New Theme —</option>';
    slugs.forEach(function (slug) {
      var opt = document.createElement('option');
      opt.value = slug;
      opt.textContent = userThemes[slug].name || slug;
      editSelect.appendChild(opt);
    });
    existingSection.style.display = slugs.length ? '' : 'none';
  }

  // Also refresh "Start from" options
  function refreshStartFrom() {
    startSelect.innerHTML = buildStartFromOptions();
  }

  // Edit dropdown change
  editSelect.addEventListener('change', function () {
    var slug = this.value;
    if (slug) {
      editingSlug = slug;
      loadUserThemeIntoPickers(slug);
      applyColorsLive(getCurrentColors());
    } else {
      editingSlug = null;
      advancedOverrides = {};
      nameInput.value = '';
      startSelect.value = window.getActiveTheme();
      loadThemeIntoPickers(startSelect.value);
    }
    exportBtn.style.display = editingSlug ? '' : 'none';
  });

  function openBuilder() {
    themeBeforeBuilder = window.getActiveTheme();
    editingSlug = null;
    advancedOverrides = {};

    // Reset advanced section to collapsed
    advancedVisible = false;
    advancedSection.style.display = 'none';
    advancedToggle.innerHTML = 'Show advanced colors &#9660;';

    refreshEditDropdown();
    refreshStartFrom();

    var userThemes = safeGetJSON(window.USER_THEMES_KEY, {});
    if (userThemes[themeBeforeBuilder]) {
      // Active theme is a user theme — open it for editing
      editSelect.value = themeBeforeBuilder;
      editingSlug = themeBeforeBuilder;
      loadUserThemeIntoPickers(themeBeforeBuilder);
    } else {
      editSelect.value = '';
      nameInput.value = '';
      startSelect.value = themeBeforeBuilder;
      loadThemeIntoPickers(themeBeforeBuilder);
    }

    exportBtn.style.display = editingSlug ? '' : 'none';
    modal.classList.add('show');
  }

  var customizeBtn = document.getElementById('theme-customize-btn');
  if (customizeBtn) {
    customizeBtn.addEventListener('click', function () { openBuilder(); });
  }

  // ─── Save ───────────────────────────────

  document.getElementById('theme-builder-save').addEventListener('click', function () {
    var colors = getCurrentColors();
    var name = nameInput.value.trim();
    if (!name) {
      showNotification('Please enter a theme name', 'warning', 3000);
      nameInput.focus();
      return;
    }

    var userThemes = safeGetJSON(window.USER_THEMES_KEY, {});
    var slug;
    var oldSlug = null;

    if (editingSlug) {
      slug = editingSlug;
      // If name changed, re-slugify and potentially rename
      var newSlug = window.slugifyThemeName(name, editingSlug);
      if (newSlug !== editingSlug) {
        oldSlug = editingSlug;
        delete userThemes[editingSlug];
        var idx = window.THEMES.indexOf(editingSlug);
        if (idx !== -1) window.THEMES.splice(idx, 1);
        delete window.THEME_COLORS[editingSlug];
        slug = newSlug;
      }
    } else {
      slug = window.slugifyThemeName(name);
    }

    // Build theme data with ALL color properties
    var themeData = { name: name };
    if (lightBgCheck.checked) themeData.lightBg = true;
    window.THEME_PROPS.forEach(function (p) {
      if (colors[p]) themeData[p] = colors[p];
    });

    // Update localStorage cache immediately for instant UI
    userThemes[slug] = themeData;
    safeSet(window.USER_THEMES_KEY, JSON.stringify(userThemes));

    // Clear inline preview properties
    window.clearCustomProperties();

    // Re-inject CSS and apply
    window.injectUserThemeStyles();
    window.applyTheme(slug);
    modal.classList.remove('show');
    updateLabel();

    // Save to server (source of truth)
    var apiColors = {};
    window.THEME_PROPS.forEach(function (p) { if (colors[p]) apiColors[p] = colors[p]; });

    // If slug changed, delete the old one from server
    if (oldSlug) {
      secureFetch('/api/v1/themes/' + oldSlug, { method: 'DELETE' }).catch(function () {});
    }

    secureFetch('/api/v1/themes/' + slug, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: name, colors: apiColors, lightBg: lightBgCheck.checked })
    }).then(function () {
      showNotification(name + ' theme saved', 'success', 3000);
    }).catch(function () {
      showNotification(name + ' theme saved locally (server sync failed)', 'warning', 3000);
    });
  });

  // ─── Cancel ───────────────────────────────

  document.getElementById('theme-builder-cancel').addEventListener('click', function () {
    modal.classList.remove('show');
    window.clearCustomProperties();
    if (themeBeforeBuilder) {
      window.applyTheme(themeBeforeBuilder);
    }
  });

  // ─── Delete ───────────────────────────────

  document.getElementById('theme-builder-delete').addEventListener('click', function () {
    if (!editingSlug) return;

    var userThemes = safeGetJSON(window.USER_THEMES_KEY, {});
    var name = userThemes[editingSlug] ? userThemes[editingSlug].name : editingSlug;

    if (!confirm('Delete "' + name + '" theme?')) return;

    var slugToDelete = editingSlug;

    // Update localStorage cache immediately
    delete userThemes[slugToDelete];
    safeSet(window.USER_THEMES_KEY, JSON.stringify(userThemes));

    // Remove from runtime
    var idx = window.THEMES.indexOf(slugToDelete);
    if (idx !== -1) window.THEMES.splice(idx, 1);
    delete window.THEME_COLORS[slugToDelete];

    window.clearCustomProperties();
    window.injectUserThemeStyles();

    var fallback = themeBeforeBuilder && themeBeforeBuilder !== slugToDelete ? themeBeforeBuilder : 'dark';
    window.applyTheme(fallback);

    editingSlug = null;
    modal.classList.remove('show');
    updateLabel();

    // Delete from server
    secureFetch('/api/v1/themes/' + slugToDelete, { method: 'DELETE' }).then(function () {
      showNotification(name + ' theme deleted', 'success', 3000);
    }).catch(function () {
      showNotification(name + ' theme deleted locally (server sync failed)', 'warning', 3000);
    });
  });

  // ─── Export ───────────────────────────────

  document.getElementById('theme-builder-export').addEventListener('click', function () {
    if (!editingSlug) {
      showNotification('Save the theme first, then export', 'warning', 3000);
      return;
    }
    var userThemes = safeGetJSON(window.USER_THEMES_KEY, {});
    var theme = userThemes[editingSlug];
    if (!theme) return;

    var exportData = {
      _dashcaddy_theme: true,
      version: '1.0',
      exportDate: new Date().toISOString(),
      slug: editingSlug,
      name: theme.name,
      lightBg: theme.lightBg || false,
      colors: {}
    };
    window.THEME_PROPS.forEach(function (p) {
      if (theme[p]) exportData.colors[p] = theme[p];
    });

    var blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    a.download = editingSlug + '-theme.json';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    showNotification('Theme exported as ' + editingSlug + '-theme.json', 'success', 3000);
  });

  // ─── Import ───────────────────────────────

  document.getElementById('theme-builder-import').addEventListener('click', function () {
    var input = document.createElement('input');
    input.type = 'file';
    input.accept = '.json';
    input.onchange = function (e) {
      var file = e.target.files[0];
      if (!file) return;
      var reader = new FileReader();
      reader.onload = function (ev) {
        try {
          var data = JSON.parse(ev.target.result);

          // Support both wrapped format and raw theme format
          var themeName, themeColors, themeLightBg;
          if (data._dashcaddy_theme && data.colors) {
            // Wrapped export format
            themeName = data.name || 'Imported';
            themeColors = data.colors;
            themeLightBg = data.lightBg || false;
          } else if (data.name && (data.bg || data['card-base'])) {
            // Raw theme JSON (same format as server files)
            themeName = data.name;
            themeColors = {};
            window.THEME_PROPS.forEach(function (p) { if (data[p]) themeColors[p] = data[p]; });
            themeLightBg = data.lightBg || false;
          } else {
            throw new Error('Not a valid DashCaddy theme file');
          }

          // Load into builder
          nameInput.value = themeName;
          lightBgCheck.checked = !!themeLightBg;
          editingSlug = null;
          editSelect.value = '';
          advancedOverrides = {};

          // Apply colors to pickers
          pickers.forEach(function (p) {
            var val = themeColors[p.dataset.prop] || '#000000';
            p.value = val;
            var hex = modal.querySelector('[data-hex="' + p.dataset.prop + '"]');
            if (hex) hex.textContent = val.toUpperCase();
            if (p.dataset.advanced && themeColors[p.dataset.prop]) {
              advancedOverrides[p.dataset.prop] = true;
            }
          });

          // Fill any missing advanced fields
          updateAdvancedFromDerived();
          updatePreview();
          applyColorsLive(getCurrentColors());
          exportBtn.style.display = 'none';
          showNotification('"' + themeName + '" loaded into builder. Click Save to keep it.', 'success', 5000);
        } catch (err) {
          showNotification('Import failed: ' + err.message, 'error', 5000);
        }
      };
      reader.readAsText(file);
    };
    input.click();
  });

  // ─── Modal close handling ───────────────────────────────

  wireModal(modal);

  modal.addEventListener('click', function (e) {
    if (e.target === modal) {
      window.clearCustomProperties();
      if (themeBeforeBuilder) window.applyTheme(themeBeforeBuilder);
    }
  });
})();