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 { LogoutButton } from "./LogoutButton";

const NAV: Array<[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-[14rem_1fr]">
      <a href="#admin-main" className="skip-link">
        Skip to content
      </a>
      <aside
        className="border-b hairline md:border-r md:border-b-0"
        style={{ background: "var(--bg-muted)" }}
      >
        <div className="flex items-center justify-between px-4 py-3">
          <Link href="/admin" className="serif font-semibold no-underline">
            AutoScholar <span className="subtle text-xs">admin</span>
          </Link>
          <ThemeToggle />
        </div>
        <nav aria-label="Admin" className="flex gap-1 overflow-x-auto px-2 pb-2 md:flex-col md:pb-4">
          {NAV.map(([href, label]) => (
            <Link
              key={href}
              href={href}
              className="whitespace-nowrap rounded-md px-2 py-1.5 text-sm no-underline hover:bg-[var(--bg-elev)]"
            >
              {label}
            </Link>
          ))}
        </nav>
        <div className="muted hidden px-4 pb-4 text-xs md:block">
          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>
      </aside>
      <main id="admin-main" className="min-w-0 px-4 py-6 sm:px-6 lg:px-8">
        {children}
      </main>
    </div>
  );
}