import Link from "next/link";
import { redirect } from "next/navigation";
import type { ReactNode } from "react";
import { ThemeToggle } from "@/components/ThemeToggle";
import { currentSession } from "@/lib/server/session";
import { AdminNav } from "./AdminNav";
import { LogoutButton } from "./LogoutButton";

export const NAV: Array<[string, string, string]> = [
  ["/admin", "Overview", "⌂"],
  ["/admin/new", "New research", "+"],
  ["/admin/projects", "Projects", "▤"],
  ["/admin/runs", "Runs", "▶"],
  ["/admin/maclustr", "MacLustr", "◧"],
  ["/admin/manuscripts", "Manuscripts", "¶"],
  ["/admin/quality", "Quality", "✓"],
  ["/admin/publications", "Publications", "⊕"],
  ["/admin/templates", "Templates", "≡"],
  ["/admin/settings", "Settings & security", "⚙"],
];

export default async function ConsoleLayout({ children }: { children: ReactNode }) {
  const sess = await currentSession();
  if (!sess) redirect("/admin/login");
  if (sess.mustChangePassword) redirect("/admin/change-password");
  return (
    <div className="min-h-dvh md:grid md:grid-cols-[15rem_1fr]">
      <a href="#admin-main" className="skip-link">
        Skip to content
      </a>
      <aside
        className="sticky top-0 z-30 border-b hairline md:h-dvh md:overflow-y-auto md:border-r md:border-b-0"
        style={{ background: "var(--bg-muted)", paddingTop: "var(--safe-t)" }}
      >
        <div className="flex items-center justify-between gap-2 px-4 py-3">
          <Link href="/admin" className="flex items-center gap-2 no-underline">
            <span
              aria-hidden="true"
              className="grid h-7 w-7 place-items-center rounded-md text-[11px] font-semibold"
              style={{ background: "var(--fg)", color: "var(--bg)", fontFamily: "var(--font-serif)" }}
            >
              As
            </span>
            <span className="serif font-medium">
              AutoScholar <span className="subtle text-xs font-normal">admin</span>
            </span>
          </Link>
          <div className="flex items-center gap-1">
            <ThemeToggle />
            <AdminNav items={NAV.map(([href, label]) => [href, label])} mobileOnly />
          </div>
        </div>
        <div className="hidden md:block">
          <AdminNav items={NAV.map(([href, label]) => [href, label])} />
          <div className="muted mt-4 border-t px-4 py-4 text-xs hairline">
            Signed in as <strong>{sess.username}</strong>
            <div className="mt-2">
              <LogoutButton />
            </div>
            <div className="mt-3">
              <Link href="/" className="text-xs">
                ← Public site
              </Link>
            </div>
          </div>
        </div>
      </aside>
      <main
        id="admin-main"
        className="min-w-0 px-4 py-6 sm:px-6 lg:px-8"
        style={{ paddingBottom: "calc(1.5rem + var(--safe-b))" }}
      >
        {children}
      </main>
    </div>
  );
}