Containr/app/frontend/src/features/audit/pages/AuditLogsPage.tsx

import { useDeferredValue, useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { listAuditLogs } from '@/lib/api-client';
import { useDemoMode } from '@/lib/demo-mode';
import { type FilterConfig } from '@/lib/dynamic-filter';
import { useDynamicFilter } from '@/lib/use-dynamic-filter';
import { formatDate, formatRelative } from '@/lib/time';
import { DemoRestricted, FilterBar } from '@/shared/components';
import { ScrollText, ChevronLeft, ChevronRight, Loader2 } from 'lucide-react';

const PAGE_SIZE = 50;

const rangeOptions = [
  { value: '', label: 'All time' },
  { value: '24h', label: 'Last 24 hours', ms: 24 * 60 * 60 * 1000 },
  { value: '7d', label: 'Last 7 days', ms: 7 * 24 * 60 * 60 * 1000 },
  { value: '30d', label: 'Last 30 days', ms: 30 * 24 * 60 * 60 * 1000 },
] as const;

// Server-backed filters — the engine runs over empty data; values map to
// API params. URL state makes filtered views shareable.
const AUDIT_SCHEMA: FilterConfig<unknown>[] = [
  { key: 'resource', label: 'Resource', type: 'search' },
  { key: 'action', label: 'Action', type: 'search' },
  { key: 'actor', label: 'Actor', type: 'search' },
  {
    key: 'range', label: 'Time', type: 'select',
    options: rangeOptions.filter((o) => o.value !== '').map((o) => ({ value: o.value, label: o.label })),
  },
];

export function AuditLogsPage() {
  const isDemoMode = useDemoMode();
  const filter = useDynamicFilter<unknown>({ data: [], schema: AUDIT_SCHEMA });
  const [page, setPage] = useState(1);
  // Back to page 1 whenever the filter set changes.
  const filtersJson = JSON.stringify(filter.filters);
  const [prevFiltersJson, setPrevFiltersJson] = useState(filtersJson);
  if (prevFiltersJson !== filtersJson) {
    setPrevFiltersJson(filtersJson);
    setPage(1);
  }

  const deferredResource = useDeferredValue(String(filter.filters.resource ?? ''));
  const deferredAction = useDeferredValue(String(filter.filters.action ?? ''));
  const deferredActor = useDeferredValue(String(filter.filters.actor ?? ''));
  const range = filter.filters.range === 'all' ? '' : String(filter.filters.range ?? '');

  const filters = {
    resource: deferredResource.trim() || undefined,
    action: deferredAction.trim() || undefined,
    actor: deferredActor.trim() || undefined,
    page,
    limit: PAGE_SIZE,
  };

  const logsQuery = useQuery({
    queryKey: ['audit-logs', filters, range],
    queryFn: () => {
      const option = rangeOptions.find((o) => o.value === range);
      const since = option && 'ms' in option ? new Date(Date.now() - option.ms).toISOString() : undefined;
      return listAuditLogs({ ...filters, since });
    },
    enabled: !isDemoMode,
  });

  if (isDemoMode) {
    return <DemoRestricted feature="Audit logs" />;
  }

  const logs = logsQuery.data ?? [];
  const hasNext = logs.length === PAGE_SIZE;
  const hasFilters = filter.activeCount > 0;

  return (
    <div className="min-h-screen">
      <div className="border-b border-[var(--border-subtle)]">
        <div className="w-full px-8 py-5">
          <h1 className="v-title">
            Audit Logs<span className="v-cursor">_</span>
          </h1>
          <p className="v-mono mt-1.5 text-[11px] text-[var(--text-tertiary)]">
            Every authenticated action recorded by the platform
          </p>
        </div>
      </div>

      <div className="w-full px-8 py-6">
        <section className="panel p-6">
          <FilterBar {...filter} />

          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-[var(--border-subtle)] text-left">
                  <th className="px-3 py-2.5 font-medium uppercase tracking-wider text-xs text-[var(--text-muted)]">Time</th>
                  <th className="px-3 py-2.5 font-medium uppercase tracking-wider text-xs text-[var(--text-muted)]">Actor</th>
                  <th className="px-3 py-2.5 font-medium uppercase tracking-wider text-xs text-[var(--text-muted)]">Resource</th>
                  <th className="px-3 py-2.5 font-medium uppercase tracking-wider text-xs text-[var(--text-muted)]">Action</th>
                  <th className="px-3 py-2.5 font-medium uppercase tracking-wider text-xs text-[var(--text-muted)]">Resource ID</th>
                  <th className="px-3 py-2.5 font-medium uppercase tracking-wider text-xs text-[var(--text-muted)]">IP</th>
                  <th className="px-3 py-2.5 font-medium uppercase tracking-wider text-xs text-[var(--text-muted)]">Details</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-[var(--border-subtle)]">
                {logsQuery.isLoading ? (
                  <tr>
                    <td colSpan={7} className="px-4 py-10 text-center text-[var(--text-muted)]">
                      <Loader2 size={18} className="animate-spin inline-block" />
                    </td>
                  </tr>
                ) : logsQuery.isError ? (
                  <tr>
                    <td colSpan={7} className="px-4 py-10 text-center text-[var(--error)]">
                      Failed to load audit logs.
                    </td>
                  </tr>
                ) : logs.length === 0 ? (
                  <tr>
                    <td colSpan={7} className="px-4 py-10 text-center">
                      <ScrollText size={20} className="inline-block mb-2 text-[var(--text-muted)]" />
                      <p className="text-[var(--text-secondary)]">No audit events{hasFilters ? ' match these filters' : ' recorded yet'}.</p>
                    </td>
                  </tr>
                ) : (
                  logs.map((log) => (
                    <tr key={log.id} className="hover:bg-[var(--surface-muted)]/50 transition-colors">
                      <td className="px-3 py-2.5 whitespace-nowrap text-[var(--text-tertiary)]" title={log.createdAt ? formatDate(log.createdAt) : undefined}>
                        {log.createdAt ? formatRelative(log.createdAt) : '—'}
                      </td>
                      <td className="px-3 py-2.5 text-[var(--text-primary)]">
                        {log.userEmail || (log.userId ? log.userId.slice(0, 8) : 'system')}
                      </td>
                      <td className="px-3 py-2.5 mono text-[var(--text-secondary)]">{log.resource}</td>
                      <td className="px-3 py-2.5">
                        <span className="px-2 py-0.5 rounded-[var(--radius-sm)] bg-[var(--accent-primary-soft)] text-xs font-medium text-[var(--accent-primary)]">
                          {log.action}
                        </span>
                      </td>
                      <td className="px-3 py-2.5 mono text-xs text-[var(--text-tertiary)] max-w-[140px] truncate" title={log.resourceId}>
                        {log.resourceId || '—'}
                      </td>
                      <td className="px-3 py-2.5 mono text-xs text-[var(--text-tertiary)]">{log.ipAddress || '—'}</td>
                      <td className="px-3 py-2.5 mono text-xs text-[var(--text-tertiary)] max-w-[220px] truncate" title={log.details}>
                        {log.details && log.details !== '{}' ? log.details : '—'}
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>

          <div className="mt-4 flex items-center justify-between">
            <p className="text-xs text-[var(--text-muted)]">
              Page {page}{logs.length > 0 ? ` — ${logs.length} entries` : ''}
            </p>
            <div className="flex items-center gap-2">
              <button
                onClick={() => setPage((p) => Math.max(1, p - 1))}
                disabled={page <= 1}
                className="flex items-center gap-1 px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium text-[var(--text-secondary)] hover:border-[var(--border-default)] disabled:opacity-40 transition-colors"
              >
                <ChevronLeft size={12} />
                Prev
              </button>
              <button
                onClick={() => setPage((p) => p + 1)}
                disabled={!hasNext}
                className="flex items-center gap-1 px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium text-[var(--text-secondary)] hover:border-[var(--border-default)] disabled:opacity-40 transition-colors"
              >
                Next
                <ChevronRight size={12} />
              </button>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}