import { scrollViewWebProps } from '@/lib/ui/scroll-props';
import { useState } from "react";
import { ActivityIndicator, Modal, Pressable, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Stack } from "expo-router";
import { MapPin, Store, User, X } from "lucide-react-native";

import Colors from "@/constants/colors";
import { useDemoLedger } from "@/lib/demo-ledger";
import { showAlert } from "@/lib/utils/alert";
import { hapticSuccess } from "@/lib/ui/haptics";

const NEARBY_PEOPLE = [
  { name: "Maya Chen", avatar: "https://i.pravatar.cc/150?img=45", distance: "8 ft away" },
  { name: "Jordan Reyes", avatar: "https://i.pravatar.cc/150?img=12", distance: "15 ft away" },
  { name: "Priya Patel", avatar: "https://i.pravatar.cc/150?img=29", distance: "22 ft away" },
];

const NEARBY_MERCHANTS = [
  { name: "Corner Coffee Co.", distance: "0.1 mi" },
  { name: "Greenline Grocery", distance: "0.3 mi" },
  { name: "Bolt Bike Rentals", distance: "0.4 mi" },
];

type PayTarget =
  | { kind: "person"; name: string; avatar?: string }
  | { kind: "merchant"; name: string };

// Nearby Payments - pay the people and places around you using proximity
// instead of hunting down a @handle or QR code first. Paying a merchant
// here also kicks off the One-Tap Split flow afterward, since a purchase
// made near other people is exactly when splitting it makes sense.
export default function NearbyPaymentsScreen() {
  const insets = useSafeAreaInsets();
  const sendMoney = useDemoLedger((s) => s.sendMoney);
  const merchantPay = useDemoLedger((s) => s.merchantPay);
  const requestMoney = useDemoLedger((s) => s.requestMoney);

  const [target, setTarget] = useState<PayTarget | null>(null);
  const [amount, setAmount] = useState("");
  const [isPaying, setIsPaying] = useState(false);
  const [splitPrompt, setSplitPrompt] = useState<{ merchantName: string; amount: number } | null>(null);
  const [selectedSplitNames, setSelectedSplitNames] = useState<string[]>([]);

  const closePay = () => {
    setTarget(null);
    setAmount("");
  };

  const handleConfirmPay = async () => {
    const value = parseFloat(amount);
    if (!target || isNaN(value) || value <= 0) {
      showAlert("Enter an amount", "Add how much you're paying before confirming.");
      return;
    }

    setIsPaying(true);
    if (target.kind === "person") {
      await sendMoney(target.name, value, undefined, { avatar: target.avatar });
      setIsPaying(false);
      closePay();
      hapticSuccess();
      showAlert("Paid", `$${value.toFixed(2)} sent to ${target.name} nearby - no handle needed.`);
    } else {
      await merchantPay(target.name, value);
      setIsPaying(false);
      closePay();
      hapticSuccess();
      setSplitPrompt({ merchantName: target.name, amount: value });
    }
  };

  const toggleSplitName = (name: string) => {
    setSelectedSplitNames((prev) =>
      prev.includes(name) ? prev.filter((n) => n !== name) : [...prev, name]
    );
  };

  const handleConfirmSplit = () => {
    if (!splitPrompt || selectedSplitNames.length === 0) return;
    const shareCount = selectedSplitNames.length + 1;
    const share = Math.round((splitPrompt.amount / shareCount) * 100) / 100;
    selectedSplitNames.forEach((name) => {
      requestMoney(name, share, `Split - ${splitPrompt.merchantName}`);
    });
    showAlert("Requests sent", `Asked ${selectedSplitNames.join(", ")} for $${share.toFixed(2)} each.`);
    setSplitPrompt(null);
    setSelectedSplitNames([]);
  };

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

      <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={scrollViewWebProps.showsVerticalScrollIndicator}>
        <View style={styles.radarBanner}>
          <MapPin color={Colors.dark.primary} size={20} />
          <Text style={styles.radarText}>Showing who and what's around you right now</Text>
        </View>

        <Text style={styles.sectionTitle}>People nearby</Text>
        {NEARBY_PEOPLE.map((person) => (
          <TouchableOpacity
            key={person.name}
            style={styles.row}
            activeOpacity={0.75}
            onPress={() => setTarget({ kind: "person", name: person.name, avatar: person.avatar })}
          >
            <View style={styles.personIcon}>
              <User color={Colors.dark.primary} size={18} />
            </View>
            <View style={styles.rowInfo}>
              <Text style={styles.rowName}>{person.name}</Text>
              <Text style={styles.rowMeta}>{person.distance}</Text>
            </View>
            <Text style={styles.payHint}>Pay</Text>
          </TouchableOpacity>
        ))}

        <Text style={styles.sectionTitle}>Nearby merchants</Text>
        {NEARBY_MERCHANTS.map((merchant) => (
          <TouchableOpacity
            key={merchant.name}
            style={styles.row}
            activeOpacity={0.75}
            onPress={() => setTarget({ kind: "merchant", name: merchant.name })}
          >
            <View style={styles.merchantIcon}>
              <Store color={Colors.dark.secondary} size={18} />
            </View>
            <View style={styles.rowInfo}>
              <Text style={styles.rowName}>{merchant.name}</Text>
              <Text style={styles.rowMeta}>{merchant.distance}</Text>
            </View>
            <Text style={styles.payHint}>Pay</Text>
          </TouchableOpacity>
        ))}
      </ScrollView>

      <Modal visible={!!target} transparent animationType="fade" onRequestClose={closePay}>
        <Pressable style={styles.backdrop} onPress={closePay}>
          <Pressable style={styles.modalCard} onPress={(e) => e.stopPropagation()}>
            <View style={styles.modalHeader}>
              <Text style={styles.modalTitle}>Pay {target?.name}</Text>
              <TouchableOpacity onPress={closePay}>
                <X color={Colors.dark.textSecondary} size={22} />
              </TouchableOpacity>
            </View>
            <View style={styles.amountInputRow}>
              <Text style={styles.dollarSign}>$</Text>
              <TextInput
                style={styles.amountInput}
                value={amount}
                onChangeText={(t) => setAmount(t.replace(/[^0-9.]/g, ""))}
                placeholder="0.00"
                placeholderTextColor={Colors.dark.textTertiary}
                keyboardType="decimal-pad"
                autoFocus
              />
            </View>
            <TouchableOpacity
              style={[styles.submitButton, isPaying && styles.submitButtonDisabled]}
              onPress={handleConfirmPay}
              disabled={isPaying}
              activeOpacity={0.85}
            >
              {isPaying ? <ActivityIndicator color="#FFFFFF" /> : <Text style={styles.submitButtonText}>Confirm Payment</Text>}
            </TouchableOpacity>
          </Pressable>
        </Pressable>
      </Modal>

      <Modal visible={!!splitPrompt} transparent animationType="fade" onRequestClose={() => setSplitPrompt(null)}>
        <Pressable style={styles.backdrop} onPress={() => setSplitPrompt(null)}>
          <Pressable style={styles.modalCard} onPress={(e) => e.stopPropagation()}>
            <View style={styles.modalHeader}>
              <Text style={styles.modalTitle}>Split this purchase?</Text>
              <TouchableOpacity onPress={() => setSplitPrompt(null)}>
                <X color={Colors.dark.textSecondary} size={22} />
              </TouchableOpacity>
            </View>
            <Text style={styles.splitSubtitle}>
              You just paid ${splitPrompt?.amount.toFixed(2)} at {splitPrompt?.merchantName}. Split it with people nearby?
            </Text>
            {NEARBY_PEOPLE.map((person) => {
              const checked = selectedSplitNames.includes(person.name);
              return (
                <TouchableOpacity
                  key={person.name}
                  style={styles.splitOption}
                  onPress={() => toggleSplitName(person.name)}
                  activeOpacity={0.8}
                >
                  <Text style={styles.splitOptionName}>{person.name}</Text>
                  <View style={[styles.checkbox, checked && styles.checkboxActive]}>
                    {checked && <View style={styles.checkboxDot} />}
                  </View>
                </TouchableOpacity>
              );
            })}
            <TouchableOpacity
              style={[styles.submitButton, selectedSplitNames.length === 0 && styles.submitButtonDisabled]}
              onPress={handleConfirmSplit}
              disabled={selectedSplitNames.length === 0}
              activeOpacity={0.85}
            >
              <Text style={styles.submitButtonText}>
                Request {selectedSplitNames.length > 0 ? `${selectedSplitNames.length} ` : ""}Share
                {selectedSplitNames.length === 1 ? "" : "s"}
              </Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => setSplitPrompt(null)} style={styles.skipButton}>
              <Text style={styles.skipButtonText}>No thanks</Text>
            </TouchableOpacity>
          </Pressable>
        </Pressable>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.dark.background,
  },
  content: {
    padding: 20,
    paddingBottom: 60,
  },
  radarBanner: {
    flexDirection: "row" as const,
    alignItems: "center" as const,
    gap: 10,
    backgroundColor: `${Colors.dark.primary}0F`,
    borderRadius: 12,
    padding: 12,
    marginBottom: 20,
  },
  radarText: {
    fontSize: 13,
    color: Colors.dark.textSecondary,
    flex: 1,
  },
  sectionTitle: {
    fontSize: 13,
    fontWeight: "700" as const,
    color: Colors.dark.textSecondary,
    textTransform: "uppercase" as const,
    letterSpacing: 0.5,
    marginBottom: 10,
    marginTop: 8,
  },
  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: 8,
  },
  personIcon: {
    width: 38,
    height: 38,
    borderRadius: 19,
    backgroundColor: `${Colors.dark.primary}14`,
    alignItems: "center" as const,
    justifyContent: "center" as const,
  },
  merchantIcon: {
    width: 38,
    height: 38,
    borderRadius: 19,
    backgroundColor: `${Colors.dark.secondary}14`,
    alignItems: "center" as const,
    justifyContent: "center" as const,
  },
  rowInfo: {
    flex: 1,
  },
  rowName: {
    fontSize: 14,
    fontWeight: "600" as const,
    color: Colors.dark.text,
  },
  rowMeta: {
    fontSize: 12,
    color: Colors.dark.textSecondary,
    marginTop: 2,
  },
  payHint: {
    fontSize: 13,
    fontWeight: "700" as const,
    color: Colors.dark.primary,
  },
  backdrop: {
    flex: 1,
    backgroundColor: "rgba(0,0,0,0.5)",
    justifyContent: "center" as const,
    padding: 20,
  },
  modalCard: {
    backgroundColor: Colors.dark.background,
    borderRadius: 20,
    padding: 24,
  },
  modalHeader: {
    flexDirection: "row" as const,
    justifyContent: "space-between",
    alignItems: "center" as const,
    marginBottom: 16,
  },
  modalTitle: {
    fontSize: 18,
    fontWeight: "700" as const,
    color: Colors.dark.text,
    flex: 1,
  },
  amountInputRow: {
    flexDirection: "row" as const,
    alignItems: "center" as const,
    backgroundColor: Colors.dark.surface,
    borderRadius: 14,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    paddingHorizontal: 16,
    paddingVertical: 8,
    marginBottom: 20,
  },
  dollarSign: {
    fontSize: 28,
    fontWeight: "700" as const,
    color: Colors.dark.primary,
  },
  amountInput: {
    flex: 1,
    fontSize: 28,
    fontWeight: "700" as const,
    color: Colors.dark.text,
    paddingVertical: 8,
  },
  submitButton: {
    backgroundColor: Colors.dark.primary,
    paddingVertical: 16,
    borderRadius: 14,
    alignItems: "center" as const,
  },
  submitButtonDisabled: {
    opacity: 0.5,
  },
  submitButtonText: {
    fontSize: 15,
    fontWeight: "700" as const,
    color: "#FFFFFF",
  },
  splitSubtitle: {
    fontSize: 13,
    color: Colors.dark.textSecondary,
    lineHeight: 19,
    marginBottom: 16,
  },
  splitOption: {
    flexDirection: "row" as const,
    justifyContent: "space-between",
    alignItems: "center" as const,
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: Colors.dark.border,
  },
  splitOptionName: {
    fontSize: 14,
    fontWeight: "600" as const,
    color: Colors.dark.text,
  },
  checkbox: {
    width: 22,
    height: 22,
    borderRadius: 6,
    borderWidth: 2,
    borderColor: Colors.dark.border,
    alignItems: "center" as const,
    justifyContent: "center" as const,
  },
  checkboxActive: {
    borderColor: Colors.dark.primary,
  },
  checkboxDot: {
    width: 12,
    height: 12,
    borderRadius: 3,
    backgroundColor: Colors.dark.primary,
  },
  skipButton: {
    alignItems: "center" as const,
    paddingVertical: 14,
  },
  skipButtonText: {
    fontSize: 13,
    fontWeight: "600" as const,
    color: Colors.dark.textSecondary,
  },
});