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

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

const useNurseProfile = jest.fn();
const useMyVariants = jest.fn();
const useServiceAreas = jest.fn();
const useNurseBankAccounts = jest.fn();
const useVerificationStatus = jest.fn();

jest.mock('@/services/profiles', () => ({ useNurseProfile: () => useNurseProfile() }));
jest.mock('@/services/catalog', () => ({ useMyVariants: () => useMyVariants() }));
jest.mock('@/services/serviceAreas', () => ({ useServiceAreas: () => useServiceAreas() }));
jest.mock('@/services/nurse', () => ({ useNurseBankAccounts: () => useNurseBankAccounts() }));
jest.mock('@/services/verification', () => ({ useVerificationStatus: () => useVerificationStatus() }));

import ActivationChecklist from './ActivationChecklist';

const APPROVED_STATUS = { status: 'approved' as const, isBookable: true, blockingSteps: [], steps: [] };
const NOT_STARTED_STATUS = { status: 'not_started' as const, isBookable: false, blockingSteps: [], steps: [] };

function mockAllPassing(overrides: { accepting?: boolean; bankVerified?: boolean } = {}) {
  useVerificationStatus.mockReturnValue({ data: APPROVED_STATUS, isLoading: false, isError: false, refetch: jest.fn() });
  useNurseProfile.mockReturnValue({
    data: { bio: 'Experienced nurse', avatarUrl: 'https://x/y.png', isAcceptingBookings: overrides.accepting ?? true },
    isLoading: false,
    isError: false,
    refetch: jest.fn(),
  });
  useMyVariants.mockReturnValue({ data: { items: [{ isActive: true }] }, isLoading: false, isError: false, refetch: jest.fn() });
  useServiceAreas.mockReturnValue({ data: { items: [{ id: 1 }] }, isLoading: false, isError: false, refetch: jest.fn() });
  useNurseBankAccounts.mockReturnValue({
    data: overrides.bankVerified === false ? [] : [{ matchedNationalId: true }],
    isLoading: false,
    isError: false,
    refetch: jest.fn(),
  });
}

describe('<ActivationChecklist/> component', () => {
  it('renders a skeleton while any query is loading', () => {
    useVerificationStatus.mockReturnValue({ data: undefined, isLoading: true, isError: false, refetch: jest.fn() });
    useNurseProfile.mockReturnValue({ data: undefined, isLoading: true, isError: false, refetch: jest.fn() });
    useMyVariants.mockReturnValue({ data: undefined, isLoading: true, isError: false, refetch: jest.fn() });
    useServiceAreas.mockReturnValue({ data: undefined, isLoading: true, isError: false, refetch: jest.fn() });
    useNurseBankAccounts.mockReturnValue({ data: undefined, isLoading: true, isError: false, refetch: jest.fn() });

    const { container } = render(
      <ThemeProvider>
        <ActivationChecklist />
      </ThemeProvider>,
    );
    expect(container.querySelector('.MuiSkeleton-root')).toBeInTheDocument();
    expect(screen.queryByText('title')).not.toBeInTheDocument();
  });

  it('never renders empty on a failed query — shows the error state with retry', () => {
    useVerificationStatus.mockReturnValue({ data: undefined, isLoading: false, isError: true, refetch: jest.fn() });
    useNurseProfile.mockReturnValue({ data: null, isLoading: false, isError: false, refetch: jest.fn() });
    useMyVariants.mockReturnValue({ data: { items: [] }, isLoading: false, isError: false, refetch: jest.fn() });
    useServiceAreas.mockReturnValue({ data: { items: [] }, isLoading: false, isError: false, refetch: jest.fn() });
    useNurseBankAccounts.mockReturnValue({ data: [], isLoading: false, isError: false, refetch: jest.fn() });

    render(
      <ThemeProvider>
        <ActivationChecklist />
      </ThemeProvider>,
    );
    expect(screen.getByText('load_error')).toBeInTheDocument();
    expect(screen.getByText('retry')).toBeInTheDocument();
  });

  it('lists unmet rows with a fix link when nothing has been done yet', () => {
    useVerificationStatus.mockReturnValue({ data: NOT_STARTED_STATUS, isLoading: false, isError: false, refetch: jest.fn() });
    useNurseProfile.mockReturnValue({ data: { bio: '', avatarUrl: null, isAcceptingBookings: false }, isLoading: false, isError: false, refetch: jest.fn() });
    useMyVariants.mockReturnValue({ data: { items: [] }, isLoading: false, isError: false, refetch: jest.fn() });
    useServiceAreas.mockReturnValue({ data: { items: [] }, isLoading: false, isError: false, refetch: jest.fn() });
    useNurseBankAccounts.mockReturnValue({ data: [], isLoading: false, isError: false, refetch: jest.fn() });

    const { container } = render(
      <ThemeProvider>
        <ActivationChecklist />
      </ThemeProvider>,
    );
    expect(screen.getByText('title')).toBeInTheDocument();
    expect(container.querySelectorAll('[data-passed="false"]')).toHaveLength(5);
    expect(screen.getAllByText('row_fix').length).toBeGreaterThan(0);
  });

  it('collapses to the compact live state once every row passes and accepting is on', () => {
    mockAllPassing();
    render(
      <ThemeProvider>
        <ActivationChecklist />
      </ThemeProvider>,
    );
    expect(screen.getByText('live_title')).toBeInTheDocument();
    expect(screen.queryByText('title')).not.toBeInTheDocument();
  });

  it('stays expanded when search-visible but not yet accepting bookings (bank still unmet)', () => {
    mockAllPassing({ accepting: false });
    const { container } = render(
      <ThemeProvider>
        <ActivationChecklist />
      </ThemeProvider>,
    );
    expect(screen.queryByText('live_title')).not.toBeInTheDocument();
    expect(container.querySelectorAll('[data-passed="false"]')).toHaveLength(0);
  });
});
