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

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

import ConfigRow from './ConfigRow';
import type { PlatformConfig } from '@/services/admin/types';

const CONFIG: PlatformConfig = {
  key: 'vat_rate',
  value: '0.10',
  dataType: 'decimal',
  description: 'VAT on commission',
  updatedAt: '2026-01-01T00:00:00Z',
  updatedBy: 'admin',
};

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

  it('renders the key, value and description', () => {
    wrap(<ConfigRow config={CONFIG} />);
    expect(screen.getByText('vat_rate')).toBeInTheDocument();
    expect(screen.getByText('0.10')).toBeInTheDocument();
    expect(screen.getByText('VAT on commission')).toBeInTheDocument();
  });

  it('shows the edit control only when canEdit and fires onEdit', () => {
    const onEdit = jest.fn();
    const { rerender } = wrap(<ConfigRow config={CONFIG} onEdit={onEdit} />);
    expect(screen.queryByText('cfg_edit')).not.toBeInTheDocument();
    rerender(
      <ThemeProvider>
        <ConfigRow config={CONFIG} canEdit onEdit={onEdit} />
      </ThemeProvider>,
    );
    fireEvent.click(screen.getByText('cfg_edit'));
    expect(onEdit).toHaveBeenCalledWith(CONFIG);
  });

  it('fires onHistory', () => {
    const onHistory = jest.fn();
    wrap(<ConfigRow config={CONFIG} onHistory={onHistory} />);
    fireEvent.click(screen.getByText('cfg_history'));
    expect(onHistory).toHaveBeenCalledWith(CONFIG);
  });
});