import { describe, test, expect } from 'bun:test'
import { define } from '../index'
import { renderToString, getStylesCSS, parseCSS } from './test_helpers'

describe('define - basic functionality', () => {
  test('creates a component function', () => {
    const Component = define({
      display: 'flex'
    })

    expect(typeof Component).toBe('function')
  })

  test('component returns a JSX element', () => {
    const Component = define({
      display: 'flex'
    })

    const result = Component({})
    expect(result).toBeDefined()
    expect(typeof result).toBe('object')
  })

  test('applies className to rendered element', () => {
    const Component = define('MyComponent', {
      display: 'flex'
    })

    const html = renderToString(Component({}))
    expect(html).toContain('class="MyComponent"')
  })

  test('generates unique anonymous component names', () => {
    const Component1 = define({ display: 'flex' })
    const Component2 = define({ display: 'block' })

    const html1 = renderToString(Component1({}))
    const html2 = renderToString(Component2({}))

    // Should have different auto-generated names
    expect(html1).toMatch(/class="Div\d*"/)
    expect(html2).toMatch(/class="Div\d*"/)
    expect(html1).not.toBe(html2)
  })

  test('renders default div element', () => {
    const Component = define('DivTest', {
      display: 'flex'
    })

    const html = renderToString(Component({}))
    expect(html).toContain('<div')
    expect(html).toContain('</div>')
  })

  test('respects custom base element', () => {
    const Component = define('ButtonTest', {
      base: 'button',
      color: 'blue'
    })

    const html = renderToString(Component({}))
    expect(html).toContain('<button')
    expect(html).toContain('</button>')
  })

  test('passes children through to component', () => {
    const Component = define({})

    const html = renderToString(Component({ children: 'Hello World' }))
    expect(html).toContain('Hello World')
  })

  test('passes additional props through to component', () => {
    const Component = define({})

    const html = renderToString(Component({ id: 'test-id', 'data-test': 'value' }))
    expect(html).toContain('id="test-id"')
    expect(html).toContain('data-test="value"')
  })
})

describe('CSS generation - camelCase to kebab-case', () => {
  test('converts camelCase properties to kebab-case', () => {
    define('CamelTest', {
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'space-between'
    })

    const css = getStylesCSS()
    expect(css).toContain('flex-direction: column')
    expect(css).toContain('align-items: center')
    expect(css).toContain('justify-content: space-between')
  })

  test('handles consecutive capital letters', () => {
    define('ConsecutiveTest', {
      backgroundColor: 'red',
      borderRadius: 5
    })

    const css = getStylesCSS()
    expect(css).toContain('background-color: red')
    expect(css).toContain('border-radius: 5px')
  })
})

describe('CSS generation - numeric values and units', () => {
  test('adds px unit to numeric layout values', () => {
    define('NumericTest', {
      width: 100,
      height: 200,
      padding: 16,
      margin: 8
    })

    const styles = parseCSS(getStylesCSS())
    expect(styles['NumericTest']?.['width']).toBe('100px')
    expect(styles['NumericTest']?.['height']).toBe('200px')
    expect(styles['NumericTest']?.['padding']).toBe('16px')
    expect(styles['NumericTest']?.['margin']).toBe('8px')
  })

  test('preserves string values without adding px', () => {
    define('StringTest', {
      width: '100%',
      height: 'auto',
      margin: '0 auto',
      padding: '1rem'
    })

    const styles = parseCSS(getStylesCSS())
    expect(styles['StringTest']?.['width']).toBe('100%')
    expect(styles['StringTest']?.['height']).toBe('auto')
    expect(styles['StringTest']?.['margin']).toBe('0 auto')
    expect(styles['StringTest']?.['padding']).toBe('1rem')
  })

  test('does not add px to unitless properties', () => {
    define('UnitlessTest', {
      flex: 1,
      flexGrow: 2,
      flexShrink: 1,
      zIndex: 10,
      order: 3,
      opacity: 0.5,
      fontWeight: 700,
      lineHeight: 1.5
    })

    const styles = parseCSS(getStylesCSS())
    expect(styles['UnitlessTest']?.['flex']).toBe('1')
    expect(styles['UnitlessTest']?.['flex-grow']).toBe('2')
    expect(styles['UnitlessTest']?.['flex-shrink']).toBe('1')
    expect(styles['UnitlessTest']?.['z-index']).toBe('10')
    expect(styles['UnitlessTest']?.['order']).toBe('3')
    expect(styles['UnitlessTest']?.['opacity']).toBe('0.5')
    expect(styles['UnitlessTest']?.['font-weight']).toBe('700')
    expect(styles['UnitlessTest']?.['line-height']).toBe('1.5')
  })

  test('handles numeric zero values correctly', () => {
    define('ZeroTest', {
      margin: 0,
      padding: 0,
      zIndex: 0,
      opacity: 0
    })

    const styles = parseCSS(getStylesCSS())
    expect(styles['ZeroTest']?.['margin']).toBe('0px')
    expect(styles['ZeroTest']?.['padding']).toBe('0px')
    expect(styles['ZeroTest']?.['z-index']).toBe('0')
    expect(styles['ZeroTest']?.['opacity']).toBe('0')
  })
})

describe('CSS generation - layout and look', () => {
  test('generates CSS for layout properties', () => {
    define('LayoutTest', {
      display: 'flex',
      flexDirection: 'column',
      gap: 16,
      padding: 20
    })

    const css = getStylesCSS()
    expect(css).toContain('.LayoutTest')
    expect(css).toContain('display: flex')
    expect(css).toContain('flex-direction: column')
    expect(css).toContain('gap: 16px')
    expect(css).toContain('padding: 20px')
  })

  test('generates CSS for look properties', () => {
    define('LookTest', {
      color: 'blue',
      backgroundColor: 'white',
      fontSize: 16,
      fontWeight: 600
    })

    const css = getStylesCSS()
    expect(css).toContain('.LookTest')
    expect(css).toContain('color: blue')
    expect(css).toContain('background-color: white')
    expect(css).toContain('font-size: 16px')
    expect(css).toContain('font-weight: 600')
  })

  test('combines layout and look properties', () => {
    define('CombinedTest', {
      display: 'flex',
      padding: 16,
      color: 'blue',
      backgroundColor: 'white'
    })

    const styles = parseCSS(getStylesCSS())
    const combined = styles['CombinedTest']!
    expect(combined['display']).toBe('flex')
    expect(combined['padding']).toBe('16px')
    expect(combined['color']).toBe('blue')
    expect(combined['background-color']).toBe('white')
  })
})

describe('CSS generation - parts', () => {
  test('generates separate CSS for each part', () => {
    define('PartTest', {
      display: 'flex',
      parts: {
        Header: { base: 'header', color: 'red', fontSize: 20 },
        Body: { base: 'main', padding: 20 },
        Footer: { base: 'footer', fontSize: 12 }
      }
    })

    const styles = parseCSS(getStylesCSS())
    expect(styles['PartTest_Header']?.['color']).toBe('red')
    expect(styles['PartTest_Header']?.['font-size']).toBe('20px')
    expect(styles['PartTest_Body']?.['padding']).toBe('20px')
    expect(styles['PartTest_Footer']?.['font-size']).toBe('12px')
  })

  test('part className format is ComponentName_PartName', () => {
    define('ComponentWithParts', {
      parts: {
        MyPart: { color: 'green' }
      }
    })

    const css = getStylesCSS()
    expect(css).toContain('.ComponentWithParts_MyPart')
  })
})

describe('components with parts', () => {
  test('creates part components accessible through render function', () => {
    let capturedParts: any

    const Component = define('PartRenderTest', {
      parts: {
        Header: { base: 'header' },
        Body: { base: 'main' }
      },
      render: ({ props, parts }) => {
        capturedParts = parts
        return <parts.Root {...props}>{props.children}</parts.Root>
      }
    })

    Component({})

    expect(typeof capturedParts.Header).toBe('function')
    expect(typeof capturedParts.Body).toBe('function')
    expect(typeof capturedParts.Root).toBe('function')
  })

  test('part components render with correct className', () => {
    const Component = define('PartClassTest', {
      parts: {
        Header: { base: 'header' }
      },
      render: ({ props, parts }) => {
        return <parts.Header>Header Content</parts.Header>
      }
    })

    const html = renderToString(Component({}))
    expect(html).toContain('class="PartClassTest_Header"')
    expect(html).toContain('<header')
  })

  test('parts render with correct base elements', () => {
    const Component = define('PartBaseTest', {
      parts: {
        Header: { base: 'header' },
        Main: { base: 'main' },
        Footer: { base: 'footer' }
      },
      render: ({ props, parts }) => {
        return (
          <div>
            <parts.Header>Header</parts.Header>
            <parts.Main>Main</parts.Main>
            <parts.Footer>Footer</parts.Footer>
          </div>
        )
      }
    })

    const html = renderToString(Component({}))
    expect(html).toContain('<header')
    expect(html).toContain('<main')
    expect(html).toContain('<footer')
  })
})

describe('variants - boolean variants', () => {
  test('applies boolean variant class when true', () => {
    const Component = define('BoolVariant', {
      display: 'flex',
      variants: {
        primary: {
          color: 'blue'
        }
      }
    })

    const html = renderToString(Component({ primary: true }))
    // Boolean variants add just the variant name as a class
    expect(html).toContain('class="BoolVariant primary"')
  })

  test('does not apply boolean variant class when false or absent', () => {
    const Component = define('BoolVariantFalse', {
      variants: {
        active: {
          backgroundColor: 'green'
        }
      }
    })

    const htmlFalse = renderToString(Component({ active: false }))
    const htmlAbsent = renderToString(Component({}))

    // When false or absent, variant class should not be added (check the class attribute)
    expect(htmlFalse).toContain('class="BoolVariantFalse"')
    expect(htmlFalse).not.toContain('class="BoolVariantFalse active')
    expect(htmlAbsent).toContain('class="BoolVariantFalse"')
    expect(htmlAbsent).not.toContain(' active')
  })

  test('generates CSS for component with boolean variant', () => {
    define('BoolVariantCSS', {
      display: 'block',
      variants: {
        active: {
          backgroundColor: 'green'
        }
      }
    })

    const css = getStylesCSS()
    expect(css).toContain('.BoolVariantCSS')
    expect(css).toContain('display: block')
  })
})

describe('variants - string/enum variants', () => {
  test('applies string variant class', () => {
    const Component = define('StringVariant', {
      variants: {
        size: {
          small: { padding: 8 },
          medium: { padding: 16 },
          large: { padding: 24 }
        }
      }
    })

    const htmlSmall = renderToString(Component({ size: 'small' }))
    const htmlLarge = renderToString(Component({ size: 'large' }))

    expect(htmlSmall).toContain('class="StringVariant size-small"')
    expect(htmlLarge).toContain('class="StringVariant size-large"')
  })

  test('generates CSS for each variant option', () => {
    define('ColorVariant', {
      variants: {
        color: {
          red: { color: 'red', backgroundColor: '#ffeeee' },
          blue: { color: 'blue', backgroundColor: '#eeeeff' },
          green: { color: 'green', backgroundColor: '#eeffee' }
        }
      }
    })

    const styles = parseCSS(getStylesCSS())
    expect(styles['ColorVariant.color-red']?.['color']).toBe('red')
    expect(styles['ColorVariant.color-blue']?.['color']).toBe('blue')
    expect(styles['ColorVariant.color-green']?.['color']).toBe('green')
  })

  test('applies multiple variant classes', () => {
    const Component = define('MultiVariant', {
      variants: {
        size: {
          small: { padding: 8 },
          large: { padding: 24 }
        },
        color: {
          red: { color: 'red' },
          blue: { color: 'blue' }
        }
      }
    })

    const html = renderToString(Component({ size: 'small', color: 'blue' }))
    expect(html).toContain('size-small')
    expect(html).toContain('color-blue')
  })

  test('ignores undefined variant values', () => {
    const Component = define('UndefinedVariant', {
      variants: {
        size: {
          small: { padding: 8 }
        }
      }
    })

    const html = renderToString(Component({ size: 'nonexistent' }))
    expect(html).toContain('class="UndefinedVariant"')
    expect(html).not.toContain('size-nonexistent')
  })

  test('ignores non-variant props', () => {
    const Component = define('NonVariantProps', {
      variants: {
        size: {
          small: { padding: 8 }
        }
      }
    })

    const html = renderToString(Component({ size: 'small', randomProp: 'value', id: 'test' }))
    expect(html).toContain('size-small')
    expect(html).toContain('id="test"')
    expect(html).toContain('randomProp="value"')
  })
})

describe('variants with parts', () => {
  test('generates CSS for variant parts', () => {
    define('VariantParts', {
      parts: {
        Header: { base: 'header' }
      },
      variants: {
        theme: {
          dark: {
            parts: {
              Header: { color: 'white', backgroundColor: 'black' }
            }
          },
          light: {
            parts: {
              Header: { color: 'black', backgroundColor: 'white' }
            }
          }
        }
      }
    })

    const styles = parseCSS(getStylesCSS())
    expect(styles['VariantParts_Header.theme-dark']?.['color']).toBe('white')
    expect(styles['VariantParts_Header.theme-dark']?.['background-color']).toBe('black')
    expect(styles['VariantParts_Header.theme-light']?.['color']).toBe('black')
    expect(styles['VariantParts_Header.theme-light']?.['background-color']).toBe('white')
  })

  test('part elements include variant classes', () => {
    const Component = define('VariantPartClass', {
      parts: {
        Header: { base: 'header' }
      },
      variants: {
        size: {
          large: { padding: 20 }
        }
      },
      render: ({ props, parts }) => {
        return <parts.Header>Header Content</parts.Header>
      }
    })

    const html = renderToString(Component({ size: 'large' }))
    expect(html).toContain('VariantPartClass_Header')
    expect(html).toContain('size-large')
  })
})

describe('custom render function', () => {
  test('uses custom render when provided', () => {
    const Component = define('CustomRender', {
      display: 'flex',
      render: ({ props, parts }) => {
        return <div class="custom-wrapper">{props.children}</div>
      }
    })

    const html = renderToString(Component({ children: 'Content' }))
    expect(html).toContain('class="custom-wrapper"')
    expect(html).toContain('Content')
  })

  test('custom render receives props', () => {
    let receivedProps: any

    const Component = define({
      render: ({ props, parts }) => {
        receivedProps = props
        return <parts.Root {...props}>{props.children}</parts.Root>
      }
    })

    Component({ testProp: 'value', children: 'Test' })

    expect(receivedProps.testProp).toBe('value')
    expect(receivedProps.children).toBe('Test')
  })

  test('custom render can compose parts', () => {
    const Component = define('ComposeParts', {
      parts: {
        Header: { base: 'header' },
        Body: { base: 'main' },
        Footer: { base: 'footer' }
      },
      render: ({ props, parts }) => {
        return (
          <parts.Root>
            <parts.Header>Header</parts.Header>
            <parts.Body>{props.children}</parts.Body>
            <parts.Footer>Footer</parts.Footer>
          </parts.Root>
        )
      }
    })

    const html = renderToString(Component({ children: 'Main Content' }))
    expect(html).toContain('<header')
    expect(html).toContain('<main')
    expect(html).toContain('<footer')
    expect(html).toContain('Main Content')
  })
})

describe('Styles component', () => {
  test('Styles is accessible via define.Styles', () => {
    expect(typeof define.Styles).toBe('function')
  })

  test('Styles returns a style element', () => {
    const result = define.Styles() as any
    expect(result).toBeDefined()
    expect(result.props.dangerouslySetInnerHTML).toBeDefined()
  })

  test('Styles renders to HTML with CSS', () => {
    define('StylesComp1', { width: 100 })

    const html = renderToString(define.Styles())
    expect(html).toContain('<style>')
    expect(html).toContain('.StylesComp1')
    expect(html).toContain('width: 100px')
    expect(html).toContain('</style>')
  })

  test('Styles includes CSS for all registered components', () => {
    define('StylesComp2', { width: 100 })
    define('StylesComp3', { height: 200 })

    const css = getStylesCSS()
    expect(css).toContain('.StylesComp2')
    expect(css).toContain('width: 100px')
    expect(css).toContain('.StylesComp3')
    expect(css).toContain('height: 200px')
  })

  test('Styles includes variant CSS', () => {
    define('StylesVariant', {
      variants: {
        size: {
          small: { padding: 8 },
          large: { padding: 24 }
        }
      }
    })

    const css = getStylesCSS()
    expect(css).toContain('.StylesVariant.size-small')
    expect(css).toContain('padding: 8px')
    expect(css).toContain('.StylesVariant.size-large')
    expect(css).toContain('padding: 24px')
  })

  test('Styles includes part CSS', () => {
    define('StylesPart', {
      parts: {
        Header: { color: 'red' },
        Body: { color: 'blue' }
      }
    })

    const css = getStylesCSS()
    expect(css).toContain('.StylesPart_Header')
    expect(css).toContain('color: red')
    expect(css).toContain('.StylesPart_Body')
    expect(css).toContain('color: blue')
  })
})

describe('variants on parts via props', () => {
  test('applies boolean variant to part when passed as prop', () => {
    const Component = define('PartVariantBool', {
      parts: {
        Tab: { base: 'button', color: 'gray' }
      },
      variants: {
        active: {
          parts: {
            Tab: { color: 'blue' }
          }
        }
      },
      render: ({ props, parts }) => {
        return (
          <parts.Root>
            <parts.Tab active={true}>Active Tab</parts.Tab>
            <parts.Tab active={false}>Inactive Tab</parts.Tab>
          </parts.Root>
        )
      }
    })

    const html = renderToString(Component({}))
    // Should have one tab with active class, one without
    expect(html).toContain('PartVariantBool_Tab active')
    // Count occurrences - should have 2 tabs total
    const tabCount = (html.match(/PartVariantBool_Tab/g) || []).length
    expect(tabCount).toBe(2)
  })

  test('applies string variant to part when passed as prop', () => {
    const Component = define('PartVariantString', {
      parts: {
        Pill: { base: 'button' }
      },
      variants: {
        size: {
          small: { parts: { Pill: { padding: 8 } } },
          large: { parts: { Pill: { padding: 24 } } }
        }
      },
      render: ({ props, parts }) => {
        return (
          <parts.Root>
            <parts.Pill size="small">Small</parts.Pill>
            <parts.Pill size="large">Large</parts.Pill>
          </parts.Root>
        )
      }
    })

    const html = renderToString(Component({}))
    expect(html).toContain('PartVariantString_Pill size-small')
    expect(html).toContain('PartVariantString_Pill size-large')
  })

  test('does not pass variant props through to HTML', () => {
    const Component = define('NoVariantLeakage', {
      parts: {
        Item: { base: 'div' }
      },
      variants: {
        active: {
          parts: { Item: { color: 'blue' } }
        }
      },
      render: ({ props, parts }) => {
        return (
          <parts.Root>
            <parts.Item active={true}>Item</parts.Item>
          </parts.Root>
        )
      }
    })

    const html = renderToString(Component({}))
    // Should have the class, but not the attribute
    expect(html).toContain('class="NoVariantLeakage_Item active"')
    expect(html).not.toContain('active="true"')
    expect(html).not.toContain('active="false"')
  })

  test('combines root and part level variants', () => {
    const Component = define('CombinedVariants', {
      parts: {
        NavItem: { base: 'a' }
      },
      variants: {
        theme: {
          dark: {
            backgroundColor: 'black',
            parts: { NavItem: { color: 'white' } }
          }
        },
        active: {
          parts: { NavItem: { fontWeight: 700 } }
        }
      },
      render: ({ props, parts }) => {
        return (
          <parts.Root>
            <parts.NavItem active={true}>Active Link</parts.NavItem>
            <parts.NavItem active={false}>Inactive Link</parts.NavItem>
          </parts.Root>
        )
      }
    })

    const html = renderToString(Component({ theme: 'dark' }))
    // Root should have theme variant
    expect(html).toContain('CombinedVariants theme-dark')
    // Active NavItem should have both theme and active classes
    expect(html).toContain('CombinedVariants_NavItem theme-dark active')
    // Inactive NavItem should have only theme class
    expect(html).toMatch(/CombinedVariants_NavItem theme-dark"[^>]*>Inactive/)
  })
})

describe('base with attributes', () => {
  test('extracts element name from base with attributes', () => {
    const Component = define('InputRadio', {
      base: 'input[type=radio]',
      display: 'block'
    })

    const html = renderToString(Component({}))
    expect(html).toContain('<input')
    expect(html).toContain('type="radio"')
    expect(html).toContain('class="InputRadio"')
  })

  test('extracts multiple attribute formats', () => {
    const Component = define('InputCheckbox', {
      base: 'input[type=checkbox]'
    })

    const html = renderToString(Component({}))
    expect(html).toContain('type="checkbox"')
  })

  test('works without attributes', () => {
    const Component = define('PlainInput', {
      base: 'input',
      padding: 10
    })

    const html = renderToString(Component({}))
    expect(html).toContain('<input')
    expect(html).not.toContain('type=')
  })

  test('base attributes can be overridden by props', () => {
    const Component = define('OverridableInput', {
      base: 'input[type=text]'
    })

    const html = renderToString(Component({ type: 'email' }))
    expect(html).toContain('type="email"')
  })
})

describe('selectors with @ and &', () => {
  test('generates CSS for selectors with @PartName', () => {
    define('SelectorTest', {
      parts: {
        Input: { base: 'input[type=checkbox]', display: 'none' },
        Label: {
          base: 'label',
          color: '#666',
          selectors: {
            '@Input:checked + &': {
              color: 'blue'
            }
          }
        }
      }
    })

    const css = getStylesCSS()
    expect(css).toContain('.SelectorTest_Input:checked + .SelectorTest_Label')
    expect(css).toContain('color: blue')
  })

  test('selectors support general sibling combinator ~', () => {
    define('SiblingTest', {
      parts: {
        Trigger: { base: 'input[type=checkbox]' },
        Content: {
          display: 'none',
          selectors: {
            '@Trigger:checked ~ &': {
              display: 'block'
            }
          }
        }
      }
    })

    const css = getStylesCSS()
    expect(css).toContain('.SiblingTest_Trigger:checked ~ .SiblingTest_Content')
    expect(css).toContain('display: block')
  })

  test('selectors can include pseudo-classes on &', () => {
    define('PseudoTest', {
      parts: {
        Radio: { base: 'input[type=radio]', display: 'none' },
        Label: {
          base: 'label',
          selectors: {
            '@Radio:checked + &:hover': {
              background: 'lightblue'
            }
          }
        }
      }
    })

    const css = getStylesCSS()
    expect(css).toContain('.PseudoTest_Radio:checked + .PseudoTest_Label:hover')
    expect(css).toContain('background: lightblue')
  })

  test('selectors work on root level', () => {
    define('RootSelectorTest', {
      color: 'black',
      selectors: {
        '&:hover': {
          color: 'blue'
        }
      }
    })

    const css = getStylesCSS()
    expect(css).toContain('.RootSelectorTest:hover')
    expect(css).toContain('color: blue')
  })

  test('supports multiple selectors', () => {
    define('MultiSelectorTest', {
      parts: {
        Input: { base: 'input[type=checkbox]' },
        Label: {
          selectors: {
            '@Input:checked + &': { color: 'green' },
            '@Input:disabled + &': { opacity: 0.5 }
          }
        }
      }
    })

    const css = getStylesCSS()
    expect(css).toContain('.MultiSelectorTest_Input:checked + .MultiSelectorTest_Label')
    expect(css).toContain('color: green')
    expect(css).toContain('.MultiSelectorTest_Input:disabled + .MultiSelectorTest_Label')
    expect(css).toContain('opacity: 0.5')
  })
})

describe('edge cases', () => {
  test('handles empty definition', () => {
    const Component = define({})
    const html = renderToString(Component({}))

    expect(html).toBeDefined()
    expect(html).toMatch(/class="Div\d*"/)
  })

  test('handles definition with only parts', () => {
    const Component = define({
      parts: {
        Header: { base: 'header' }
      }
    })

    const result = Component({})
    expect(result).toBeDefined()
  })

  test('handles definition with only variants', () => {
    const Component = define({
      variants: {
        size: {
          small: { padding: 8 }
        }
      }
    })

    const html = renderToString(Component({ size: 'small' }))
    expect(html).toContain('size-small')
  })

  test('throws error when defining duplicate component names', () => {
    define('NoDuplicateTest', { width: 100 })

    expect(() => {
      define('NoDuplicateTest', { width: 200 })
    }).toThrow('NoDuplicateTest is already defined! Must use unique names.')
  })

  test('handles complex nested structures', () => {
    define('ComplexNested', {
      display: 'grid',
      parts: {
        Container: { padding: 16 },
        Item: { fontSize: 14 }
      },
      variants: {
        theme: {
          dark: {
            backgroundColor: 'black',
            parts: {
              Container: { backgroundColor: '#222' },
              Item: { color: 'white' }
            }
          }
        }
      }
    })

    const styles = parseCSS(getStylesCSS())
    expect(styles['ComplexNested']?.['display']).toBe('grid')
    expect(styles['ComplexNested_Container']?.['padding']).toBe('16px')
    expect(styles['ComplexNested_Item']?.['font-size']).toBe('14px')
    expect(styles['ComplexNested.theme-dark']?.['background-color']).toBe('black')
    expect(styles['ComplexNested_Container.theme-dark']?.['background-color']).toBe('#222')
    expect(styles['ComplexNested_Item.theme-dark']?.['color']).toBe('white')
  })

  test('handles JSX children correctly', () => {
    const Component = define('ChildrenTest', {})

    const html = renderToString(Component({
      children: <span>Nested Element</span>
    }))
    expect(html).toContain('<span>Nested Element</span>')
  })

  test('handles multiple children', () => {
    const Component = define('MultiChildren', {
      render: ({ props, parts }) => {
        return <parts.Root>{props.children}</parts.Root>
      }
    })

    const html = renderToString(Component({
      children: [
        <div>First</div>,
        <div>Second</div>
      ]
    }))
    expect(html).toContain('First')
    expect(html).toContain('Second')
  })
})