// @vitest-environment happy-dom
import '@testing-library/jest-dom/vitest'
import { render, screen, fireEvent } from '@testing-library/react'
import { vi, describe, it, expect, beforeEach } from 'vitest'
import * as parseModule from '@/lib/parse-agent-output'
import { AgentOutputViewer } from './AgentOutputViewer'

vi.mock('@/lib/trpc', () => ({
  trpc: {
    getAgentOutput: {
      useQuery: vi.fn(() => ({ data: [], isLoading: false })),
    },
    onAgentOutput: {
      useSubscription: vi.fn(),
    },
  },
}))

vi.mock('@/hooks', () => ({
  useSubscriptionWithErrorHandling: vi.fn(() => ({
    error: null,
    isConnecting: false,
  })),
}))

function makeToolResultMessage(content: string) {
  return {
    type: 'tool_result' as const,
    content,
    timestamp: new Date('2024-01-01T00:00:00Z'),
  }
}

function makeSystemMessage(content: string) {
  return {
    type: 'system' as const,
    content,
    timestamp: new Date('2024-01-01T00:00:00Z'),
  }
}

function makeTextMessage(content: string) {
  return {
    type: 'text' as const,
    content,
    timestamp: new Date('2024-01-01T00:00:00Z'),
  }
}

function makeToolCallMessage(content: string, toolName: string) {
  return {
    type: 'tool_call' as const,
    content,
    timestamp: new Date('2024-01-01T00:00:00Z'),
    meta: { toolName },
  }
}

function makeTodoWriteMessage(todos: Array<{ content: string; status: string; activeForm: string }>) {
  return {
    type: 'tool_call' as const,
    content: 'TodoWrite(...)',
    timestamp: new Date('2024-01-01T00:00:00Z'),
    meta: {
      toolName: 'TodoWrite',
      toolInput: { todos },
    },
  }
}

function makeToolResultMessageWithMeta(
  content: string,
  meta: { toolName?: string; toolInput?: unknown }
) {
  return {
    type: 'tool_result' as const,
    content,
    timestamp: new Date('2024-01-01T00:00:00Z'),
    meta,
  }
}

function makeErrorMessage(content: string) {
  return {
    type: 'error' as const,
    content,
    timestamp: new Date('2024-01-01T00:00:00Z'),
  }
}

function makeSessionEndMessage(content: string) {
  return {
    type: 'session_end' as const,
    content,
    timestamp: new Date('2024-01-01T00:00:00Z'),
  }
}

describe('AgentOutputViewer', () => {
  beforeEach(() => {
    vi.clearAllMocks()
    // Default: no messages
    vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([])
  })

  // Test 1: tool_result renders collapsed by default
  it('renders tool_result collapsed by default', () => {
    const content = 'file content here and more stuff'
    vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([makeToolResultMessage(content)])

    render(<AgentOutputViewer agentId="agent-1" />)

    // ChevronRight should be present (collapsed state)
    // We check that the SVG for ChevronRight is in the document
    // lucide-react renders SVGs — we look for the collapsed container containing the preview text
    expect(screen.getByText(content.substring(0, 80))).toBeInTheDocument()

    // "Result" badge should NOT be visible (collapsed)
    expect(screen.queryByText('Result')).not.toBeInTheDocument()

    // The container should NOT show a "Result" badge
    // ChevronRight is rendered — verify no ChevronDown
    const svgs = document.querySelectorAll('svg')
    // We look for the collapsed state by absence of "Result" text
    expect(screen.queryByText('Result')).toBeNull()
  })

  // Test 2: Clicking collapsed result expands it
  it('expands tool_result on click', () => {
    const longContent = 'a'.repeat(100)
    vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([makeToolResultMessage(longContent)])

    render(<AgentOutputViewer agentId="agent-1" />)

    // Initially collapsed — click it
    const collapsedContainer = screen.getByText(longContent.substring(0, 80)).closest('div')!
    fireEvent.click(collapsedContainer)

    // After click: "Result" badge should be visible
    expect(screen.getByText('Result')).toBeInTheDocument()

    // Full content should be visible in whitespace-pre-wrap element
    const preWrap = document.querySelector('.whitespace-pre-wrap')
    expect(preWrap).toBeInTheDocument()
    expect(preWrap).toHaveTextContent(longContent)

    // ChevronRight should no longer be visible; ChevronDown should be present
    expect(screen.queryByText('Result')).toBeInTheDocument()
  })

  // Test 3: Clicking expanded result collapses it again
  it('collapses tool_result on second click', () => {
    const longContent = 'b'.repeat(100)
    vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([makeToolResultMessage(longContent)])

    render(<AgentOutputViewer agentId="agent-1" />)

    // Click once to expand
    const container = screen.getByText(longContent.substring(0, 80)).closest('div')!
    fireEvent.click(container)
    expect(screen.getByText('Result')).toBeInTheDocument()

    // Click again to collapse
    // After expansion, the container still exists — click the expanded container
    // The clickable container is the border-l-2 div
    const expandedContainer = screen.getByText('Result').closest('.border-l-2')!
    fireEvent.click(expandedContainer)

    // Should be collapsed again
    expect(screen.queryByText('Result')).not.toBeInTheDocument()
    expect(screen.getByText(longContent.substring(0, 80))).toBeInTheDocument()
  })

  // Test 4: system message renders as single dim line, no badge, no border-l
  it('renders system message as a single dim line without badge or border', () => {
    const content = 'Session started: abc-123'
    vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([makeSystemMessage(content)])

    render(<AgentOutputViewer agentId="agent-1" />)

    // Content is visible
    expect(screen.getByText(content)).toBeInTheDocument()

    // No "System" badge text
    expect(screen.queryByText('System')).not.toBeInTheDocument()

    // The rendered element should NOT have border-l class
    const el = screen.getByText(content)
    expect(el.className).not.toContain('border-l')
    expect(el.closest('[class*="border-l"]')).toBeNull()
  })

  // Test 5: agentId prop change resets expanded results
  it('resets expanded results when agentId changes', () => {
    const content = 'c'.repeat(100)
    vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([makeToolResultMessage(content)])

    const { rerender } = render(<AgentOutputViewer agentId="agent-1" />)

    // Expand the result
    const collapsedContainer = screen.getByText(content.substring(0, 80)).closest('div')!
    fireEvent.click(collapsedContainer)
    expect(screen.getByText('Result')).toBeInTheDocument()

    // Change agentId — should reset expandedResults
    rerender(<AgentOutputViewer agentId="agent-2" />)

    // After agentId change, result should be collapsed again
    expect(screen.queryByText('Result')).not.toBeInTheDocument()
    // Preview text should be visible (collapsed state)
    expect(screen.getByText(content.substring(0, 80))).toBeInTheDocument()
  })

  // Test 6: Other message types remain always-expanded (unaffected)
  it('always renders text messages fully', () => {
    const content = 'This is a text message'
    vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([makeTextMessage(content)])

    render(<AgentOutputViewer agentId="agent-1" />)

    expect(screen.getByText(content)).toBeInTheDocument()

    // No chevron icons for text messages
    const svgCount = document.querySelectorAll('svg').length
    // Only the header bar icons (Pause) should be present, no expand/collapse chevrons
    expect(screen.queryByText('Result')).not.toBeInTheDocument()
    expect(screen.queryByText('System')).not.toBeInTheDocument()
  })

  it('always renders tool_call messages fully', () => {
    const content = 'Read(file.txt)'
    vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([makeToolCallMessage(content, 'Read')])

    render(<AgentOutputViewer agentId="agent-1" />)

    expect(screen.getByText(content)).toBeInTheDocument()
    // The tool name badge should be visible
    expect(screen.getByText('Read')).toBeInTheDocument()
  })

  it('always renders error messages with Error badge', () => {
    const content = 'Something went wrong'
    vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([makeErrorMessage(content)])

    render(<AgentOutputViewer agentId="agent-1" />)

    expect(screen.getByText('Error')).toBeInTheDocument()
    expect(screen.getByText(content)).toBeInTheDocument()
  })

  it('always renders session_end messages with session completed text', () => {
    vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([makeSessionEndMessage('Session completed')])

    render(<AgentOutputViewer agentId="agent-1" />)

    expect(screen.getByText('Session completed')).toBeInTheDocument()
  })

  describe('Todo strip', () => {
    it('is absent when no TodoWrite tool_call exists', () => {
      vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([
        makeTextMessage('some output'),
        makeToolCallMessage('Read(file.txt)', 'Read'),
      ])

      render(<AgentOutputViewer agentId="agent-1" />)

      expect(screen.queryByText('TASKS')).not.toBeInTheDocument()
    })

    it('is present with TASKS label and all todos when a TodoWrite tool_call exists', () => {
      vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([
        makeTodoWriteMessage([
          { content: 'Fix bug', status: 'completed', activeForm: 'Fixing bug' },
          { content: 'Add tests', status: 'in_progress', activeForm: 'Adding tests' },
          { content: 'Update docs', status: 'pending', activeForm: 'Updating docs' },
        ]),
      ])

      render(<AgentOutputViewer agentId="agent-1" />)

      expect(screen.getByText('TASKS')).toBeInTheDocument()
      expect(screen.getByText('Fix bug')).toBeInTheDocument()
      expect(screen.getByText('Add tests')).toBeInTheDocument()
      expect(screen.getByText('Update docs')).toBeInTheDocument()
    })

    it('shows only the most recent TodoWrite todos', () => {
      vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([
        makeTodoWriteMessage([
          { content: 'Old task', status: 'pending', activeForm: 'Old task' },
        ]),
        makeTodoWriteMessage([
          { content: 'New task', status: 'in_progress', activeForm: 'New task' },
        ]),
      ])

      render(<AgentOutputViewer agentId="agent-1" />)

      expect(screen.getByText('New task')).toBeInTheDocument()
      expect(screen.queryByText('Old task')).not.toBeInTheDocument()
    })

    it('renders Loader2 with animate-spin for in_progress todo', () => {
      vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([
        makeTodoWriteMessage([
          { content: 'Work', status: 'in_progress', activeForm: 'Working' },
        ]),
      ])

      render(<AgentOutputViewer agentId="agent-1" />)

      // Find SVG with animate-spin class (Loader2)
      const spinningIcon = document.querySelector('svg.animate-spin')
      expect(spinningIcon).toBeInTheDocument()
    })

    it('renders CheckCircle2 and strikethrough text for completed todo', () => {
      vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([
        makeTodoWriteMessage([
          { content: 'Done', status: 'completed', activeForm: 'Done' },
        ]),
      ])

      render(<AgentOutputViewer agentId="agent-1" />)

      const doneText = screen.getByText('Done')
      expect(doneText.className).toContain('line-through')
    })

    it('renders Circle and muted text without strikethrough for pending todo', () => {
      vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([
        makeTodoWriteMessage([
          { content: 'Later', status: 'pending', activeForm: 'Later' },
        ]),
      ])

      render(<AgentOutputViewer agentId="agent-1" />)

      const laterText = screen.getByText('Later')
      expect(laterText.className).not.toContain('line-through')
    })

    it('renders at most 5 todo rows and shows overflow count when there are 7 todos', () => {
      const todos = Array.from({ length: 7 }, (_, i) => ({
        content: `Task ${i + 1}`,
        status: 'pending',
        activeForm: `Task ${i + 1}`,
      }))
      vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([
        makeTodoWriteMessage(todos),
      ])

      render(<AgentOutputViewer agentId="agent-1" />)

      // Only first 5 are rendered
      expect(screen.getByText('Task 1')).toBeInTheDocument()
      expect(screen.getByText('Task 5')).toBeInTheDocument()
      expect(screen.queryByText('Task 6')).not.toBeInTheDocument()
      expect(screen.queryByText('Task 7')).not.toBeInTheDocument()

      // Overflow indicator
      expect(screen.getByText('+ 2 more')).toBeInTheDocument()
    })
  })

  describe('Task result collapsed preview', () => {
    it('shows subagent_type result label when meta.toolName is Task with subagent_type', () => {
      vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([
        makeToolResultMessageWithMeta('raw subagent output content '.repeat(5), {
          toolName: 'Task',
          toolInput: { subagent_type: 'Explore', description: 'desc', prompt: 'prompt' },
        }),
      ])

      render(<AgentOutputViewer agentId="agent-1" />)

      expect(screen.getByText('Explore result')).toBeInTheDocument()
    })

    it('shows Subagent result when meta.toolName is Task but no subagent_type', () => {
      vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([
        makeToolResultMessageWithMeta('raw subagent output content '.repeat(5), {
          toolName: 'Task',
          toolInput: { description: 'desc', prompt: 'prompt' },
        }),
      ])

      render(<AgentOutputViewer agentId="agent-1" />)

      expect(screen.getByText('Subagent result')).toBeInTheDocument()
    })

    it('shows first 80 chars of content for non-Task tool results', () => {
      const content = 'some file content that is longer than 80 characters '.repeat(3)
      vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([
        makeToolResultMessageWithMeta(content, {
          toolName: 'Read',
        }),
      ])

      render(<AgentOutputViewer agentId="agent-1" />)

      expect(screen.getByText(content.substring(0, 80))).toBeInTheDocument()
    })
  })
})