import { useQuery } from '@tanstack/react-query';
import { api } from '@/lib/api';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';

interface AuditLog {
  id: string;
  action: string;
  userName: string;
  ipAddress: string | null;
  metadata: Record<string, unknown>;
  createdAt: string;
}

interface PaginatedResponse<T> {
  data: T[];
  meta: { total: number };
}

export function AdminAuditLogsPage() {
  const { data } = useQuery({
    queryKey: ['admin-audit-logs'],
    queryFn: () => api.get<PaginatedResponse<AuditLog>>('/admin/audit-logs'),
  });

  const logs = data?.data ?? [];

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold">Audit Logs</h1>
      <Card>
        <CardContent className="p-0">
          <div className="divide-y">
            {logs.map((log) => (
              <div key={log.id} className="flex items-center justify-between px-4 py-3">
                <div className="flex items-center gap-3">
                  <Badge variant="outline">{log.action}</Badge>
                  <span className="text-sm">
                    <span className="font-medium">{log.userName}</span>
                    {log.ipAddress && (
                      <span className="text-muted-foreground"> from {log.ipAddress}</span>
                    )}
                  </span>
                </div>
                <span className="text-xs text-muted-foreground">
                  {new Date(log.createdAt).toLocaleString()}
                </span>
              </div>
            ))}
            {logs.length === 0 && (
              <div className="py-12 text-center text-muted-foreground">No audit logs</div>
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}