/**
 * 打卡记录项组件
 * 显示单条打卡记录的详细信息
 */
import React from 'react'
import { View, Text } from '@tarojs/components'
import { AttendanceRecordItemProps, AttendanceStatus } from '../types/attendance'

/**
 * 获取状态颜色
 */
function getStatusColor(status: AttendanceStatus): string {
  switch (status) {
    case AttendanceStatus.NORMAL:
      return 'bg-green-100 text-green-800'
    case AttendanceStatus.LATE:
      return 'bg-yellow-100 text-yellow-800'
    case AttendanceStatus.EARLY_LEAVE:
      return 'bg-orange-100 text-orange-800'
    case AttendanceStatus.ABSENT:
      return 'bg-red-100 text-red-800'
    default:
      return 'bg-gray-100 text-gray-800'
  }
}

/**
 * 获取状态标签
 */
function getStatusLabel(status: AttendanceStatus): string {
  switch (status) {
    case AttendanceStatus.NORMAL:
      return '正常'
    case AttendanceStatus.LATE:
      return '迟到'
    case AttendanceStatus.EARLY_LEAVE:
      return '早退'
    case AttendanceStatus.ABSENT:
      return '缺勤'
    default:
      return '未知'
  }
}

export const AttendanceRecordItem: React.FC<AttendanceRecordItemProps> = ({ record }) => {
  const statusColor = getStatusColor(record.status)
  const statusLabel = getStatusLabel(record.status)

  // 格式化日期显示
  const dateDisplay = formatChineseDate(record.date)

  return (
    <View className="flex justify-between items-center p-3 border border-gray-100 rounded-lg">
      {/* 左侧：日期和时间 */}
      <View className="flex flex-col">
        <Text className="text-sm font-medium text-gray-800">{dateDisplay} {record.weekday}</Text>
        <View className="flex text-xs text-gray-500 mt-1">
          <Text className="mr-3">上班: {record.checkInTime}</Text>
          <Text>下班: {record.checkOutTime}</Text>
        </View>
      </View>

      {/* 右侧：状态标签 */}
      <View className={`text-xs px-2 py-1 rounded-full ${statusColor}`}>
        <Text>{statusLabel}</Text>
      </View>
    </View>
  )
}

/**
 * 格式化日期为中文格式
 * @param dateStr YYYY-MM-DD格式日期
 * @returns 中文格式日期（如：11月25日）
 */
function formatChineseDate(dateStr: string): string {
  const date = new Date(dateStr)
  const month = date.getMonth() + 1
  const day = date.getDate()
  return `${month}月${day}日`
}
