import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import { BudgetExtrasStep } from '../BudgetExtrasStep';
import { EMPTY_FORM_DATA } from './helpers';

describe('BudgetExtrasStep', () => {
  const defaultProps: {
    formData: typeof EMPTY_FORM_DATA;
    errors: Record<string, string>;
    updateField: jest.Mock;
  } = {
    formData: EMPTY_FORM_DATA,
    errors: {},
    updateField: jest.fn()
  };

  it('should render section header', () => {
    const { getByText } = render(<BudgetExtrasStep {...defaultProps} />);
    expect(getByText('Budget & extras')).toBeInTheDocument();
  });

  it('should render budget slider with default values', () => {
    const { getByText } = render(<BudgetExtrasStep {...defaultProps} />);
    expect(getByText('£0')).toBeInTheDocument();
    expect(getByText('£50,000')).toBeInTheDocument();
  });

  it('should render two range inputs for the slider', () => {
    const { container } = render(<BudgetExtrasStep {...defaultProps} />);
    const rangeInputs = container.querySelectorAll('input[type="range"]');
    expect(rangeInputs).toHaveLength(2);
  });

  it('should render subscriber code input', () => {
    const { getByLabelText } = render(<BudgetExtrasStep {...defaultProps} />);
    expect(getByLabelText(/Subscriber Discount code/)).toBeInTheDocument();
  });

  it('should render comments textarea', () => {
    const { getByLabelText } = render(<BudgetExtrasStep {...defaultProps} />);
    expect(getByLabelText(/Any other requirements/)).toBeInTheDocument();
  });

  it('should render the field description for comments', () => {
    const { getByText } = render(<BudgetExtrasStep {...defaultProps} />);
    expect(
      getByText(
        /Please give us any extra details that will help us tailor your trip to perfection/
      )
    ).toBeInTheDocument();
  });

  it('should call updateField when typing subscriber code', () => {
    const updateField = jest.fn();
    const { getByLabelText } = render(
      <BudgetExtrasStep {...defaultProps} updateField={updateField} />
    );
    fireEvent.change(getByLabelText(/Subscriber Discount code/), {
      target: { value: 'SAVE10' }
    });
    expect(updateField).toHaveBeenCalledWith('subscriberCode', 'SAVE10');
  });

  it('should call updateField when typing comments', () => {
    const updateField = jest.fn();
    const { getByLabelText } = render(
      <BudgetExtrasStep {...defaultProps} updateField={updateField} />
    );
    fireEvent.change(getByLabelText(/Any other requirements/), {
      target: { value: 'Special meal' }
    });
    expect(updateField).toHaveBeenCalledWith('comments', 'Special meal');
  });

  it('should display formatted budget values', () => {
    const formData = { ...EMPTY_FORM_DATA, budgetMin: 5000, budgetMax: 20000 };
    const { getByText } = render(
      <BudgetExtrasStep {...defaultProps} formData={formData} />
    );
    expect(getByText('£5,000')).toBeInTheDocument();
    expect(getByText('£20,000')).toBeInTheDocument();
  });

  it('should call updateField when min budget slider changes to a valid value', () => {
    const updateField = jest.fn();
    const formData = { ...EMPTY_FORM_DATA, budgetMin: 0, budgetMax: 50000 };
    const { container } = render(
      <BudgetExtrasStep
        {...defaultProps}
        formData={formData}
        updateField={updateField}
      />
    );
    const [minSlider] = container.querySelectorAll('input[type="range"]');
    fireEvent.change(minSlider, { target: { value: '5000' } });
    expect(updateField).toHaveBeenCalledWith('budgetMin', 5000);
  });

  it('should not call updateField when min slider value is not less than max', () => {
    const updateField = jest.fn();
    const formData = { ...EMPTY_FORM_DATA, budgetMin: 0, budgetMax: 5000 };
    const { container } = render(
      <BudgetExtrasStep
        {...defaultProps}
        formData={formData}
        updateField={updateField}
      />
    );
    const [minSlider] = container.querySelectorAll('input[type="range"]');
    fireEvent.change(minSlider, { target: { value: '5000' } });
    expect(updateField).not.toHaveBeenCalled();
  });

  it('should call updateField when max budget slider changes to a valid value', () => {
    const updateField = jest.fn();
    const formData = { ...EMPTY_FORM_DATA, budgetMin: 5000, budgetMax: 50000 };
    const { container } = render(
      <BudgetExtrasStep
        {...defaultProps}
        formData={formData}
        updateField={updateField}
      />
    );
    const sliders = container.querySelectorAll('input[type="range"]');
    const maxSlider = sliders[1];
    fireEvent.change(maxSlider, { target: { value: '20000' } });
    expect(updateField).toHaveBeenCalledWith('budgetMax', 20000);
  });

  it('should not call updateField when max slider value is not greater than min', () => {
    const updateField = jest.fn();
    const formData = { ...EMPTY_FORM_DATA, budgetMin: 10000, budgetMax: 50000 };
    const { container } = render(
      <BudgetExtrasStep
        {...defaultProps}
        formData={formData}
        updateField={updateField}
      />
    );
    const sliders = container.querySelectorAll('input[type="range"]');
    const maxSlider = sliders[1];
    fireEvent.change(maxSlider, { target: { value: '5000' } });
    expect(updateField).not.toHaveBeenCalled();
  });

  it('should show checkmark when newsletterOptIn is true', () => {
    const formData = { ...EMPTY_FORM_DATA, newsletterOptIn: true };
    const { container } = render(
      <BudgetExtrasStep {...defaultProps} formData={formData} />
    );
    expect(container.querySelector('svg')).not.toBeNull();
  });

  it('should call updateField when newsletter checkbox is toggled', () => {
    const updateField = jest.fn();
    const formData = { ...EMPTY_FORM_DATA, newsletterOptIn: false };
    const { container } = render(
      <BudgetExtrasStep
        {...defaultProps}
        formData={formData}
        updateField={updateField}
      />
    );
    const checkboxes = container.querySelectorAll('input[type="checkbox"]');
    fireEvent.click(checkboxes[checkboxes.length - 1]);
    expect(updateField).toHaveBeenCalledWith('newsletterOptIn', true);
  });
});