import { fireEvent, render, screen } from '@testing-library/react'
import { describe, expect, it, vi } from 'vitest'
import { MapCanvas } from './MapCanvas'
import type { MapNodeModel } from './MapNode'

const NODES: MapNodeModel[] = [
  {
    id: 'host:laptop',
    title: 'laptop · e14',
    pulse: 'busy',
    chips: [{ label: 'plan: autonomy-p4' }],
    x: 8,
    y: 30,
    inspectorKvs: [{ label: 'Runner', value: 'busy' }],
    actions: [{ label: 'Kill', primary: true }],
  },
  {
    id: 'github',
    title: 'GitHub · Actions',
    pulse: 'ok',
    chips: [{ label: 'multideal #4821 ✗', hot: true }],
    x: 46,
    y: 12,
    inspectorKvs: [{ label: 'queue', value: '0' }],
    actions: [],
  },
]

describe('MapCanvas', () => {
  it('renders nodes, inspector for the selected node, and SVG edges', () => {
    render(
      <MapCanvas
        nodes={NODES}
        edges={[{ from: 'host:laptop', to: 'github', dashed: true }]}
        selectedNodeId="host:laptop"
        onSelectNode={() => {}}
      />,
    )
    expect(screen.getByTestId('map-canvas')).toBeInTheDocument()
    expect(screen.getByTestId('map-inspector')).toBeInTheDocument()
    expect(screen.getByText('Runner')).toBeInTheDocument()
    expect(screen.getByRole('button', { name: 'Kill' })).toBeInTheDocument()
    expect(document.querySelector('svg line')).toBeTruthy()
  })

  it('switches inspector content when another node is selected', () => {
    const onSelectNode = vi.fn()
    render(
      <MapCanvas nodes={NODES} edges={[]} selectedNodeId="host:laptop" onSelectNode={onSelectNode} />,
    )
    fireEvent.click(screen.getByRole('button', { name: /GitHub/ }))
    expect(onSelectNode).toHaveBeenCalledWith('github')
  })
})