import { useCallback, useEffect, useState } from 'react'
import { api, Me, Unauthenticated } from './api'
import Login from './Login'
import Shell from './Shell'
import { applyTheme, currentThemeId } from './themes'
import { getRefreshMs, setRefreshMs } from './prefs'

export default function App() {
  const [me, setMe] = useState<Me | null | undefined>(undefined)

  const refresh = useCallback(async () => {
    try {
      const m = await api.meHere(); setMe(m)
      api.uiPrefs().then((p) => {
        if (p.theme && p.theme !== currentThemeId()) applyTheme(p.theme)
        if (p.refreshMs && p.refreshMs !== getRefreshMs()) setRefreshMs(p.refreshMs)
      }).catch(() => { /* keep local */ })
    } catch (e) { if (e instanceof Unauthenticated) setMe(null) }
  }, [])

  useEffect(() => { refresh() }, [refresh])
  useEffect(() => {
    if (!me) return
    const t = setInterval(refresh, 30000)
    return () => clearInterval(t)
  }, [me, refresh])

  if (me === undefined) return <div className="center muted">…</div>
  if (me === null) return <Login onLogin={refresh} />
  return <Shell me={me} onLoggedOut={() => setMe(null)} />
}