import { scrollViewWebProps } from '@/lib/ui/scroll-props';
import { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity,
  Image,
  ScrollView,
  Platform,
  Alert,
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useRouter, useLocalSearchParams } from "expo-router";
import { ArrowLeft, Plus, X, Users } from "lucide-react-native";

import Colors from "@/constants/colors";
import { trpc } from "@/lib/trpc";
import { SmartSplitBubble, type SplitSuggestion } from "@/components/SmartSplitBubble";

interface SplitParticipant {
  user: {
    id: string;
    username: string;
    displayName: string;
    avatar?: string;
  };
  amount: string;
}

export default function SplitPaymentScreen() {
  const insets = useSafeAreaInsets();
  const router = useRouter();
  const params = useLocalSearchParams<{ amount?: string }>();
  const [totalAmount, setTotalAmount] = useState(params.amount || "");
  const [note, setNote] = useState("");
  const [participants, setParticipants] = useState<SplitParticipant[]>([]);
  const [showUserPicker, setShowUserPicker] = useState(false);
  const [splitType, setSplitType] = useState<"equal" | "custom">("equal");
  const [searchQuery, setSearchQuery] = useState("");

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

  const availableUsers = (searchUsersQuery.data || []).filter(
    (user) => !participants.some((p) => p.user.id === user.id)
  );

  const handleAmountChange = (text: string) => {
    const cleaned = text.replace(/[^0-9.]/g, "");
    const parts = cleaned.split(".");
    if (parts.length > 2) return;
    if (parts[1] && parts[1].length > 2) return;
    setTotalAmount(cleaned);
  };

  const handleAddParticipant = (user: SplitParticipant["user"]) => {
    const amount = totalAmount
      ? (parseFloat(totalAmount) / (participants.length + 1)).toFixed(2)
      : "0.00";
    setParticipants([...participants, { user, amount }]);
    setShowUserPicker(false);

    if (splitType === "equal" && totalAmount) {
      redistributeAmounts(parseFloat(totalAmount), participants.length + 1);
    }
  };

  const handleRemoveParticipant = (userId: string) => {
    const newParticipants = participants.filter((p) => p.user.id !== userId);
    setParticipants(newParticipants);

    if (splitType === "equal" && totalAmount && newParticipants.length > 0) {
      redistributeAmounts(parseFloat(totalAmount), newParticipants.length);
    }
  };

  const redistributeAmounts = (total: number, count: number) => {
    const amountPerPerson = (total / count).toFixed(2);
    setParticipants((prev) =>
      prev.map((p) => ({ ...p, amount: amountPerPerson }))
    );
  };

  const handleParticipantAmountChange = (userId: string, amount: string) => {
    const cleaned = amount.replace(/[^0-9.]/g, "");
    const parts = cleaned.split(".");
    if (parts.length > 2) return;
    if (parts[1] && parts[1].length > 2) return;

    setParticipants((prev) =>
      prev.map((p) => (p.user.id === userId ? { ...p, amount: cleaned } : p))
    );
  };

  const calculateTotal = () => {
    return participants.reduce(
      (sum, p) => sum + (parseFloat(p.amount) || 0),
      0
    );
  };

  const handleSplitType = (type: "equal" | "custom") => {
    setSplitType(type);
    if (type === "equal" && totalAmount && participants.length > 0) {
      redistributeAmounts(parseFloat(totalAmount), participants.length);
    }
  };

  // Smart Split Bubble - turns a suggested group straight into participants,
  // same shape the manual "add from search" flow produces, just skipping
  // the part where you'd have typed each name in yourself.
  const applySplitSuggestion = (people: SplitSuggestion[]) => {
    const suggested: SplitParticipant[] = people.map((person) => ({
      user: {
        id: `demo-counterparty-${person.name.toLowerCase().replace(/\s+/g, "_")}`,
        username: person.name.toLowerCase().replace(/\s+/g, "_"),
        displayName: person.name,
        avatar: person.avatar,
      },
      amount: "0.00",
    }));
    setParticipants(suggested);
    if (totalAmount) {
      redistributeAmounts(parseFloat(totalAmount), suggested.length);
    }
  };

  const createSplitMutation = trpc.split.create.useMutation({
    onSuccess: () => {
      Alert.alert("Success", "Split payment request sent!", [
        { text: "OK", onPress: () => router.back() },
      ]);
    },
    onError: (error) => {
      Alert.alert("Error", "Failed to create split payment.");
    },
  });

  const handleSubmit = () => {
    if (!totalAmount || participants.length === 0) {
      Alert.alert("Error", "Please add amount and at least one participant");
      return;
    }

    const total = calculateTotal();
    const expectedTotal = parseFloat(totalAmount);

    if (Math.abs(total - expectedTotal) > 0.01) {
      Alert.alert(
        "Amount Mismatch",
        `Split amounts (${total.toFixed(2)}) don't match total (${expectedTotal.toFixed(2)})`
      );
      return;
    }

    createSplitMutation.mutate({
      totalAmount: parseFloat(totalAmount),
      note,
      participants: participants.map((p) => ({
        userId: p.user.id,
        amount: parseFloat(p.amount),
      })),
    });
  };

  if (showUserPicker) {
    return (
      <View style={[styles.container, { paddingTop: insets.top }]}>
        <View style={styles.header}>
          <TouchableOpacity
            onPress={() => setShowUserPicker(false)}
            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
          >
            <ArrowLeft color={Colors.dark.text} size={24} />
          </TouchableOpacity>
          <Text style={styles.headerTitle}>Add Participant</Text>
          <View style={{ width: 24 }} />
        </View>

        <View style={styles.searchContainer}>
          <TextInput
            style={styles.searchInput}
            value={searchQuery}
            onChangeText={setSearchQuery}
            placeholder="Search users..."
            placeholderTextColor={Colors.dark.textTertiary}
            autoFocus
          />
        </View>

        <ScrollView
          style={styles.scrollView}
          contentContainerStyle={styles.scrollContent}
          showsVerticalScrollIndicator={scrollViewWebProps.showsVerticalScrollIndicator}
        >
          <View style={styles.userList}>
            {searchUsersQuery.isLoading ? (
              <Text style={styles.loadingText}>Searching...</Text>
            ) : availableUsers.length > 0 ? (
              availableUsers.map((user) => (
                <TouchableOpacity
                  key={user.id}
                  style={styles.userCard}
                  onPress={() => handleAddParticipant(user)}
                  activeOpacity={0.7}
                >
                  <Image
                    source={{ uri: user.avatar || `https://i.pravatar.cc/150?u=${user.id}` }}
                    style={styles.userAvatar}
                  />
                  <View style={styles.userInfo}>
                    <Text style={styles.userName}>{user.displayName}</Text>
                    <Text style={styles.userUsername}>@{user.username}</Text>
                  </View>
                  <Plus color={Colors.dark.primary} size={24} />
                </TouchableOpacity>
              ))
            ) : searchQuery.length > 0 ? (
              <Text style={styles.emptyText}>No users found</Text>
            ) : (
              <Text style={styles.emptyText}>Start typing to search users</Text>
            )}
          </View>
        </ScrollView>
      </View>
    );
  }

  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <View style={styles.header}>
        <TouchableOpacity
          onPress={() => router.back()}
          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
        >
          <ArrowLeft color={Colors.dark.text} size={24} />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>Split Payment</Text>
        <View style={{ width: 24 }} />
      </View>

      <ScrollView
        style={styles.scrollView}
        contentContainerStyle={styles.scrollContent}
        keyboardShouldPersistTaps="handled"
        showsVerticalScrollIndicator={scrollViewWebProps.showsVerticalScrollIndicator}
      >
        <SmartSplitBubble onApply={applySplitSuggestion} style={styles.smartSplitBubble} />

        <View style={styles.amountCard}>
          <Text style={styles.amountLabel}>Total Amount</Text>
          <View style={styles.amountInputContainer}>
            <Text style={styles.currencySymbol}>$</Text>
            <TextInput
              style={styles.amountInput}
              value={totalAmount}
              onChangeText={handleAmountChange}
              keyboardType="decimal-pad"
              placeholder="0.00"
              placeholderTextColor={Colors.dark.textTertiary}
            />
          </View>
        </View>

        <View style={styles.noteCard}>
          <Text style={styles.noteLabel}>What&apos;s it for?</Text>
          <TextInput
            style={styles.noteInput}
            value={note}
            onChangeText={setNote}
            placeholder="Add a note (optional)"
            placeholderTextColor={Colors.dark.textTertiary}
            multiline
            maxLength={200}
          />
        </View>

        <View style={styles.splitTypeCard}>
          <Text style={styles.splitTypeLabel}>Split Type</Text>
          <View style={styles.splitTypeButtons}>
            <TouchableOpacity
              style={[
                styles.splitTypeButton,
                splitType === "equal" && styles.splitTypeButtonActive,
              ]}
              onPress={() => handleSplitType("equal")}
            >
              <Text
                style={[
                  styles.splitTypeButtonText,
                  splitType === "equal" && styles.splitTypeButtonTextActive,
                ]}
              >
                Split Equally
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={[
                styles.splitTypeButton,
                splitType === "custom" && styles.splitTypeButtonActive,
              ]}
              onPress={() => handleSplitType("custom")}
            >
              <Text
                style={[
                  styles.splitTypeButtonText,
                  splitType === "custom" && styles.splitTypeButtonTextActive,
                ]}
              >
                Custom Amounts
              </Text>
            </TouchableOpacity>
          </View>
        </View>

        <View style={styles.section}>
          <View style={styles.sectionHeader}>
            <Text style={styles.sectionTitle}>
              Participants ({participants.length})
            </Text>
            <TouchableOpacity
              style={styles.addButton}
              onPress={() => setShowUserPicker(true)}
            >
              <Plus color={Colors.dark.background} size={18} />
              <Text style={styles.addButtonText}>Add</Text>
            </TouchableOpacity>
          </View>

          {participants.length === 0 ? (
            <View style={styles.emptyParticipants}>
              <Users color={Colors.dark.textTertiary} size={48} />
              <Text style={styles.emptyText}>No participants yet</Text>
              <Text style={styles.emptySubtext}>
                Add people to split the payment with
              </Text>
            </View>
          ) : (
            <View style={styles.participantsList}>
              {participants.map((participant) => (
                <View key={participant.user.id} style={styles.participantCard}>
                  <Image
                    source={{ uri: participant.user.avatar || `https://i.pravatar.cc/150?u=${participant.user.id}` }}
                    style={styles.participantAvatar}
                  />
                  <View style={styles.participantInfo}>
                    <Text style={styles.participantName}>
                      {participant.user.displayName}
                    </Text>
                    <Text style={styles.participantUsername}>
                      @{participant.user.username}
                    </Text>
                  </View>
                  <View style={styles.participantAmount}>
                    {splitType === "custom" ? (
                      <View style={styles.customAmountInput}>
                        <Text style={styles.customAmountSymbol}>$</Text>
                        <TextInput
                          style={styles.customAmountField}
                          value={participant.amount}
                          onChangeText={(text) =>
                            handleParticipantAmountChange(participant.user.id, text)
                          }
                          keyboardType="decimal-pad"
                          placeholder="0.00"
                          placeholderTextColor={Colors.dark.textTertiary}
                        />
                      </View>
                    ) : (
                      <Text style={styles.participantAmountText}>
                        ${participant.amount}
                      </Text>
                    )}
                  </View>
                  <TouchableOpacity
                    onPress={() => handleRemoveParticipant(participant.user.id)}
                    hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
                  >
                    <X color={Colors.dark.error} size={20} />
                  </TouchableOpacity>
                </View>
              ))}
            </View>
          )}
        </View>

        {participants.length > 0 && (
          <View style={styles.summaryCard}>
            <View style={styles.summaryRow}>
              <Text style={styles.summaryLabel}>Total Amount</Text>
              <Text style={styles.summaryValue}>
                ${totalAmount || "0.00"}
              </Text>
            </View>
            <View style={styles.summaryRow}>
              <Text style={styles.summaryLabel}>Split Total</Text>
              <Text
                style={[
                  styles.summaryValue,
                  Math.abs(calculateTotal() - parseFloat(totalAmount || "0")) >
                    0.01 && styles.summaryError,
                ]}
              >
                ${calculateTotal().toFixed(2)}
              </Text>
            </View>
            <View style={styles.summaryRow}>
              <Text style={styles.summaryLabel}>Per Person (avg)</Text>
              <Text style={styles.summaryValue}>
                ${participants.length > 0
                  ? (calculateTotal() / participants.length).toFixed(2)
                  : "0.00"}
              </Text>
            </View>
          </View>
        )}
      </ScrollView>

      <View style={[styles.footer, { paddingBottom: insets.bottom + 20 }]}>
        <TouchableOpacity
          style={[
            styles.submitButton,
            (createSplitMutation.isPending ||
              !totalAmount ||
              participants.length === 0 ||
              Math.abs(calculateTotal() - parseFloat(totalAmount || "0")) >
                0.01) &&
              styles.submitButtonDisabled,
          ]}
          onPress={handleSubmit}
          disabled={
            createSplitMutation.isPending ||
            !totalAmount ||
            participants.length === 0 ||
            Math.abs(calculateTotal() - parseFloat(totalAmount || "0")) > 0.01
          }
        >
          <Text style={styles.submitButtonText}>
            {createSplitMutation.isPending
              ? "Sending..."
              : "Request Split Payment"}
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.dark.background,
  },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center" as const,
    paddingHorizontal: 20,
    paddingVertical: 16,
    borderBottomWidth: 1,
    borderBottomColor: Colors.dark.border,
  },
  headerTitle: {
    fontSize: 20,
    fontWeight: "700" as const,
    color: Colors.dark.text,
  },
  scrollView: {
    flex: 1,
  },
  scrollContent: {
    padding: 20,
    gap: 20,
  },
  smartSplitBubble: {
    marginHorizontal: 0,
    marginBottom: 0,
  },
  amountCard: {
    backgroundColor: Colors.dark.surface,
    padding: 20,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: Colors.dark.border,
  },
  amountLabel: {
    fontSize: 12,
    fontWeight: "600" as const,
    color: Colors.dark.textSecondary,
    marginBottom: 12,
    textTransform: "uppercase",
    letterSpacing: 0.5,
  },
  amountInputContainer: {
    flexDirection: "row",
    alignItems: "center" as const,
    gap: 8,
  },
  currencySymbol: {
    fontSize: 36,
    fontWeight: "700" as const,
    color: Colors.dark.primary,
  },
  amountInput: {
    flex: 1,
    fontSize: 36,
    fontWeight: "700" as const,
    color: Colors.dark.text,
    ...Platform.select({
      web: {
        outlineStyle: "none" as const,
      },
    }),
  },
  noteCard: {
    backgroundColor: Colors.dark.surface,
    padding: 20,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: Colors.dark.border,
  },
  noteLabel: {
    fontSize: 12,
    fontWeight: "600" as const,
    color: Colors.dark.textSecondary,
    marginBottom: 12,
    textTransform: "uppercase",
    letterSpacing: 0.5,
  },
  noteInput: {
    fontSize: 16,
    color: Colors.dark.text,
    minHeight: 60,
    textAlignVertical: "top",
    ...Platform.select({
      web: {
        outlineStyle: "none" as const,
      },
    }),
  },
  splitTypeCard: {
    backgroundColor: Colors.dark.surface,
    padding: 20,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: Colors.dark.border,
  },
  splitTypeLabel: {
    fontSize: 12,
    fontWeight: "600" as const,
    color: Colors.dark.textSecondary,
    marginBottom: 12,
    textTransform: "uppercase",
    letterSpacing: 0.5,
  },
  splitTypeButtons: {
    flexDirection: "row",
    gap: 12,
  },
  splitTypeButton: {
    flex: 1,
    paddingVertical: 12,
    borderRadius: 8,
    alignItems: "center" as const,
    backgroundColor: Colors.dark.surfaceElevated,
    borderWidth: 2,
    borderColor: "transparent",
  },
  splitTypeButtonActive: {
    backgroundColor: Colors.dark.primary + "20",
    borderColor: Colors.dark.primary,
  },
  splitTypeButtonText: {
    fontSize: 14,
    fontWeight: "600" as const,
    color: Colors.dark.textSecondary,
  },
  splitTypeButtonTextActive: {
    color: Colors.dark.primary,
  },
  section: {
    gap: 16,
  },
  sectionHeader: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center" as const,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: "700" as const,
    color: Colors.dark.text,
  },
  addButton: {
    flexDirection: "row",
    alignItems: "center" as const,
    backgroundColor: Colors.dark.primary,
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 8,
    gap: 6,
  },
  addButtonText: {
    fontSize: 14,
    fontWeight: "600" as const,
    color: Colors.dark.background,
  },
  emptyParticipants: {
    backgroundColor: Colors.dark.surface,
    padding: 40,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    alignItems: "center" as const,
    gap: 12,
  },
  searchContainer: {
    paddingHorizontal: 20,
    paddingBottom: 16,
  },
  searchInput: {
    backgroundColor: Colors.dark.surface,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    borderRadius: 12,
    paddingHorizontal: 16,
    paddingVertical: 12,
    fontSize: 16,
    color: Colors.dark.text,
    ...Platform.select({
      web: {
        outlineStyle: "none" as const,
      },
    }),
  },
  loadingText: {
    fontSize: 14,
    color: Colors.dark.textSecondary,
    textAlign: "center" as const,
    padding: 20,
  },
  emptyText: {
    fontSize: 14,
    fontWeight: "600" as const,
    color: Colors.dark.textSecondary,
    textAlign: "center" as const,
    padding: 20,
  },
  emptySubtext: {
    fontSize: 14,
    color: Colors.dark.textSecondary,
  },
  participantsList: {
    gap: 12,
  },
  participantCard: {
    flexDirection: "row",
    alignItems: "center" as const,
    backgroundColor: Colors.dark.surface,
    padding: 16,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    gap: 12,
  },
  participantAvatar: {
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: Colors.dark.surfaceElevated,
  },
  participantInfo: {
    flex: 1,
  },
  participantName: {
    fontSize: 16,
    fontWeight: "600" as const,
    color: Colors.dark.text,
    marginBottom: 2,
  },
  participantUsername: {
    fontSize: 14,
    color: Colors.dark.textSecondary,
  },
  participantAmount: {
    minWidth: 80,
  },
  participantAmountText: {
    fontSize: 18,
    fontWeight: "700" as const,
    color: Colors.dark.primary,
    textAlign: "right" as const,
  },
  customAmountInput: {
    flexDirection: "row",
    alignItems: "center" as const,
    backgroundColor: Colors.dark.surfaceElevated,
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 8,
    gap: 4,
  },
  customAmountSymbol: {
    fontSize: 16,
    fontWeight: "700" as const,
    color: Colors.dark.primary,
  },
  customAmountField: {
    fontSize: 16,
    fontWeight: "700" as const,
    color: Colors.dark.text,
    minWidth: 50,
    ...Platform.select({
      web: {
        outlineStyle: "none" as const,
      },
    }),
  },
  summaryCard: {
    backgroundColor: Colors.dark.surface,
    padding: 20,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    gap: 12,
  },
  summaryRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center" as const,
  },
  summaryLabel: {
    fontSize: 14,
    color: Colors.dark.textSecondary,
  },
  summaryValue: {
    fontSize: 16,
    fontWeight: "700" as const,
    color: Colors.dark.text,
  },
  summaryError: {
    color: Colors.dark.error,
  },
  userList: {
    gap: 12,
  },
  userCard: {
    flexDirection: "row",
    alignItems: "center" as const,
    backgroundColor: Colors.dark.surface,
    padding: 16,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    gap: 12,
  },
  userAvatar: {
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: Colors.dark.surfaceElevated,
  },
  userInfo: {
    flex: 1,
  },
  userName: {
    fontSize: 16,
    fontWeight: "600" as const,
    color: Colors.dark.text,
    marginBottom: 2,
  },
  userUsername: {
    fontSize: 14,
    color: Colors.dark.textSecondary,
  },
  footer: {
    paddingHorizontal: 20,
    paddingTop: 20,
    borderTopWidth: 1,
    borderTopColor: Colors.dark.border,
    backgroundColor: Colors.dark.background,
  },
  submitButton: {
    backgroundColor: Colors.dark.primary,
    paddingVertical: 18,
    borderRadius: 16,
    alignItems: "center" as const,
  },
  submitButtonDisabled: {
    backgroundColor: Colors.dark.surfaceElevated,
    opacity: 0.5,
  },
  submitButtonText: {
    fontSize: 18,
    fontWeight: "700" as const,
    color: Colors.dark.background,
  },
});