import { getAuditLog } from "@/lib/api/admin";
import { formatDate } from "@/lib/format";
import { FilterSelect } from "@/components/ui/filter-select";
import { Pagination } from "@/components/ui/pagination";
import { cardClasses } from "@/components/ui/styles";
import { cn } from "@/lib/utils";

const ROLE_CONTEXT_LABEL: Record<string, string> = {
  administrator: "Administrator",
  organizer: "Organizer",
};

export default async function AdminAuditLogPage({
  searchParams,
}: {
  searchParams: Promise<{ role_context?: string; page?: string }>;
}) {
  const { role_context, page } = await searchParams;
  const { data: logs, meta } = await getAuditLog({ role_context, page: page ? Number(page) : undefined });

  return (
    <div>
      <h2 className="text-lg font-semibold">Audit Log</h2>

      <form className="mt-4 flex gap-3" method="get">
        <FilterSelect
          name="role_context"
          ariaLabel="Filter role context"
          defaultValue={role_context ?? ""}
          options={[
            { value: "", label: "All Role Contexts" },
            ...Object.entries(ROLE_CONTEXT_LABEL).map(([value, label]) => ({ value, label })),
          ]}
        />
        <button
          type="submit"
          className="rounded-lg bg-kolabora-primary px-4 py-2 text-sm font-medium text-kolabora-neutral-white hover:opacity-90"
        >
          Filter
        </button>
      </form>

      <div className={cn("mt-4 flex flex-col divide-y divide-kolabora-neutral-dark/10", cardClasses())}>
        {logs.length === 0 && (
          <p className="px-4 py-6 text-center text-sm text-kolabora-neutral-dark/70">
            No activity logged yet.
          </p>
        )}
        {logs.map((log) => (
          <div key={log.id} className="flex flex-col gap-1 px-4 py-3">
            <div className="flex items-center justify-between gap-3">
              <span className="min-w-0 truncate font-medium">{log.action}</span>
              <span className="shrink-0 text-xs text-kolabora-neutral-dark/70">{formatDate(log.created_at)}</span>
            </div>
            <p className="text-sm text-kolabora-neutral-dark/70">
              {log.actor ?? "-"} ({ROLE_CONTEXT_LABEL[log.role_context] ?? log.role_context}) &middot;{" "}
              {log.entity_type} #{log.entity_id}
            </p>
            {log.description && (
              <p className="text-sm text-kolabora-neutral-dark/70">{log.description}</p>
            )}
          </div>
        ))}
      </div>

      <Pagination meta={meta} basePath="/admin/audit-log" searchParams={{ role_context }} />
    </div>
  );
}