import React, { useState } from 'react';
import {
  Text,
  View,
  TextInput,
  TouchableOpacity,
  ScrollView,
  KeyboardAvoidingView,
  Platform,
  Alert,
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { getStyles } from './addLead.styles';
import { useTheme } from '../../theme';

export const AddLeadScreen = () => {
  const { theme: colors } = useTheme();
  const styles = getStyles(colors);
  const [name, setName] = useState('');
  const [company, setCompany] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [value, setValue] = useState('');

  const handleSubmit = () => {
    if (!name.trim() || !company.trim() || !email.trim()) {
      Alert.alert('Error', 'Please fill in Name, Company, and Email fields.');
      return;
    }

    Alert.alert(
      'Success',
      `Lead "${name}" for "${company}" has been created!`,
      [
        {
          text: 'OK',
          onPress: () => {
            setName('');
            setCompany('');
            setEmail('');
            setPhone('');
            setValue('');
          },
        },
      ],
    );
  };

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={styles.container}
    >
      <ScrollView
        contentContainerStyle={styles.scrollContainer}
        keyboardShouldPersistTaps="handled"
      >
        <View style={styles.formCard}>
          <Text style={styles.sectionHeader}>Lead Information</Text>

          {/* Name Field */}
          <View style={styles.inputContainer}>
            <Text style={styles.label}>Lead Name *</Text>
            <View style={styles.inputWrapper}>
              <Icon
                name="person-outline"
                size={18}
                color={colors.textSecondary}
                style={styles.inputIcon}
              />
              <TextInput
                style={styles.input}
                placeholder="John Doe"
                placeholderTextColor={colors.textMuted}
                value={name}
                onChangeText={setName}
              />
            </View>
          </View>

          {/* Company Field */}
          <View style={styles.inputContainer}>
            <Text style={styles.label}>Company *</Text>
            <View style={styles.inputWrapper}>
              <Icon
                name="business-outline"
                size={18}
                color={colors.textSecondary}
                style={styles.inputIcon}
              />
              <TextInput
                style={styles.input}
                placeholder="Acme Corp"
                placeholderTextColor={colors.textMuted}
                value={company}
                onChangeText={setCompany}
              />
            </View>
          </View>

          {/* Email Field */}
          <View style={styles.inputContainer}>
            <Text style={styles.label}>Email Address *</Text>
            <View style={styles.inputWrapper}>
              <Icon
                name="mail-outline"
                size={18}
                color={colors.textSecondary}
                style={styles.inputIcon}
              />
              <TextInput
                style={styles.input}
                placeholder="johndoe@acme.com"
                placeholderTextColor={colors.textMuted}
                keyboardType="email-address"
                autoCapitalize="none"
                value={email}
                onChangeText={setEmail}
              />
            </View>
          </View>

          {/* Phone Field */}
          <View style={styles.inputContainer}>
            <Text style={styles.label}>Phone Number</Text>
            <View style={styles.inputWrapper}>
              <Icon
                name="call-outline"
                size={18}
                color={colors.textSecondary}
                style={styles.inputIcon}
              />
              <TextInput
                style={styles.input}
                placeholder="+1 (555) 000-0000"
                placeholderTextColor={colors.textMuted}
                keyboardType="phone-pad"
                value={phone}
                onChangeText={setPhone}
              />
            </View>
          </View>

          {/* Deal Value Field */}
          <View style={styles.inputContainer}>
            <Text style={styles.label}>Estimated Value ($)</Text>
            <View style={styles.inputWrapper}>
              <Icon
                name="cash-outline"
                size={18}
                color={colors.textSecondary}
                style={styles.inputIcon}
              />
              <TextInput
                style={styles.input}
                placeholder="5,000"
                placeholderTextColor={colors.textMuted}
                keyboardType="numeric"
                value={value}
                onChangeText={setValue}
              />
            </View>
          </View>

          <TouchableOpacity
            style={styles.submitButton}
            activeOpacity={0.8}
            onPress={handleSubmit}
          >
            <Icon
              name="checkmark"
              size={20}
              color="#FFFFFF"
              style={styles.buttonIcon}
            />
            <Text style={styles.submitButtonText}>Create New Lead</Text>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </KeyboardAvoidingView>
  );
};