import { redirect } from 'next/navigation'
import { cookies } from 'next/headers'
import { getIronSession } from 'iron-session'
import { SessionData, sessionOptions } from '@/lib/session'
import { prisma } from '@/lib/prisma'
import { NavBar } from '@/components/shared/nav-bar'
import { MinWidthBanner } from '@/components/shared/min-width-banner'
import { StatusBar } from '@/components/shared/status-bar'
import { SoloRealtimeBridge } from '@/components/solo/realtime-bridge'

export default async function AppLayout({ children }: { children: React.ReactNode }) {
  const session = await getIronSession<SessionData>(await cookies(), sessionOptions)

  if (!session.userId) {
    redirect('/login')
  }

  const [user, userRoles] = await Promise.all([
    prisma.user.findUnique({
      where: { id: session.userId },
      select: { username: true, email: true },
    }),
    prisma.userRole.findMany({
      where: { user_id: session.userId },
      select: { role: true },
    }),
  ])
  const roles = userRoles.map(r => r.role as string)

  if (!user) {
    redirect('/login')
  }

  return (
    <div className="h-screen bg-background flex flex-col overflow-hidden">
      <a href="#main-content" className="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-50 focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-md focus:text-sm">
        Ga naar inhoud
      </a>
      <NavBar
        isDemo={session.isDemo}
        roles={roles}
        userId={session.userId}
        username={user.username}
        email={user.email}
      />
      <MinWidthBanner />
      <main id="main-content" className="flex-1 flex flex-col overflow-y-auto min-h-0">
        {children}
      </main>
      <StatusBar />
      <SoloRealtimeBridge />
    </div>
  )
}