import { test, expect } from '@playwright/test';
import { renderAndWaitForContent, assertNotLoading, assertNoErrorAlert } from './helpers';

// ─── Charts (recharts) ──────────────────────────────────────────────────────

test.describe('Screenshot: Charts', () => {
  (['bar', 'line', 'area', 'pie'] as const).forEach((name, idx) => {
    test(`charts-${name}`, async ({ page }) => {
      const w = await renderAndWaitForContent(page, 'charts', idx);
      await assertNotLoading(w);
      await assertNoErrorAlert(w);
      await expect(w.locator('.recharts-wrapper')).toBeVisible({ timeout: 10_000 });
      await page.waitForTimeout(500); // animation settle
      await expect(page).toHaveScreenshot(`charts-${name}.png`, { maxDiffPixelRatio: 0.02 });
    });
  });
});

// ─── Mermaid ────────────────────────────────────────────────────────────────

test.describe('Screenshot: Mermaid', () => {
  (['flowchart', 'sequence', 'class', 'er'] as const).forEach((name, idx) => {
    test(`mermaid-${name}`, async ({ page }) => {
      const w = await renderAndWaitForContent(page, 'mermaid', idx);
      await assertNotLoading(w);
      await assertNoErrorAlert(w);
      await expect(w.locator('svg')).toBeVisible({ timeout: 15_000 });
      await page.waitForTimeout(500);
      await expect(page).toHaveScreenshot(`mermaid-${name}.png`, { maxDiffPixelRatio: 0.02 });
    });
  });
});

// ─── Flow (@xyflow/react) ───────────────────────────────────────────────────

test.describe('Screenshot: Flow', () => {
  (['pipeline', 'branching'] as const).forEach((name, idx) => {
    test(`flow-${name}`, async ({ page }) => {
      const w = await renderAndWaitForContent(page, 'flow', idx);
      await assertNotLoading(w);
      await assertNoErrorAlert(w);
      await expect(w.locator('.react-flow')).toBeVisible({ timeout: 10_000 });
      await page.waitForTimeout(500);
      await expect(page).toHaveScreenshot(`flow-${name}.png`, { maxDiffPixelRatio: 0.02 });
    });
  });
});

// ─── Math (KaTeX) ───────────────────────────────────────────────────────────

test.describe('Screenshot: Math', () => {
  (['display', 'inline', 'mixed'] as const).forEach((name, idx) => {
    test(`math-${name}`, async ({ page }) => {
      const w = await renderAndWaitForContent(page, 'math', idx);
      await assertNotLoading(w);
      await assertNoErrorAlert(w);
      await expect(w.locator('.katex').first()).toBeVisible({ timeout: 10_000 });
      await page.waitForTimeout(300);
      await expect(page).toHaveScreenshot(`math-${name}.png`, { maxDiffPixelRatio: 0.02 });
    });
  });
});

// ─── CSV ────────────────────────────────────────────────────────────────────

test.describe('Screenshot: CSV', () => {
  (['comma', 'tab'] as const).forEach((name, idx) => {
    test(`csv-${name}`, async ({ page }) => {
      const w = await renderAndWaitForContent(page, 'csv', idx);
      await assertNotLoading(w);
      await assertNoErrorAlert(w);
      await expect(w.locator('table, .MuiTable-root').first()).toBeVisible({ timeout: 10_000 });
      await page.waitForTimeout(300);
      await expect(page).toHaveScreenshot(`csv-${name}.png`, { maxDiffPixelRatio: 0.02 });
    });
  });
});

// ─── MDX ────────────────────────────────────────────────────────────────────

test.describe('Screenshot: MDX', () => {
  (['headings', 'code-blocks', 'tables'] as const).forEach((name, idx) => {
    test(`mdx-${name}`, async ({ page }) => {
      const w = await renderAndWaitForContent(page, 'mdx', idx);
      await assertNotLoading(w);
      await assertNoErrorAlert(w);
      await expect(w.locator('h1, h2, h3, pre, table').first()).toBeVisible({ timeout: 10_000 });
      await page.waitForTimeout(300);
      await expect(page).toHaveScreenshot(`mdx-${name}.png`, { maxDiffPixelRatio: 0.02 });
    });
  });
});

// ─── HTML ───────────────────────────────────────────────────────────────────

test.describe('Screenshot: HTML', () => {
  (['styled-div', 'table'] as const).forEach((name, idx) => {
    test(`html-${name}`, async ({ page }) => {
      const w = await renderAndWaitForContent(page, 'html', idx);
      await assertNotLoading(w);
      await assertNoErrorAlert(w);
      await expect(w.locator('h2, table').first()).toBeVisible({ timeout: 10_000 });
      await page.waitForTimeout(300);
      await expect(page).toHaveScreenshot(`html-${name}.png`, { maxDiffPixelRatio: 0.02 });
    });
  });
});
