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

test.describe('Line of Sight Application', () => {
  test('should load the home page and show settings', async ({ page }) => {
    await page.goto('/');
    await expect(page.locator('text=Line of Sight Settings')).toBeVisible();
    await expect(page.locator('text=Direction')).toBeVisible();
  });

  test('should be able to toggle map style', async ({ page }) => {
    await page.goto('/');
    const darkButton = page.locator('button:text("Dark")');
    await darkButton.click();
    await expect(darkButton).toHaveClass(/active-style/);
  });

  test('should show results when clicking the search button', async ({ page }) => {
    await page.goto('/');
    
    // Mock the API response to avoid dependency on backend for E2E if desired,
    // but here we let it hit the real backend if it's up.
    // For a robust E2E in CI, we usually mock.
    await page.route('**/api/line-of-sight*', async route => {
      const json = {
        success: true,
        data: {
          conurbations: [
            { id: 1, name: 'Test City', population: 100000, country: 'TS', lat: 0, lon: 0, distance_km: 10, off_line_km: 1 }
          ],
          line_coordinates: [{ lat: 0, lon: 0 }, { lat: 1, lon: 1 }]
        }
      };
      await route.fulfill({ json });
    });

    await page.click('button:text("Show Line of Sight")');
    await expect(page.locator('text=Conurbations Found')).toBeVisible();
    await expect(page.locator('text=Test City')).toBeVisible();
  });
});