digital-pilates/components/TaskCard.tsx

import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import { TaskListItem } from '@/types/goals';
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
import React from 'react';
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

interface TaskCardProps {
  task: TaskListItem;
  onPress?: (task: TaskListItem) => void;
  onComplete?: (task: TaskListItem) => void;
  onSkip?: (task: TaskListItem) => void;
}

export const TaskCard: React.FC<TaskCardProps> = ({
  task,
  onPress,
  onComplete,
  onSkip,
}) => {
  const theme = useColorScheme() ?? 'light';
  const colorTokens = Colors[theme];

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'completed':
        return '#10B981';
      case 'in_progress':
        return '#F59E0B';
      case 'overdue':
        return '#EF4444';
      case 'skipped':
        return '#6B7280';
      default:
        return '#3B82F6';
    }
  };

  const getStatusText = (status: string) => {
    switch (status) {
      case 'completed':
        return '已完成';
      case 'in_progress':
        return '进行中';
      case 'overdue':
        return '已过期';
      case 'skipped':
        return '已跳过';
      default:
        return '待开始';
    }
  };

  const getPriorityColor = (status: string) => {
    switch (status) {
      case 'overdue':
        return '#EF4444'; // High - 过期任务
      case 'in_progress':
        return '#F59E0B'; // Medium - 进行中
      case 'completed':
        return '#10B981'; // Low - 已完成
      default:
        return '#6B7280'; // Default - 待开始
    }
  };

  const getPriorityText = (status: string) => {
    switch (status) {
      case 'overdue':
        return '高';
      case 'in_progress':
        return '中';
      case 'completed':
        return '低';
      default:
        return '';
    }
  };



  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    const month = date.toLocaleDateString('zh-CN', { month: 'short' });
    const day = date.getDate();
    return `${day} ${month}`;
  };

  return (
    <TouchableOpacity
      style={[styles.container, { backgroundColor: colorTokens.background }]}
      onPress={() => onPress?.(task)}
      activeOpacity={0.7}
    >
      {/* 头部区域 */}
      <View style={styles.header}>
        <View style={styles.titleSection}>
          <View style={styles.iconContainer}>
            <Image
              source={require('@/assets/images/task/iconTaskHeader.png')}
              style={styles.taskIcon}
              resizeMode="contain"
            />
          </View>
          <Text style={[styles.title, { color: colorTokens.text }]} numberOfLines={2}>
            {task.title}
          </Text>
        </View>
      </View>

      {/* 状态和优先级标签 */}
      <View style={styles.tagsContainer}>
        <View style={styles.statusTag}>
          <MaterialIcons name="schedule" size={12} color="#6B7280" />
          <Text style={styles.statusTagText}>{getStatusText(task.status)}</Text>
        </View>
        <View style={[styles.priorityTag, { backgroundColor: getPriorityColor(task.status) }]}>
          <MaterialIcons name="flag" size={12} color="#FFFFFF" />
          <Text style={styles.priorityTagText}>{getPriorityText(task.status)}</Text>
        </View>
      </View>

      {/* 进度条 */}
      <View style={styles.progressBar}>
        <View
          style={[
            styles.progressFill,
            {
              width: `${Math.min(task.progressPercentage, 100)}%`,
              backgroundColor: colorTokens.primary,
            },
          ]}
        />
      </View>

      {/* 底部信息 */}
      <View style={styles.footer}>
        <View style={styles.teamSection}>
          {/* 模拟团队成员头像 */}
          <View style={styles.avatars}>
            <View style={[styles.avatar, { backgroundColor: '#FBBF24' }]}>
              <Text style={styles.avatarText}>A</Text>
            </View>
            <View style={[styles.avatar, { backgroundColor: '#34D399' }]}>
              <Text style={styles.avatarText}>B</Text>
            </View>
            <View style={[styles.avatar, { backgroundColor: '#60A5FA' }]}>
              <Text style={styles.avatarText}>C</Text>
            </View>
          </View>
        </View>

        <View style={styles.infoSection}>
          <View style={styles.infoTag}>
            <MaterialIcons name="event" size={12} color="#6B7280" />
            <Text style={styles.infoTagText}>{formatDate(task.startDate)}</Text>
          </View>
          <View style={styles.infoTag}>
            <MaterialIcons name="chat-bubble-outline" size={12} color="#6B7280" />
            <Text style={styles.infoTagText}>2</Text>
          </View>
        </View>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 16,
    borderRadius: 12,
    marginBottom: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  header: {
    marginBottom: 12,
  },
  titleSection: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  iconContainer: {
    width: 32,
    height: 32,
    borderRadius: 16,
    backgroundColor: '#7A5AF8',
    alignItems: 'center',
    justifyContent: 'center',
    flexShrink: 0,
  },
  taskIcon: {
    width: 20,
    height: 20,
  },
  title: {
    fontSize: 16,
    fontWeight: '600',
    lineHeight: 22,
    flex: 1,
  },
  tagsContainer: {
    flexDirection: 'row',
    gap: 8,
    marginBottom: 12,
  },
  statusTag: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 12,
    backgroundColor: '#F3F4F6',
  },
  statusTagText: {
    fontSize: 12,
    fontWeight: '500',
    color: '#374151',
  },
  priorityTag: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 12,
  },
  priorityTagText: {
    fontSize: 12,
    fontWeight: '500',
    color: '#FFFFFF',
  },
  progressBar: {
    height: 2,
    backgroundColor: '#E5E7EB',
    borderRadius: 1,
    marginBottom: 16,
    overflow: 'hidden',
  },
  progressFill: {
    height: '100%',
    borderRadius: 1,
  },
  footer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  teamSection: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  avatars: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  avatar: {
    width: 24,
    height: 24,
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: -8,
    borderWidth: 2,
    borderColor: '#FFFFFF',
  },
  avatarText: {
    fontSize: 10,
    fontWeight: '600',
    color: '#FFFFFF',
  },
  infoSection: {
    flexDirection: 'row',
    gap: 8,
  },
  infoTag: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 12,
    backgroundColor: '#F3F4F6',
  },
  infoTagText: {
    fontSize: 12,
    fontWeight: '500',
    color: '#374151',
  },
});