/**
 * Shared Mobile Test Utilities for Playwright
 *
 * Common constants and helper functions used across mobile test files.
 * Uses CommonJS to match existing auth.js pattern.
 */

// Constants
const MIN_TOUCH_TARGET = 44;
const MIN_ELEMENT_SPACING = 8;
const MIN_BUTTON_SPACING = 8;
const MIN_TEXT_SIZE = 12;
const MOBILE_NAV_HEIGHT = 56;
const MOBILE_NAV_SELECTOR = '.ldr-mobile-bottom-nav';
const SIDEBAR_SELECTOR = '.ldr-sidebar';
const SHEET_SELECTOR = '.ldr-mobile-sheet, [class*="sheet"]:not([class*="stylesheet"]), [class*="modal"]:not(.ldr-mode-selection), [class*="drawer"], [role="dialog"]';

// Breakpoints (matches CSS breakpoints)
const BREAKPOINTS = {
  MOBILE_MAX: 767,
  TABLET_MIN: 768,
  TABLET_MAX: 991,
  DESKTOP_MIN: 992,
  EXTRA_SMALL: 380,
};

// Pages to test
// loadState: pages with continuous network activity use 'domcontentloaded'
const PAGES = [
  { path: '/', name: 'Research' },
  { path: '/history/', name: 'History' },
  { path: '/settings/', name: 'Settings' },
  { path: '/news/', name: 'News Feed' },
  { path: '/library/', name: 'Library' },
  { path: '/metrics/', name: 'Metrics', loadState: 'domcontentloaded' },
  { path: '/benchmark/', name: 'Benchmark', loadState: 'domcontentloaded' },
  { path: '/metrics/context-overflow', name: 'Context Overflow', loadState: 'domcontentloaded' },
  { path: '/metrics/star-reviews', name: 'Star Reviews' },
  { path: '/metrics/costs', name: 'Cost Analytics' },
  { path: '/metrics/links', name: 'Link Analytics' },
];

/**
 * Wait for a page to load with appropriate state based on page type
 * @param {import('@playwright/test').Page} page - Playwright page object
 * @param {Object|string} pageInfoOrPath - Page info object or path string
 */
async function waitForPageLoad(page, pageInfoOrPath) {
  const path = typeof pageInfoOrPath === 'string' ? pageInfoOrPath : pageInfoOrPath.path;
  const pageInfo = typeof pageInfoOrPath === 'object' ? pageInfoOrPath : PAGES.find(p => p.path === path) || {};
  const loadState = pageInfo.loadState || 'domcontentloaded';

  await page.waitForLoadState(loadState);
  await page.waitForTimeout(200);

  // Additional waits for specific pages
  if (path === '/settings/' || path === '/settings') {
    await page.waitForSelector('.ldr-loading-spinner', { state: 'hidden', timeout: 10000 }).catch(() => {});
  } else if (path.includes('/benchmark')) {
    await page.waitForTimeout(300);
  } else if (path.includes('/metrics')) {
    await page.waitForTimeout(200);
  }
}

/**
 * Remove sheet elements from DOM to prevent bleeding in screenshots.
 *
 * The sheet menu is a fixed-position element that Playwright captures in full-page screenshots
 * even when hidden with CSS transforms. We must completely remove it from the DOM.
 *
 * @param {import('@playwright/test').Page} page - Playwright page object
 * @param {Object} options - Options for sheet removal
 * @param {boolean} options.preserveMobileNav - If true, keep mobile nav in DOM (default: false)
 */
async function ensureSheetsClosed(page, options = {}) {
  const { preserveMobileNav = false } = options;

  // Remove sheet elements from DOM
  await page.evaluate((preserveNav) => {
    // Remove ALL sheet-related elements (use broader selectors)
    const selectors = [
      '.ldr-mobile-sheet-menu',
      '.ldr-mobile-sheet-overlay',
      '.ldr-mobile-sheet',
      '[class*="sheet"]:not([class*="stylesheet"])',
      '[class*="drawer"]',
      '[role="dialog"]:not(.ldr-mode-selection)'
    ];

    // Only remove mobile nav if not preserving it
    if (!preserveNav) {
      selectors.push('.ldr-mobile-bottom-nav');
    }

    selectors.forEach(selector => {
      document.querySelectorAll(selector).forEach(el => {
        el.remove();
      });
    });

    // Clear MobileNavigation references (but preserve nav reference if needed)
    if (window.mobileNav && window.mobileNav.elements) {
      window.mobileNav.elements.sheet = null;
      window.mobileNav.elements.overlay = null;
      if (!preserveNav) {
        window.mobileNav.elements.nav = null;
      }
    }
  }, preserveMobileNav);

  // Force reflow
  await page.evaluate(() => document.body.offsetHeight);

  // Small wait for any async operations
  await page.waitForTimeout(50);
}

/**
 * Check if running on tablet device.
 *
 * @param {import('@playwright/test').TestInfo} testInfo - Playwright test info
 * @returns {boolean} True if running on iPad or other tablet device
 */
function isTablet(testInfo) {
  return testInfo.project.name.includes('iPad');
}

module.exports = {
  MIN_TOUCH_TARGET,
  MIN_ELEMENT_SPACING,
  MIN_BUTTON_SPACING,
  MIN_TEXT_SIZE,
  MOBILE_NAV_HEIGHT,
  MOBILE_NAV_SELECTOR,
  SIDEBAR_SELECTOR,
  SHEET_SELECTOR,
  BREAKPOINTS,
  PAGES,
  ensureSheetsClosed,
  isTablet,
  waitForPageLoad,
};
