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

/**
 * Curator timeline event editor (#781) — intentionally thin. The component +
 * server specs carry the real regression coverage (they run in CI's "Unit &
 * Component Tests" job); ci.yml does NOT invoke test:e2e today, so this file
 * runs only locally/manually against the full Docker Compose stack.
 *
 * Three checks: one critical create journey (→ HTTP 200 on /zeitstrahl; the full
 * "sees the event card" assertion depends on #7), one security counterpart
 * (logged-out → 403), and one 320px no-overflow guarantee for the 60+ author
 * audience.
 */

const stamp = () => new Date().toISOString().replace(/[^0-9]/g, '');

test.describe('Curator creates a timeline event', () => {
	test('fills the create form with precision RANGE and lands on /zeitstrahl (HTTP 200)', async ({
		page
	}) => {
		await page.goto('/zeitstrahl/events/new');

		await page.getByLabel(/Titel/i).fill(`E2E Ereignis ${stamp()}`);
		await page.getByRole('radio', { name: /Historisch/i }).click();

		// Date + RANGE end date via the shared German dd.mm.yyyy inputs.
		await page.locator('#eventDate').fill('01.04.1925');
		await page.locator('#eventDatePrecision').selectOption('RANGE');
		await expect(page.getByLabel('Enddatum')).toBeVisible();
		await page.locator('#eventDateEnd').fill('01.05.1925');

		// Submitting redirects to the resolved nav target (/zeitstrahl) — assert the
		// route responds 200, not a DOM card (card rendering is #7's concern).
		await Promise.all([
			page.waitForURL(/\/zeitstrahl$/),
			page.getByRole('button', { name: 'Speichern' }).click()
		]);
		const response = await page.goto('/zeitstrahl');
		expect(response?.status()).toBe(200);
	});
});

test.describe('Logged-out user is blocked from the curator route', () => {
	test.use({ storageState: { cookies: [], origins: [] } });

	test('navigating to /zeitstrahl/events/new is blocked with 403', async ({ page }) => {
		await page.goto('/zeitstrahl/events/new');
		// The load guard throws 403 before any form renders.
		await expect(page.getByLabel(/Titel/i)).not.toBeVisible({ timeout: 5000 });
		await expect(page.getByText(/403|Zugriff verweigert|Forbidden/i)).toBeVisible({
			timeout: 5000
		});
	});
});

test.describe('Responsive — 60+ author audience', () => {
	test('no horizontal overflow on the create form at 320px', async ({ page }) => {
		await page.setViewportSize({ width: 320, height: 900 });
		await page.goto('/zeitstrahl/events/new');
		await expect(page.getByLabel(/Titel/i)).toBeVisible();

		const scrollWidth = await page.evaluate(() => document.body.scrollWidth);
		expect(scrollWidth).toBe(320);
	});
});