import React from 'react';
import { Text, View, FlatList, TouchableOpacity, Linking } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { getStyles } from './customers.styles';
import { MOCK_CUSTOMERS } from '../../mock-data/customers';
import { useTheme } from '../../theme';

export const CustomersScreen = () => {
  const { theme: colors } = useTheme();
  const styles = getStyles(colors);

  const handleCall = (phone: string) => {
    Linking.openURL(`tel:${phone}`).catch(() => {});
  };

  const handleEmail = (email: string) => {
    Linking.openURL(`mailto:${email}`).catch(() => {});
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={MOCK_CUSTOMERS}
        keyExtractor={item => item.id}
        contentContainerStyle={styles.listContent}
        renderItem={({ item }) => (
          <View style={styles.customerCard}>
            <View style={styles.cardHeader}>
              <View>
                <Text style={styles.customerName}>{item.name}</Text>
                <Text style={styles.contactPerson}>
                  Contact: {item.contactPerson}
                </Text>
              </View>
              <View style={styles.badge}>
                <Text style={styles.badgeText}>
                  {item.activeProjects} active projects
                </Text>
              </View>
            </View>

            <View style={styles.cardFooter}>
              <TouchableOpacity
                style={[styles.actionButton, styles.callButton]}
                onPress={() => handleCall(item.phone)}
              >
                <Icon name="call" size={16} color={colors.icon} />
                <Text style={styles.callButtonText}>Call</Text>
              </TouchableOpacity>

              <TouchableOpacity
                style={[styles.actionButton, styles.emailButton]}
                onPress={() => handleEmail(item.email)}
              >
                <Icon name="mail" size={16} color={colors.textSecondary} />
                <Text style={styles.emailButtonText}>Email</Text>
              </TouchableOpacity>
            </View>
          </View>
        )}
      />
    </View>
  );
};