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

test.describe('Register Page', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/register');
  });

  test('renders registration form with all fields', async ({ page }) => {
    await expect(page.getByRole('heading', { name: 'Tạo tài khoản' })).toBeVisible();
    await expect(page.getByText('Nhập thông tin để đăng ký tài khoản GoodGo')).toBeVisible();

    await expect(page.getByLabel('Họ và tên')).toBeVisible();
    await expect(page.getByLabel('Số điện thoại')).toBeVisible();
    await expect(page.getByLabel('Email (tùy chọn)')).toBeVisible();
    await expect(page.getByLabel('Mật khẩu', { exact: false }).first()).toBeVisible();
    await expect(page.getByLabel('Xác nhận mật khẩu')).toBeVisible();
    await expect(page.getByRole('button', { name: 'Đăng ký' })).toBeVisible();

    // OAuth buttons
    await expect(page.getByRole('button', { name: /Google/i })).toBeVisible();
    await expect(page.getByRole('button', { name: /Zalo/i })).toBeVisible();

    // Login link
    await expect(page.getByText('Đã có tài khoản?')).toBeVisible();
    await expect(page.getByRole('link', { name: 'Đăng nhập' })).toBeVisible();
  });

  test('shows validation errors for empty submission', async ({ page }) => {
    await page.getByRole('button', { name: 'Đăng ký' }).click();

    const alerts = page.locator('[role="alert"]');
    await expect(alerts.first()).toBeVisible();
  });

  test('validates password mismatch', async ({ page }) => {
    await page.getByLabel('Họ và tên').fill('Test User');
    await page.getByLabel('Số điện thoại').fill('0912345678');
    await page.getByLabel('Mật khẩu', { exact: false }).first().fill('Test@1234!');
    await page.getByLabel('Xác nhận mật khẩu').fill('DifferentPass1!');
    await page.getByRole('button', { name: 'Đăng ký' }).click();

    const alerts = page.locator('[role="alert"]');
    await expect(alerts.first()).toBeVisible();
  });

  test('validates phone number format', async ({ page }) => {
    await page.getByLabel('Họ và tên').fill('Test User');
    await page.getByLabel('Số điện thoại').fill('abc');
    await page.getByLabel('Mật khẩu', { exact: false }).first().fill('Test@1234!');
    await page.getByLabel('Xác nhận mật khẩu').fill('Test@1234!');
    await page.getByRole('button', { name: 'Đăng ký' }).click();

    const alerts = page.locator('[role="alert"]');
    await expect(alerts.first()).toBeVisible();
  });

  test('toggles password visibility for both fields', async ({ page }) => {
    const passwordInput = page.locator('#password');
    const confirmInput = page.getByLabel('Xác nhận mật khẩu');

    await expect(passwordInput).toHaveAttribute('type', 'password');
    await expect(confirmInput).toHaveAttribute('type', 'password');

    await page.getByRole('button', { name: 'Hiện' }).click();
    await expect(passwordInput).toHaveAttribute('type', 'text');
    await expect(confirmInput).toHaveAttribute('type', 'text');
  });

  test('navigates to login page', async ({ page }) => {
    await page.getByRole('link', { name: 'Đăng nhập' }).click();
    await expect(page).toHaveURL(/\/login/);
  });

  test('successful registration redirects to home', async ({ page }) => {
    await page.route('**/auth/register', (route) =>
      route.fulfill({
        status: 201,
        contentType: 'application/json',
        body: JSON.stringify({
          accessToken: 'fake-access-token',
          refreshToken: 'fake-refresh-token',
        }),
      }),
    );

    await page.getByLabel('Họ và tên').fill('Test User');
    await page.getByLabel('Số điện thoại').fill('0912345678');
    await page.getByLabel('Mật khẩu', { exact: false }).first().fill('Test@1234!');
    await page.getByLabel('Xác nhận mật khẩu').fill('Test@1234!');
    await page.getByRole('button', { name: 'Đăng ký' }).click();

    await expect(page).toHaveURL('/', { timeout: 5000 });
  });

  test('displays server error on failed registration', async ({ page }) => {
    await page.route('**/auth/register', (route) =>
      route.fulfill({
        status: 409,
        contentType: 'application/json',
        body: JSON.stringify({ message: 'Số điện thoại đã được đăng ký' }),
      }),
    );

    await page.getByLabel('Họ và tên').fill('Test User');
    await page.getByLabel('Số điện thoại').fill('0912345678');
    await page.getByLabel('Mật khẩu', { exact: false }).first().fill('Test@1234!');
    await page.getByLabel('Xác nhận mật khẩu').fill('Test@1234!');
    await page.getByRole('button', { name: 'Đăng ký' }).click();

    const errorAlert = page.locator('[role="alert"]').filter({ hasNotText: /Họ và tên|Số điện thoại|Mật khẩu|Xác nhận/ });
    await expect(errorAlert.first()).toBeVisible({ timeout: 5000 });
  });
});