import { fireEvent, render, screen } from '@testing-library/react';
import { ThemeProvider } from '../../theme';
import type { NurseSearchResult } from '@/services/search/types';

// next-intl echoes keys; locale = en so the rating/price format with ASCII digits we can assert on.
jest.mock('next-intl', () => ({
  useTranslations: () => (key: string) => key,
  useLocale: () => 'en',
}));

import NurseResultCard from './NurseResultCard';

const NURSE: NurseSearchResult = {
  nurseId: 1,
  variantId: 11,
  serviceCategoryId: 1,
  nurseName: 'Maryam Rezaei',
  avatarUrl: null,
  isVerified: true,
  averageRating: 4.9,
  totalReviews: 37,
  totalCompletedBookings: 52,
  distanceKm: 2.4,
  priceFromIrr: '2800000',
  priceUnit: 'per_hour',
  nurseGender: 'female',
  cityId: 101,
  districtId: 1003,
};

function renderCard(nurse: NurseSearchResult, onSelect = jest.fn()) {
  render(
    <ThemeProvider>
      <NurseResultCard nurse={nurse} onSelect={onSelect} />
    </ThemeProvider>,
  );
  return onSelect;
}

describe('<NurseResultCard/> component', () => {
  it('renders the name, the reused verified badge, and the rating', () => {
    renderCard(NURSE);
    expect(screen.getByText('Maryam Rezaei')).toBeInTheDocument();
    expect(screen.getByText('badge_verified')).toBeInTheDocument();
    expect(screen.getByText('4.9')).toBeInTheDocument();
    expect(screen.getByText('reviews_count')).toBeInTheDocument();
  });

  it('renders the "from" price line as grouped Toman via the money util', () => {
    renderCard(NURSE);
    expect(screen.getByText('price_from')).toBeInTheDocument();
    // 2,800,000 IRR = 280,000 Toman.
    expect(screen.getByText(/280,000/)).toBeInTheDocument();
  });

  it('shows the distance chip only when distanceKm is present', () => {
    const { rerender } = render(
      <ThemeProvider>
        <NurseResultCard nurse={NURSE} onSelect={jest.fn()} />
      </ThemeProvider>,
    );
    expect(screen.getByText('distance_km')).toBeInTheDocument();

    rerender(
      <ThemeProvider>
        <NurseResultCard nurse={{ ...NURSE, distanceKm: null }} onSelect={jest.fn()} />
      </ThemeProvider>,
    );
    expect(screen.queryByText('distance_km')).not.toBeInTheDocument();
  });

  it('falls back to a label when the name is missing (b7 join gap)', () => {
    renderCard({ ...NURSE, nurseName: '' });
    expect(screen.getByText('unnamed_nurse')).toBeInTheDocument();
  });

  it('calls onSelect with the nurse row when clicked', () => {
    const onSelect = renderCard(NURSE);
    fireEvent.click(screen.getByRole('button'));
    expect(onSelect).toHaveBeenCalledWith(NURSE);
  });

  it('exposes a co-located Skeleton twin matching the card shell', () => {
    const { container } = render(
      <ThemeProvider>
        <NurseResultCard.Skeleton />
      </ThemeProvider>,
    );
    expect(container.querySelectorAll('.MuiSkeleton-root').length).toBeGreaterThan(0);
  });
});