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

test.describe('Configuration Timeline', () => {
  test('can view config timeline from device page', 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 config timeline tab or link
      const timelineTab = page.locator(
        'a[href*="/config"], button:has-text("Config"), a:has-text("Timeline")'
      ).first();

      if (await timelineTab.isVisible()) {
        await timelineTab.click();
        await page.waitForTimeout(500);
      }
    }
  });

  test('shows configuration changes', 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 config timeline section
      const configSection = page.locator(
        ':has-text("Config"), :has-text("Changes"), :has-text("Timeline")'
      ).first();

      if (await configSection.isVisible({ timeout: 2000 }).catch(() => false)) {
        await expect(configSection).toBeVisible();
      }
    }
  });

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

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

      // Look for diff view
      const diffView = page.locator(
        '[data-diff], code, pre, .diff-view'
      ).first();

      if (await diffView.isVisible({ timeout: 2000 }).catch(() => false)) {
        await expect(diffView).toBeVisible();
      }
    }
  });

  test('can filter config timeline by date', 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 date filter
      const dateFilter = page.locator(
        'input[type="date"], select[name*="date"], button:has-text("Filter")'
      ).first();

      if (await dateFilter.isVisible()) {
        await expect(dateFilter).toBeVisible();
      }
    }
  });

  test('can download config backup', 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 download button
      const downloadButton = page.locator(
        'button:has-text("Download"), a[download], a:has-text("Export")'
      ).first();

      if (await downloadButton.isVisible()) {
        await expect(downloadButton).toBeVisible();
      }
    }
  });
});