/**
 * Anwenden der Farbeinstellungen auf die CSS-Variablen.
 *
 * Die Werte aus dem Admin-Panel landen in der Datenbank, wirken aber erst,
 * wenn sie hier auf das Wurzelelement geschrieben werden. Ein Inline-Wert am
 * `documentElement` überschreibt die Vorgaben aus `index.css`, weil er
 * spezifischer ist als `:root`.
 *
 * Neben der Volltonfarbe wird das RGB-Tripel als eigene Variable gesetzt
 * (`--color-primary-rgb`). Die Oberfläche braucht die Farbe an vielen Stellen
 * halbtransparent – für zarte Flächen wie den aktiven Menüpunkt oder eine
 * Auswahl. Mit dem Tripel geht das als `rgba(var(--color-primary-rgb), 0.15)`,
 * ohne für jede Deckkraft eine eigene Variable zu pflegen.
 */

const HEX = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/

/** "#6366f1" → "99, 102, 241"; Kurzform (#abc) wird ausgeschrieben. */
function hexToRgb(hex: string): string | null {
  if (!HEX.test(hex)) return null
  let h = hex.slice(1)
  if (h.length === 3) h = h.split('').map(c => c + c).join('')
  const n = parseInt(h, 16)
  return `${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}`
}

function setColor(name: string, value?: string) {
  const root = document.documentElement
  const rgb = value ? hexToRgb(value) : null
  if (value && rgb) {
    root.style.setProperty(`--color-${name}`, value)
    root.style.setProperty(`--color-${name}-rgb`, rgb)
  } else {
    // Ungültig oder leer: Vorgaben aus index.css wieder greifen lassen.
    root.style.removeProperty(`--color-${name}`)
    root.style.removeProperty(`--color-${name}-rgb`)
  }
}

export function applyTheme(primary?: string, accent?: string) {
  setColor('primary', primary)
  setColor('accent', accent)
}