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

test('debug masquerade functionality', async ({ page }) => {
  // Enable console logging
  page.on('console', msg => console.log('BROWSER:', msg.text()));
  page.on('pageerror', err => console.log('PAGE ERROR:', err.message));

  // Listen for network requests
  page.on('request', request => {
    if (request.url().includes('masquerade') || request.url().includes('current')) {
      console.log('REQUEST:', request.method(), request.url());
    }
  });

  page.on('response', async response => {
    if (response.url().includes('masquerade') || response.url().includes('current')) {
      console.log('RESPONSE:', response.status(), response.url());
      try {
        const body = await response.text();
        console.log('RESPONSE BODY:', body.substring(0, 500));
      } catch (e) {
        console.log('Could not read response body');
      }
    }
  });

  // Navigate to platform
  console.log('\n=== Step 1: Navigate to platform login ===');
  await page.goto('http://platform.lvh.me:5174/');
  await page.waitForLoadState('networkidle');

  // Login as superuser
  console.log('\n=== Step 2: Login as superuser ===');
  await page.locator('#username').fill('poduck');
  await page.locator('#password').fill('starry12');
  await page.getByRole('button', { name: /sign in/i }).click();

  // Wait for platform dashboard
  await page.waitForURL(/platform\.lvh\.me/, { timeout: 10000 });
  await page.waitForLoadState('networkidle');
  console.log('Current URL after login:', page.url());

  // Navigate to Businesses tab
  console.log('\n=== Step 3: Navigate to Businesses ===');
  await page.getByRole('button', { name: /businesses/i }).click();
  await page.waitForTimeout(1000);

  // Wait for businesses to load
  await page.waitForSelector('table tbody tr', { timeout: 10000 });
  console.log('Businesses loaded');

  // Get the first masquerade button
  console.log('\n=== Step 4: Click masquerade on first business ===');
  const masqueradeButtons = page.getByRole('button', { name: /masquerade/i });
  const firstButton = masqueradeButtons.first();

  // Check if button is visible
  await expect(firstButton).toBeVisible();
  console.log('Masquerade button is visible');

  // Get the business info before clicking
  const businessRow = page.locator('table tbody tr').first();
  const businessName = await businessRow.locator('td').first().textContent();
  console.log('Masquerading as owner of:', businessName);

  // Click masquerade
  console.log('Clicking masquerade button...');
  await firstButton.click();

  // Wait a bit for the mutation to process
  await page.waitForTimeout(2000);

  console.log('\n=== Step 5: Check what happened ===');
  console.log('Current URL:', page.url());

  // Check cookies
  const cookies = await page.context().cookies();
  const accessToken = cookies.find(c => c.name === 'access_token');
  const refreshToken = cookies.find(c => c.name === 'refresh_token');
  console.log('Access token present:', !!accessToken);
  console.log('Refresh token present:', !!refreshToken);
  if (accessToken) {
    console.log('Access token domain:', accessToken.domain);
  }

  // Wait for any redirects
  await page.waitForTimeout(3000);
  console.log('Final URL:', page.url());

  // Check page content
  const pageText = await page.textContent('body');
  console.log('Page contains "loading":', pageText?.toLowerCase().includes('loading'));
  console.log('Page contains "error":', pageText?.toLowerCase().includes('error'));

  // Take screenshot
  await page.screenshot({ path: '/tmp/masquerade-debug.png', fullPage: true });
  console.log('Screenshot saved to /tmp/masquerade-debug.png');
});