/* eslint-disable import-x/order */
import { render, screen } from '@testing-library/react';
import { beforeEach, describe, expect, it, vi } from 'vitest';

const mockTransactions = {
  items: [
    {
      id: 'tx-1',
      type: 'SUBSCRIPTION',
      status: 'COMPLETED',
      amountVND: '499000',
      provider: 'VNPAY',
      providerTxId: 'TXN123456789012',
      createdAt: '2024-06-15T10:00:00.000Z',
    },
    {
      id: 'tx-2',
      type: 'LISTING_FEE',
      status: 'PENDING',
      amountVND: '100000',
      provider: 'MOMO',
      providerTxId: null,
      createdAt: '2024-06-20T10:00:00.000Z',
    },
  ],
  total: 2,
};

vi.mock('@/lib/hooks/use-payments', () => ({
  useTransactions: vi.fn(() => ({ data: mockTransactions, isLoading: false })),
}));

import PaymentsPage from '../payments/page';

describe('PaymentsPage', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('renders payment page heading', () => {
    render(<PaymentsPage />);
    expect(screen.getByText('Thanh toán')).toBeInTheDocument();
  });

  it('renders summary cards', () => {
    render(<PaymentsPage />);
    expect(screen.getByText('Tổng giao dịch')).toBeInTheDocument();
    expect(screen.getByText('Đã thanh toán')).toBeInTheDocument();
    expect(screen.getByText('Đang chờ')).toBeInTheDocument();
  });

  it('renders transaction history section', () => {
    render(<PaymentsPage />);
    expect(screen.getByText('Lịch sử giao dịch')).toBeInTheDocument();
  });

  it('renders transaction count correctly', () => {
    render(<PaymentsPage />);
    expect(screen.getByText('2')).toBeInTheDocument();
  });

  it('renders status filter', () => {
    render(<PaymentsPage />);
    expect(screen.getByText('Tất cả')).toBeInTheDocument();
  });
});
