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';
import { getInitials, toRgba } from '@utils';

export const LeadDetailHeader: React.FC<LeadDetailHeaderProps> = ({
  name,
  company,
  email,
  phonenumber,
  statusName,
  statusColor,
  avatarColor,
  onStatusPress,
  onEmailPress,
  onPhonePress,
}) => {
  const { theme: colors, isDark } = useTheme();
  const styles = getStyles(colors);

  const accent = statusColor || avatarColor || '#5B4CF5';
  const badgeBg = toRgba(accent, isDark ? 0.20 : 0.12);

  return (
    <View style={styles.card}>
      {/* Top Row: Avatar + Info + Status */}
      <View style={styles.topRow}>
        <View style={[styles.avatar, { backgroundColor: accent }]}>
          <Text style={styles.avatarText}>{getInitials(name)}</Text>
        </View>

        <View style={styles.info}>
          <Text style={styles.name} numberOfLines={1}>{name || 'No Name'}</Text>
          {company ? (
            <Text style={styles.company} numberOfLines={1}>{company}</Text>
          ) : null}
          <Text style={styles.contact} numberOfLines={1}>
            <Icon name="call-outline" size={10} color={colors.textMuted} />
            {' '}{phonenumber || 'N/A'}{'   '}
            <Icon name="mail-outline" size={10} color={colors.textMuted} />
            {' '}{email || 'N/A'}
          </Text>
        </View>

        <TouchableOpacity
          onPress={onStatusPress}
          activeOpacity={onStatusPress ? 0.7 : 1}
          disabled={!onStatusPress}>
          <View style={[styles.statusBadge, { backgroundColor: badgeBg }]}>
            <View style={[styles.statusDot, { backgroundColor: accent }]} />
            <Text style={[styles.statusText, { color: accent }]}>
              {statusName || 'No Status'}
            </Text>
          </View>
        </TouchableOpacity>
      </View>

      {/* Bottom Row: Call + Email Buttons */}
      <View style={styles.actionRow}>
        <TouchableOpacity
          style={[styles.actionBtn, { backgroundColor: `${accent}12`, borderColor: `${accent}30` }]}
          onPress={onPhonePress}>
          <Icon name="call" size={14} color={accent} />
          <Text style={[styles.btnText, { color: accent }]}>Call</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[styles.actionBtn, styles.secondaryBtn]}
          onPress={onEmailPress}>
          <Icon name="mail" size={14} color={colors.textSecondary} />
          <Text style={[styles.btnText, { color: colors.textSecondary }]}>Email</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};