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 './leadItemCard.styles';
import { LeadItemCardProps } from './leadItemCard.props';
import { getInitials, handleEmailPress, handlePhonePress } from '@utils';

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

  return (
    <TouchableOpacity
      style={styles.card}
      onPress={onPress}
      activeOpacity={0.7}>
      {/* Left side - Avatar/Initials */}
      <View style={[styles.avatarContainer, { backgroundColor: item.color || '#1565C0' }]}>
        <Text style={styles.avatarText}>{getInitials(item.name)}</Text>
      </View>

      {/* Right side - Content */}
      <View style={styles.contentContainer}>
        {/* Name and Status Row */}
        <View style={styles.headerRow}>
          <Text style={styles.name} numberOfLines={1}>
            {item.name || 'No Name'}
          </Text>
          <View
            style={[
              styles.statusBadge,
              { backgroundColor: `${item.color || '#6B7280'}20` },
            ]}>
            <Text
              style={[
                styles.statusText,
                { color: item.color || '#6B7280' },
              ]}>
              {item.status_name || item.status || 'No Status'}
            </Text>
          </View>
        </View>

        {/* Email Row */}
        {item.email ? (
          <View style={styles.contactRow}>
            <Text style={styles.contactText} numberOfLines={1}>
              {item.email}
            </Text>
            <TouchableOpacity
              style={styles.contactIconButton}
              onPress={() => handleEmailPress(item.email)}
              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
              <Icon name="mail" size={20} color={colors.icon} />
            </TouchableOpacity>
          </View>
        ) : null}

        {/* Phone Row */}
        {item.phonenumber ? (
          <View style={styles.contactRow}>
            <Text style={styles.contactText} numberOfLines={1}>
              {item.phonenumber}
            </Text>
            <TouchableOpacity
              style={styles.contactIconButton}
              onPress={() => handlePhonePress(item.phonenumber)}
              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
              <Icon name="call" size={20} color={colors.icon} />
            </TouchableOpacity>
          </View>
        ) : null}
      </View>
    </TouchableOpacity>
  );
};