const assert = require('node:assert/strict');
const { chromium } = require('playwright');

const baseUrl = process.env.YOUTHOME_WEB_URL || 'http://127.0.0.1:4173/pages';

(async () => {
  const browser = await chromium.launch({ channel: 'msedge', headless: true });
  const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
  await page.addInitScript(() => localStorage.setItem('youthome:web:dataSource', 'local'));
  const errors = [];
  page.on('pageerror', (error) => errors.push(error.message));

  await page.goto(`${baseUrl}/me.html`);
  await page.locator('body.web-shell-ready').waitFor();
  const cards = await page.locator('.content-grid .content-card').evaluateAll((nodes) =>
    nodes.map((card) => ({ href: card.dataset.href, title: card.querySelector('.card-title')?.textContent.trim() }))
  );
  assert.equal(cards.length, 11);
  assert.equal(new Set(cards.map((card) => card.href)).size, cards.length);
  const cardStyles = await page.locator('.content-grid .post-card').evaluateAll((nodes) => nodes.map((card) => ({
    previewCount: card.querySelectorAll('.post-img-cell').length,
    badge: card.querySelector('.card-badge')?.textContent.trim(),
    statCount: card.querySelectorAll('.card-stat').length,
    thumbnailRatio: card.querySelector('.card-thumbnail').clientWidth / card.querySelector('.card-thumbnail').clientHeight,
    backgrounds: Array.from(card.querySelectorAll('.post-img-cell'), (cell) => getComputedStyle(cell).backgroundImage)
  })));
  assert.ok(cardStyles.every((card) => card.previewCount === 4 && card.badge === '动态' && card.statCount === 2));
  assert.ok(cardStyles.every((card) => [4 / 5, 1, 4 / 3].some((ratio) => Math.abs(card.thumbnailRatio - ratio) < 0.02)));
  assert.ok(cardStyles.every((card) => card.backgrounds.every((background) => background.startsWith('linear-gradient'))));

  for (const card of cards) {
    await page.goto(`${baseUrl}/me.html`);
    await page.locator(`.content-card[data-href="${card.href}"]`).click();
    await page.waitForURL(`**/${card.href}`);
    await page.locator('body.web-shell-ready').waitFor();
    assert.equal(await page.title(), `${card.title} - 青核 Youthome`);
    if (card.href.startsWith('post-detail.html')) {
      assert.equal(await page.locator('.notification-post-title').innerText(), card.title);
      assert.equal((await page.locator('.post-detail-content').innerText()).includes('今天图书馆自习的人好多'), false);
      assert.equal(await page.locator('html.notification-route-pending').count(), 0);
    } else {
      assert.equal(await page.locator('.video-title').innerText(), card.title);
      assert.equal(await page.locator('.profile-video-unavailable').innerText(), '视频文件尚未接入，暂时无法播放');
      assert.equal(await page.locator('.comments-section:visible').count(), 0);
      assert.equal(await page.locator('html.profile-video-route-pending').count(), 0);
    }
  }

  await page.goto(`${baseUrl}/me.html`);
  await page.setViewportSize({ width: 390, height: 844 });
  const overflow = await page.evaluate(() => document.documentElement.scrollWidth - innerWidth);
  assert.ok(overflow <= 1, `personal center horizontal overflow: ${overflow}px`);
  assert.deepEqual(errors, []);
  await browser.close();
  console.log('11 personal-center works route to matching detail in Edge');
})().catch((error) => {
  console.error(error);
  process.exitCode = 1;
});