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

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

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <View style={styles.searchWrapper}>
          <Icon
            name="search-outline"
            size={20}
            color={colors.textSecondary}
            style={styles.searchIcon}
          />
          <TextInput
            style={styles.searchInput}
            placeholder="Search leads, companies..."
            placeholderTextColor={colors.textMuted}
          />
        </View>
        <TouchableOpacity style={styles.filterButton}>
          <Icon name="filter-outline" size={20} color={colors.text} />
        </TouchableOpacity>
      </View>

      <FlatList
        data={MOCK_LEADS}
        keyExtractor={item => item.id}
        contentContainerStyle={styles.listContent}
        renderItem={({ item }) => (
          <View style={styles.leadCard}>
            <View style={styles.cardHeader}>
              <View>
                <Text style={styles.leadName}>{item.name}</Text>
                <Text style={styles.leadCompany}>{item.company}</Text>
              </View>
              <View
                style={[
                  styles.statusBadge,
                  { backgroundColor: `${item.color}15` },
                ]}
              >
                <Text style={[styles.statusText, { color: item.color }]}>
                  {item.status}
                </Text>
              </View>
            </View>
            <View style={styles.cardFooter}>
              <View style={styles.infoRow}>
                <Icon
                  name="mail-outline"
                  size={16}
                  color={colors.textSecondary}
                />
                <Text style={styles.infoValue}>{item.email}</Text>
              </View>
              <TouchableOpacity style={styles.actionButton}>
                <Icon name="chevron-forward" size={18} color={colors.icon} />
              </TouchableOpacity>
            </View>
          </View>
        )}
      />
    </View>
  );
};