EpicNext-Cms/src/app/admin/logs/audit/audit-table.tsx

"use client";

import { useTranslations } from "next-intl";
import { useState } from "react";
import { DataTable } from "@/components/admin/data-table";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import type { DataTableColumn, PaginatedResult } from "@/types/common";

interface AuditRow {
	id: number;
	username: string;
	action: string;
	target: string;
	targetId: number | null;
	diff: string | null;
	createdAt: string;
}

function DiffCell({ diff }: { diff: string | null }) {
	const t = useTranslations("pages.admin.logs");
	const [open, setOpen] = useState(false);
	if (!diff)
		return <span className="text-muted-foreground">{t("emptyValue")}</span>;

	let parsed: Record<string, { from: unknown; to: unknown }>;
	try {
		parsed = JSON.parse(diff);
	} catch {
		return <span className="text-muted-foreground">{t("emptyValue")}</span>;
	}

	const keys = Object.keys(parsed);
	if (keys.length === 0)
		return <span className="text-muted-foreground">{t("emptyValue")}</span>;

	const summary =
		keys.length === 1
			? `${keys[0]}: ${String(parsed[keys[0]].from ?? "∅")} → ${String(parsed[keys[0]].to ?? "∅")}`
			: t("audit.changesCount", { count: keys.length });

	return (
		<div>
			<Button
				variant="ghost"
				size="sm"
				className="h-auto p-0 text-xs font-normal"
				onClick={() => setOpen(!open)}
			>
				{summary}
			</Button>
			{open && (
				<div className="mt-1 space-y-0.5 text-xs">
					{keys.map((k) => (
						<div key={k} className="flex gap-1">
							<span className="font-medium">{k}:</span>
							<span className="text-[var(--admin-error)] line-through">
								{String(parsed[k].from ?? "∅")}
							</span>
							<span>→</span>
							<span className="text-[var(--admin-success)]">
								{String(parsed[k].to ?? "∅")}
							</span>
						</div>
					))}
				</div>
			)}
		</div>
	);
}

interface AuditTableProps {
	data: PaginatedResult<AuditRow>;
}

export function AuditTable({ data }: AuditTableProps) {
	const t = useTranslations("pages.admin.logs");

	const columns: DataTableColumn<AuditRow>[] = [
		{ key: "id", label: t("colId"), sortable: true },
		{ key: "username", label: t("colUser"), sortable: true },
		{
			key: "action",
			label: t("colAction"),
			sortable: true,
			render: (value) => {
				const v = String(value);
				let variant: "default" | "secondary" | "destructive" = "secondary";
				if (v.includes("create") || v.includes("add")) variant = "default";
				if (v.includes("delete") || v.includes("remove") || v.includes("ban"))
					variant = "destructive";
				return <Badge variant={variant}>{v}</Badge>;
			},
		},
		{ key: "target", label: t("colTarget"), sortable: true },
		{
			key: "targetId",
			label: t("audit.colTargetId"),
			render: (value) => (
				<span>{value != null ? String(value) : t("emptyValue")}</span>
			),
		},
		{
			key: "diff",
			label: t("audit.colDetails"),
			render: (_value, row) => <DiffCell diff={row.diff} />,
		},
		{
			key: "createdAt",
			label: t("audit.colDate"),
			sortable: true,
			render: (value) => (
				<span>{String(value) || t("audit.notAvailable")}</span>
			),
		},
	];

	return (
		<DataTable
			data={data}
			columns={columns}
			searchPlaceholder={t("audit.searchPlaceholder")}
			exportUrl="/api/admin/export?type=audit"
		/>
	);
}