import { test, expect } from '@playwright/test';
import {
  loginAsAdmin,
  navigateToProjectDashboard,
  waitForPageStable
} from './helpers/pmcore';

/**
 * PM Core Dashboard Tests
 *
 * Tests the Project Dashboard functionality including:
 * - Dashboard page loads successfully
 * - Statistics cards display correctly
 * - Charts render properly
 * - Recent projects widget is visible
 * - Overdue projects are highlighted
 */

test.describe('Project Dashboard', () => {
  test.beforeEach(async ({ page }) => {
    await loginAsAdmin(page);
  });

  test('should display project dashboard', async ({ page }) => {
    await test.step('Navigate to project dashboard', async () => {
      await navigateToProjectDashboard(page);
    });

    await test.step('Verify page loads successfully', async () => {
      const pageTitle = page.locator('h4, h5, .breadcrumb').filter({ hasText: /Project|Dashboard/i }).first();
      await expect(pageTitle).toBeVisible();
      await expect(page.locator('.card').first()).toBeVisible();
    });
  });

  test('should display project statistics cards', async ({ page }) => {
    await test.step('Navigate to project dashboard', async () => {
      await navigateToProjectDashboard(page);
      await waitForPageStable(page);
    });

    await test.step('Check for stat cards', async () => {
      const totalProjectsCard = page.locator('.card').filter({ hasText: /Total Projects/i }).first();
      await expect(totalProjectsCard).toBeVisible();

      const activeProjectsCard = page.locator('.card').filter({ hasText: /Active|In Progress/i }).first();
      await expect(activeProjectsCard).toBeVisible();
    });

    await test.step('Verify stat cards have icons', async () => {
      await expect(page.locator('.bx, [class*="bx-"]').first()).toBeVisible();
    });
  });

  test('should render charts', async ({ page }) => {
    await test.step('Navigate to project dashboard', async () => {
      await navigateToProjectDashboard(page);
      await waitForPageStable(page);
    });

    await test.step('Check chart containers are visible', async () => {
      await page.waitForTimeout(1000);

      const chartContainers = page.locator('[id*="Chart"], .apexcharts-canvas');
      const chartCount = await chartContainers.count();
      expect(chartCount).toBeGreaterThanOrEqual(0);
    });

    await test.step('Verify charts have rendered content', async () => {
      await page.waitForTimeout(1500);
      const chartCanvases = page.locator('.apexcharts-canvas');
      const canvasCount = await chartCanvases.count();
      // Charts may or may not be present depending on data
      expect(canvasCount).toBeGreaterThanOrEqual(0);
    });
  });

  test('should show recent projects widget', async ({ page }) => {
    await test.step('Navigate to project dashboard', async () => {
      await navigateToProjectDashboard(page);
      await waitForPageStable(page);
    });

    await test.step('Verify recent projects section', async () => {
      const recentProjectsCard = page.locator('.card').filter({ hasText: /Recent Projects/i }).first();
      if (await recentProjectsCard.isVisible()) {
        await expect(recentProjectsCard).toBeVisible();
      }
    });

    await test.step('Verify recent projects table or empty state', async () => {
      const recentProjectsCard = page.locator('.card').filter({ hasText: /Recent Projects/i }).first();

      if (await recentProjectsCard.isVisible()) {
        const table = recentProjectsCard.locator('table');
        const hasTable = await table.isVisible().catch(() => false);

        if (hasTable) {
          await expect(table.locator('thead')).toBeVisible();
        }
      }
    });
  });

  test('should highlight overdue projects', async ({ page }) => {
    await test.step('Navigate to project dashboard', async () => {
      await navigateToProjectDashboard(page);
      await waitForPageStable(page);
    });

    await test.step('Check overdue indicators', async () => {
      const overdueCard = page.locator('.card').filter({ hasText: /Overdue/i }).first();
      if (await overdueCard.isVisible()) {
        await expect(overdueCard).toBeVisible();
      }
    });
  });

  test('should have quick action buttons', async ({ page }) => {
    await test.step('Navigate to project dashboard', async () => {
      await navigateToProjectDashboard(page);
      await waitForPageStable(page);
    });

    await test.step('Verify quick action links', async () => {
      const viewAllLinks = page.locator('a').filter({ hasText: /View All/i });
      const linkCount = await viewAllLinks.count();
      expect(linkCount).toBeGreaterThanOrEqual(0);
    });
  });

  test('should display project progress indicators', async ({ page }) => {
    await test.step('Navigate to project dashboard', async () => {
      await navigateToProjectDashboard(page);
      await waitForPageStable(page);
    });

    await test.step('Verify status badges in tables', async () => {
      const statusBadges = page.locator('.badge[class*="bg-label-"]');
      const badgeCount = await statusBadges.count();
      expect(badgeCount).toBeGreaterThanOrEqual(0);
    });
  });
});