import { scrollViewWebProps } from '@/lib/ui/scroll-props';
import { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  ScrollView,
  TouchableOpacity,
  ActivityIndicator,
  Platform,
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Stack } from "expo-router";
import { Sparkles, Wand2, RadioTower } from "lucide-react-native";

import Colors from "@/constants/colors";
import { trpc } from "@/lib/trpc";
import { useAuth } from "@/lib/auth-context";
import { showAlert } from "@/lib/utils/alert";

type Tab = "optimize";

function badgeStyleFor(action: "keep_autorenew" | "negotiate" | "cancel_candidate") {
  if (action === "negotiate") return { backgroundColor: "#FFFBEB" };
  if (action === "cancel_candidate") return { backgroundColor: "#FEF2F2" };
  return { backgroundColor: "#F0FDF4" };
}

function badgeTextStyleFor(action: "keep_autorenew" | "negotiate" | "cancel_candidate") {
  if (action === "negotiate") return { color: "#F59E0B" };
  if (action === "cancel_candidate") return { color: "#EF4444" };
  return { color: "#10B981" };
}

export default function SubscriptionsScreen() {
  const insets = useSafeAreaInsets();
  const { isDemoMode } = useAuth();
  const [tab] = useState<Tab>("optimize");
  const optimizationQuery = trpc.subscriptions.optimization.useQuery(undefined, { enabled: !isDemoMode && tab === "optimize" });
  const detectedQuery = trpc.subscriptions.detectRecurring.useQuery(undefined, { enabled: !isDemoMode && tab === "optimize" });

  const utils = trpc.useUtils();
  const cancelRecurringMutation = trpc.recurring.cancel.useMutation({
    onSuccess: () => {
      showAlert("Cancelled", "That recurring payment has been stopped.");
      utils.subscriptions.optimization.invalidate();
    },
    onError: (err) => showAlert("Couldn't cancel", err.message),
  });
  const trackRecurringMutation = trpc.recurring.create.useMutation({
    onSuccess: () => {
      showAlert("Now tracked", "Added to your recurring payments so Zendo can manage it going forward.");
      utils.subscriptions.detectRecurring.invalidate();
      utils.subscriptions.optimization.invalidate();
    },
    onError: (err) => showAlert("Couldn't track this", err.message),
  });

  const createPlanMutation = trpc.subscriptions.createPlan.useMutation();
  const subscribeMutation = trpc.subscriptions.subscribe.useMutation();
  const cancelMutation = trpc.subscriptions.cancel.useMutation();
  void createPlanMutation;
  void subscribeMutation;
  void cancelMutation;

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

      <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={scrollViewWebProps.showsVerticalScrollIndicator}>
        {tab === "optimize" ? (
          <>
            {isDemoMode ? (
              <View style={styles.emptyState}>
                <Wand2 size={40} color={Colors.dark.textTertiary} />
                <Text style={styles.emptyText}>Subscription optimization needs a real account.</Text>
              </View>
            ) : (
              <>
                {optimizationQuery.data && (
                  <View style={styles.optimizeSummaryRow}>
                    <View style={styles.optimizeSummaryItem}>
                      <Text style={styles.optimizeSummaryValue}>${optimizationQuery.data.totalMonthlySpend.toFixed(2)}</Text>
                      <Text style={styles.optimizeSummaryLabel}>Tracked monthly spend</Text>
                    </View>
                    <View style={styles.optimizeSummaryItem}>
                      <Text style={[styles.optimizeSummaryValue, { color: Colors.dark.success }]}>
                        ${optimizationQuery.data.estimatedMonthlySavingsIfActedOn.toFixed(2)}
                      </Text>
                      <Text style={styles.optimizeSummaryLabel}>Potential monthly savings</Text>
                    </View>
                  </View>
                )}

                {optimizationQuery.isLoading ? (
                  <ActivityIndicator color={Colors.dark.primary} style={{ marginTop: 20 }} />
                ) : (optimizationQuery.data?.suggestions.length ?? 0) > 0 ? (
                  <View style={styles.list}>
                    {optimizationQuery.data!.suggestions.map((s) => (
                      <View key={s.id} style={styles.suggestionCard}>
                        <View style={styles.suggestionTop}>
                          <Text style={styles.subCreator}>{s.label}</Text>
                          <Text style={styles.subPlan}>${s.monthlyAmount.toFixed(2)}/mo</Text>
                        </View>
                        <View style={[styles.actionBadge, badgeStyleFor(s.action)]}>
                          <Text style={[styles.actionBadgeText, badgeTextStyleFor(s.action)]}>
                            {s.action === "negotiate" ? "Negotiate" : s.action === "cancel_candidate" ? "Cancel candidate" : "Keep - auto-renew"}
                          </Text>
                        </View>
                        <Text style={styles.subStatus}>{s.rationale}</Text>
                        {s.source === "recurring" && s.action !== "keep_autorenew" && (
                          <TouchableOpacity
                            style={styles.optimizeActionButton}
                            onPress={() => {
                              if (s.action === "cancel_candidate") {
                                cancelRecurringMutation.mutate({ paymentId: s.id });
                              } else {
                                showAlert("Negotiation drafted", "Zendo flagged this for a discount or annual-plan ask - reach out to the provider directly.");
                              }
                            }}
                            disabled={cancelRecurringMutation.isPending}
                          >
                            <Text style={styles.optimizeActionButtonText}>
                              {s.action === "cancel_candidate" ? "Cancel this" : "Mark as negotiating"}
                            </Text>
                          </TouchableOpacity>
                        )}
                      </View>
                    ))}
                  </View>
                ) : (
                  <View style={styles.emptyState}>
                    <Sparkles size={40} color={Colors.dark.textTertiary} />
                    <Text style={styles.emptyText}>No recurring payments or creator plans to optimize yet.</Text>
                  </View>
                )}

                <View style={styles.detectedHeaderRow}>
                  <RadioTower size={16} color={Colors.dark.primary} />
                  <Text style={styles.detectedHeaderText}>Detected charges that look like subscriptions</Text>
                </View>
                {detectedQuery.isLoading ? (
                  <ActivityIndicator color={Colors.dark.primary} style={{ marginTop: 12 }} />
                ) : (detectedQuery.data?.detected.length ?? 0) > 0 ? (
                  <View style={styles.list}>
                    {detectedQuery.data!.detected.map((d, i) => (
                      <View key={i} style={styles.suggestionCard}>
                        <View style={styles.suggestionTop}>
                          <Text style={styles.subCreator}>{d.recipientName}</Text>
                          <Text style={styles.subPlan}>~${d.averageAmount.toFixed(2)}/{d.estimatedCadence === "weekly" ? "wk" : "mo"}</Text>
                        </View>
                        <Text style={styles.subStatus}>{d.occurrences} matching charges found - not tracked yet.</Text>
                        {d.recipientUsername && (
                          <TouchableOpacity
                            style={styles.optimizeActionButton}
                            disabled={trackRecurringMutation.isPending}
                            onPress={() =>
                              trackRecurringMutation.mutate({
                                toUsername: d.recipientUsername!,
                                amount: d.averageAmount,
                                frequency: d.estimatedCadence === "weekly" ? "weekly" : "monthly",
                                note: d.note,
                              })
                            }
                          >
                            <Text style={styles.optimizeActionButtonText}>Track as subscription</Text>
                          </TouchableOpacity>
                        )}
                      </View>
                    ))}
                  </View>
                ) : (
                  <Text style={styles.emptyText}>No undetected recurring charges found right now.</Text>
                )}
              </>
            )}
          </>
        ) : null}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.dark.background,
  },
  tabs: {
    flexDirection: "row" as const,
    paddingHorizontal: 20,
    gap: 12,
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: Colors.dark.border,
  },
  tab: {
    flex: 1,
    paddingVertical: 10,
    alignItems: "center" as const,
    borderRadius: 10,
    backgroundColor: Colors.dark.surface,
  },
  tabActive: {
    backgroundColor: Colors.dark.primary,
  },
  tabText: {
    fontSize: 13,
    fontWeight: "700" as const,
    color: Colors.dark.textSecondary,
  },
  tabTextActive: {
    color: Colors.dark.background,
  },
  content: {
    padding: 20,
    paddingBottom: 60,
  },
  findButton: {
    flexDirection: "row" as const,
    alignItems: "center" as const,
    justifyContent: "center" as const,
    gap: 8,
    backgroundColor: `${Colors.dark.primary}1A`,
    paddingVertical: 14,
    borderRadius: 12,
    marginBottom: 20,
  },
  findButtonText: {
    fontSize: 14,
    fontWeight: "700" as const,
    color: Colors.dark.primary,
  },
  list: {
    gap: 10,
  },
  subCard: {
    flexDirection: "row" as const,
    alignItems: "center" as const,
    backgroundColor: Colors.dark.surface,
    borderRadius: 14,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    padding: 14,
  },
  subInfo: {
    flex: 1,
  },
  subCreator: {
    fontSize: 15,
    fontWeight: "700" as const,
    color: Colors.dark.text,
  },
  subPlan: {
    fontSize: 13,
    color: Colors.dark.textSecondary,
    marginTop: 2,
  },
  subStatus: {
    fontSize: 12,
    color: Colors.dark.textTertiary,
    marginTop: 4,
  },
  cancelButton: {
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderRadius: 8,
    backgroundColor: `${Colors.dark.error}1A`,
  },
  cancelButtonText: {
    fontSize: 12,
    fontWeight: "700" as const,
    color: Colors.dark.error,
  },
  optimizeSummaryRow: {
    flexDirection: "row" as const,
    gap: 12,
    marginBottom: 16,
  },
  optimizeSummaryItem: {
    flex: 1,
    backgroundColor: Colors.dark.surface,
    borderRadius: 14,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    padding: 14,
    alignItems: "center" as const,
  },
  optimizeSummaryValue: {
    fontSize: 18,
    fontWeight: "800" as const,
    color: Colors.dark.text,
  },
  optimizeSummaryLabel: {
    fontSize: 11,
    color: Colors.dark.textSecondary,
    marginTop: 2,
    textAlign: "center" as const,
  },
  suggestionCard: {
    backgroundColor: Colors.dark.surface,
    borderRadius: 14,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    padding: 14,
    gap: 8,
  },
  suggestionTop: {
    flexDirection: "row" as const,
    justifyContent: "space-between" as const,
    alignItems: "center" as const,
  },
  actionBadge: {
    alignSelf: "flex-start" as const,
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderRadius: 8,
  },
  actionBadgeText: {
    fontSize: 11,
    fontWeight: "700" as const,
  },
  optimizeActionButton: {
    alignSelf: "flex-start" as const,
    backgroundColor: Colors.dark.surfaceElevated,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 8,
  },
  optimizeActionButtonText: {
    fontSize: 12,
    fontWeight: "700" as const,
    color: Colors.dark.primary,
  },
  detectedHeaderRow: {
    flexDirection: "row" as const,
    alignItems: "center" as const,
    gap: 7,
    marginTop: 24,
    marginBottom: 12,
  },
  detectedHeaderText: {
    fontSize: 14,
    fontWeight: "700" as const,
    color: Colors.dark.text,
  },
  emptyState: {
    alignItems: "center" as const,
    marginTop: 40,
    gap: 12,
    paddingHorizontal: 20,
  },
  emptyText: {
    fontSize: 13,
    color: Colors.dark.textSecondary,
    textAlign: "center" as const,
    lineHeight: 18,
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: "rgba(0,0,0,0.5)",
    justifyContent: "flex-end" as const,
  },
  modalContent: {
    backgroundColor: Colors.dark.card,
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    padding: 24,
    maxHeight: "85%",
  },
  modalHeader: {
    flexDirection: "row" as const,
    justifyContent: "space-between" as const,
    alignItems: "center" as const,
    marginBottom: 20,
  },
  modalTitle: {
    fontSize: 18,
    fontWeight: "700" as const,
    color: Colors.dark.text,
  },
  modalLabel: {
    fontSize: 12,
    fontWeight: "700" as const,
    color: Colors.dark.textSecondary,
    textTransform: "uppercase" as const,
    marginBottom: 8,
    marginTop: 12,
  },
  modalInput: {
    backgroundColor: Colors.dark.surfaceElevated,
    borderRadius: 12,
    padding: 14,
    fontSize: 15,
    color: Colors.dark.text,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    ...Platform.select({
      web: { outlineStyle: "none" as const },
    }),
  },
  modalEmptyText: {
    fontSize: 13,
    color: Colors.dark.textSecondary,
    textAlign: "center" as const,
    marginTop: 16,
  },
  intervalRow: {
    flexDirection: "row" as const,
    gap: 8,
  },
  intervalChip: {
    flex: 1,
    alignItems: "center" as const,
    paddingVertical: 10,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    backgroundColor: Colors.dark.surfaceElevated,
  },
  intervalChipActive: {
    borderColor: Colors.dark.primary,
    backgroundColor: `${Colors.dark.primary}1A`,
  },
  intervalChipText: {
    fontSize: 13,
    fontWeight: "600" as const,
    color: Colors.dark.textSecondary,
  },
  intervalChipTextActive: {
    color: Colors.dark.primary,
  },
  planOption: {
    flexDirection: "row" as const,
    alignItems: "center" as const,
    backgroundColor: Colors.dark.surfaceElevated,
    borderRadius: 12,
    padding: 14,
    marginTop: 8,
  },
  confirmButton: {
    backgroundColor: Colors.dark.primary,
    paddingVertical: 16,
    borderRadius: 12,
    alignItems: "center" as const,
    marginTop: 24,
  },
  confirmButtonText: {
    fontSize: 16,
    fontWeight: "700" as const,
    color: Colors.dark.background,
  },
});