siftlode/frontend/src/components/AuditLog.tsx

import { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Trash2 } from "lucide-react";
import { api } from "../lib/api";
import { notify } from "../lib/notifications";
import { LS } from "../lib/storage";
import { Section } from "./ui/form";
import { useConfirm } from "./ConfirmProvider";
import DataTable from "./DataTable";
import { auditColumns } from "./auditColumns";

// Admin-only audit trail: an append-only who/what/when log of admin actions + scheduler run
// summaries (never per-row). Read-only apart from Clear. Client-side sort/filter/paginate via
// DataTable; the API returns the most recent window (capped) — the log stays small by design.
export default function AuditLog() {
  const { t } = useTranslation();
  const qc = useQueryClient();
  const confirm = useConfirm();
  const q = useQuery({ queryKey: ["admin-audit"], queryFn: () => api.adminAudit() });
  const data = q.data;
  const rows = useMemo(() => data?.items ?? [], [data]);

  const actionOptions = useMemo(() => {
    const present = Array.from(new Set(rows.map((r) => r.action))).sort();
    return present.map((a) => ({ value: a, label: t(`auditActions.${a}`, a) }));
  }, [rows, t]);
  const columns = useMemo(() => auditColumns(t, actionOptions), [t, actionOptions]);

  const clear = useMutation({
    mutationFn: () => api.clearAudit(),
    onSuccess: (r) => {
      qc.invalidateQueries({ queryKey: ["admin-audit"] });
      notify({ level: "success", message: t("audit.cleared", { count: r.cleared }) });
    },
    onError: () => notify({ level: "error", message: t("audit.clearFailed") }),
  });
  const onClear = async () => {
    if (
      await confirm({
        title: t("audit.clearTitle"),
        message: t("audit.clearConfirm"),
        confirmLabel: t("audit.clear"),
        danger: true,
      })
    )
      clear.mutate();
  };

  const truncated = !!data && data.total > data.returned;

  return (
    <div className="p-4 max-w-5xl w-full mx-auto">
      <Section card title={t("audit.title")}>
        <p className="text-xs text-muted leading-relaxed mb-3">{t("audit.intro")}</p>
        {q.isLoading ? (
          <div className="text-muted py-8">{t("common.loading")}</div>
        ) : rows.length === 0 ? (
          <p className="text-sm text-muted">{t("audit.empty")}</p>
        ) : (
          <>
            <DataTable
              rows={rows}
              columns={columns}
              rowKey={(r) => String(r.id)}
              persistKey={LS.auditTable}
              controlsPosition="top"
              controlsLeading={
                <button
                  onClick={onClear}
                  disabled={clear.isPending}
                  className="inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-lg border border-border text-muted hover:text-red-400 disabled:opacity-50 transition"
                >
                  <Trash2 className="w-3.5 h-3.5" />
                  {t("audit.clear")}
                </button>
              }
              emptyText={t("audit.empty")}
            />
            {truncated && (
              <p className="text-[11px] text-muted mt-2">
                {t("audit.truncated", { returned: data!.returned, total: data!.total })}
              </p>
            )}
          </>
        )}
      </Section>
    </div>
  );
}