/**
 * Orientation Change Tests
 *
 * Tests layout behavior when device orientation changes between
 * portrait and landscape modes on various mobile devices.
 *
 * IMPORTANT: These tests create new browser contexts with specific viewports,
 * so they should only run on Desktop Chrome/Firefox (not mobile projects).
 *
 * Tested scenarios:
 * - Layout adapts without overflow
 * - Form values preserved through rotation
 * - Navigation visibility at landscape widths
 * - Content remains accessible
 */

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

// These tests create new browser contexts with specific viewports
// Skip on mobile projects as they have fixed viewports
test.beforeEach(async ({ isMobile }, testInfo) => {
  if (isMobile || testInfo.project.name.includes('iPhone') || testInfo.project.name.includes('iPad')) {
    test.skip();
  }
});

// Device dimensions for testing
const DEVICES = {
  IPHONE_SE: {
    portrait: { width: 375, height: 667 },
    landscape: { width: 667, height: 375 },
  },
  IPHONE_14: {
    portrait: { width: 390, height: 844 },
    landscape: { width: 844, height: 390 },
  },
  GALAXY_S23: {
    portrait: { width: 360, height: 780 },
    landscape: { width: 780, height: 360 },
  },
};

test.describe('Orientation Change - Layout Adaptation', () => {
  test('Layout adapts from portrait to landscape', async ({ browser }) => {
    const context = await browser.newContext({
      viewport: DEVICES.IPHONE_14.portrait,
      isMobile: true,
      hasTouch: true,
    });
    const page = await context.newPage();

    await page.goto('/');
    await page.waitForLoadState('domcontentloaded');

    // Verify no overflow in portrait
    let hasOverflow = await page.evaluate(() =>
      document.documentElement.scrollWidth > window.innerWidth
    );
    expect(hasOverflow, 'No overflow in portrait').toBe(false);

    // Rotate to landscape
    await page.setViewportSize(DEVICES.IPHONE_14.landscape);
    await page.waitForTimeout(200);

    // Verify no overflow in landscape
    hasOverflow = await page.evaluate(() =>
      document.documentElement.scrollWidth > window.innerWidth
    );
    expect(hasOverflow, 'No overflow in landscape').toBe(false);

    await context.close();
  });

  test('Layout adapts from landscape to portrait', async ({ browser }) => {
    const context = await browser.newContext({
      viewport: DEVICES.IPHONE_14.landscape,
      isMobile: true,
      hasTouch: true,
    });
    const page = await context.newPage();

    await page.goto('/');
    await page.waitForLoadState('domcontentloaded');

    // Verify no overflow in landscape
    let hasOverflow = await page.evaluate(() =>
      document.documentElement.scrollWidth > window.innerWidth
    );
    expect(hasOverflow, 'No overflow in landscape').toBe(false);

    // Rotate to portrait
    await page.setViewportSize(DEVICES.IPHONE_14.portrait);
    await page.waitForTimeout(200);

    // Verify no overflow in portrait
    hasOverflow = await page.evaluate(() =>
      document.documentElement.scrollWidth > window.innerWidth
    );
    expect(hasOverflow, 'No overflow in portrait').toBe(false);

    await context.close();
  });
});

test.describe('Orientation Change - Form State Preservation', () => {
  test('Form values preserved through rotation', async ({ browser }) => {
    const context = await browser.newContext({
      viewport: DEVICES.IPHONE_14.portrait,
      isMobile: true,
      hasTouch: true,
    });
    const page = await context.newPage();

    await page.goto('/');
    await page.waitForLoadState('domcontentloaded');

    const textarea = page.locator('#query');
    await textarea.fill('Test query in portrait');

    // Rotate to landscape
    await page.setViewportSize(DEVICES.IPHONE_14.landscape);
    await page.waitForTimeout(200);

    // Value should be preserved
    const value = await textarea.inputValue();
    expect(value, 'Query value preserved after rotation').toBe('Test query in portrait');

    // Rotate back to portrait
    await page.setViewportSize(DEVICES.IPHONE_14.portrait);
    await page.waitForTimeout(200);

    // Value should still be preserved
    const valueAfterReturn = await textarea.inputValue();
    expect(valueAfterReturn, 'Query value preserved after returning to portrait').toBe('Test query in portrait');

    await context.close();
  });

  test('Settings form values preserved through rotation', async ({ browser }) => {
    const context = await browser.newContext({
      viewport: DEVICES.IPHONE_14.portrait,
      isMobile: true,
      hasTouch: true,
    });
    const page = await context.newPage();

    await page.goto('/settings/');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForSelector('.ldr-loading-spinner', { state: 'hidden', timeout: 10000 }).catch(() => {});

    // Find a text input and fill it
    const textInputs = page.locator('input[type="text"], input[type="number"]');
    const count = await textInputs.count();

    if (count > 0) {
      const firstInput = textInputs.first();
      const originalValue = await firstInput.inputValue();

      // Rotate to landscape
      await page.setViewportSize(DEVICES.IPHONE_14.landscape);
      await page.waitForTimeout(200);

      // Value should be preserved
      const valueAfterRotation = await firstInput.inputValue();
      expect(valueAfterRotation, 'Settings input preserved after rotation').toBe(originalValue);
    }

    await context.close();
  });
});

test.describe('Orientation Change - Navigation Visibility', () => {
  test('iPhone SE landscape (667px) still shows mobile nav', async ({ browser }) => {
    // 667px is less than 768px breakpoint, so mobile nav should still show
    const context = await browser.newContext({
      viewport: DEVICES.IPHONE_SE.landscape,
      isMobile: true,
      hasTouch: true,
    });
    const page = await context.newPage();

    await page.goto('/');
    await page.waitForLoadState('domcontentloaded');

    const mobileNav = page.locator('.ldr-mobile-bottom-nav');
    await expect(mobileNav, 'Mobile nav visible at 667px (iPhone SE landscape)').toBeVisible();

    await context.close();
  });

  test('Galaxy S23 landscape (780px) shows tablet layout', async ({ browser }) => {
    // 780px is greater than 768px breakpoint, so should show sidebar
    const context = await browser.newContext({
      viewport: DEVICES.GALAXY_S23.landscape,
      isMobile: true,
      hasTouch: true,
    });
    const page = await context.newPage();

    await page.goto('/');
    await page.waitForLoadState('domcontentloaded');

    // At 780px, should be tablet layout
    const sidebar = page.locator('.ldr-sidebar');
    const sidebarVisible = await sidebar.isVisible();

    const mobileNav = page.locator('.ldr-mobile-bottom-nav');
    const mobileNavVisible = await mobileNav.isVisible();

    // Either sidebar visible OR mobile nav visible (depends on implementation)
    // At 780px > 768px, expect sidebar layout
    if (sidebarVisible) {
      expect(mobileNavVisible, 'Mobile nav hidden when sidebar shows at 780px').toBe(false);
    }

    await context.close();
  });

  test('iPhone 14 landscape (844px) shows tablet layout', async ({ browser }) => {
    // 844px is well above 768px breakpoint
    const context = await browser.newContext({
      viewport: DEVICES.IPHONE_14.landscape,
      isMobile: true,
      hasTouch: true,
    });
    const page = await context.newPage();

    await page.goto('/');
    await page.waitForLoadState('domcontentloaded');

    const mobileNav = page.locator('.ldr-mobile-bottom-nav');
    await expect(mobileNav, 'Mobile nav hidden at 844px (iPhone 14 landscape)').not.toBeVisible();

    await context.close();
  });
});

test.describe('Orientation Change - Content Accessibility', () => {
  test('Main content remains accessible after rotation', async ({ browser }) => {
    const context = await browser.newContext({
      viewport: DEVICES.IPHONE_14.portrait,
      isMobile: true,
      hasTouch: true,
    });
    const page = await context.newPage();

    await page.goto('/');
    await page.waitForLoadState('domcontentloaded');

    // Check main content visible in portrait
    const mainContent = page.locator('main, .ldr-main-content, .ldr-content, #content');
    if (await mainContent.count() > 0) {
      await expect(mainContent.first(), 'Main content visible in portrait').toBeVisible();
    }

    // Rotate to landscape
    await page.setViewportSize(DEVICES.IPHONE_14.landscape);
    await page.waitForTimeout(200);

    // Main content should still be visible
    if (await mainContent.count() > 0) {
      await expect(mainContent.first(), 'Main content visible in landscape').toBeVisible();
    }

    await context.close();
  });

  test('Buttons remain tappable after rotation', async ({ browser }) => {
    const context = await browser.newContext({
      viewport: DEVICES.IPHONE_14.portrait,
      isMobile: true,
      hasTouch: true,
    });
    const page = await context.newPage();

    await page.goto('/');
    await page.waitForLoadState('domcontentloaded');

    const startButton = page.locator('#start-research-btn, button:has-text("Start Research")');
    if (await startButton.count() > 0) {
      let box = await startButton.first().boundingBox();
      expect(box?.height, 'Start button >= 44px in portrait').toBeGreaterThanOrEqual(44);

      // Rotate to landscape
      await page.setViewportSize(DEVICES.IPHONE_14.landscape);
      await page.waitForTimeout(200);

      box = await startButton.first().boundingBox();
      expect(box?.height, 'Start button >= 44px in landscape').toBeGreaterThanOrEqual(44);
    }

    await context.close();
  });
});

// ============================================
// ORIENTATION CHANGE SCREENSHOTS
// ============================================

test.describe('Orientation Change - Visual Regression', () => {
  const screenshotPages = [
    { path: '/', name: 'research' },
    { path: '/history/', name: 'history' },
    { path: '/settings/', name: 'settings' },
    { path: '/news/', name: 'news' },
  ];

  for (const { path, name } of screenshotPages) {
    test(`${name} - portrait vs landscape screenshots`, async ({ browser }) => {
      const context = await browser.newContext({
        viewport: DEVICES.IPHONE_14.portrait,
        isMobile: true,
        hasTouch: true,
      });
      const page = await context.newPage();

      await page.goto(path);
      await page.waitForLoadState('domcontentloaded');
      await page.waitForTimeout(200);

      // Portrait screenshot
      await expect(page).toHaveScreenshot(`orientation-${name}-portrait.png`, {
        maxDiffPixelRatio: 0.02,
      });

      // Rotate to landscape
      await page.setViewportSize(DEVICES.IPHONE_14.landscape);
      await page.waitForTimeout(200);

      // Landscape screenshot
      await expect(page).toHaveScreenshot(`orientation-${name}-landscape.png`, {
        maxDiffPixelRatio: 0.02,
      });

      await context.close();
    });
  }
});

test.describe('Orientation Change - Page-Specific Tests', () => {
  test('History page adapts to orientation change', async ({ browser }) => {
    const context = await browser.newContext({
      viewport: DEVICES.IPHONE_14.portrait,
      isMobile: true,
      hasTouch: true,
    });
    const page = await context.newPage();

    await page.goto('/history/');
    await page.waitForLoadState('domcontentloaded');

    // No overflow in portrait
    let hasOverflow = await page.evaluate(() =>
      document.documentElement.scrollWidth > window.innerWidth
    );
    expect(hasOverflow, 'History: no overflow in portrait').toBe(false);

    // Rotate
    await page.setViewportSize(DEVICES.IPHONE_14.landscape);
    await page.waitForTimeout(200);

    // No overflow in landscape
    hasOverflow = await page.evaluate(() =>
      document.documentElement.scrollWidth > window.innerWidth
    );
    expect(hasOverflow, 'History: no overflow in landscape').toBe(false);

    await context.close();
  });

  test('Settings page adapts to orientation change', async ({ browser }) => {
    const context = await browser.newContext({
      viewport: DEVICES.IPHONE_14.portrait,
      isMobile: true,
      hasTouch: true,
    });
    const page = await context.newPage();

    await page.goto('/settings/');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForSelector('.ldr-loading-spinner', { state: 'hidden', timeout: 10000 }).catch(() => {});

    // No overflow in portrait
    let hasOverflow = await page.evaluate(() =>
      document.documentElement.scrollWidth > window.innerWidth
    );
    expect(hasOverflow, 'Settings: no overflow in portrait').toBe(false);

    // Rotate
    await page.setViewportSize(DEVICES.IPHONE_14.landscape);
    await page.waitForTimeout(200);

    // No overflow in landscape
    hasOverflow = await page.evaluate(() =>
      document.documentElement.scrollWidth > window.innerWidth
    );
    expect(hasOverflow, 'Settings: no overflow in landscape').toBe(false);

    await context.close();
  });

  test('Metrics page adapts to orientation change', async ({ browser }) => {
    const context = await browser.newContext({
      viewport: DEVICES.IPHONE_14.portrait,
      isMobile: true,
      hasTouch: true,
    });
    const page = await context.newPage();

    await page.goto('/metrics/');
    await page.waitForLoadState('domcontentloaded');

    // No overflow in portrait
    let hasOverflow = await page.evaluate(() =>
      document.documentElement.scrollWidth > window.innerWidth
    );
    expect(hasOverflow, 'Metrics: no overflow in portrait').toBe(false);

    // Rotate
    await page.setViewportSize(DEVICES.IPHONE_14.landscape);
    await page.waitForTimeout(200);

    // No overflow in landscape
    hasOverflow = await page.evaluate(() =>
      document.documentElement.scrollWidth > window.innerWidth
    );
    expect(hasOverflow, 'Metrics: no overflow in landscape').toBe(false);

    await context.close();
  });
});
