myeasycms-v2/apps/web/app/[locale]/admin/audit/page.tsx

import { getTranslations } from 'next-intl/server';

import { AdminGuard } from '@kit/admin/components/admin-guard';
import { createModuleBuilderApi } from '@kit/module-builder/api';
import { formatDateTime } from '@kit/shared/dates';
import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
import { Badge } from '@kit/ui/badge';
import { Button } from '@kit/ui/button';
import { PageBody, PageHeader } from '@kit/ui/page';

interface SearchParams {
  action?: string;
  table?: string;
  page?: string;
}

interface AdminAuditPageProps {
  searchParams: Promise<SearchParams>;
}

const ACTION_LABELS: Record<string, string> = {
  insert: 'Erstellen',
  update: 'Ändern',
  delete: 'Löschen',
  lock: 'Sperren',
};

const ACTION_COLORS: Record<
  string,
  'default' | 'secondary' | 'destructive' | 'outline'
> = {
  insert: 'default',
  update: 'secondary',
  delete: 'destructive',
  lock: 'outline',
};

async function AuditPage(props: AdminAuditPageProps) {
  const searchParams = await props.searchParams;
  const client = getSupabaseServerAdminClient();
  const api = createModuleBuilderApi(client);
  const t = await getTranslations('cms.audit');

  const page = searchParams.page ? parseInt(searchParams.page, 10) : 1;

  const result = await api.audit.query({
    action: searchParams.action || undefined,
    tableName: searchParams.table || undefined,
    page,
    pageSize: 50,
  });

  const totalPages = Math.ceil(result.total / result.pageSize);

  return (
    <PageBody>
      <PageHeader title={t('title')} description={t('description')} />

      <div className="space-y-4">
        {/* Filters */}
        <AuditFilters
          currentAction={searchParams.action}
          currentTable={searchParams.table}
        />

        {/* Results table */}
        <div className="overflow-x-auto rounded-md border">
          <table className="w-full min-w-[640px] text-sm">
            <thead>
              <tr className="bg-muted/50 border-b">
                <th scope="col" className="p-3 text-left font-medium">
                  {t('timestamp')}
                </th>
                <th scope="col" className="p-3 text-left font-medium">
                  {t('action')}
                </th>
                <th scope="col" className="p-3 text-left font-medium">
                  {t('table')}
                </th>
                <th scope="col" className="p-3 text-left font-medium">
                  Datensatz-ID
                </th>
                <th scope="col" className="p-3 text-left font-medium">
                  Benutzer-ID
                </th>
              </tr>
            </thead>
            <tbody>
              {result.data.length === 0 ? (
                <tr>
                  <td
                    colSpan={5}
                    className="text-muted-foreground p-8 text-center"
                  >
                    Keine Einträge gefunden.
                  </td>
                </tr>
              ) : (
                result.data.map((entry) => (
                  <tr key={entry.id} className="border-b">
                    <td className="p-3 text-xs">
                      {formatDateTime(entry.created_at)}
                    </td>
                    <td className="p-3">
                      <Badge
                        variant={
                          ACTION_COLORS[entry.action as string] ?? 'secondary'
                        }
                      >
                        {ACTION_LABELS[entry.action as string] ??
                          String(entry.action)}
                      </Badge>
                    </td>
                    <td className="p-3 font-mono text-xs">
                      {String(entry.table_name)}
                    </td>
                    <td className="p-3 font-mono text-xs">
                      {String(entry.record_id).slice(0, 8)}...
                    </td>
                    <td className="p-3 font-mono text-xs">
                      {String(entry.user_id).slice(0, 8)}...
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>

        {/* Pagination */}
        {totalPages > 1 && (
          <div className="flex items-center justify-between">
            <p className="text-muted-foreground text-sm">
              Seite {page} von {totalPages} ({result.total} Einträge)
            </p>
            <div className="flex gap-2">
              {page > 1 && (
                <PaginationLink
                  page={page - 1}
                  action={searchParams.action}
                  table={searchParams.table}
                  label={t('paginationPrevious')}
                />
              )}
              {page < totalPages && (
                <PaginationLink
                  page={page + 1}
                  action={searchParams.action}
                  table={searchParams.table}
                  label={t('paginationNext')}
                />
              )}
            </div>
          </div>
        )}
      </div>
    </PageBody>
  );
}

function AuditFilters({
  currentAction,
  currentTable,
}: {
  currentAction?: string;
  currentTable?: string;
}) {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <form className="flex items-center gap-3">
        <select
          name="action"
          defaultValue={currentAction ?? ''}
          className="border-input bg-background flex h-9 rounded-md border px-3 py-1 text-sm shadow-sm"
        >
          <option value="">Alle Aktionen</option>
          <option value="insert">Erstellen</option>
          <option value="update">Ändern</option>
          <option value="delete">Löschen</option>
          <option value="lock">Sperren</option>
        </select>

        <input
          name="table"
          type="text"
          placeholder="Tabelle filtern..."
          defaultValue={currentTable ?? ''}
          className="border-input bg-background flex h-9 w-48 rounded-md border px-3 py-1 text-sm shadow-sm"
        />

        <Button type="submit" variant="outline" size="sm">
          Filtern
        </Button>
      </form>
    </div>
  );
}

function PaginationLink({
  page,
  action,
  table,
  label,
}: {
  page: number;
  action?: string;
  table?: string;
  label: string;
}) {
  const params = new URLSearchParams();
  params.set('page', String(page));
  if (action) params.set('action', action);
  if (table) params.set('table', table);

  return (
    <a href={`?${params.toString()}`}>
      <Button variant="outline" size="sm">
        {label}
      </Button>
    </a>
  );
}

export default AdminGuard(AuditPage);