import React from 'react';
import { StyleSheet, TouchableOpacity, View, Image } from 'react-native';
import CustomText from '@/components/common/CustomText.jsx';
import { wp } from '@/utils/ui/screenUtils';
import { useClockInStore } from '@/stores/clockIn';
import { useTranslation } from 'react-i18next';
import CustomAvatar from '@/components/ui/CustomAvatar';
import { useAppStore } from '@/stores';
/**
 * 用户信息卡片组件
 * @param {object} userInfo - 用户信息对象
 * @param {function} onStatisticsPress - 点击统计按钮的回调
 */
const UserInfoCard = ({ userInfo, onStatisticsPress }) => {
  const primaryColor = useAppStore(s => s.primary);
  const { workingTimeResult, actionTypeResult } = useClockInStore();
  const { t } = useTranslation('attendance');
  return (
    <View 
      style={styles.card}
    >
      {/* 用户头像 */}
      <CustomAvatar 
        avatar={userInfo?.Avatar}
        avatarKey={userInfo?.ID}
        style={styles.avatar}
        size={wp(48)}
        onError={(error) => console.log('头像加载失败:', error)}
      />
      
      {/* 用户信息 */}
      <View>
        <View style={styles.nameRow}>
          <CustomText style={{ color: '#1A1A1A', fontSize: wp(16) }}>{userInfo?.NickName || t('user')}</CustomText>
          <View 
            style={{ width: wp(1), height: wp(15), backgroundColor: '#F1F1F1', marginHorizontal: wp(7) }}
          />
          <Image 
            style={{ width: wp(17), height: wp(16) }} 
            source={
              actionTypeResult?.isWorkDay === 1
                ? require('@/assets/images/icon/zu5895.png')
                : require('@/assets/images/clockIn/xjds.png')
            }
          />
        </View>
        <View>
          <CustomText style={{ color: '#A3A3A3', fontSize: wp(12) }}>{workingTimeResult?.WorkTimeTemplateName}</CustomText>
        </View>
      </View>
      
      {/* 统计按钮 */}
      <TouchableOpacity 
        style={styles.statsBtn}
        onPress={onStatisticsPress}
      >
        <View style={styles.statsContent}>
          <Image 
            style={{ width: wp(24), height: wp(24), marginBottom: wp(5) }} 
            source={require('@/assets/images/icon/statistics.png')}
          />
          <CustomText style={{ fontSize: wp(12), color: primaryColor }}>{t('btnText.statistics')}</CustomText>
        </View>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    width: '100%',
    height: wp(77),
    backgroundColor: '#fff',
    alignItems: 'center',
    paddingRight: wp(10),
    paddingLeft: wp(10),
    marginBottom: wp(10),
    borderRadius: wp(4),
    flexDirection: 'row',
  },
  avatar: {

    marginRight: wp(10),
  },
  nameRow: {
    marginBottom: wp(7),
    flexDirection: 'row',
    alignItems: 'center',
  },
  statsBtn: {
    marginLeft: 'auto',
  },
  statsContent: {
    alignItems: 'center',
  },
});

export default UserInfoCard;
