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

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

  it('renders BlurView when hasBlur is true (default)', () => {
    render(
      <GlassCard>
        <Text>Content</Text>
      </GlassCard>
    )
    expect(screen.getByTestId('blur-view')).toBeTruthy()
  })

  it('does not render BlurView when hasBlur is false', () => {
    render(
      <GlassCard hasBlur={false}>
        <Text>Content</Text>
      </GlassCard>
    )
    expect(screen.queryByTestId('blur-view')).toBeNull()
  })

  it('renders with custom blurIntensity', () => {
    render(
      <GlassCard blurIntensity={80}>
        <Text>Content</Text>
      </GlassCard>
    )
    const blurView = screen.getByTestId('blur-view')
    expect(blurView.props.intensity).toBe(80)
  })

  it('uses theme blurMedium when blurIntensity is not provided', () => {
    render(
      <GlassCard>
        <Text>Content</Text>
      </GlassCard>
    )
    const blurView = screen.getByTestId('blur-view')
    // from mock: colors.glass.blurMedium = 40
    expect(blurView.props.intensity).toBe(40)
  })

  it('applies custom style prop to root container', () => {
    const customStyle = { padding: 20 }
    const { toJSON } = render(
      <GlassCard style={customStyle}>
        <Text>Content</Text>
      </GlassCard>
    )
    const tree = toJSON()
    // Root View should have the custom style merged into its style array
    const rootStyle = tree?.props?.style
    expect(rootStyle).toBeDefined()
    // Style is an array — flatten and check custom style is present
    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('GlassCard variants', () => {
  it('renders base variant (snapshot)', () => {
    const { toJSON } = render(
      <GlassCard>
        <Text>Base</Text>
      </GlassCard>
    )
    expect(toJSON()).toMatchSnapshot()
  })

  it('renders elevated variant (snapshot)', () => {
    const { toJSON } = render(
      <GlassCard variant="elevated">
        <Text>Elevated</Text>
      </GlassCard>
    )
    expect(toJSON()).toMatchSnapshot()
  })

  it('renders inset variant (snapshot)', () => {
    const { toJSON } = render(
      <GlassCard variant="inset">
        <Text>Inset</Text>
      </GlassCard>
    )
    expect(toJSON()).toMatchSnapshot()
  })

  it('renders tinted variant (snapshot)', () => {
    const { toJSON } = render(
      <GlassCard variant="tinted">
        <Text>Tinted</Text>
      </GlassCard>
    )
    expect(toJSON()).toMatchSnapshot()
  })
})

describe('GlassCard presets', () => {
  it('GlassCardElevated renders with blur and children', () => {
    const { getByTestId } = render(
      <GlassCardElevated>
        <Text testID="elevated-child">Elevated</Text>
      </GlassCardElevated>
    )
    expect(getByTestId('elevated-child')).toBeTruthy()
    expect(getByTestId('blur-view')).toBeTruthy()
  })

  it('GlassCardInset renders WITHOUT blur (hasBlur=false)', () => {
    const { getByTestId, queryByTestId } = render(
      <GlassCardInset>
        <Text testID="inset-child">Inset</Text>
      </GlassCardInset>
    )
    expect(getByTestId('inset-child')).toBeTruthy()
    // GlassCardInset passes hasBlur={false} — this is the key behavioral assertion
    expect(queryByTestId('blur-view')).toBeNull()
  })

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

  it('GlassCardElevated snapshot', () => {
    const { toJSON } = render(
      <GlassCardElevated>
        <Text>Elevated preset</Text>
      </GlassCardElevated>
    )
    expect(toJSON()).toMatchSnapshot()
  })
})
