import { useAuthStore } from '@/stores/auth'
import { useToastStore } from '@/stores/toast'

export interface ThemeOption {
  id: string
  label: string
  primary: string
  bg: string
  text: string
}

export const THEMES: ThemeOption[] = [
  { id: 'warm-craft',   label: 'Warm Craft',   primary: '#c97c3a', bg: '#fdf6ee', text: '#3a2e22' },
  { id: 'playful-pop',  label: 'Playful Pop',  primary: '#d63aab', bg: '#fff0fb', text: '#2d0a28' },
  { id: 'sage-cream',   label: 'Sage & Cream', primary: '#4e7c3a', bg: '#f6f8f3', text: '#1e2b1a' },
  { id: 'dusty-mauve',  label: 'Dusty Mauve',  primary: '#8e4a84', bg: '#f6f0f4', text: '#2a1828' },
  { id: 'ocean-dusk',   label: 'Ocean Dusk',   primary: '#1a6ea8', bg: '#eef3f8', text: '#0e2030' },
  { id: 'honey-slate',  label: 'Honey & Slate', primary: '#c49a20', bg: '#f2f2ee', text: '#1c1c18' },
]

export function useTheme() {
  const auth = useAuthStore()
  const toast = useToastStore()

  function applyTheme(themeId: string) {
    document.documentElement.dataset.theme = themeId
    if (auth.user) auth.user.theme = themeId

    const theme = THEMES.find(t => t.id === themeId)
    if (theme) {
      const meta = document.querySelector('meta[name="theme-color"]')
      if (meta) meta.setAttribute('content', theme.bg)
    }
  }

  async function saveTheme(themeId: string) {
    applyTheme(themeId)
    try {
      const res = await fetch('/api/user/theme', {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ theme: themeId }),
      })
      if (!res.ok) throw new Error('Failed to save theme')
    } catch {
      toast.show('Could not save theme — try again', 'error')
    }
  }

  return { THEMES, applyTheme, saveTheme }
}