/* @vitest-environment jsdom */

import { fireEvent, render, screen } from '@testing-library/react';
import { expect, test, vi } from 'vitest';

import { PlatformToggleRow } from './index';

test('renders a controlled checkbox row and forwards the next value', () => {
  const onChange = vi.fn();
  render(
    <PlatformToggleRow label="自由输入" checked={false} onChange={onChange} />,
  );

  fireEvent.click(screen.getByRole('checkbox', { name: '自由输入' }));

  expect(onChange).toHaveBeenCalledWith(true);
  expect(screen.getByText('自由输入').closest('label')?.className).toContain(
    'bg-white/74',
  );
});

test('renders read-only and clickable status variants with custom labels', () => {
  const onClick = vi.fn();
  const { rerender } = render(
    <PlatformToggleRow
      label="文本模式"
      checked
      mode="status"
      onLabel="已开启"
      offLabel="未开启"
      surface="plain"
    />,
  );

  expect(screen.queryByRole('checkbox')).toBeNull();
  expect(screen.getByText('已开启')).toBeTruthy();
  expect(screen.getByText('文本模式').closest('div')?.className).toContain(
    'bg-white/78',
  );

  rerender(
    <PlatformToggleRow
      label="文本模式"
      checked={false}
      mode="status"
      onLabel="已开启"
      offLabel="未开启"
      onClick={onClick}
    />,
  );

  fireEvent.click(screen.getByRole('button', { name: '文本模式 未开启' }));
  expect(onClick).toHaveBeenCalledTimes(1);
});

test('keeps disabled state and visual slots', () => {
  render(
    <PlatformToggleRow
      label="玩家可见"
      checked
      disabled
      icon={<span data-testid="toggle-icon" />}
      className="custom-row"
      labelClassName="custom-label"
    />,
  );

  expect(screen.getByRole('checkbox', { name: '玩家可见' })).toHaveProperty(
    'disabled',
    true,
  );
  expect(screen.getByTestId('toggle-icon')).toBeTruthy();
  expect(screen.getByText('玩家可见').closest('label')?.className).toContain(
    'custom-row',
  );
  expect(screen.getByText('玩家可见').parentElement?.className).toContain(
    'custom-label',
  );
});