const { chromium, devices } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: true });
  
  // Start with iPhone SE
  const iPhoneSE = devices['iPhone SE'];
  const context = await browser.newContext({ ...iPhoneSE });
  const page = await context.newPage();
  
  const logs = [];
  page.on('console', msg => logs.push(`[${msg.type()}] ${msg.text()}`));

  await page.goto('http://localhost:5173');
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(2000);

  const editorCount = await page.locator('.ProseMirror').count();
  console.log('Editor count:', editorCount);
  if (editorCount === 0) {
    console.log('No editor - auth issue still?');
    const text = await page.locator('body').innerText();
    console.log(text.substring(0, 200));
    await browser.close();
    return;
  }

  const checkMenus = async (label) => {
    const result = await page.evaluate(() => {
      const menus = document.querySelectorAll('.ka-bubble-menu');
      return Array.from(menus).map((el, i) => {
        const s = window.getComputedStyle(el);
        return { i, visibility: s.visibility, opacity: s.opacity };
      });
    });
    console.log(`[${label}]`, JSON.stringify(result));
  };

  await checkMenus('initial-SE');
  
  // Simulate device switch: change viewport to iPhone XR size
  await page.setViewportSize({ width: 414, height: 896 });
  await page.waitForTimeout(1000);
  await checkMenus('after-resize-to-XR');
  
  // Simulate another device switch back
  await page.setViewportSize({ width: 375, height: 667 });
  await page.waitForTimeout(1000);
  await checkMenus('after-resize-back-SE');
  
  // Check if tapping editor now shows menus
  await page.locator('.ProseMirror').first().tap();
  await page.waitForTimeout(500);
  await checkMenus('after-tap');

  console.log('--- Browser logs ---');
  logs.forEach(l => console.log(l));

  await browser.close();
})();