import { createFileRoute, Link } from "@tanstack/react-router";
import { AppShell, PageHeader } from "@/components/app-shell";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import { goldPillClass } from "@/components/ui/button";
import { getAdminDirectory } from "@/lib/server/api-academy";
import { getShellMeta } from "@/lib/server/api-core";

export const Route = createFileRoute("/admin/members")({
  loader: async () => {
    const [meta, dir] = await Promise.all([getShellMeta(), getAdminDirectory()]);
    return { meta, dir };
  },
  component: MembersPage,
});

function MembersPage() {
  const { meta, dir } = Route.useLoaderData();
  return (
    <AppShell hold={meta.hold} unread={meta.unread} noticeCount={meta.noticeCount} inboxUnread={meta.inboxUnread}>
      <PageHeader
        kicker="Super Admin"
        title="Members"
        description="Enrolled athletes and veteran founders. Academy yard points stay educational. Stadium points come from the deal room and public votes — traction means a coach may move them."
      />
      <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)}>League members</span>
      </div>
      <Card>
        <CardContent className="overflow-x-auto pt-5">
          <table className="w-full min-w-[40rem] text-left text-sm">
            <thead className="text-[11px] tracking-wide text-muted-foreground uppercase">
              <tr className="border-b border-border">
                <th className="pb-2 font-medium">Member</th>
                <th className="pb-2 font-medium">No.</th>
                <th className="pb-2 font-medium">Track</th>
                <th className="pb-2 font-medium">Team</th>
                <th className="pb-2 font-medium">Public bio</th>
                <th className="pb-2 font-medium text-right">Academy</th>
                <th className="pb-2 font-medium text-right">Stadium</th>
                <th className="pb-2 font-medium">Traction</th>
              </tr>
            </thead>
            <tbody>
              {dir.members.map((m) => (
                <tr key={m.id} className="border-b border-border/70">
                  <td className="py-2.5">
                    <p className="font-medium">{m.full_name}</p>
                    <p className="text-xs text-muted-foreground">{m.email}</p>
                  </td>
                  <td className="py-2.5 tabular">{m.member_no}</td>
                  <td className="py-2.5">{m.track.replaceAll("_", " ")}</td>
                  <td className="py-2.5">{m.team_name ?? "—"}</td>
                  <td className="py-2.5">{m.public_bio ? "Published" : "Private"}</td>
                  <td className="py-2.5 text-right tabular">{m.yard_points}</td>
                  <td className="py-2.5 text-right tabular font-medium">{m.stadium_points ?? 0}</td>
                  <td className="py-2.5">
                    {m.traction ? <Badge variant="success">Move</Badge> : <span className="text-muted-foreground">—</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </CardContent>
      </Card>
    </AppShell>
  );
}