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

test.describe('General - Dashboard - Network Analyzer - Deep Packet Inspection', () => {
  test.describe('Overview', () => {
    test.beforeEach(async ({ page }) => {
      await page.goto('network-analyzer/deep-packet-inspector', { waitUntil: 'load' });
      
      await page.waitForSelector('.card-content', { timeout: 3000 });
    });

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

    test('Deep Packet Inspection (DPI)', async ({ page }) => {
      expect(await page.$('p:has-text("Deep Packet Inspection (DPI)")')).toBeTruthy();
    });

    test('Tabs', async ({ page }) => {
      const overviewTab = await page.locator('#overview-tab-dpi');
      const detailExplorerTab = await page.locator('#detail-tab-dpi');
      const liveViewTab = await page.locator('#liveview-tab-dpi');
      const settingsTab = await page.locator('#settings-tab-dpi');

      expect(overviewTab && detailExplorerTab && liveViewTab && settingsTab).toBeTruthy();
    });

    test('Overview Top Cards', async ({ page }) => {
      const inspectedFlows = await page.getByRole('heading', { name: 'Inspected Flows' });
      const inspectedFlowsIcon = await page.locator('.mdi-magnify');

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

      const applications = await page.getByRole('heading', { name: 'Applications' });
      const applicationsIcon = await page.locator('.mdi-apps');

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

      const countries = await page.getByRole('heading', { name: 'Countries' });
      const countriesIcon = await page.locator('.mdi-earth');

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

      const domains = await page.getByRole('heading', { name: 'Domains' });
      const domainsIcon = await page.locator('.mdi-server');

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

      expect(inspectedFlows && applications && countries && domains).toBeTruthy();
      expect(inspectedFlowsIcon && applicationsIcon && countriesIcon && domainsIcon).toBeTruthy();
    });

    test('Connections by Country', async ({ page }) => {
      expect(await page.$('p:has-text("Connections by Country")')).toBeTruthy();
    });

    test('DPI Map', async ({ page }) => {
      const dpiMap = await page.locator('#dpi-map');
      const isVisible = await dpiMap.isVisible();
      const isEnabled = await dpiMap.isEnabled();

      expect(isVisible && isEnabled).toBeTruthy();
    });

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

    test('Detected Applications Filter', async ({ page }) => {
      const filterField = await page.locator('#filter-field-apps');
      const loadFilterField = await filterField.isVisible();
      expect(loadFilterField).toBeTruthy();
      await filterField.selectOption({ label: 'Category' });

      const typeField = await page.locator('#filter-type-apps');
      const loadType = await typeField.isVisible();
      expect(loadType).toBeTruthy();
      await typeField.selectOption({ label: '=' });

      const valueField = await page.locator('#filter-value-categories');
      const loadValue = await typeField.isVisible();
      expect(loadValue).toBeTruthy();
      await valueField.selectOption({ label: 'CDN' });

      const filterFieldValue = await filterField.inputValue();
      expect(filterFieldValue).toBe('category');

      const typeValue = await typeField.inputValue();
      expect(typeValue).toBe('=');

      const value = await valueField.inputValue();
      expect(value).toBe('CDN');
    });

    test('Clear Filter',async({page})=>{
        const clearFilter = await page.locator('#filter-clear-apps')
        expect(await clearFilter.isVisible()).toBeTruthy()
    })

    test('Download PDF Button',async({page})=>{
        const button = await page.$('button[data-type="PDF"]');
        const isVisible =await button.isVisible()
        const isEnabled =await button.isEnabled()
        const  buttonName = await button.textContent()

        expect(isVisible && isEnabled).toBeTruthy()
        expect(buttonName).toBe('Download PDF')
    })

    test('Download XLSX Button',async({page})=>{
        const button = await page.$('button[data-type="XLSX"]');
        const isVisible =await button.isVisible()
        const  buttonName = await button.textContent()

        expect(isVisible).toBeTruthy()
        expect(buttonName).toBe('Download XLSX')
    })

    test('Download CSV Button',async({page})=>{
        const button = await page.$('button[data-type="CSV"]');
        const isVisible =await button.isVisible()
        const isEnabled =await button.isEnabled()
        const  buttonName = await button.textContent()

        expect(isVisible && isEnabled).toBeTruthy()
        expect(buttonName).toBe('Download CSV')
    })

    test('Download JSON Button',async({page})=>{
        const button = await page.$('button[data-type="JSON"]');
        const isVisible =await button.isVisible()
        const isEnabled =await button.isEnabled()
        const  buttonName = await button.textContent()

        expect(isVisible && isEnabled).toBeTruthy()
        expect(buttonName).toBe('Download JSON')
    })


  });
});