import { NavLink, Outlet } from 'react-router-dom'
import { useSession } from '../context/SessionContext.jsx'
import { useCapabilities } from '../hooks/useCapabilities.js'
import { getNavViews } from '../registry/viewRegistry.js'
import { LoadingState } from '../components/LoadingState.jsx'

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

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

  return (
    <div className="app-layout">
      <header className="app-header">
        <div className="app-header-brand">
          <strong>Kairo</strong>
          {context?.tenant?.name && <span className="muted"> · {context.tenant.name}</span>}
        </div>
        <nav className="app-nav">
          {navViews.map((view) => (
            <NavLink
              key={view.key}
              to={view.path}
              className={({ isActive }) => (isActive ? 'nav-link active' : 'nav-link')}
            >
              {view.title}
            </NavLink>
          ))}
        </nav>
        <div className="app-header-user">
          <span className="user-label">{me?.display_name}</span>
          <button type="button" className="secondary" onClick={signOut}>
            Abmelden
          </button>
        </div>
      </header>
      <main className="shell workspace-shell">
        <Outlet />
      </main>
    </div>
  )
}