// Provide minimal theming helpers for the Lite calculators

function stripInlineStyles(element, allowedStyles = []) {
  if (!element) {
    return;
  }

  const preserved = {};
  allowedStyles.forEach(prop => {
    if (element.style && element.style[prop] !== undefined && element.style[prop] !== '') {
      preserved[prop] = element.style[prop];
    }
  });

  element.removeAttribute('style');

  Object.keys(preserved).forEach(prop => {
    element.style[prop] = preserved[prop];
  });
}

export function applyThemedPanelsLite(container) {
  if (!container) {
    return;
  }

  const root = container.closest('.vareoncalc-root');
  if (!root) {
    return;
  }

  // Check theme explicitly set on root - respect explicit theme overrides
  // If theme-light is present, it's explicitly light (even if global default is dark)
  // If theme-dark is present, it's explicitly dark
  // If neither is present, check data-theme attribute
  const hasExplicitLight = root.classList.contains('theme-light');
  const hasExplicitDark = root.classList.contains('theme-dark');
  const dataTheme = root.dataset.theme;
  
  // Determine if dark: explicit dark class/attribute takes precedence
  const isDark = hasExplicitDark || (!hasExplicitLight && dataTheme === 'dark');

  if (container.dataset.vareoncalcPreview === '1' && container !== root) {
    container.classList.add('theme-' + (dataTheme || 'light'));
  }

  const panels = container.querySelectorAll('[data-vareoncalc-panel], .vareoncalc-result');

  panels.forEach(panel => {
    if (container.dataset.vareoncalcPreview === '1' && !panel.hasAttribute('data-vareoncalc-panel')) {
      return;
    }
    panel.classList.add('vareoncalc-panel');
    stripInlineStyles(panel, ['margin', 'marginTop', 'marginBottom']);

    // Only apply dark panel styles if explicitly dark
    if (isDark) {
      panel.classList.add('vareoncalc-panel--dark');
    } else {
      panel.classList.remove('vareoncalc-panel--dark');
    }
  });

  const mutedButtons = container.querySelectorAll('[data-vareoncalc-muted-button]');
  mutedButtons.forEach(btn => {
    stripInlineStyles(btn, ['margin']);
    btn.classList.add('vareoncalc-muted-button');
  });

  const metrics = container.querySelectorAll('[data-vareoncalc-metric]');
  metrics.forEach(metric => {
    metric.classList.add('vareoncalc-metric');
    stripInlineStyles(metric);

    const label = metric.querySelector('[data-vareoncalc-metric-label]');
    if (label) {
      label.classList.add('vareoncalc-metric__label');
      stripInlineStyles(label);
    }

    const value = metric.querySelector('[data-vareoncalc-metric-value]');
    if (value) {
      value.classList.add('vareoncalc-metric__value');
      stripInlineStyles(value);
    }
  });

  const chips = container.querySelectorAll('[data-vareoncalc-chip]');
  chips.forEach(chip => {
    chip.classList.add('vareoncalc-result-chip');
    stripInlineStyles(chip);

    const chipLabel = chip.querySelector('[data-vareoncalc-chip-label]');
    if (chipLabel) {
      chipLabel.classList.add('vareoncalc-result-chip__label');
      stripInlineStyles(chipLabel);
    }

    const chipValue = chip.querySelector('[data-vareoncalc-chip-value]');
    if (chipValue) {
      chipValue.classList.add('vareoncalc-result-chip__value');
      stripInlineStyles(chipValue);
    }
  });

  const grids = container.querySelectorAll('[data-vareoncalc-metric-grid]');
  grids.forEach(grid => {
    grid.classList.add('vareoncalc-metric-grid');
    stripInlineStyles(grid);
  });
}

export default applyThemedPanelsLite;
