import { render, screen, fireEvent } from '@testing-library/react';
import { ThemeProvider } from '../../theme';

jest.mock('next-intl', () => ({ useTranslations: () => (k: string) => k, useLocale: () => 'en' }));

import AuditLogRow from './AuditLogRow';
import type { AuditLogEntry } from '@/services/admin/types';

const ENTRY: AuditLogEntry = {
  id: 1,
  entityType: 'PlatformConfig',
  entityId: 'vat_rate',
  action: 'updated',
  actorUserId: 3,
  occurredAt: '2026-01-01T00:00:00Z',
  changedFields: { Value: { old: '0.09', new: '0.10' } },
};

describe('<AuditLogRow/>', () => {
  const wrap = (ui: React.ReactNode) => render(<ThemeProvider>{ui}</ThemeProvider>);

  it('renders the entity and action', () => {
    wrap(<AuditLogRow entry={ENTRY} />);
    expect(screen.getByText('PlatformConfig #vat_rate')).toBeInTheDocument();
    expect(screen.getByText('updated')).toBeInTheDocument();
  });

  it('reveals the changed-fields diff on expand', () => {
    wrap(<AuditLogRow entry={ENTRY} />);
    // Collapsed diff is not visible; expand by clicking the row header.
    fireEvent.click(screen.getByText('PlatformConfig #vat_rate'));
    expect(screen.getByText('Value')).toBeInTheDocument();
    expect(screen.getByText('0.09')).toBeInTheDocument();
    expect(screen.getByText('0.10')).toBeInTheDocument();
  });
});
