import { test, expect } from '@playwright/test'
import { login, STUDENT, QUIZ_SLUG } from './helpers.js'

// 핵심 사용자 여정: 로그인 → 학습 센터 → 강좌 → 퀴즈 채점.
// (프론트 SPA 라우팅 + 백엔드 API + DB가 함께 도는 통합 경로를 실제로 태운다.)

test.beforeEach(async ({ page }) => {
  await login(page, STUDENT)
})

test('학습 센터 → 카테고리 → 강좌 열기', async ({ page }) => {
  await page.goto('/learn')
  await expect(page.getByRole('heading', { name: '어썸데브 학습 센터' })).toBeVisible()

  // 강좌 카드(링크)가 보이고, 클릭하면 강좌 페이지로 이동한다.
  const courseLink = page.locator('a[href^="/learn/"]').first()
  await expect(courseLink).toBeVisible()
  await courseLink.click()
  await expect(page).toHaveURL(/\/learn\/[^/]+$/)
})

test('퀴즈 풀기 → 제출 → 채점 결과 표시', async ({ page }) => {
  test.skip(!QUIZ_SLUG, '퀴즈가 있는 코스 slug가 주입되지 않았음(E2E_QUIZ_SLUG)')

  // "안 푼 문제가 있어요" 확인창이 뜨면 자동 수락(모두 풀 것이므로 보통 안 뜬다).
  page.on('dialog', (dialog) => dialog.accept())

  await page.goto(`/learn/${QUIZ_SLUG}/quiz`)

  // 제출 버튼이 보일 때까지 = 문항 로드 완료.
  const submit = page.getByRole('button', { name: '제출하고 채점받기' })
  await expect(submit).toBeVisible()

  // 각 문항 카드에서 첫 번째 보기를 고른다.
  // 보기는 라디오를 감싼 <label>이므로, 라벨을 클릭하면 해당 보기가 선택된다.
  const questionCards = page.locator('.card').filter({ has: page.locator('input[type=radio]') })
  const count = await questionCards.count()
  expect(count).toBeGreaterThan(0)
  for (let i = 0; i < count; i++) {
    await questionCards.nth(i).locator('label').first().click()
  }

  await submit.click()

  // 서버 채점 결과가 표시된다(점수).
  await expect(page.getByText(/채점 완료/)).toBeVisible()
  await expect(page.locator('.stat-num')).toContainText('/')
})
