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

/**
 * Document edit history E2E tests.
 * Relies on the 'Document creation' and 'Document editing' tests in documents.spec.ts
 * having run first (they create and edit "E2E Testbrief (überarbeitet)").
 * Assumes auth setup has run.
 */
test.describe('Document history panel', () => {
	test('history section appears after creating and editing a document', async ({ page }) => {
		// Find the document edited in the documents.spec.ts editing test
		await page.goto('/?q=E2E+Testbrief');
		await page.waitForSelector('[data-hydrated]');
		const docLink = page.getByRole('link', { name: /E2E Testbrief/ }).first();
		const href = await docLink.getAttribute('href');
		await page.goto(href!);

		// History section should be present (collapsed by default)
		const historyToggle = page.getByRole('button', { name: /Verlauf/i });
		await expect(historyToggle).toBeVisible();

		// Expand the history section
		await historyToggle.click();

		// Should show at least two version entries (created + edited)
		const versionItems = page.locator('[data-testid="history-version"]');
		await expect(versionItems).toHaveCount(2, { timeout: 5000 });

		await page.screenshot({ path: 'test-results/e2e/history-versions-list.png' });
	});

	test('diff view highlights changed field after title edit', async ({ page }) => {
		await page.goto('/?q=E2E+Testbrief');
		await page.waitForSelector('[data-hydrated]');
		const docLink = page.getByRole('link', { name: /E2E Testbrief/ }).first();
		const href = await docLink.getAttribute('href');
		await page.goto(href!);

		// Expand history
		const historyToggle = page.getByRole('button', { name: /Verlauf/i });
		await historyToggle.click();

		// Click the second version (the edit) to see its diff
		const versionItems = page.locator('[data-testid="history-version"]');
		await versionItems.nth(1).click();

		// The diff panel should show the "Titel" field as changed
		const diffPanel = page.locator('[data-testid="history-diff"]');
		await expect(diffPanel).toBeVisible();
		await expect(diffPanel.getByText(/Titel/i)).toBeVisible();

		await page.screenshot({ path: 'test-results/e2e/history-diff-title.png' });
	});

	test('compare mode lets user compare any two versions', async ({ page }) => {
		await page.goto('/?q=E2E+Testbrief');
		await page.waitForSelector('[data-hydrated]');
		const docLink = page.getByRole('link', { name: /E2E Testbrief/ }).first();
		const href = await docLink.getAttribute('href');
		await page.goto(href!);

		// Expand history
		const historyToggle = page.getByRole('button', { name: /Verlauf/i });
		await historyToggle.click();

		// Switch to compare mode
		const compareBtn = page.getByRole('button', { name: /Vergleichen/i });
		await expect(compareBtn).toBeVisible();
		await compareBtn.click();

		// Two version selects should appear
		const selectA = page.getByLabel(/Version A/i);
		const selectB = page.getByLabel(/Version B/i);
		await expect(selectA).toBeVisible();
		await expect(selectB).toBeVisible();

		// Apply the comparison
		await page
			.getByRole('button', { name: /Vergleichen/i })
			.last()
			.click();

		// Diff panel should be visible
		const diffPanel = page.locator('[data-testid="history-diff"]');
		await expect(diffPanel).toBeVisible();

		await page.screenshot({ path: 'test-results/e2e/history-compare-mode.png' });
	});
});