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();
});

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 [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);
});