import Link from "next/link";
import { ChevronLeft, ChevronRight, ScrollText } from "lucide-react";
import { getWorkspace } from "@/lib/session";
import { listAuditLogs } from "@/lib/queries/account";
import { formatDate, titleCase, truncate } from "@/lib/format";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { EmptyState } from "@/components/ui/empty-state";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { SimpleTooltip } from "@/components/ui/tooltip";

export const dynamic = "force-dynamic";

const PAGE_SIZE = 25;

function actionVariant(action: string): "default" | "success" | "danger" | "warning" | "info" | "accent" {
  if (action.endsWith(".revoked") || action.endsWith(".deleted") || action.endsWith(".archived")) return "danger";
  if (action.endsWith(".created") || action === "login" || action === "email.verified") return "success";
  if (action.startsWith("password") || action.startsWith("email") || action.startsWith("session")) return "warning";
  if (action.startsWith("admin")) return "accent";
  return "default";
}

function summarize(meta: Record<string, unknown> | null): string {
  if (!meta) return "—";
  const parts = Object.entries(meta)
    .filter(([, v]) => v !== null && v !== undefined && typeof v !== "object")
    .map(([k, v]) => `${k}: ${String(v)}`);
  return parts.length ? truncate(parts.join(" · "), 72) : "—";
}

export default async function AuditLogPage({ searchParams }: { searchParams: Promise<{ page?: string }> }) {
  const sp = await searchParams;
  const page = Math.max(1, Number.parseInt(sp.page ?? "1", 10) || 1);
  const ws = await getWorkspace();
  const { rows, total } = await listAuditLogs(ws.user.id, ws.organization.id, page, PAGE_SIZE);
  const pages = Math.max(1, Math.ceil(total / PAGE_SIZE));

  return (
    <div className="grid gap-4">
      <div className="flex flex-wrap items-end justify-between gap-3">
        <div>
          <h2 className="text-[15px] font-semibold tracking-tight">Audit log</h2>
          <p className="text-[13px] text-fg-muted">Security-relevant events for your account and organization. Retained for 365 days.</p>
        </div>
        <p className="text-[12.5px] text-fg-subtle tabular">{total.toLocaleString("en-US")} events</p>
      </div>

      {rows.length === 0 ? (
        <EmptyState icon={ScrollText} title={page > 1 ? "Nothing on this page" : "No events yet"} description={page > 1 ? "Go back to the first page." : "Logins, key changes and settings updates will appear here."} action={page > 1 ? <Button asChild variant="outline" size="sm"><Link href="/dashboard/settings/audit">First page</Link></Button> : undefined} />
      ) : (
        <div className="overflow-hidden rounded-lg border border-border bg-bg-elevated shadow-xs">
          <Table>
            <TableHeader>
              <TableRow className="hover:bg-transparent">
                <TableHead>Time</TableHead>
                <TableHead>Action</TableHead>
                <TableHead>Target</TableHead>
                <TableHead>Details</TableHead>
                <TableHead>IP</TableHead>
                <TableHead>User agent</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {rows.map((r) => (
                <TableRow key={r.id}>
                  <TableCell className="whitespace-nowrap tabular text-fg-muted">{formatDate(r.createdAt)}</TableCell>
                  <TableCell>
                    <Badge variant={actionVariant(r.action)}>{titleCase(r.action.replace(/\./g, " "))}</Badge>
                  </TableCell>
                  <TableCell className="font-mono text-[12px] text-fg-muted">{r.target ? truncate(r.target, 28) : "—"}</TableCell>
                  <TableCell className="max-w-[280px] truncate text-[12.5px] text-fg-muted" title={r.metadata ? JSON.stringify(r.metadata) : undefined}>
                    {summarize(r.metadata)}
                  </TableCell>
                  <TableCell className="font-mono text-[12px] tabular">{r.ipAddress ?? "—"}</TableCell>
                  <TableCell className="text-[12px] text-fg-subtle">
                    {r.userAgent ? (
                      <SimpleTooltip content={<span className="font-mono text-[11px]">{r.userAgent}</span>}>
                        <span className="font-mono">{truncate(r.userAgent, 36)}</span>
                      </SimpleTooltip>
                    ) : (
                      "—"
                    )}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
          <div className="flex items-center justify-between border-t border-border px-4 py-2 text-[12.5px] text-fg-muted">
            <span className="tabular">
              Page {page} of {pages}
            </span>
            <div className="flex items-center gap-1">
              <Button asChild variant="ghost" size="xs" aria-disabled={page <= 1}>
                <Link href={`/dashboard/settings/audit?page=${page - 1}`} aria-label="Previous page" className={page <= 1 ? "pointer-events-none opacity-50" : undefined}>
                  <ChevronLeft /> Prev
                </Link>
              </Button>
              <Button asChild variant="ghost" size="xs" aria-disabled={page >= pages}>
                <Link href={`/dashboard/settings/audit?page=${page + 1}`} aria-label="Next page" className={page >= pages ? "pointer-events-none opacity-50" : undefined}>
                  Next <ChevronRight />
                </Link>
              </Button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}