import React from 'react'
import { act, create, type ReactTestRenderer } from 'react-test-renderer'
import { StyleSheet } from 'react-native'

const mockGoBack = jest.fn()

jest.mock('@react-navigation/native', () => ({
  useNavigation: () => ({ goBack: mockGoBack }),
}))
jest.mock('react-native-safe-area-context', () => ({
  useSafeAreaInsets: () => ({ top: 10, bottom: 0, left: 0, right: 0 }),
}))
jest.mock('@d3ro/i18n', () => ({
  useI18n: () => ({ t: (key: string) => key }),
}))
jest.mock('../src/lib/preferences-context', () => ({
  useMobilePreferences: () => ({
    palette: {
      bg: { sidebar: '#111827' },
      text: { primary: '#ffffff', secondary: '#d1d5db', tertiary: '#9ca3af' },
      border: { default: '#374151' },
      accent: { light: '#60a5fa', ink: '#ffffff' },
      tag: { green: '#34d399', red: '#f87171' },
      status: { success: '#34d399', danger: '#f87171' },
      overlay: { soft: 'rgba(255,255,255,0.06)' },
    },
  }),
}))

import { ScreenHeader } from '../src/components/ScreenHeader'

describe('ScreenHeader', () => {
  test('renders a 48dp back action for stack screens and omits it for tab roots', () => {
    let renderer: ReactTestRenderer
    act(() => {
      renderer = create(<ScreenHeader title="Title" testID="header" />)
    })

    const back = renderer!.root.findByProps({ accessibilityLabel: 'common.back' })
    expect(StyleSheet.flatten(back.props.style({ pressed: false })).width).toBe(48)
    act(() => back.props.onPress())
    expect(mockGoBack).toHaveBeenCalledTimes(1)

    act(() => renderer!.update(<ScreenHeader title="Title" showBack={false} />))
    expect(renderer!.root.findAllByProps({ accessibilityLabel: 'common.back' })).toHaveLength(0)
    act(() => renderer!.unmount())
  })
})