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 './customerDetailHeader.styles';
import { CustomerDetailHeaderProps } from './customerDetailHeader.props';
import { getInitials, formatDate } from '@utils';

export const CustomerDetailHeader: React.FC<CustomerDetailHeaderProps> = ({
  company,
  fullname,
  active,
  datecreated,
  email,
  phonenumber,
  website,
  onEmailPress,
  onPhonePress,
  onWebsitePress,
}) => {
  const { theme: colors } = useTheme();
  const styles = getStyles(colors);

  const displayName = company || fullname || 'Customer';
  const initials = getInitials(displayName);

  return (
    <View style={styles.card}>
      {/* Top Row: Avatar + Info + Active Badge */}
      <View style={styles.topRow}>
        <View style={styles.avatarCircle}>
          <Text style={styles.avatarInitial}>{initials}</Text>
        </View>

        <View style={styles.info}>
          <Text style={styles.name} numberOfLines={1}>{displayName}</Text>
          {fullname && company ? (
            <Text style={styles.company} numberOfLines={1}>{fullname}</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>
          {datecreated ? (
            <Text style={styles.dateText} numberOfLines={1}>
              Added {formatDate(datecreated)}
            </Text>
          ) : null}
        </View>

        <View
          style={[
            styles.statusBadge,
            active === '1' ? styles.activeBadge : styles.inactiveBadge,
          ]}>
          <Text
            style={[
              styles.statusText,
              active === '1' ? styles.activeText : styles.inactiveText,
            ]}>
            {active === '1' ? 'Active' : 'Inactive'}
          </Text>
        </View>
      </View>

      {/* Bottom Row: Action Buttons */}
      <View style={styles.actionRow}>
        {phonenumber ? (
          <TouchableOpacity
            style={[styles.actionBtn, styles.primaryBtn]}
            onPress={onPhonePress}>
            <Icon name="call" size={14} color="#FFFFFF" />
            <Text style={styles.primaryBtnText}>Call</Text>
          </TouchableOpacity>
        ) : null}

        {email ? (
          <TouchableOpacity
            style={[styles.actionBtn, styles.secondaryBtn]}
            onPress={onEmailPress}>
            <Icon name="mail" size={14} color={colors.textSecondary} />
            <Text style={styles.secondaryBtnText}>Email</Text>
          </TouchableOpacity>
        ) : null}

        {website ? (
          <TouchableOpacity
            style={[styles.actionBtn, styles.secondaryBtn]}
            onPress={onWebsitePress}>
            <Icon name="globe" size={14} color={colors.textSecondary} />
            <Text style={styles.secondaryBtnText}>Website</Text>
          </TouchableOpacity>
        ) : null}
      </View>
    </View>
  );
};