import { Outlet } from 'react-router-dom'
import { useSession } from '../context/SessionContext.jsx'
import { useCapabilities } from '../hooks/useCapabilities.js'
import { LoadingState } from '../components/LoadingState.jsx'
import { DesktopSidebar } from '../components/DesktopSidebar.jsx'
import { BottomNav } from '../components/BottomNav.jsx'
import { ContextIndicator } from '../components/ContextIndicator.jsx'
import { ProgramScopeBar } from '../components/ProgramScopeBar.jsx'
import { QuickJump } from '../components/QuickJump.jsx'
import { RecentlyOpened } from '../components/RecentlyOpened.jsx'

export function AppLayout() {
  const { me, signOut, loading } = useSession()
  const { capabilities } = useCapabilities()

  if (loading) {
    return (
      <div className="app-shell">
        <main className="app-main">
          <div className="app-page">
            <LoadingState message="Session wird geladen …" />
          </div>
        </main>
      </div>
    )
  }

  return (
    <div className="app-shell">
      <DesktopSidebar
        capabilities={capabilities}
        user={me}
        onLogout={signOut}
      />
      <div className="app-shell__column">
        <header className="app-header app-header--mobile">
          <div className="app-header__top">
            <div className="app-brand">
              <span className="app-brand__name">Kairo</span>
              <span className="app-brand__family">Jinkendo Program Director</span>
            </div>
            <QuickJump />
          </div>
          <ContextIndicator variant="mobile" />
          <ProgramScopeBar />
          <RecentlyOpened />
        </header>
        <div className="app-chrome app-chrome--desktop">
          <ProgramScopeBar />
          <QuickJump />
          <RecentlyOpened />
        </div>
        <main className="app-main">
          <Outlet />
        </main>
        <BottomNav capabilities={capabilities} />
      </div>
    </div>
  )
}