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

test.describe('General - Dashboard - Network Analyzer - Traffic Monitor', () => {
  test.describe('Traffic Distribution', () => {
    test.beforeEach(async ({ page }) => {
      await page.goto('network-analyzer/traffic-monitor', {
        waitUntil: 'networkidle'
      });
    });

    test('Title', async ({ page }) => {
      const title = await page.title();
      expect(title).toBe(
        'Difuse - Dashboard - Network Analyzer - Traffic Monitor'
      );
    });

    test('Traffic Distribution Top Cards', async ({ page }) => {
      const hosts = await page.getByRole('heading', { name: 'Hosts' });
      const hostsIcon = await page.locator('.mdi-server-network');

      expect(hosts).toBeTruthy();
      const hostsValue = await page.textContent('#thc');
      expect(typeof parseInt(hostsValue)).toBe('number');

      const upload = await page.getByRole('heading', { name: 'Upload' });
      const uploadIcon = await page.locator('.mdi-upload');

      const uploadValue = await page.textContent('#tuc');
      expect(typeof parseInt(uploadValue)).toBe('number');

      const download = await page.getByRole('heading', { name: 'Download' });
      const downloadIcon = await page.locator('.mdi-download');

      const downloadValue = await page.textContent('#tdc');
      expect(typeof parseInt(downloadValue)).toBe('number');

      const connections = await page.getByRole('heading', {
        name: 'Connections'
      });
      const connectionsIcon = await page.locator('.mdi-lan-connect');

      const connectionsValue = await page.textContent('#tcc');
      expect(typeof parseInt(connectionsValue)).toBe('number');

      expect(hosts && upload && download && connections).toBeTruthy();
      expect(
        hostsIcon && uploadIcon && downloadIcon && connectionsIcon
      ).toBeTruthy();
    });

    test('Traffic', async ({ page }) => {
      expect(await page.$('header:has-text("Traffic")')).toBeTruthy();
      expect(await page.isVisible('#chart-1'));
    });

    test('Connections', async ({ page }) => {
      expect(await page.$('header:has-text("Connections")')).toBeTruthy();
      expect(await page.isVisible('#chart-2'));
    });

    test('Traffic Distribution', async ({ page }) => {
      expect(await page.$('header:has-text("Traffic Distribution")')).toBeTruthy();
    });
  });

  test.describe('Application Protocol', () => {
    test.beforeEach(async ({ page }) => {
      await page.goto('network-analyzer/traffic-monitor', {
        waitUntil: 'networkidle'
      });

      await page.click('#app-tab-bwm');
    });
    test('Download / Application', async ({ page }) => {
      expect(await page.$('header:has-text("Download / Application")')).toBeTruthy();
      expect(await page.isVisible('#chart-3'));
    });

    test('Upload / Application', async ({ page }) => {
      expect(await page.$('header:has-text("Upload / Application")')).toBeTruthy();
      expect(await page.isVisible('#chart-4'));
    });

    test('Application Protocol', async ({ page }) => {
      expect(await page.$('header:has-text("Application Protocol")')).toBeTruthy();
    });
  });

  test.describe('Internet Protocol', () => {
    test.beforeEach(async ({ page }) => {
      await page.goto('network-analyzer/traffic-monitor', {
        waitUntil: 'networkidle'
      });

      await page.click('#app-tab-bwm');
    });

    test('IPv4 vs. IPv6', async ({ page }) => {
      expect(await page.$('header:has-text("IPv4 vs. IPv6")')).toBeTruthy();
      expect(await page.isVisible('#chart-5'));
    });

    test('Dualstack Distribution', async ({ page }) => {
      expect(await page.$('header:has-text("Dualstack Distribution")')).toBeTruthy();
      expect(await page.isVisible('#chart-6'));
    });

    test('Usage by Host', async ({ page }) => {
      expect(await page.$('header:has-text("Usage by Host")')).toBeTruthy();
    });
  });

  test.describe('Export', () => {
    test.beforeEach(async ({ page }) => {
      await page.goto('network-analyzer/traffic-monitor', { waitUntil: 'load' });
      await page.click('#export-tab-bwm');
    });

    test('Grouped By Mac (CSV) Download Button', async ({ page }) => {
      const groupedByMac = await page.locator('a:has-text("Grouped By Mac (CSV)")');
      const isVisible = await groupedByMac.isVisible();
      expect(isVisible).toBeTruthy();
    });

    test('Grouped By IP (CSV) Download Button', async ({ page }) => {
      const groupedByIp = await page.locator('a:has-text("Grouped By IP (CSV)")');
      const isVisible = await groupedByIp.isVisible();
      expect(isVisible).toBeTruthy();
    });

    test('Grouped By Protocol (CSV) Download Button', async ({ page }) => {
      const groupedByProtocol = await page.locator('a:has-text("Grouped By Protocol (CSV)")');
      const isVisible = await groupedByProtocol.isVisible();
      expect(isVisible).toBeTruthy();
    });

    test('JSON Dump Download Button', async ({ page }) => {
      const jsonDump = await page.locator('a:has-text("JSON Dump")');
      const isVisible = await jsonDump.isVisible();
      expect(isVisible).toBeTruthy();
    });
  });
});