import { describe, expect, test, vi, beforeEach } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { MantineProvider } from '@mantine/core';
import RedactSingleStepSettings from './RedactSingleStepSettings';
import { defaultParameters } from '../../../hooks/tools/redact/useRedactParameters';

// Mock useTranslation
vi.mock('react-i18next', () => ({
  useTranslation: () => ({ t: vi.fn((_key: string, fallback: string) => fallback) })
}));

// Wrapper component to provide Mantine context
const TestWrapper = ({ children }: { children: React.ReactNode }) => (
  <MantineProvider>{children}</MantineProvider>
);

describe('RedactSingleStepSettings', () => {
  const mockOnParameterChange = vi.fn();

  beforeEach(() => {
    vi.clearAllMocks();
  });

  test('should render mode selector', () => {
    render(
      <TestWrapper>
        <RedactSingleStepSettings
          parameters={defaultParameters}
          onParameterChange={mockOnParameterChange}
        />
      </TestWrapper>
    );

    expect(screen.getByText('Mode')).toBeInTheDocument();
    expect(screen.getByRole('button', { name: 'Automatic' })).toBeInTheDocument();
    expect(screen.getByRole('button', { name: 'Manual' })).toBeInTheDocument();
  });

  test('should render automatic mode settings when mode is automatic', () => {
    render(
      <TestWrapper>
        <RedactSingleStepSettings
          parameters={defaultParameters}
          onParameterChange={mockOnParameterChange}
        />
      </TestWrapper>
    );

    // Default mode is automatic, so these should be visible
    expect(screen.getByText('Words to Redact')).toBeInTheDocument();
    expect(screen.getByPlaceholderText('Enter a word')).toBeInTheDocument();
    expect(screen.getByText('Box Colour')).toBeInTheDocument();
    expect(screen.getByText('Use Regex')).toBeInTheDocument();
  });

  test('should render manual mode settings when mode is manual', () => {
    const manualParameters = {
      ...defaultParameters,
      mode: 'manual' as const,
    };

    render(
      <TestWrapper>
        <RedactSingleStepSettings
          parameters={manualParameters}
          onParameterChange={mockOnParameterChange}
        />
      </TestWrapper>
    );

    // Manual mode should show placeholder text
    expect(screen.getByText('Manual redaction interface will be available here when implemented.')).toBeInTheDocument();

    // Automatic mode settings should not be visible
    expect(screen.queryByText('Words to Redact')).not.toBeInTheDocument();
  });

  test('should pass through parameter changes from automatic settings', () => {
    render(
      <TestWrapper>
        <RedactSingleStepSettings
          parameters={defaultParameters}
          onParameterChange={mockOnParameterChange}
        />
      </TestWrapper>
    );

    // Test adding a word
    const input = screen.getByPlaceholderText('Enter a word');
    const addButton = screen.getByRole('button', { name: '+ Add' });

    fireEvent.change(input, { target: { value: 'TestWord' } });
    fireEvent.click(addButton);

    expect(mockOnParameterChange).toHaveBeenCalledWith('wordsToRedact', ['TestWord']);
  });

  test('should pass through parameter changes from advanced settings', () => {
    render(
      <TestWrapper>
        <RedactSingleStepSettings
          parameters={defaultParameters}
          onParameterChange={mockOnParameterChange}
        />
      </TestWrapper>
    );

    // Test changing color
    const colorInput = screen.getByDisplayValue('#000000');
    fireEvent.change(colorInput, { target: { value: '#FF0000' } });

    expect(mockOnParameterChange).toHaveBeenCalledWith('redactColor', '#FF0000');
  });

  test('should disable all controls when disabled prop is true', () => {
    render(
      <TestWrapper>
        <RedactSingleStepSettings
          parameters={defaultParameters}
          onParameterChange={mockOnParameterChange}
          disabled={true}
        />
      </TestWrapper>
    );

    // Mode selector buttons should be disabled
    expect(screen.getByRole('button', { name: 'Automatic' })).toBeDisabled();
    expect(screen.getByRole('button', { name: 'Manual' })).toBeDisabled();

    // Automatic settings controls should be disabled
    expect(screen.getByPlaceholderText('Enter a word')).toBeDisabled();
    expect(screen.getByRole('button', { name: '+ Add' })).toBeDisabled();
    expect(screen.getByDisplayValue('#000000')).toBeDisabled();
  });

  test('should show current parameter values in automatic mode', () => {
    const customParameters = {
      ...defaultParameters,
      wordsToRedact: ['Word1', 'Word2'],
      redactColor: '#FF0000',
      useRegex: true,
      customPadding: 0.5,
    };

    render(
      <TestWrapper>
        <RedactSingleStepSettings
          parameters={customParameters}
          onParameterChange={mockOnParameterChange}
        />
      </TestWrapper>
    );

    // Check that word tags are displayed
    expect(screen.getByText('Word1')).toBeInTheDocument();
    expect(screen.getByText('Word2')).toBeInTheDocument();

    // Check that color is displayed
    expect(screen.getByDisplayValue('#FF0000')).toBeInTheDocument();

    // Check that regex checkbox is checked
    const useRegexCheckbox = screen.getByLabelText('Use Regex');
    expect(useRegexCheckbox).toBeChecked();

    // Check that padding value is displayed
    expect(screen.getByDisplayValue('0.5')).toBeInTheDocument();
  });

  test('should maintain consistent spacing and layout', () => {
    render(
      <TestWrapper>
        <RedactSingleStepSettings
          parameters={defaultParameters}
          onParameterChange={mockOnParameterChange}
        />
      </TestWrapper>
    );

    // Check that the Stack container exists
    const container = screen.getByText('Mode').closest('.mantine-Stack-root');
    expect(container).toBeInTheDocument();
  });
});