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 soutenu, magenta chaud, lumière vivante
  printemps: {
    primary: '152 80% 24%',      // vert émeraude sombre
    accent: '338 88% 45%',       // magenta profond
    surface: '145 25% 85%',      // prairie franche
    bg: '140 28% 90%',           // vert lumineux franc
    surfaceLight: '148 22% 77%', // feuillage vif
    text: '155 50% 6%',          // encre noire-verte
    textMuted: '150 22% 28%',    // sous-bois dense
    isLight: true,
    label: 'Printemps',
    icon: 'i-lucide-flower-2',
  },

  // Été : orange brûlant, corail profond, chaleur méditerranéenne
  ete: {
    primary: '18 90% 44%',       // terre cuite brûlante
    accent: '355 78% 50%',       // corail ardent
    surface: '32 40% 85%',       // ocre clair
    bg: '35 42% 90%',            // chaleur dorée
    surfaceLight: '30 32% 78%',  // argile chaude
    text: '20 45% 8%',           // brun profond
    textMuted: '22 22% 30%',     // ombre terracotta
    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) || 'ete',
  )

  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,
  }
})