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

test.describe('Krona Business OS — E2E Verification & Visual Matrix', () => {
  test('loads Dashboard without console errors or horizontal overflow', async ({ page }) => {
    const consoleErrors: string[] = [];
    page.on('console', (msg) => {
      if (msg.type() === 'error') {
        consoleErrors.push(msg.text());
      }
    });

    await page.goto('/');
    await page.waitForLoadState('networkidle');

    // Verify brand header / title
    await expect(page.locator('text=Крона').first()).toBeVisible();

    // Check horizontal overflow (scrollWidth <= clientWidth)
    const isOverflowing = await page.evaluate(() => {
      return document.documentElement.scrollWidth > document.documentElement.clientWidth;
    });
    expect(isOverflowing).toBe(false);

    // Ensure no uncaught browser runtime errors
    const fatalErrors = consoleErrors.filter(
      (err) => !err.includes('favicon') && !err.includes('status of 404')
    );
    expect(fatalErrors).toHaveLength(0);
  });

  test('captures theme and viewport screenshot matrix', async ({ page }, testInfo) => {
    const themes = ['soft-light', 'light', 'dark'] as const;
    const projectName = testInfo.project.name; // desktop | tablet | mobile

    for (const theme of themes) {
      await page.goto('/');
      await page.waitForLoadState('networkidle');

      // Set data-theme attribute directly on documentElement
      await page.evaluate((t) => {
        document.documentElement.setAttribute('data-theme', t);
        localStorage.setItem('krona_theme_mode', t);
      }, theme);

      await page.waitForTimeout(300);

      // Save screenshot
      await page.screenshot({
        path: `e2e/screenshots/${projectName}_${theme}.png`,
        fullPage: false,
      });
    }
  });

  test('advances CRM deal stage and verifies kanban status update', async ({ page }) => {
    await page.goto('/crm');
    await page.waitForLoadState('networkidle');

    // Switch to Deals tab if not default
    const dealsTab = page.locator('button:has-text("Сделки")');
    if (await dealsTab.isVisible()) {
      await dealsTab.click();
    }

    // Verify Deal cards are rendered in Kanban
    const dealCards = page.locator('[data-testid^="deal-card-"], .group\\/deal, [draggable="true"]');
    await expect(dealCards.first()).toBeVisible({ timeout: 5000 });

    // Verify kanban stages exist
    await expect(page.locator('text=Квалификация').first()).toBeVisible();
    await expect(page.locator('text=Успешно').first()).toBeVisible();
  });
});