import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { AppColors } from '@/constants/theme';
import { Chapter } from '@/data/mockData';

interface ChapterItemProps {
  chapter: Chapter;
  onPress: () => void;
}

export function ChapterItem({ chapter, onPress }: ChapterItemProps) {
  const getStatusText = () => {
    switch (chapter.status) {
      case 'complete':
        return `已整理 · 约${chapter.pageCount}页`;
      case 'partial':
        return `部分整理 · 约${chapter.pageCount}页`;
      case 'pending':
        return '待补充';
    }
  };

  const isComplete = chapter.status === 'complete';

  return (
    <TouchableOpacity 
      style={styles.container} 
      onPress={onPress}
      activeOpacity={0.7}
    >
      <View style={styles.number}>
        <Text style={styles.numberText}>
          {chapter.number.toString().padStart(2, '0')}
        </Text>
      </View>
      
      <View style={styles.content}>
        <Text style={styles.title}>{chapter.title}</Text>
        <Text style={[styles.status, isComplete && styles.statusComplete]}>
          {getStatusText()}
        </Text>
      </View>
      
      <Ionicons 
        name="chevron-forward" 
        size={20} 
        color={AppColors.slatePurple} 
      />
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    backgroundColor: AppColors.white,
    borderRadius: 14,
    marginBottom: 12,
    shadowColor: AppColors.deepPurple,
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.04,
    shadowRadius: 8,
    elevation: 1,
  },
  number: {
    width: 32,
    height: 32,
    borderRadius: 10,
    backgroundColor: AppColors.lavender,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 14,
  },
  numberText: {
    fontSize: 14,
    fontWeight: '600',
    color: AppColors.deepPurple,
  },
  content: {
    flex: 1,
  },
  title: {
    fontSize: 15,
    fontWeight: '500',
    color: AppColors.deepPurple,
    marginBottom: 2,
  },
  status: {
    fontSize: 12,
    color: AppColors.slatePurple,
  },
  statusComplete: {
    color: AppColors.mediumPurple,
  },
});