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

const STORAGE_KEY = 'thatsme-settings'

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,
  // Hintergrund
  bgCenter: '#0a0514',
  bgEdge: '#000000',
  gradientStops: '#e947f5\n#2f4ba2\n#0a0a12',
  backgroundImage: ''
}

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 })

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

  watch([theme, floatingLines], 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,
    toggleTheme,
    updateFloatingLines,
    resetFloatingLines
  }
})