import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { DetailedProjectCard } from './DetailedProjectCard'

const DEFAULT_PROPS = {
  title: 'Big Project',
  year: '2023',
  role: 'Lead Dev',
  stack: ['Vue', 'Go'],
  description: 'A detailed project description',
  details: ['First detail point', 'Second detail point'],
}

describe('DetailedProjectCard', () => {
  describe('rendering', () => {
    it('renders the project title', () => {
      render(<DetailedProjectCard {...DEFAULT_PROPS} />)
      expect(screen.getByText('Big Project')).toBeInTheDocument()
    })

    it('renders the description', () => {
      render(<DetailedProjectCard {...DEFAULT_PROPS} />)
      expect(screen.getByText('A detailed project description')).toBeInTheDocument()
    })

    it('renders each detail item', () => {
      render(<DetailedProjectCard {...DEFAULT_PROPS} />)
      expect(screen.getByText('First detail point')).toBeInTheDocument()
      expect(screen.getByText('Second detail point')).toBeInTheDocument()
    })

    it('renders ProjectMetadata with year, role, and stack', () => {
      render(<DetailedProjectCard {...DEFAULT_PROPS} />)
      expect(screen.getByText('2023')).toBeInTheDocument()
      expect(screen.getByText('Lead Dev')).toBeInTheDocument()
      expect(screen.getByText('Vue')).toBeInTheDocument()
      expect(screen.getByText('Go')).toBeInTheDocument()
    })
  })

  describe('structure', () => {
    it('outer grid has grid-cols-1 and lg:grid-cols-12', () => {
      const { container } = render(<DetailedProjectCard {...DEFAULT_PROPS} />)
      expect(container.firstChild).toHaveClass('grid', 'grid-cols-1', 'lg:grid-cols-12')
    })

    it('title is rendered as an h3', () => {
      render(<DetailedProjectCard {...DEFAULT_PROPS} />)
      expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('Big Project')
    })

    it('detail items are rendered as <p> tags with text-base', () => {
      render(<DetailedProjectCard {...DEFAULT_PROPS} />)
      const detail = screen.getByText('First detail point')
      expect(detail.tagName).toBe('P')
      expect(detail).toHaveClass('text-base')
    })

    it('details list has brutal-border-top and pt-6', () => {
      render(<DetailedProjectCard {...DEFAULT_PROPS} />)
      const detail = screen.getByText('First detail point')
      const detailList = detail.parentElement
      expect(detailList).toHaveClass('brutal-border-top', 'pt-6')
    })

    it('description has text-lg and mb-6', () => {
      render(<DetailedProjectCard {...DEFAULT_PROPS} />)
      const desc = screen.getByText('A detailed project description')
      expect(desc).toHaveClass('text-lg', 'mb-6')
    })
  })

  describe('conditional image rendering', () => {
    it('does not render image when imageUrl is absent', () => {
      const { container } = render(<DetailedProjectCard {...DEFAULT_PROPS} />)
      expect(container.querySelector('img')).toBeNull()
    })

    it('renders image when imageUrl is provided', () => {
      render(<DetailedProjectCard {...DEFAULT_PROPS} imageUrl="/detail.jpg" />)
      const img = screen.getByRole('img')
      expect(img).toHaveAttribute('src', '/detail.jpg')
    })

    it('image wrapper has aspect-video and brutal-border when imageUrl is provided', () => {
      const { container } = render(<DetailedProjectCard {...DEFAULT_PROPS} imageUrl="/detail.jpg" />)
      const imgWrapper = container.querySelector('img')!.parentElement
      expect(imgWrapper).toHaveClass('aspect-video', 'brutal-border')
    })
  })
})