import Link from "next/link";
import type { ReactNode } from "react";
import { redirect } from "next/navigation";
import { getServerSession } from "next-auth";
import { authOptions } from "../lib/auth/options";
import { adminMenu, can } from "../lib/rbac/permissions";
import { AdminActions } from "../components/auth-actions";

export default async function AdminLayout({ children }: { children: ReactNode }) {
  const session = await getServerSession(authOptions);
  if (!session?.user) redirect("/login");

  const menu = session.user.systemRole === "SYSTEM_ADMIN"
    ? adminMenu
    : adminMenu.filter((item) => can(session.user.permissions, item.permission));

  return (
    <main className="min-h-screen bg-slate-100 text-slate-950 dark:bg-slate-950">
      <div className="grid min-h-screen lg:grid-cols-[260px_1fr]">
        <aside className="border-r border-slate-800 bg-slate-950 p-5 text-slate-100">
          <Link href="/admin" className="flex items-center gap-3">
            <span className="grid h-10 w-10 place-items-center rounded-lg bg-brand-primary text-base font-black text-white">W</span>
            <span>
              <span className="block text-lg font-bold leading-tight">WorkOnClock</span>
              <span className="text-xs font-medium text-slate-400">Admin Console</span>
            </span>
          </Link>
          <div className="mt-6 rounded-lg border border-slate-800 bg-slate-900 p-3">
            <p className="text-xs font-semibold uppercase text-slate-500">Workspace</p>
            <p className="mt-1 truncate text-sm font-semibold">{session.user.organizationName ?? "System Admin"}</p>
          </div>
          <nav className="mt-6 grid gap-1">
            {menu.map((item) => (
              <Link
                className="rounded-lg px-3 py-2 text-sm font-medium text-slate-300 transition hover:bg-slate-900 hover:text-white"
                href={item.href}
                key={item.href}
              >
                {item.label}
              </Link>
            ))}
          </nav>
        </aside>
        <section className="min-w-0">
          <header className="sticky top-0 z-10 flex items-center justify-between border-b border-slate-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-slate-800 dark:bg-slate-950/90">
            <div>
              <p className="text-sm font-semibold text-slate-950 dark:text-slate-100">Operations dashboard</p>
              <p className="text-sm text-slate-500">{session.user.email}</p>
            </div>
            <AdminActions />
          </header>
          <div className="p-6 lg:p-8">{children}</div>
        </section>
      </div>
    </main>
  );
}