import React from 'react'
import { renderWithProviders, screen } from '@/__tests__/utils/test-helpers'
import Hero from './hero'

jest.mock('@/components/ui/button', () => ({
  Button: ({ children, ...props }: any) => <button {...props}>{children}</button>,
}))
jest.mock('next/link', () => ({
  __esModule: true,
  default: ({ children, href }: any) => <a href={href}>{children}</a>,
}))

describe('Hero Component', () => {
  it('should render with default title', () => {
    renderWithProviders(<Hero />)
    expect(screen.getByText('Host Your Portfolio')).toBeInTheDocument()
  })

  it('should render with custom title', () => {
    const customTitle = 'Share Your Work with the World'
    renderWithProviders(<Hero title={customTitle} />)
    expect(screen.getByText(customTitle)).toBeInTheDocument()
  })

  it('should render with default description', () => {
    renderWithProviders(<Hero />)
    expect(screen.getByText(/Deploy and manage your portfolio websites/i)).toBeInTheDocument()
  })

  it('should render with custom description', () => {
    const customDesc = 'Custom description for hero section'
    renderWithProviders(<Hero description={customDesc} />)
    expect(screen.getByText(customDesc)).toBeInTheDocument()
  })

  it('should display primary CTA button with link', () => {
    renderWithProviders(<Hero />)
    const getStartedLink = screen.getByRole('link', { name: /get started/i })
    expect(getStartedLink).toHaveAttribute('href', '/register')
  })

  it('should display secondary CTA button with link', () => {
    renderWithProviders(<Hero />)
    const viewExampleLink = screen.getByRole('link', { name: /view example/i })
    expect(viewExampleLink).toBeInTheDocument()
  })

  it('should use custom CTA text and href', () => {
    const customPrimaryCTA = {
      text: 'Create Portfolio',
      href: '/create',
    }
    renderWithProviders(
      <Hero primaryCTA={customPrimaryCTA} />
    )
    expect(screen.getByRole('link', { name: /create portfolio/i })).toHaveAttribute('href', '/create')
  })

  it('should hide secondary CTA if text is empty', () => {
    renderWithProviders(
      <Hero secondaryCTA={{ text: '', href: '#' }} />
    )
    expect(screen.queryByText('View Example')).not.toBeInTheDocument()
  })

  it('should have CTA buttons with correct size', () => {
    renderWithProviders(<Hero />)
    const buttons = screen.getAllByRole('button')
    expect(buttons.length).toBeGreaterThanOrEqual(2)
  })

  it('should display responsive layout container', () => {
    const { container } = renderWithProviders(<Hero />)
    const section = container.querySelector('section')
    expect(section).toBeInTheDocument()
    expect(section).toHaveClass('bg-gradient-to-br')
  })

  it('should have decorative trusted-by message', () => {
    renderWithProviders(<Hero />)
    expect(screen.getByText(/trusted by/i)).toBeInTheDocument()
  })

  it('should render multiple CTA buttons in flex layout', () => {
    renderWithProviders(<Hero />)
    const links = screen.getAllByRole('link')
    // Should have at least 2 CTA links
    const ctaLinks = links.filter((link) => {
      const href = link.getAttribute('href')
      return href === '/register' || href === '#'
    })
    expect(ctaLinks.length).toBeGreaterThanOrEqual(2)
  })

  it('should be responsive with proper padding', () => {
    const { container } = renderWithProviders(<Hero />)
    const section = container.querySelector('section')
    expect(section).toHaveClass('py-20', 'md:py-32')
  })

  it('should have proper heading hierarchy', () => {
    const { container } = renderWithProviders(<Hero />)
    const h1 = container.querySelector('h1')
    expect(h1).toBeInTheDocument()
  })
})