import { expect, test } from '@playwright/test'

/**
 * 격리된 테스트 관리자로 로그인하고 지연·실패를 제어할 미디어 응답을 준비한다.
 * @param {import('@playwright/test').Page} page - 테스트 페이지
 * @param {number} count - 테스트 미디어 개수
 * @returns {Promise<Object>} 요청과 응답 제어 상태
 */
const openMediaLibrary = async (page, count = 3) => {
  await page.goto('/admin/login')
  await page.waitForLoadState('networkidle')
  await page.getByLabel('이메일').fill('playwright-admin@example.com')
  await page.locator('input[type="password"]').fill('playwright-admin-password')
  await page.getByRole('button', { name: '로그인', exact: true }).click()
  await page.waitForURL(/\/admin\/?$/)
  await page.waitForLoadState('networkidle')

  const state = {
    folders: ['미분류', '보관', '빈 폴더'],
    items: Array.from({ length: count }, (_, index) => ({
      url: `/uploads/media-interaction-${index}.webp`,
      name: `사진-${index + 1}.webp`,
      title: `사진 ${index + 1}`,
      category: '미분류',
      kind: 'image',
      usage: index === 0 ? [{ title: '사용 중인 게시물' }] : []
    })),
    moves: [],
    moveGate: null,
    folderGate: null,
    failMove: false,
    failList: false
  }

  await page.route('**/uploads/media-interaction-*.webp', (route) => route.fulfill({
    contentType: 'image/svg+xml',
    body: '<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><rect width="160" height="160" fill="#dbeafe"/><circle cx="80" cy="80" r="40" fill="#0284c7"/></svg>'
  }))
  await page.route('**/admin/api/media-folders', async (route) => {
    if (route.request().method() === 'POST') {
      const { path } = route.request().postDataJSON()
      state.folders.push(path)
      await route.fulfill({ json: { path } })
      return
    }
    await route.fulfill({ json: state.folders })
  })
  await page.route(/\/admin\/api\/media(?:\?|$)/, async (route) => {
    if (route.request().method() === 'PUT') {
      const body = route.request().postDataJSON()
      state.moves.push(body)
      await state.moveGate?.promise
      if (state.failMove) {
        await route.fulfill({ status: 500, json: { message: '이동 실패 테스트' } })
        return
      }
      state.items.forEach((item) => {
        if (body.urls.includes(item.url)) item.category = body.category
      })
      await route.fulfill({ json: [] })
      return
    }

    const query = new URL(route.request().url()).searchParams
    const folder = query.get('folder') || ''
    const pageNumber = Number(query.get('page') || 1)
    const pageSize = Number(query.get('pageSize') || 50)
    if (folder === '보관') await state.folderGate?.promise
    if (state.failList) {
      await route.fulfill({ status: 500, json: { message: '목록 실패 테스트' } })
      return
    }
    const items = state.items.filter((item) => !folder || item.category === folder)
    const folders = Object.fromEntries(state.folders.map((path) => [path, state.items.filter((item) => item.category === path).length]))
    await route.fulfill({
      json: {
        items: items.slice((pageNumber - 1) * pageSize, pageNumber * pageSize),
        pagination: { page: pageNumber, pageSize, total: items.length, pageCount: Math.max(1, Math.ceil(items.length / pageSize)) },
        counts: { tabs: { library: state.items.length }, folders, kinds: { all: items.length, image: items.length }, usage: { all: items.length, unused: items.filter((item) => !item.usage.length).length } }
      }
    })
  })

  await page.getByRole('link', { name: '미디어', exact: true }).click()
  await expect(page.locator('.admin-media__item')).toHaveCount(Math.min(count, 50))
  return state
}

/**
 * 실제 마우스로 썸네일 드래그를 시작하고 대상 폴더 위에서 멈춘다.
 * @param {import('@playwright/test').Page} page - 테스트 페이지
 * @param {string} folder - 대상 폴더
 * @returns {Promise<void>}
 */
const dragMediaOverFolder = async (page, folder) => {
  const source = await page.locator('.admin-media__image').first().boundingBox()
  const target = await page.getByTitle(folder, { exact: true }).boundingBox()
  const sourceX = source.x + source.width - 8
  const sourceY = source.y + source.height - 8
  await page.mouse.move(sourceX, sourceY)
  await page.mouse.down()
  await page.mouse.move(sourceX - 15, sourceY, { steps: 5 })
  await page.mouse.move(target.x + target.width / 2, target.y + target.height / 2, { steps: 10 })
  await page.mouse.move(target.x + target.width / 2 + 1, target.y + target.height / 2)
}

test('다중 선택·폴더 생성·드롭 강조·일괄 이동 상태를 표시한다', async ({ page }, testInfo) => {
  const state = await openMediaLibrary(page)
  await page.getByRole('button', { name: '전체 선택', exact: true }).click()
  await expect(page.locator('.admin-media__selection-count')).toHaveText('3개 선택됨')
  await expect(page.locator('.admin-media__item--selected')).toHaveCount(3)

  await page.getByRole('button', { name: '폴더 추가', exact: true }).click()
  await page.getByLabel('폴더 이름').fill('새 정리 폴더')
  await page.getByRole('button', { name: '만들기', exact: true }).click()
  await expect(page.getByTitle('새 정리 폴더', { exact: true })).toBeVisible()
  await expect(page.locator('.admin-media__selection-count')).toHaveText('3개 선택됨')

  state.moveGate = Promise.withResolvers()
  await dragMediaOverFolder(page, '새 정리 폴더')
  await expect(page.locator('.admin-media__folder-row--drop-target')).toContainText('놓으면 3개 이동')
  await expect(page.locator('.admin-media__drag-preview')).toHaveText('미디어 3개 이동')
  await expect(page.locator('.admin-media__item--dragging')).toHaveCount(3)
  await page.screenshot({ path: testInfo.outputPath('media-drag.png'), fullPage: true, animations: 'disabled' })
  await page.mouse.up()
  await expect(page.locator('.admin-media__move-status')).toContainText('3개 미디어를 「새 정리 폴더」 폴더로 이동하는 중')
  await expect(page.locator('.admin-media__select-all')).toBeDisabled()
  expect(state.moves[0]).toEqual({ urls: state.items.map((item) => item.url), category: '새 정리 폴더' })
  state.moveGate.resolve()
  await expect(page.getByText('3개 미디어를 「새 정리 폴더」 폴더로 이동했습니다.', { exact: true })).toBeVisible()
  await expect(page.locator('.admin-media__move-status')).toHaveCount(0)
  await expect(page.locator('.admin-media__selection-count')).toHaveCount(0)
  await page.getByTitle('새 정리 폴더', { exact: true }).click()
  await expect(page.locator('.admin-media__item')).toHaveCount(3)
})

test('드래그 취소·외부 드롭을 무시하고 이동 실패 시 선택을 유지한다', async ({ page }) => {
  const state = await openMediaLibrary(page)
  await page.getByRole('button', { name: '전체 선택', exact: true }).click()
  await dragMediaOverFolder(page, '보관')
  await page.keyboard.press('Escape')
  await page.mouse.up()
  await expect(page.locator('.admin-media__folder-row--drop-target')).toHaveCount(0)
  await expect(page.locator('.admin-media__drag-preview')).toHaveCount(0)
  await expect(page.locator('.admin-media__item--dragging')).toHaveCount(0)
  await page.getByTitle('보관', { exact: true }).dispatchEvent('drop')
  expect(state.moves).toHaveLength(0)

  state.failMove = true
  await dragMediaOverFolder(page, '보관')
  await page.mouse.up()
  await expect(page.getByText('이동 실패 테스트', { exact: true })).toBeVisible()
  await expect(page.locator('.admin-media__selection-count')).toHaveText('3개 선택됨')
  await expect(page.locator('.admin-media__move-status')).toHaveCount(0)
  await expect(page.locator('.admin-media__select-all')).toBeEnabled()
})

test('폴더 전환은 이전 목록을 숨기고 마지막 응답·오류·재시도를 구분한다', async ({ page }, testInfo) => {
  const state = await openMediaLibrary(page)
  state.folderGate = Promise.withResolvers()
  await page.getByTitle('보관', { exact: true }).click()
  await expect(page.locator('.admin-media__loading')).toContainText('보관 불러오는 중')
  await expect(page.locator('.admin-media__item')).toHaveCount(0)
  await expect(page.locator('.admin-media__empty')).toHaveCount(0)
  await expect(page.locator('.admin-media__select-all')).toBeDisabled()
  await expect(page.getByTitle('미분류', { exact: true })).toBeVisible()
  await expect(page.locator('.admin-media__folder-row').filter({ has: page.getByTitle('보관', { exact: true }) })).toHaveCSS('background-color', 'rgb(21, 23, 26)')
  await page.screenshot({ path: testInfo.outputPath('media-loading.png'), fullPage: true, animations: 'disabled' })

  await page.getByTitle('미분류', { exact: true }).click()
  await expect(page.locator('.admin-media__item')).toHaveCount(3)
  state.folderGate.resolve()
  await expect(page.locator('.admin-media__folder-title')).toHaveText('미분류')
  await expect(page.locator('.admin-media__item')).toHaveCount(3)

  state.failList = true
  await page.getByTitle('빈 폴더', { exact: true }).click()
  await expect(page.locator('.admin-media__load-error')).toBeVisible()
  await expect(page.locator('.admin-media__empty')).toHaveCount(0)
  state.failList = false
  await page.getByRole('button', { name: '다시 시도', exact: true }).click()
  await expect(page.locator('.admin-media__empty')).toBeVisible()
  await expect(page.locator('.admin-media__load-error')).toHaveCount(0)
})

test('전체 선택은 현재 페이지에만 적용하고 사용 중인 파일도 포함한다', async ({ page }) => {
  await openMediaLibrary(page, 55)
  await page.getByRole('button', { name: '전체 선택', exact: true }).click()
  await expect(page.locator('.admin-media__selection-count')).toHaveText('50개 선택됨')
  await expect(page.locator('.admin-media__select-toggle[aria-pressed="true"]')).toHaveCount(50)
  await page.getByRole('button', { name: '전체 선택 해제', exact: true }).click()
  await expect(page.locator('.admin-media__selection-count')).toHaveCount(0)
  await page.getByRole('button', { name: '다음 페이지', exact: true }).click()
  await expect(page.locator('.admin-media__item')).toHaveCount(5)
  await page.getByRole('button', { name: '전체 선택', exact: true }).click()
  await expect(page.locator('.admin-media__selection-count')).toHaveText('5개 선택됨')
})