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

const BASE = process.env.PLAYWRIGHT_BASE_URL || 'http://192.168.0.251:13000';
const TEST_EMAIL = process.env.VITE_TEST_TEACHER_EMAIL;
const TEST_PASSWORD = process.env.VITE_TEST_TEACHER_PASSWORD;

async function serverReachable() {
  try {
    const ctx = await request.newContext();
    const res = await ctx.get(BASE, { timeout: 3000 }).catch(() => null);
    await ctx.dispose();
    return Boolean(res);
  } catch {
    return false;
  }
}

async function login(page) {
  await page.goto(`${BASE}/login`);
  await page.getByLabel('Email').fill(TEST_EMAIL);
  await page.getByLabel('Password').fill(TEST_PASSWORD);
  await page.getByRole('button', { name: 'Login' }).click();
  await page.waitForURL((url) => /\/dashboard|\/node\//.test(url.pathname), { timeout: 15000 });
}

function skipIfUnconfigured() {
  if (!TEST_EMAIL || !TEST_PASSWORD) test.skip(true, 'VITE_TEST_TEACHER_EMAIL / VITE_TEST_TEACHER_PASSWORD not set');
}

test.describe('Canvas mount', () => {
  test.beforeAll(async () => {
    skipIfUnconfigured();
    const reachable = await serverReachable();
    test.skip(!reachable, `Dev server not reachable at ${BASE}`);
  });

  test('login and show lesson canvas within 5s', async ({ page }) => {
    await login(page);
    const canvasVisible = await page
      .locator('[data-testid="tldraw-canvas"], .tl-container')
      .waitFor({ timeout: 10000 })
      .then(() => true)
      .catch(() => false);
    expect(canvasVisible).toBe(true);
    await expect(page.locator('[class*="error-state"], [data-testid="error"]').first()).toBeHidden({ timeout: 2000 }).catch(() => {});
  });
});