import { test, expect } from '@playwright/test';
import { resolve, dirname } from 'node:path';
import { fileURLToPath } from 'node:url';

const __dirname = dirname(fileURLToPath(import.meta.url));

async function loadCube(page: import('@playwright/test').Page) {
  await page.locator('#file-input').setInputFiles(resolve(__dirname, '../fixtures/cube.obj'));
  await page.waitForTimeout(3000);
}

test.describe('Status Bar', () => {
  test('shows FOV, FPS, and render mode', async ({ page }) => {
    await page.goto('/');
    await page.locator('canvas').first().waitFor({ state: 'visible', timeout: 10000 });
    await loadCube(page);
    const status = page.locator('[data-testid="status-bar"]');
    await expect(status).toContainText('FOV');
    await expect(status).toContainText('FPS');
    await expect(status).toContainText('BO_RENDERING');
  });

  test('shows vertex and face count', async ({ page }) => {
    await page.goto('/');
    await page.locator('canvas').first().waitFor({ state: 'visible', timeout: 10000 });
    await loadCube(page);
    const status = page.locator('[data-testid="status-bar"]');
    await expect(status).toContainText('Vertices:');
    await expect(status).toContainText('Faces:');
  });
});

test.describe('Memory Meter', () => {
  test('shows percentage format', async ({ page }) => {
    await page.goto('/');
    await page.locator('canvas').first().waitFor({ state: 'visible', timeout: 10000 });
    await loadCube(page);
    const memBar = page.locator('[data-testid="memory-bar"]');
    await expect(memBar).toContainText('Mem');
    await expect(memBar).toContainText('%');
  });
});

test.describe('Layer Panel Details', () => {
  test('clicking layer expands details', async ({ page }) => {
    await page.goto('/');
    await page.locator('canvas').first().waitFor({ state: 'visible', timeout: 10000 });
    await loadCube(page);
    await page.locator('[data-testid="layer-item"]').first().click();
    await expect(page.locator('[data-testid="layer-details"]')).toBeVisible();
    await expect(page.locator('[data-testid="layer-details"]')).toContainText('Vertices');
    await expect(page.locator('[data-testid="layer-details"]')).toContainText('Faces');
  });
});

test.describe('Decoration Toggles in Panel', () => {
  test('Boundary toggles visible in render settings', async ({ page }) => {
    await page.goto('/');
    await page.locator('canvas').first().waitFor({ state: 'visible', timeout: 10000 });
    await loadCube(page);
    await expect(page.locator('text=Boundary Edges').first()).toBeVisible();
    await expect(page.locator('text=Boundary Faces').first()).toBeVisible();
  });

  test('No-Manif and Texture Border toggles visible', async ({ page }) => {
    await page.goto('/');
    await page.locator('canvas').first().waitFor({ state: 'visible', timeout: 10000 });
    await loadCube(page);
    await expect(page.locator('text=No-Manif Verts').first()).toBeVisible();
    await expect(page.locator('text=Texture Border').first()).toBeVisible();
  });
});

test.describe('Viewport Buttons', () => {
  test('viewport buttons 1-4 visible', async ({ page }) => {
    await page.goto('/');
    await page.locator('canvas').first().waitFor({ state: 'visible', timeout: 10000 });
    await loadCube(page);
    await expect(page.locator('[data-testid="viewport-btn-1"]')).toBeVisible();
    await expect(page.locator('[data-testid="viewport-btn-2"]')).toBeVisible();
  });
});

test.describe('Welcome Screen', () => {
  test('shows updated format text', async ({ page }) => {
    await page.goto('/');
    await expect(page.locator('text=20+ formats').first()).toBeVisible({ timeout: 5000 });
  });
});
