pn-new-crm/src/components/admin/audit/audit-log-list.tsx

'use client';

import { useEffect, useState, useCallback, useMemo } from 'react';
import { type ColumnDef } from '@tanstack/react-table';
import { formatDistanceToNow } from 'date-fns';
import { Search, X } from 'lucide-react';
import { toast } from 'sonner';

import { DataTable } from '@/components/shared/data-table';
import { PageHeader } from '@/components/shared/page-header';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { apiFetch } from '@/lib/api/client';
import { AuditLogCard } from './audit-log-card';

interface AuditEntry {
  id: string;
  userId: string | null;
  action: string;
  entityType: string;
  entityId: string | null;
  fieldChanged: string | null;
  oldValue: Record<string, unknown> | null;
  newValue: Record<string, unknown> | null;
  metadata: Record<string, unknown> | null;
  ipAddress: string | null;
  userAgent: string | null;
  severity: 'info' | 'warning' | 'error' | 'critical';
  source: 'user' | 'system' | 'auth' | 'webhook' | 'cron' | 'job';
  createdAt: string;
  actor: { id: string; email: string; name: string } | null;
}

interface AuditResponse {
  data: AuditEntry[];
  pagination: { nextCursor: { createdAt: string; id: string } | null };
}

const ACTION_COLORS: Record<string, string> = {
  create: 'bg-green-600',
  update: 'bg-blue-500',
  delete: 'bg-red-600',
  archive: 'bg-orange-500',
  restore: 'bg-teal-500',
  login: 'bg-slate-500',
  logout: 'bg-slate-400',
  permission_denied: 'bg-red-800',
  merge: 'bg-purple-500',
  revert: 'bg-amber-500',
  hard_delete: 'bg-red-900',
  request_hard_delete_code: 'bg-orange-700',
  send: 'bg-indigo-500',
  view: 'bg-gray-400',
  webhook_delivered: 'bg-emerald-500',
  webhook_failed: 'bg-amber-600',
  webhook_dead_letter: 'bg-red-700',
  webhook_retried: 'bg-indigo-600',
  job_failed: 'bg-rose-700',
  cron_run: 'bg-sky-500',
};

const SEVERITY_BADGE: Record<string, string> = {
  info: 'bg-slate-200 text-slate-800',
  warning: 'bg-amber-200 text-amber-900',
  error: 'bg-red-200 text-red-900',
  critical: 'bg-red-600 text-white',
};

const SOURCE_LABEL: Record<string, string> = {
  user: 'User',
  system: 'System',
  auth: 'Auth',
  webhook: 'Webhook',
  cron: 'Cron',
  job: 'Job',
};

const ENTITY_TYPES = [
  'client',
  'interest',
  'berth',
  'document',
  'expense',
  'invoice',
  'reminder',
  'user',
  'role',
  'port',
  'setting',
  'tag',
  'webhook',
];

function useDebounced<T>(value: T, ms = 300): T {
  const [v, setV] = useState(value);
  useEffect(() => {
    const t = setTimeout(() => setV(value), ms);
    return () => clearTimeout(t);
  }, [value, ms]);
  return v;
}

export function AuditLogList() {
  const [entries, setEntries] = useState<AuditEntry[]>([]);
  const [nextCursor, setNextCursor] = useState<{
    createdAt: string;
    id: string;
  } | null>(null);
  const [loading, setLoading] = useState(true);
  const [loadingMore, setLoadingMore] = useState(false);
  const [loadError, setLoadError] = useState<string | null>(null);

  // Filter state - debounce text inputs.
  const [search, setSearch] = useState('');
  const [entityType, setEntityType] = useState<string>('all');
  const [action, setAction] = useState<string>('all');
  const [severity, setSeverity] = useState<string>('all');
  const [source, setSource] = useState<string>('all');
  const [userId, setUserId] = useState('');
  const [dateFrom, setDateFrom] = useState('');
  const [dateTo, setDateTo] = useState('');

  const debouncedSearch = useDebounced(search);
  const debouncedUserId = useDebounced(userId);

  const queryString = useMemo(() => {
    const params = new URLSearchParams({ limit: '50' });
    if (entityType !== 'all') params.set('entityType', entityType);
    if (action !== 'all') params.set('action', action);
    if (severity !== 'all') params.set('severity', severity);
    if (source !== 'all') params.set('source', source);
    if (debouncedSearch) params.set('search', debouncedSearch);
    if (debouncedUserId) params.set('userId', debouncedUserId);
    // Skip the date filters when From > To — the inline warning below
    // tells the user to fix it; we don't want to fire a request with a
    // useless empty range either.
    const datesValid = !(dateFrom && dateTo && dateFrom > dateTo);
    if (datesValid && dateFrom) params.set('dateFrom', new Date(dateFrom).toISOString());
    if (datesValid && dateTo) {
      const end = new Date(dateTo);
      end.setHours(23, 59, 59, 999);
      params.set('dateTo', end.toISOString());
    }
    return params.toString();
  }, [entityType, action, severity, source, debouncedSearch, debouncedUserId, dateFrom, dateTo]);

  const fetchFirstPage = useCallback(async () => {
    setLoading(true);
    setLoadError(null);
    try {
      const res = await apiFetch<AuditResponse>(`/api/v1/admin/audit?${queryString}`);
      setEntries(res.data);
      setNextCursor(res.pagination.nextCursor);
    } catch (err) {
      const msg = err instanceof Error ? err.message : 'Failed to load audit log';
      setLoadError(msg);
      toast.error(msg);
    } finally {
      setLoading(false);
    }
  }, [queryString]);

  const loadMore = useCallback(async () => {
    if (!nextCursor) return;
    setLoadingMore(true);
    try {
      const params = new URLSearchParams(queryString);
      params.set('cursorAt', nextCursor.createdAt);
      params.set('cursorId', nextCursor.id);
      const res = await apiFetch<AuditResponse>(`/api/v1/admin/audit?${params}`);
      setEntries((prev) => [...prev, ...res.data]);
      setNextCursor(res.pagination.nextCursor);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to load more audit entries');
    } finally {
      setLoadingMore(false);
    }
  }, [queryString, nextCursor]);

  useEffect(() => {
    // Refetch on filter change. Migrating this list to useInfiniteQuery
    // would be the proper fix but is deferred — the fetch-on-effect
    // pattern here is functionally correct and gated by the queryString
    // memo so it only fires when filters actually change.
    // eslint-disable-next-line react-hooks/set-state-in-effect
    void fetchFirstPage();
  }, [fetchFirstPage]);

  function clearFilters() {
    setSearch('');
    setEntityType('all');
    setAction('all');
    setSeverity('all');
    setSource('all');
    setUserId('');
    setDateFrom('');
    setDateTo('');
  }

  const hasActiveFilter =
    Boolean(search) ||
    entityType !== 'all' ||
    action !== 'all' ||
    severity !== 'all' ||
    source !== 'all' ||
    Boolean(userId) ||
    Boolean(dateFrom) ||
    Boolean(dateTo);

  const dateRangeInvalid = Boolean(dateFrom && dateTo && dateFrom > dateTo);

  const columns: ColumnDef<AuditEntry, unknown>[] = [
    {
      accessorKey: 'createdAt',
      header: 'Time',
      cell: ({ row }) => (
        <div className="text-sm">
          <div>{new Date(row.original.createdAt).toLocaleString()}</div>
          <div className="text-xs text-muted-foreground">
            {formatDistanceToNow(new Date(row.original.createdAt), { addSuffix: true })}
          </div>
        </div>
      ),
      size: 180,
    },
    {
      accessorKey: 'action',
      header: 'Action',
      cell: ({ row }) => {
        const verbLabel = row.original.action.replace(/_/g, ' ');
        const entityLabel = row.original.entityType.replace(/_/g, ' ');
        return (
          <div className="flex flex-col gap-1">
            <div className="flex items-center gap-1.5">
              <Badge
                className={`${ACTION_COLORS[row.original.action] ?? 'bg-gray-500'} text-white text-xs`}
              >
                {verbLabel}
              </Badge>
              {row.original.severity !== 'info' && (
                <Badge
                  className={`${SEVERITY_BADGE[row.original.severity] ?? ''} text-[10px] px-1.5 py-0 uppercase`}
                  variant="outline"
                >
                  {row.original.severity}
                </Badge>
              )}
            </div>
            <span className="text-xs text-muted-foreground capitalize">{entityLabel}</span>
          </div>
        );
      },
      size: 180,
    },
    {
      accessorKey: 'source',
      header: 'Source',
      cell: ({ row }) => (
        <span className="text-xs text-muted-foreground">
          {SOURCE_LABEL[row.original.source] ?? row.original.source}
        </span>
      ),
      size: 80,
    },
    {
      accessorKey: 'entityType',
      header: 'Entity',
      cell: ({ row }) => (
        <div>
          <span className="font-medium capitalize">{row.original.entityType}</span>
          {row.original.entityId ? (
            <code className="ml-2 text-xs text-muted-foreground">
              {row.original.entityId.slice(0, 8)}…
            </code>
          ) : null}
        </div>
      ),
    },
    {
      id: 'changes',
      header: 'Changes',
      cell: ({ row }) => {
        const { newValue, fieldChanged } = row.original;
        if (fieldChanged) return <span className="text-sm">{fieldChanged}</span>;
        if (newValue) {
          const keys = Object.keys(newValue);
          return (
            <span className="text-xs text-muted-foreground">
              {keys.slice(0, 3).join(', ')}
              {keys.length > 3 ? ` +${keys.length - 3} more` : ''}
            </span>
          );
        }
        return <span className="text-xs text-muted-foreground">-</span>;
      },
    },
    {
      id: 'actor',
      header: 'Actor',
      cell: ({ row }) => {
        const { actor, userId: rawId } = row.original;
        if (actor) {
          return (
            <div className="text-sm">
              <div className="font-medium">{actor.name}</div>
              <div className="text-xs text-muted-foreground">{actor.email}</div>
            </div>
          );
        }
        if (rawId) {
          return <code className="text-xs">{rawId.slice(0, 8)}…</code>;
        }
        return <span className="text-xs text-muted-foreground">system</span>;
      },
      size: 180,
    },
    {
      id: 'ip',
      header: 'IP',
      cell: ({ row }) =>
        row.original.ipAddress ? (
          <code className="text-xs text-muted-foreground">{row.original.ipAddress}</code>
        ) : (
          <span className="text-xs text-muted-foreground">—</span>
        ),
      size: 130,
    },
  ];

  return (
    <div>
      <PageHeader
        title="Audit Log"
        eyebrow="Admin"
        description="Every state change in this port - fully searchable."
        variant="gradient"
      />

      <div className="mt-4 flex flex-wrap items-end gap-3">
        <div className="space-y-1.5">
          <Label htmlFor="audit-search" className="text-xs">
            Search
          </Label>
          <div className="relative w-72">
            <Search
              className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground"
              aria-hidden
            />
            <Input
              id="audit-search"
              className="pl-9 h-9"
              placeholder="entity id, action, vendor…"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              data-testid="audit-search"
            />
          </div>
        </div>

        <div className="space-y-1.5">
          <Label className="text-xs">Entity</Label>
          <Select value={entityType} onValueChange={setEntityType}>
            <SelectTrigger className="w-36" data-testid="audit-entity">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All entities</SelectItem>
              {ENTITY_TYPES.map((t) => (
                <SelectItem key={t} value={t}>
                  {t.charAt(0).toUpperCase() + t.slice(1)}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        <div className="space-y-1.5">
          <Label className="text-xs">Action</Label>
          <Select value={action} onValueChange={setAction}>
            <SelectTrigger className="w-44" data-testid="audit-action">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All actions</SelectItem>
              <SelectItem value="create">Create</SelectItem>
              <SelectItem value="update">Update</SelectItem>
              <SelectItem value="delete">Delete</SelectItem>
              <SelectItem value="archive">Archive</SelectItem>
              <SelectItem value="restore">Restore</SelectItem>
              <SelectItem value="merge">Merge</SelectItem>
              <SelectItem value="revert">Revert</SelectItem>
              <SelectItem value="login">Login</SelectItem>
              <SelectItem value="logout">Logout</SelectItem>
              <SelectItem value="permission_denied">Permission denied</SelectItem>
              <SelectItem value="hard_delete">Hard delete</SelectItem>
              <SelectItem value="request_hard_delete_code">Hard-delete code req</SelectItem>
              <SelectItem value="send">Send</SelectItem>
              <SelectItem value="view">View</SelectItem>
              <SelectItem value="webhook_delivered">Webhook delivered</SelectItem>
              <SelectItem value="webhook_failed">Webhook failed</SelectItem>
              <SelectItem value="webhook_dead_letter">Webhook DLQ</SelectItem>
              <SelectItem value="webhook_retried">Webhook retried</SelectItem>
              <SelectItem value="job_failed">Job failed</SelectItem>
              <SelectItem value="cron_run">Cron run</SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div className="space-y-1.5">
          <Label className="text-xs">Severity</Label>
          <Select value={severity} onValueChange={setSeverity}>
            <SelectTrigger className="w-32" data-testid="audit-severity">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All severities</SelectItem>
              <SelectItem value="info">Info</SelectItem>
              <SelectItem value="warning">Warning</SelectItem>
              <SelectItem value="error">Error</SelectItem>
              <SelectItem value="critical">Critical</SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div className="space-y-1.5">
          <Label className="text-xs">Source</Label>
          <Select value={source} onValueChange={setSource}>
            <SelectTrigger className="w-32" data-testid="audit-source">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All sources</SelectItem>
              <SelectItem value="user">User</SelectItem>
              <SelectItem value="auth">Auth</SelectItem>
              <SelectItem value="system">System</SelectItem>
              <SelectItem value="webhook">Webhook</SelectItem>
              <SelectItem value="cron">Cron</SelectItem>
              <SelectItem value="job">Job</SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div className="space-y-1.5">
          <Label htmlFor="audit-user" className="text-xs">
            User id
          </Label>
          <Input
            id="audit-user"
            className="w-44 h-9"
            placeholder="exact user id"
            value={userId}
            onChange={(e) => setUserId(e.target.value)}
          />
        </div>

        <div className="space-y-1.5">
          <Label htmlFor="audit-from" className="text-xs">
            From
          </Label>
          <Input
            id="audit-from"
            type="date"
            className="w-44 h-9"
            value={dateFrom}
            onChange={(e) => setDateFrom(e.target.value)}
          />
        </div>

        <div className="space-y-1.5">
          <Label htmlFor="audit-to" className="text-xs">
            To
          </Label>
          <Input
            id="audit-to"
            type="date"
            className="w-44 h-9"
            value={dateTo}
            onChange={(e) => setDateTo(e.target.value)}
          />
        </div>

        {hasActiveFilter ? (
          <Button variant="ghost" size="sm" onClick={clearFilters} className="ml-auto">
            <X className="mr-1.5 h-3 w-3" />
            Clear
          </Button>
        ) : null}
      </div>

      {dateRangeInvalid && (
        <p className="mt-2 text-xs text-destructive">
          From date must be on or before To date — date filter ignored.
        </p>
      )}

      {loadError && !loading && entries.length === 0 ? (
        <div className="mt-4 rounded-md border border-destructive/30 bg-destructive/5 p-4 text-sm space-y-2">
          <p className="text-destructive">Couldn&rsquo;t load audit log: {loadError}</p>
          <Button size="sm" variant="outline" onClick={() => void fetchFirstPage()}>
            Retry
          </Button>
        </div>
      ) : (
        <div className="mt-4">
          <DataTable
            columns={columns}
            data={entries}
            isLoading={loading}
            getRowId={(row) => row.id}
            cardRender={(row) => <AuditLogCard entry={row.original} />}
            emptyState={
              <div className="text-center py-8">
                <p className="text-muted-foreground">No audit log entries found.</p>
              </div>
            }
          />
        </div>
      )}

      {nextCursor ? (
        <div className="mt-4 flex justify-center">
          <Button
            variant="outline"
            size="sm"
            disabled={loadingMore}
            onClick={() => void loadMore()}
            data-testid="audit-load-more"
          >
            {loadingMore ? 'Loading…' : 'Load more'}
          </Button>
        </div>
      ) : null}
    </div>
  );
}