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 './leadDetailHeader.styles';
import { LeadDetailHeaderProps } from './leadDetailHeader.props';

export const LeadDetailHeader: React.FC<LeadDetailHeaderProps> = ({
  name,
  company,
  email,
  phonenumber,
  statusName,
  statusColor,
  avatarColor,
  onStatusPress,
  onEmailPress,
  onPhonePress,
}) => {
  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();
  };

  return (
    <View style={styles.container}>
      {/* Avatar */}
      <View
        style={[
          styles.avatar,
          { backgroundColor: avatarColor || statusColor || '#1565C0' },
        ]}>
        <Text style={styles.avatarText}>{getInitials(name)}</Text>
      </View>

      {/* Name and Status Row */}
      <View style={styles.nameRow}>
        <Text style={styles.name}>{name || 'No Name'}</Text>
        <TouchableOpacity
          onPress={onStatusPress}
          activeOpacity={onStatusPress ? 0.7 : 1}
          disabled={!onStatusPress}>
          <View
            style={[
              styles.statusBadge,
              { backgroundColor: `${statusColor || '#6B7280'}20` },
            ]}>
            <Text
              style={[
                styles.statusText,
                { color: statusColor || '#6B7280' },
              ]}>
              {statusName || 'No Status'}
            </Text>
          </View>
        </TouchableOpacity>
      </View>

      {/* Company */}
      {company && <Text style={styles.company}>{company}</Text>}

      {/* Email Row */}
      {email && (
        <View style={styles.contactRow}>
          <Text style={styles.contactLabel}>Email:</Text>
          <Text style={styles.contactText}>{email}</Text>
          {onEmailPress && (
            <TouchableOpacity
              style={styles.iconButton}
              onPress={onEmailPress}
              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
              <Icon name="send" size={18} color={colors.icon} />
            </TouchableOpacity>
          )}
        </View>
      )}

      {/* Phone Row */}
      {phonenumber && (
        <View style={styles.contactRow}>
          <Text style={styles.contactLabel}>Phone:</Text>
          <Text style={styles.contactText}>{phonenumber}</Text>
          {onPhonePress && (
            <TouchableOpacity
              style={styles.iconButton}
              onPress={onPhonePress}
              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
              <Icon name="call" size={18} color={colors.icon} />
            </TouchableOpacity>
          )}
        </View>
      )}
    </View>
  );
};