import { describe, it, expect } from 'vitest'
import React from 'react'
import { render, screen } from '@testing-library/react-native'
import { Text } from 'react-native'
import { Card, CardAccent, CardTip, GlassCard, GlassCardElevated, GlassCardInset, GlassCardTinted } from '@/src/shared/components/GlassCard'

describe('Card', () => {
  it('renders children', () => {
    render(
      <Card>
        <Text testID="child">Hello</Text>
      </Card>
    )
    expect(screen.getByTestId('child')).toBeTruthy()
  })

  it('applies custom style prop to root container', () => {
    const customStyle = { padding: 20 }
    const { toJSON } = render(
      <Card style={customStyle}>
        <Text>Content</Text>
      </Card>
    )
    const tree = toJSON()
    const rootStyle = tree?.props?.style
    expect(rootStyle).toBeDefined()
    const flatStyles = Array.isArray(rootStyle) ? rootStyle : [rootStyle]
    const hasPadding = flatStyles.some(
      (s: any) => s && typeof s === 'object' && s.padding === 20
    )
    expect(hasPadding).toBe(true)
  })
})

describe('Card variants', () => {
  it('renders default variant (snapshot)', () => {
    const { toJSON } = render(
      <Card>
        <Text>Default</Text>
      </Card>
    )
    expect(toJSON()).toMatchSnapshot()
  })

  it('renders accent variant (snapshot)', () => {
    const { toJSON } = render(
      <CardAccent>
        <Text>Accent</Text>
      </CardAccent>
    )
    expect(toJSON()).toMatchSnapshot()
  })

  it('renders tip variant (snapshot)', () => {
    const { toJSON } = render(
      <CardTip>
        <Text>Tip</Text>
      </CardTip>
    )
    expect(toJSON()).toMatchSnapshot()
  })
})

describe('Backward-compatible aliases', () => {
  it('GlassCard renders children', () => {
    render(
      <GlassCard>
        <Text testID="bc-child">Backward compat</Text>
      </GlassCard>
    )
    expect(screen.getByTestId('bc-child')).toBeTruthy()
  })

  it('GlassCardElevated renders children', () => {
    render(
      <GlassCardElevated>
        <Text testID="elevated-child">Elevated</Text>
      </GlassCardElevated>
    )
    expect(screen.getByTestId('elevated-child')).toBeTruthy()
  })

  it('GlassCardInset renders children', () => {
    render(
      <GlassCardInset>
        <Text testID="inset-child">Inset</Text>
      </GlassCardInset>
    )
    expect(screen.getByTestId('inset-child')).toBeTruthy()
  })

  it('GlassCardTinted renders children', () => {
    render(
      <GlassCardTinted>
        <Text testID="tinted-child">Tinted</Text>
      </GlassCardTinted>
    )
    expect(screen.getByTestId('tinted-child')).toBeTruthy()
  })
})
