import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Modal, FlatList, ActivityIndicator, TextInput, KeyboardAvoidingView } from 'react-native';
import { useSettings } from '@/theme';
import { useFriends } from '@/hooks/useFriends';

interface AssigneeSelectorProps {
  value: string | null;
  onChange: (assigneeId: string | null) => void;
  disabled?: boolean;
  friends: string[];
}

export function AssigneeSelector({ value, onChange, disabled = false }: AssigneeSelectorProps) {
  const { theme } = useSettings();
  const { friends, searchUsers, loading: friendsLoading } = useFriends();
  const [showModal, setShowModal] = React.useState(false);
  const [searchQuery, setSearchQuery] = React.useState('');
  const [searchResults, setSearchResults] = React.useState<{ id: string; username: string }[]>([]);
  const [searching, setSearching] = React.useState(false);

  const selectedFriend = value ? friends.find(f => f.id === value) : null;

  const searchKey = `${showModal}:${searchQuery}`;
  const [prevSearchKey, setPrevSearchKey] = React.useState(searchKey);

  if (prevSearchKey !== searchKey && (!showModal || searchQuery.length < 2)) {
    setPrevSearchKey(searchKey);
    setSearchResults([]);
  }

  React.useEffect(() => {
    if (showModal && searchQuery.length >= 2) {
      const timeout = setTimeout(async () => {
        setSearching(true);
        try {
          const results = await searchUsers(searchQuery);
          setSearchResults(results.filter(r => !friends.some(f => f.id === r.id)));
        } catch (err) {
          console.error('Search failed:', err);
        } finally {
          setSearching(false);
        }
      }, 300);
      return () => clearTimeout(timeout);
    }
  }, [searchQuery, showModal, friends, searchUsers]);

  const handleSelectFriend = (friendId: string) => {
    onChange(friendId);
    setShowModal(false);
  };

  const handleClear = () => {
    onChange(null);
  };

  const handleSearchAdd = async (friendId: string, username: string) => {
    try {
      const { sendFriendRequest } = await import('@/services/friends');
      await sendFriendRequest(username);
      onChange(friendId);
      setShowModal(false);
    } catch (err: any) {
      console.error('Failed to add friend:', err.message, err.details || '');
      if (err.details) {
        console.error('Validation details:', JSON.stringify(err.details, null, 2));
      }
    }
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={[
          styles.selectorButton,
          { backgroundColor: theme.inputBg, borderColor: theme.borderStrong },
          disabled && { opacity: 0.6 },
        ]}
        onPress={() => !disabled && setShowModal(true)}
        activeOpacity={0.8}
      >
        <Text style={[styles.selectorIcon, { color: theme.accentStrong }]}>👤</Text>
        <View style={styles.selectorContent}>
          <Text style={[styles.selectorLabel, { color: theme.textMuted }]}>Assignee</Text>
          <Text
            style={[
              styles.selectorValue,
              { color: value ? theme.text : theme.textMuted },
            ]}
          >
            {selectedFriend ? selectedFriend.username : 'Unassigned'}
          </Text>
        </View>
        {value && !disabled && (
          <TouchableOpacity
            style={styles.clearButton}
            onPress={(e) => {
              e.stopPropagation();
              handleClear();
            }}
            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
          >
            <Text style={[styles.clearText, { color: theme.textMuted }]}>✕</Text>
          </TouchableOpacity>
        )}
      </TouchableOpacity>

      <Modal visible={showModal} transparent animationType="fade" onRequestClose={() => setShowModal(false)}>
        <KeyboardAvoidingView
          style={[styles.modalOverlay, { backgroundColor: 'rgba(0,0,0,0.5)' }]}
          behavior="padding"
        >
          <View style={[styles.modalSheet, { backgroundColor: theme.sheetBg }]}>
            <View style={styles.modalHeader}>
              <Text style={[styles.modalTitle, { color: theme.text }]}>Assign Task</Text>
              <TouchableOpacity onPress={() => setShowModal(false)} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
                <Text style={[styles.closeText, { color: theme.textMuted }]}>✕</Text>
              </TouchableOpacity>
            </View>

            <View style={styles.modalSection}>
              <TouchableOpacity
                style={[
                  styles.optionRow,
                  { backgroundColor: selectedFriend ? theme.accentSoft : 'transparent', borderColor: selectedFriend ? theme.accent : 'transparent' },
                ]}
                onPress={() => handleClear()}
              >
                <View style={styles.optionIcon}>
                  <Text style={styles.optionIconText}>🚫</Text>
                </View>
                <Text style={[styles.optionText, { color: theme.text }]}>Unassigned</Text>
                {selectedFriend && (
                  <Text style={[styles.checkmark, { color: theme.accentStrong }]}>✓</Text>
                )}
              </TouchableOpacity>
            </View>

            <View style={styles.modalSection}>
              <Text style={[styles.sectionTitle, { color: theme.textMuted }]}>Friends</Text>
              {friendsLoading ? (
                <View style={styles.loading}>
                  <ActivityIndicator color={theme.accent} size="large" />
                </View>
              ) : friends.length === 0 ? (
                <Text style={[styles.emptyText, { color: theme.textFaint }]}>No friends yet. Add friends to assign tasks.</Text>
              ) : (
                <FlatList
                  data={friends}
                  keyExtractor={f => f.id}
                  renderItem={({ item }) => (
                    <TouchableOpacity
                      style={[
                        styles.optionRow,
                        { backgroundColor: value === item.id ? theme.accentSoft : 'transparent', borderColor: value === item.id ? theme.accent : 'transparent' },
                      ]}
                      onPress={() => handleSelectFriend(item.id)}
                    >
                      <View style={styles.optionIcon}>
                        <Text style={styles.optionIconText}>👤</Text>
                      </View>
                      <Text style={[styles.optionText, { color: theme.text }]}>{item.username}</Text>
                      {value === item.id && (
                        <Text style={[styles.checkmark, { color: theme.accentStrong }]}>✓</Text>
                      )}
                    </TouchableOpacity>
                  )}
                />
              )}
            </View>

            <View style={styles.modalSection}>
              <View style={styles.searchContainer}>
                <TextInput
                  style={[styles.searchInput, { backgroundColor: theme.inputBg, borderColor: theme.borderStrong, color: theme.text }]}
                  placeholder="Search users by username"
                  placeholderTextColor={theme.textMuted}
                  value={searchQuery}
                  onChangeText={setSearchQuery}
                  autoCapitalize="none"
                  autoCorrect={false}
                />
              </View>
              {searching ? (
                <View style={styles.loading}>
                  <ActivityIndicator color={theme.accent} size="large" />
                </View>
              ) : searchQuery.length >= 2 && searchResults.length > 0 ? (
                <FlatList
                  data={searchResults}
                  keyExtractor={u => u.id}
                  renderItem={({ item }) => (
                    <TouchableOpacity
                      style={styles.optionRow}
                      onPress={() => handleSearchAdd(item.id, item.username)}
                    >
                      <View style={styles.optionIcon}>
                        <Text style={styles.optionIconText}>➕</Text>
                      </View>
                      <Text style={[styles.optionText, { color: theme.text }]}>{item.username}</Text>
                      <Text style={[styles.optionSubtext, { color: theme.textMuted }]}>Add as friend & assign</Text>
                    </TouchableOpacity>
                  )}
                />
              ) : searchQuery.length >= 2 && searchResults.length === 0 && !searching ? (
                <Text style={[styles.emptyText, { color: theme.textFaint }]}>No users found</Text>
              ) : searchQuery.length < 2 ? (
                <Text style={[styles.emptyText, { color: theme.textFaint }]}>Type at least 2 characters to search</Text>
              ) : null}
            </View>
          </View>
        </KeyboardAvoidingView>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
  },
  selectorButton: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    paddingVertical: 12,
    paddingHorizontal: 10,
    borderRadius: 10,
    borderWidth: 1,
    minHeight: 48,
  },
  selectorIcon: {
    fontSize: 18,
  },
  selectorContent: {
    flex: 1,
    justifyContent: 'center',
  },
  selectorLabel: {
    fontSize: 10,
    fontWeight: '600',
    textTransform: 'uppercase',
    letterSpacing: 0.5,
    marginBottom: 1,
  },
  selectorValue: {
    fontSize: 14,
    fontWeight: '500',
  },
  clearButton: {
    padding: 3,
  },
  clearText: {
    fontSize: 16,
    fontWeight: '300',
  },
  modalOverlay: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  modalSheet: {
    width: '100%',
    maxWidth: 360,
    borderRadius: 16,
    overflow: 'hidden',
    maxHeight: '85%',
  },
  modalHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: 16,
    borderBottomWidth: 1,
  },
  modalTitle: {
    fontSize: 16,
    fontWeight: '700',
  },
  closeText: {
    fontSize: 20,
    fontWeight: '300',
  },
  modalSection: {
    padding: 10,
    paddingBottom: 16,
    borderBottomWidth: 1,
  },
  sectionTitle: {
    fontSize: 11,
    fontWeight: '600',
    textTransform: 'uppercase',
    letterSpacing: 0.5,
    marginBottom: 6,
    paddingHorizontal: 6,
  },
  optionRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 10,
    paddingVertical: 10,
    paddingHorizontal: 14,
    borderRadius: 9,
    borderWidth: 1,
  },
  optionIcon: {
    width: 32,
    height: 32,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,0.05)',
  },
  optionIconText: {
    fontSize: 15,
  },
  optionText: {
    fontSize: 15,
    fontWeight: '500',
    flex: 1,
  },
  optionSubtext: {
    fontSize: 11,
    marginTop: 1,
  },
  checkmark: {
    fontSize: 16,
    fontWeight: '700',
  },
  loading: {
    padding: 16,
    alignItems: 'center',
  },
  emptyText: {
    fontSize: 13,
    textAlign: 'center',
    paddingHorizontal: 16,
  },
  searchContainer: {
    padding: 10,
    paddingBottom: 6,
  },
  searchInput: {
    fontSize: 15,
    paddingVertical: 10,
    paddingHorizontal: 14,
    borderRadius: 10,
    borderWidth: 1,
  },
});