import { compile } from '@tsrx/ripple';

describe('CSS :global with complex nesting', () => {
	it('handles :global block with nested selectors', () => {
		const source = `
export function Test() @{
	<>
		<div>
			<span>
				<button>{'click'}</button>
			</span>
		</div>

		<style>
			:global {
				div {
					span {
						color: red;

						button {
							color: blue;
						}
					}
				}
			}
		</style>
	</>
}`;
		const { css } = compile(source, 'test.tsrx');

		expect(css).not.toMatch(/div\.tsrx-[a-z0-9]+ {/);
		expect(css).not.toMatch(/span\.tsrx-[a-z0-9]+ {/);
		expect(css).not.toMatch(/button\.tsrx-[a-z0-9]+ {/);
	});

	it('handles local block with :global nested inside', () => {
		const source = `
export function Test() @{
	<>
		<div>
			<span>{'content'}</span>
		</div>

		<style>
			div {
				color: red;

				:global(span) {
					color: blue;
				}

				p {
					color: green;
				}
			}
		</style>
	</>
}`;
		const { css } = compile(source, 'test.tsrx');

		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ {/);
		expect(css).not.toMatch(/span\.tsrx-[a-z0-9]+ {/);
		expect(css).toContain('(unused) p {');
	});

	it('handles :global block with local nested inside', () => {
		const source = `
export function Test() @{
	<>
		<div>
			<span>
				<button>{'click'}</button>
			</span>
		</div>

		<style>
			:global {
				div {
					.local {
						color: red;
					}
				}
			}
		</style>
	</>
}`;
		const { css } = compile(source, 'test.tsrx');

		expect(css).toContain('div {');
		expect(css).toContain('.local {');
		expect(css).not.toMatch(/div\.tsrx-[a-z0-9]+ {/);
		expect(css).not.toMatch(/\.local\.tsrx-[a-z0-9]+ {/);
	});

	it('handles alternating :global and local nesting', () => {
		const source = `
export function Test() @{
	<>
		<div>
			<span>
				<button>
					<em>{'text'}</em>
				</button>
			</span>
		</div>

		<style>
			div {
				:global(span) {
					button {
						:global(em) {
							color: red;
						}
					}
				}
			}
		</style>
	</>
}`;
		const { css } = compile(source, 'test.tsrx');

		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ {/);
		expect(css).toMatch(/button\.tsrx-[a-z0-9]+ {/);
		expect(css).toContain('span {');
		expect(css).toContain('em {');
	});

	it('handles deeply nested :global blocks', () => {
		const source = `
export function Test() @{
	<>
		<div>
			<span>
				<button>{'click'}</button>
			</span>
		</div>

		<style>
			div {
				:global {
					span {
						:global {
							button {
								color: red;
							}
						}
					}
				}
			}
		</style>
	</>
}`;
		const { css } = compile(source, 'test.tsrx');

		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ {/);
		expect(css).toContain('span {');
		expect(css).toContain('button {');
		expect(css).not.toMatch(/span\.tsrx-[a-z0-9]+/);
		expect(css).not.toMatch(/button\.tsrx-[a-z0-9]+/);
	});

	it('handles :global with nesting combinator &', () => {
		const source = `
export function Test() @{
	<>
		<div class="container">
			<button class="active">{'click'}</button>
		</div>

		<style>
			.container {
				:global {
					&.active {
						color: red;
					}
				}

				button {
					:global(&.pressed) {
						color: blue;
					}
				}
			}
		</style>
	</>
}`;
		const { css } = compile(source, 'test.tsrx');

		expect(css).toMatch(/\.container\.tsrx-[a-z0-9]+ {/);
		expect(css).toMatch(/button\.tsrx-[a-z0-9]+ {/);
		expect(css).toContain('&.active {');
		expect(css).toContain('&.pressed {');
	});

	it('handles complex :global nesting with multiple levels', () => {
		const source = `
export function Test() @{
	<>
		<div>
			<nav>
				<ul>
					<li>
						<a href="#">{'link'}</a>
					</li>
				</ul>
			</nav>
		</div>

		<style>
			div {
				:global(nav) {
					ul {
						:global(li) {
							a {
								color: red;
							}
						}
					}
				}
			}
		</style>
	</>
}`;
		const { css } = compile(source, 'test.tsrx');

		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ {/);
		expect(css).toMatch(/ul\.tsrx-[a-z0-9]+ {/);
		expect(css).toMatch(/a\.tsrx-[a-z0-9]+ {/);

		expect(css).toContain('nav {');
		expect(css).toContain('li {');
		expect(css).not.toMatch(/nav\.tsrx-[a-z0-9]+ {/);
		expect(css).not.toMatch(/li\.tsrx-[a-z0-9]+ {/);
	});
});