import Link from "next/link"
import { redirect } from "next/navigation"

import { auth, signOut } from "@/auth"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { isAdminEmail } from "@/lib/admin-auth"

function getInitials(name: string | null | undefined, email: string | null | undefined) {
  const source = name || email || "Admin"

  return source
    .split(/[\s@.]+/)
    .filter(Boolean)
    .slice(0, 2)
    .map((part) => part[0]?.toUpperCase())
    .join("")
}

async function signOutAction() {
  "use server"

  await signOut({ redirectTo: "/" })
}

export default async function AdminLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  const session = await auth()

  if (!session?.user?.email) {
    redirect("/sign-in")
  }

  if (!isAdminEmail(session.user.email)) {
    redirect("/auth-error")
  }

  return (
    <div className="min-h-screen bg-muted/40">
      <header className="border-b bg-background">
        <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-6 py-4">
          <div className="space-y-1">
            <Button asChild variant="link" className="h-auto p-0 text-lg font-semibold">
              <Link href="/admin">Wedding admin</Link>
            </Button>
            <p className="text-sm text-muted-foreground">
              Manage guest invitations, responses, and wedding details.
            </p>
          </div>
          <div className="flex items-center gap-4">
            <div className="hidden text-right sm:block">
              <p className="text-sm font-medium">{session.user.name ?? "Admin"}</p>
              <p className="text-xs text-muted-foreground">{session.user.email}</p>
            </div>
            <Avatar>
              <AvatarImage src={session.user.image ?? undefined} alt="Admin avatar" />
              <AvatarFallback>
                {getInitials(session.user.name, session.user.email)}
              </AvatarFallback>
            </Avatar>
            <form action={signOutAction}>
              <Button type="submit" variant="outline" size="sm">
                Sign out
              </Button>
            </form>
          </div>
        </div>
        <Separator />
      </header>
      <nav className="border-b bg-background">
        <div className="mx-auto flex max-w-6xl gap-2 px-6 py-2">
          <Button asChild variant="ghost" size="sm">
            <Link href="/admin">Dashboard</Link>
          </Button>
          <Button asChild variant="ghost" size="sm">
            <Link href="/admin/guests">Guests</Link>
          </Button>
        </div>
      </nav>
      <main className="mx-auto max-w-6xl px-6 py-8">{children}</main>
    </div>
  )
}