import { test, expect } from '@playwright/test';

test.describe('Authentication Timeout', () => {
  test('should show skeleton during slow auth, then timeout after 30s with retry button', async ({ page }) => {
    // Mock slow Firebase auth that never resolves
    await page.route('**/firebase/**', async (route) => {
      // Hold the request for longer than 30 seconds to trigger timeout
      await new Promise(resolve => setTimeout(resolve, 35000));
      route.abort();
    });

    // Go to a protected route (dashboard)
    await page.goto('/dashboard');

    // Should show skeleton loading initially
    await expect(page.locator('[data-testid="skeleton-page"]')).toBeVisible();
    await expect(page.locator('text=Verifying authentication...')).toBeVisible();

    // Wait for timeout (30s + buffer)
    await page.waitForTimeout(32000);

    // Should show timeout error with retry button
    await expect(page.locator('text=Authentication Timeout')).toBeVisible();
    await expect(page.locator('text=Authentication is taking longer than expected')).toBeVisible();
    await expect(page.locator('button:has-text("Retry Authentication")')).toBeVisible();

    // Clicking retry should reload the page
    await page.locator('button:has-text("Retry Authentication")').click();
    
    // Should be back to loading state
    await expect(page.url()).toContain('/dashboard');
  });

  test('should persist skeleton without timeout when auth is slow but resolves', async ({ page }) => {
    let resolveAuth: () => void;
    const authPromise = new Promise<void>((resolve) => {
      resolveAuth = resolve;
    });

    // Mock slow Firebase auth that eventually resolves
    await page.route('**/firebase/**', async (route) => {
      await authPromise;
      route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({
          user: {
            uid: 'test-user',
            email: 'organizer@example.com',
            displayName: 'Test Organizer'
          }
        })
      });
    });

    // Go to a protected route
    await page.goto('/dashboard');

    // Should show skeleton loading
    await expect(page.locator('[data-testid="skeleton-page"]')).toBeVisible();
    await expect(page.locator('text=Verifying authentication...')).toBeVisible();

    // Wait 10 seconds - should still be in skeleton state, no timeout
    await page.waitForTimeout(10000);
    await expect(page.locator('[data-testid="skeleton-page"]')).toBeVisible();
    await expect(page.locator('text=Authentication Timeout')).not.toBeVisible();

    // Resolve auth
    resolveAuth!();

    // Should navigate to dashboard content
    await expect(page.locator('text=Total Revenue')).toBeVisible({ timeout: 5000 });
    await expect(page.locator('[data-testid="skeleton-page"]')).not.toBeVisible();
  });

  test('should show appropriate error state when auth explicitly fails', async ({ page }) => {
    // Mock auth failure
    await page.route('**/firebase/**', async (route) => {
      route.fulfill({
        status: 401,
        contentType: 'application/json',
        body: JSON.stringify({ error: 'Unauthorized' })
      });
    });

    await page.goto('/dashboard');

    // Should redirect to login due to auth failure
    await expect(page.url()).toContain('/login');
  });
});