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

import DashboardRecentDocuments from './DashboardRecentDocuments.svelte';

afterEach(cleanup);

type Document = {
	id: string;
	title: string;
	updatedAt?: string;
	sender?: { id: string; firstName: string; lastName: string };
};

function makeDoc(id: string, title: string, updatedAt?: string): Document {
	return { id, title, updatedAt };
}

describe('DashboardRecentDocuments', () => {
	it('renders nothing when recentDocs is empty', async () => {
		render(DashboardRecentDocuments, { recentDocs: [] });
		const widget = page.getByTestId('dashboard-recent-docs');
		await expect.element(widget).not.toBeInTheDocument();
	});

	it('shows the widget when recentDocs are present', async () => {
		render(DashboardRecentDocuments, { recentDocs: [makeDoc('d1', 'Taufschein')] });
		const widget = page.getByTestId('dashboard-recent-docs');
		await expect.element(widget).toBeInTheDocument();
	});

	it('renders a link to /documents/{id} for each document', async () => {
		const docs = [makeDoc('d1', 'Taufschein'), makeDoc('d2', 'Heiratsurkunde')];
		render(DashboardRecentDocuments, { recentDocs: docs });
		const links = page.getByRole('link');
		await expect.element(links.nth(0)).toHaveAttribute('href', '/documents/d1');
		await expect.element(links.nth(1)).toHaveAttribute('href', '/documents/d2');
	});

	it('shows the document title in each row', async () => {
		render(DashboardRecentDocuments, {
			recentDocs: [makeDoc('d1', 'Sterbeurkunde 1930', '1930-05-12')]
		});
		await expect.element(page.getByText('Sterbeurkunde 1930')).toBeInTheDocument();
	});

	it('formats and displays the document date when present', async () => {
		render(DashboardRecentDocuments, { recentDocs: [makeDoc('d1', 'Dok', '1945-04-20')] });
		// The date should be visible in some formatted form
		const widget = page.getByTestId('dashboard-recent-docs');
		await expect.element(widget).toBeInTheDocument();
		// Just verify the date element exists (not exact format due to locale)
		const dateEl = page.getByTestId('doc-date-d1');
		await expect.element(dateEl).toBeInTheDocument();
	});
});

describe('DashboardRecentDocuments — stats footnote', () => {
	it('renders stats footnote when stats.totalDocuments is provided', async () => {
		render(DashboardRecentDocuments, {
			recentDocs: [makeDoc('d1', 'Taufschein')],
			stats: { totalDocuments: 248, totalPersons: 34 }
		});
		const footnote = page.getByTestId('dashboard-stats-footnote');
		await expect.element(footnote).toBeInTheDocument();
	});

	it('omits stats footnote when stats is null', async () => {
		render(DashboardRecentDocuments, {
			recentDocs: [makeDoc('d1', 'Taufschein')],
			stats: null
		});
		const footnote = page.getByTestId('dashboard-stats-footnote');
		await expect.element(footnote).not.toBeInTheDocument();
	});

	it('shows "0 Documents" when totalDocuments is 0', async () => {
		render(DashboardRecentDocuments, {
			recentDocs: [makeDoc('d1', 'Taufschein')],
			stats: { totalDocuments: 0, totalPersons: 0 }
		});
		const footnote = page.getByTestId('dashboard-stats-footnote');
		await expect.element(footnote).toBeInTheDocument();
	});
});

describe('DashboardRecentDocuments — touch targets', () => {
	it('each doc row has min-h-[44px] class for WCAG touch target', async () => {
		render(DashboardRecentDocuments, { recentDocs: [makeDoc('d1', 'Taufschein')] });
		const row = page.getByTestId('doc-row-d1');
		await expect.element(row).toHaveClass('min-h-[44px]');
	});
});