export type PaletteName = 'automne' | 'hiver' | 'printemps' | 'ete'

interface PaletteColors {
  primary: string
  accent: string
  surface: string
  bg: string
  surfaceLight: string
  text: string
  textMuted: string
  isLight: boolean
  label: string
  icon: string
}

const palettes: Record<PaletteName, PaletteColors> = {
  // ══════ DARK THEMES ══════

  // Automne : cuivre chaud, feuilles mortes, terre brûlée
  automne: {
    primary: '18 80% 45%',       // cuivre profond
    accent: '32 85% 50%',        // ambre doré
    surface: '20 10% 12%',       // écorce
    bg: '20 10% 7%',             // terre sombre
    surfaceLight: '20 8% 17%',   // bois fumé
    text: '0 0% 100%',
    textMuted: '0 0% 65%',
    isLight: false,
    label: 'Automne',
    icon: 'i-lucide-leaf',
  },

  // Hiver : bleu nuit, givre, argent lunaire
  hiver: {
    primary: '215 55% 52%',      // bleu nuit étoilé
    accent: '195 40% 65%',       // givre argenté
    surface: '222 14% 13%',      // ciel de minuit
    bg: '225 16% 8%',            // nuit polaire
    surfaceLight: '220 12% 18%', // brume nocturne
    text: '0 0% 100%',
    textMuted: '210 10% 65%',
    isLight: false,
    label: 'Hiver',
    icon: 'i-lucide-snowflake',
  },

  // ══════ LIGHT THEMES ══════

  // Printemps : vert tendre, rose cerisier, lumière fraîche
  printemps: {
    primary: '145 50% 38%',      // vert bourgeon
    accent: '340 65% 55%',       // rose cerisier
    surface: '120 12% 93%',      // rosée du matin
    bg: '100 15% 96%',           // clarté verte
    surfaceLight: '120 8% 87%',  // feuille pâle
    text: '150 15% 12%',         // vert profond
    textMuted: '140 8% 42%',     // mousse
    isLight: true,
    label: 'Printemps',
    icon: 'i-lucide-flower-2',
  },

  // Été : doré solaire, turquoise mer, lumineux chaleureux
  ete: {
    primary: '25 85% 52%',       // soleil couchant
    accent: '175 55% 42%',       // turquoise marin
    surface: '40 25% 92%',       // sable clair
    bg: '42 30% 96%',            // lumière dorée
    surfaceLight: '38 18% 86%',  // dune
    text: '30 20% 12%',          // terre chaude
    textMuted: '30 10% 40%',     // ombre estivale
    isLight: true,
    label: 'Été',
    icon: 'i-lucide-sun',
  },
}

export const usePaletteStore = defineStore('palette', () => {
  const currentPalette = ref<PaletteName>(
    (import.meta.client && localStorage.getItem('palette') as PaletteName) || 'automne',
  )

  const colors = computed(() => palettes[currentPalette.value])
  const isLight = computed(() => colors.value.isLight)

  function applyToDOM() {
    if (!import.meta.client) return
    const c = colors.value
    const root = document.documentElement
    const s = root.style
    s.setProperty('--color-primary', c.primary)
    s.setProperty('--color-accent', c.accent)
    s.setProperty('--color-surface', c.surface)
    s.setProperty('--color-bg', c.bg)
    s.setProperty('--color-surface-light', c.surfaceLight)
    s.setProperty('--color-text', c.text)
    s.setProperty('--color-text-muted', c.textMuted)
    // Toggle light/dark class for CSS overrides
    root.classList.toggle('palette-light', c.isLight)
    root.classList.toggle('palette-dark', !c.isLight)
    s.setProperty('color-scheme', c.isLight ? 'light' : 'dark')
  }

  function setPalette(name: PaletteName) {
    currentPalette.value = name
    if (import.meta.client) localStorage.setItem('palette', name)
    applyToDOM()
  }

  return {
    currentPalette,
    colors,
    palettes,
    isLight,
    setPalette,
    applyToDOM,
  }
})