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

async function fulfillJson(route: Route, status: number, body: unknown) {
  const origin = route.request().headers()['origin'] ?? '*';

  await route.fulfill({
    status,
    contentType: 'application/json',
    headers: {
      'Access-Control-Allow-Origin': origin,
      'Access-Control-Allow-Credentials': 'true',
      'Access-Control-Allow-Headers': 'content-type,x-csrf-token',
      'Access-Control-Allow-Methods': 'GET,POST,OPTIONS',
    },
    body: JSON.stringify(body),
  });
}

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: 'Đăng ký' })).toBeVisible();
    await expect(page.getByText('Tạo tài khoản mới để bắt đầu sử dụng 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')).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) =>
      fulfillJson(route, 201, { message: 'Registered successfully' }),
    );
    await page.route('**/auth/profile', (route) =>
      fulfillJson(route, 200, {
        id: 'test-user-id',
        email: null,
        phone: '0912345678',
        fullName: 'Test User',
        avatarUrl: null,
        role: 'USER',
        kycStatus: 'NOT_SUBMITTED',
        isActive: true,
        createdAt: new Date().toISOString(),
      }),
    );

    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) =>
      fulfillJson(route, 409, { 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 });
  });
});