/**
 * Sprint 7 item 4 — визуально подтверждаем shimmer skeleton на DataTable.
 * Чтобы скелет видно было дольше, искусственно тормозим ответ через
 * page.route() — 4s задержка на /api/catalog/products.
 */
import { chromium } from 'playwright'
import { makeClient, login } from '../lib/api.js'

const BASE = process.env.E2E_ADMIN_URL ?? 'https://test.admin.food-market.kz'
const TS = Date.now()
const EMAIL = process.env.E2E_EMAIL ?? `skel-shot-${TS}@food-market.local`
const PASS = process.env.E2E_PASSWORD ?? 'SkelShot12345!'

async function ensureSession() {
  const api = makeClient()
  const r = await api.post('/api/auth/signup', {
    email: EMAIL, password: PASS,
    organizationName: `SkelShot ${TS}`, phone: '+77011190001', plan: 'start',
  })
  if (r.status !== 200 && r.status !== 409) throw new Error(`signup ${r.status}: ${JSON.stringify(r.data)}`)
  return login(EMAIL, PASS)
}

async function main() {
  const sess = await ensureSession()
  console.log(`[shot] session ${sess.email}`)
  const browser = await chromium.launch({ headless: true })
  const ctx = await browser.newContext({ ignoreHTTPSErrors: true, viewport: { width: 1280, height: 800 } })
  const page = await ctx.newPage()
  await page.goto(`${BASE}/`)
  await page.evaluate(({ token }) => localStorage.setItem('fm.access_token', token), { token: sess.accessToken })

  // Замедляем именно products list endpoint — 3 сек задержка, чтобы скелет
  // успел отрисоваться, а Playwright успел сделать снимок.
  await page.route('**/api/catalog/products**', async route => {
    await new Promise(r => setTimeout(r, 3000))
    await route.continue()
  })

  await page.goto(`${BASE}/catalog/products`, { waitUntil: 'domcontentloaded' })
  // Ждём появления первого <tbody tr> со скелетом (animate-pulse class)
  await page.waitForSelector('tbody .animate-pulse', { timeout: 8000 })
  await page.waitForTimeout(300) // дать pulse-анимации стабилизироваться
  await page.screenshot({ path: `reports/skeleton-table-${TS}.png` })
  console.log(`[shot] saved → reports/skeleton-table-${TS}.png`)
  await browser.close()
}

main().catch(err => { console.error(err); process.exit(1) })