tehran_tala/apps/user-app/src/stores/appearanceStore.ts

// Appearance preferences: colour theme and reduced motion.
//
// Persisted in one localStorage key (the cartStore pattern). The same key is
// read by the tiny boot script in index.html, which applies the classes before
// the first paint — so a dark-mode user never sees a white flash while the
// bundle loads. This store re-applies them once the app is up and keeps them
// in sync from then on.
//
// What the classes on <html> drive:
//   theme-dark      the dark palette (virtual:palette.css, see
//                   themeConfig/appearance.ts) + color-scheme: dark
//   van-theme-dark  vant 4's own dark CSS variables
//   motion-reduced  the "fast & light" motion rules in style.less, plus the
//                   JS-driven motion that reads isReducedMotion (ProductMorph,
//                   carousel autoplay)
//
// Kept identical in user-app and user-app-v2.
import { defineStore } from 'pinia'

export type ThemeChoice = 'system' | 'light' | 'dark'

interface Stored {
  theme: ThemeChoice
  reduceMotion: boolean
}

export const APPEARANCE_STORAGE_KEY = 'gold-bank:appearance'

const darkQuery = () => (typeof matchMedia !== 'undefined' ? matchMedia('(prefers-color-scheme: dark)') : null)
const motionQuery = () => (typeof matchMedia !== 'undefined' ? matchMedia('(prefers-reduced-motion: reduce)') : null)

function load(): Stored {
  // First run: theme follows the system; motion follows the OS's own
  // "reduce motion" accessibility setting.
  const fallback: Stored = { theme: 'system', reduceMotion: !!motionQuery()?.matches }
  try {
    const raw = localStorage.getItem(APPEARANCE_STORAGE_KEY)
    if (!raw) return fallback
    const parsed = JSON.parse(raw) as Partial<Stored>
    return {
      theme: parsed.theme === 'light' || parsed.theme === 'dark' || parsed.theme === 'system' ? parsed.theme : fallback.theme,
      reduceMotion: typeof parsed.reduceMotion === 'boolean' ? parsed.reduceMotion : fallback.reduceMotion,
    }
  } catch {
    return fallback
  }
}

function persist(value: Stored) {
  try {
    localStorage.setItem(APPEARANCE_STORAGE_KEY, JSON.stringify(value))
  } catch {
    // Private mode / storage full: the choice still applies for this session.
  }
}

// Status-bar / browser chrome colour. Light keeps whatever index.html ships
// (the brand colour, unchanged); dark uses the dark canvas.
const DARK_THEME_COLOR = '#15171A'
let lightThemeColor: string | null = null

export const useAppearanceStore = defineStore('appearance', {
  state: () => ({
    ...load(),
    systemDark: !!darkQuery()?.matches,
  }),
  getters: {
    resolvedTheme: (s): 'light' | 'dark' => (s.theme === 'system' ? (s.systemDark ? 'dark' : 'light') : s.theme),
    isReducedMotion: (s) => s.reduceMotion,
  },
  actions: {
    init() {
      const q = darkQuery()
      q?.addEventListener?.('change', (e) => {
        this.systemDark = e.matches
        if (this.theme === 'system') this.apply()
      })
      this.apply(false)
    },
    setTheme(theme: ThemeChoice) {
      if (theme === this.theme) return
      this.theme = theme
      this.save()
      this.apply()
    },
    setReduceMotion(on: boolean) {
      if (on === this.reduceMotion) return
      this.reduceMotion = on
      this.save()
      this.apply(false)
    },
    save() {
      persist({ theme: this.theme, reduceMotion: this.reduceMotion })
    },
    /**
     * Writes the classes onto <html>. `quiet` (default) suppresses every CSS
     * transition for the frame the palette flips in: otherwise each element
     * with a colour transition would animate from the old theme to the new
     * one at once — hundreds of simultaneous transitions, a visible stutter.
     */
    apply(quiet = true) {
      const root = document.documentElement
      const dark = this.resolvedTheme === 'dark'
      if (quiet) root.classList.add('theme-switching')
      root.classList.toggle('theme-dark', dark)
      root.classList.toggle('van-theme-dark', dark)
      root.classList.toggle('motion-reduced', this.reduceMotion)
      const meta = document.querySelector('meta[name="theme-color"]')
      if (meta) {
        lightThemeColor ??= meta.getAttribute('data-light') ?? meta.getAttribute('content')
        meta.setAttribute('content', dark ? DARK_THEME_COLOR : lightThemeColor ?? '')
      }
      if (quiet) {
        // Two frames: one for the new colours to be computed with transitions
        // off, one for them to be painted, then transitions come back.
        requestAnimationFrame(() => requestAnimationFrame(() => root.classList.remove('theme-switching')))
      }
    },
  },
})