import { PricingSection } from '@/components/homepage/sections/PricingSection';
import enHomepage from '@/content/locales/en/homepage.json';
import enShell from '@/content/locales/en/shell.json';
import { buildHomepageContent } from '@/content/homepage-model';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { beforeEach, describe, expect, it } from 'vitest';

describe('PricingSection', () => {
  beforeEach(() => {
    document.documentElement.dataset.theme = 'light';
  });

  it('changes the recommended plan when the fleet band changes', async () => {
    const user = userEvent.setup();
    const content = buildHomepageContent(enHomepage, enShell).pricing;
    const { container } = render(
      <PricingSection content={content} locale="en" homePath="/en" demoSubmissionEnabled />,
    );

    expect(container.querySelector('[data-plan="launch"]')).toHaveAttribute(
      'data-recommended',
      'true',
    );

    await user.click(screen.getByLabelText('26–75 vehicles'));

    expect(container.querySelector('[data-plan="growth"]')).toHaveAttribute(
      'data-recommended',
      'true',
    );
    expect(container.querySelector('[data-plan="launch"]')).not.toHaveAttribute('data-recommended');
  });

  it('keeps unapproved public prices out of the rendered section', () => {
    const content = buildHomepageContent(enHomepage, enShell).pricing;
    render(<PricingSection content={content} locale="en" homePath="/en" demoSubmissionEnabled />);

    expect(screen.getAllByText('Starting price pending approval')).toHaveLength(2);
    expect(screen.getByText('Custom pricing')).toBeInTheDocument();
  });
});