

const PANEL_MAP = [
  { needles: ['#f0fdfa', '#ecfdf5'], classes: ['vareoncalc-panel--success'] },
  { needles: ['#fef3c7'], classes: ['vareoncalc-panel--warning'] },
  { needles: ['#fee2e2'], classes: ['vareoncalc-panel--error'] },
  { needles: ['#dbeafe', '#e0f2fe'], classes: ['vareoncalc-panel--accent'] },
  { needles: ['#eff6ff'], classes: ['vareoncalc-panel--info'] },
  { needles: ['#f0fdf4'], classes: ['vareoncalc-panel--success'] },
  { needles: ['#f9fafb', '#ffffff'], classes: [] }
];

function normalizePanel(element) {
  const style = element.getAttribute('style') || '';
  const margin = element.style.margin || '';
  const marginTop = element.style.marginTop || '';
  const marginBottom = element.style.marginBottom || '';
  const marginBlockStart = element.style.marginBlockStart || '';
  const marginBlockEnd = element.style.marginBlockEnd || '';

  const hasBorderLeftWarning = style.includes('border-left: 4px solid #16a34a') || style.includes('border-left: 4px solid var(--vareoncalc-success');
  const hasBorderLeftInfo = style.includes('border-left: 4px solid #1e40af') || style.includes('border-left: 4px solid var(--vareoncalc-info');

  const classes = new Set(['vareoncalc-panel']);
  if (style.includes('padding: 20px') || style.includes('padding: 24px') || style.includes('padding: 16px')) {
    classes.add('vareoncalc-panel--padded-lg');
  }
  if (style.includes('text-align: center')) {
    classes.add('vareoncalc-panel--header');
  }
  if (hasBorderLeftWarning) classes.add('vareoncalc-panel--warning');
  if (hasBorderLeftInfo) classes.add('vareoncalc-panel--info');

  for (const { needles, classes: extra } of PANEL_MAP) {
    if (needles.some(needle => style.includes(needle))) {
      extra.forEach(cls => classes.add(cls));
      break;
    }
  }

  element.classList.add(...classes);
  element.removeAttribute('style');

  if (margin) element.style.margin = margin;
  if (marginTop) element.style.marginTop = marginTop;
  if (marginBottom) element.style.marginBottom = marginBottom;
  if (marginBlockStart) element.style.marginBlockStart = marginBlockStart;
  if (marginBlockEnd) element.style.marginBlockEnd = marginBlockEnd;
}

function normalizeChip(element) {
  element.classList.add('vareoncalc-result-chip');
  const label = element.querySelector('[data-vareoncalc-chip-label]');
  const value = element.querySelector('[data-vareoncalc-chip-value]');
  if (label) {
    label.classList.add('vareoncalc-result-chip__label');
    label.removeAttribute('style');
  }
  if (value) {
    value.classList.add('vareoncalc-result-chip__value');
    value.removeAttribute('style');
  }
  element.removeAttribute('style');
}

export function applyThemedPanels(container) {
  if (!container) return;

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

  const chips = container.querySelectorAll('[data-vareoncalc-chip]');
  chips.forEach(chip => normalizeChip(chip));

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

  const metrics = container.querySelectorAll('[data-vareoncalc-metric]');
  metrics.forEach(metric => {
    const label = metric.querySelector('[data-vareoncalc-metric-label]');
    const value = metric.querySelector('[data-vareoncalc-metric-value]');

    metric.classList.add('vareoncalc-metric');
    metric.removeAttribute('style');

    if (label) {
      label.classList.add('vareoncalc-metric__label');
      label.removeAttribute('style');
    }

    if (value) {
      value.classList.add('vareoncalc-metric__value');
      value.removeAttribute('style');
    }
  });
}

export default applyThemedPanels;

