import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect, vi } from 'vitest';

vi.mock('@/Layouts/Web/WebLayout', () => ({ default: ({ children }) => <>{children}</> }));

import Pricing from '@/Pages/Web/Pricing';

describe('Web/Pricing page', () => {
    it('renders without crashing', () => {
        render(<Pricing />);
    });

    it('sets the correct page title', () => {
        render(<Pricing />);
        expect(document.title).toBe('Pricing — Upepo POS');
    });

    it('displays Starter plan', () => {
        render(<Pricing />);
        expect(screen.getByText('Starter')).toBeInTheDocument();
    });

    it('displays Business plan', () => {
        render(<Pricing />);
        expect(screen.getByText('Business')).toBeInTheDocument();
    });

    it('displays Enterprise plan', () => {
        render(<Pricing />);
        expect(screen.getByText('Enterprise')).toBeInTheDocument();
    });

    it('shows KES pricing by default', () => {
        render(<Pricing />);
        // KES is default currency — one of the prices should be 2,500
        expect(screen.getByText(/2,500/)).toBeInTheDocument();
    });

    it('currency toggle switches to UGX', async () => {
        render(<Pricing />);
        const ugxBtn = screen.getByRole('button', { name: 'UGX' });
        await userEvent.click(ugxBtn);
        expect(screen.getByText(/92,000/)).toBeInTheDocument();
    });
});