import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  Linking,
  Platform,
} 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';

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

  // Get initials from name
  const getInitials = (name: string): string => {
    if (!name) return '?';
    const nameParts = name.trim().split(' ');
    if (nameParts.length >= 2) {
      return (nameParts[0][0] + nameParts[1][0]).toUpperCase();
    }
    return name.substring(0, 2).toUpperCase();
  };

  // Handle email press
  const handleEmailPress = () => {
    if (item.email) {
      Linking.openURL(`mailto:${item.email}`).catch(err =>
        console.error('Error opening email:', err),
      );
    }
  };

  // Handle phone press
  const handlePhonePress = () => {
    if (item.phonenumber) {
      const phoneUrl =
        Platform.OS === 'ios'
          ? `telprompt:${item.phonenumber}`
          : `tel:${item.phonenumber}`;
      Linking.openURL(phoneUrl).catch(err =>
        console.error('Error opening phone:', err),
      );
    }
  };

  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}
              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}
              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
              <Icon name="call" size={20} color={colors.icon} />
            </TouchableOpacity>
          </View>
        ) : null}
      </View>
    </TouchableOpacity>
  );
};