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,
  UserMinus,
  Flag,
  CheckCircle,
  XCircle,
  Clock,
  Shield,
  ShieldCheck,
} from "lucide-react-native";
import Colors from "@/constants/colors";
import { trpc } from "@/lib/trpc";
import { useAuth } from "@/lib/auth-context";
import { MiniProfileSheet, type MiniProfilePerson } from "@/components/MiniProfileSheet";
import { useTrustedCircle } from "@/lib/social/trusted-circle";
import { hapticToggle } from "@/lib/ui/haptics";

type Tab = "friends" | "requests" | "add";

export default function FriendsScreen() {
  const insets = useSafeAreaInsets();
  const router = useRouter();
  const { user: currentUser } = useAuth();
  const [activeTab, setActiveTab] = useState<Tab>("friends");
  const [searchQuery, setSearchQuery] = useState("");
  const [addSearchQuery, setAddSearchQuery] = useState("");
  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 searchUsersQuery = trpc.users.search.useQuery(
    { query: addSearchQuery },
    { enabled: addSearchQuery.length > 0 && activeTab === "add" }
  );

  const sendFriendRequestMutation = trpc.friends.sendRequest.useMutation({
    onSuccess: () => {
      Alert.alert("Success", "Friend request sent!");
      friendRequestsQuery.refetch();
    },
    onError: (error) => {
      Alert.alert("Error", "Failed to load friends.");
    },
  });

  const acceptRequestMutation = trpc.friends.acceptRequest.useMutation({
    onSuccess: () => {
      friendRequestsQuery.refetch();
      contactsQuery.refetch();
    },
  });

  const rejectRequestMutation = trpc.friends.rejectRequest.useMutation({
    onSuccess: () => {
      friendRequestsQuery.refetch();
    },
  });

  const removeFriendMutation = trpc.friends.removeFriend.useMutation({
    onSuccess: () => {
      contactsQuery.refetch();
    },
  });

  const toggleFavoriteMutation = trpc.contacts.toggleFavorite.useMutation({
    onSuccess: () => {
      contactsQuery.refetch();
    },
  });

  const [reportingUserId, setReportingUserId] = useState<string | null>(null);

  const contacts = contactsQuery.data || [];
  const friendRequests = friendRequestsQuery.data || [];
  const searchResults = searchUsersQuery.data || [];

  const filteredContacts = contacts.filter(
    (c) =>
      c.contact &&
      (c.contact.displayName.toLowerCase().includes(searchQuery.toLowerCase()) ||
        c.contact.username.toLowerCase().includes(searchQuery.toLowerCase()))
  );

  const pendingRequests = friendRequests.filter((r) => r.status === "pending");

  const handleRemoveFriend = (friendUserId: string, friendName: string) => {
    Alert.alert(
      "Remove Friend",
      `Are you sure you want to remove ${friendName} from your friends?`,
      [
        { text: "Cancel", style: "cancel" },
        {
          text: "Remove",
          style: "destructive",
          onPress: () => removeFriendMutation.mutate({ friendUserId }),
        },
      ]
    );
  };

  const handleReportSpam = (userId: string, username: string) => {
    setReportingUserId(userId);
  };

  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}>Friends</Text>
        <View style={{ width: 24 }} />
      </View>

      <View style={styles.tabContainer}>
        <TouchableOpacity
          style={[styles.tab, activeTab === "friends" && styles.tabActive]}
          onPress={() => setActiveTab("friends")}
        >
          <Text style={[styles.tabText, activeTab === "friends" && styles.tabTextActive]}>
            Friends {contacts.length > 0 && `(${contacts.length})`}
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[styles.tab, activeTab === "requests" && styles.tabActive]}
          onPress={() => setActiveTab("requests")}
        >
          <Text style={[styles.tabText, activeTab === "requests" && styles.tabTextActive]}>
            Requests {pendingRequests.length > 0 && `(${pendingRequests.length})`}
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[styles.tab, activeTab === "add" && styles.tabActive]}
          onPress={() => setActiveTab("add")}
        >
          <Text style={[styles.tabText, activeTab === "add" && styles.tabTextActive]}>
            Add Friends
          </Text>
        </TouchableOpacity>
      </View>

      {activeTab === "friends" && (
        <>
          <View style={styles.searchContainer}>
            <Search color={Colors.dark.textSecondary} size={20} />
            <TextInput
              style={styles.searchInput}
              value={searchQuery}
              onChangeText={setSearchQuery}
              placeholder="Search friends..."
              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 friends...</Text>
              </View>
            ) : filteredContacts.length > 0 ? (
              filteredContacts.map((contact) => {
                if (!contact.contact) return null;
                return (
                  <View key={contact.id} style={styles.friendCard}>
                    <TouchableOpacity
                      style={styles.friendMain}
                      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.friendInfo}>
                        <Text style={styles.friendName}>{contact.contact.displayName}</Text>
                        <Text style={styles.friendUsername}>@{contact.contact.username}</Text>
                      </View>
                    </TouchableOpacity>

                    <View style={styles.friendActions}>
                      <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={() => handleReportSpam(contact.contact!.id, contact.contact!.username)}
                      >
                        <Flag color={Colors.dark.textSecondary} size={20} />
                      </TouchableOpacity>
                      <TouchableOpacity
                        style={styles.iconButton}
                        onPress={() =>
                          handleRemoveFriend(contact.contact!.id, contact.contact!.displayName)
                        }
                      >
                        <UserMinus color={Colors.dark.error} size={20} />
                      </TouchableOpacity>
                    </View>
                  </View>
                );
              })
            ) : contacts.length === 0 ? (
              <View style={styles.emptyContainer}>
                <UserPlus color={Colors.dark.textTertiary} size={64} />
                <Text style={styles.emptyTitle}>No friends yet</Text>
                <Text style={styles.emptyText}>
                  Add friends to send money quickly and keep in touch
                </Text>
                <TouchableOpacity
                  style={styles.addButton}
                  onPress={() => setActiveTab("add")}
                >
                  <Text style={styles.addButtonText}>Add Friends</Text>
                </TouchableOpacity>
              </View>
            ) : (
              <View style={styles.emptyContainer}>
                <Text style={styles.emptyText}>No friends found</Text>
              </View>
            )}
          </ScrollView>
        </>
      )}

      {activeTab === "requests" && (
        <ScrollView
          style={styles.scrollView}
          contentContainerStyle={styles.scrollContent}
          showsVerticalScrollIndicator={scrollViewWebProps.showsVerticalScrollIndicator}
        >
          {friendRequestsQuery.isLoading ? (
            <View style={styles.loadingContainer}>
              <ActivityIndicator size="large" color={Colors.dark.primary} />
              <Text style={styles.loadingText}>Loading requests...</Text>
            </View>
          ) : pendingRequests.length > 0 ? (
            pendingRequests.map((request) => {
              const isIncoming = request.toUserId === currentUser?.id;
              const user = isIncoming ? request.fromUser : request.toUser;
              if (!user) return null;

              return (
                <View key={request.id} style={styles.requestCard}>
                  <Image
                    source={{
                      uri: user.avatar || `https://i.pravatar.cc/150?u=${user.id}`,
                    }}
                    style={styles.avatar}
                  />
                  <View style={styles.requestInfo}>
                    <Text style={styles.requestName}>{user.displayName}</Text>
                    <Text style={styles.requestUsername}>@{user.username}</Text>
                    <Text style={styles.requestLabel}>
                      {isIncoming ? "Sent you a friend request" : "Friend request sent"}
                    </Text>
                  </View>

                  {isIncoming ? (
                    <View style={styles.requestActions}>
                      <TouchableOpacity
                        style={styles.acceptButton}
                        onPress={() => acceptRequestMutation.mutate({ requestId: request.id })}
                        disabled={acceptRequestMutation.isPending}
                      >
                        <CheckCircle color="#FFFFFF" size={18} />
                      </TouchableOpacity>
                      <TouchableOpacity
                        style={styles.rejectButton}
                        onPress={() => rejectRequestMutation.mutate({ requestId: request.id })}
                        disabled={rejectRequestMutation.isPending}
                      >
                        <XCircle color="#FFFFFF" size={18} />
                      </TouchableOpacity>
                    </View>
                  ) : (
                    <View style={styles.pendingBadge}>
                      <Clock color={Colors.dark.textSecondary} size={16} />
                      <Text style={styles.pendingText}>Pending</Text>
                    </View>
                  )}
                </View>
              );
            })
          ) : (
            <View style={styles.emptyContainer}>
              <Clock color={Colors.dark.textTertiary} size={64} />
              <Text style={styles.emptyTitle}>No pending requests</Text>
              <Text style={styles.emptyText}>
                Friend requests will appear here
              </Text>
            </View>
          )}
        </ScrollView>
      )}

      {activeTab === "add" && (
        <>
          <View style={styles.searchContainer}>
            <Search color={Colors.dark.textSecondary} size={20} />
            <TextInput
              style={styles.searchInput}
              value={addSearchQuery}
              onChangeText={setAddSearchQuery}
              placeholder="Search by username, email or phone..."
              placeholderTextColor={Colors.dark.textTertiary}
            />
          </View>

          <ScrollView
            style={styles.scrollView}
            contentContainerStyle={styles.scrollContent}
            showsVerticalScrollIndicator={scrollViewWebProps.showsVerticalScrollIndicator}
          >
            {searchUsersQuery.isLoading ? (
              <View style={styles.loadingContainer}>
                <ActivityIndicator size="small" color={Colors.dark.primary} />
                <Text style={styles.loadingText}>Searching...</Text>
              </View>
            ) : searchResults.length > 0 ? (
              searchResults.map((user) => {
                const isFriend = contacts.some((c) => c.contact?.id === user.id);
                const hasPendingRequest = friendRequests.some(
                  (r) =>
                    r.status === "pending" &&
                    ((r.fromUser?.id === user.id) || (r.toUser?.id === user.id))
                );

                return (
                  <View key={user.id} style={styles.searchResultCard}>
                    <Image
                      source={{
                        uri: user.avatar || `https://i.pravatar.cc/150?u=${user.id}`,
                      }}
                      style={styles.avatar}
                    />
                    <View style={styles.searchResultInfo}>
                      <Text style={styles.searchResultName}>{user.displayName}</Text>
                      <Text style={styles.searchResultUsername}>@{user.username}</Text>
                      {(user.email || user.phoneNumber) && (
                        <Text style={styles.searchResultContact}>
                          {user.email || user.phoneNumber}
                        </Text>
                      )}
                    </View>

                    {isFriend ? (
                      <View style={styles.friendBadge}>
                        <CheckCircle color={Colors.dark.success} size={16} />
                        <Text style={styles.friendBadgeText}>Friends</Text>
                      </View>
                    ) : hasPendingRequest ? (
                      <View style={styles.pendingBadge}>
                        <Clock color={Colors.dark.textSecondary} size={16} />
                        <Text style={styles.pendingText}>Pending</Text>
                      </View>
                    ) : (
                      <TouchableOpacity
                        style={styles.addFriendButton}
                        onPress={() =>
                          sendFriendRequestMutation.mutate({ toUsername: user.username })
                        }
                        disabled={sendFriendRequestMutation.isPending}
                      >
                        <UserPlus color={Colors.dark.primary} size={20} />
                      </TouchableOpacity>
                    )}
                  </View>
                );
              })
            ) : addSearchQuery.length > 0 ? (
              <View style={styles.emptyContainer}>
                <Text style={styles.emptyText}>No users found</Text>
              </View>
            ) : (
              <View style={styles.emptyContainer}>
                <Search color={Colors.dark.textTertiary} size={64} />
                <Text style={styles.emptyTitle}>Find Friends</Text>
                <Text style={styles.emptyText}>
                  Search by username, email address, or phone number
                </Text>
              </View>
            )}
          </ScrollView>
        </>
      )}

      {reportingUserId && (
        <ReportSpamModal
          userId={reportingUserId}
          onClose={() => setReportingUserId(null)}
        />
      )}

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

function ReportSpamModal({ userId, onClose }: { userId: string; onClose: () => void }) {
  const [reason, setReason] = useState<"spam" | "harassment" | "fraud" | "inappropriate" | "other">("spam");
  const [description, setDescription] = useState("");

  const reportSpamMutation = trpc.friends.reportSpam.useMutation({
    onSuccess: () => {
      Alert.alert("Success", "User reported successfully");
      onClose();
    },
    onError: (error) => {
      Alert.alert("Error", "Failed to update friend request.");
    },
  });

  const handleReport = () => {
    reportSpamMutation.mutate({
      reportedUserId: userId,
      reason,
      description: description || undefined,
    });
  };

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

        <View style={styles.modalContent}>
          <Text style={styles.modalLabel}>Reason</Text>
          {(["spam", "harassment", "fraud", "inappropriate", "other"] as const).map((r) => (
            <TouchableOpacity
              key={r}
              style={[styles.reasonOption, reason === r && styles.reasonOptionActive]}
              onPress={() => setReason(r)}
            >
              <Text style={[styles.reasonText, reason === r && styles.reasonTextActive]}>
                {r.charAt(0).toUpperCase() + r.slice(1)}
              </Text>
            </TouchableOpacity>
          ))}

          <Text style={[styles.modalLabel, { marginTop: 20 }]}>
            Additional Details (Optional)
          </Text>
          <TextInput
            style={styles.modalTextArea}
            value={description}
            onChangeText={setDescription}
            placeholder="Provide more details..."
            placeholderTextColor={Colors.dark.textTertiary}
            multiline
            maxLength={500}
          />

          <TouchableOpacity
            style={styles.reportButton}
            onPress={handleReport}
            disabled={reportSpamMutation.isPending}
          >
            {reportSpamMutation.isPending ? (
              <ActivityIndicator color="#FFFFFF" />
            ) : (
              <Text style={styles.reportButtonText}>Submit Report</Text>
            )}
          </TouchableOpacity>
        </View>
      </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,
  },
  tabContainer: {
    flexDirection: "row",
    borderBottomWidth: 1,
    borderBottomColor: Colors.dark.border,
    paddingHorizontal: 20,
  },
  tab: {
    flex: 1,
    paddingVertical: 16,
    alignItems: "center",
  },
  tabActive: {
    borderBottomWidth: 2,
    borderBottomColor: Colors.dark.primary,
  },
  tabText: {
    fontSize: 14,
    fontWeight: "600" as const,
    color: Colors.dark.textSecondary,
  },
  tabTextActive: {
    color: Colors.dark.primary,
  },
  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,
  },
  friendCard: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: Colors.dark.surface,
    padding: 16,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    gap: 12,
  },
  friendMain: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    gap: 12,
  },
  avatar: {
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: Colors.dark.surfaceElevated,
  },
  friendInfo: {
    flex: 1,
  },
  friendName: {
    fontSize: 16,
    fontWeight: "600" as const,
    color: Colors.dark.text,
  },
  friendUsername: {
    fontSize: 14,
    color: Colors.dark.textSecondary,
    marginTop: 2,
  },
  friendActions: {
    flexDirection: "row",
    gap: 8,
  },
  iconButton: {
    padding: 8,
  },
  requestCard: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: Colors.dark.surface,
    padding: 16,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    gap: 12,
  },
  requestInfo: {
    flex: 1,
  },
  requestName: {
    fontSize: 16,
    fontWeight: "600" as const,
    color: Colors.dark.text,
  },
  requestUsername: {
    fontSize: 14,
    color: Colors.dark.textSecondary,
    marginTop: 2,
  },
  requestLabel: {
    fontSize: 12,
    color: Colors.dark.textTertiary,
    marginTop: 4,
  },
  requestActions: {
    flexDirection: "row",
    gap: 8,
  },
  acceptButton: {
    backgroundColor: Colors.dark.success,
    padding: 12,
    borderRadius: 12,
  },
  rejectButton: {
    backgroundColor: Colors.dark.error,
    padding: 12,
    borderRadius: 12,
  },
  pendingBadge: {
    flexDirection: "row",
    alignItems: "center",
    gap: 6,
    backgroundColor: Colors.dark.surfaceElevated,
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderRadius: 8,
  },
  pendingText: {
    fontSize: 12,
    fontWeight: "600" as const,
    color: Colors.dark.textSecondary,
  },
  searchResultCard: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: Colors.dark.surface,
    padding: 16,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    gap: 12,
  },
  searchResultInfo: {
    flex: 1,
  },
  searchResultName: {
    fontSize: 16,
    fontWeight: "600" as const,
    color: Colors.dark.text,
  },
  searchResultUsername: {
    fontSize: 14,
    color: Colors.dark.textSecondary,
    marginTop: 2,
  },
  searchResultContact: {
    fontSize: 12,
    color: Colors.dark.textTertiary,
    marginTop: 4,
  },
  friendBadge: {
    flexDirection: "row",
    alignItems: "center",
    gap: 6,
    backgroundColor: Colors.dark.surfaceElevated,
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderRadius: 8,
  },
  friendBadgeText: {
    fontSize: 12,
    fontWeight: "600" as const,
    color: Colors.dark.success,
  },
  addFriendButton: {
    backgroundColor: Colors.dark.surface,
    padding: 12,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: Colors.dark.primary,
  },
  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,
    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,
  },
  modalContent: {
    padding: 20,
  },
  modalLabel: {
    fontSize: 14,
    fontWeight: "600" as const,
    color: Colors.dark.text,
    marginBottom: 12,
  },
  reasonOption: {
    padding: 16,
    borderRadius: 12,
    backgroundColor: Colors.dark.surfaceElevated,
    marginBottom: 8,
    borderWidth: 2,
    borderColor: "transparent",
  },
  reasonOptionActive: {
    backgroundColor: Colors.dark.background,
    borderColor: Colors.dark.primary,
  },
  reasonText: {
    fontSize: 15,
    color: Colors.dark.textSecondary,
    fontWeight: "500" as const,
  },
  reasonTextActive: {
    color: Colors.dark.primary,
    fontWeight: "600" as const,
  },
  modalTextArea: {
    backgroundColor: Colors.dark.surfaceElevated,
    borderRadius: 12,
    padding: 16,
    fontSize: 15,
    color: Colors.dark.text,
    minHeight: 100,
    textAlignVertical: "top",
    borderWidth: 1,
    borderColor: Colors.dark.border,
    ...Platform.select({
      web: {
        outlineStyle: "none" as const,
      },
    }),
  },
  reportButton: {
    backgroundColor: Colors.dark.error,
    paddingVertical: 16,
    borderRadius: 12,
    alignItems: "center",
    marginTop: 20,
  },
  reportButtonText: {
    fontSize: 16,
    fontWeight: "600" as const,
    color: "#FFFFFF",
  },
});