import Link from "next/link";
import { redirect } from "next/navigation";
import { LogOut } from "lucide-react";

import { auth } from "@/auth";
import { Button } from "@/components/ui/button";

import { logoutAction } from "./actions";
import { MobileNav } from "./MobileNav";
import { navItems } from "./nav-config";

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

  if (!session) {
    redirect("/login");
  }

  return (
    <div className="min-h-screen bg-muted/40">
      <aside className="fixed inset-y-0 left-0 hidden w-64 border-r bg-background md:block">
        <div className="flex h-16 items-center border-b px-5">
          <Link className="text-lg font-semibold" href="/">
            chocoadmin
          </Link>
        </div>
        <nav className="space-y-1 p-3">
          {navItems.map((item) => {
            const Icon = item.icon;

            return (
              <Link
                className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                href={item.href}
                key={item.href}
              >
                <Icon className="size-4" aria-hidden="true" />
                {item.label}
              </Link>
            );
          })}
        </nav>
      </aside>

      <div className="md:pl-64">
        <header className="sticky top-0 z-10 flex h-16 items-center gap-3 border-b bg-background px-5">
          <MobileNav />
          <div className="flex-1">
            <p className="text-sm font-medium">{session.user.name}</p>
            <p className="text-xs text-muted-foreground">
              관리자 ID {session.user.adminID}
            </p>
          </div>
          <form action={logoutAction}>
            <Button size="sm" type="submit" variant="outline">
              <LogOut className="size-4" aria-hidden="true" />
              로그아웃
            </Button>
          </form>
        </header>

        <main className="p-5">{children}</main>
      </div>
    </div>
  );
}