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

async function waitForGraph(page: Page) {
  await page.waitForSelector('svg g.node', { timeout: 15000 });
}

function nodeByLabel(page: Page, label: string) {
  return page.locator('g.node').filter({ hasText: label });
}

async function openSubgraph(page: Page, nodeLabel: string) {
  await nodeByLabel(page, nodeLabel).click({ button: 'right' });
  await expect(page.locator('.ant-dropdown:visible')).toBeVisible({ timeout: 3000 });
  // Wait for the dropdown animation to fully settle before clicking
  await page.waitForTimeout(300);
  await page.locator('.ant-dropdown-menu-item').filter({ hasText: 'Subgraph' }).click();
  await waitForGraph(page);
}

const breadcrumbLinks = (page: Page) => page.locator('.ant-breadcrumb-link');

test.describe('Breadcrumb navigation', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/');
    await waitForGraph(page);
  });

  test('shows "Main" as the only breadcrumb in the initial state', async ({ page }) => {
    await expect(breadcrumbLinks(page)).toHaveCount(1);
    await expect(page.locator('.ant-breadcrumb')).toContainText('Main');
  });

  test('adds a breadcrumb segment when entering a subgraph', async ({ page }) => {
    await openSubgraph(page, 'Start');

    await expect(breadcrumbLinks(page)).toHaveCount(2);
    await expect(page.locator('.ant-breadcrumb')).toContainText('Main');
    await expect(page.locator('.ant-breadcrumb')).toContainText('Start');
  });

  test('breadcrumb grows for each additional level of nesting', async ({ page }) => {
    // Level 1: enter Start's subgraph
    await openSubgraph(page, 'Start');
    await expect(breadcrumbLinks(page)).toHaveCount(2);

    // Level 2: enter Start's subgraph again from within level 1
    await openSubgraph(page, 'Start');
    await expect(breadcrumbLinks(page)).toHaveCount(3);
  });

  test('clicking the root breadcrumb from two levels deep returns to main graph', async ({ page }) => {
    // Navigate 2 levels deep
    await openSubgraph(page, 'Start');
    await openSubgraph(page, 'Start');
    await expect(breadcrumbLinks(page)).toHaveCount(3);

    // Click "Main" (first item)
    await breadcrumbLinks(page).first().click();

    await expect(breadcrumbLinks(page)).toHaveCount(1, { timeout: 3000 });
    await expect(page.locator('.ant-breadcrumb')).toContainText('Main');
    await waitForGraph(page);
    await expect(nodeByLabel(page, 'Start')).toBeVisible();
    await expect(nodeByLabel(page, 'End')).toBeVisible();
  });

  test('clicking a middle breadcrumb navigates to that level and removes subsequent segments', async ({ page }) => {
    // Navigate to level 1 (Start's subgraph)
    await openSubgraph(page, 'Start');

    // Add a node at level 1 so we can recognise it when we return
    await nodeByLabel(page, 'End').click();
    await expect(page.locator('g.node')).toHaveCount(3, { timeout: 5000 });

    // Navigate to level 2
    await openSubgraph(page, 'Start');
    await expect(breadcrumbLinks(page)).toHaveCount(3);

    // Click the level-1 breadcrumb (second item, "Start")
    await breadcrumbLinks(page).nth(1).click();

    // Breadcrumb should be truncated to 2 items
    await expect(breadcrumbLinks(page)).toHaveCount(2, { timeout: 3000 });
    // The level-1 graph still has the extra node we added
    await waitForGraph(page);
    await expect(page.locator('g.node')).toHaveCount(3, { timeout: 5000 });
  });

  test('navigating forward after going back starts a fresh path from that level', async ({ page }) => {
    // Navigate to level 1
    await openSubgraph(page, 'Start');
    await expect(breadcrumbLinks(page)).toHaveCount(2);

    // Go back to main
    await breadcrumbLinks(page).first().click();
    await expect(breadcrumbLinks(page)).toHaveCount(1, { timeout: 3000 });

    // Navigate into End's subgraph (a different node than before)
    await openSubgraph(page, 'End');

    // Breadcrumb should be Main / End — no leftover "Start" segment
    await expect(breadcrumbLinks(page)).toHaveCount(2, { timeout: 3000 });
    await expect(page.locator('.ant-breadcrumb')).toContainText('End');
    await expect(page.locator('.ant-breadcrumb')).not.toContainText('Start');
  });  
});