import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { RichTextEditor } from './rich-text-editor';
import React from 'react';

// Mock document.execCommand
if (typeof document !== 'undefined') {
  document.execCommand = vi.fn();
  document.queryCommandState = vi.fn().mockReturnValue(false);
  document.queryCommandValue = vi.fn().mockReturnValue('');
}

describe('RichTextEditor', () => {
  it('renders correctly with initial value', () => {
    const { container } = render(<RichTextEditor value="<p>Hello World</p>" onChange={() => {}} />);
    const editor = container.querySelector('[contenteditable]') as HTMLElement;
    expect(editor).toBeTruthy();
    expect(editor.innerHTML).toBe('<p>Hello World</p>');
  });

  it('renders placeholder when empty', () => {
    const { container } = render(
      <RichTextEditor value="" placeholder="Type here..." onChange={() => {}} />
    );
    const editor = container.querySelector('[contenteditable]') as HTMLElement;
    expect(editor).toBeTruthy();
    expect(editor).toHaveAttribute('data-placeholder', 'Type here...');
  });

  it('calls onChange when content is edited', () => {
    const onChange = vi.fn();
    const { container } = render(<RichTextEditor value="" onChange={onChange} />);
    const editor = container.querySelector('[contenteditable]') as HTMLElement;
    expect(editor).toBeTruthy();

    // Simulate input
    editor.innerHTML = 'New Content';
    fireEvent.input(editor);

    expect(onChange).toHaveBeenCalledWith('New Content');
  });

  it('calls execCommand when toolbar buttons are clicked', () => {
    render(<RichTextEditor value="" onChange={() => {}} />);

    const boldButton = screen.getByLabelText('Negrito');
    fireEvent.click(boldButton);

    expect(document.execCommand).toHaveBeenCalledWith('bold', false, '');
  });

  it('hides undo/redo buttons when allowUndoRedo is false', () => {
    render(<RichTextEditor value="" onChange={() => {}} allowUndoRedo={false} />);
    expect(screen.queryByLabelText('Desfazer')).toBeNull();
    expect(screen.queryByLabelText('Refazer')).toBeNull();
  });

  it('hides formatting buttons when allowFormatting is false', () => {
    render(<RichTextEditor value="" onChange={() => {}} allowFormatting={false} />);
    expect(screen.queryByLabelText('Negrito')).toBeNull();
    expect(screen.queryByLabelText('Itálico')).toBeNull();
  });

  it('hides alignment buttons when allowAlignment is false', () => {
    render(<RichTextEditor value="" onChange={() => {}} allowAlignment={false} />);
    expect(screen.queryByLabelText('Alinhar à esquerda')).toBeNull();
  });

  it('hides list buttons when allowLists is false', () => {
    render(<RichTextEditor value="" onChange={() => {}} allowLists={false} />);
    expect(screen.queryByLabelText('Lista com marcadores')).toBeNull();
  });

  it('hides word and character count when props are false', () => {
    render(
      <RichTextEditor
        value="Test content"
        onChange={() => {}}
        showWordCount={false}
        showCharacterCount={false}
      />
    );
    expect(screen.queryByText(/palavra/i)).toBeNull();
    expect(screen.queryByText(/caractere/i)).toBeNull();
  });
});