import { StrictMode, useEffect } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom'
import './index.css'
import './i18n/moneyStrings.js'
import './i18n/coverageStrings.js'
import { LangProvider, setPageMeta, useLang } from './i18n/LangContext.jsx'

import Home from './pages/Home.jsx'
import Archive from './pages/Archive.jsx'
import Article from './pages/Article.jsx'
import Academy from './pages/Academy.jsx'
import Themes from './pages/Themes.jsx'
import FromTheCounter from './pages/FromTheCounter.jsx'
import CapitalDistrictShelf from './pages/CapitalDistrictShelf.jsx'
import Blog from './pages/Blog.jsx'
import ToolkitThanks from './pages/ToolkitThanks.jsx'
import LeatherThanks from './pages/LeatherThanks.jsx'
import HistoryThanks from './pages/HistoryThanks.jsx'
import ScifiThanks from './pages/ScifiThanks.jsx'
import LibraryThanks from './pages/LibraryThanks.jsx'
import OrderThanks from './pages/OrderThanks.jsx'
import ScoutThanks from './pages/ScoutThanks.jsx'
import MapsThanks from './pages/MapsThanks.jsx'
import MediaThanks from './pages/MediaThanks.jsx'
import TrackerThanks from './pages/TrackerThanks.jsx'
import Policies from './pages/Policies.jsx'

// Per-route document title + meta description, sourced from the
// bilingual dictionary (meta.* keys) so both languages are served.
// Routes not listed keep the site default, which is the meta.home
// pair (identical to the static values in index.html). An article
// page refines this with the article's own title and intro once its
// data has loaded.
const ROUTE_META = {
  '/': 'home',
  '/blog': 'blog',
  '/themes': 'themes',
  '/from-the-counter': 'counter',
  '/policies': 'policies',
  '/academy': 'academy',
  '/archive': 'archive',
}

function RouteMeta() {
  const { lang, t } = useLang()
  const { pathname } = useLocation()
  useEffect(() => {
    let key = ROUTE_META[pathname]
    if (!key && pathname.startsWith('/article/')) key = 'article'
    if (!key) key = 'home'
    setPageMeta(t('meta.' + key + '.title'), t('meta.' + key + '.desc'))
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pathname, lang])
  return null
}

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
      <LangProvider>
      <RouteMeta />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/archive" element={<Archive />} />
        <Route path="/themes" element={<Themes />} />
        <Route path="/from-the-counter" element={<FromTheCounter />} />
        <Route path="/capital-district-shelf" element={<CapitalDistrictShelf />} />
        <Route path="/blog" element={<Blog />} />
        <Route path="/article/:slug" element={<Article />} />
        <Route path="/academy" element={<Academy />} />
        <Route path="/toolkit-thanks" element={<ToolkitThanks />} />
        <Route path="/leather-thanks" element={<LeatherThanks />} />
        <Route path="/history-thanks" element={<HistoryThanks />} />
        <Route path="/scifi-thanks" element={<ScifiThanks />} />
        <Route path="/library-thanks" element={<LibraryThanks />} />
        <Route path="/order-thanks" element={<OrderThanks />} />
        <Route path="/scout-thanks" element={<ScoutThanks />} />
        <Route path="/maps-thanks" element={<MapsThanks />} />
        <Route path="/media-thanks" element={<MediaThanks />} />
        <Route path="/tracker-thanks" element={<TrackerThanks />} />
        <Route path="/policies" element={<Policies />} />
      </Routes>
      </LangProvider>
    </BrowserRouter>
  </StrictMode>,
)