import { describe, it, expect, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import ReaderDraftsModule from './ReaderDraftsModule.svelte';

afterEach(cleanup);

const makeDraft = (overrides: Record<string, unknown> = {}) => ({
	id: 'g1',
	title: 'My Draft Story',
	body: '<p>Draft content</p>',
	publishedAt: null,
	updatedAt: '2026-04-15T10:00:00Z',
	...overrides
});

describe('ReaderDraftsModule', () => {
	it('renders the heading', async () => {
		render(ReaderDraftsModule, { props: { drafts: [] } });

		await expect.element(page.getByRole('heading', { name: /meine entwürfe/i })).toBeVisible();
	});

	it('renders the empty placeholder when drafts is empty', async () => {
		render(ReaderDraftsModule, { props: { drafts: [] } });

		await expect.element(page.getByText('Keine Entwürfe')).toBeVisible();
	});

	it('renders one row per draft', async () => {
		render(ReaderDraftsModule, {
			props: {
				drafts: [
					makeDraft({ id: 'g1', title: 'Draft 1' }),
					makeDraft({ id: 'g2', title: 'Draft 2' })
				]
			}
		});

		await expect.element(page.getByText('Draft 1')).toBeVisible();
		await expect.element(page.getByText('Draft 2')).toBeVisible();
	});

	it('renders the draft link to /geschichten/{id}/edit', async () => {
		render(ReaderDraftsModule, { props: { drafts: [makeDraft({ id: 'g-42' })] } });

		const link = document.querySelector('a[href="/geschichten/g-42/edit"]');
		expect(link).not.toBeNull();
	});

	it('renders the meta line with relative time', async () => {
		render(ReaderDraftsModule, { props: { drafts: [makeDraft()] } });

		expect(document.body.textContent).toContain('Entwurf');
	});
});