/**
 * 人才小程序考勤记录页
 * TabBar页面 - 无返回按钮
 * 原型参考: docs/小程序原型/rencai.html (行303-481)
 */
import React, { useState } from 'react'
import { View } from '@tarojs/components'
import { RencaiTabBarLayout } from '@d8d/rencai-shared-ui/components/RencaiTabBarLayout'
import { Navbar } from '@d8d/mini-shared-ui-components/components/navbar'
import { useRequireAuth } from '@d8d/rencai-auth-ui/hooks'

// 组件导入
import { MonthSelector } from '../../components/MonthSelector'
import { AttendanceStats } from '../../components/AttendanceStats'
import { AttendanceCalendar } from '../../components/AttendanceCalendar'
import { AttendanceDetails } from '../../components/AttendanceDetails'

// 工具函数导入
import {
  generateMockAttendanceData,
  formatMonth,
  getCurrentYearMonth,
  getPreviousMonth,
  getNextMonth
} from '../../utils/mockAttendanceData'

// 类型导入
import { AttendanceStats as AttendanceStatsType, AttendanceRecord } from '../../types/attendance'

const AttendancePage: React.FC = () => {
  // 检查登录状态，未登录则重定向
  useRequireAuth()

  // 状态管理
  const [currentYear, setCurrentYear] = useState<number>(() => getCurrentYearMonth().year)
  const [currentMonth, setCurrentMonth] = useState<number>(() => getCurrentYearMonth().month)
  const [stats, setStats] = useState<AttendanceStatsType>(() => ({
    attendanceRate: 100,
    normalDays: 0,
    lateCount: 0,
    earlyLeaveCount: 0,
    absentCount: 0
  }))
  const [records, setRecords] = useState<AttendanceRecord[]>([])

  // 加载指定月份的考勤数据
  const loadAttendanceData = (year: number, month: number) => {
    const { stats: newStats, records: newRecords } = generateMockAttendanceData(year, month)
    setStats(newStats)
    setRecords(newRecords)
  }

  // 处理上个月点击
  const handlePreviousMonth = () => {
    const { year: prevYear, month: prevMonth } = getPreviousMonth(currentYear, currentMonth)
    setCurrentYear(prevYear)
    setCurrentMonth(prevMonth)
    loadAttendanceData(prevYear, prevMonth)
  }

  // 处理下个月点击
  const handleNextMonth = () => {
    const { year: nextYear, month: nextMonth } = getNextMonth(currentYear, currentMonth)
    setCurrentYear(nextYear)
    setCurrentMonth(nextMonth)
    loadAttendanceData(nextYear, nextMonth)
  }

  // 处理 Picker 选择变化
  const handleMonthChange = (year: number, month: number) => {
    setCurrentYear(year)
    setCurrentMonth(month)
    loadAttendanceData(year, month)
  }

  // 初始化加载当前月份数据
  React.useEffect(() => {
    loadAttendanceData(currentYear, currentMonth)
  }, [])

  const currentMonthDisplay = formatMonth(currentYear, currentMonth)

  return (
    <RencaiTabBarLayout activeKey="attendance">
      <View className="h-screen bg-gray-100 flex flex-col">
        {/* Navbar导航栏 - TabBar页面无返回按钮 */}
        <Navbar
          title="考勤记录"
          leftIcon=""
          leftText=""
          onClickLeft={() => {}}
          backgroundColor="bg-white"
          border={true}
          fixed={true}
          placeholder={true}
        />

        {/* 页面内容 */}
        <View className="flex-1 overflow-y-auto pb-16">
          {/* 月份选择器 */}
          <MonthSelector
            currentMonth={currentMonthDisplay}
            onPreviousMonth={handlePreviousMonth}
            onNextMonth={handleNextMonth}
            onMonthChange={handleMonthChange}
          />

          {/* 考勤统计卡片 */}
          <AttendanceStats stats={stats} />

          {/* 考勤日历 */}
          <AttendanceCalendar
            year={currentYear}
            month={currentMonth}
            attendanceRecords={records}
          />

          {/* 打卡明细列表 */}
          <AttendanceDetails records={records} />
        </View>
      </View>
    </RencaiTabBarLayout>
  )
}

export default AttendancePage
