import { test, expect } from '@playwright/test';
import { waitForBlazor, loginAsAdmin, logout } from '../helpers/auth.helper';
import { ROUTES, ADMIN_USER } from '../helpers/test-data';

/**
 * EN: Authentication flow E2E tests for GoodGo TPOS.
 * VI: E2E tests cho luong xac thuc GoodGo TPOS.
 */
test.describe('Authentication', () => {
  test.beforeEach(async ({ page }) => {
    // Ensure clean state — no leftover tokens
    await page.goto(ROUTES.LOGIN);
    await page.evaluate(() => localStorage.clear());
  });

  // -----------------------------------------------------------------------
  // 1. Login page renders correctly
  // -----------------------------------------------------------------------
  test('should display login page with form elements', async ({ page }) => {
    await page.goto(ROUTES.LOGIN);
    await waitForBlazor(page);

    // Login page should render role selection or login form
    await expect(page).toHaveURL(/\/(auth\/login|login)/);

    // Should have at least one visible heading or brand element
    const heading = page.locator('h1, h2, h3, [class*="brand"], [class*="title"]').first();
    await expect(heading).toBeVisible({ timeout: 10_000 });
  });

  // -----------------------------------------------------------------------
  // 2. Admin login page shows email and password fields
  // -----------------------------------------------------------------------
  test('should show email and password inputs on admin login', async ({ page }) => {
    await page.goto(ROUTES.LOGIN_ADMIN);
    await waitForBlazor(page);

    const emailInput = page.locator('input[type="email"], input[autocomplete="email"]').first();
    const passwordInput = page.locator('input[type="password"]').first();

    await expect(emailInput).toBeVisible();
    await expect(passwordInput).toBeVisible();
  });

  // -----------------------------------------------------------------------
  // 3. Validation errors for empty form submission
  // -----------------------------------------------------------------------
  test('should show validation errors for empty form submission', async ({ page }) => {
    await page.goto(ROUTES.LOGIN_ADMIN);
    await waitForBlazor(page);

    // Click submit without filling in fields
    const submitButton = page.locator('button[type="submit"]').first();
    await submitButton.click();

    // MudBlazor validation renders .mud-input-error or helper text with error class
    const errorMessage = page.locator(
      '.mud-input-error, .mud-input-helper-text.mud-input-error, [class*="validation-message"], [class*="error"]',
    ).first();
    await expect(errorMessage).toBeVisible({ timeout: 5_000 });
  });

  // -----------------------------------------------------------------------
  // 4. Error message for wrong credentials
  // -----------------------------------------------------------------------
  test('should show error for wrong credentials', async ({ page }) => {
    await page.goto(ROUTES.LOGIN_ADMIN);
    await waitForBlazor(page);

    await page.locator('input[type="email"], input[autocomplete="email"]').first().fill('wrong@goodgo.vn');
    await page.locator('input[type="password"]').first().fill('WrongPassword@999');
    await page.locator('button[type="submit"]').first().click();

    // Should show an error notification (MudSnackbar) or inline error
    const errorIndicator = page.locator(
      '.mud-snackbar-error, .mud-alert-error, [class*="error"], [class*="snackbar"]',
    ).first();
    await expect(errorIndicator).toBeVisible({ timeout: 10_000 });
  });

  // -----------------------------------------------------------------------
  // 5. Successful login redirects to admin dashboard
  // -----------------------------------------------------------------------
  test('should login successfully and redirect to admin dashboard', async ({ page }) => {
    await loginAsAdmin(page);

    await expect(page).toHaveURL(/\/admin/);

    // Should store JWT token in localStorage
    const token = await page.evaluate(() => localStorage.getItem('aPOS_token'));
    expect(token).toBeTruthy();
  });

  // -----------------------------------------------------------------------
  // 6. Register page renders
  // -----------------------------------------------------------------------
  test('should display register page', async ({ page }) => {
    await page.goto(ROUTES.REGISTER);
    await waitForBlazor(page);

    await expect(page).toHaveURL(/\/register/);

    // Should have registration form elements
    const formElement = page.locator('form, [class*="register"], [class*="auth"]').first();
    await expect(formElement).toBeVisible({ timeout: 10_000 });
  });
});
