/**
 * 考勤日历组件
 * 显示当前月份的日历视图，标记打卡状态
 */
import React from 'react'
import { View, Text } from '@tarojs/components'
import { AttendanceCalendarProps } from '../types/attendance'

/**
 * 获取指定月份的日期网格
 */
function getCalendarDates(year: number, month: number): (Date | null)[] {
  const dates: (Date | null)[] = []
  const firstDay = new Date(year, month - 1, 1)
  const lastDay = new Date(year, month, 0)
  const firstDayOfWeek = firstDay.getDay()
  const daysInMonth = lastDay.getDate()

  // 填充月初空白
  for (let i = 0; i < firstDayOfWeek; i++) {
    dates.push(null)
  }

  // 填充日期
  for (let day = 1; day <= daysInMonth; day++) {
    dates.push(new Date(year, month - 1, day))
  }

  return dates
}

/**
 * 判断是否为周末
 */
function isWeekend(date: Date): boolean {
  const day = date.getDay()
  return day === 0 || day === 6
}

/**
 * 格式化日期为 YYYY-MM-DD
 */
function formatDate(date: Date): string {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

/**
 * 检查日期是否有打卡记录
 */
function hasAttendanceRecord(date: Date, records: any[]): boolean {
  const dateStr = formatDate(date)
  return records.some(r => r.date === dateStr && r.checkInTime !== '--:--')
}

export const AttendanceCalendar: React.FC<AttendanceCalendarProps> = ({
  year,
  month,
  attendanceRecords
}) => {
  const dates = getCalendarDates(year, month)

  return (
    <View className="bg-white rounded-lg p-4 mb-4 mx-4 flex flex-col">
      <Text className="font-semibold text-gray-700 mb-3 text-base">考勤日历</Text>

      {/* 星期标题 */}
      <View className="grid grid-cols-7 gap-1 mb-2">
        <View className="text-center text-xs text-gray-500"><Text>日</Text></View>
        <View className="text-center text-xs text-gray-500"><Text>一</Text></View>
        <View className="text-center text-xs text-gray-500"><Text>二</Text></View>
        <View className="text-center text-xs text-gray-500"><Text>三</Text></View>
        <View className="text-center text-xs text-gray-500"><Text>四</Text></View>
        <View className="text-center text-xs text-gray-500"><Text>五</Text></View>
        <View className="text-center text-xs text-gray-500"><Text>六</Text></View>
      </View>

      {/* 日期网格 */}
      <View className="grid grid-cols-7 gap-1">
        {dates.map((date, index) => {
          if (!date) {
            return <View key={`empty-${index}`} className="p-2" />
          }

          const attended = hasAttendanceRecord(date, attendanceRecords)
          const weekend = isWeekend(date)

          return (
            <View
              key={date.toISOString()}
              className={`
                text-center
                p-2
                rounded-full
                ${attended ? 'bg-green-500' : 'bg-gray-200'}
                ${weekend && !attended ? 'text-gray-400' : ''}
              `}
            >
              <Text className={`text-sm ${attended ? 'text-white' : ''}`}>
                {date.getDate()}
              </Text>
            </View>
          )
        })}
      </View>
    </View>
  )
}
