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

/**
 * AccountingCore Dashboard Tests
 *
 * Tests the AccountingCore Dashboard functionality including:
 * - Dashboard page loads correctly with all elements
 * - Statistics cards display income, expenses, balance, and transaction count
 * - Charts render properly (Income vs Expense, Category breakdown)
 * - Recent transactions widget displays transaction data
 * - Period selector for filtering dashboard data
 */

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

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

    await test.step('Verify page loads with cards', async () => {
      const cards = page.locator('.card');
      const cardCount = await cards.count();
      expect(cardCount).toBeGreaterThan(0);
    });
  });

  test('should display income and expense statistics', async ({ page }) => {
    await test.step('Navigate to dashboard', async () => {
      await navigateToAccountingDashboard(page);
      await waitForPageStable(page);
    });

    await test.step('Verify Total Income card exists', async () => {
      const incomeCard = page.locator('.card').filter({ hasText: /Total Income/i }).first();
      await expect(incomeCard).toBeVisible();
    });

    await test.step('Verify Total Expenses card exists', async () => {
      const expenseCard = page.locator('.card').filter({ hasText: /Total Expenses/i }).first();
      await expect(expenseCard).toBeVisible();
    });

    await test.step('Verify Net Balance card exists', async () => {
      const balanceCard = page.locator('.card').filter({ hasText: /Net Balance/i }).first();
      await expect(balanceCard).toBeVisible();
    });

    await test.step('Verify Transactions count card exists', async () => {
      const transactionsCard = page.locator('.card').filter({ hasText: /Transactions/i }).first();
      await expect(transactionsCard).toBeVisible();
    });
  });

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

    await test.step('Wait for charts to initialize', async () => {
      await page.waitForTimeout(1500);
    });

    await test.step('Verify Income vs Expenses chart container', async () => {
      const incomeExpenseChartContainer = page.locator('#incomeExpenseChart');
      await expect(incomeExpenseChartContainer).toBeVisible();
    });

    await test.step('Verify Category chart container', async () => {
      const categoryChartContainer = page.locator('#categoryChart');
      await expect(categoryChartContainer).toBeVisible();
    });
  });

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

    await test.step('Verify Recent Transactions section exists', async () => {
      const recentTransactionsCard = page.locator('.card').filter({ hasText: /Recent Transactions/i }).first();
      await expect(recentTransactionsCard).toBeVisible();
    });
  });

  test('should display period selector', async ({ page }) => {
    await test.step('Navigate to dashboard', async () => {
      await navigateToAccountingDashboard(page);
      await waitForPageStable(page);
    });

    await test.step('Verify period dropdown button exists', async () => {
      const periodButton = page.locator('#chartPeriod');
      await expect(periodButton).toBeVisible();
    });

    await test.step('Click period dropdown and verify menu items', async () => {
      const periodButton = page.locator('#chartPeriod');
      await periodButton.click();
      await page.waitForTimeout(300);

      const dropdownMenu = page.locator('.dropdown-menu.show');
      await expect(dropdownMenu).toBeVisible();
    });
  });

  test('should handle dashboard with no data gracefully', async ({ page }) => {
    await test.step('Navigate to dashboard', async () => {
      await navigateToAccountingDashboard(page);
      await waitForPageStable(page);
    });

    await test.step('Verify dashboard renders', async () => {
      const cards = page.locator('.card');
      const cardCount = await cards.count();
      expect(cardCount).toBeGreaterThan(0);
    });
  });
});
