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 vif, rose cerisier punchy, lumière fraîche
  printemps: {
    primary: '152 65% 36%',      // vert émeraude vif
    accent: '340 78% 52%',       // rose cerisier punchy
    surface: '130 18% 90%',      // rosée du matin
    bg: '110 20% 94%',           // clarté verte
    surfaceLight: '125 14% 84%', // feuille vive
    text: '155 30% 10%',         // vert profond saturé
    textMuted: '145 14% 38%',    // mousse riche
    isLight: true,
    label: 'Printemps',
    icon: 'i-lucide-flower-2',
  },

  // Été : orange solaire, turquoise pop, lumineux chaleureux
  ete: {
    primary: '22 92% 48%',       // soleil éclatant
    accent: '175 72% 38%',       // turquoise pop
    surface: '38 35% 88%',       // sable doré
    bg: '40 38% 93%',            // lumière dorée chaude
    surfaceLight: '35 28% 82%',  // dune chaude
    text: '28 35% 8%',           // brun intense
    textMuted: '28 16% 35%',     // ombre chaude
    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,
  }
})