'use client'

import { useQuery } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import { api, type PaginatedResponse, type AuditLog } from '@/lib/api'
import { DataTable } from '@/components/DataTable'
import { Badge } from '@/components/ui/Badge'
import { formatDate } from '@/lib/utils'

export function AuditLogsPage() {
  const { t } = useTranslation()

  const { data, isLoading } = useQuery({
    queryKey: ['audit-logs'],
    queryFn: () => api.get<PaginatedResponse<AuditLog>>('/audit-logs?per_page=50'),
  })

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

  return (
    <div className="space-y-6">
      <h1 className="premium-heading animate-fade-in-up text-2xl font-bold">{t('nav.audit')}</h1>

      <div className="animate-fade-in-up stagger-1">
      <DataTable
        data={logs}
        loading={isLoading}
        emptyMessage={t('common.noResults')}
        columns={[
          {
            key: 'created_at',
            header: t('audit.date'),
            render: (r) => <span>{formatDate(r.created_at)}</span>,
          },
          {
            key: 'user',
            header: t('audit.user'),
            render: (r) => <span>{r.user?.name ?? t('common.system')}</span>,
          },
          {
            key: 'action',
            header: t('audit.action'),
            render: (r) => <Badge>{r.action}</Badge>,
          },
          {
            key: 'auditable_type',
            header: t('audit.entity'),
            render: (r) => <span>{r.auditable_type?.split('\\').pop() ?? '—'}</span>,
          },
          {
            key: 'auditable_id',
            header: t('audit.id'),
            render: (r) => <span>{r.auditable_id ?? '—'}</span>,
          },
        ]}
      />
      </div>
    </div>
  )
}