import Link from "next/link";
import { LayoutDashboard, MapPinned, Images, Inbox, Star, LogOut } from "lucide-react";
import { requireAdminSession } from "@/lib/session";
import { logoutAction } from "@/lib/actions/auth";
import { Logo } from "@/components/layout/Logo";

const navItems = [
  { href: "/admin", label: "Dashboard", icon: LayoutDashboard },
  { href: "/admin/offers", label: "Offers", icon: MapPinned },
  { href: "/admin/gallery", label: "Gallery", icon: Images },
  { href: "/admin/reviews", label: "Reviews", icon: Star },
  { href: "/admin/bookings", label: "Bookings", icon: Inbox },
];

export default async function AdminDashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const session = await requireAdminSession();

  return (
    <div className="flex min-h-screen">
      <aside className="flex w-64 shrink-0 flex-col justify-between border-e border-charcoal-950/10 bg-white p-6">
        <div>
          <Logo variant="dark" iconSize={30} textSize="text-sm" />
          <nav className="mt-10 flex flex-col gap-1">
            {navItems.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-charcoal-700 transition-colors hover:bg-charcoal-50"
              >
                <item.icon size={18} />
                {item.label}
              </Link>
            ))}
          </nav>
        </div>
        <div className="flex flex-col gap-3">
          <p className="truncate text-xs text-charcoal-400">{session.email}</p>
          <form action={logoutAction}>
            <button
              type="submit"
              className="flex items-center gap-2 text-sm font-medium text-charcoal-500 hover:text-charcoal-950"
            >
              <LogOut size={16} /> Log out
            </button>
          </form>
        </div>
      </aside>
      <main className="flex-1 p-8">{children}</main>
    </div>
  );
}