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

// Function to take screenshots at different viewport sizes for a given URL
async function takeScreenshotsAtViewports(page, folderName, screenshotPrefix) {
  const viewports = [
    { width: 1230, height: 629, name: 'moniter-spec' },
    { width: 1280, height: 800, name: 'lap-spec' },
    { width: 1920, height: 1080, name: 'TV-spec' }, 
  ];

  // Create the folder if it doesn't exist (Node.js context)
  const folderPath = path.join(__dirname, '..', 'test-results', folderName);
  if (!fs.existsSync(folderPath)) {
    fs.mkdirSync(folderPath, { recursive: true });
  }

  for (const { width, height, name } of viewports) {
    await page.setViewportSize({ width, height });
    await page.waitForTimeout(500); // Allow time for the viewport to adjust
    const screenshotPath = path.join(folderPath, `${screenshotPrefix}-${name}.png`);
    await page.screenshot({
      path: screenshotPath,
      fullPage: true,
    });
    console.log(`Screenshot taken for ${name} resolution in folder ${folderName}`);
  }
}

test('Login Page Screenshots', async ({ page }) => {
  test.setTimeout(60000); // Increase timeout to 60 seconds
  const url = 'http://185.100.212.76:8200';
  const folderName = 'login-screenshots';

  try {
    console.log('Navigating to the login page...');
    await page.goto(url, { waitUntil: 'networkidle' });
    await page.waitForSelector('[placeholder="Email"]', { timeout: 10000 });
    await takeScreenshotsAtViewports(page, `${folderName}/login-page-loaded`, 'login-page-loaded');

    console.log('Filling Email and Password fields...');
    await page.getByPlaceholder('Email').click();
    await page.getByPlaceholder('Email').fill('ramkumar@tester.local');
    await page.getByPlaceholder('Password').click();
    await page.getByPlaceholder('Password').fill('123456');
    await takeScreenshotsAtViewports(page, `${folderName}/fields-filled`, 'fields-filled');

    console.log('Clicking the Continue button...');
    await page.waitForSelector('button:has-text("Continue")', { timeout: 10000 });
    await page.getByRole('button', { name: 'Continue', exact: true }).click();
    await page.waitForLoadState('networkidle'); // Wait for navigation or animations to complete
    await takeScreenshotsAtViewports(page, `${folderName}/after-login`, 'after-login');
  } catch (error) {
    console.error('An error occurred during the test:', error.message);
    throw error; // Re-throw the error to fail the test
  }
});

test('simulation Page Screenshots', async ({ page }) => {{

  const folderName = 'simulation-screenshots';

  await page.goto('http://185.100.212.76:8200');
  await page.getByPlaceholder('Email').fill('ramkumar@tester.local');
  await page.getByPlaceholder('Password').fill('123456');
  await page.waitForSelector('button:has-text("Continue")', { timeout: 10000 }); 
  await page.getByRole('button', { name: 'Continue', exact: true }).click();
  await page.waitForTimeout(10000); // Wait for the page to load
  await page.getByText('Simulation').click();
  await page.waitForTimeout(4000);
  await takeScreenshotsAtViewports(page, `${folderName}/simulation-page-loaded`, 'simulation-page-loaded');

}
});

test('Visualization Page Screenshots', async ({ page }) => {
  const folderName = 'Visualization-screenshots';

  // Navigate to the login page and log in
  await page.goto('http://185.100.212.76:8200');
  await page.getByPlaceholder('Email').fill('ramkumar@tester.local');
  await page.getByPlaceholder('Password').fill('123456');
  await page.waitForSelector('button:has-text("Continue")', { timeout: 10000 });
  await page.getByRole('button', { name: 'Continue', exact: true }).click();

  // Navigate to the Visualization page
  await page.waitForTimeout(10000); // Wait for the page to load
  await page.getByText('Visualization').click();
  await page.waitForTimeout(4000); // Wait for the page to load
  await takeScreenshotsAtViewports(page, `${folderName}/Visualization-page1-loaded`, 'Visualization1-page-loaded');

  await page.locator('.toggle-header-item:has-text("3D")').click(); // Use a more specific selector
  await takeScreenshotsAtViewports(page, `${folderName}/Visualization-page1-loaded`, 'Visualization1-page-loaded-3D');

  await page.locator('.toggle-header-item:has-text("Floating")').click(); // Use a more specific selector
  await takeScreenshotsAtViewports(page, `${folderName}/Visualization-page1-loaded`, 'Visualization1-page-loaded-Floating');
  // Navigate to Templates and Design pages
  await page.locator('.toggle-header-item:has-text("Templates")').click(); // Use a more specific selector
  await takeScreenshotsAtViewports(page, `${folderName}/Visualization-page2-loaded`, 'Visualization2-page-loaded');
});

test('Market-Place Page Screenshots', async ({ page }) => {{

  const folderName = 'simulation-screenshots';

  await page.goto('http://185.100.212.76:8200');
  await page.getByPlaceholder('Email').fill('ramkumar@tester.local');
  await page.getByPlaceholder('Password').fill('123456');
  await page.waitForSelector('button:has-text("Continue")', { timeout: 10000 }); 
  await page.getByRole('button', { name: 'Continue', exact: true }).click();
  await page.waitForTimeout(10000); // Wait for the page to load
  await page.getByText('Market Place').click();
  await page.waitForTimeout(4000);
  await takeScreenshotsAtViewports(page, `${folderName}/Market-Place-page-loaded`, 'Market-Place-page-loaded');

}
});