import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { NextIntlClientProvider } from 'next-intl';
import { ThemeProvider } from '../../theme';
import SettingsPanel from './SettingsPanel';

jest.mock('@/i18n/navigation', () => ({
  usePathname: () => '/nurse/more',
  useRouter: () => ({ replace: jest.fn() }),
}));

const MESSAGES = {
  common: {
    language: 'Language',
    appearance: 'Appearance',
    theme_light: 'Light',
    theme_dark: 'Dark',
    theme_system: 'System',
    switch_locale: 'Switch to {locale}',
  },
};

function renderPanel() {
  return render(
    <NextIntlClientProvider locale="en" messages={MESSAGES}>
      <ThemeProvider>
        <SettingsPanel />
      </ThemeProvider>
    </NextIntlClientProvider>
  );
}

describe('<SettingsPanel/> component', () => {
  it('offers exactly the two app-level preferences', () => {
    renderPanel();
    expect(screen.getByText('Language')).toBeInTheDocument();
    expect(screen.getByText('Appearance')).toBeInTheDocument();
  });

  it('offers all three theme modes, not an on/off switch', () => {
    renderPanel();
    // `system` is the app's real default (ThemeProvider defaultMode), so a boolean control could
    // never express the current state honestly — that is why the switch was replaced.
    for (const label of ['Light', 'Dark', 'System']) {
      expect(screen.getByRole('button', { name: label })).toBeInTheDocument();
    }
    expect(screen.queryByRole('switch')).not.toBeInTheDocument();
  });

  it('marks the picked mode as the pressed segment', async () => {
    renderPanel();
    const dark = screen.getByRole('button', { name: 'Dark' });
    await userEvent.click(dark);
    expect(dark).toHaveAttribute('aria-pressed', 'true');
    expect(screen.getByRole('button', { name: 'Light' })).toHaveAttribute('aria-pressed', 'false');
  });

  it('keeps the current mode when the active segment is tapped again', async () => {
    renderPanel();
    const dark = screen.getByRole('button', { name: 'Dark' });
    await userEvent.click(dark);
    // ToggleButtonGroup's `exclusive` emits null on a re-tap; deselecting would leave the app with
    // no stated preference at all.
    await userEvent.click(dark);
    expect(dark).toHaveAttribute('aria-pressed', 'true');
  });
});
