import { diffPairs } from "@/lib/audit-filter";

/** Renders the before/after values captured by the database audit triggers. */
export function AuditDiff({ metadata }: { metadata: unknown }) {
  const pairs = diffPairs(metadata);
  if (pairs.length === 0) return <span className="text-muted-foreground">—</span>;
  const show = (v: unknown) => (v === null || v === undefined || v === "" ? "—" : String(v));
  return (
    <div className="space-y-1">
      {pairs.map((p) => (
        <div key={p.key} className="grid grid-cols-[7rem_1fr] gap-x-2 text-xs leading-5">
          <span className="truncate capitalize text-muted-foreground">{p.label}</span>
          <span className="flex flex-wrap items-center gap-1">
            {p.before !== undefined ? (
              <span
                className={
                  p.changed
                    ? "rounded bg-destructive/10 px-1 text-destructive line-through"
                    : "text-muted-foreground"
                }
              >
                {show(p.before)}
              </span>
            ) : null}
            {p.before !== undefined && p.after !== undefined && p.changed ? (
              <span className="text-muted-foreground">→</span>
            ) : null}
            {p.after !== undefined && (p.changed || p.before === undefined) ? (
              <span className="rounded bg-emerald-500/10 px-1 font-medium text-emerald-700 dark:text-emerald-400">
                {show(p.after)}
              </span>
            ) : null}
          </span>
        </div>
      ))}
    </div>
  );
}