import { describe, it, expect, vi } from 'vitest'
import { render, screen, fireEvent } from '@testing-library/react'
import React, { useState } from 'react'
import SectionCanvas from '@/components/SectionCanvas'
import type { Section } from '@/lib/state/store'

type DragEvt = { active: { id: string }; over: { id: string } }

vi.mock('@dnd-kit/core', async () => {
  const actual = await vi.importActual<typeof import('@dnd-kit/core')>('@dnd-kit/core')
  return {
    ...actual,
    DndContext: ({ onDragEnd, children }: { onDragEnd?: (e: DragEvt) => void; children: React.ReactNode }) => (
      <div data-testid="mock-dnd" onClick={() => onDragEnd?.({ active: { id: 'sec-0' }, over: { id: 'sec-2' } })}>
        {children}
      </div>
    ),
    closestCenter: vi.fn(),
    PointerSensor: function () {},
    useSensor: vi.fn(() => ({})),
    useSensors: vi.fn(() => []),
  }
})

vi.mock('@dnd-kit/sortable', async () => {
  const actual = await vi.importActual<typeof import('@dnd-kit/sortable')>('@dnd-kit/sortable')
  return {
    ...actual,
    SortableContext: ({ children }: { children: React.ReactNode }) => <>{children}</>,
    useSortable: () => ({
      attributes: {} as Record<string, unknown>,
      listeners: {} as Record<string, unknown>,
      setNodeRef: () => {},
      transform: null as unknown,
      transition: null as unknown,
    }),
    verticalListSortingStrategy: vi.fn(),
  }
})

function Wrapper() {
  const [sections, setSections] = useState<Section[]>([
    { type: 'hero', props: { heading: 'Welcome', subheading: '' } },
    { type: 'faq', props: { items: [] } },
    { type: 'cta', props: { text: 'Go', href: '#' } },
  ])
  return (
    <SectionCanvas
      sections={sections}
      onMove={(from, to) => {
        const next = sections.slice()
        const [sp] = next.splice(from, 1)
        next.splice(to, 0, sp)
        setSections(next)
      }}
      onRemove={(i) => setSections((prev) => prev.filter((_, idx) => idx !== i))}
    />
  )
}

describe('SectionCanvas - dnd', () => {
  it('드래그 종료 이벤트로 섹션 순서를 변경한다', () => {
    render(<Wrapper />)
    const list = screen.getByTestId('section-canvas')
    let items = list.querySelectorAll('li')
    expect(items[0].textContent).toMatch(/hero/)
    expect(items[1].textContent).toMatch(/faq/)
    expect(items[2].textContent).toMatch(/cta/)

    fireEvent.click(screen.getByTestId('mock-dnd'))

    items = list.querySelectorAll('li')
    expect(items[0].textContent).toMatch(/faq/)
    expect(items[1].textContent).toMatch(/cta/)
    expect(items[2].textContent).toMatch(/hero/)
  })
})