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 />, { isAuthenticated: false })
    // Portfolio Host appears in navbar and in metadata, so check for any occurrence
    const logoTexts = screen.getAllByText('Portfolio Host')
    expect(logoTexts.length).toBeGreaterThan(0)
  })

  it('should have login button in navbar', () => {
    renderWithProviders(<Home />, { isAuthenticated: false })
    const loginButton = screen.getByRole('button', { name: /login/i })
    expect(loginButton).toBeInTheDocument()
  })

  it('should have sign up button in navbar', () => {
    renderWithProviders(<Home />, { isAuthenticated: false })
    const signUpButton = screen.getByRole('button', { name: /sign up/i })
    expect(signUpButton).toBeInTheDocument()
  })

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

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

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

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

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

  it('should have links to login and register pages', () => {
    renderWithProviders(<Home />, { isAuthenticated: false })
    // Check for login link - could be in navbar or anywhere else
    expect(screen.getByRole('link', { name: /login/i })).toBeInTheDocument()
    // Check for register/sign up link
    const signUpLink = screen.getByRole('button', { name: /sign up/i })
    expect(signUpLink).toBeInTheDocument()
  })

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

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