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, formatDate } from '@utils';

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

  const displayName = item.name || 'No Name';
  const initials = getInitials(displayName);
  const accent = item.color?.startsWith('#') ? item.color : colors.icon;

  return (
    <TouchableOpacity
      activeOpacity={onPress ? 0.8 : 1}
      onPress={onPress}
      style={styles.customerCard}>
      <View style={styles.cardHeader}>
        <View style={styles.cardHeaderLeft}>
          <View style={[styles.avatarCircle, { backgroundColor: accent }]}>
            <Text style={styles.avatarInitial}>{initials}</Text>
          </View>
          <View style={styles.cardInfo}>
            <Text style={styles.customerName} numberOfLines={1}>
              {displayName}
            </Text>
            {item.company ? (
              <Text style={styles.contactPerson} numberOfLines={1}>
                {item.company}
              </Text>
            ) : null}
            <Text style={styles.location} numberOfLines={1}>
              <Icon name="call-outline" size={11} color={colors.textMuted} />
              {'  '}{item.phonenumber || 'N/A'}{'  •  '}
              <Icon name="mail-outline" size={11} color={colors.textMuted} />
              {'  '}{item.email || 'N/A'}
            </Text>
            {item.source_name || item.source || item.dateadded ? (
              <Text style={styles.location} numberOfLines={1}>
                {item.source_name || item.source ? (
                  <>
                    <Icon name="radio-outline" size={11} color={colors.textMuted} />
                    {'  '}{item.source_name || item.source}
                  </>
                ) : null}
                {item.dateadded ? ` • ${formatDate(item.dateadded)}` : ''}
              </Text>
            ) : null}
          </View>
        </View>

        <View style={styles.cardHeaderRight}>
          {item.status_name || item.status ? (
            <View style={[styles.badge, { backgroundColor: `${accent}15` }]}>
              <Text style={[styles.badgeText, { color: accent }]}>
                {item.status_name || item.status}
              </Text>
            </View>
          ) : null}
        </View>
      </View>

      <View style={styles.cardFooter}>
        <TouchableOpacity
          style={[styles.actionButton, styles.callButton, { backgroundColor: `${accent}10` }]}
          onPress={() => handlePhonePress(item.phonenumber)}>
          <Icon name="call" size={15} color={accent} />
          <Text style={[styles.callButtonText, { color: accent }]}>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>
  );
};