import { defineStore } from 'pinia'
import { ref, watch } from 'vue'

const STORAGE_KEY = 'thatsme-settings'

export const ACCENT_COLORS = [
  { label: 'Standard', value: 'default', hex: '#9e9e9e' },
  { label: 'Blau', value: 'blue', hex: '#2196F3' },
  { label: 'Grün', value: 'green', hex: '#4CAF50' },
  { label: 'Gelb', value: 'yellow', hex: '#FFC107' },
  { label: 'Rosa', value: 'pink', hex: '#E91E63' },
  { label: 'Orange', value: 'orange', hex: '#FF9800' }
]

export const LANGUAGES = [
  { label: 'Deutsch', value: 'de' },
  { label: 'English', value: 'en' }
]

const FLOATING_LINES_DEFAULTS = {
  // Linien
  speed: 1.0,
  lineCount: 10,
  spread: 0.05,
  fanSpread: 0.05,
  lineSharpness: 8.0,
  waveFrequency: 7.0,
  bezierCurvature: 0.2,
  circleRadius: 75,
  glowSize: 18,
  glowStrength: 1.5,
  lineBrightness: 1.0,
  // Hintergrund
  bgCenter: '#0a0514',
  bgEdge: '#000000',
  gradientStops: '#e947f5\n#2f4ba2\n#0a0a12',
  backgroundImage: '',
  // Labels
  labelSize: 'small',    // 'small' | 'medium' | 'large'
  labelColor: '#ffffff'
}

function loadFromStorage() {
  try {
    const stored = localStorage.getItem(STORAGE_KEY)
    return stored ? JSON.parse(stored) : null
  } catch {
    return null
  }
}

export { FLOATING_LINES_DEFAULTS }

export const useSettingsStore = defineStore('settings', () => {
  const stored = loadFromStorage()

  const theme = ref(stored?.theme ?? 'light')
  const floatingLines = ref(stored?.floatingLines ?? { ...FLOATING_LINES_DEFAULTS })

  // App preferences
  const appearance = ref(stored?.appearance ?? 'system') // 'system' | 'light' | 'dark'
  const accentColor = ref(stored?.accentColor ?? 'default')
  const language = ref(stored?.language ?? 'de')

  // Developer / debug
  const showFps = ref(stored?.showFps ?? false)

  function persist() {
    localStorage.setItem(
      STORAGE_KEY,
      JSON.stringify({
        theme: theme.value,
        floatingLines: floatingLines.value,
        appearance: appearance.value,
        accentColor: accentColor.value,
        language: language.value,
        showFps: showFps.value
      })
    )
  }

  watch([theme, floatingLines, appearance, accentColor, language, showFps], persist, { deep: true })

  function toggleTheme() {
    theme.value = theme.value === 'light' ? 'dark' : 'light'
  }

  function updateFloatingLines(updates) {
    floatingLines.value = { ...floatingLines.value, ...updates }
  }

  function resetFloatingLines() {
    floatingLines.value = { ...FLOATING_LINES_DEFAULTS }
  }

  return {
    theme,
    floatingLines,
    appearance,
    accentColor,
    language,
    showFps,
    toggleTheme,
    updateFloatingLines,
    resetFloatingLines
  }
})