// src/stores/theme.ts

import { ref } from 'vue'
import { defineStore } from 'pinia'
import type { ThemeOption } from '../types/models'

const STORAGE_KEY = 'user_theme'
const DEFAULT_THEME = 'ocean'

export const AVAILABLE_THEMES: ThemeOption[] = [
  { name: 'ocean', label: 'Ocean', preview: '#ff6600' },
  { name: 'forest', label: 'Forest', preview: '#4ade80' },
  { name: 'sunset', label: 'Sunset', preview: '#fb923c' },
  { name: 'arctic', label: 'Arctic', preview: '#06b6d4' },
  { name: 'midnight', label: 'Midnight', preview: '#a78bfa' },
]

export const useThemeStore = defineStore('theme', () => {
  // --- STATE ---
  const currentTheme = ref(localStorage.getItem(STORAGE_KEY) || DEFAULT_THEME)

  // --- ACTIONS ---
  function setTheme(theme: string) {
    const validTheme = AVAILABLE_THEMES.find(t => t.name === theme)
    if (validTheme) {
      currentTheme.value = theme
      localStorage.setItem(STORAGE_KEY, theme)
      document.documentElement.setAttribute('data-theme', theme)
    }
  }

  function initTheme() {
    // Validate stored theme is still valid
    const storedTheme = localStorage.getItem(STORAGE_KEY)
    const validTheme = AVAILABLE_THEMES.find(t => t.name === storedTheme)
    if (validTheme) {
      currentTheme.value = storedTheme!
    } else {
      currentTheme.value = DEFAULT_THEME
      localStorage.setItem(STORAGE_KEY, DEFAULT_THEME)
    }
    document.documentElement.setAttribute('data-theme', currentTheme.value)
  }

  // --- RETURN ---
  return {
    currentTheme,
    setTheme,
    initTheme,
    AVAILABLE_THEMES,
  }
})