import { test, expect } from '@playwright/test';
import { login, navigateTo, PORT_SLUG } from './helpers';

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

  // Test 1: Dashboard is the landing page after login
  test('dashboard is the landing page after login', async ({ page }) => {
    const url = page.url();
    expect(url).toContain(`/${PORT_SLUG}`);
    // Should see the dashboard shell, not a "Coming in Layer" stub
    await expect(page.locator('[data-testid="dashboard-shell"], .dashboard-shell, h1').first()).toBeVisible({
      timeout: 10_000,
    });
    // Should NOT see the old placeholder text
    await expect(page.getByText('Coming in Layer')).not.toBeVisible({ timeout: 3_000 }).catch(() => {});
  });

  // Test 2: All 4 KPI cards render
  test('all 4 KPI cards render without errors', async ({ page }) => {
    await navigateTo(page, '/');
    await page.waitForTimeout(3_000);

    // Look for KPI-related text/elements — the cards should contain numbers or labels
    const cards = page.locator('[class*="card"], [data-testid*="kpi"]');
    const cardCount = await cards.count();
    expect(cardCount).toBeGreaterThanOrEqual(4);

    // Verify no "Widget unavailable" error messages visible
    const errorMessages = page.getByText('Widget unavailable');
    const errorCount = await errorMessages.count();
    expect(errorCount).toBe(0);
  });

  // Test 3: Pipeline chart shows bars for stages
  test('pipeline chart renders with stage bars', async ({ page }) => {
    await navigateTo(page, '/');
    await page.waitForTimeout(3_000);

    // Recharts renders SVG bars — look for the chart container and SVG elements
    const chartSection = page.getByText('Pipeline Overview').first();
    await expect(chartSection).toBeVisible({ timeout: 10_000 });

    // Should have an SVG with rect elements (bars) or the recharts container
    const svg = page.locator('.recharts-wrapper svg, .recharts-responsive-container svg').first();
    await expect(svg).toBeVisible({ timeout: 5_000 });
  });

  // Test 4: Activity feed shows recent entries
  test('activity feed shows recent entries', async ({ page }) => {
    await navigateTo(page, '/');
    await page.waitForTimeout(3_000);

    const activitySection = page.getByText('Recent Activity').first();
    await expect(activitySection).toBeVisible({ timeout: 10_000 });

    // Activity feed should have at least one entry or an empty state
    const feedItems = page.locator('[class*="activity"] a, [class*="activity"] [role="link"]');
    const emptyState = page.getByText(/no recent activity/i);

    const hasItems = await feedItems.count() > 0;
    const hasEmpty = await emptyState.isVisible({ timeout: 2_000 }).catch(() => false);
    expect(hasItems || hasEmpty).toBeTruthy();
  });

  // Test 5: Click activity feed entry navigates to entity
  test('clicking activity feed entry navigates to entity', async ({ page }) => {
    await navigateTo(page, '/');
    await page.waitForTimeout(3_000);

    // Find a clickable link in the activity feed
    const feedLink = page.locator('[class*="activity"] a').first();
    if (await feedLink.isVisible({ timeout: 5_000 }).catch(() => false)) {
      const href = await feedLink.getAttribute('href');
      await feedLink.click();
      await page.waitForTimeout(2_000);

      // Should have navigated away from the dashboard root
      const currentUrl = page.url();
      expect(currentUrl).toContain(`/${PORT_SLUG}/`);
    }
  });
});