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

test.describe('Dashboard Page', () => {
	test.beforeEach(async ({ page }) => {
		// Login first
		await page.goto('/login');
		await page.fill('input[type="email"]', 'superuser@headroom.test');
		await page.fill('input[type="password"]', 'password');
		await page.click('button[type="submit"]');
		
		// Wait for navigation to dashboard
		await page.waitForURL('/dashboard');
	});

	test('dashboard renders correctly', async ({ page }) => {
		// Check page title
		await expect(page).toHaveTitle(/Dashboard/);
		
		// Check PageHeader renders
		await expect(page.locator('h1', { hasText: 'Dashboard' })).toBeVisible();
		await expect(page.getByText('Overview of your resource allocation')).toBeVisible();
		
		// Check New Allocation button
		await expect(page.getByRole('button', { name: /New Allocation/i })).toBeVisible();
		
		// Check all 4 StatCards render
		// Check all 4 StatCards render (use specific selector to avoid matching sidebar/user menu)
		const mainContent = page.getByTestId('layout-content');
		await expect(mainContent.getByText('Active Projects')).toBeVisible();
		await expect(mainContent.getByText('Team Members')).toBeVisible();
		await expect(mainContent.getByText('Allocations (hrs)')).toBeVisible();
		await expect(mainContent.getByText('Avg Utilization')).toBeVisible();
		
		// Check stat values (use exact match to avoid matching '8' in '186' or '87%')
		await expect(page.getByText('14', { exact: true })).toBeVisible(); // Active Projects
		await expect(page.getByText('8', { exact: true })).toBeVisible(); // Team Members
		await expect(page.getByText('186', { exact: true })).toBeVisible(); // Allocations
		await expect(page.getByText('87%')).toBeVisible(); // Avg Utilization
		
		// Check Quick Actions section (scope to main content to avoid sidebar/user menu)
		await expect(mainContent.getByText('Quick Actions')).toBeVisible();
		await expect(mainContent.locator('a[href="/team-members"]')).toBeVisible();
		await expect(mainContent.locator('a[href="/projects"]')).toBeVisible();
		await expect(mainContent.locator('a[href="/allocations"]')).toBeVisible();
		await expect(mainContent.locator('a[href="/reports/forecast"]')).toBeVisible();
		
		// Check Allocation Preview section
		await expect(page.getByRole('heading', { name: 'Allocation Preview' })).toBeVisible();
		await expect(page.getByText(/Allocation matrix for/)).toBeVisible();
	});
});