import { test, expect } from '@playwright/test';
import { IPHONE_DEVICES } from '../fixtures/devices';
import { login, navigateTo } from '../smoke/helpers';

test.use({
  ...IPHONE_DEVICES.iphone16,
});

/**
 * Freeze CSS animations/transitions and hide dev-only overlays
 * (TanStack Query devtools) so pixel diffs are stable.
 */
async function freezeAnimations(page: import('@playwright/test').Page) {
  await page.addStyleTag({
    content: `
      *, *::before, *::after {
        animation-duration: 0s !important;
        animation-delay: 0s !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
        caret-color: transparent !important;
      }
      /* Hide TanStack Query devtools so they don't overlap bottom tabs */
      .tsqd-parent-container {
        display: none !important;
      }
    `,
  });
}

test('mobile shell renders bottom tabs and compact topbar on dashboard', async ({ page }) => {
  await login(page, 'super_admin');
  await navigateTo(page, '/dashboard');
  await freezeAnimations(page);
  // Allow charts and TanStack Query to settle
  await page.waitForTimeout(1200);

  // Viewport-only screenshot captures the fixed topbar + bottom tabs
  await expect(page).toHaveScreenshot('mobile-shell-dashboard.png', {
    fullPage: false,
    maxDiffPixelRatio: 0.03,
  });
});

test('More sheet opens from bottom tabs', async ({ page }) => {
  await login(page, 'super_admin');
  await navigateTo(page, '/dashboard');
  await freezeAnimations(page);

  // Click the More button inside the primary nav (5th item in the 5-col bottom tab grid)
  await page
    .locator('nav[aria-label="Primary navigation"] button', { hasText: 'More' })
    .click({ force: true });
  await page.waitForTimeout(500);
  await freezeAnimations(page);

  // Viewport-only screenshot captures the bottom-anchored More drawer
  await expect(page).toHaveScreenshot('mobile-shell-more-sheet.png', {
    fullPage: false,
    maxDiffPixelRatio: 0.03,
  });
});