/**
 * ButtonGroupField Tests
 */
import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { ButtonGroupField } from './ButtonGroupField';
import { ActionField } from '../../types/action';

describe('ButtonGroupField', () => {
  const defaultField: ActionField = {
    type: 'button_group',
    label: 'Format',
    description: 'Choose output format',
    required: false,
    options: [
      { value: 'html', label: 'HTML' },
      { value: 'text', label: 'Plain Text' },
      { value: 'markdown', label: 'Markdown' },
    ],
  };

  it('renders all options', () => {
    render(
      <ButtonGroupField
        fieldName="format"
        field={defaultField}
        value=""
        onChange={vi.fn()}
      />,
    );
    expect(screen.getByText('HTML')).toBeInTheDocument();
    expect(screen.getByText('Plain Text')).toBeInTheDocument();
    expect(screen.getByText('Markdown')).toBeInTheDocument();
  });

  it('renders label and description', () => {
    render(
      <ButtonGroupField
        fieldName="format"
        field={defaultField}
        value=""
        onChange={vi.fn()}
      />,
    );
    expect(screen.getByText('Format')).toBeInTheDocument();
    expect(screen.getByText('Choose output format')).toBeInTheDocument();
  });

  it('highlights the selected value', () => {
    render(
      <ButtonGroupField
        fieldName="format"
        field={defaultField}
        value="html"
        onChange={vi.fn()}
      />,
    );
    const htmlButton = screen.getByText('HTML').closest('button');
    expect(htmlButton).toHaveAttribute('data-state', 'on');

    const textButton = screen.getByText('Plain Text').closest('button');
    expect(textButton).toHaveAttribute('data-state', 'off');
  });

  it('calls onChange when an option is clicked', async () => {
    const user = userEvent.setup();
    const onChange = vi.fn();
    render(
      <ButtonGroupField
        fieldName="format"
        field={defaultField}
        value="html"
        onChange={onChange}
      />,
    );
    await user.click(screen.getByText('Plain Text'));
    expect(onChange).toHaveBeenCalledWith('text');
  });

  it('shows required indicator', () => {
    const requiredField: ActionField = { ...defaultField, required: true };
    render(
      <ButtonGroupField
        fieldName="format"
        field={requiredField}
        value=""
        onChange={vi.fn()}
      />,
    );
    expect(screen.getByText('*')).toBeInTheDocument();
  });

  it('shows error message', () => {
    render(
      <ButtonGroupField
        fieldName="format"
        field={defaultField}
        value=""
        onChange={vi.fn()}
        error="This field is required"
      />,
    );
    expect(screen.getByText('This field is required')).toBeInTheDocument();
  });

  it('normalizes string options', () => {
    const stringOptionsField: ActionField = {
      ...defaultField,
      options: ['active', 'inactive'] as unknown as ActionField['options'],
    };
    render(
      <ButtonGroupField
        fieldName="status"
        field={stringOptionsField}
        value=""
        onChange={vi.fn()}
      />,
    );
    expect(screen.getByText('Active')).toBeInTheDocument();
    expect(screen.getByText('Inactive')).toBeInTheDocument();
  });
});