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

afterEach(cleanup);

const sender = { id: 's1', firstName: 'Karl', lastName: 'Müller', displayName: 'Karl Müller' };
const receivers = [
	{ id: 'r1', firstName: 'Anna', lastName: 'Schmidt', displayName: 'Anna Schmidt' },
	{ id: 'r2', firstName: 'Hans', lastName: 'Weber', displayName: 'Hans Weber' }
];
const tags = [
	{ id: 't1', name: 'Familienbrief' },
	{ id: 't2', name: 'Kriegszeit' }
];

function renderDrawer(overrides: Record<string, unknown> = {}) {
	return render(DocumentMetadataDrawer, {
		documentDate: '1942-03-15',
		location: 'Berlin',
		status: 'UPLOADED',
		sender,
		receivers,
		tags,
		...overrides
	});
}

// ─── Details column ──────────────────────────────────────────────────────────

describe('DocumentMetadataDrawer — details column', () => {
	it('renders formatted date', async () => {
		renderDrawer();
		await expect.element(page.getByText('15. März 1942')).toBeInTheDocument();
	});

	it('renders dash when date is null', async () => {
		renderDrawer({ documentDate: null });
		const dds = page.getByText('—');
		await expect.element(dds.first()).toBeInTheDocument();
	});

	it('renders location', async () => {
		renderDrawer();
		await expect.element(page.getByText('Berlin')).toBeInTheDocument();
	});

	it('renders dash when location is null', async () => {
		renderDrawer({ location: null });
		const dashes = page.getByText('—');
		await expect.element(dashes.first()).toBeInTheDocument();
	});

	it('renders translated status label', async () => {
		renderDrawer();
		// "Hochgeladen" is the German translation of UPLOADED
		await expect.element(page.getByText('Hochgeladen')).toBeInTheDocument();
	});
});

// ─── Persons column ──────────────────────────────────────────────────────────

describe('DocumentMetadataDrawer — persons column', () => {
	it('renders sender name as link to person detail', async () => {
		renderDrawer();
		const link = page.getByRole('link', { name: /Karl Müller/ });
		await expect.element(link).toBeInTheDocument();
		await expect.element(link).toHaveAttribute('href', '/persons/s1');
	});

	it('renders receiver names as links', async () => {
		renderDrawer();
		const anna = page.getByRole('link', { name: /Anna Schmidt/ });
		await expect.element(anna).toHaveAttribute('href', '/persons/r1');
		const hans = page.getByRole('link', { name: /Hans Weber/ });
		await expect.element(hans).toHaveAttribute('href', '/persons/r2');
	});

	it('shows empty state when no sender and no receivers', async () => {
		renderDrawer({ sender: null, receivers: [] });
		await expect.element(page.getByText('Keine Personen zugeordnet')).toBeInTheDocument();
	});
});

// ─── Tags column ─────────────────────────────────────────────────────────────

describe('DocumentMetadataDrawer — tags column', () => {
	it('renders tag chips as links', async () => {
		renderDrawer();
		const fb = page.getByRole('link', { name: 'Familienbrief' });
		await expect.element(fb).toBeInTheDocument();
		await expect.element(fb).toHaveAttribute('href', '/?tag=Familienbrief');
	});

	it('shows empty state when no tags', async () => {
		renderDrawer({ tags: [] });
		await expect.element(page.getByText('Keine Schlagwörter zugeordnet')).toBeInTheDocument();
	});
});