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

test.describe('AutoBackups - Dashboard Tests', () => {
  test('should load the main dashboard', async ({ page }) => {
    await page.goto('/');
    
    // Check if the page loads correctly - be flexible with the title
    const title = await page.title();
    console.log(`Page title: "${title}"`);
    
    // Accept various title formats that might indicate the AutoBackups app
    const validTitles = /AutoBackups|Dashboard|Script Parameter Manager|Test/i;
    expect(title).toMatch(validTitles);
    
    // Take a screenshot for visual verification
    await page.screenshot({ path: 'test-results/dashboard.png' });
  });

  test('should display navigation elements', async ({ page }) => {
    await page.goto('/');
    
    // Check for common navigation elements
    // Adjust these selectors based on your actual HTML structure
    const navigation = page.locator('nav, .navbar, .navigation');
    if (await navigation.count() > 0) {
      await expect(navigation).toBeVisible();
    }
    
    // Check for links to configuration page
    const configLink = page.locator('a[href*="config"], a:has-text("Config"), a:has-text("Configuración")');
    if (await configLink.count() > 0) {
      await expect(configLink.first()).toBeVisible();
    }
  });

  test('should be responsive', async ({ page }) => {
    await page.goto('/');
    
    // Test mobile viewport
    await page.setViewportSize({ width: 375, height: 667 });
    await page.screenshot({ path: 'test-results/mobile-dashboard.png' });
    
    // Test tablet viewport
    await page.setViewportSize({ width: 768, height: 1024 });
    await page.screenshot({ path: 'test-results/tablet-dashboard.png' });
    
    // Test desktop viewport
    await page.setViewportSize({ width: 1920, height: 1080 });
    await page.screenshot({ path: 'test-results/desktop-dashboard.png' });
  });
});