import { StrictMode, useEffect } from 'react'
import { createRoot } from 'react-dom/client'
import './ui/theme.css'
import './index.css'
import { AuthProvider } from './context/AuthContext'
import { TierProvider } from './context/TierContext'
import { RouterProvider, useRouter, matchPath } from './router/Router'
import LandingPage from './LandingPage'
import ProcijeniPage from './pages/ProcijeniPage'
import CijenePage from './pages/CijenePage'
import KakoRadiPage from './pages/KakoRadiPage'
import WaitlistPage from './pages/WaitlistPage'
import ComingSoonPage from './pages/ComingSoonPage'

/** Imperatively redirect, then render nothing. */
function Redirect({ to }: { to: string }) {
  const { navigate } = useRouter()
  useEffect(() => {
    navigate(to, { replace: true })
  }, [to, navigate])
  return null
}

function App() {
  const { path } = useRouter()

  // ── Public marketing / SEO pages ──
  if (path === '/procijeni') return <ProcijeniPage />
  if (path === '/kako-radi') return <KakoRadiPage />
  if (path === '/waitlist') return <WaitlistPage />

  const cijene = matchPath('/cijene/:kategorija/:model', path)
  if (cijene) {
    return <CijenePage kategorija={cijene.kategorija} model={cijene.model} />
  }

  // ── Pre-launch: pricing and auth are hidden; the dashboard is not yet open. ──
  // The old /cjenovnik and /signup entry points redirect to the landing page,
  // where the waitlist lives, so any lingering links still land somewhere useful.
  if (path === '/cjenovnik') return <Redirect to="/" />
  if (path === '/signup') return <Redirect to="/" />
  if (path === '/dashboard' || path.startsWith('/dashboard/')) {
    return <ComingSoonPage />
  }

  // ── Root / fallback ──
  return <LandingPage />
}

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <RouterProvider>
      <AuthProvider>
        <TierProvider>
          <App />
        </TierProvider>
      </AuthProvider>
    </RouterProvider>
  </StrictMode>,
)