import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  TextInput,
  ActivityIndicator,
  Platform,
} from "react-native";
import { Stack, useRouter } from "expo-router";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { CreditCard, Sparkles, Truck, Check } from "lucide-react-native";
import Colors from "@/constants/colors";
import { AppSiteFooter } from "@/components/AppSiteFooter";
import { useAuth } from "@/lib/auth-context";
import { useDemoLedger } from "@/lib/demo-ledger";
import { trpc } from "@/lib/trpc";
import { showAlert } from "@/lib/utils/alert";

type CardVariant = "free_physical" | "premium_physical" | "virtual";

const OPTIONS: {
  variant: CardVariant;
  title: string;
  price: string;
  subtitle: string;
  icon: typeof CreditCard;
  accent: string;
}[] = [
  {
    variant: "free_physical",
    title: "Free Zendo Card",
    price: "Free",
    subtitle: "Ships to your address in 7–10 business days",
    icon: Truck,
    accent: Colors.dark.primary,
  },
  {
    variant: "premium_physical",
    title: "Premium Zendo Card",
    price: "$4.99",
    subtitle: "Metal-style design · free shipping · 5–7 days",
    icon: Sparkles,
    accent: "#F59E0B",
  },
  {
    variant: "virtual",
    title: "Virtual Zendo Card",
    price: "Free",
    subtitle: "Instant — use online right away",
    icon: CreditCard,
    accent: "#10B981",
  },
];

export default function OrderZendoCardScreen() {
  const insets = useSafeAreaInsets();
  const router = useRouter();
  const { user, isDemoMode } = useAuth();
  const orderDemoCard = useDemoLedger((s) => s.orderZendoCard);

  const [selected, setSelected] = useState<CardVariant>("free_physical");
  const [line1, setLine1] = useState("");
  const [line2, setLine2] = useState("");
  const [city, setCity] = useState("");
  const [state, setState] = useState("");
  const [postalCode, setPostalCode] = useState("");
  const [loading, setLoading] = useState(false);

  const orderMutation = trpc.railways.orderZendoCard.useMutation({
    onSuccess: () => {
      showAlert("Zendo Card Ordered", "Your card is on the way. Check Cards in Settings for details.");
      router.replace("/settings/cards");
    },
    onError: (err) => showAlert("Could not order card", err.message),
  });

  const needsShipping = selected !== "virtual";

  const handleOrder = async () => {
    if (needsShipping && (!line1.trim() || !city.trim() || !state.trim() || postalCode.trim().length < 5)) {
      showAlert("Shipping address", "Enter your full mailing address to receive your card.");
      return;
    }

    setLoading(true);
    try {
      const shipping = needsShipping
        ? {
            line1: line1.trim(),
            line2: line2.trim() || undefined,
            city: city.trim(),
            state: state.trim().toUpperCase(),
            postalCode: postalCode.trim(),
            country: "US",
          }
        : undefined;

      if (isDemoMode) {
        orderDemoCard(selected, shipping, user?.displayName ?? "You");
        showAlert("Zendo Card Ordered", selected === "virtual" ? "Virtual card is ready in Cards." : "Your card will ship soon.");
        router.replace("/settings/cards");
        return;
      }

      await orderMutation.mutateAsync({ variant: selected, shippingAddress: shipping });
    } finally {
      setLoading(false);
    }
  };

  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <Stack.Screen
        options={{
          title: "Order Zendo Card",
          headerStyle: { backgroundColor: Colors.dark.background },
          headerTintColor: Colors.dark.text,
        }}
      />

      <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={Platform.OS === "web"} nestedScrollEnabled>
        <Text style={styles.headline}>Get your Zendo Card</Text>
        <Text style={styles.subhead}>
          Spend your balance anywhere — just like Cash App and Venmo. Choose free standard shipping or go instant with virtual.
        </Text>

        <View style={styles.options}>
          {OPTIONS.map((opt) => {
            const Icon = opt.icon;
            const active = selected === opt.variant;
            return (
              <TouchableOpacity
                key={opt.variant}
                style={[styles.option, active && styles.optionActive]}
                onPress={() => setSelected(opt.variant)}
                activeOpacity={0.85}
              >
                <View style={[styles.optionIcon, { backgroundColor: `${opt.accent}22` }]}>
                  <Icon size={22} color={opt.accent} />
                </View>
                <View style={styles.optionBody}>
                  <View style={styles.optionTitleRow}>
                    <Text style={styles.optionTitle}>{opt.title}</Text>
                    <Text style={[styles.optionPrice, { color: opt.accent }]}>{opt.price}</Text>
                  </View>
                  <Text style={styles.optionSubtitle}>{opt.subtitle}</Text>
                </View>
                {active ? (
                  <View style={styles.check}>
                    <Check size={14} color="#fff" />
                  </View>
                ) : null}
              </TouchableOpacity>
            );
          })}
        </View>

        {needsShipping ? (
          <View style={styles.addressBlock}>
            <Text style={styles.sectionTitle}>Ship to</Text>
            <TextInput style={styles.input} placeholder="Street address" placeholderTextColor={Colors.dark.textTertiary} value={line1} onChangeText={setLine1} />
            <TextInput style={styles.input} placeholder="Apt, suite (optional)" placeholderTextColor={Colors.dark.textTertiary} value={line2} onChangeText={setLine2} />
            <View style={styles.row}>
              <TextInput style={[styles.input, styles.flex]} placeholder="City" placeholderTextColor={Colors.dark.textTertiary} value={city} onChangeText={setCity} />
              <TextInput style={[styles.input, styles.stateInput]} placeholder="ST" placeholderTextColor={Colors.dark.textTertiary} value={state} onChangeText={setState} maxLength={2} autoCapitalize="characters" />
            </View>
            <TextInput style={styles.input} placeholder="ZIP code" placeholderTextColor={Colors.dark.textTertiary} value={postalCode} onChangeText={setPostalCode} keyboardType="number-pad" maxLength={10} />
            <Text style={styles.shippingNote}>Free shipping · no hidden fees on standard cards</Text>
          </View>
        ) : null}

        <TouchableOpacity style={styles.orderBtn} onPress={handleOrder} disabled={loading || orderMutation.isPending}>
          {loading || orderMutation.isPending ? (
            <ActivityIndicator color={Colors.dark.background} />
          ) : (
            <Text style={styles.orderBtnText}>
              {selected === "virtual" ? "Get Virtual Card" : "Order Card — Free Shipping"}
            </Text>
          )}
        </TouchableOpacity>
        <AppSiteFooter />
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: Colors.dark.background },
  content: { padding: 20, paddingBottom: 40 },
  headline: { fontSize: 26, fontWeight: "700", color: Colors.dark.text, marginBottom: 8 },
  subhead: { fontSize: 14, color: Colors.dark.textSecondary, lineHeight: 20, marginBottom: 24 },
  options: { gap: 12, marginBottom: 24 },
  option: {
    flexDirection: "row",
    alignItems: "center",
    gap: 14,
    padding: 16,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    backgroundColor: Colors.dark.surface,
  },
  optionActive: { borderColor: Colors.dark.primary, backgroundColor: Colors.dark.surfaceElevated },
  optionIcon: { width: 44, height: 44, borderRadius: 12, alignItems: "center", justifyContent: "center" },
  optionBody: { flex: 1 },
  optionTitleRow: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginBottom: 4 },
  optionTitle: { fontSize: 16, fontWeight: "700", color: Colors.dark.text },
  optionPrice: { fontSize: 14, fontWeight: "700" },
  optionSubtitle: { fontSize: 12, color: Colors.dark.textSecondary, lineHeight: 17 },
  check: {
    width: 24,
    height: 24,
    borderRadius: 12,
    backgroundColor: Colors.dark.primary,
    alignItems: "center",
    justifyContent: "center",
  },
  addressBlock: { marginBottom: 24 },
  sectionTitle: { fontSize: 16, fontWeight: "700", color: Colors.dark.text, marginBottom: 12 },
  input: {
    backgroundColor: Colors.dark.surfaceElevated,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    borderRadius: 12,
    padding: 14,
    fontSize: 15,
    color: Colors.dark.text,
    marginBottom: 10,
    ...Platform.select({ web: { outlineStyle: "none" as const } }),
  },
  row: { flexDirection: "row", gap: 10 },
  flex: { flex: 1 },
  stateInput: { width: 72 },
  shippingNote: { fontSize: 12, color: Colors.dark.textTertiary, marginTop: 4 },
  orderBtn: {
    backgroundColor: Colors.dark.primary,
    paddingVertical: 16,
    borderRadius: 14,
    alignItems: "center",
  },
  orderBtnText: { fontSize: 16, fontWeight: "700", color: Colors.dark.background },
});