import { render, screen, fireEvent } from '@testing-library/react'
import { UpcomingMeetings, type UpcomingMeeting } from '../calendar/upcoming-meetings'

const sampleMeetings: UpcomingMeeting[] = [
  {
    id: 1,
    title: 'Sequoia partner sync',
    scheduled_at: '2026-04-29T16:00:00Z',
    status: 'confirmed',
    investor_name: 'Roelof Botha',
    investor_email: 'roelof@sequoia.com',
    meeting_link: 'https://meet.google.com/abc',
  },
  {
    id: 2,
    title: 'Acme partner intro',
    scheduled_at: '2026-04-30T14:00:00Z',
    status: 'pending',
    investor_email: 'partner@acme.vc',
  },
  {
    id: 3,
    title: 'Cancelled call',
    scheduled_at: '2026-05-01T10:00:00Z',
    status: 'cancelled',
  },
]

describe('UpcomingMeetings', () => {
  it('renders the title and each meeting title', () => {
    render(<UpcomingMeetings meetings={sampleMeetings} />)
    expect(screen.getByText('Upcoming Meetings')).toBeInTheDocument()
    expect(screen.getByText('Sequoia partner sync')).toBeInTheDocument()
    expect(screen.getByText('Acme partner intro')).toBeInTheDocument()
    expect(screen.getByText('Cancelled call')).toBeInTheDocument()
  })

  it('shows the right status badge per meeting', () => {
    render(<UpcomingMeetings meetings={sampleMeetings} />)
    expect(screen.getByText('Confirmed')).toBeInTheDocument()
    expect(screen.getByText('Pending')).toBeInTheDocument()
    expect(screen.getByText('Cancelled')).toBeInTheDocument()
  })

  it('renders skeletons in loading state', () => {
    const { container } = render(
      <UpcomingMeetings meetings={[]} loading loadingRowCount={5} />
    )
    // Skeletons render as empty divs with animate-pulse — count them by class.
    const skeletons = container.querySelectorAll('.animate-pulse')
    expect(skeletons).toHaveLength(5)
  })

  it('renders empty state when no meetings', () => {
    render(<UpcomingMeetings meetings={[]} />)
    expect(screen.getByText('No upcoming meetings')).toBeInTheDocument()
  })

  it('does not render Schedule CTA when onSchedule is not provided', () => {
    render(<UpcomingMeetings meetings={[]} />)
    expect(screen.queryByText('Schedule one')).not.toBeInTheDocument()
  })

  it('renders Schedule CTA when onSchedule is provided and fires it on click', () => {
    const onSchedule = jest.fn()
    render(<UpcomingMeetings meetings={[]} onSchedule={onSchedule} />)
    const cta = screen.getByText('Schedule one')
    expect(cta).toBeInTheDocument()
    fireEvent.click(cta)
    expect(onSchedule).toHaveBeenCalledTimes(1)
  })

  it('fires onMeetingClick with the original meeting payload', () => {
    const onMeetingClick = jest.fn()
    render(<UpcomingMeetings meetings={sampleMeetings} onMeetingClick={onMeetingClick} />)
    fireEvent.click(screen.getByText('Sequoia partner sync'))
    expect(onMeetingClick).toHaveBeenCalledTimes(1)
    expect(onMeetingClick.mock.calls[0][0].id).toBe(1)
    expect(onMeetingClick.mock.calls[0][0].investor_name).toBe('Roelof Botha')
  })

  it('renders View all link when viewAllHref is provided', () => {
    render(<UpcomingMeetings meetings={sampleMeetings} viewAllHref="/calendar" />)
    const link = screen.getByText('View all')
    expect(link.closest('a')).toHaveAttribute('href', '/calendar')
  })

  it('renders Join link when meeting_link is set', () => {
    render(<UpcomingMeetings meetings={sampleMeetings} />)
    const join = screen.getByText('Join')
    expect(join.closest('a')).toHaveAttribute('href', 'https://meet.google.com/abc')
  })

  it("falls back to investor_email when investor_name is absent", () => {
    render(<UpcomingMeetings meetings={sampleMeetings} />)
    expect(screen.getByText('partner@acme.vc')).toBeInTheDocument()
  })

  it('uses a custom title when title prop is provided', () => {
    render(<UpcomingMeetings meetings={[]} title="This Week's Calls" />)
    expect(screen.getByText("This Week's Calls")).toBeInTheDocument()
    expect(screen.queryByText('Upcoming Meetings')).not.toBeInTheDocument()
  })
})