import { createFileRoute, Link } from "@tanstack/react-router";
import { AppShell, PageHeader } from "@/components/app-shell";
import { DirectoryTable } from "@/components/hub-dashboard";
import { MEMBER_CATEGORIES } from "@/lib/privileges";
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/users")({
  validateSearch: (search: Record<string, unknown>) => ({
    category: typeof search.category === "string" ? search.category : undefined,
  }),
  loaderDeps: ({ search }) => ({ category: search.category }),
  loader: async ({ deps }) => {
    const [meta, dir] = await Promise.all([
      getShellMeta(),
      getHubDirectory({ data: { category: deps.category } }),
    ]);
    return { meta, dir, category: deps.category };
  },
  component: UsersPage,
});

function UsersPage() {
  const { meta, dir, category } = Route.useLoaderData();
  const catLabel = MEMBER_CATEGORIES.find((c) => c.id === category)?.label;
  return (
    <AppShell hold={meta.hold} unread={meta.unread} noticeCount={meta.noticeCount} inboxUnread={meta.inboxUnread}>
      <PageHeader
        kicker="Members"
        title={catLabel ?? "All users"}
        description="Directory of people who can sign in. Mark Jones is the registered agent. No contractor names live here. Demo passwords are shown for this preview only."
      />
      <div className="mb-5 flex flex-wrap gap-2">
        <Link
          to="/admin/users"
          search={{ category: undefined }}
          className={goldPillClass(!category)}
        >
          All
        </Link>
        <Link
          to="/admin/members"
          className={goldPillClass()}
        >
          League members
        </Link>
        <Link
          to="/admin/archived"
          className={goldPillClass()}
        >
          Archived
        </Link>
        {MEMBER_CATEGORIES.map((c) => (
          <Link
            key={c.id}
            to="/admin/users"
            search={{ category: c.id }}
            className={goldPillClass(category === c.id)}
          >
            {c.label}
          </Link>
        ))}
      </div>
      <DirectoryTable users={dir.users} showPassword />
    </AppShell>
  );
}