// #region EmptyStateTest [C:2] [TYPE Module] [SEMANTICS test, ui, empty-state, component, render]
// @BRIEF Unit tests for EmptyState UI component — title, description, icon, action button rendering.
// @LAYER Tests
// @RELATION BINDS_TO -> [EmptyState]
// @UX_STATE Empty -> Component renders centered icon + message + optional action.

import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/svelte';
import EmptyState from '../EmptyState.svelte';

describe('EmptyState', () => {
	it('renders with title', () => {
		const { container } = render(EmptyState, { props: { title: 'No items found' } });
		expect(container.textContent).toContain('No items found');
	});

	it('renders with description', () => {
		const { container } = render(EmptyState, {
			props: { title: 'Empty', description: 'There are no items to display.' },
		});
		expect(container.textContent).toContain('There are no items to display.');
	});

	it('renders default document icon when no iconSlot provided', () => {
		const { container } = render(EmptyState, { props: { title: 'Empty' } });
		// The default fallback is an SVG with a document icon path
		const svg = container.querySelector('svg');
		expect(svg).not.toBeNull();
		expect(svg!.getAttribute('class')).toContain('w-16');
	});

	it('does not render title when title is empty', () => {
		const { container } = render(EmptyState, { props: { description: 'Just a description' } });
		const h3 = container.querySelector('h3');
		expect(h3).toBeNull();
	});

	it('does not render description when description is empty', () => {
		const { container } = render(EmptyState, { props: { title: 'Title only' } });
		const p = container.querySelector('p');
		expect(p).toBeNull();
	});

	it('does not render action button when actionLabel is missing', () => {
		const { container } = render(EmptyState, { props: { title: 'Empty', onAction: () => {} } });
		const button = container.querySelector('button');
		expect(button).toBeNull();
	});

	it('does not render action button when onAction is missing', () => {
		const { container } = render(EmptyState, { props: { title: 'Empty', actionLabel: 'Retry' } });
		const button = container.querySelector('button');
		expect(button).toBeNull();
	});

	it('renders action button when both actionLabel and onAction are provided', () => {
		const onAction = () => {};
		const { container } = render(EmptyState, {
			props: { title: 'Error', actionLabel: 'Retry', onAction },
		});
		const button = container.querySelector('button');
		expect(button).not.toBeNull();
		expect(button!.textContent).toContain('Retry');
	});

	it('applies custom class name', () => {
		const { container } = render(EmptyState, {
			props: { title: 'Empty', class: 'custom-class' },
		});
		const outerDiv = container.firstElementChild;
		expect(outerDiv!.className).toContain('custom-class');
	});

	it('renders icon slot when provided via snippet', () => {
		// The external prop name is "icon" (destructured as icon: iconSlot)
		// Passing icon as a function triggers {#if iconSlot} and {@render iconSlot()}
		const iconSnippet = () => {};
		const { container } = render(EmptyState, {
			props: { title: 'Custom', icon: iconSnippet },
		});
		// When icon is provided, the default SVG is NOT rendered
		// (because the {#if iconSlot} branch is taken instead of {:else})
		const defaultSvg = container.querySelector('svg');
		expect(defaultSvg).toBeNull();
	});

	it('calls onAction when action button is clicked', () => {
		let called = false;
		const onAction = () => { called = true; };
		const { container } = render(EmptyState, {
			props: { title: 'Error', actionLabel: 'Retry', onAction },
		});
		const button = container.querySelector('button');
		expect(button).not.toBeNull();
		button!.click();
		expect(called).toBe(true);
	});

	it('renders title and description together', () => {
		const { container } = render(EmptyState, {
			props: { title: 'No Data', description: 'There are no items to show.' },
		});
		expect(container.textContent).toContain('No Data');
		expect(container.textContent).toContain('There are no items to show.');
	});

	it('renders with default icon SVG when no iconSlot is provided', () => {
		const { container } = render(EmptyState, {
			props: { title: 'Empty State' },
		});
		const svg = container.querySelector('svg');
		expect(svg).not.toBeNull();
		// Default SVG has a specific path
		expect(svg!.innerHTML).toContain('M9 12h6');
	});

	it('renders primary variant button by default', () => {
		const onAction = () => {};
		const { container } = render(EmptyState, {
			props: { title: 'Error', actionLabel: 'Retry', onAction },
		});
		const button = container.querySelector('button')!;
		expect(button.textContent).toContain('Retry');
	});
});
// #endregion EmptyStateTest
