alpenwerk-hr/app/(app)/audit/page.tsx

import Link from "next/link";
import { Suspense } from "react";
import { AuditFilters } from "@/components/audit/AuditFilters";
import { actionBadgeStyle } from "@/lib/colors";
import { createClient } from "@/lib/supabase/server";

const PAGE_SIZE = 25;

type SearchParams = { q?: string; action?: string; page?: string };

function pageHref(params: SearchParams, page: number): string {
  const sp = new URLSearchParams();
  if (params.q) sp.set("q", params.q);
  if (params.action) sp.set("action", params.action);
  sp.set("page", String(page));
  return `/audit?${sp.toString()}`;
}

function fmtDateTime(iso: string): string {
  return new Intl.DateTimeFormat("de-AT", { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit" }).format(
    new Date(iso)
  );
}

export default async function AuditPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
  const params = await searchParams;
  const supabase = await createClient();

  const page = Math.max(1, Number(params.page ?? "1") || 1);
  const from = (page - 1) * PAGE_SIZE;
  const to = from + PAGE_SIZE - 1;

  let query = supabase
    .from("audit_log")
    .select("id, occurred_at, actor_name, action, target_label, target_employee_id, details", { count: "exact" })
    .order("occurred_at", { ascending: false })
    .range(from, to);

  if (params.action) query = query.eq("action", params.action);
  if (params.q) {
    const q = params.q.trim();
    query = query.or(`target_label.ilike.%${q}%,details.ilike.%${q}%,actor_name.ilike.%${q}%`);
  }

  const { data: entries, count } = await query;
  const totalPages = Math.max(1, Math.ceil((count ?? 0) / PAGE_SIZE));

  return (
    <div className="flex flex-col gap-4">
      <Suspense>
        <AuditFilters />
      </Suspense>
      <p className="text-sm text-ink-muted">{count ?? 0} Einträge</p>

      <div className="overflow-x-auto rounded border border-border bg-white">
        <table className="w-full min-w-[800px] text-sm">
          <thead>
            <tr className="border-b border-border bg-surface text-left text-xs font-semibold uppercase tracking-wide text-ink-muted">
              <th className="px-4 py-3">Zeitpunkt</th>
              <th className="px-4 py-3">Benutzer:in</th>
              <th className="px-4 py-3">Aktion</th>
              <th className="px-4 py-3">Objekt</th>
              <th className="px-4 py-3">Details</th>
            </tr>
          </thead>
          <tbody>
            {(entries ?? []).map((entry) => {
              return (
                <tr key={entry.id} className="border-b border-border last:border-0 hover:bg-surface">
                  <td className="px-4 py-3 text-ink-body">{fmtDateTime(entry.occurred_at)}</td>
                  <td className="px-4 py-3 text-ink-body">{entry.actor_name}</td>
                  <td className="px-4 py-3">
                    <span className={`rounded-full px-2 py-0.5 text-xs font-semibold ${actionBadgeStyle(entry.action)}`}>{entry.action}</span>
                  </td>
                  <td className="px-4 py-3 text-ink">
                    {entry.target_employee_id ? (
                      <Link href={`/employees/${entry.target_employee_id}`} className="hover:text-brand-700 hover:underline">
                        {entry.target_label}
                      </Link>
                    ) : (
                      entry.target_label
                    )}
                  </td>
                  <td className="px-4 py-3 text-ink-muted">{entry.details ?? "–"}</td>
                </tr>
              );
            })}
            {(entries ?? []).length === 0 && (
              <tr>
                <td colSpan={5} className="px-4 py-8 text-center text-sm text-ink-muted">
                  Keine Einträge gefunden.
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>

      {totalPages > 1 && (
        <div className="flex items-center justify-center gap-2 text-sm">
          {Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => (
            <Link
              key={p}
              href={pageHref(params, p)}
              className={`rounded px-3 py-1 ${p === page ? "bg-brand-500 text-white" : "text-ink-body hover:bg-surface"}`}
            >
              {p}
            </Link>
          ))}
        </div>
      )}

      <p className="text-xs text-ink-muted">
        Alle Änderungen an Personal-Stammdaten werden automatisch protokolliert und sind unveränderbar.
      </p>
    </div>
  );
}