import { AdminTable } from '@/components/ui/domain/admin/AdminTable';
import { EmptyState } from '@/components/ui/feedback/EmptyState';
import { Spinner } from '@/components/ui/feedback/Spinner';
import { formatDateTime } from '@/lib/format';
import { Card, SectionTitle } from './VendorDetail.shared';
import type { Locale } from '@/lib/i18n';
import type { AuditEntry } from './VendorDetail.types';

interface VendorDetailAuditSectionProps {
  auditEntries?: AuditEntry[];
  auditLoading: boolean;
  auditError: boolean;
  locale: Locale;
  t: (key: string) => string;
  tAdmin: (key: string) => string;
}

export function VendorDetailAuditSection({
  auditEntries,
  auditLoading,
  auditError,
  locale,
  t,
  tAdmin,
}: VendorDetailAuditSectionProps) {
  return (
    <div>
      <SectionTitle>{tAdmin('audit_log')}</SectionTitle>
      <Card>
        {auditLoading && (
          <div className="flex justify-center py-6">
            <Spinner />
          </div>
        )}
        {auditError && (
          <EmptyState title={t('audit_error') || 'Could not load audit log'} className="py-4" />
        )}
        {!auditLoading && !auditError && (!auditEntries || auditEntries.length === 0) && (
          <EmptyState title={t('audit_empty') || 'No audit entries'} className="py-4" />
        )}
        {!auditLoading && !auditError && auditEntries && auditEntries.length > 0 && (
          <AdminTable
            columns={[
              {
                key: 'createdAt',
                label: t('audit_col_date') || 'Date',
                render: (entry: AuditEntry) => (
                  <span className="text-text-secondary text-xs font-[var(--font-en)] tabular-nums">
                    {formatDateTime(entry.createdAt, locale)}
                  </span>
                ),
              },
              {
                key: 'adminName',
                label: t('audit_col_admin') || 'Admin',
                render: (entry: AuditEntry) => (
                  <span className="text-text-primary text-sm" data-user-displayname>
                    {entry.adminName ?? entry.adminId.slice(0, 8)}
                  </span>
                ),
              },
              {
                key: 'action',
                label: t('audit_col_action') || 'Action',
                render: (entry: AuditEntry) => (
                  <span className="text-text-secondary text-sm font-medium">{entry.action}</span>
                ),
              },
              {
                key: 'note',
                label: t('audit_col_note') || 'Note',
                render: (entry: AuditEntry) => (
                  <span className="text-text-secondary text-sm" data-user-displayname>
                    {entry.note ?? '—'}
                  </span>
                ),
              },
            ]}
            rows={auditEntries}
          />
        )}
      </Card>
    </div>
  );
}