import { createFileRoute, Link } from "@tanstack/react-router";
import { AppShell, PageHeader } from "@/components/app-shell";
import { DirectoryTable } from "@/components/hub-dashboard";
import { getShellMeta } from "@/lib/server/api-core";
import { getHubDirectory } from "@/lib/server/api-hub";
import { goldPillClass } from "@/components/ui/button";

export const Route = createFileRoute("/admin/archived")({
  loader: async () => {
    const [meta, dir] = await Promise.all([getShellMeta(), getHubDirectory({ data: { archived: true } })]);
    return { meta, dir };
  },
  component: ArchivedPage,
});

function ArchivedPage() {
  const { meta, dir } = Route.useLoaderData();
  return (
    <AppShell hold={meta.hold} unread={meta.unread} noticeCount={meta.noticeCount} inboxUnread={meta.inboxUnread}>
      <PageHeader
        kicker="Members"
        title="Archived users"
        description="People who no longer have an active desk. Their rows stay for the audit trail. Nothing here is mailed."
      />
      <div className="mb-5 flex flex-wrap gap-2">
        <Link to="/admin/users" search={{ category: undefined }} className={goldPillClass()}>
          All people
        </Link>
        <span className={goldPillClass(true)}>Archived</span>
      </div>
      <DirectoryTable users={dir.users} />
    </AppShell>
  );
}