admin / Synapse-Cortex

import { Outlet, useNavigate } from 'react-router-dom'
import { useAuth } from '../auth/AuthContext'
import { Sidebar } from './Sidebar'
import { PageHeaderProvider, useHeaderValue } from './PageHeaderContext'

function AppShellInner() {
  const { user, logout } = useAuth()
  const navigate = useNavigate()
  const header = useHeaderValue()

  const handleLogout = async () => {
    await logout()
    navigate('/login')
  }

  return (
    <div className="flex h-screen bg-cortex-bg text-chrome font-body">
      <Sidebar />
      <div className="flex-1 flex flex-col min-w-0">
        <header className="h-14 border-b border-cortex-border bg-cortex-panel flex items-center justify-between px-6 shrink-0">
          <div className="text-xs text-cortex-muted uppercase tracking-wider">{header}</div>
          <div className="flex items-center gap-3">
            <span className="text-sm text-chrome">{user?.full_name}</span>
            <span className="text-[10px] px-2 py-0.5 rounded bg-cortex-panel2 border border-cortex-border text-accent-blue uppercase">
              {user?.role.replace('_', ' ')}
            </span>
            <button onClick={handleLogout} className="text-xs text-cortex-muted hover:text-accent-red transition">
              LOGOUT
            </button>
          </div>
        </header>
        <main className="flex-1 p-6 scan-line overflow-auto">
          <Outlet />
        </main>
      </div>
    </div>
  )
}

export function AppShell() {
  return (
    <PageHeaderProvider>
      <AppShellInner />
    </PageHeaderProvider>
  )
}