import { expect, test } from '@playwright/test';
import { E2E_LOGIN } from './fixtures/credentials';
import { mockBackend } from './fixtures/mock-api';

test.describe('login', () => {
  test('renders the login form', async ({ page }) => {
    await mockBackend(page);
    await page.goto('/auth/login');

    await expect(page.getByRole('heading', { name: 'Login to your account!' })).toBeVisible();
    await expect(page.getByLabel('Username')).toBeVisible();
    await expect(page.getByLabel('Password')).toBeVisible();
    await expect(page.getByRole('button', { name: 'Login' })).toBeVisible();
  });

  test('signs in with valid credentials and lands in the app', async ({ page }) => {
    await mockBackend(page, 'success');
    await page.goto('/auth/login');

    await page.getByLabel('Username').fill(E2E_LOGIN.username);
    await page.getByLabel('Password').fill(E2E_LOGIN.password);
    await page.getByRole('button', { name: 'Login' }).click();

    await expect(page).toHaveURL(/\/app(\/|$)/);
    await expect(page.getByRole('heading', { name: 'Full Page' })).toBeVisible();
  });

  test('shows an error and stays on login when credentials are rejected', async ({ page }) => {
    await mockBackend(page, 'unauthorized');
    await page.goto('/auth/login');

    await page.getByLabel('Username').fill(E2E_LOGIN.username);
    await page.getByLabel('Password').fill(E2E_LOGIN.password);
    await page.getByRole('button', { name: 'Login' }).click();

    await expect(page.getByText('Invalid username or password')).toBeVisible();
    await expect(page).toHaveURL(/\/auth\/login/);
    await expect(page.getByRole('heading', { name: 'Login to your account!' })).toBeVisible();
  });
});