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

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('Landing Page (Home)', () => {
  it('should render navbar with logo', () => {
    renderWithProviders(<Home />)
    expect(screen.getByText('Portfolio Host')).toBeInTheDocument()
  })

  it('should have login button in navbar', () => {
    renderWithProviders(<Home />)
    const loginButtons = screen.getAllByRole('button', { name: /login/i })
    expect(loginButtons.length).toBeGreaterThan(0)
  })

  it('should have sign up button in navbar', () => {
    renderWithProviders(<Home />)
    const signUpButtons = screen.getAllByRole('button', { name: /sign up/i })
    expect(signUpButtons.length).toBeGreaterThan(0)
  })

  it('should have hero section with main heading', () => {
    renderWithProviders(<Home />)
    expect(screen.getByText('Host Your Portfolio')).toBeInTheDocument()
  })

  it('should have hero section description', () => {
    renderWithProviders(<Home />)
    expect(
      screen.getByText(/Deploy and manage your portfolio websites with custom domains/i)
    ).toBeInTheDocument()
  })

  it('should have Get Started CTA button', () => {
    renderWithProviders(<Home />)
    expect(screen.getByRole('button', { name: /get started/i })).toBeInTheDocument()
  })

  it('should have View Example button', () => {
    renderWithProviders(<Home />)
    expect(screen.getByRole('button', { name: /view example/i })).toBeInTheDocument()
  })

  it('should have footer with copyright', () => {
    renderWithProviders(<Home />)
    expect(screen.getByText(/© 2025 Portfolio Host/i)).toBeInTheDocument()
  })

  it('should have links to login and register pages', () => {
    renderWithProviders(<Home />)
    const links = screen.getAllByRole('link')
    const loginLinks = links.filter((link) => link.getAttribute('href') === '/login')
    const registerLinks = links.filter((link) => link.getAttribute('href') === '/register')

    expect(loginLinks.length).toBeGreaterThan(0)
    expect(registerLinks.length).toBeGreaterThan(0)
  })

  it('should render complete layout structure', () => {
    const { container } = renderWithProviders(<Home />)

    // Should have nav, main, and footer
    expect(container.querySelector('nav')).toBeInTheDocument()
    expect(container.querySelector('main')).toBeInTheDocument()
    expect(container.querySelector('footer')).toBeInTheDocument()
  })
})