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.
 */

async function openHistoryDoc(page: import('@playwright/test').Page) {
	await page.goto('/?q=E2E+Testbrief');
	await page.waitForSelector('[data-hydrated]');
	const href = await page
		.getByRole('link', { name: /E2E Testbrief/ })
		.first()
		.getAttribute('href');
	await page.goto(href!);
	await page.waitForSelector('[data-hydrated]');
}

test.describe('Document history panel', () => {
	test('history section appears after creating and editing a document', async ({ page }) => {
		await openHistoryDoc(page);

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

		// Wait for versions to load (API call happens after panel opens)
		const versionItems = page.locator('[data-testid="history-version"]');
		await expect(versionItems).toHaveCount(2, { timeout: 10000 });

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

	test('diff view highlights changed field after title edit', async ({ page }) => {
		await openHistoryDoc(page);

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

		// Wait for versions to load, then click the second one (the edit)
		const versionItems = page.locator('[data-testid="history-version"]');
		await expect(versionItems.nth(1)).toBeVisible({ timeout: 10000 });
		await versionItems.nth(1).click();

		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 openHistoryDoc(page);

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

		// Wait for versions to load before the compare button appears
		await expect(page.locator('[data-testid="history-version"]').first()).toBeVisible({
			timeout: 10000
		});

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

		const selectA = page.getByLabel(/Version A/i);
		const selectB = page.getByLabel(/Version B/i);
		await expect(selectA).toBeVisible();
		await expect(selectB).toBeVisible();

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

		const diffPanel = page.locator('[data-testid="history-diff"]');
		await expect(diffPanel).toBeVisible();

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