import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { ThemeProvider } from './theme.jsx'
import { AuthProvider } from './auth.jsx'
import useAuth from './auth.jsx'
import Login from './views/Login.jsx'
import './index.css'
import App from './App.jsx'

// App is mounted only once there is a session — its load effects call /api
// straight away, and mounting it logged-out would just fire a burst of 401s.
function Gate() {
  const { user, checking } = useAuth()
  if (checking) return <div className="flex items-center justify-center h-screen text-sm text-gray-400">Loading…</div>
  if (!user)    return <Login />
  return <App />
}

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <ThemeProvider>
      <AuthProvider>
        <Gate />
      </AuthProvider>
    </ThemeProvider>
  </StrictMode>,
)