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

test('login and project channel workbench flow', async ({ page }) => {
  await page.goto('/');

  await expect(page.getByLabel('Server IP or domain')).toBeVisible();
  await page.getByLabel('Server IP or domain').fill('localhost:8080');
  await page.getByLabel('Email or username').fill('david@example.com');
  await page.getByLabel('Password').fill('secret');
  await page.getByRole('button', { name: 'Log in' }).click();

  await expect(page.getByLabel('Project list')).toBeVisible();
  await expect(page.getByRole('button', { name: 'Project A1' })).toHaveAttribute('aria-pressed', 'true');
  await expect(page.getByRole('button', { name: 'Message Flow 36' })).toBeVisible();

  await page.getByRole('button', { name: 'Work Plan 8' }).click();
  await expect(page.getByText('Tasks')).toBeVisible();
  await expect(page.getByRole('button', { name: 'Inspect Confirm homepage information architecture' })).toBeVisible();

  await page.getByRole('button', { name: 'Project A2' }).click();
  await expect(page.getByRole('button', { name: 'Project A2' })).toHaveAttribute('aria-pressed', 'true');
  await expect(page.getByText('Ops Dashboard')).toBeVisible();

  await page.getByRole('button', { name: 'Ops Dashboard' }).click();
  await expect(page.getByText('Open external channel')).toBeVisible();
});

for (const server of [
  'https://user:secret@example.com',
  'http:////example.com',
  'http//example.com',
  'https//example.com',
  'http:/example.com',
  'https:/example.com',
  'http://example.com\\path',
  'http://example..com',
  'http://-bad.com',
]) {
  test(`rejects malformed server address: ${server}`, async ({ page }) => {
    await page.goto('/');

    await page.getByLabel('Server IP or domain').fill(server);
    await page.getByLabel('Email or username').fill('david@example.com');
    await page.getByLabel('Password').fill('secret');
    await page.getByRole('button', { name: 'Log in' }).click();

    await expect(page.getByText('Enter a valid HTTP or HTTPS server address.')).toBeVisible();
    await expect(page.getByLabel('Server IP or domain')).toBeVisible();
  });
}

test('mobile workbench keeps project navigation and inspector compact', async ({ page }) => {
  await page.setViewportSize({ width: 390, height: 844 });
  await page.goto('/');

  await page.getByLabel('Server IP or domain').fill('localhost:8080');
  await page.getByLabel('Email or username').fill('david@example.com');
  await page.getByLabel('Password').fill('secret');
  await page.getByRole('button', { name: 'Log in' }).click();

  const rail = page.getByLabel('Project list');
  const sidebar = page.getByLabel('Project channels');
  const stage = page.getByLabel('Channel content');
  const inspector = page.getByLabel('Object inspector');

  await expect(rail).toHaveCSS('grid-auto-flow', 'column');
  await expect(rail).toHaveCSS('max-height', '76px');
  await expect(inspector).toHaveCSS('max-height', '288px');

  const workPlan = page.getByRole('button', { name: 'Work Plan 8' });
  await expect(workPlan).toBeVisible();
  await expect(workPlan).toBeInViewport();
  await workPlan.click();
  await expect(page.getByRole('heading', { name: 'Tasks' })).toBeVisible();

  const [sidebarBox, stageBox] = await Promise.all([sidebar.boundingBox(), stage.boundingBox()]);
  expect(sidebarBox?.y).toBeLessThan(stageBox?.y ?? 0);
  expect((stageBox?.y ?? 0) - (sidebarBox?.y ?? 0)).toBeLessThanOrEqual(248);
});
