import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { Task } from '../types/task';

interface TaskCardProps {
  task: Task;
  onPress: (id: string) => void;
}

const statusMap: { [key: number]: { text: string; color: string } } = {
  0: { text: '待机', color: '#9E9E9E' }, // Grey
  1: { text: '运行中', color: '#2196F3' }, // Blue
  2: { text: '完成', color: '#4CAF50' }, // Green
  3: { text: '失败', color: '#F44336' }, // Red
};

const TaskCard: React.FC<TaskCardProps> = ({ task, onPress }) => {
  const statusInfo = statusMap[task.status] || statusMap[0];

  return (
    <TouchableOpacity onPress={() => onPress(task.id)} style={styles.container}>
      <View style={styles.indicatorContainer}>
        <View
          style={[
            styles.statusIndicator,
            { backgroundColor: statusInfo.color },
          ]}
        />
      </View>
      <View style={styles.contentContainer}>
        <Text style={styles.title}>{task.label}</Text>
        <Text style={styles.description} numberOfLines={1}>
          {task.description || '暂无描述'}
        </Text>
      </View>
      <View style={styles.statusContainer}>
        <Text style={[styles.statusText, { color: statusInfo.color }]}>
          {statusInfo.text}
        </Text>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#1a1a1a',
    paddingVertical: 16,
    paddingHorizontal: 16,
  },
  indicatorContainer: {
    marginRight: 16,
  },
  statusIndicator: {
    width: 12,
    height: 12,
    borderRadius: 6,
  },
  contentContainer: {
    flex: 1,
  },
  title: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 4,
  },
  description: {
    color: '#999999',
    fontSize: 14,
  },
  statusContainer: {
    marginLeft: 16,
  },
  statusText: {
    fontSize: 14,
    fontWeight: 'bold',
  },
});

export default TaskCard;
