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

afterEach(cleanup);

const baseProps = {
	canWrite: false,
	isPdf: false,
	hasTranscription: false,
	transcribeMode: false,
	filePath: null as string | null,
	originalFilename: 'brief.pdf' as string | null,
	fileUrl: ''
};

describe('DocumentMobileMenu', () => {
	it('renders the kebab trigger button with the more-actions aria-label', async () => {
		render(DocumentMobileMenu, { props: { ...baseProps, filePath: 'docs/x.pdf' } });

		await expect.element(page.getByRole('button', { name: /weitere aktionen/i })).toBeVisible();
	});

	it('starts with the dropdown closed (aria-expanded=false)', async () => {
		render(DocumentMobileMenu, { props: { ...baseProps, filePath: 'docs/x.pdf' } });

		await expect
			.element(page.getByRole('button', { name: /weitere aktionen/i }))
			.toHaveAttribute('aria-expanded', 'false');
	});

	it('opens the dropdown when the trigger is clicked', async () => {
		render(DocumentMobileMenu, { props: { ...baseProps, filePath: 'docs/x.pdf' } });

		await page.getByRole('button', { name: /weitere aktionen/i }).click();

		await expect
			.element(page.getByRole('button', { name: /weitere aktionen/i }))
			.toHaveAttribute('aria-expanded', 'true');
	});

	it('shows the transcribe action inside the open menu when canWrite, isPdf, and not in transcribe mode', async () => {
		render(DocumentMobileMenu, {
			props: { ...baseProps, canWrite: true, isPdf: true, filePath: 'docs/x.pdf' }
		});

		await page.getByRole('button', { name: /weitere aktionen/i }).click();

		await expect.element(page.getByRole('button', { name: /transkribieren/i })).toBeVisible();
	});

	it('shows no transcription action for a read-only user when no transcription exists', async () => {
		render(DocumentMobileMenu, {
			props: {
				...baseProps,
				canWrite: false,
				isPdf: true,
				hasTranscription: false,
				filePath: 'docs/x.pdf'
			}
		});

		await page.getByRole('button', { name: /weitere aktionen/i }).click();

		await expect
			.element(page.getByRole('button', { name: /transkribieren/i }))
			.not.toBeInTheDocument();
		await expect
			.element(page.getByRole('button', { name: /transkription lesen/i }))
			.not.toBeInTheDocument();
	});

	it('shows the read-transcription action for a read-only user when a transcription exists', async () => {
		render(DocumentMobileMenu, {
			props: {
				...baseProps,
				canWrite: false,
				isPdf: true,
				hasTranscription: true,
				filePath: 'docs/x.pdf'
			}
		});

		await page.getByRole('button', { name: /weitere aktionen/i }).click();

		await expect.element(page.getByRole('button', { name: /transkription lesen/i })).toBeVisible();
	});

	it('hides the transcribe action when already in transcribeMode', async () => {
		render(DocumentMobileMenu, {
			props: {
				...baseProps,
				canWrite: true,
				isPdf: true,
				transcribeMode: true,
				filePath: 'docs/x.pdf'
			}
		});

		await page.getByRole('button', { name: /weitere aktionen/i }).click();

		await expect
			.element(page.getByRole('button', { name: /transkribieren/i }))
			.not.toBeInTheDocument();
	});

	it('shows the download link inside the open menu when filePath is present', async () => {
		render(DocumentMobileMenu, {
			props: { ...baseProps, filePath: 'docs/x.pdf', fileUrl: '/api/docs/x' }
		});

		await page.getByRole('button', { name: /weitere aktionen/i }).click();

		await expect.element(page.getByRole('link', { name: /herunterladen/i })).toBeVisible();
	});

	it('omits the download link when filePath is null', async () => {
		render(DocumentMobileMenu, {
			props: { ...baseProps, canWrite: true, isPdf: true }
		});

		await page.getByRole('button', { name: /weitere aktionen/i }).click();

		await expect
			.element(page.getByRole('link', { name: /herunterladen/i }))
			.not.toBeInTheDocument();
	});
});
