import { render, screen } from '@testing-library/react'

import { EntryCard } from './CenterCard'

const mockTheme = {
  colors: {
    carbon: ['carbon-0', 'carbon-1', 'carbon-2', 'carbon-3', 'carbon-4', 'carbon-5', 'carbon-6']
  },
  defaultRadius: '8px'
}

jest.mock('@tidbcloud/uikit', () => ({
  ActionIcon: ({ children }: React.PropsWithChildren) => <button>{children}</button>,
  Avatar: ({
    children,
    size,
    radius
  }: React.PropsWithChildren<{
    size?: number
    radius?: number
  }>) => (
    <span data-testid="entry-card-avatar" data-size={size} data-radius={radius}>
      {children}
    </span>
  ),
  Box: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
  Card: () => null,
  Divider: () => null,
  Flex: ({
    children,
    gap
  }: React.PropsWithChildren<{
    gap?: number | string
  }>) => (
    <div data-testid="entry-card-flex" data-gap={gap}>
      {children}
    </div>
  ),
  Group: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
  Typography: ({
    children,
    variant,
    fw,
    fz,
    c
  }: React.PropsWithChildren<{
    variant?: string
    fw?: number
    fz?: number
    c?: string
  }>) => (
    <div
      data-testid="entry-card-typography"
      data-variant={variant}
      data-font-weight={fw}
      data-font-size={fz}
      data-color={c}
    >
      {children}
    </div>
  ),
  UnstyledButton: ({
    children,
    component: Component = 'button',
    href,
    target,
    rel,
    type,
    h,
    px,
    py,
    sx,
    'data-testid': dataTestId
  }: React.PropsWithChildren<{
    component?: React.ElementType
    href?: string
    target?: React.HTMLAttributeAnchorTarget
    rel?: string
    type?: 'button'
    h?: number
    px?: number
    py?: number
    sx?: (theme: typeof mockTheme) => Record<string, unknown>
    'data-testid'?: string
  }>) => (
    <Component
      href={href}
      target={target}
      rel={rel}
      type={type}
      data-testid={dataTestId}
      data-height={h}
      data-padding-x={px}
      data-padding-y={py}
      data-styles={JSON.stringify(sx?.(mockTheme))}
    >
      {children}
    </Component>
  )
}))

jest.mock('@tidbcloud/uikit/icons', () => ({
  IconMinus: () => null
}))

jest.mock('./context', () => ({
  useHelpCenterContext: () => ({ closeDialog: jest.fn() })
}))

describe('Help Center EntryCard', () => {
  it('renders external entries as safe links with a right section', () => {
    render(
      <EntryCard
        title="Documentation"
        href="https://docs.example.com"
        target="_blank"
        rightSection={<span>external</span>}
        dataTestId="entry-card"
      />
    )

    const entry = screen.getByTestId('entry-card')
    expect(entry.tagName).toBe('A')
    expect(entry.getAttribute('href')).toBe('https://docs.example.com')
    expect(entry.getAttribute('target')).toBe('_blank')
    expect(entry.getAttribute('rel')).toBe('noopener noreferrer')
    expect(entry.textContent).toContain('Documentation')
    expect(entry.textContent).toContain('external')
    expect(entry.getAttribute('data-height')).toBe('64')
    expect(entry.getAttribute('data-padding-x')).toBe('16')

    const styles = JSON.parse(entry.getAttribute('data-styles') ?? '{}')
    expect(styles).toEqual(
      expect.objectContaining({
        border: '1px solid carbon-3',
        width: '100%',
        display: 'block',
        boxSizing: 'border-box',
        ':hover': expect.objectContaining({ borderColor: 'carbon-6' })
      })
    )
  })

  it('renders action entries as buttons', () => {
    render(<EntryCard title="Guided tour" dataTestId="entry-card" />)

    const entry = screen.getByTestId('entry-card')
    expect(entry.tagName).toBe('BUTTON')
    expect(entry.getAttribute('type')).toBe('button')
    expect(entry.getAttribute('data-height')).toBe('64')
    expect(entry.getAttribute('data-styles')).toContain('"display":"block"')
  })

  it('uses the compact icon container and medium 16px title treatment', () => {
    render(<EntryCard title="Guided tour" avatar={<span>icon</span>} dataTestId="entry-card" />)

    const avatar = screen.getByTestId('entry-card-avatar')
    expect(avatar.getAttribute('data-size')).toBe('32')
    expect(avatar.getAttribute('data-radius')).toBe('8')

    const title = screen.getByTestId('entry-card-typography')
    expect(title.getAttribute('data-variant')).toBe('title-lg')
    expect(title.getAttribute('data-font-size')).toBe('16')
    expect(title.getAttribute('data-font-weight')).toBe('500')
    expect(title.getAttribute('data-color')).toBe('carbon.8')
  })
})