import { createFileRoute } from "@tanstack/react-router";
import { AppShell, PageHeader } from "@/components/app-shell";
import { AdminHubFrame } from "@/components/admin-hub-frame";
import { Button } from "@/components/ui/button";
import { CFL_ADMIN_HUB_URL } from "@/lib/constants";
import { getShellMeta } from "@/lib/server/api-core";

export const Route = createFileRoute("/admin-hub")({
  validateSearch: (s: Record<string, unknown>): { view?: string } =>
    typeof s.view === "string" && s.view.startsWith("/") ? { view: s.view } : {},
  loader: () => getShellMeta(),
  component: Page,
});

function Page() {
  const meta = Route.useLoaderData();
  const { view } = Route.useSearch();
  return (
    <AppShell hold={meta.hold} unread={meta.unread} noticeCount={meta.noticeCount} inboxUnread={meta.inboxUnread}>
      <PageHeader
        kicker="Admin Hub"
        title="Live Admin Hub is this desk"
        description="dawn-stone-cedar-wood is framed here — member overview, internship and ambassador applications, Forge Control, Donor Scout, Capstone. Grant Scout is the other live board."
        actions={
          <Button asChild variant="gold">
            <a href={CFL_ADMIN_HUB_URL} target="_blank" rel="noreferrer">
              Full-screen Admin Hub
            </a>
          </Button>
        }
      />
      <AdminHubFrame path={view ?? "/"} heightClass="h-[78vh]" />
    </AppShell>
  );
}