import type { Colors } from '@/constants/Colors';
import { Ionicons } from '@expo/vector-icons';
import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

export interface InfoCardProps {
  label: string;
  value: string;
  icon: keyof typeof Ionicons.glyphMap;
  colors: (typeof Colors)[keyof typeof Colors];
  onPress?: () => void;
  clickable?: boolean;
}

export const InfoCard: React.FC<InfoCardProps> = ({
  label,
  value,
  icon,
  colors,
  onPress,
  clickable = false,
}) => {
  // 渲染图标 - 始终使用普通 View
  const renderIcon = () => {
    return (
      <View style={[
        styles.infoCardIcon,
        clickable && styles.clickableIconFallback
      ]}>
        <Ionicons name={icon} size={16} color="#4C6EF5" />
      </View>
    );
  };

  // 渲染箭头 - 只在可点击时显示
  const renderArrow = () => {
    if (!clickable) return null;

    return (
      <View style={styles.infoCardArrow}>
        <Ionicons name="chevron-forward" size={16} color={colors.textMuted} />
      </View>
    );
  };

  // 卡片内容
  const cardContent = (
    <View style={[
      styles.infoCard,
      { backgroundColor: colors.surface || '#fff' }
    ]}>
      {renderArrow()}
      {renderIcon()}
      <Text style={[styles.infoCardLabel, { color: colors.textSecondary }]}>{label}</Text>
      <Text style={[styles.infoCardValue, { color: colors.text }]}>{value}</Text>
    </View>
  );

  // 如果可点击且有onPress回调，使用TouchableOpacity包装
  if (clickable && onPress) {
    return (
      <TouchableOpacity
        style={styles.container}
        onPress={onPress}
        activeOpacity={0.7}
      >
        {cardContent}
      </TouchableOpacity>
    );
  }
  
  // 不可点击的版本
  return (
    <View style={styles.container}>
      {cardContent}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  infoCard: {
    flex: 1,
    borderRadius: 20,
    padding: 16,
    backgroundColor: '#FFFFFF',
    gap: 6,
    shadowColor: '#000',
    shadowOpacity: 0.06,
    shadowRadius: 12,
    shadowOffset: { width: 0, height: 3 },
    elevation: 3,
    position: 'relative',
    borderWidth: 1,
    borderColor: 'rgba(0, 0, 0, 0.04)',
  },
  infoCardArrow: {
    position: 'absolute',
    top: 12,
    right: 12,
    zIndex: 1,
    width: 24,
    height: 24,
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
  },
  infoCardIcon: {
    width: 28,
    height: 28,
    borderRadius: 14,
    backgroundColor: '#EEF1FF',
    alignItems: 'center',
    justifyContent: 'center',
  },
  clickableIconFallback: {
    borderWidth: 1,
    borderColor: 'rgba(76, 110, 245, 0.3)',
  },
  infoCardLabel: {
    fontSize: 13,
    color: '#6B7280',
    marginTop: 8,
  },
  infoCardValue: {
    fontSize: 16,
    fontWeight: '600',
    color: '#1F2933',
  },
});

export default InfoCard;