import type { Ref } from 'vue'

export interface Mood {
  id: string
  label: string
  description: string
  icon: string
  color: string
  isDark: boolean
}

const STORAGE_KEY = 'glibredecision_mood'

const moods: Mood[] = [
  { id: 'peps', label: 'Peps', description: 'Chaud et tonique', icon: 'i-lucide-sun', color: '#d44a10', isDark: false },
  { id: 'zen', label: 'Zen', description: 'Foret profonde', icon: 'i-lucide-leaf', color: '#1a6838', isDark: false },
  { id: 'chagrine', label: 'Chagrine', description: 'Bleu electrique', icon: 'i-lucide-moon', color: '#4088d8', isDark: true },
  { id: 'grave', label: 'Grave', description: 'Mineral et lumineux', icon: 'i-lucide-shield', color: '#d09828', isDark: true },
]

const currentMood: Ref<string> = ref('peps')

function applyMood(moodId: string) {
  if (import.meta.server) return

  const mood = moods.find(m => m.id === moodId)
  if (!mood) return

  const html = document.documentElement

  // Remove all existing mood classes
  moods.forEach(m => html.classList.remove(`mood-${m.id}`))

  // Add the new mood class
  html.classList.add(`mood-${moodId}`)

  // Sync color-mode (light/dark) via Nuxt's useColorMode
  const colorMode = useColorMode()
  colorMode.preference = mood.isDark ? 'dark' : 'light'

  // Persist choice
  localStorage.setItem(STORAGE_KEY, moodId)

  currentMood.value = moodId
}

function setMood(moodId: string) {
  applyMood(moodId)
}

function initMood() {
  if (import.meta.server) return

  const saved = localStorage.getItem(STORAGE_KEY)
  const moodId = saved && moods.some(m => m.id === saved) ? saved : 'peps'
  applyMood(moodId)
}

export function useMood() {
  return {
    currentMood: readonly(currentMood),
    moods,
    setMood,
    initMood,
  }
}