const { test, expect } = require('@playwright/test');

// API credentials from client
const API_BASE = 'https://react.eluxnetworks.net';
const DASHBOARD_URL = `${API_BASE}/dashboard`;
const LOGIN_CREDENTIALS = {
  username: 'anandk',
  password: 'anandk_8'
};

test.describe('WellNuo API Check', () => {

  test('should load main page', async ({ page }) => {
    const response = await page.goto(API_BASE);
    expect(response.status()).toBe(200);

    // Check if it's the WellNuo app
    await expect(page).toHaveTitle(/WellNuo/);

    // Take screenshot
    await page.screenshot({ path: 'tests/screenshots/main-page.png', fullPage: true });
    console.log('Main page loaded successfully');
  });

  test('should navigate to dashboard and login', async ({ page }) => {
    // Go to dashboard
    await page.goto(DASHBOARD_URL);

    // Wait for page to load
    await page.waitForLoadState('networkidle');

    // Take screenshot of login page
    await page.screenshot({ path: 'tests/screenshots/dashboard-initial.png', fullPage: true });

    // Look for login form elements
    const usernameField = page.locator('input[name="username"], input[name="user_name"], input[type="text"]').first();
    const passwordField = page.locator('input[name="password"], input[type="password"]').first();
    const submitButton = page.locator('button[type="submit"], button:has-text("Login"), button:has-text("Sign in")').first();

    // Check if login form exists
    const hasLoginForm = await usernameField.isVisible().catch(() => false);

    if (hasLoginForm) {
      console.log('Login form found, attempting to login...');

      // Fill credentials
      await usernameField.fill(LOGIN_CREDENTIALS.username);
      await passwordField.fill(LOGIN_CREDENTIALS.password);

      // Take screenshot before submit
      await page.screenshot({ path: 'tests/screenshots/login-filled.png', fullPage: true });

      // Click login
      await submitButton.click();

      // Wait for navigation or response
      await page.waitForLoadState('networkidle');
      await page.waitForTimeout(2000);

      // Take screenshot after login
      await page.screenshot({ path: 'tests/screenshots/after-login.png', fullPage: true });

      // Check URL to verify login success
      const currentUrl = page.url();
      console.log('Current URL after login:', currentUrl);

      // Check page content
      const pageContent = await page.content();
      console.log('Page contains "dashboard":', pageContent.toLowerCase().includes('dashboard'));
      console.log('Page contains "error":', pageContent.toLowerCase().includes('error'));
      console.log('Page contains "invalid":', pageContent.toLowerCase().includes('invalid'));

    } else {
      console.log('No login form found, checking page state...');
      const pageContent = await page.content();
      console.log('Page HTML (first 500 chars):', pageContent.substring(0, 500));
    }
  });

  test('should check API endpoints directly', async ({ request }) => {
    // Try common API endpoints
    const endpoints = [
      '/api/auth/login',
      '/api/login',
      '/auth/login',
      '/api/token',
      '/api/v1/auth/login'
    ];

    for (const endpoint of endpoints) {
      const url = `${API_BASE}${endpoint}`;
      console.log(`Checking endpoint: ${url}`);

      try {
        // Try POST with credentials
        const response = await request.post(url, {
          data: {
            user_name: LOGIN_CREDENTIALS.username,
            password: LOGIN_CREDENTIALS.password
          },
          headers: {
            'Content-Type': 'application/json'
          }
        });

        console.log(`  Status: ${response.status()}`);

        if (response.status() === 200) {
          const body = await response.json().catch(() => ({}));
          console.log(`  Response:`, JSON.stringify(body, null, 2));

          if (body.token || body.access_token) {
            console.log('TOKEN FOUND!');
          }
        }
      } catch (e) {
        console.log(`  Error: ${e.message}`);
      }
    }
  });

  test('should try login with various body formats', async ({ request }) => {
    const loginEndpoint = `${API_BASE}/api/auth/login`;

    // Format 1: user_name / password
    console.log('Trying format 1: user_name/password');
    let response = await request.post(loginEndpoint, {
      data: {
        user_name: LOGIN_CREDENTIALS.username,
        password: LOGIN_CREDENTIALS.password
      }
    });
    console.log(`Status: ${response.status()}`);
    if (response.status() === 200) {
      console.log('Response:', await response.text());
    }

    // Format 2: username / password
    console.log('Trying format 2: username/password');
    response = await request.post(loginEndpoint, {
      data: {
        username: LOGIN_CREDENTIALS.username,
        password: LOGIN_CREDENTIALS.password
      }
    });
    console.log(`Status: ${response.status()}`);
    if (response.status() === 200) {
      console.log('Response:', await response.text());
    }

    // Format 3: email-style
    console.log('Trying format 3: email/password');
    response = await request.post(loginEndpoint, {
      data: {
        email: LOGIN_CREDENTIALS.username,
        password: LOGIN_CREDENTIALS.password
      }
    });
    console.log(`Status: ${response.status()}`);
    if (response.status() === 200) {
      console.log('Response:', await response.text());
    }
  });
});