/**
 * AttendancePage页面组件测试
 */
import React from 'react'
import { render, screen, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom'
import AttendancePage from '@/pages/AttendancePage/AttendancePage'

// Mock dependencies
jest.mock('@d8d/rencai-shared-ui/components/RencaiTabBarLayout', () => ({
  RencaiTabBarLayout: ({ children, activeKey }: any) => (
    <div data-testid="tab-bar-layout" data-active-key={activeKey}>
      {children}
    </div>
  )
}))

jest.mock('@d8d/mini-shared-ui-components/components/navbar', () => ({
  Navbar: ({ title, leftIcon }: any) => (
    <div data-testid="navbar" data-title={title} data-left-icon={leftIcon}>
      {title}
    </div>
  )
}))

jest.mock('@d8d/rencai-auth-ui/hooks', () => ({
  useRequireAuth: jest.fn()
}))

jest.mock('@/utils/mockAttendanceData', () => ({
  generateMockAttendanceData: jest.fn(() => ({
    stats: {
      attendanceRate: 100,
      normalDays: 28,
      lateCount: 2,
      earlyLeaveCount: 1,
      absentCount: 0
    },
    records: [
      {
        date: '2023-11-25',
        weekday: '星期六',
        checkInTime: '08:30',
        checkOutTime: '17:30',
        status: 'normal'
      },
      {
        date: '2023-11-24',
        weekday: '星期五',
        checkInTime: '09:15',
        checkOutTime: '17:30',
        status: 'late'
      }
    ]
  })),
  formatMonth: jest.fn((year: number, month: number) => `${year}年${month}月`),
  getCurrentYearMonth: jest.fn(() => ({ year: 2023, month: 11 })),
  getPreviousMonth: jest.fn(() => ({ year: 2023, month: 10 })),
  getNextMonth: jest.fn(() => ({ year: 2023, month: 12 }))
}))

import { useRequireAuth } from '@d8d/rencai-auth-ui/hooks'
import { generateMockAttendanceData } from '@/utils/mockAttendanceData'

describe('AttendancePage页面组件', () => {
  beforeEach(() => {
    jest.clearAllMocks()
    ;(useRequireAuth as jest.Mock).mockReturnValue(undefined)
  })

  test('应该渲染页面标题', () => {
    render(<AttendancePage />)

    // "考勤记录"出现在Navbar和MonthSelector中，使用getAllByText
    expect(screen.getAllByText('考勤记录')).toHaveLength(2)
  })

  test('应该渲染考勤统计数据', () => {
    render(<AttendancePage />)

    expect(screen.getByText('100%')).toBeInTheDocument()
    expect(screen.getByText('28天')).toBeInTheDocument()
    expect(screen.getByText('迟到: 2次')).toBeInTheDocument()
    expect(screen.getByText('早退: 1次')).toBeInTheDocument()
    expect(screen.getByText('缺勤: 0次')).toBeInTheDocument()
  })

  test('应该渲染考勤日历', () => {
    render(<AttendancePage />)

    expect(screen.getByText('考勤日历')).toBeInTheDocument()
  })

  test('应该渲染打卡明细', () => {
    render(<AttendancePage />)

    expect(screen.getByText('打卡明细')).toBeInTheDocument()
    // 日期和星期在同一元素中
    expect(screen.getByText((content) => content.includes('11月25日'))).toBeInTheDocument()
    expect(screen.getByText((content) => content.includes('11月24日'))).toBeInTheDocument()
  })

  test('应该渲染月份选择器', () => {
    render(<AttendancePage />)

    expect(screen.getByText('2023年11月')).toBeInTheDocument()
  })

  test('应该调用useRequireAuth检查登录状态', () => {
    render(<AttendancePage />)

    expect(useRequireAuth).toHaveBeenCalled()
  })

  test('应该使用TabBarLayout包装页面', () => {
    const { container } = render(<AttendancePage />)

    const tabBarLayout = container.querySelector('[data-testid="tab-bar-layout"]')
    expect(tabBarLayout).toBeInTheDocument()
    expect(tabBarLayout).toHaveAttribute('data-active-key', 'attendance')
  })

  test('应该使用Navbar导航栏', () => {
    const { container } = render(<AttendancePage />)

    const navbar = container.querySelector('[data-testid="navbar"]')
    expect(navbar).toBeInTheDocument()
    expect(navbar).toHaveAttribute('data-title', '考勤记录')
    expect(navbar).toHaveAttribute('data-left-icon', '')
  })
})
