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

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

  test('dashboard page loads with correct title', async ({ page }) => {
    await expect(page.locator('h1:has-text("Dashboard")')).toBeVisible();
    await expect(page.locator('text=Overview of your ISP operations')).toBeVisible();
  });

  test('KPI cards render after loading', async ({ page }) => {
    // Wait for skeletons to disappear
    await page.waitForSelector('.skeleton', { state: 'detached', timeout: 15000 }).catch(() => {});
    await expect(page.locator('text=Total Clients')).toBeVisible();
    await expect(page.locator('text=Active Subscriptions')).toBeVisible();
    await expect(page.locator('text=Overdue Invoices')).toBeVisible();
  });

  test('revenue card and chart only visible to admin', async ({ page }) => {
    // Admin login — revenue card should show
    await page.waitForSelector('.skeleton', { state: 'detached', timeout: 15000 }).catch(() => {});
    await expect(page.locator('text=Monthly Revenue')).toBeVisible();
    await expect(page.locator('text=Revenue Overview')).toBeVisible();
  });

  test('recent tickets section renders', async ({ page }) => {
    await expect(page.locator('text=Recent Tickets')).toBeVisible();
    await expect(page.locator('text=View all →')).toBeVisible();
  });

  test('refresh button works without crash', async ({ page }) => {
    await page.click('button:has-text("Refresh")');
    // Should not crash — page still has dashboard title
    await expect(page.locator('h1:has-text("Dashboard")')).toBeVisible();
  });

  test('New Client button navigates to clients', async ({ page }) => {
    await page.click('button:has-text("+ New Client")');
    await expect(page).toHaveURL(/\/clients/);
  });

  test('KPI card click navigates correctly', async ({ page }) => {
    await page.waitForSelector('.skeleton', { state: 'detached', timeout: 15000 }).catch(() => {});
    // Click Total Clients card
    const clientsCard = page.locator('text=Total Clients').first();
    await clientsCard.click();
    await expect(page).toHaveURL(/\/clients/);
  });
});