import { test, expect } from '@playwright/test';
import { TEST_ORG_SLUG, navigateTo, waitForHydration } from './helpers';

// Unique suffix for this test run - keeps data isolated
const RUN = Date.now();
const EVENT_NAME = `PW Test Event ${RUN}`;
const EVENT_DESC = `Playwright test event created at ${RUN}`;
const EVENT_VENUE = 'PW Test Venue';

// Shared state across serial tests - set by creation test, used by all others
let eventSlug = '';

/** Navigate to the test event's overview page */
async function gotoEvent(page: import('@playwright/test').Page) {
	await navigateTo(page, `/${TEST_ORG_SLUG}/events/${eventSlug}`);
}

/** Navigate to the test event via a specific sub-path */
async function gotoEventPath(page: import('@playwright/test').Page, subPath: string) {
	await navigateTo(page, `/${TEST_ORG_SLUG}/events/${eventSlug}/${subPath}`);
}

// ─── Event List Page ─────────────────────────────────────────────────────────

test.describe('Events List Page', () => {
	test.beforeEach(async ({ page }) => {
		await navigateTo(page, `/${TEST_ORG_SLUG}/events`);
	});

	test('should load events page with status tabs and New Event button', async ({ page }) => {
		// Status filter tabs
		await expect(page.getByRole('button', { name: /All/i })).toBeVisible();
		await expect(page.getByRole('button', { name: /Planning/i })).toBeVisible();
		await expect(page.getByRole('button', { name: /Active/i })).toBeVisible();
		await expect(page.getByRole('button', { name: /Completed/i })).toBeVisible();
		await expect(page.getByRole('button', { name: /Archived/i })).toBeVisible();
		// New Event button
		await expect(page.getByRole('button', { name: /New Event/i })).toBeVisible();
	});

	test('should open Create Event modal with all form fields', async ({ page }) => {
		await page.getByRole('button', { name: /New Event/i }).click();
		const modal = page.locator('[role="dialog"]');
		await expect(modal).toBeVisible({ timeout: 3000 });
		await expect(modal.getByRole('heading', { name: /Create Event/i })).toBeVisible();
		// Form fields
		await expect(modal.locator('#event-name')).toBeVisible();
		await expect(modal.locator('#event-desc')).toBeVisible();
		await expect(modal.locator('#event-start')).toBeVisible();
		await expect(modal.locator('#event-end')).toBeVisible();
		await expect(modal.locator('#event-venue')).toBeVisible();
		// Color swatches
		const colorSwatches = modal.locator('button.rounded-full');
		const count = await colorSwatches.count();
		expect(count).toBeGreaterThanOrEqual(8);
		// Action buttons
		await expect(modal.getByRole('button', { name: /Cancel/i })).toBeVisible();
		await expect(modal.locator('button[type="submit"]')).toBeVisible();
	});

	test('should close Create Event modal on Cancel', async ({ page }) => {
		await page.getByRole('button', { name: /New Event/i }).click();
		const modal = page.locator('[role="dialog"]');
		await expect(modal).toBeVisible({ timeout: 3000 });
		await modal.getByRole('button', { name: /Cancel/i }).click();
		await expect(modal).not.toBeVisible({ timeout: 3000 });
	});

	test('should close Create Event modal by clicking backdrop', async ({ page }) => {
		await page.getByRole('button', { name: /New Event/i }).click();
		const modal = page.locator('[role="dialog"]');
		await expect(modal).toBeVisible({ timeout: 3000 });
		// Click the backdrop (the outer dialog div itself, not the inner card)
		await modal.click({ position: { x: 10, y: 10 } });
		await expect(modal).not.toBeVisible({ timeout: 5000 });
	});

	test('should disable Create button when name is empty', async ({ page }) => {
		await page.getByRole('button', { name: /New Event/i }).click();
		const modal = page.locator('[role="dialog"]');
		await expect(modal).toBeVisible({ timeout: 3000 });
		const submitBtn = modal.locator('button[type="submit"]');
		await expect(submitBtn).toBeDisabled();
	});

	test('should switch between status filter tabs', async ({ page }) => {
		// Click Planning tab
		await page.getByRole('button', { name: /Planning/i }).click();
		await page.waitForURL(/status=planning/, { timeout: 5000 });
		// Click Active tab
		await page.getByRole('button', { name: /Active/i }).click();
		await page.waitForURL(/status=active/, { timeout: 5000 });
		// Click All tab - should remove status param
		await page.getByRole('button', { name: /All/i }).first().click();
		await page.waitForURL((url) => !url.searchParams.has('status'), { timeout: 5000 });
	});
});

// ─── Event Creation + Full Event Flow (serial) ──────────────────────────────
// All tests below run in order. The first test creates the event and captures
// its slug; every subsequent test navigates directly via that slug.

test.describe.serial('Event Lifecycle', () => {
	let deptId = '';
	const DEPT_NAME = `PW Dept ${RUN}`;

	// ════════════════════════════════════════════════════════════════════
	// 1. EVENT CREATION
	// ════════════════════════════════════════════════════════════════════

	test('should create an event with all fields and navigate to it', async ({ page }) => {
		test.setTimeout(60000);
		await navigateTo(page, `/${TEST_ORG_SLUG}/events`);

		await page.getByRole('button', { name: /New Event/i }).click();
		const modal = page.locator('[role="dialog"]');
		await expect(modal).toBeVisible({ timeout: 3000 });

		await modal.locator('#event-name').fill(EVENT_NAME);
		await modal.locator('#event-desc').fill(EVENT_DESC);
		await modal.locator('#event-venue').fill(EVENT_VENUE);
		const tomorrow = new Date();
		tomorrow.setDate(tomorrow.getDate() + 1);
		const dayAfter = new Date();
		dayAfter.setDate(dayAfter.getDate() + 2);
		const fmtDate = (d: Date) => d.toISOString().split('T')[0];
		await modal.locator('#event-start').fill(fmtDate(tomorrow));
		await modal.locator('#event-end').fill(fmtDate(dayAfter));
		await modal.locator('button.rounded-full').nth(1).click();

		const submitBtn = modal.locator('button[type="submit"]');
		await expect(submitBtn).toBeEnabled({ timeout: 3000 });
		await submitBtn.click();

		await page.waitForURL((url) => {
			const path = url.pathname;
			return path.includes(`/${TEST_ORG_SLUG}/events/`) && !path.endsWith('/events') && !path.endsWith('/events/');
		}, { timeout: 15000 });
		await waitForHydration(page);

		const segments = new URL(page.url()).pathname.split('/');
		eventSlug = segments[segments.indexOf('events') + 1];
		expect(eventSlug).toBeTruthy();

		await expect(page.locator('header').getByRole('heading', { name: EVENT_NAME })).toBeVisible({ timeout: 10000 });
	});

	// ════════════════════════════════════════════════════════════════════
	// 2. EVENT OVERVIEW - read & verify
	// ════════════════════════════════════════════════════════════════════

	test('should display event header with name, status, date, and venue', async ({ page }) => {
		await gotoEvent(page);
		await expect(page.locator('header').getByRole('heading', { name: EVENT_NAME })).toBeVisible();
		await expect(page.getByText('planning').first()).toBeVisible();
		await expect(page.getByText(EVENT_VENUE).first()).toBeVisible();
	});

	test('should display Event Details section with Team and Departments labels', async ({ page }) => {
		await gotoEvent(page);
		await expect(page.getByText('Event Details')).toBeVisible();
		await expect(page.getByText('Start Date')).toBeVisible();
		await expect(page.getByText('End Date')).toBeVisible();
		const detailsCard = page.locator('.bg-dark\\/30').filter({ hasText: 'Event Details' }).first();
		await expect(detailsCard.getByText('Team', { exact: true })).toBeVisible();
		await expect(detailsCard.getByText('Departments', { exact: true })).toBeVisible();
	});

	test('should show sidebar with Overview, Finances, and Team tabs', async ({ page }) => {
		await gotoEvent(page);
		const sidebar = page.locator('aside');
		await expect(sidebar.getByText('Overview')).toBeVisible();
		await expect(sidebar.getByText('Finances')).toBeVisible();
		await expect(sidebar.getByRole('link', { name: /Team/i })).toBeVisible();
	});

	test('should show edit and delete buttons for editors', async ({ page }) => {
		await gotoEvent(page);
		await expect(page.locator('button[title="Edit"]')).toBeVisible();
		await expect(page.locator('button[title="Delete"]')).toBeVisible();
	});

	// ════════════════════════════════════════════════════════════════════
	// 3. EVENT EDITING - change status, verify persistence
	// ════════════════════════════════════════════════════════════════════

	test('should enter edit mode and see all editable fields', async ({ page }) => {
		await gotoEvent(page);
		await page.locator('button[title="Edit"]').click();
		await expect(page.getByRole('button', { name: /Cancel/i })).toBeVisible({ timeout: 3000 });
		await expect(page.getByRole('button', { name: /Save/i })).toBeVisible();
		// Status dropdown
		await expect(page.locator('select')).toBeVisible();
		// Editable name input
		await expect(page.locator('input[type="text"]').first()).toBeVisible();
	});

	test('should change event status to active and save', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEvent(page);
		await page.locator('button[title="Edit"]').click();
		await expect(page.locator('select')).toBeVisible({ timeout: 3000 });
		await page.locator('select').selectOption('active');
		await page.getByRole('button', { name: /Save/i }).click();
		// After save, should exit edit mode and show updated status
		await expect(page.locator('button[title="Edit"]')).toBeVisible({ timeout: 5000 });
		await expect(page.getByText('active').first()).toBeVisible({ timeout: 5000 });
	});

	test('should persist status change after page reload', async ({ page }) => {
		await gotoEvent(page);
		await expect(page.getByText('active').first()).toBeVisible({ timeout: 5000 });
	});

	test('should change status back to planning', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEvent(page);
		await page.locator('button[title="Edit"]').click();
		await expect(page.locator('select')).toBeVisible({ timeout: 3000 });
		await page.locator('select').selectOption('planning');
		await page.getByRole('button', { name: /Save/i }).click();
		await expect(page.locator('button[title="Edit"]')).toBeVisible({ timeout: 5000 });
		await expect(page.getByText('planning').first()).toBeVisible({ timeout: 5000 });
	});

	test('should cancel edit mode without saving changes', async ({ page }) => {
		await gotoEvent(page);
		await page.locator('button[title="Edit"]').click();
		await page.locator('select').selectOption('archived');
		await page.getByRole('button', { name: /Cancel/i }).click();
		// Should still show planning, not archived
		await expect(page.getByText('planning').first()).toBeVisible();
		await expect(page.locator('header').getByRole('heading', { name: EVENT_NAME })).toBeVisible();
	});

	// ════════════════════════════════════════════════════════════════════
	// 4. SIDEBAR NAVIGATION
	// ════════════════════════════════════════════════════════════════════

	test('should navigate to Finances tab via sidebar', async ({ page }) => {
		await gotoEvent(page);
		await page.locator('aside').getByText('Finances').click();
		await page.waitForURL(/\/finances/, { timeout: 10000 });
		await waitForHydration(page);
		await expect(page.getByRole('heading', { name: 'Finances' })).toBeVisible({ timeout: 5000 });
	});

	test('should navigate to Team tab via sidebar', async ({ page }) => {
		await gotoEvent(page);
		await page.locator('aside').getByRole('link', { name: /Team/i }).click();
		await page.waitForURL(/\/team/, { timeout: 10000 });
		await waitForHydration(page);
	});

	test('should navigate back to all events via back link', async ({ page }) => {
		await gotoEvent(page);
		await page.locator('aside').getByText(/All Events/i).click();
		await page.waitForURL(new RegExp(`/${TEST_ORG_SLUG}/events$`), { timeout: 10000 });
	});

	// ════════════════════════════════════════════════════════════════════
	// 5. FINANCES PAGE - empty state
	// ════════════════════════════════════════════════════════════════════

	test('should load Finances page with summary cards and empty state', async ({ page }) => {
		await gotoEventPath(page, 'finances');
		await expect(page.getByRole('heading', { name: 'Event Finances' })).toBeVisible({ timeout: 10000 });
		await expect(page.getByText('Total Planned')).toBeVisible();
		await expect(page.getByText('Total Actual Costs')).toBeVisible();
		await expect(page.getByText('Modified Budget')).toBeVisible();
		await expect(page.getByText('Budget Remainder')).toBeVisible();
		await expect(page.getByText('No departments yet')).toBeVisible();
	});

	test('should show view mode and type filter buttons on Finances', async ({ page }) => {
		await gotoEventPath(page, 'finances');
		await expect(page.getByRole('heading', { name: 'Event Finances' })).toBeVisible({ timeout: 10000 });
		await expect(page.getByRole('button', { name: 'Overview' })).toBeVisible();
		await expect(page.getByRole('button', { name: 'Details' })).toBeVisible();
		await expect(page.getByRole('button', { name: 'Sponsors' })).toBeVisible();
	});

	// ════════════════════════════════════════════════════════════════════
	// 6. TEAM PAGE - department + role + member CRUD
	// ════════════════════════════════════════════════════════════════════

	test('should load team page with action buttons', async ({ page }) => {
		await gotoEventPath(page, 'team');
		await expect(page.getByRole('button', { name: /Add Department/i })).toBeVisible({ timeout: 5000 });
		await expect(page.getByRole('button', { name: /Add Role/i })).toBeVisible({ timeout: 5000 });
		await expect(page.getByRole('button', { name: /Add Member/i })).toBeVisible({ timeout: 5000 });
	});

	test('should create a department', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, 'team');
		await page.getByRole('button', { name: /Add Department/i }).click();
		const modal = page.locator('[role="dialog"]');
		await expect(modal).toBeVisible({ timeout: 3000 });
		await modal.locator('#dept-name').fill(DEPT_NAME);
		await modal.getByRole('button', { name: /Save/i }).click();
		await expect(modal).not.toBeVisible({ timeout: 10000 });
		await expect(page.getByText(DEPT_NAME).first()).toBeVisible({ timeout: 5000 });
	});

	test('should show department in sidebar and capture its ID', async ({ page }) => {
		await gotoEventPath(page, 'team');
		const sidebar = page.locator('aside');
		await expect(sidebar.getByText(DEPT_NAME).first()).toBeVisible({ timeout: 5000 });
		await sidebar.getByRole('link', { name: new RegExp(DEPT_NAME) }).click();
		await page.waitForURL(/\/dept\//, { timeout: 10000 });
		const match = page.url().match(/\/dept\/([^/]+)/);
		if (match) deptId = match[1];
		expect(deptId).toBeTruthy();
	});

	test('should add a member to the event', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, 'team');
		await page.getByRole('button', { name: /Add Member/i }).click();
		const modal = page.locator('[role="dialog"]');
		await expect(modal).toBeVisible({ timeout: 3000 });

		// Select the first available org member
		const memberSelect = modal.locator('#add-member-select');
		await expect(memberSelect).toBeVisible();
		const options = memberSelect.locator('option:not([disabled])');
		const optCount = await options.count();
		if (optCount > 0) {
			// Pick the first non-disabled option
			const firstVal = await options.first().getAttribute('value');
			if (firstVal) {
				await memberSelect.selectOption(firstVal);
			}
		}

		// Assign to our department via chip toggle
		const deptChip = modal.getByText(DEPT_NAME).first();
		if (await deptChip.isVisible()) {
			await deptChip.click();
		}

		// Submit
		await modal.getByRole('button', { name: /Add Member/i }).click();
		await expect(modal).not.toBeVisible({ timeout: 10000 });

		// Member count should have increased - at least 1 member row visible
		await expect(page.locator('.group').first()).toBeVisible({ timeout: 5000 });
	});

	test('should show the added member in the team list', async ({ page }) => {
		await gotoEventPath(page, 'team');
		// At least one member avatar/row should be visible
		const memberRows = page.locator('[class*="group"]').filter({ has: page.locator('.rounded-full') });
		const count = await memberRows.count();
		expect(count).toBeGreaterThan(0);
	});

	// ════════════════════════════════════════════════════════════════════
	// 7. DEPARTMENT DASHBOARD - module management
	// ════════════════════════════════════════════════════════════════════

	test('should show layout picker and Add Module button', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		const layoutPicker = page.locator('.bg-dark\\/50.rounded-lg');
		await expect(layoutPicker.first()).toBeVisible({ timeout: 5000 });
		await expect(page.getByRole('button', { name: /Add Module/i })).toBeVisible();
	});

	test('should add a budget module', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		const addModuleBtn = page.getByRole('button', { name: /Add Module/i });
		await addModuleBtn.scrollIntoViewIfNeeded();
		await addModuleBtn.click();
		const modal = page.locator('[role="dialog"]');
		await expect(modal).toBeVisible({ timeout: 5000 });
		await modal.getByText('Budget').first().click();
		await expect(modal).not.toBeVisible({ timeout: 5000 });
		await expect(page.getByText('Income').first()).toBeVisible({ timeout: 5000 });
	});

	test('should add a notes module', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		const addModuleBtn = page.getByRole('button', { name: /Add Module/i });
		await addModuleBtn.scrollIntoViewIfNeeded();
		await addModuleBtn.click();
		const modal = page.locator('[role="dialog"]');
		await expect(modal).toBeVisible({ timeout: 5000 });
		await modal.getByText('Notes').first().click();
		await expect(modal).not.toBeVisible({ timeout: 5000 });
		await expect(page.getByText('Notes').first()).toBeVisible({ timeout: 5000 });
	});

	test('should add a schedule module', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		const addModuleBtn = page.getByRole('button', { name: /Add Module/i });
		await addModuleBtn.scrollIntoViewIfNeeded();
		await addModuleBtn.click();
		const modal = page.locator('[role="dialog"]');
		await expect(modal).toBeVisible({ timeout: 5000 });
		await modal.getByText('Schedule').first().click();
		await expect(modal).not.toBeVisible({ timeout: 5000 });
		await expect(page.getByText('Schedule').first()).toBeVisible({ timeout: 5000 });
	});

	// ════════════════════════════════════════════════════════════════════
	// 8. LAYOUT SWITCHING
	// ════════════════════════════════════════════════════════════════════

	test('should switch between all 4 layout presets', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		const layoutPicker = page.locator('.bg-dark\\/50.rounded-lg').first();
		const layoutButtons = layoutPicker.locator('button');
		const count = await layoutButtons.count();
		expect(count).toBe(4);
		for (let i = 0; i < count; i++) {
			await layoutButtons.nth(i).click();
			await expect(layoutButtons.nth(i)).toHaveClass(/bg-primary/, { timeout: 3000 });
		}
	});

	test('should expand and collapse a module', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		const expandBtn = page.locator('button[title="Expand"]').first();
		await expect(expandBtn).toBeVisible({ timeout: 5000 });
		await expandBtn.click();
		const collapseBtn = page.locator('button[title="Collapse"]');
		await expect(collapseBtn).toBeVisible({ timeout: 3000 });
		// Layout picker should be hidden when expanded
		await expect(page.locator('.bg-dark\\/50.rounded-lg').first()).not.toBeVisible();
		await collapseBtn.click();
		await expect(page.locator('button[title="Expand"]').first()).toBeVisible({ timeout: 3000 });
	});

	// ════════════════════════════════════════════════════════════════════
	// 9. CHECKLIST WIDGET - full CRUD
	// ════════════════════════════════════════════════════════════════════

	test('should show default General checklist', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		await expect(page.getByText('General').first()).toBeVisible({ timeout: 5000 });
	});

	test('should add a checklist item and see it appear', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		const addInput = page.locator('input[placeholder="Add item..."]').first();
		await addInput.scrollIntoViewIfNeeded();
		await expect(addInput).toBeVisible({ timeout: 5000 });
		await addInput.fill(`PW Task A ${RUN}`);
		await addInput.press('Enter');
		await expect(page.getByText(`PW Task A ${RUN}`).first()).toBeVisible({ timeout: 5000 });
	});

	test('should add a second checklist item', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		const addInput = page.locator('input[placeholder="Add item..."]').first();
		await addInput.scrollIntoViewIfNeeded();
		await expect(addInput).toBeVisible({ timeout: 5000 });
		await addInput.fill(`PW Task B ${RUN}`);
		await addInput.press('Enter');
		await expect(page.getByText(`PW Task B ${RUN}`).first()).toBeVisible({ timeout: 5000 });
	});

	test('should check a checklist item and see progress update', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		// Scroll to checklist item (may be off-screen in grid layout with many panels)
		const taskA = page.getByText(`PW Task A ${RUN}`).first();
		await taskA.scrollIntoViewIfNeeded();
		await expect(taskA).toBeVisible({ timeout: 5000 });
		// The checkbox is in the same row as the task text
		const checklistRow = taskA.locator('..');
		const checkbox = checklistRow.locator('input[type="checkbox"]');
		await checkbox.check();
		// Progress counter should show 1/2
		await expect(page.getByText('1/2').first()).toBeVisible({ timeout: 5000 });
	});

	test('should uncheck the checklist item and see progress revert', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		const taskA = page.getByText(`PW Task A ${RUN}`).first();
		await taskA.scrollIntoViewIfNeeded();
		await expect(taskA).toBeVisible({ timeout: 5000 });
		const checklistRow = taskA.locator('..');
		const checkbox = checklistRow.locator('input[type="checkbox"]');
		if (await checkbox.isChecked()) {
			await checkbox.uncheck();
		}
		await expect(page.getByText('0/2').first()).toBeVisible({ timeout: 5000 });
	});

	// ════════════════════════════════════════════════════════════════════
	// 10. BUDGET WIDGET - full CRUD
	// ════════════════════════════════════════════════════════════════════

	test('should show budget summary cards with zero values', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		await expect(page.getByText('Income').first()).toBeVisible({ timeout: 5000 });
		await expect(page.getByText('Expenses').first()).toBeVisible({ timeout: 5000 });
		// Initially €0.00
		await expect(page.getByText('€0.00').first()).toBeVisible({ timeout: 5000 });
	});

	test('should add a budget expense item and see it in the list', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		await page.getByRole('button', { name: /Add Item/i }).first().click();
		const modal = page.locator('.fixed.inset-0.z-\\[60\\]');
		await expect(modal).toBeVisible({ timeout: 3000 });
		await modal.locator('#budget-desc').fill(`PW Venue Rental ${RUN}`);
		await modal.locator('#budget-planned').fill('200');
		await modal.locator('#budget-actual').fill('180');
		await modal.getByRole('button', { name: /Add Item/i }).click();
		await expect(modal).not.toBeVisible({ timeout: 5000 });
		await expect(page.getByText(`PW Venue Rental ${RUN}`).first()).toBeVisible({ timeout: 5000 });
	});

	test('should show updated expense total after adding item', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		// Expense card should show €180.00 actual
		await expect(page.getByText('€180.00').first()).toBeVisible({ timeout: 5000 });
	});

	test('should show receipt warning for expense with actual amount but no receipt', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		const warningIcon = page.locator('span.text-amber-400').filter({ hasText: 'warning' });
		await expect(warningIcon.first()).toBeVisible({ timeout: 5000 });
	});

	test('should add a second expense item', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		await page.getByRole('button', { name: /Add Item/i }).first().click();
		const modal = page.locator('.fixed.inset-0.z-\\[60\\]');
		await expect(modal).toBeVisible({ timeout: 3000 });
		await modal.locator('#budget-desc').fill(`PW Catering ${RUN}`);
		await modal.locator('#budget-planned').fill('300');
		await modal.locator('#budget-actual').fill('0');
		await modal.getByRole('button', { name: /Add Item/i }).click();
		await expect(modal).not.toBeVisible({ timeout: 5000 });
		await expect(page.getByText(`PW Catering ${RUN}`).first()).toBeVisible({ timeout: 5000 });
	});

	test('should add an income item', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		await page.getByRole('button', { name: /Add Item/i }).first().click();
		const modal = page.locator('.fixed.inset-0.z-\\[60\\]');
		await expect(modal).toBeVisible({ timeout: 3000 });
		await modal.locator('#budget-desc').fill(`PW Ticket Sales ${RUN}`);
		await modal.locator('#budget-type').selectOption('income');
		await modal.locator('#budget-planned').fill('1000');
		await modal.locator('#budget-actual').fill('750');
		await modal.getByRole('button', { name: /Add Item/i }).click();
		await expect(modal).not.toBeVisible({ timeout: 5000 });
		await expect(page.getByText(`PW Ticket Sales ${RUN}`).first()).toBeVisible({ timeout: 5000 });
	});

	test('should edit a budget item description and amount', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		// Click the venue rental item to open edit modal
		await page.getByText(`PW Venue Rental ${RUN}`).first().click();
		const modal = page.locator('.fixed.inset-0.z-\\[60\\]');
		await expect(modal).toBeVisible({ timeout: 3000 });
		// Should show "Edit" in the title
		await expect(modal.getByText('Edit Budget Item')).toBeVisible();
		// Update the actual amount
		await modal.locator('#budget-actual').fill('195');
		await modal.getByRole('button', { name: /Save/i }).click();
		await expect(modal).not.toBeVisible({ timeout: 5000 });
	});

	test('should filter budget items by Income tab', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		// Click Income filter
		await page.getByRole('button', { name: 'Income' }).first().click();
		await expect(page.getByText(`PW Ticket Sales ${RUN}`).first()).toBeVisible({ timeout: 3000 });
		// Expense items should not be visible
		await expect(page.getByText(`PW Venue Rental ${RUN}`)).not.toBeVisible({ timeout: 2000 });
	});

	test('should filter budget items by Expenses tab', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		await page.getByRole('button', { name: 'Expenses' }).first().click();
		await expect(page.getByText(`PW Venue Rental ${RUN}`).first()).toBeVisible({ timeout: 3000 });
		await expect(page.getByText(`PW Catering ${RUN}`).first()).toBeVisible({ timeout: 3000 });
		// Income item should not be visible
		await expect(page.getByText(`PW Ticket Sales ${RUN}`)).not.toBeVisible({ timeout: 2000 });
	});

	test('should show All items when switching back to All tab', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		await page.getByRole('button', { name: 'All' }).first().click();
		await expect(page.getByText(`PW Venue Rental ${RUN}`).first()).toBeVisible({ timeout: 3000 });
		await expect(page.getByText(`PW Ticket Sales ${RUN}`).first()).toBeVisible({ timeout: 3000 });
	});

	// ════════════════════════════════════════════════════════════════════
	// 11. NOTES WIDGET - full CRUD
	// ════════════════════════════════════════════════════════════════════

	test('should show default note in Notes widget', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		// Notes widget should have a default note and a textarea
		await expect(page.locator('textarea[placeholder="Start writing..."]').first()).toBeVisible({ timeout: 5000 });
	});

	test('should type content into the default note', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		const textarea = page.locator('textarea[placeholder="Start writing..."]').first();
		await expect(textarea).toBeVisible({ timeout: 5000 });
		await textarea.fill(`Meeting notes for ${DEPT_NAME} - ${RUN}`);
		// Wait for auto-save debounce (500ms)
		await page.waitForTimeout(1000);
	});

	test('should persist note content after page reload', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		const textarea = page.locator('textarea[placeholder="Start writing..."]').first();
		await expect(textarea).toBeVisible({ timeout: 5000 });
		await expect(textarea).toHaveValue(new RegExp(`Meeting notes for ${DEPT_NAME}`), { timeout: 5000 });
	});

	test('should create a second note via New note button', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		// Click "New note" button in the notes sidebar
		const newNoteBtn = page.getByText('New note').first();
		await expect(newNoteBtn).toBeVisible({ timeout: 5000 });
		await newNoteBtn.click();
		// Title input should appear
		const titleInput = page.locator('input[placeholder="Note title..."]').first();
		await expect(titleInput).toBeVisible({ timeout: 3000 });
		await titleInput.fill(`PW Note ${RUN}`);
		await titleInput.press('Enter');
		// New note should appear in the sidebar list
		await expect(page.getByText(`PW Note ${RUN}`).first()).toBeVisible({ timeout: 5000 });
	});

	test('should switch between notes and see different content', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		// Click the new note
		await page.getByText(`PW Note ${RUN}`).first().click();
		const textarea = page.locator('textarea[placeholder="Start writing..."]').first();
		// New note should be empty
		await expect(textarea).toHaveValue('', { timeout: 3000 });
		// Type something in the new note
		await textarea.fill(`Second note content ${RUN}`);
		await page.waitForTimeout(1000);
	});

	// ════════════════════════════════════════════════════════════════════
	// 12. MODULE REORDERING
	// ════════════════════════════════════════════════════════════════════

	test('should have move left/right buttons on panels', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		const moveLeftBtns = page.locator('button[title="Move left"]');
		const moveRightBtns = page.locator('button[title="Move right"]');
		const leftCount = await moveLeftBtns.count();
		const rightCount = await moveRightBtns.count();
		expect(leftCount).toBeGreaterThan(0);
		expect(rightCount).toBeGreaterThan(0);
		await expect(moveLeftBtns.first()).toBeDisabled();
		await expect(moveRightBtns.last()).toBeDisabled();
	});

	// ════════════════════════════════════════════════════════════════════
	// 13. MODULE REMOVAL
	// ════════════════════════════════════════════════════════════════════

	test('should remove a module and verify panel count decreases', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		const expandBtns = page.locator('button[title="Expand"]');
		const panelsBefore = await expandBtns.count();
		expect(panelsBefore).toBeGreaterThan(0);
		await page.locator('button[title="Remove module"]').last().click();
		await expect(expandBtns).toHaveCount(panelsBefore - 1, { timeout: 10000 });
	});

	test('should verify remaining modules are still functional after removal', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, `dept/${deptId}`);
		// Budget items should still be visible
		await expect(page.getByText(`PW Venue Rental ${RUN}`).first()).toBeVisible({ timeout: 5000 });
		// Checklist items should still be visible
		await expect(page.getByText(`PW Task A ${RUN}`).first()).toBeVisible({ timeout: 5000 });
	});

	// ════════════════════════════════════════════════════════════════════
	// 14. FINANCES PAGE - with budget data
	// ════════════════════════════════════════════════════════════════════

	test('should show budget items from department on Finances page', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, 'finances');
		// Should no longer show empty state
		await expect(page.getByText('No budget data yet')).not.toBeVisible({ timeout: 5000 });
		// Should show our budget items
		await expect(page.getByText(`PW Venue Rental ${RUN}`).first()).toBeVisible({ timeout: 5000 });
		await expect(page.getByText(`PW Ticket Sales ${RUN}`).first()).toBeVisible({ timeout: 5000 });
	});

	test('should show non-zero summary totals on Finances page', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, 'finances');
		// Total Income should show €750.00 (ticket sales actual)
		await expect(page.getByText('€750.00').first()).toBeVisible({ timeout: 5000 });
		// Total Expenses should show €195.00 (venue rental edited actual)
		await expect(page.getByText('€195.00').first()).toBeVisible({ timeout: 5000 });
	});

	test('should filter Finances by Income and only show income items', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, 'finances');
		await page.getByRole('button', { name: 'Income' }).click();
		await page.waitForTimeout(500);
		await expect(page.getByText(`PW Ticket Sales ${RUN}`).first()).toBeVisible({ timeout: 3000 });
		// Expense items should be hidden
		await expect(page.getByText(`PW Venue Rental ${RUN}`)).not.toBeVisible({ timeout: 2000 });
	});

	test('should filter Finances by Expenses and only show expense items', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, 'finances');
		await page.getByRole('button', { name: 'Expenses' }).click();
		await page.waitForTimeout(500);
		await expect(page.getByText(`PW Venue Rental ${RUN}`).first()).toBeVisible({ timeout: 3000 });
		await expect(page.getByText(`PW Catering ${RUN}`).first()).toBeVisible({ timeout: 3000 });
		await expect(page.getByText(`PW Ticket Sales ${RUN}`)).not.toBeVisible({ timeout: 2000 });
	});

	test('should switch to By Department view and see department group', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, 'finances');
		await page.getByRole('button', { name: 'All' }).first().click();
		await page.getByRole('button', { name: 'By Department' }).click();
		await page.waitForTimeout(500);
		await expect(page.getByText(DEPT_NAME).first()).toBeVisible({ timeout: 3000 });
	});

	test('should switch to By Category view and see Uncategorized group', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, 'finances');
		await page.getByRole('button', { name: 'By Category' }).click();
		await page.waitForTimeout(500);
		await expect(page.getByText('Uncategorized').first()).toBeVisible({ timeout: 3000 });
	});

	test('should switch back to All Items view', async ({ page }) => {
		test.setTimeout(60000);
		await gotoEventPath(page, 'finances');
		await page.getByRole('button', { name: 'All Items' }).click();
		await expect(page.getByText(`PW Venue Rental ${RUN}`).first()).toBeVisible({ timeout: 3000 });
		await expect(page.getByText(`PW Ticket Sales ${RUN}`).first()).toBeVisible({ timeout: 3000 });
	});
});