import { Routes, Route, Navigate } from 'react-router-dom'
import { useState, useEffect } from 'react'
import { getUser } from './lib/api'
import { ToastProvider } from './components/Toast'
import { ConfirmProvider } from './components/ConfirmDialog'
import Login from './pages/Login'
import Stories from './pages/Stories'
import EditorPage from './pages/EditorPage'
import Admin from './pages/Admin'
import ThemePicker from './components/ThemePicker'
import FontPicker, { FONTS } from './components/FontPicker'

const THEMES = ['grunge', 'gothic', 'forest', 'manuscript', 'noir']

export default function App() {
  const [user,   setUser]   = useState(() => getUser())
  const [theme,  setTheme]  = useState(() => localStorage.getItem('sw-theme') || 'grunge')
  const [fontId, setFontId] = useState(() => localStorage.getItem('sw-font')  || 'lora')

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme)
    localStorage.setItem('sw-theme', theme)
  }, [theme])

  useEffect(() => {
    const font = FONTS.find(f => f.id === fontId) ?? FONTS[0]
    document.documentElement.style.setProperty('--font-body', font.family)
    localStorage.setItem('sw-font', fontId)
  }, [fontId])

  return (
    <ToastProvider>
      <ConfirmProvider>
        <Routes>
          <Route path="/login"     element={user ? <Navigate to="/" /> : <Login onLogin={setUser} />} />
          <Route path="/admin"     element={<Admin />} />
          <Route path="/"          element={user ? <Stories onLogout={() => setUser(null)} /> : <Navigate to="/login" />} />
          <Route path="/story/:id" element={user ? <EditorPage /> : <Navigate to="/login" />} />
          <Route path="*"          element={<Navigate to="/" />} />
        </Routes>
        {user && <ThemePicker theme={theme} setTheme={setTheme} themes={THEMES} />}
        {user && <FontPicker  fontId={fontId} setFont={setFontId} />}
      </ConfirmProvider>
    </ToastProvider>
  )
}