import React, { createContext, useContext, useState, useEffect } from 'react'
import * as SecureStore from 'expo-secure-store'

type Theme = 'light' | 'dark'
interface ThemeCtx { theme: Theme; toggleTheme: () => void; isDark: boolean }

export const ThemeContext = createContext<ThemeCtx>({
  theme: 'light', toggleTheme: () => {}, isDark: false,
})

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<Theme>('light')
  useEffect(() => {
    SecureStore.getItemAsync('grd_theme').then(v => {
      if (v === 'dark') setTheme('dark')
    })
  }, [])
  const toggleTheme = () => {
    const next: Theme = theme === 'light' ? 'dark' : 'light'
    setTheme(next)
    SecureStore.setItemAsync('grd_theme', next)
  }
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme, isDark: theme === 'dark' }}>
      {children}
    </ThemeContext.Provider>
  )
}

export const useTheme = () => useContext(ThemeContext)