import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { ChatInput } from './ChatInput';

describe('ChatInput', () => {
  it('renders textarea and send button', () => {
    const mockOnSend = vi.fn();
    render(<ChatInput onSend={mockOnSend} disabled={false} />);

    const textarea = screen.getByRole('textbox');
    expect(textarea).toBeInTheDocument();

    const sendButton = screen.getByRole('button', { name: /send/i });
    expect(sendButton).toBeInTheDocument();
  });

  it('updates input value when typing', () => {
    const mockOnSend = vi.fn();
    render(<ChatInput onSend={mockOnSend} disabled={false} />);

    const textarea = screen.getByRole('textbox');
    fireEvent.change(textarea, { target: { value: 'Hello world' } });

    expect(textarea).toHaveValue('Hello world');
  });

  it('calls onSend and clears input when send button clicked', () => {
    const mockOnSend = vi.fn();
    render(<ChatInput onSend={mockOnSend} disabled={false} />);

    const textarea = screen.getByRole('textbox');
    fireEvent.change(textarea, { target: { value: 'Test message' } });

    const sendButton = screen.getByRole('button', { name: /send/i });
    fireEvent.click(sendButton);

    expect(mockOnSend).toHaveBeenCalledWith('Test message');
    expect(textarea).toHaveValue('');
  });

  it('sends message on Enter key press', () => {
    const mockOnSend = vi.fn();
    render(<ChatInput onSend={mockOnSend} disabled={false} />);

    const textarea = screen.getByRole('textbox');
    fireEvent.change(textarea, { target: { value: 'Test message' } });
    fireEvent.keyDown(textarea, { key: 'Enter' });

    expect(mockOnSend).toHaveBeenCalledWith('Test message');
  });

  it('does not send empty messages', () => {
    const mockOnSend = vi.fn();
    render(<ChatInput onSend={mockOnSend} disabled={false} />);

    const textarea = screen.getByRole('textbox');
    fireEvent.change(textarea, { target: { value: '   ' } });

    const sendButton = screen.getByRole('button', { name: /send/i });
    fireEvent.click(sendButton);

    expect(mockOnSend).not.toHaveBeenCalled();
  });

  it('disables send button when disabled prop is true', () => {
    const mockOnSend = vi.fn();
    render(<ChatInput onSend={mockOnSend} disabled={true} />);

    const sendButton = screen.getByRole('button', { name: /send/i });
    expect(sendButton).toBeDisabled();
  });

  it('send button meets 44px minimum touch target', () => {
    const mockOnSend = vi.fn();
    render(<ChatInput onSend={mockOnSend} disabled={false} />);

    const sendButton = screen.getByRole('button', { name: /send/i });
    // Check that button has min-h-[44px] and min-w-[44px] classes
    expect(sendButton).toHaveClass('min-h-[44px]', 'min-w-[44px]');
  });
});
