import React from 'react'
import { render, screen, fireEvent } from '@testing-library/react'
import { QueryInput } from '../../components/QueryInput'

describe('QueryInput', () => {
  const mockOnSubmit = vi.fn()

  beforeEach(() => {
    mockOnSubmit.mockClear()
  })

  it('renders textarea with placeholder text', () => {
    render(<QueryInput onSubmit={mockOnSubmit} isLoading={false} />)
    const textarea = screen.getByPlaceholderText('Ask a question about your documents...')
    expect(textarea).toBeInTheDocument()
  })

  it('renders submit button', () => {
    render(<QueryInput onSubmit={mockOnSubmit} isLoading={false} />)
    const button = screen.getByRole('button', { name: /submit/i })
    expect(button).toBeInTheDocument()
  })

  it('button is disabled when textarea is empty', () => {
    render(<QueryInput onSubmit={mockOnSubmit} isLoading={false} />)
    const button = screen.getByRole('button', { name: /submit/i })
    expect(button).toBeDisabled()
  })

  it('button is disabled when textarea contains only whitespace', () => {
    render(<QueryInput onSubmit={mockOnSubmit} isLoading={false} />)
    const textarea = screen.getByPlaceholderText('Ask a question about your documents...')
    const button = screen.getByRole('button', { name: /submit/i })

    fireEvent.change(textarea, { target: { value: '   ' } })

    expect(button).toBeDisabled()
  })

  it('button is disabled when isLoading is true', () => {
    render(<QueryInput onSubmit={mockOnSubmit} isLoading={true} />)
    const button = screen.getByRole('button', { name: /processing/i })
    expect(button).toBeDisabled()
  })

  it('textarea is disabled when isLoading is true', () => {
    render(<QueryInput onSubmit={mockOnSubmit} isLoading={true} />)
    const textarea = screen.getByPlaceholderText('Ask a question about your documents...')
    expect(textarea).toBeDisabled()
  })

  it('button is disabled when isLoading is true even with text', () => {
    render(<QueryInput onSubmit={mockOnSubmit} isLoading={true} />)
    const textarea = screen.getByPlaceholderText('Ask a question about your documents...')
    const button = screen.getByRole('button', { name: /processing/i })

    fireEvent.change(textarea, { target: { value: 'Some question' } })

    expect(button).toBeDisabled()
  })

  it('calls onSubmit with trimmed text when button is clicked', () => {
    render(<QueryInput onSubmit={mockOnSubmit} isLoading={false} />)
    const textarea = screen.getByPlaceholderText('Ask a question about your documents...')
    const button = screen.getByRole('button', { name: /submit/i })

    fireEvent.change(textarea, { target: { value: '  Test question  ' } })
    fireEvent.click(button)

    expect(mockOnSubmit).toHaveBeenCalledTimes(1)
    expect(mockOnSubmit).toHaveBeenCalledWith('Test question')
  })

  it('clears textarea after submit', () => {
    render(<QueryInput onSubmit={mockOnSubmit} isLoading={false} />)
    const textarea = screen.getByPlaceholderText('Ask a question about your documents...')
    const button = screen.getByRole('button', { name: /submit/i })

    fireEvent.change(textarea, { target: { value: 'Test question' } })
    fireEvent.click(button)

    expect(textarea).toHaveValue('')
  })

  it('calls onSubmit when pressing Enter without Shift', () => {
    render(<QueryInput onSubmit={mockOnSubmit} isLoading={false} />)
    const textarea = screen.getByPlaceholderText('Ask a question about your documents...')

    fireEvent.change(textarea, { target: { value: 'Test question' } })
    fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false })

    expect(mockOnSubmit).toHaveBeenCalledTimes(1)
    expect(mockOnSubmit).toHaveBeenCalledWith('Test question')
  })

  it('does not call onSubmit when pressing Enter with Shift', () => {
    render(<QueryInput onSubmit={mockOnSubmit} isLoading={false} />)
    const textarea = screen.getByPlaceholderText('Ask a question about your documents...')

    fireEvent.change(textarea, { target: { value: 'Test question' } })
    fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: true })

    expect(mockOnSubmit).not.toHaveBeenCalled()
  })

  it('does not submit when textarea is empty and Enter is pressed', () => {
    render(<QueryInput onSubmit={mockOnSubmit} isLoading={false} />)
    const textarea = screen.getByPlaceholderText('Ask a question about your documents...')

    fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false })

    expect(mockOnSubmit).not.toHaveBeenCalled()
  })

  it('shows submitted question after clicking submit', () => {
    render(<QueryInput onSubmit={mockOnSubmit} isLoading={false} />)
    const textarea = screen.getByPlaceholderText('Ask a question about your documents...')
    const button = screen.getByRole('button', { name: /submit/i })

    fireEvent.change(textarea, { target: { value: 'What is NEC4?' } })
    fireEvent.click(button)

    expect(screen.getByTestId('submitted-question')).toHaveTextContent('What is NEC4?')
  })

  it('clears submitted question when user starts typing a new question', () => {
    render(<QueryInput onSubmit={mockOnSubmit} isLoading={false} />)
    const textarea = screen.getByPlaceholderText('Ask a question about your documents...')
    const button = screen.getByRole('button', { name: /submit/i })

    fireEvent.change(textarea, { target: { value: 'First question' } })
    fireEvent.click(button)
    expect(screen.getByTestId('submitted-question')).toBeInTheDocument()

    fireEvent.change(textarea, { target: { value: 'New question' } })
    expect(screen.queryByTestId('submitted-question')).not.toBeInTheDocument()
  })

  it('does not show submitted question before any submission', () => {
    render(<QueryInput onSubmit={mockOnSubmit} isLoading={false} />)
    expect(screen.queryByTestId('submitted-question')).not.toBeInTheDocument()
  })

  it('does not clear submitted question when typing only whitespace', () => {
    render(<QueryInput onSubmit={mockOnSubmit} isLoading={false} />)
    const textarea = screen.getByPlaceholderText('Ask a question about your documents...')
    const button = screen.getByRole('button', { name: /submit/i })

    fireEvent.change(textarea, { target: { value: 'My question' } })
    fireEvent.click(button)
    expect(screen.getByTestId('submitted-question')).toBeInTheDocument()

    fireEvent.change(textarea, { target: { value: '   ' } })
    expect(screen.getByTestId('submitted-question')).toBeInTheDocument()
  })
})