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

jest.mock('next-intl', () => ({
  useTranslations: () => {
    const t = (key: string, values?: Record<string, string>) =>
      values ? `${key}:${Object.values(values).join(',')}` : key;
    t.has = (key: string) => key.startsWith('step_moh') || key.startsWith('step_ino') || key.startsWith('step_criminal');
    return t;
  },
  useLocale: () => 'en',
}));

import VerificationPanel from './VerificationPanel';
import type { TrustBadge } from '@/services/verification/types';

const VERIFIED_BADGE: TrustBadge = {
  nurseId: 1,
  isVerified: true,
  approvedAt: '2026-01-05T00:00:00Z',
  credentialTypes: ['moh_competency_license', 'ino_membership'],
};

describe('<VerificationPanel/> component', () => {
  it('renders a loading skeleton', () => {
    const { container } = render(
      <ThemeProvider>
        <VerificationPanel badge={undefined} isLoading />
      </ThemeProvider>,
    );
    expect(container.querySelector('[data-verification-panel="loading"]')).toBeInTheDocument();
  });

  it('renders an error state', () => {
    render(
      <ThemeProvider>
        <VerificationPanel badge={undefined} isError />
      </ThemeProvider>,
    );
    expect(screen.getByText('explainer_error')).toBeInTheDocument();
  });

  it('renders the not-verified message when the badge is unverified', () => {
    render(
      <ThemeProvider>
        <VerificationPanel badge={{ nurseId: 1, isVerified: false, approvedAt: null, credentialTypes: [] }} />
      </ThemeProvider>,
    );
    expect(screen.getByText('explainer_not_verified')).toBeInTheDocument();
  });

  it('renders one row per credential type + the approval date, never inventing steps', () => {
    const { container } = render(
      <ThemeProvider>
        <VerificationPanel badge={VERIFIED_BADGE} />
      </ThemeProvider>,
    );
    expect(container.querySelector('[data-verification-row="moh_competency_license"]')).toBeInTheDocument();
    expect(container.querySelector('[data-verification-row="ino_membership"]')).toBeInTheDocument();
    expect(container.querySelectorAll('[data-verification-row]').length).toBe(2);
    expect(screen.getByText(/explainer_approved_at/)).toBeInTheDocument();
  });

  it('falls back to the raw code for an unmapped credential type', () => {
    render(
      <ThemeProvider>
        <VerificationPanel badge={{ ...VERIFIED_BADGE, credentialTypes: ['some_future_code'] }} />
      </ThemeProvider>,
    );
    expect(screen.getByText('some_future_code')).toBeInTheDocument();
  });
});
