import { ref, computed } from 'vue'

/**
 * Theme selector for the public pages (landing + legal/contact).
 * Same 8 themes and cycle order as the ROA app / autopass landing.
 * Persisted under its own key so it doesn't clash with the in-app theme.
 */
const THEMES: [string, string][] = [
  ['light', 'Light'],
  ['dark', 'Dark'],
  ['petrol', 'Petrol'],
  ['grafit', 'Grafit'],
  ['cobalt', 'Cobalt'],
  ['cupru', 'Cupru'],
  ['hartie', 'Hârtie'],
  ['auto', 'Auto']
]
const THEME_KEY = 'roa-landing-theme'
const VALID = new Set(THEMES.map((t) => t[0]))

function resolve(id: string): string {
  if (id === 'auto') {
    return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'
  }
  return id
}

// Module-level singleton so every public page shares the same selection.
const stored = localStorage.getItem(THEME_KEY)
const themeId = ref(stored && VALID.has(stored) ? stored : 'grafit')

export function useLandingTheme() {
  const theme = computed(() => resolve(themeId.value))
  const themeLabel = computed(() => THEMES.find((t) => t[0] === themeId.value)?.[1] ?? 'Grafit')

  function cycleTheme() {
    const idx = THEMES.findIndex((t) => t[0] === themeId.value)
    themeId.value = THEMES[(idx + 1) % THEMES.length][0]
    localStorage.setItem(THEME_KEY, themeId.value)
  }

  return { themeId, theme, themeLabel, cycleTheme }
}