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

test.describe('Environment Management', () => {
  test('should not allow removing DEFAULT environment', async ({ page }) => {
    await page.goto('/');
    await page.click('button:has-text("Create new")');

    // Try to remove DEFAULT - should be blocked
    const removeButton = page.locator('button.btn-danger[title="Remove environment"]');
    
    // The button should be disabled for DEFAULT
    await expect(removeButton).toBeDisabled();
  });

  test('should remove non-DEFAULT environment', async ({ page }) => {
    await page.goto('/');
    await page.click('button:has-text("Create new")');

    // Create a new environment
    page.once('dialog', async dialog => {
      await dialog.accept('toRemove');
    });
    await page.click('button.btn-success[title="Add environment"]');
    await page.waitForTimeout(500);

    // Verify we have 2 envs
    await expect(page.locator('#environments option')).toHaveCount(2);

    // Remove the new environment
    page.once('dialog', async dialog => {
      await dialog.accept(); // Confirm removal
    });
    await page.click('button.btn-danger[title="Remove environment"]');
    await page.waitForTimeout(300);

    // Verify we're back to 1 env (DEFAULT)
    await expect(page.locator('#environments option')).toHaveCount(1);
    await expect(page.locator('#environments')).toContainText('DEFAULT');
  });

  test('should create new environment and switch without errors', async ({ page }) => {
    await page.goto('/');
    await page.click('button:has-text("Create new")');

    // Verify DEFAULT environment is loaded
    await expect(page.locator('#environments')).toContainText('DEFAULT');

    // Create a new environment
    page.once('dialog', async dialog => {
      await dialog.accept('env1');
    });
    await page.click('button.btn-success[title="Add environment"]');
    await page.waitForTimeout(500);

    // Verify new environment is created
    await expect(page.locator('#environments option')).toHaveCount(2);

    // Switch back to DEFAULT (by index 0)
    await page.locator('#environments').selectOption({ index: 0 });
    await page.waitForTimeout(300);

    // Verify the page is still working
    await expect(page.locator('#environments')).toBeVisible();

    // Switch to env1 (by text) - this should NOT cause error
    await page.locator('#environments').selectOption('env1');
    await page.waitForTimeout(300);

    // Verify the page is still working (no white screen of death)
    await expect(page.locator('#environments')).toBeVisible();
    await expect(page.locator('#environments option')).toHaveCount(2);
  });

  test('should create multiple environments and switch between them', async ({ page }) => {
    await page.goto('/');
    await page.click('button:has-text("Create new")');

    // Create env1
    page.once('dialog', async dialog => {
      await dialog.accept('env1');
    });
    await page.click('button.btn-success[title="Add environment"]');
    await page.waitForTimeout(500);

    // Create env2
    page.once('dialog', async dialog => {
      await dialog.accept('env2');
    });
    await page.click('button.btn-success[title="Add environment"]');
    await page.waitForTimeout(500);

    // Verify we have 3 envs (DEFAULT + env1 + env2)
    await expect(page.locator('#environments option')).toHaveCount(3);

    // Switch to each env and verify page doesn't crash
    await page.locator('#environments').selectOption({ index: 0 });
    await page.waitForTimeout(200);
    await expect(page.locator('#environments')).toBeVisible();

    await page.locator('#environments').selectOption('env1');
    await page.waitForTimeout(200);
    await expect(page.locator('#environments')).toBeVisible();

    await page.locator('#environments').selectOption('env2');
    await page.waitForTimeout(200);
    await expect(page.locator('#environments')).toBeVisible();
  });
});