import { useEffect, useState } from 'react'

const THEME_KEY = 'tokenize_theme'
type Theme = 'light' | 'dark'

/**
 * Get initial theme preference from localStorage or system preference
 */
function getInitialTheme(): Theme {
  const saved = localStorage.getItem(THEME_KEY)
  if (saved === 'light' || saved === 'dark') return saved
  const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)').matches
  return prefersDark ? 'dark' : 'light'
}

/**
 * ThemeToggle Component
 * Allows users to toggle between light and dark modes
 * Persists theme preference to localStorage and applies Tailwind's dark class
 */
export default function ThemeToggle() {
  const [theme, setTheme] = useState<Theme>(() => getInitialTheme())
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
    // Apply theme immediately on mount to prevent flash
    const t = getInitialTheme()
    if (t === 'dark') {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }
  }, [])

  useEffect(() => {
    if (!mounted) return
    // Apply Tailwind dark mode
    if (theme === 'dark') {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }
    localStorage.setItem(THEME_KEY, theme)
  }, [theme, mounted])

  return (
    <button
      type="button"
      className="px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm font-medium transition"
      onClick={() => setTheme((t) => (t === 'dark' ? 'light' : 'dark'))}
      title="Toggle light/dark mode"
    >
      {theme === 'dark' ? '🌙' : '☀️'}
    </button>
  )
}