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

// These tests run WITHOUT storageState (they test the login UI itself)
test.use({ storageState: { cookies: [], origins: [] } });

test.describe('Login flow', () => {
  test('toont de loginpagina correct', async ({ page }) => {
    await page.goto('/login');

    await expect(page.locator('h2')).toContainText('Welkom terug');
    await expect(page.locator('#email')).toBeVisible();
    await expect(page.locator('#password')).toBeVisible();
    await expect(page.locator('button[type="submit"]')).toBeVisible();
  });

  test('toont foutmelding bij verkeerde inloggegevens', async ({ page }) => {
    await page.goto('/login');

    await page.fill('#email', 'verkeerd@email.nl');
    await page.fill('#password', 'foutWachtwoord123');
    await page.click('button[type="submit"]');

    // Wait for error message
    await expect(page.locator('text=onjuist')).toBeVisible({ timeout: 8_000 });
  });

  test('demo login knop is zichtbaar en werkt', async ({ page }) => {
    await page.goto('/login');

    const demoButton = page.getByRole('button', { name: /Demo Account Proberen/i });
    await expect(demoButton).toBeVisible();

    await demoButton.click();

    // Should redirect to EPD after demo login
    await page.waitForURL(/\/epd\//, { timeout: 10_000 });
  });

  test('redirect naar EPD na succesvol inloggen', async ({ page }) => {
    await page.goto('/login');

    await page.fill('#email', 'demo@mini-ecd.demo');
    await page.fill('#password', 'Demo2024!');
    await page.click('button[type="submit"]');

    await page.waitForURL(/\/epd\//, { timeout: 10_000 });
    expect(page.url()).toMatch(/\/epd\//);
  });

  test('beveiligde route stuurt door naar login', async ({ page }) => {
    await page.goto('/epd/dashboard');

    await page.waitForURL('/login**', { timeout: 5_000 });
    expect(page.url()).toContain('/login');
  });
});