import { scrollViewWebProps } from '@/lib/ui/scroll-props';
import { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  ScrollView,
  TouchableOpacity,
  ActivityIndicator,
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useRouter, Stack } from "expo-router";
import {
  ChevronLeft,
  Brain,
  TrendingUp,
  TrendingDown,
  AlertTriangle,
  CheckCircle,
  Zap,
  Shield,
  Sparkles,
  Info,
  Wallet,
} from "lucide-react-native";
import Colors from "@/constants/colors";
import { useAuth } from "@/lib/auth-context";
import { trpc } from "@/lib/trpc";
import { showAlert } from "@/lib/utils/alert";

function iconForFactor(impact: "positive" | "negative" | "neutral") {
  if (impact === "positive") return CheckCircle;
  if (impact === "negative") return AlertTriangle;
  return Info;
}

function colorForFactor(impact: "positive" | "negative" | "neutral") {
  if (impact === "positive") return { color: "#10B981", bg: "#F0FDF4" };
  if (impact === "negative") return { color: "#EF4444", bg: "#FEF2F2" };
  return { color: "#6366F1", bg: "#EEF2FF" };
}

export default function MoneyTwinScreen() {
  const insets = useSafeAreaInsets();
  const router = useRouter();
  const { isDemoMode } = useAuth();
  const [requesting, setRequesting] = useState(false);

  const twinQuery = trpc.credit.twin.useQuery(undefined, { enabled: !isDemoMode });
  const utils = trpc.useUtils();
  const advanceMutation = trpc.credit.requestMicroAdvance.useMutation({
    onSuccess: (data) => {
      showAlert(
        "Micro-advance funded",
        `$${data.amount.toFixed(2)} requested, $${data.flatFee.toFixed(2)} flat fee, $${data.netCredit.toFixed(2)} landed in your Everyday balance. This is a simulated, in-app advance - not a real loan.`
      );
      utils.credit.twin.invalidate();
      utils.wallets.get.invalidate();
    },
    onError: (err) => showAlert("Couldn't process that", err.message),
    onSettled: () => setRequesting(false),
  });

  const data = twinQuery.data;
  const scoreRangeSpan = data ? data.scoreRange.max - data.scoreRange.min : 1;
  const scorePct = data ? Math.max(0, Math.min(1, (data.score - data.scoreRange.min) / scoreRangeSpan)) : 0;

  const handleRequestAdvance = () => {
    if (!data?.microCreditOffer) return;
    showAlert(
      `Request $${data.microCreditOffer.amount.toFixed(2)} advance?`,
      `Flat fee: $${data.microCreditOffer.flatFee.toFixed(2)}. Term: ${data.microCreditOffer.termDays} days. This is a simulated Zendo-only advance.`
    );
    setRequesting(true);
    advanceMutation.mutate({});
  };

  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <Stack.Screen options={{ headerShown: false }} />
      <View style={styles.header}>
        <TouchableOpacity onPress={() => router.back()} style={styles.backBtn}>
          <ChevronLeft size={22} color={Colors.dark.text} />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>Zendo Credit Twin</Text>
        <View style={[styles.statusBadge, styles.statusBadgeActive]}>
          <View style={[styles.statusDot, styles.statusDotActive]} />
          <Text style={[styles.statusText, styles.statusTextActive]}>Live</Text>
        </View>
      </View>

      {isDemoMode ? (
        <View style={styles.emptyState}>
          <Brain size={48} color={Colors.dark.textTertiary} />
          <Text style={styles.emptyText}>Credit Twin needs a real account with transaction history to build a score.</Text>
        </View>
      ) : twinQuery.isLoading ? (
        <ActivityIndicator color={Colors.dark.primary} style={{ marginTop: 60 }} />
      ) : !data ? (
        <View style={styles.emptyState}>
          <Text style={styles.emptyText}>Couldn&apos;t load your Credit Twin.</Text>
        </View>
      ) : (
        <ScrollView
          style={styles.scroll}
          contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 32 }]}
          showsVerticalScrollIndicator={scrollViewWebProps.showsVerticalScrollIndicator}
        >
          {/* Hero Card */}
          <View style={styles.heroCard}>
            <View style={styles.heroTop}>
              <View style={styles.brainIcon}>
                <Brain size={28} color="#fff" />
              </View>
              <View style={styles.heroMeta}>
                <Text style={styles.heroTitle}>Your ZenScore</Text>
                <Text style={styles.heroSub}>Zendo-only signal • {data.tier}</Text>
              </View>
            </View>
            <Text style={styles.scoreValue}>{data.score}</Text>
            <View style={styles.scoreTrack}>
              <View style={[styles.scoreFill, { width: `${scorePct * 100}%` }]} />
            </View>
            <View style={styles.scoreRangeLabels}>
              <Text style={styles.scoreRangeText}>{data.scoreRange.min}</Text>
              <Text style={styles.scoreRangeText}>{data.scoreRange.max}</Text>
            </View>
            <View style={styles.heroStats}>
              <View style={styles.heroStat}>
                <Text style={styles.heroStatValue}>${data.recommendedLimit.toLocaleString()}</Text>
                <Text style={styles.heroStatLabel}>Recommended limit</Text>
              </View>
              <View style={styles.heroStatDivider} />
              <View style={styles.heroStat}>
                <Text style={styles.heroStatValue}>${data.monthlyIncomeAvg.toLocaleString()}</Text>
                <Text style={styles.heroStatLabel}>Avg monthly income</Text>
              </View>
            </View>
          </View>

          {data.microCreditOffer && (
            <View style={styles.offerCard}>
              <View style={styles.offerTop}>
                <Wallet size={20} color="#fff" />
                <Text style={styles.offerTitle}>Micro-advance available</Text>
              </View>
              <Text style={styles.offerDetail}>
                You&apos;re eligible for a ${data.microCreditOffer.amount.toFixed(2)} advance - a flat ${data.microCreditOffer.flatFee.toFixed(2)} fee, {data.microCreditOffer.termDays}-day term, no interest.
              </Text>
              <TouchableOpacity
                style={styles.offerButton}
                onPress={handleRequestAdvance}
                disabled={requesting || advanceMutation.isPending}
              >
                {requesting || advanceMutation.isPending ? (
                  <ActivityIndicator color={Colors.dark.primary} />
                ) : (
                  <Text style={styles.offerButtonText}>Request advance</Text>
                )}
              </TouchableOpacity>
            </View>
          )}

          {/* Factors */}
          <View style={styles.sectionHeader}>
            <Sparkles size={16} color={Colors.dark.primary} />
            <Text style={styles.sectionTitle}>What's shaping your score</Text>
          </View>

          {data.factors.map((factor) => {
            const Icon = iconForFactor(factor.impact);
            const { color, bg } = colorForFactor(factor.impact);
            return (
              <View key={factor.id} style={[styles.insightCard, { backgroundColor: bg }]}>
                <View style={styles.insightTop}>
                  <View style={[styles.insightIcon, { backgroundColor: `${color}20` }]}>
                    <Icon size={18} color={color} />
                  </View>
                  <View style={styles.insightBody}>
                    <View style={styles.insightTitleRow}>
                      <Text style={[styles.insightTitle, { color }]}>{factor.label}</Text>
                      <Text style={[styles.insightWeight, { color }]}>
                        {factor.weight >= 0 ? "+" : ""}{Math.round(factor.weight)}
                      </Text>
                    </View>
                    <Text style={styles.insightDetail}>{factor.detail}</Text>
                  </View>
                </View>
              </View>
            );
          })}

          {/* Twin Abilities */}
          <View style={[styles.sectionHeader, { marginTop: 8 }]}>
            <Zap size={16} color={Colors.dark.primary} />
            <Text style={styles.sectionTitle}>What Credit Twin does</Text>
          </View>

          {[
            { icon: Brain, label: "Builds your ZenScore from real account activity", sub: "Tenure, reliability, cash-flow stability, trust network" },
            { icon: Shield, label: "Adjusts as your habits change", sub: "Recomputed fresh every time you open this screen" },
            { icon: TrendingUp, label: "Recommends a dynamic limit", sub: "Scales with income and score, not a fixed number" },
            { icon: TrendingDown, label: "Flags what's holding you back", sub: "Open fraud flags and disputes lower your score" },
          ].map((item, i) => {
            const Icon = item.icon;
            return (
              <View key={i} style={styles.abilityRow}>
                <View style={styles.abilityIcon}>
                  <Icon size={18} color={Colors.dark.primary} />
                </View>
                <View style={styles.abilityBody}>
                  <Text style={styles.abilityLabel}>{item.label}</Text>
                  <Text style={styles.abilitySub}>{item.sub}</Text>
                </View>
              </View>
            );
          })}

          <View style={styles.demoBanner}>
            <Text style={styles.demoBannerText}>{data.disclaimer}</Text>
          </View>
        </ScrollView>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: Colors.dark.background },
  header: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: 20,
    paddingVertical: 14,
    borderBottomWidth: 1,
    borderBottomColor: Colors.dark.border,
  },
  backBtn: { width: 36, height: 36, borderRadius: 18, backgroundColor: Colors.dark.surface, alignItems: "center", justifyContent: "center" },
  headerTitle: { fontSize: 17, fontWeight: "700", color: Colors.dark.text },
  statusBadge: { flexDirection: "row", alignItems: "center", gap: 5, backgroundColor: Colors.dark.surface, paddingHorizontal: 10, paddingVertical: 5, borderRadius: 12, borderWidth: 1, borderColor: Colors.dark.border },
  statusBadgeActive: { backgroundColor: "#F0FDF4", borderColor: "#86EFAC" },
  statusDot: { width: 6, height: 6, borderRadius: 3, backgroundColor: Colors.dark.textTertiary },
  statusDotActive: { backgroundColor: "#10B981" },
  statusText: { fontSize: 12, fontWeight: "600", color: Colors.dark.textSecondary },
  statusTextActive: { color: "#10B981" },
  scroll: { flex: 1 },
  scrollContent: { padding: 20, gap: 12 },
  emptyState: { flex: 1, alignItems: "center", justifyContent: "center", padding: 40, gap: 12 },
  emptyText: { fontSize: 14, color: Colors.dark.textSecondary, textAlign: "center" },
  heroCard: {
    backgroundColor: Colors.dark.primary,
    borderRadius: 20,
    padding: 22,
    gap: 14,
  },
  heroTop: { flexDirection: "row", alignItems: "center", gap: 14 },
  brainIcon: { width: 52, height: 52, borderRadius: 16, backgroundColor: "rgba(255,255,255,0.15)", alignItems: "center", justifyContent: "center" },
  heroMeta: { flex: 1 },
  heroTitle: { fontSize: 17, fontWeight: "700", color: "#fff" },
  heroSub: { fontSize: 13, color: "rgba(255,255,255,0.65)", marginTop: 2 },
  scoreValue: { fontSize: 48, fontWeight: "800", color: "#fff" },
  scoreTrack: { height: 8, borderRadius: 4, backgroundColor: "rgba(255,255,255,0.2)", overflow: "hidden" },
  scoreFill: { height: 8, borderRadius: 4, backgroundColor: "#fff" },
  scoreRangeLabels: { flexDirection: "row", justifyContent: "space-between" },
  scoreRangeText: { fontSize: 11, color: "rgba(255,255,255,0.5)" },
  heroStats: { flexDirection: "row", alignItems: "center", marginTop: 4 },
  heroStat: { flex: 1, alignItems: "center" },
  heroStatValue: { fontSize: 20, fontWeight: "800", color: "#fff" },
  heroStatLabel: { fontSize: 11, color: "rgba(255,255,255,0.6)", marginTop: 2, textAlign: "center" },
  heroStatDivider: { width: 1, height: 36, backgroundColor: "rgba(255,255,255,0.2)" },
  offerCard: { backgroundColor: "#6366F1", borderRadius: 16, padding: 18, gap: 10 },
  offerTop: { flexDirection: "row", alignItems: "center", gap: 8 },
  offerTitle: { fontSize: 15, fontWeight: "700", color: "#fff" },
  offerDetail: { fontSize: 13, color: "rgba(255,255,255,0.85)", lineHeight: 18 },
  offerButton: { backgroundColor: "#fff", borderRadius: 12, paddingVertical: 12, alignItems: "center", marginTop: 4 },
  offerButtonText: { fontSize: 14, fontWeight: "700", color: "#6366F1" },
  sectionHeader: { flexDirection: "row", alignItems: "center", gap: 7, marginTop: 8, marginBottom: 4 },
  sectionTitle: { fontSize: 15, fontWeight: "700", color: Colors.dark.text },
  insightCard: { borderRadius: 16, padding: 16, gap: 12, borderWidth: 1, borderColor: "transparent" },
  insightTop: { flexDirection: "row", gap: 12 },
  insightIcon: { width: 36, height: 36, borderRadius: 10, alignItems: "center", justifyContent: "center", flexShrink: 0 },
  insightBody: { flex: 1, gap: 4 },
  insightTitleRow: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
  insightTitle: { fontSize: 14, fontWeight: "700" },
  insightWeight: { fontSize: 13, fontWeight: "700" },
  insightDetail: { fontSize: 13, color: Colors.dark.textSecondary, lineHeight: 18 },
  abilityRow: { flexDirection: "row", alignItems: "flex-start", gap: 12, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: Colors.dark.border },
  abilityIcon: { width: 36, height: 36, borderRadius: 10, backgroundColor: `${Colors.dark.primary}10`, alignItems: "center", justifyContent: "center", flexShrink: 0 },
  abilityBody: { flex: 1 },
  abilityLabel: { fontSize: 14, fontWeight: "600", color: Colors.dark.text },
  abilitySub: { fontSize: 12, color: Colors.dark.textSecondary, marginTop: 2 },
  demoBanner: { backgroundColor: `${Colors.dark.primary}10`, borderRadius: 12, padding: 14, marginTop: 8 },
  demoBannerText: { fontSize: 12, color: Colors.dark.primary, textAlign: "center", fontWeight: "500" },
});