import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { useTheme } from '../../theme';
import { getStyles } from './customerItemCard.styles';
import { CustomerItemCardProps } from './customerItemCard.props';
import { handlePhonePress, handleEmailPress, getInitials } from '@utils';

export const CustomerItemCard: React.FC<CustomerItemCardProps> = ({
  item,
  onPress,
  onDelete,
}) => {
  const { theme: colors } = useTheme();
  const styles = getStyles(colors);

  const displayName = item.company || item.fullname;
  const initials = getInitials(displayName);

  return (
    <TouchableOpacity
      activeOpacity={onPress ? 0.8 : 1}
      onPress={onPress}
      style={styles.customerCard}>
      <View style={styles.cardHeader}>
        <View style={styles.cardHeaderLeft}>
          <View style={styles.avatarCircle}>
            <Text style={styles.avatarInitial}>{initials}</Text>
          </View>
          <View style={styles.cardInfo}>
            <Text style={styles.customerName} numberOfLines={1}>
              {displayName}
            </Text>
            {item.fullname && item.company ? (
              <Text style={styles.contactPerson} numberOfLines={1}>
                {item.fullname}
              </Text>
            ) : null}
            {item.city || item.state ? (
              <Text style={styles.location} numberOfLines={1}>
                <Icon name="location-outline" size={11} color={colors.textMuted} />
                {'  '}{[item.city, item.state].filter(Boolean).join(', ')}
              </Text>
            ) : null}
          </View>
        </View>

        <View style={styles.cardHeaderRight}>
          <View
            style={[
              styles.badge,
              item.active === '1' ? styles.activeBadge : styles.inactiveBadge,
            ]}>
            <Text
              style={[
                styles.badgeText,
                item.active === '1' ? styles.activeBadgeText : styles.inactiveBadgeText,
              ]}>
              {item.active === '1' ? 'Active' : 'Inactive'}
            </Text>
          </View>
          {onDelete ? (
            <TouchableOpacity
              style={styles.deleteButton}
              onPress={onDelete}
              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
              activeOpacity={0.7}>
              <Icon name="trash-outline" size={18} color="#EF4444" />
            </TouchableOpacity>
          ) : null}
        </View>
      </View>


      <View style={styles.cardFooter}>
        <TouchableOpacity
          style={[styles.actionButton, styles.callButton]}
          onPress={() => handlePhonePress(item.phonenumber)}>
          <Icon name="call" size={15} color={colors.icon} />
          <Text style={styles.callButtonText}>Call</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={[styles.actionButton, styles.emailButton]}
          onPress={() => handleEmailPress(item.email)}>
          <Icon name="mail" size={15} color={colors.textSecondary} />
          <Text style={styles.emailButtonText}>Email</Text>
        </TouchableOpacity>
      </View>
    </TouchableOpacity>
  );
};