import { Suspense, lazy } from 'react'
import { LandingPage } from './components/auth/LandingPage'
import { useOperatorSession } from './hooks/useOperatorSession'

// De werkbank wordt pas opgehaald wanneer iemand is aangemeld. Daardoor betaalt
// het inlogscherm niet voor de kaartmotor en de paneelopmaak.
const WorkbenchApp = lazy(() => import('./WorkbenchApp'))

function Voorbereiden({ tekst }: { tekst: string }): JSX.Element {
  return (
    <div className="landing-auth-loading" role="status" aria-live="polite">
      <div><span aria-hidden="true" /><strong>{tekst}</strong></div>
    </div>
  )
}

function App(): JSX.Element {
  const { session, sessionError, loggingOut, handleAuthenticated, handleLogout } = useOperatorSession()

  if (session === null) {
    return <Voorbereiden tekst="GeoIntel wordt voorbereid…" />
  }

  if (!session.authenticated) {
    return (
      <LandingPage
        serviceError={sessionError}
        guestAccessEnabled={session.guest_access_enabled}
        onAuthenticated={handleAuthenticated}
      />
    )
  }

  return (
    <Suspense fallback={<Voorbereiden tekst="De werkbank wordt geladen…" />}>
      <WorkbenchApp
        username={session.username}
        accessMode={session.role ?? (session.authentication_required ? 'operator' : 'open')}
        loggingOut={loggingOut}
        onLogout={handleLogout}
      />
    </Suspense>
  )
}

export default App