import { scrollViewWebProps } from '@/lib/ui/scroll-props';
import { Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Stack } from "expo-router";
import { Shield, ShieldCheck } from "lucide-react-native";

import Colors from "@/constants/colors";
import { trpc } from "@/lib/trpc";
import { useAuth } from "@/lib/auth-context";
import { useTrustedCircle } from "@/lib/social/trusted-circle";
import { hapticToggle } from "@/lib/ui/haptics";

const DEMO_CONTACTS = [
  { username: "sarah_j", displayName: "Sarah Johnson", avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&h=150&fit=crop&crop=face" },
  { username: "mike_w", displayName: "Mike Wilson", avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face" },
  { username: "alex_r", displayName: "Alex Rodriguez", avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=150&h=150&fit=crop&crop=face" },
  { username: "emma_l", displayName: "Emma Lee", avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop&crop=face" },
];

// Trusted Circle - close friends and family skip the usual send friction
// (risk banners, "are you sure" prompts) entirely. Marking someone here is
// the only thing that changes; everything else about sending them money
// stays the same.
export default function TrustedCircleScreen() {
  const insets = useSafeAreaInsets();
  const { isDemoMode } = useAuth();
  const trustedUsernames = useTrustedCircle((s) => s.trustedUsernames);
  const toggleTrusted = useTrustedCircle((s) => s.toggleTrusted);

  const contactsQuery = trpc.contacts.list.useQuery(undefined, { enabled: !isDemoMode });
  const realContacts = (contactsQuery.data || [])
    .filter((c) => !!c.contact)
    .map((c) => ({
      username: c.contact!.username,
      displayName: c.contact!.displayName,
      avatar: c.contact!.avatar,
    }));

  const people = isDemoMode ? DEMO_CONTACTS : realContacts;

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

      <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={scrollViewWebProps.showsVerticalScrollIndicator}>
        <View style={styles.introCard}>
          <ShieldCheck color={Colors.dark.success} size={20} />
          <Text style={styles.introText}>
            {trustedUsernames.length} {trustedUsernames.length === 1 ? "person" : "people"} in your circle right now.
            Sending to them skips risk checks and confirmation prompts.
          </Text>
        </View>

        {people.length === 0 ? (
          <Text style={styles.emptyText}>Add some friends first, then mark the ones you trust most.</Text>
        ) : (
          people.map((person) => {
            const trusted = trustedUsernames.includes(person.username);
            return (
              <TouchableOpacity
                key={person.username}
                style={styles.row}
                activeOpacity={0.8}
                onPress={() => {
                  hapticToggle();
                  toggleTrusted(person.username);
                }}
              >
                <Image source={{ uri: person.avatar || `https://i.pravatar.cc/150?u=${person.username}` }} style={styles.avatar} />
                <View style={styles.rowInfo}>
                  <Text style={styles.rowName}>{person.displayName}</Text>
                  <Text style={styles.rowUsername}>@{person.username}</Text>
                </View>
                {trusted ? (
                  <View style={styles.trustedBadge}>
                    <ShieldCheck color={Colors.dark.success} size={14} />
                    <Text style={styles.trustedBadgeText}>Trusted</Text>
                  </View>
                ) : (
                  <View style={styles.untrustedBadge}>
                    <Shield color={Colors.dark.textTertiary} size={14} />
                  </View>
                )}
              </TouchableOpacity>
            );
          })
        )}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.dark.background,
  },
  content: {
    padding: 20,
    paddingBottom: 60,
  },
  introCard: {
    flexDirection: "row" as const,
    gap: 12,
    backgroundColor: `${Colors.dark.success}0F`,
    borderRadius: 14,
    padding: 14,
    marginBottom: 20,
    alignItems: "flex-start" as const,
  },
  introText: {
    flex: 1,
    fontSize: 13,
    color: Colors.dark.textSecondary,
    lineHeight: 18,
  },
  emptyText: {
    fontSize: 14,
    color: Colors.dark.textSecondary,
    textAlign: "center" as const,
    marginTop: 40,
  },
  row: {
    flexDirection: "row" as const,
    alignItems: "center" as const,
    gap: 12,
    backgroundColor: Colors.dark.surface,
    borderRadius: 14,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    padding: 14,
    marginBottom: 10,
  },
  avatar: {
    width: 44,
    height: 44,
    borderRadius: 22,
    backgroundColor: Colors.dark.surfaceElevated,
  },
  rowInfo: {
    flex: 1,
  },
  rowName: {
    fontSize: 15,
    fontWeight: "600" as const,
    color: Colors.dark.text,
  },
  rowUsername: {
    fontSize: 12,
    color: Colors.dark.textSecondary,
    marginTop: 2,
  },
  trustedBadge: {
    flexDirection: "row" as const,
    alignItems: "center" as const,
    gap: 5,
    backgroundColor: `${Colors.dark.success}1A`,
    paddingHorizontal: 10,
    paddingVertical: 6,
    borderRadius: 10,
  },
  trustedBadgeText: {
    fontSize: 11,
    fontWeight: "700" as const,
    color: Colors.dark.success,
  },
  untrustedBadge: {
    width: 28,
    height: 28,
    borderRadius: 14,
    backgroundColor: Colors.dark.surfaceElevated,
    alignItems: "center" as const,
    justifyContent: "center" as const,
  },
});