import React from 'react';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { SettingsCurrenciesPage } from '@/pages/SettingsCurrencies';

const mockCurrencies = [
  { id: 'c1', code: 'EUR', name: 'Euro', symbol: '€', is_default: true },
  { id: 'c2', code: 'USD', name: 'US Dollar', symbol: '$', is_default: false },
];

const apiGetMock = vi.fn();
const apiPostMock = vi.fn();
const apiPatchMock = vi.fn();
const apiDeleteMock = vi.fn();

vi.mock('@/api/client', () => ({
  apiGet: (...args: any[]) => apiGetMock(...args),
  apiPost: (...args: any[]) => apiPostMock(...args),
  apiPatch: (...args: any[]) => apiPatchMock(...args),
  apiDelete: (...args: any[]) => apiDeleteMock(...args),
}));

beforeEach(() => {
  vi.clearAllMocks();
  apiGetMock.mockResolvedValue({ items: mockCurrencies, total: 2 });
  apiPostMock.mockResolvedValue({ id: 'c3', code: 'GBP', name: 'British Pound', symbol: '£', is_default: false });
  apiPatchMock.mockResolvedValue({});
  apiDeleteMock.mockResolvedValue({});
});

describe('SettingsCurrenciesPage', () => {
  it('renders currencies page', async () => {
    render(<SettingsCurrenciesPage />);
    await waitFor(() => {
      expect(screen.getByTestId('settings-currencies')).toBeInTheDocument();
    });
  });

  it('renders add currency button', async () => {
    render(<SettingsCurrenciesPage />);
    await waitFor(() => {
      expect(screen.getByTestId('settings-currencies')).toBeInTheDocument();
    });
    expect(screen.getByText(/währung hinzufügen|add currency/i)).toBeInTheDocument();
  });

  it('renders currency list from API', async () => {
    render(<SettingsCurrenciesPage />);
    await waitFor(() => {
      expect(screen.getByText('EUR')).toBeInTheDocument();
      expect(screen.getByText('USD')).toBeInTheDocument();
    });
  });

  it('shows form when add button clicked', async () => {
    render(<SettingsCurrenciesPage />);
    await waitFor(() => {
      expect(screen.getByTestId('settings-currencies')).toBeInTheDocument();
    });
    fireEvent.click(screen.getByText(/währung hinzufügen|add currency/i));
    await waitFor(() => {
      expect(screen.getByRole('button', { name: /speichern|^save$/i })).toBeInTheDocument();
    });
  });

  it('displays error when API fails', async () => {
    apiGetMock.mockRejectedValueOnce(new Error('Network error'));
    render(<SettingsCurrenciesPage />);
    await waitFor(() => {
      expect(screen.getByText('Network error')).toBeInTheDocument();
    });
  });

  it('calls apiPost on valid submit', async () => {
    render(<SettingsCurrenciesPage />);
    await waitFor(() => {
      expect(screen.getByTestId('settings-currencies')).toBeInTheDocument();
    });
    fireEvent.click(screen.getByText(/währung hinzufügen|add currency/i));
    await waitFor(() => {
      expect(screen.getByRole('button', { name: /speichern|^save$/i })).toBeInTheDocument();
    });
    const inputs = screen.getAllByRole('textbox');
    fireEvent.change(inputs[0], { target: { value: 'GBP' } });
    fireEvent.change(inputs[1], { target: { value: '£' } });
    fireEvent.change(inputs[2], { target: { value: 'British Pound' } });
    fireEvent.click(screen.getByRole('button', { name: /speichern|^save$/i }));
    await waitFor(() => {
      expect(apiPostMock).toHaveBeenCalledWith('/currencies', expect.objectContaining({ code: 'GBP' }));
    });
  });
});