/**
 * All Pages Mobile Layout Tests
 *
 * Comprehensive mobile UI tests for all major pages in the application.
 * Tests are designed to identify layout issues on mobile devices:
 * - Horizontal overflow
 * - Hidden content behind mobile navigation
 * - Touch target sizing
 * - Mobile navigation visibility
 * - Sidebar behavior
 *
 * Pages tested (in priority order):
 * 1. / - Research (Home)
 * 2. /history/ - History
 * 3. /settings/ - Settings
 * 4. /news/ - News Feed
 * 5. /library/ - Library
 * 6. /metrics/ - Metrics Dashboard
 * 7. /benchmark/ - Benchmark
 *
 * Note: Authentication is handled by auth.setup.js via storageState
 */

import { test, expect } from '@playwright/test';
const {
  MIN_TOUCH_TARGET,
  MOBILE_NAV_SELECTOR,
  SIDEBAR_SELECTOR,
} = require('./helpers/mobile-utils');

// Pages to test
// Note: Some pages use continuous network activity, so we use 'domcontentloaded' instead of 'networkidle'
const PAGES = [
  { path: '/', name: 'Research (Home)', priority: 'high' },
  { path: '/history/', name: 'History', priority: 'high' },
  { path: '/settings/', name: 'Settings', priority: 'high' },
  { path: '/news/', name: 'News Feed', priority: 'high' },
  { path: '/library/', name: 'Library', priority: 'high' },
  { path: '/metrics/', name: 'Metrics Dashboard', priority: 'high' },
  { path: '/benchmark/', name: 'Benchmark', priority: 'medium' },
  { path: '/metrics/context-overflow', name: 'Context Overflow', priority: 'medium' },
  { path: '/metrics/star-reviews', name: 'Star Reviews', priority: 'medium' },
  { path: '/metrics/costs', name: 'Cost Analytics', priority: 'medium' },
  { path: '/metrics/links', name: 'Link Analytics', priority: 'medium' },
];

/**
 * Wait for a page to load with appropriate state
 */
async function waitForPageLoad(page, pageInfo) {
  const loadState = pageInfo.loadState || 'domcontentloaded';
  await page.waitForLoadState(loadState);

  // Additional waits for specific pages
  if (pageInfo.path === '/settings/') {
    await page.waitForSelector('.ldr-loading-spinner', { state: 'hidden', timeout: 10000 }).catch(() => {});
  } else if (pageInfo.path === '/benchmark/') {
    // Wait for benchmark form to load
    await page.waitForSelector('#benchmark-form, form, .ldr-card', { timeout: 10000 }).catch(() => {});
  } else if (pageInfo.path.includes('/metrics')) {
    // Wait for metrics content to load
    await page.waitForSelector('#metrics-content, .ldr-metrics-grid, .ldr-metric-card', { timeout: 10000 }).catch(() => {});
  }
}

// ============================================
// HORIZONTAL OVERFLOW TESTS
// ============================================

test.describe('All Pages - No Horizontal Overflow', () => {
  for (const pageInfo of PAGES) {
    test(`${pageInfo.name} has no horizontal overflow`, async ({ page }) => {
      await page.goto(pageInfo.path);
      await waitForPageLoad(page, pageInfo);

      const hasOverflow = await page.evaluate(() =>
        document.documentElement.scrollWidth > window.innerWidth
      );

      if (hasOverflow) {
        // Get information about what's causing overflow
        const overflowInfo = await page.evaluate(() => {
          const elements = [];
          document.querySelectorAll('*').forEach((el) => {
            const rect = el.getBoundingClientRect();
            if (rect.right > window.innerWidth) {
              elements.push({
                tag: el.tagName.toLowerCase(),
                class: el.className,
                id: el.id,
                width: Math.round(rect.width),
                right: Math.round(rect.right),
                overflow: Math.round(rect.right - window.innerWidth),
              });
            }
          });
          return elements.slice(0, 5); // Return first 5 overflowing elements
        });
        console.log('Overflowing elements:', JSON.stringify(overflowInfo, null, 2));
      }

      expect(hasOverflow, `${pageInfo.name} should have no horizontal overflow`).toBe(false);
    });
  }
});

// ============================================
// MOBILE NAVIGATION VISIBILITY TESTS
// ============================================

test.describe('All Pages - Mobile Navigation', () => {
  for (const pageInfo of PAGES) {
    test(`${pageInfo.name} shows mobile nav on mobile`, async ({ page, isMobile }, testInfo) => {
      if (!isMobile) {
        test.skip();
        return;
      }

      // Skip on tablets (iPad) - they use sidebar navigation instead of bottom nav
      const isTablet = testInfo.project.name.includes('iPad');
      if (isTablet) {
        test.skip();
        return;
      }

      await page.goto(pageInfo.path);
      await waitForPageLoad(page, pageInfo);

      const mobileNav = page.locator(MOBILE_NAV_SELECTOR);
      await expect(mobileNav, `Mobile nav should be visible on ${pageInfo.name}`).toBeVisible();
    });
  }
});

// ============================================
// SIDEBAR HIDDEN ON MOBILE TESTS
// ============================================

test.describe('All Pages - Sidebar Hidden on Mobile', () => {
  for (const pageInfo of PAGES) {
    test(`${pageInfo.name} hides sidebar on mobile`, async ({ page, isMobile }, testInfo) => {
      if (!isMobile) {
        test.skip();
        return;
      }

      // Skip on tablets (iPad) - they show sidebar navigation
      const isTablet = testInfo.project.name.includes('iPad');
      if (isTablet) {
        test.skip();
        return;
      }

      await page.goto(pageInfo.path);
      await waitForPageLoad(page, pageInfo);

      const sidebar = page.locator(SIDEBAR_SELECTOR);

      // Check if sidebar exists
      if ((await sidebar.count()) > 0) {
        // Sidebar should not be visible on mobile (either hidden or collapsed)
        const isVisible = await sidebar.isVisible();
        const sidebarBox = isVisible ? await sidebar.boundingBox() : null;

        // Sidebar might be "visible" but positioned off-screen or collapsed to 0 width
        if (isVisible && sidebarBox) {
          expect(
            sidebarBox.width,
            `Sidebar on ${pageInfo.name} should be collapsed or hidden`
          ).toBeLessThanOrEqual(0);
        }
      }
    });
  }
});

// ============================================
// TOUCH TARGET SIZE TESTS
// ============================================

test.describe('All Pages - Touch Targets', () => {
  for (const pageInfo of PAGES) {
    test(`${pageInfo.name} has adequate touch targets`, async ({ page, isMobile }, testInfo) => {
      if (!isMobile) {
        test.skip();
        return;
      }

      // Skip on tablets (iPad) - they have different touch target requirements
      const isTablet = testInfo.project.name.includes('iPad');
      if (isTablet) {
        test.skip();
        return;
      }

      await page.goto(pageInfo.path);
      await waitForPageLoad(page, pageInfo);

      const smallTargets = await page.evaluate((MIN_SIZE) => {
        const elements = document.querySelectorAll(
          'button, a, input, select, textarea, [role="button"], .btn'
        );
        const issues = [];

        elements.forEach((el) => {
          const rect = el.getBoundingClientRect();
          const style = window.getComputedStyle(el);

          // Skip hidden elements
          if (style.display === 'none' || style.visibility === 'hidden') return;
          if (rect.width === 0 || rect.height === 0) return;

          // Skip elements that are off-screen
          if (rect.top > window.innerHeight || rect.bottom < 0) return;
          if (rect.left > window.innerWidth || rect.right < 0) return;

          if (rect.width < MIN_SIZE || rect.height < MIN_SIZE) {
            issues.push({
              tag: el.tagName.toLowerCase(),
              class: el.className?.toString().slice(0, 50),
              id: el.id,
              size: `${Math.round(rect.width)}x${Math.round(rect.height)}`,
              text: (el.textContent || '').trim().slice(0, 30),
            });
          }
        });

        return issues;
      }, MIN_TOUCH_TARGET);

      // Log issues for debugging but allow some small elements
      if (smallTargets.length > 0) {
        console.log(
          `Small touch targets on ${pageInfo.name}:`,
          JSON.stringify(smallTargets, null, 2)
        );
      }

      // Allow up to 3 small elements (some icons may be small but have large hit areas)
      expect(
        smallTargets.length,
        `${pageInfo.name} should have minimal small touch targets`
      ).toBeLessThan(3);
    });
  }
});

// ============================================
// CONTENT NOT BEHIND MOBILE NAV TESTS
// ============================================

test.describe('All Pages - Content Above Mobile Nav', () => {
  for (const pageInfo of PAGES) {
    test(`${pageInfo.name} content not hidden behind mobile nav`, async ({ page, isMobile }) => {
      if (!isMobile) {
        test.skip();
        return;
      }

      await page.goto(pageInfo.path);
      await waitForPageLoad(page, pageInfo);

      // Wait for page-specific content to load
      if (pageInfo.path === '/settings/') {
        // Wait for settings to load (spinner to disappear)
        await page.waitForSelector('.ldr-loading-spinner', { state: 'hidden', timeout: 10000 }).catch(() => {});
        // Wait for settings form to be fully rendered
        await page.waitForSelector('.ldr-settings-form, #settings-form', { timeout: 10000 }).catch(() => {});
        // Wait for form inputs to render (dynamic content)
        await page.waitForSelector('.ldr-settings-form input, .ldr-settings-form select, #settings-form input, #settings-form select', { timeout: 10000 }).catch(() => {});
      } else if (pageInfo.path === '/benchmark/') {
        // Wait for benchmark form to load
        await page.waitForSelector('#benchmark-form', { timeout: 10000 }).catch(() => {});
        // Wait for form inputs to fully render - benchmark has complex form content
        await page.waitForSelector('#benchmark-form input, #benchmark-form select, #benchmark-form textarea', { timeout: 10000 }).catch(() => {});
      }

      // Collapse all help panels before checking - they can expand from localStorage state
      await page.evaluate(() => {
        if (window.HelpService && typeof window.HelpService.collapseAll === 'function') {
          window.HelpService.collapseAll();
        }
        // Also directly collapse any expanded help panel content
        document.querySelectorAll('.ldr-help-panel-content[style*="display: block"], .ldr-help-panel-content:not([style*="display: none"])').forEach(el => {
          el.style.display = 'none';
        });
      });
      // Wait for help panels to finish collapsing
      await page.waitForFunction(() => {
        const panels = document.querySelectorAll('.ldr-help-panel-content');
        return panels.length === 0 || Array.from(panels).every(el => el.style.display === 'none' || el.offsetHeight === 0);
      }, { timeout: 5000 }).catch(() => {});

      // Ensure page is fully loaded before heavy DOM operations (WebKit stability)
      await page.waitForLoadState('load').catch(() => {});

      // Scroll to bottom to check last content
      await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
      // Wait for scroll to settle at the bottom
      await page.waitForFunction(() => {
        return (window.innerHeight + window.scrollY) >= document.body.scrollHeight - 1;
      }, { timeout: 5000 }).catch(() => {});

      const result = await page.evaluate((navSelector) => {
        const mobileNav = document.querySelector(navSelector);
        if (!mobileNav) return { hasNav: false, issue: null };

        const navStyle = window.getComputedStyle(mobileNav);
        if (navStyle.display === 'none') return { hasNav: false, issue: null };

        const navRect = mobileNav.getBoundingClientRect();

        // Find interactive elements that might be hidden behind the nav
        const interactiveElements = document.querySelectorAll(
          'button, a, input, select, textarea, [role="button"]'
        );
        const hiddenElements = [];

        interactiveElements.forEach((el) => {
          const rect = el.getBoundingClientRect();
          const style = window.getComputedStyle(el);

          // Skip hidden elements
          if (style.display === 'none' || style.visibility === 'hidden') return;
          if (rect.width === 0 || rect.height === 0) return;

          // Skip elements inside hidden modals (WebKit returns non-zero rects for these)
          if (el.closest('.modal:not(.show)')) return;

          // Skip help panel dismiss checkboxes - they're inside collapsible panels
          // and users can collapse the panel instead of using the dismiss checkbox
          if (el.closest('.ldr-help-panel-dismiss')) return;

          // Check if element is behind the nav (with tolerance for edge cases)
          // Allow 20px overlap tolerance for rendering variations and borderline cases
          // This catches real issues (content completely hidden) while allowing minor edge overlaps
          const OVERLAP_TOLERANCE = 20;
          if (rect.bottom > navRect.top + OVERLAP_TOLERANCE && rect.top < navRect.bottom) {
            // Element significantly overlaps with nav vertically
            // Check if it's not part of the nav itself
            if (!mobileNav.contains(el)) {
              hiddenElements.push({
                tag: el.tagName.toLowerCase(),
                class: el.className?.toString().slice(0, 50),
                text: (el.textContent || '').trim().slice(0, 30),
                bottom: Math.round(rect.bottom),
                navTop: Math.round(navRect.top),
              });
            }
          }
        });

        return {
          hasNav: true,
          navTop: navRect.top,
          hiddenElements: hiddenElements.slice(0, 5),
        };
      }, MOBILE_NAV_SELECTOR);

      if (result.hasNav && result.hiddenElements && result.hiddenElements.length > 0) {
        console.log(
          `Elements hidden behind nav on ${pageInfo.name}:`,
          JSON.stringify(result.hiddenElements, null, 2)
        );
      }

      expect(
        result.hiddenElements?.length || 0,
        `${pageInfo.name} should have no interactive elements behind mobile nav`
      ).toBe(0);
    });
  }
});

// ============================================
// PAGE LOAD AND BASIC FUNCTIONALITY TESTS
// ============================================

test.describe('All Pages - Basic Load Tests', () => {
  for (const pageInfo of PAGES) {
    test(`${pageInfo.name} loads without errors`, async ({ page }) => {
      // Collect console errors
      const errors = [];
      page.on('console', (msg) => {
        if (msg.type() === 'error') {
          errors.push(msg.text());
        }
      });

      // Collect page errors
      const pageErrors = [];
      page.on('pageerror', (error) => {
        pageErrors.push(error.message);
      });

      await page.goto(pageInfo.path);
      await waitForPageLoad(page, pageInfo);

      // Filter out known benign errors
      const criticalErrors = errors.filter(
        (err) =>
          !err.includes('favicon') &&
          !err.includes('404') &&
          !err.includes('Failed to load resource') &&
          !err.includes("Can't find variable: Chart") && // Chart.js race condition
          !err.includes("Can't find variable: io") // Socket.IO race condition
      );

      expect(pageErrors.length, `${pageInfo.name} should have no page errors`).toBe(0);
      expect(
        criticalErrors.length,
        `${pageInfo.name} should have no critical console errors: ${criticalErrors.join(', ')}`
      ).toBe(0);
    });
  }
});
