import { describe, it, expect, beforeEach, vi } from 'vitest';
import { screen, fireEvent, within } from '@testing-library/react';
import { renderWithProviders } from '../test/utils';

vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn() } }));
vi.mock('../lib/api', () => ({
  api: { get: vi.fn(), post: vi.fn(), patch: vi.fn(), put: vi.fn(), delete: vi.fn() },
  ApiError: class extends Error {},
}));

import { api } from '../lib/api';
import MyFinancialPage from './MyFinancialPage';

const get = api.get as ReturnType<typeof vi.fn>;

const bankRow = {
  uuid: 'bank-1', bank_name: 'ملی', card_number: '6037991234567890',
  account_number: '0101234567890', shaba_number: null, is_active: true, created_at: 1,
};
const posRow = {
  uuid: 'pos-1', bank_name: 'ملت', serial_number: 'SN-98765',
  terminal_number: '123456', account_number: null, is_active: false, created_at: 1,
};

function mockData({ banks = [bankRow], pos = [posRow] } = {}) {
  get.mockImplementation((url: string) => {
    if (url.includes('/bank-accounts')) return Promise.resolve({ success: true, data: banks });
    if (url.includes('/pos')) return Promise.resolve({ success: true, data: pos });
    return Promise.resolve({ success: true, data: [] });
  });
}

beforeEach(() => {
  get.mockReset();
  mockData();
});

describe('MyFinancialPage — payment methods', () => {
  it('renders the settings shell and the payment management header', async () => {
    renderWithProviders(<MyFinancialPage />, { route: '/admin/my-financial' });
    expect(await screen.findByText('خرید اشتراک')).toBeInTheDocument();       // settings sub-nav
    expect(screen.getByText('مدیریت پرداخت‌ها')).toBeInTheDocument();          // page header
    expect(screen.getByRole('tab', { name: 'حساب بانکی' })).toBeInTheDocument();
    expect(screen.getByRole('tab', { name: 'کارت خوان' })).toBeInTheDocument();
  });

  it('shows bank accounts by default', async () => {
    renderWithProviders(<MyFinancialPage />, { route: '/admin/my-financial' });
    expect(await screen.findByText('0101234567890')).toBeInTheDocument();
    expect(screen.getByText('6037991234567890')).toBeInTheDocument();
    expect(screen.getByText('مدیریت و اضافه کردن حساب های بانکی کلینیک')).toBeInTheDocument();
  });

  it('switches to the POS tab and lists devices', async () => {
    renderWithProviders(<MyFinancialPage />, { route: '/admin/my-financial' });
    await screen.findByText('0101234567890');

    fireEvent.click(screen.getByRole('tab', { name: 'کارت خوان' }));

    expect(await screen.findByText('SN-98765')).toBeInTheDocument();
    expect(screen.getByText('123456')).toBeInTheDocument();
    expect(screen.getByText('مدیریت و اضافه کردن دستگاه های کارت خوان موجود')).toBeInTheDocument();
  });

  it('renders an empty state when there are no bank accounts', async () => {
    mockData({ banks: [] });
    renderWithProviders(<MyFinancialPage />, { route: '/admin/my-financial' });
    expect(await screen.findByText('هنوز حساب بانکی ثبت نشده است')).toBeInTheDocument();
  });

  it('opens the add bank account modal from the header button', async () => {
    renderWithProviders(<MyFinancialPage />, { route: '/admin/my-financial' });
    await screen.findByText('0101234567890');

    fireEvent.click(screen.getByRole('button', { name: /افزودن حساب بانکی/ }));

    const dialog = await screen.findByText('افزودن حساب بانکی', { selector: 'h2' });
    expect(dialog).toBeInTheDocument();
    const modal = dialog.closest('.modal') as HTMLElement;
    expect(within(modal).getByText('شبا')).toBeInTheDocument();
  });
});