import { describe, it, expect, vi, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import { m } from '$lib/paraglide/messages.js';

vi.mock('$app/navigation', () => ({
	beforeNavigate: () => {},
	afterNavigate: () => {},
	goto: vi.fn(),
	invalidate: vi.fn(),
	invalidateAll: vi.fn(),
	preloadCode: vi.fn(),
	preloadData: vi.fn(),
	pushState: vi.fn(),
	replaceState: vi.fn(),
	disableScrollHandling: vi.fn(),
	onNavigate: () => () => {}
}));

const { default: GeschichtenEditPage } = await import('./+page.svelte');

afterEach(cleanup);

const baseData = (overrides: Record<string, unknown> = {}) => ({
	user: undefined,
	canWrite: true,
	canAnnotate: false,
	canBlogWrite: true,
	geschichte: {
		id: 'g1',
		title: 'Die Reise nach Berlin',
		body: '<p>Im Jahr 1923...</p>',
		status: 'PUBLISHED' as 'DRAFT' | 'PUBLISHED',
		type: 'STORY' as 'STORY' | 'JOURNEY',
		persons: [],
		items: [],
		createdAt: '2024-01-01T00:00:00',
		updatedAt: '2024-01-01T00:00:00'
	},
	...overrides
});

describe('geschichten/[id]/edit page', () => {
	it('renders the geschichte title in the heading', async () => {
		render(GeschichtenEditPage, { props: { data: baseData() } });

		await expect
			.element(page.getByRole('heading', { level: 1, name: /reise nach berlin/i }))
			.toBeVisible();
	});

	it('renders a button (BackButton component)', async () => {
		render(GeschichtenEditPage, { props: { data: baseData() } });

		const buttons = document.querySelectorAll('button');
		expect(buttons.length).toBeGreaterThan(0);
	});

	it('does not render an error alert by default', async () => {
		render(GeschichtenEditPage, { props: { data: baseData() } });

		expect(document.querySelector('[role="alert"]')).toBeNull();
	});

	it('renders the GeschichteEditor with form inputs', async () => {
		render(GeschichtenEditPage, { props: { data: baseData() } });

		const inputs = document.querySelectorAll('input, textarea, [contenteditable]');
		expect(inputs.length).toBeGreaterThan(0);
	});

	it('renders the JourneyEditor (add-bar, no TipTap toolbar) for JOURNEY-type geschichten', async () => {
		render(GeschichtenEditPage, {
			props: {
				data: baseData({
					geschichte: {
						id: 'g1',
						title: 'Die Reise nach Berlin',
						body: '',
						status: 'DRAFT' as const,
						type: 'JOURNEY' as const,
						persons: [],
						items: [],
						createdAt: '2024-01-01T00:00:00',
						updatedAt: '2024-01-01T00:00:00'
					}
				})
			}
		});

		await expect.element(page.getByText(m.journey_add_document())).toBeVisible();
		expect(document.querySelector('[role="toolbar"]')).toBeNull();
	});

	it('renders the GeschichteEditor (TipTap toolbar, no add-bar) for STORY-type geschichten', async () => {
		render(GeschichtenEditPage, {
			props: {
				data: baseData({
					geschichte: {
						id: 'g1',
						title: 'Die Reise nach Berlin',
						body: '<p>Im Jahr 1923...</p>',
						status: 'DRAFT' as const,
						type: 'STORY' as const,
						persons: [],
						items: [],
						createdAt: '2024-01-01T00:00:00',
						updatedAt: '2024-01-01T00:00:00'
					}
				})
			}
		});

		await expect.element(page.getByRole('toolbar')).toBeVisible();
		await expect.element(page.getByText(m.journey_add_document())).not.toBeInTheDocument();
	});
});
