import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { test, expect } from '@playwright/test';
import { loginWithOtp } from './helpers/auth';
import {
  projectMockStore,
  registerProjectApiMocks,
  resetProjectMockStore,
} from './helpers/project-mocks';

/**
 * Phase 15 — Live UAT screenshot capture.
 *
 * Seeds 50+ work items, 10 epics, 5 sprints, 10 risks, 6 milestones, and 20
 * dependencies into the mock store, then walks every enterprise Agile surface
 * capturing screenshots into docs/uat-screenshots/.
 */

const __dirname = path.dirname(fileURLToPath(import.meta.url));
const SHOT_DIR = path.resolve(__dirname, '../../../../../docs/uat-screenshots');

const pid = projectMockStore.projectId;

async function shot(page: import('@playwright/test').Page, name: string) {
  await page.waitForTimeout(600);
  await page.screenshot({ path: path.join(SHOT_DIR, `${name}.png`), fullPage: true });
}

test.describe.configure({ mode: 'serial' });

test.describe('Enterprise Agile UAT (seeded, mocked API)', () => {
  test.beforeAll(() => {
    resetProjectMockStore();
    projectMockStore.projectName = 'UAT Enterprise Agile';
    projectMockStore.seedUatData();
  });

  test.beforeEach(async ({ page }) => {
    await registerProjectApiMocks(page);
    await loginWithOtp(page);
  });

  test('seed sanity — 50+ work items', () => {
    const total = projectMockStore.backlogItems.length + projectMockStore.sprintItems.length;
    expect(total).toBeGreaterThanOrEqual(50);
    expect(projectMockStore.epics.length).toBeGreaterThanOrEqual(10);
    expect(projectMockStore.sprints.length).toBeGreaterThanOrEqual(5);
    expect(projectMockStore.risks.length).toBeGreaterThanOrEqual(10);
    expect(projectMockStore.dependencies.length).toBeGreaterThanOrEqual(20);
  });

  test('overview command center', async ({ page }) => {
    await page.goto(`/projects/${pid}`);
    await page.waitForLoadState('networkidle');
    await shot(page, '01-overview');
  });

  test('executive dashboard', async ({ page }) => {
    await page.goto(`/projects/${pid}/executive`);
    await page.waitForLoadState('networkidle');
    await shot(page, '02-executive');
  });

  test('backlog with analytics', async ({ page }) => {
    await page.goto(`/projects/${pid}/backlog`);
    await page.waitForLoadState('networkidle');
    await shot(page, '03-backlog');
  });

  test('risk matrix, heatmap, distribution, register', async ({ page }) => {
    await page.goto(`/projects/${pid}/risks`);
    await page.waitForLoadState('networkidle');
    // Matrix is now the default (visualization-first).
    await shot(page, '05-risks-matrix');
    const heatTab = page.getByRole('button', { name: /heatmap/i });
    if (await heatTab.isVisible().catch(() => false)) {
      await heatTab.click();
      await shot(page, '06-risks-heatmap');
    }
    const distTab = page.getByRole('button', { name: /distribution/i });
    if (await distTab.isVisible().catch(() => false)) {
      await distTab.click();
      await shot(page, '06b-risks-distribution');
    }
    const registerTab = page.getByRole('button', { name: /register/i });
    if (await registerTab.isVisible().catch(() => false)) {
      await registerTab.click();
      await shot(page, '04-risks-register');
    }
  });

  test('dependencies + blocked chains', async ({ page }) => {
    await page.goto(`/projects/${pid}/dependencies`);
    await page.waitForLoadState('networkidle');
    await shot(page, '07-dependencies');
  });

  test('milestones list + timeline', async ({ page }) => {
    await page.goto(`/projects/${pid}/milestones`);
    await page.waitForLoadState('networkidle');
    await shot(page, '08-milestones-list');
    const timelineBtn = page.getByRole('button', { name: /^timeline$/i });
    if (await timelineBtn.isVisible().catch(() => false)) {
      await timelineBtn.click();
      await shot(page, '09-milestones-timeline');
    }
  });

  test('gantt', async ({ page }) => {
    await page.goto(`/projects/${pid}/gantt`);
    await page.waitForLoadState('networkidle');
    await shot(page, '10-gantt');
  });

  test('analytics center', async ({ page }) => {
    await page.goto(`/projects/${pid}/reports`);
    await page.waitForLoadState('networkidle');
    await shot(page, '11-analytics-center');
    // Expand the secondary "More analytics" list.
    const moreToggle = page.getByRole('button', { name: /more analytics/i });
    if (await moreToggle.isVisible().catch(() => false)) {
      await moreToggle.click();
      await shot(page, '11b-analytics-center-more');
    }
  });

  test('velocity report', async ({ page }) => {
    await page.goto(`/projects/${pid}/reports/velocity`);
    await page.waitForLoadState('networkidle');
    await shot(page, '12-report-velocity');
  });

  test('settings governance (tabbed)', async ({ page }) => {
    await page.goto(`/projects/${pid}/settings`);
    await page.waitForLoadState('networkidle');
    // Agile tab (default).
    await shot(page, '13-settings-agile');
    for (const [tab, name] of [
      ['Capacity', '13b-settings-capacity'],
      ['Workflow', '13c-settings-workflow'],
      ['Notifications', '13d-settings-notifications'],
      ['Archive', '13e-settings-archive'],
    ] as const) {
      const tabBtn = page.getByRole('tab', { name: new RegExp(`^${tab}$`, 'i') });
      if (await tabBtn.isVisible().catch(() => false)) {
        await tabBtn.click();
        await shot(page, name);
      }
    }
  });
});