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

test.beforeEach(async ({ page }) => {
  await page.goto('/');
  await expect(page.getByText('ALPHA-17', { exact: true })).toBeVisible();
  await expect(page.getByTestId('operational-map')).toBeVisible();
});

test('former workspaces preserve the same map, camera, selection, and live telemetry', async ({ page }) => {
  await page.evaluate(() => { (document.querySelector('[data-testid="operational-map"]') as HTMLElement & { __persistent?: symbol }).__persistent = Symbol.for('persistent-map'); });
  const originalCamera = await page.getByTestId('operational-map').getAttribute('data-camera');
  await expect(page.getByRole('complementary', { name: 'Fleet roster and control groups' })).toBeVisible();
  for (const tool of ['Queue', 'Events', 'Configuration', 'Recovery', 'Settings']) {
    await page.getByRole('button', { name: tool, exact: true }).first().click();
    await expect(page.getByTestId('operational-map')).toBeAttached();
    expect(await page.evaluate(() => (document.querySelector('[data-testid="operational-map"]') as HTMLElement & { __persistent?: symbol }).__persistent === Symbol.for('persistent-map'))).toBe(true);
    expect(await page.getByTestId('operational-map').getAttribute('data-camera')).toBe(originalCamera);
  }
  await expect(page.getByText(/12 VEHICLES/).first()).toBeVisible();
  await expect(page.getByText('LIVE TELEMETRY CONTINUES')).toBeVisible();
});

test('control groups remain local and double recall frames selected units', async ({ page }) => {
  await page.keyboard.press('Control+2');
  await expect(page.getByRole('status')).toContainText('Control group 2 assigned');
  await page.keyboard.press('2'); await page.keyboard.press('2');
  await expect(page.getByTestId('operational-map')).toHaveAttribute('data-camera', /1\.50|2\.10/);
});

test('route geometry completes into review and can be cancelled without issuing', async ({ page }) => {
  await page.getByRole('button', { name: 'Route', exact: true }).first().click();
  const map = page.getByTestId('operational-map'); const box = await map.boundingBox(); if (!box) throw new Error('map has no bounds');
  await page.mouse.click(box.x + box.width * .15, box.y + box.height * .68);
  await page.mouse.click(box.x + box.width * .43, box.y + box.height * .74);
  await page.mouse.click(box.x + box.width * .72, box.y + box.height * .69);
  await page.keyboard.press('Enter');
  await expect(page.getByLabel('Command draft review')).toContainText('3 WAYPOINTS');
  await expect(page.getByLabel('Command draft review')).toContainText('LOCAL ROUTE DRAFT · NOT SENT');
  await page.getByLabel('Command draft review').getByRole('button', { name: 'CANCEL' }).click();
  await expect(page.getByLabel('Command draft review')).not.toBeAttached();
});

test('map annotations use draft history undo and redo', async ({ page }) => {
  await page.getByRole('button', { name: 'Map creation tools' }).click();
  await page.getByRole('button', { name: 'Marker' }).click();
  const map = page.getByTestId('operational-map'); const box = await map.boundingBox(); if (!box) throw new Error('map has no bounds');
  await page.mouse.click(box.x + box.width * .55, box.y + box.height * .42);
  await page.keyboard.press('Control+z'); await page.keyboard.press('Control+y');
  await expect(map.locator('.draft-shape.complete')).toHaveCount(1);
});

test('deploys fifty provisional simulated vehicles in one cohort', async ({ page }) => {
  await page.keyboard.press('v'); await expect(page.getByText('VEHICLE DEPLOYMENT · PROVISIONAL')).toBeVisible();
  await page.getByRole('button', { name: 'STAGE 50 GHOSTS' }).click();
  await expect(page.getByRole('status')).toContainText('50 provisional'); await expect(page.getByText('50 STAGED')).toBeVisible();
});

test('commissioning remains docked over visible map and exposes calibration and diffs', async ({ page }) => {
  await page.getByRole('button', { name: 'Configuration' }).click();
  await expect(page.getByText('DOCKED COMMISSIONING')).toBeVisible(); await expect(page.getByTestId('operational-map')).toBeVisible();
  await page.getByRole('button', { name: 'SENSORS', exact: true }).click(); await expect(page.getByText('GYRO RESIDUAL')).toBeVisible();
  await page.getByRole('button', { name: 'PARAMETERS', exact: true }).click(); await expect(page.getByText('BASELINE → CURRENT → DESIRED')).toBeVisible();
});

for (const viewport of [{ width: 1366, height: 768 }, { width: 1920, height: 1080 }, { width: 3440, height: 1440 }]) test(`scene fits ${viewport.width}x${viewport.height}`, async ({ page }) => {
  await page.setViewportSize(viewport); const map = page.getByTestId('operational-map'); await expect(map).toBeVisible();
  const box = await map.boundingBox(); expect(box).not.toBeNull(); expect(box!.width).toBeGreaterThan(viewport.width * .3); expect(box!.height).toBeGreaterThan(viewport.height * .45);
  const overflow = await page.evaluate(() => ({ x: document.documentElement.scrollWidth - innerWidth, y: document.documentElement.scrollHeight - innerHeight })); expect(overflow.x).toBeLessThanOrEqual(0); expect(overflow.y).toBeLessThanOrEqual(0);
});