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

test.describe('Devices', () => {
  test('can view devices list', async ({ page }) => {
    await page.goto('/devices');

    await expect(page).toHaveURL(/\/devices/);
    await expect(page.locator('body')).toBeVisible();
  });

  test('can filter devices by status', async ({ page }) => {
    await page.goto('/devices');

    // Look for status filter tabs or buttons
    const filterButtons = page.locator(
      'button:has-text("All"), button:has-text("Online"), button:has-text("Offline"), [role="tab"]'
    );

    if ((await filterButtons.count()) > 0) {
      const firstFilter = filterButtons.first();
      await firstFilter.click();
      await page.waitForTimeout(500); // Wait for filter to apply
    }
  });

  test('can search for devices', async ({ page }) => {
    await page.goto('/devices');

    // Look for search input
    const searchInput = page.locator('input[type="search"], input[placeholder*="Search"]').first();

    if (await searchInput.isVisible()) {
      await searchInput.fill('test');
      await page.waitForTimeout(500); // Wait for search results
    }
  });

  test('can navigate to device details', async ({ page }) => {
    await page.goto('/devices');

    // Find first device link (exclude "new" link)
    const firstDevice = page.locator('a[href*="/devices/"]:not([href*="/devices/new"])').first();
    if (await firstDevice.isVisible({ timeout: 2000 }).catch(() => false)) {
      const href = await firstDevice.getAttribute('href');
      if (href && !href.includes('#!')) {
        await firstDevice.click();
        await page.waitForTimeout(500);
      }
    }
  });

  test('can view device graphs', async ({ page }) => {
    await page.goto('/devices');

    // Navigate to first device
    const firstDevice = page.locator('a[href*="/devices/"]').first();
    if (await firstDevice.isVisible()) {
      await firstDevice.click();

      // Look for graph/chart sections
      const graphSection = page.locator('[data-graph], canvas, svg').first();
      if (await graphSection.isVisible({ timeout: 3000 }).catch(() => false)) {
        await expect(graphSection).toBeVisible();
      }
    }
  });

  test('can access device settings', async ({ page }) => {
    await page.goto('/devices');

    // Navigate to first device
    const firstDevice = page.locator('a[href*="/devices/"]').first();
    if (await firstDevice.isVisible()) {
      await firstDevice.click();

      // Look for edit or settings button
      const editButton = page.locator(
        'a[href*="/edit"], button:has-text("Edit"), a:has-text("Settings")'
      ).first();

      if (await editButton.isVisible()) {
        await editButton.click();
        await expect(page).toHaveURL(/\/devices\/[^\/]+\/edit/);
      }
    }
  });

  test('can create a new device', async ({ page }) => {
    await page.goto('/devices');

    // Look for "New Device" or "Add Device" button
    const newDeviceButton = page.locator(
      'a[href*="/devices/new"], button:has-text("New Device"), button:has-text("Add Device"), a:has-text("New Device")'
    ).first();

    if (await newDeviceButton.isVisible({ timeout: 2000 }).catch(() => false)) {
      await newDeviceButton.click();
      await page.waitForTimeout(500);
      // Check if we navigated to new device page or stayed on devices list
      const currentUrl = page.url();
      if (currentUrl.includes('/new')) {
        await expect(page).toHaveURL(/\/devices\/new/);
      }
    }
  });
});