/**
 * Staff Dashboard Overview Page Tests
 */

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

test.describe('Staff Dashboard Overview', () => {
  test.beforeEach(async ({ page }) => {
    // Login as staff
    await page.goto('/staff/login');
    await page.fill('input[type="text"]', 'asim');
    await page.fill('input[type="password"]', 'AsimMawidi2025!');
    await page.click('button[type="submit"]');
    await page.waitForURL('/staff/dashboard');
  });

  test('should display overview page with all metrics', async ({ page }) => {
    // Check page title
    await expect(page.locator('h1')).toContainText('Dashboard Overview');
    await expect(page.locator('text=Welcome back, Asim')).toBeVisible();

    // Check metric cards are displayed
    await expect(page.locator('text=Site Visitors')).toBeVisible();
    await expect(page.locator('text=Demo Bookings')).toBeVisible();
    await expect(page.locator('text=Contact Messages')).toBeVisible();
    await expect(page.locator('text=New Signups')).toBeVisible();

    // Super admin should see revenue
    await expect(page.locator('text=Revenue Today')).toBeVisible();
  });

  test('should display percentage change indicators', async ({ page }) => {
    // Wait for data to load
    await page.waitForSelector('text=Site Visitors', { timeout: 10000 });

    // Check for percentage indicators (up or down arrows)
    const percentChanges = page.locator('svg[class*="lucide"]').filter({
      hasText: /(ArrowUp|ArrowDown)/,
    });

    // Should have at least one percentage indicator
    expect(await percentChanges.count()).toBeGreaterThanOrEqual(0);
  });

  test('should display recent activity sections', async ({ page }) => {
    // Check recent sections exist
    await expect(page.locator('text=Recent Demos')).toBeVisible();
    await expect(page.locator('text=Recent Contacts')).toBeVisible();
    await expect(page.locator('text=Recent Signups')).toBeVisible();

    // Check "View all" links
    const viewAllLinks = page.locator('text=View all');
    expect(await viewAllLinks.count()).toBeGreaterThanOrEqual(3);
  });

  test('should have auto-refresh toggle', async ({ page }) => {
    // Check auto-refresh indicator
    await expect(page.locator('text=/Auto-refresh|refreshing/i')).toBeVisible();

    // Check pause/resume button
    const toggleButton = page.locator('button:has-text(/Pause|Resume/)');
    await expect(toggleButton).toBeVisible();

    // Click to toggle
    const initialText = await toggleButton.textContent();
    await toggleButton.click();
    await page.waitForTimeout(500);
    const newText = await toggleButton.textContent();

    // Text should change
    expect(initialText).not.toBe(newText);
  });

  test('clicking metric cards should navigate to detail pages', async ({ page }) => {
    await page.waitForSelector('text=Demo Bookings', { timeout: 10000 });

    // Click on Demo Bookings card
    const demoCard = page.locator('text=Demo Bookings').locator('..');
    await demoCard.click();

    // Should navigate to demos page
    await expect(page).toHaveURL('/staff/dashboard/demos', { timeout: 5000 });
    await expect(page.locator('h1')).toContainText('Demo Bookings');
  });

  test('should load data from API', async ({ page }) => {
    // Wait for API call to complete
    const response = await page.waitForResponse(
      (response) => response.url().includes('/api/staff/dashboard/overview'),
      { timeout: 10000 }
    );

    // Check response is successful
    expect(response.status()).toBe(200);

    // Check response has expected structure
    const data = await response.json();
    expect(data).toHaveProperty('today');
    expect(data).toHaveProperty('comparison');
    expect(data).toHaveProperty('recentActivity');
  });

  test('navigation sidebar should be visible', async ({ page }) => {
    // Check sidebar navigation items
    const navItems = [
      'Overview',
      'Demo Bookings',
      'Contacts',
      'Users',
      'Analytics',
      'Staff Management',
    ];

    for (const item of navItems) {
      await expect(page.locator(`nav >> text=${item}`)).toBeVisible();
    }
  });

  test('should display user role badge', async ({ page }) => {
    // Check role badge exists
    await expect(page.locator('text=SUPER ADMIN')).toBeVisible();
  });

  test('header should have notifications and profile', async ({ page }) => {
    // Check notifications bell
    const bellIcon = page.locator('button[aria-label="Notifications"]');
    await expect(bellIcon).toBeVisible();

    // Check profile section
    await expect(page.locator('text=Asim')).toBeVisible();
    await expect(page.locator('text=SUPER_ADMIN')).toBeVisible();
  });
});
