import { test, expect, Page } from './fixtures';

const PASSWORD = 'supersecret123';

const uniqueEmail = () => `orders-${Date.now().toString(36)}${Math.random().toString(36).slice(2, 7)}@example.com`;

// The generous wait is the same one the other account specs use: registration is
// a bcrypt round-trip rather than a render, and runs past Playwright's 5s
// default when the suite's workers all register at once.
async function registerCustomer(page: Page): Promise<string> {
  const email = uniqueEmail();
  await page.goto('/register');
  await page.getByRole('textbox', { name: 'Email' }).fill(email);
  await page.getByRole('textbox', { name: 'First name' }).fill('Test');
  await page.getByRole('textbox', { name: 'Last name' }).fill('Customer');
  await page.getByLabel('Password').fill(PASSWORD);
  await page.getByRole('button', { name: 'Create account' }).click();
  await expect(page.getByRole('button', { name: 'My Account' })).toBeVisible({ timeout: 20000 });
  return email;
}

test.describe('Order history has a page of its own', () => {
  test('a signed-out visitor is sent to sign in', async ({ page }) => {
    await page.goto('/orders');

    await expect(page).toHaveURL(/\/login/, { timeout: 20000 });
  });

  // A page, not a modal: no dialog, and the storefront is not rendered behind
  // it. Putting /orders in MODAL_ROUTES would quietly undo the whole change,
  // and this is what would catch it.
  test('renders as a page rather than a modal over the storefront', async ({ page }) => {
    await registerCustomer(page);
    await page.goto('/orders');

    await expect(page.getByRole('heading', { name: 'Order History' })).toBeVisible();
    await expect(page.getByRole('dialog')).toHaveCount(0);
    await expect(page.getByRole('heading', { name: 'Redefined Designs' })).toBeHidden();
  });

  test('says so when there are no orders, rather than showing an empty table', async ({ page }) => {
    await registerCustomer(page);
    await page.goto('/orders');

    await expect(page.getByText('No orders yet')).toBeVisible();
    await expect(page.getByRole('button', { name: 'Continue Shopping' })).toBeVisible();
  });

  test('Back to Shop returns to the storefront', async ({ page }) => {
    await registerCustomer(page);
    await page.goto('/orders');

    await page.getByRole('button', { name: 'Back to Shop' }).click();

    await expect(page).toHaveURL(/\/$/);
    await expect(page.getByRole('heading', { name: 'Redefined Designs' })).toBeVisible();
  });

  // The account view is where a customer looks for their orders, so the route
  // out of it is the part that has to keep working now the table has gone.
  test('My Account links to it', async ({ page }) => {
    await registerCustomer(page);
    await page.goto('/account');

    await page.getByRole('dialog', { name: 'My Account' })
      .getByRole('button', { name: 'View order history' }).click();

    await expect(page).toHaveURL(/\/orders/);
    await expect(page.getByRole('heading', { name: 'Order History' })).toBeVisible();
  });
});