import { redirect } from 'next/navigation'
import Image from 'next/image'
import { auth } from '@/lib/auth'

export default async function AuthLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const session = await auth()

  // Redirect logged-in users to their dashboard
  if (session?.user) {
    const role = session.user.role
    if (role === 'SUPER_ADMIN' || role === 'PROGRAM_ADMIN') {
      redirect('/admin')
    } else if (role === 'JURY_MEMBER') {
      redirect('/jury')
    } else if (role === 'OBSERVER') {
      redirect('/observer')
    }
  }

  return (
    <div className="min-h-screen flex flex-col">
      {/* Simple header with logo */}
      <header className="border-b bg-card">
        <div className="container-app py-4">
          <Image
            src="/images/MOPC-blue-long.png"
            alt="MOPC - Monaco Ocean Protection Challenge"
            width={160}
            height={50}
            className="h-12 w-auto"
            priority
          />
        </div>
      </header>

      {/* Main content */}
      <main className="flex-1 flex items-center justify-center p-4">
        {children}
      </main>

      {/* Simple footer */}
      <footer className="border-t bg-card py-4">
        <div className="container-app text-center text-sm text-muted-foreground">
          &copy; {new Date().getFullYear()} Monaco Ocean Protection Challenge
        </div>
      </footer>
    </div>
  )
}