import { test, expect } from '@playwright/test';
import { login, logout, isLoggedIn } from '../helpers/auth.helper';
import { navigateToRefreshStatus, clickNavLink } from '../helpers/navigation.helper';
import { getDataGridRowCount, getBadgeStyle, clickButton, StatusBadgeStyles } from '../helpers/radzen.helper';

test.describe('Refresh Status Page', () => {
  test.beforeEach(async ({ page }) => {
    await navigateToRefreshStatus(page);
  });

  test.describe('Page Load and Display', () => {
    test('page loads and displays Cache Refresh Status heading', async ({ page }) => {
      // Verify page title
      await expect(page).toHaveTitle(/Cache Refresh Status - JDE Scoping Tool/);

      // Verify heading is visible
      await expect(page.locator('h4:has-text("Cache Refresh Status")')).toBeVisible();
    });

    test('page shows date filter panel', async ({ page }) => {
      // Verify filter panel card is visible
      const filterCard = page.locator('.rz-card').first();
      await expect(filterCard).toBeVisible();
    });

    test('page shows data grid component', async ({ page }) => {
      // Wait for loading to complete and grid to appear
      await page.waitForTimeout(2000);
      const dataGrid = page.locator('.rz-data-grid');
      await expect(dataGrid).toBeVisible({ timeout: 15000 });
    });

    test('no error notification on page load', async ({ page }) => {
      const errorNotification = page.locator('.rz-notification-error');
      await expect(errorNotification).not.toBeVisible({ timeout: 5000 });
    });
  });

  test.describe('Date Filter Panel', () => {
    test('start time date picker is visible', async ({ page }) => {
      await expect(page.locator('text=Start Time')).toBeVisible();
    });

    test('end time date picker is visible', async ({ page }) => {
      await expect(page.locator('text=End Time')).toBeVisible();
    });

    test('filter button is visible', async ({ page }) => {
      const filterButton = page.locator('button:has-text("Filter")');
      await expect(filterButton).toBeVisible();
    });

    test('date pickers have default values (last 7 days)', async ({ page }) => {
      // The page defaults to last 7 days
      // Just verify the date pickers are present and functional
      const datePickers = page.locator('.rz-datepicker');
      const count = await datePickers.count();
      expect(count).toBeGreaterThanOrEqual(2);
    });

    test('clicking filter button triggers data reload', async ({ page }) => {
      // Wait for initial load
      await page.waitForTimeout(2000);

      // Click filter button
      const filterButton = page.locator('button:has-text("Filter")');
      await filterButton.click();

      // Wait for data to reload
      await page.waitForTimeout(2000);

      // Verify no error
      const errorNotification = page.locator('.rz-notification-error');
      await expect(errorNotification).not.toBeVisible({ timeout: 5000 });
    });

    test('date filtering works with custom date range', async ({ page }) => {
      // Wait for initial load
      await page.waitForTimeout(2000);

      // The date pickers should be interactive
      const startDatePicker = page.locator('.rz-datepicker').first();
      await expect(startDatePicker).toBeVisible();

      // Click filter to reload with current dates
      await clickButton(page, 'Filter');

      // Wait for reload
      await page.waitForTimeout(2000);

      // Verify no error occurred
      const errorNotification = page.locator('.rz-notification-error');
      await expect(errorNotification).not.toBeVisible({ timeout: 5000 });
    });
  });

  test.describe('Data Grid Columns', () => {
    test('data grid shows Start column', async ({ page }) => {
      await page.waitForTimeout(2000);
      const startHeader = page.locator('.rz-data-grid th:has-text("Start")');
      await expect(startHeader).toBeVisible();
    });

    test('data grid shows End column', async ({ page }) => {
      await page.waitForTimeout(2000);
      const endHeader = page.locator('.rz-data-grid th:has-text("End")');
      await expect(endHeader).toBeVisible();
    });

    test('data grid shows Branch column', async ({ page }) => {
      await page.waitForTimeout(2000);
      const branchHeader = page.locator('.rz-data-grid th:has-text("Branch")');
      await expect(branchHeader).toBeVisible();
    });

    test('data grid shows Profit Center column', async ({ page }) => {
      await page.waitForTimeout(2000);
      const pcHeader = page.locator('.rz-data-grid th:has-text("Profit Center")');
      await expect(pcHeader).toBeVisible();
    });

    test('data grid shows Work Center column', async ({ page }) => {
      await page.waitForTimeout(2000);
      const wcHeader = page.locator('.rz-data-grid th:has-text("Work Center")');
      await expect(wcHeader).toBeVisible();
    });

    test('data grid shows Was Successful column', async ({ page }) => {
      await page.waitForTimeout(2000);
      const successHeader = page.locator('.rz-data-grid th:has-text("Was Successful")');
      await expect(successHeader).toBeVisible();
    });

    test('all entity record count columns are present', async ({ page }) => {
      await page.waitForTimeout(2000);
      const headers = page.locator('.rz-data-grid th');
      const headerTexts = await headers.allTextContents();

      // Verify key columns exist
      expect(headerTexts.some(h => h.includes('Branch'))).toBe(true);
      expect(headerTexts.some(h => h.includes('Profit Center'))).toBe(true);
      expect(headerTexts.some(h => h.includes('Work Center'))).toBe(true);
      expect(headerTexts.some(h => h.includes('Item'))).toBe(true);
      expect(headerTexts.some(h => h.includes('Lot'))).toBe(true);
      expect(headerTexts.some(h => h.includes('Work Order'))).toBe(true);
    });
  });

  test.describe('Success/Failure Badges', () => {
    test('success badge displays with success style (YES)', async ({ page }) => {
      await page.waitForTimeout(2000);

      const yesBadge = page.locator('.rz-data-grid .rz-badge:has-text("YES")').first();

      if (await yesBadge.isVisible({ timeout: 3000 }).catch(() => false)) {
        const style = await getBadgeStyle(yesBadge);
        expect(style).toBe('success');
      }
    });

    test('failure badge displays with danger style (NO)', async ({ page }) => {
      await page.waitForTimeout(2000);

      const noBadge = page.locator('.rz-data-grid .rz-badge:has-text("NO")').first();

      if (await noBadge.isVisible({ timeout: 3000 }).catch(() => false)) {
        const style = await getBadgeStyle(noBadge);
        expect(style).toBe('danger');
      }
    });

    test('Was Successful column shows badges not text', async ({ page }) => {
      await page.waitForTimeout(2000);
      const rowCount = await getDataGridRowCount(page);

      if (rowCount > 0) {
        // The Was Successful column should contain badges
        const successBadges = page.locator('.rz-data-grid tbody .rz-badge');
        const badgeCount = await successBadges.count();

        // Should have at least one badge (for each row's Was Successful column)
        if (rowCount > 0) {
          expect(badgeCount).toBeGreaterThan(0);
        }
      }
    });
  });

  test.describe('Data Grid Features', () => {
    test('data grid supports sorting', async ({ page }) => {
      await page.waitForTimeout(2000);

      // Click on Start column header to sort
      const startHeader = page.locator('.rz-data-grid th:has-text("Start")');
      await startHeader.click();
      await page.waitForTimeout(500);

      // Verify no error occurred
      const errorNotification = page.locator('.rz-notification-error');
      await expect(errorNotification).not.toBeVisible({ timeout: 2000 });
    });

    test('data grid supports pagination with 20 items per page', async ({ page }) => {
      await page.waitForTimeout(2000);

      // Look for pager component
      const pager = page.locator('.rz-pager');
      await expect(pager).toBeVisible({ timeout: 5000 });
    });

    test('data grid supports column resize', async ({ page }) => {
      await page.waitForTimeout(2000);

      // Verify the grid is visible and no errors
      const dataGrid = page.locator('.rz-data-grid');
      await expect(dataGrid).toBeVisible();

      const errorNotification = page.locator('.rz-notification-error');
      await expect(errorNotification).not.toBeVisible({ timeout: 2000 });
    });

    test('data grid text is center aligned', async ({ page }) => {
      await page.waitForTimeout(2000);

      // The grid has Style="text-align: center;"
      const dataGrid = page.locator('.rz-data-grid');
      const style = await dataGrid.getAttribute('style');

      // Verify text-align center is set
      if (style) {
        expect(style.includes('text-align: center') || style.includes('text-align:center')).toBe(true);
      }
    });
  });

  test.describe('Date Formatting', () => {
    test('start date is formatted correctly (MM/dd/yyyy hh:mm tt)', async ({ page }) => {
      await page.waitForTimeout(2000);
      const rowCount = await getDataGridRowCount(page);

      if (rowCount > 0) {
        // Get text from Start column (first column)
        const startCell = page.locator('.rz-data-grid tbody tr').first().locator('td').first();
        const dateText = await startCell.textContent();

        if (dateText && dateText.trim()) {
          // Verify date format matches MM/dd/yyyy hh:mm tt pattern
          const datePattern = /^\d{2}\/\d{2}\/\d{4} \d{2}:\d{2} (AM|PM)$/;
          expect(dateText.trim()).toMatch(datePattern);
        }
      }
    });

    test('end date is formatted correctly when present', async ({ page }) => {
      await page.waitForTimeout(2000);
      const rowCount = await getDataGridRowCount(page);

      if (rowCount > 0) {
        // Get text from End column (second column)
        const endCell = page.locator('.rz-data-grid tbody tr').first().locator('td').nth(1);
        const dateText = await endCell.textContent();

        if (dateText && dateText.trim()) {
          // Verify date format matches MM/dd/yyyy hh:mm tt pattern
          const datePattern = /^\d{2}\/\d{2}\/\d{4} \d{2}:\d{2} (AM|PM)$/;
          expect(dateText.trim()).toMatch(datePattern);
        }
      }
    });
  });

  test.describe('Record Count Display', () => {
    test('record count columns show numeric values', async ({ page }) => {
      await page.waitForTimeout(2000);
      const rowCount = await getDataGridRowCount(page);

      if (rowCount > 0) {
        // Get text from Branch column (third column)
        const branchCell = page.locator('.rz-data-grid tbody tr').first().locator('td').nth(2);
        const countText = await branchCell.textContent();

        if (countText && countText.trim()) {
          // Should be a number
          const count = parseInt(countText.trim(), 10);
          expect(Number.isInteger(count) || countText.trim() === '').toBe(true);
        }
      }
    });
  });

  test.describe('Loading State', () => {
    test('shows loading indicator while fetching data', async ({ page }) => {
      // Navigate fresh to catch loading state
      await page.goto('/refresh-status');
      await page.waitForLoadState('networkidle', { timeout: 60000 });

      // If there's a loading indicator, it should eventually disappear
      const loadingIndicator = page.locator('text=Loading refresh status');

      // Either loading is visible briefly or already gone
      await page.waitForTimeout(3000);

      // After waiting, loading should be gone
      await expect(loadingIndicator).not.toBeVisible({ timeout: 10000 });
    });
  });
});