import { track } from 'ripple';

// Minimal repro for hydration issue with if block containing children
// Based on SidebarGroup pattern from website-new

export function IfWithChildren({ children }: { children: any }) {
	return <>
		let &[expanded] = track(true);
		<div class="container">
			<div class="header" role="button" onClick={() => (expanded = !expanded)}>{'Toggle'}</div>
			if (expanded) {
				<div class="content">{children}</div>
			}
		</div>
	</>;
}

export function ChildItem({ text: label }: { text: string }) {
	return <><div class="item">{label}</div></>;
}

export function TestIfWithChildren() {
	return <>
		<IfWithChildren>
			<ChildItem text="Item 1" />
			<ChildItem text="Item 2" />
		</IfWithChildren>
	</>;
}

// Simpler variant - if block with static children
export function IfWithStaticChildren() {
	return <>
		let &[expanded] = track(true);
		<div class="container">
			<div class="header" role="button" onClick={() => (expanded = !expanded)}>{'Toggle'}</div>
			if (expanded) {
				<div class="content">
					<span>{'Static child 1'}</span>
					<span>{'Static child 2'}</span>
				</div>
			}
		</div>
	</>;
}

// Variant with sibling elements before the if block (like SidebarGroup)
export function IfWithSiblingsAndChildren({ children }: { children: any }) {
	return <>
		let &[expanded] = track(true);
		<section class="group">
			<div class="item" role="button" onClick={() => (expanded = !expanded)}>
				<div class="indicator" />
				<h2 class="text">{'Title'}</h2>
				<div class="caret">
					<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
						<path d="m9 18 6-6-6-6" />
					</svg>
				</div>
			</div>
			if (expanded) {
				<div class="items">{children}</div>
			}
		</section>
	</>;
}

export function TestIfWithSiblingsAndChildren() {
	return <>
		<IfWithSiblingsAndChildren>
			<ChildItem text="Item A" />
			<ChildItem text="Item B" />
		</IfWithSiblingsAndChildren>
	</>;
}

// Test case for hydration pop bug: element with nested children followed by dynamic if sibling
// This tests that hydrate_node is properly restored after processing an element's children
// before navigating to a dynamic sibling (if/for/switch)
export function ElementWithChildrenThenIf() {
	return <>
		let &[show] = track(true);
		<div class="wrapper">
			<div class="nested-parent">
				<div class="nested-child">
					<span class="deep">{'Deep content'}</span>
				</div>
			</div>
			if (show) {
				<div class="conditional">{'Conditional content'}</div>
			}
		</div>
		<button class="toggle" onClick={() => (show = !show)}>{'Toggle'}</button>
	</>;
}

// More complex: multiple levels of nesting before if sibling
export function DeepNestingThenIf() {
	return <>
		let &[visible] = track(true);
		<section class="outer">
			<article class="middle">
				<div class="inner">
					<p class="leaf">
						<strong>{'Bold'}</strong>
						<em>{'Italic'}</em>
					</p>
				</div>
			</article>
			if (visible) {
				<footer class="footer">{'Footer'}</footer>
			}
		</section>
		<button class="btn" onClick={() => (visible = !visible)}>{'Toggle'}</button>
	</>;
}

// Test case for CodeBlock pattern: element with only DOM element children (like buttons)
// followed by another sibling element. This requires pop() to restore hydrate_node
// because we descend into the first element to get the button children.
export function DomElementChildrenThenSibling() {
	return <>
		let &[activeTab] = track('code');
		<div class="tabs">
			<div class="tab-list">
				<button
					class="tab"
					aria-selected={activeTab === 'code' ? 'true' : 'false'}
					onClick={() => (activeTab = 'code')}
				>
					{'Code'}
				</button>
				<button
					class="tab"
					aria-selected={activeTab === 'preview' ? 'true' : 'false'}
					onClick={() => (activeTab = 'preview')}
				>
					{'Preview'}
				</button>
			</div>
			<div class="panel">
				if (activeTab === 'code') {
					<pre class="code">{'const x = 1;'}</pre>
				} else {
					<div class="preview">{'Preview content'}</div>
				}
			</div>
		</div>
	</>;
}

// Test case for element with DOM children followed by static siblings that don't
// generate sibling() calls. This was causing incorrect pop() generation before next().
// Pattern: <ul> with dynamic <li> children -> static <h2> -> static <p> -> next()
export function DomChildrenThenStaticSiblings() {
	return <>
		let &[count] = track(0);
		<div class="container">
			<ul class="list">
				<li class="item">
					{'Item count: '}
					{count}
				</li>
				<li class="item">{'Another item'}</li>
			</ul>
			<h2 class="heading">{'Static Heading'}</h2>
			<p class="para">{'Static paragraph'}</p>
		</div>
		<button class="inc" onClick={() => count++}>{'Increment'}</button>
	</>;
}

// Test case for completely static element children followed by static siblings.
// Pattern from introduction page: <ul> with static <li> (strong, code, text)
// followed by static <h2> and <p>. No pop() should be generated for these.
export function StaticListThenStaticSiblings() {
	return <>
		<div class="wrapper">
			<ul class="features">
				<li>
					<strong>{'Feature One'}</strong>
					{': Description of feature one with '}
					<code>{'code'}</code>
					{' reference'}
				</li>
				<li>
					<strong>{'Feature Two'}</strong>
					{': Another feature description'}
				</li>
				<li>
					<strong>{'Feature Three'}</strong>
					{': Third feature'}
				</li>
			</ul>
			<h2 class="section-heading">{'Section Heading'}</h2>
			<p class="section-content">
				{'Static paragraph with '}
				<a href="/link">{'a link'}</a>
				{' and more text.'}
			</p>
		</div>
	</>;
}