import { createFileRoute, notFound } from "@tanstack/react-router";
import { z } from "zod";
import { getAdminAudit } from "~/fns/admin";
import { Badge } from "~/ui/Badge";
import { EmptyState } from "~/ui/EmptyState";
import { Heading } from "~/ui/Heading";
import { PageContainer } from "~/ui/PageContainer";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { TextLink } from "~/ui/TextLink";

const PAGE_SIZE = 100;

export const Route = createFileRoute("/admin/audit")({
  head: () => ({ meta: [{ title: "Admin audit log · gitfor" }] }),
  validateSearch: z.object({
    at: z.number().int().nonnegative().optional(),
    id: z.string().min(1).max(64).optional(),
  }),
  beforeLoad: ({ context }) => {
    if (!context.viewer?.isAdmin) throw notFound();
  },
  loaderDeps: ({ search }) => ({ at: search.at, id: search.id }),
  loader: ({ deps }) =>
    getAdminAudit({
      data: { after: deps.at !== undefined && deps.id ? { createdAt: deps.at, id: deps.id } : undefined },
    }),
  component: AdminAuditPage,
});

function AdminAuditPage() {
  const { entries } = Route.useLoaderData();
  const last = entries.at(-1);
  return (
    <PageContainer className="max-w-5xl space-y-4 py-6">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <Heading>Admin audit log</Heading>
        <div className="flex gap-3">
          <TextLink to="/admin/abuse">Abuse queue</TextLink>
          <TextLink to="/admin">Back to site admin</TextLink>
        </div>
      </div>
      <Panel>
        {entries.length === 0 ? (
          <EmptyState title="No admin actions recorded" icon="inbox" />
        ) : (
          <table className="w-full text-left text-sm">
            <thead className="text-xs text-kumo-subtle">
              <tr>
                <th className="px-4 py-2 font-medium">When</th>
                <th className="px-4 py-2 font-medium">Admin</th>
                <th className="px-4 py-2 font-medium">Action</th>
                <th className="px-4 py-2 font-medium">Target</th>
                <th className="px-4 py-2 font-medium">Reason</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-kumo-hairline">
              {entries.map((entry) => (
                <tr key={entry.id}>
                  <td className="px-4 py-2 whitespace-nowrap text-kumo-subtle">
                    <RelativeTime timestamp={entry.created_at} />
                  </td>
                  <td className="px-4 py-2">
                    {entry.actor_name ? (
                      <TextLink to="/$owner" params={{ owner: entry.actor_name }}>
                        {entry.actor_name}
                      </TextLink>
                    ) : (
                      <span className="text-kumo-subtle">deleted</span>
                    )}
                  </td>
                  <td className="px-4 py-2">
                    <Badge>{entry.action}</Badge>
                  </td>
                  <td className="px-4 py-2 font-mono text-xs text-kumo-subtle">
                    {entry.target_kind}:{entry.target_id}
                  </td>
                  <td className="px-4 py-2 text-kumo-default">{entry.reason}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </Panel>
      {last && entries.length >= PAGE_SIZE && (
        <TextLink to="/admin/audit" search={{ at: last.created_at, id: last.id }}>
          Older entries
        </TextLink>
      )}
    </PageContainer>
  );
}