import { scrollViewWebProps } from '@/lib/ui/scroll-props';
import { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  ScrollView,
  TouchableOpacity,
  TextInput,
  Image,
  Platform,
  ActivityIndicator,
  Alert,
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useRouter, Stack } from "expo-router";
import {
  ChevronLeft,
  Search,
  UserPlus,
  Star,
  Send,
  Trash2,
  Users,
  MessageCircle,
  Shield,
  ShieldCheck,
} from "lucide-react-native";
import Colors from "@/constants/colors";
import { trpc } from "@/lib/trpc";
import { MiniProfileSheet, type MiniProfilePerson } from "@/components/MiniProfileSheet";
import { useTrustedCircle } from "@/lib/social/trusted-circle";
import { hapticToggle } from "@/lib/ui/haptics";

export default function ContactsScreen() {
  const insets = useSafeAreaInsets();
  const router = useRouter();
  const [searchQuery, setSearchQuery] = useState("");
  const [showAddContact, setShowAddContact] = useState(false);
  const [miniProfilePerson, setMiniProfilePerson] = useState<MiniProfilePerson | null>(null);
  const trustedUsernames = useTrustedCircle((s) => s.trustedUsernames);
  const toggleTrusted = useTrustedCircle((s) => s.toggleTrusted);

  const contactsQuery = trpc.contacts.list.useQuery();
  const friendRequestsQuery = trpc.friends.listRequests.useQuery();
  const removeMutation = trpc.friends.removeFriend.useMutation({
    onSuccess: () => {
      contactsQuery.refetch();
    },
    onError: (error) => {
      Alert.alert("Error", "Failed to load contacts.");
    },
  });
  const toggleFavoriteMutation = trpc.contacts.toggleFavorite.useMutation({
    onSuccess: () => {
      contactsQuery.refetch();
    },
  });

  const contacts = contactsQuery.data || [];
  const pendingRequestCount = (friendRequestsQuery.data || []).filter(
    (r) => r.status === "pending"
  ).length;
  const filteredContacts = contacts.filter(
    (c) =>
      c.contact &&
      (c.contact.displayName.toLowerCase().includes(searchQuery.toLowerCase()) ||
        c.contact.username.toLowerCase().includes(searchQuery.toLowerCase()))
  );

  const favoriteContacts = filteredContacts.filter((c) => c.isFavorite);
  const regularContacts = filteredContacts.filter((c) => !c.isFavorite);

  const handleRemoveContact = (friendUserId: string, friendName: string) => {
    Alert.alert(
      "Remove Friend",
      `Remove ${friendName} from your friends? This can't be undone.`,
      [
        { text: "Cancel", style: "cancel" },
        {
          text: "Remove",
          style: "destructive",
          onPress: () => removeMutation.mutate({ friendUserId }),
        },
      ]
    );
  };

  const renderContact = (contact: typeof contacts[0]) => {
    if (!contact.contact) return null;
    
    return (
      <View key={contact.id} style={styles.contactCard}>
        <TouchableOpacity
          style={styles.contactMain}
          onPress={() =>
            setMiniProfilePerson({
              name: contact.contact!.displayName,
              username: contact.contact!.username,
              avatar: contact.contact!.avatar,
            })
          }
        >
          <Image
            source={{
              uri:
                contact.contact.avatar ||
                `https://i.pravatar.cc/150?u=${contact.contact.id}`,
            }}
            style={styles.avatar}
          />
          <View style={styles.contactInfo}>
            <Text style={styles.contactName}>{contact.contact.displayName}</Text>
            <Text style={styles.contactUsername}>@{contact.contact.username}</Text>
          </View>
        </TouchableOpacity>

        <View style={styles.contactActions}>
          <TouchableOpacity
            style={styles.iconButton}
            onPress={() => {
              hapticToggle();
              toggleTrusted(contact.contact!.username);
            }}
          >
            {trustedUsernames.includes(contact.contact.username) ? (
              <ShieldCheck color={Colors.dark.success} size={20} />
            ) : (
              <Shield color={Colors.dark.textSecondary} size={20} />
            )}
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.iconButton}
            onPress={() => toggleFavoriteMutation.mutate({ contactId: contact.id })}
          >
            <Star
              color={contact.isFavorite ? Colors.dark.warning : Colors.dark.textSecondary}
              size={20}
              fill={contact.isFavorite ? Colors.dark.warning : "none"}
            />
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.iconButton}
            onPress={() => router.push(`/send?username=${contact.contact!.username}`)}
          >
            <Send color={Colors.dark.primary} size={20} />
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.iconButton}
            onPress={() => router.push(`/chat/${contact.contact!.id}`)}
          >
            <MessageCircle color={Colors.dark.secondary} size={20} />
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.iconButton}
            onPress={() => handleRemoveContact(contact.contact!.id, contact.contact!.displayName)}
          >
            <Trash2 color={Colors.dark.error} size={20} />
          </TouchableOpacity>
        </View>
      </View>
    );
  };

  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <Stack.Screen options={{ headerShown: false }} />

      <View style={styles.header}>
        <TouchableOpacity
          onPress={() => router.back()}
          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
        >
          <ChevronLeft color={Colors.dark.text} size={24} />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>Contacts</Text>
        <View style={styles.headerActions}>
          <TouchableOpacity
            onPress={() => router.push("/friends")}
            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
            style={styles.headerActionButton}
          >
            <Users color={Colors.dark.text} size={22} />
            {pendingRequestCount > 0 && (
              <View style={styles.headerBadge}>
                <Text style={styles.headerBadgeText}>
                  {pendingRequestCount > 9 ? "9+" : pendingRequestCount}
                </Text>
              </View>
            )}
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => setShowAddContact(true)}
            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
          >
            <UserPlus color={Colors.dark.primary} size={24} />
          </TouchableOpacity>
        </View>
      </View>

      <View style={styles.searchContainer}>
        <Search color={Colors.dark.textSecondary} size={20} />
        <TextInput
          style={styles.searchInput}
          value={searchQuery}
          onChangeText={setSearchQuery}
          placeholder="Search contacts..."
          placeholderTextColor={Colors.dark.textTertiary}
        />
      </View>

      <ScrollView
        style={styles.scrollView}
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator={scrollViewWebProps.showsVerticalScrollIndicator}
      >
        {contactsQuery.isLoading ? (
          <View style={styles.loadingContainer}>
            <ActivityIndicator size="large" color={Colors.dark.primary} />
            <Text style={styles.loadingText}>Loading contacts...</Text>
          </View>
        ) : filteredContacts.length > 0 ? (
          <>
            {favoriteContacts.length > 0 && (
              <>
                <View style={styles.sectionHeader}>
                  <Star color={Colors.dark.warning} size={18} fill={Colors.dark.warning} />
                  <Text style={styles.sectionTitle}>Favorites</Text>
                </View>
                {favoriteContacts.map(renderContact)}
              </>
            )}

            {regularContacts.length > 0 && (
              <>
                <View style={styles.sectionHeader}>
                  <Text style={styles.sectionTitle}>
                    {favoriteContacts.length > 0 ? "All Contacts" : "Contacts"}
                  </Text>
                </View>
                {regularContacts.map(renderContact)}
              </>
            )}
          </>
        ) : contacts.length === 0 ? (
          <View style={styles.emptyContainer}>
            <UserPlus color={Colors.dark.textTertiary} size={64} />
            <Text style={styles.emptyTitle}>No contacts yet</Text>
            <Text style={styles.emptyText}>
              Add your frequently used contacts for quick access
            </Text>
            <TouchableOpacity
              style={styles.addButton}
              onPress={() => setShowAddContact(true)}
            >
              <Text style={styles.addButtonText}>Add Contact</Text>
            </TouchableOpacity>
          </View>
        ) : (
          <View style={styles.emptyContainer}>
            <Text style={styles.emptyText}>No contacts found</Text>
          </View>
        )}
      </ScrollView>

      {showAddContact && (
        <AddContactModal
          onClose={() => setShowAddContact(false)}
          onSuccess={() => {
            setShowAddContact(false);
            contactsQuery.refetch();
          }}
        />
      )}

      <MiniProfileSheet
        visible={!!miniProfilePerson}
        person={miniProfilePerson}
        onClose={() => setMiniProfilePerson(null)}
        onSend={
          miniProfilePerson?.username
            ? () => {
                setMiniProfilePerson(null);
                router.push(`/send?username=${miniProfilePerson.username}`);
              }
            : undefined
        }
      />
    </View>
  );
}

function AddContactModal({
  onClose,
  onSuccess,
}: {
  onClose: () => void;
  onSuccess: () => void;
}) {
  const [username, setUsername] = useState("");

  const searchQuery = trpc.users.search.useQuery(
    { query: username },
    { enabled: username.length > 0 }
  );

  const addMutation = trpc.contacts.add.useMutation({
    onSuccess: () => {
      onSuccess();
    },
  });

  const handleAdd = (contactUsername: string) => {
    addMutation.mutate({ contactUsername });
  };

  return (
    <View style={styles.modalOverlay}>
      <View style={styles.modal}>
        <View style={styles.modalHeader}>
          <Text style={styles.modalTitle}>Add Contact</Text>
          <TouchableOpacity onPress={onClose}>
            <Text style={styles.modalClose}>Cancel</Text>
          </TouchableOpacity>
        </View>

        <View style={styles.modalSearch}>
          <TextInput
            style={styles.modalInput}
            value={username}
            onChangeText={setUsername}
            placeholder="Search by username or name..."
            placeholderTextColor={Colors.dark.textTertiary}
            autoFocus
          />
        </View>

        <ScrollView style={styles.modalResults} showsVerticalScrollIndicator={scrollViewWebProps.showsVerticalScrollIndicator}>
          {searchQuery.isLoading ? (
            <ActivityIndicator size="small" color={Colors.dark.primary} />
          ) : searchQuery.data && searchQuery.data.length > 0 ? (
            searchQuery.data.map((user) => (
              <TouchableOpacity
                key={user.id}
                style={styles.resultCard}
                onPress={() => handleAdd(user.username)}
                disabled={addMutation.isPending}
              >
                <Image
                  source={{
                    uri: user.avatar || `https://i.pravatar.cc/150?u=${user.id}`,
                  }}
                  style={styles.resultAvatar}
                />
                <View style={styles.resultInfo}>
                  <Text style={styles.resultName}>{user.displayName}</Text>
                  <Text style={styles.resultUsername}>@{user.username}</Text>
                </View>
                <UserPlus color={Colors.dark.primary} size={20} />
              </TouchableOpacity>
            ))
          ) : username.length > 0 ? (
            <Text style={styles.noResults}>No users found</Text>
          ) : null}
        </ScrollView>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.dark.background,
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: 20,
    paddingVertical: 16,
    borderBottomWidth: 1,
    borderBottomColor: Colors.dark.border,
  },
  headerTitle: {
    fontSize: 20,
    fontWeight: "700" as const,
    color: Colors.dark.text,
  },
  headerActions: {
    flexDirection: "row" as const,
    alignItems: "center" as const,
    gap: 16,
  },
  headerActionButton: {
    position: "relative" as const,
  },
  headerBadge: {
    position: "absolute" as const,
    top: -4,
    right: -6,
    backgroundColor: Colors.dark.error,
    borderRadius: 8,
    minWidth: 16,
    height: 16,
    paddingHorizontal: 3,
    alignItems: "center" as const,
    justifyContent: "center" as const,
  },
  headerBadgeText: {
    fontSize: 10,
    fontWeight: "700" as const,
    color: "#FFFFFF",
  },
  searchContainer: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: Colors.dark.surface,
    marginHorizontal: 20,
    marginVertical: 16,
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderRadius: 12,
    gap: 12,
    borderWidth: 1,
    borderColor: Colors.dark.border,
  },
  searchInput: {
    flex: 1,
    fontSize: 16,
    color: Colors.dark.text,
    ...Platform.select({
      web: {
        outlineStyle: "none" as const,
      },
    }),
  },
  scrollView: {
    flex: 1,
  },
  scrollContent: {
    padding: 20,
    gap: 12,
  },
  sectionHeader: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
    marginTop: 16,
    marginBottom: 12,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: "700" as const,
    color: Colors.dark.text,
  },
  contactCard: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: Colors.dark.surface,
    padding: 16,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    gap: 12,
  },
  contactMain: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    gap: 12,
  },
  avatar: {
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: Colors.dark.surfaceElevated,
  },
  contactInfo: {
    flex: 1,
  },
  contactName: {
    fontSize: 16,
    fontWeight: "600" as const,
    color: Colors.dark.text,
  },
  contactUsername: {
    fontSize: 14,
    color: Colors.dark.textSecondary,
    marginTop: 2,
  },
  contactActions: {
    flexDirection: "row",
    gap: 8,
  },
  iconButton: {
    padding: 8,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    paddingVertical: 60,
    gap: 16,
  },
  loadingText: {
    fontSize: 14,
    color: Colors.dark.textSecondary,
  },
  emptyContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    paddingVertical: 80,
    gap: 16,
  },
  emptyTitle: {
    fontSize: 20,
    fontWeight: "700" as const,
    color: Colors.dark.text,
    marginTop: 16,
  },
  emptyText: {
    fontSize: 14,
    color: Colors.dark.textSecondary,
    textAlign: "center",
    paddingHorizontal: 40,
    lineHeight: 20,
  },
  addButton: {
    backgroundColor: Colors.dark.primary,
    paddingHorizontal: 24,
    paddingVertical: 12,
    borderRadius: 12,
    marginTop: 16,
  },
  addButtonText: {
    fontSize: 14,
    fontWeight: "600" as const,
    color: Colors.dark.background,
  },
  modalOverlay: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: "rgba(0, 0, 0, 0.8)",
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
  },
  modal: {
    backgroundColor: Colors.dark.surface,
    borderRadius: 20,
    width: "100%",
    maxWidth: 500,
    maxHeight: "80%",
    borderWidth: 1,
    borderColor: Colors.dark.border,
  },
  modalHeader: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: Colors.dark.border,
  },
  modalTitle: {
    fontSize: 20,
    fontWeight: "700" as const,
    color: Colors.dark.text,
  },
  modalClose: {
    fontSize: 16,
    fontWeight: "600" as const,
    color: Colors.dark.textSecondary,
  },
  modalSearch: {
    padding: 20,
  },
  modalInput: {
    fontSize: 16,
    color: Colors.dark.text,
    backgroundColor: Colors.dark.surfaceElevated,
    paddingHorizontal: 16,
    paddingVertical: 14,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    ...Platform.select({
      web: {
        outlineStyle: "none" as const,
      },
    }),
  },
  modalResults: {
    maxHeight: 400,
    padding: 20,
    paddingTop: 0,
  },
  resultCard: {
    flexDirection: "row",
    alignItems: "center",
    padding: 12,
    borderRadius: 12,
    gap: 12,
    marginBottom: 8,
    backgroundColor: Colors.dark.surfaceElevated,
  },
  resultAvatar: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: Colors.dark.surface,
  },
  resultInfo: {
    flex: 1,
  },
  resultName: {
    fontSize: 15,
    fontWeight: "600" as const,
    color: Colors.dark.text,
  },
  resultUsername: {
    fontSize: 13,
    color: Colors.dark.textSecondary,
    marginTop: 2,
  },
  noResults: {
    fontSize: 14,
    color: Colors.dark.textSecondary,
    textAlign: "center",
    padding: 20,
  },
});