import { render, screen } from '@testing-library/react';
import { ThemeProvider } from '../../../theme';

jest.mock('next-intl', () => ({
  useTranslations: () => (key: string) => key,
  useLocale: () => 'en',
}));

import BookingStatusTimeline from './BookingStatusTimeline';

function renderTimeline(status: Parameters<typeof BookingStatusTimeline>[0]['status']) {
  return render(
    <ThemeProvider>
      <BookingStatusTimeline status={status} />
    </ThemeProvider>,
  );
}

describe('<BookingStatusTimeline/> component', () => {
  it('renders the 4-step happy-path stepper with the current-status chip', () => {
    renderTimeline('confirmed');
    // The stepper renders every step label; pending_payment appears only in the stepper.
    expect(screen.getByText('bstatus_pending_payment')).toBeInTheDocument();
    expect(screen.getByText('bstatus_in_progress')).toBeInTheDocument();
    // confirmed appears in both the chip and the stepper.
    expect(screen.getAllByText('bstatus_confirmed').length).toBeGreaterThanOrEqual(1);
  });

  it('reflects the server status without advancing the client (in_progress)', () => {
    const { container } = renderTimeline('in_progress');
    expect(container.querySelector('[data-booking-status="in_progress"]')).toBeInTheDocument();
  });

  it('renders cancelled distinctly — no misleading progress stepper', () => {
    renderTimeline('cancelled');
    expect(screen.getAllByText('bstatus_cancelled').length).toBeGreaterThanOrEqual(1);
    // The stepper is replaced by a terminal row, so its step labels are absent.
    expect(screen.queryByText('bstatus_pending_payment')).not.toBeInTheDocument();
  });
});
