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

import { PageShell } from './index'

jest.mock('media/tidb-summit-2026-logo.png', () => 'tidb-summit-2026-logo.png', { virtual: true })

jest.mock('@tidbcloud/uikit', () => {
  const Box = ({ component: Component = 'div', children, ...props }: any) => (
    <Component {...props}>{children}</Component>
  )
  const Flex = ({ children, ...props }: any) => <div {...props}>{children}</div>
  const Typography = ({ children, ...props }: any) => <div {...props}>{children}</div>
  const List = ({ children }: React.PropsWithChildren) => <ul>{children}</ul>
  List.Item = ({ children, ...props }: any) => <li {...props}>{children}</li>

  return { Box, Flex, List, Typography }
})

jest.mock('./Shell.styles', () => ({
  useStyles: () => ({
    classes: {
      pageShell: 'page-shell',
      hero: 'hero',
      logo: 'logo',
      left: 'left',
      right: 'right',
      slogan: 'slogan',
      summitContent: 'summit-content',
      summitLogo: 'summit-logo',
      summitCopy: 'summit-copy',
      summitTagline: 'summit-tagline',
      summitDate: 'summit-date',
      summitLocation: 'summit-location',
      summitButton: 'summit-button'
    }
  })
}))

jest.mock('dbaas/utils/tracking', () => ({
  MixpanelEvents: {
    PageShell: {
      View: {
        ButtonClicked: 'PageShell_View_ButtonClicked'
      }
    }
  }
}))

describe('PageShell', () => {
  it('renders the default slogans when no advertisement is requested', () => {
    render(<PageShell>Form content</PageShell>)

    expect(screen.getByText('Form content')).not.toBeNull()
    expect(screen.getByText('Get started for free')).not.toBeNull()
    expect(screen.queryByTestId('page-shell-scaile-2026')).toBeNull()
  })

  it('renders the SCaiLE 2026 promotion with a safe tracked CTA', () => {
    render(<PageShell withAdvertisement>Form content</PageShell>)

    expect(screen.getByTestId('page-shell-scaile-2026')).not.toBeNull()
    expect(screen.getByText('Infinite Agents. Infinite Data. One Infrastructure.')).not.toBeNull()
    expect(screen.getByText('October 15, 2026')).not.toBeNull()
    expect(screen.getByText('Computer History Museum, Mountain View')).not.toBeNull()

    const cta = screen.getByTestId('page-shell-scaile-2026-register')
    expect(cta.getAttribute('href')).toBe(
      'https://www.pingcap.com/tidb-scaile-summit/?utm_source=tidb_cloud&utm_medium=login_banner'
    )
    expect(cta.getAttribute('target')).toBe('_blank')
    expect(cta.getAttribute('rel')).toBe('noopener noreferrer')
    expect(cta.getAttribute('data-mp-event')).toBe('PageShell_View_ButtonClicked')
    expect(cta.getAttribute('data-mp-campaign')).toBe('scaile-2026')
  })

  it('keeps a custom right section ahead of the promotion', () => {
    render(
      <PageShell withAdvertisement rightSection={<div>Custom right section</div>}>
        Form content
      </PageShell>
    )

    expect(screen.getByText('Custom right section')).not.toBeNull()
    expect(screen.queryByTestId('page-shell-scaile-2026')).toBeNull()
  })
})