import { scrollViewWebProps } from '@/lib/ui/scroll-props';
import { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  ScrollView,
  TouchableOpacity,
  TextInput,
  Modal,
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useRouter, Stack } from "expo-router";
import {
  ChevronLeft,
  Store,
  Search,
  Star,
  Users,
  Zap,
  TrendingUp,
  PiggyBank,
  Shield,
  Plus,
  ArrowRight,
  DollarSign,
  CheckCircle,
  BarChart3,
} from "lucide-react-native";
import Colors from "@/constants/colors";
import { useAuth } from "@/lib/auth-context";
import { showAlert } from "@/lib/utils/alert";

const CATEGORIES = ["All", "Savings", "Bills", "Tax", "Escrow", "Investing", "Budget"];

const MARKETPLACE_ITEMS = [
  {
    id: "1",
    title: "Freelancer Tax Auto-Bucket",
    creator: "@marco_cfo",
    category: "Tax",
    description: "Automatically sets aside 28% of every incoming payment into a tax savings bucket.",
    subscribers: 2841,
    rating: 4.9,
    price: "$1.99/mo",
    icon: PiggyBank,
    iconColor: "#F59E0B",
    tags: ["Freelance", "Tax"],
    zendoShare: "30% to Zendo",
  },
  {
    id: "2",
    title: "Rent Escrow Shield",
    creator: "@priya_saves",
    category: "Escrow",
    description: "Holds rent funds in smart escrow and releases them on the 1st automatically with dispute protection.",
    subscribers: 1204,
    rating: 4.8,
    price: "$0.99/mo",
    icon: Shield,
    iconColor: "#6366F1",
    tags: ["Rent", "Protection"],
    zendoShare: "30% to Zendo",
  },
  {
    id: "3",
    title: "Gig Income Equalizer",
    creator: "@zendolabs",
    category: "Budget",
    description: "Smooths out irregular gig income into a stable weekly 'salary' you can plan around.",
    subscribers: 5122,
    rating: 4.7,
    price: "$2.49/mo",
    icon: TrendingUp,
    iconColor: "#10B981",
    tags: ["Gig", "Income"],
    zendoShare: "30% to Zendo",
    official: true,
  },
  {
    id: "4",
    title: "Bill Stack Manager",
    creator: "@financeflip",
    category: "Bills",
    description: "Staggers bill payments across the month to prevent cash crunches. Visual bill calendar included.",
    subscribers: 967,
    rating: 4.6,
    price: "$1.49/mo",
    icon: BarChart3,
    iconColor: Colors.dark.primary,
    tags: ["Bills", "Planning"],
    zendoShare: "30% to Zendo",
  },
  {
    id: "5",
    title: "Round-Up Investor",
    creator: "@alexinvests",
    category: "Investing",
    description: "Round up every purchase to the nearest $5 and route the difference to your investment stack.",
    subscribers: 3309,
    rating: 4.8,
    price: "$0.99/mo",
    icon: Zap,
    iconColor: "#8B5CF6",
    tags: ["Investing", "Passive"],
    zendoShare: "30% to Zendo",
  },
];

const MY_STATS = {
  totalEarned: "$284.50",
  subscribers: 94,
  activeRules: 2,
  monthlyRevenue: "$47.20",
};

export default function MarketplaceScreen() {
  const insets = useSafeAreaInsets();
  const router = useRouter();
  const { isDemoMode } = useAuth();
  const [activeCategory, setActiveCategory] = useState("All");
  const [search, setSearch] = useState("");
  const [showPublishModal, setShowPublishModal] = useState(false);
  const [subscribedIds, setSubscribedIds] = useState<string[]>([]);

  const filtered = MARKETPLACE_ITEMS.filter((item) => {
    const matchCat = activeCategory === "All" || item.category === activeCategory;
    const matchSearch =
      !search ||
      item.title.toLowerCase().includes(search.toLowerCase()) ||
      item.creator.toLowerCase().includes(search.toLowerCase());
    return matchCat && matchSearch;
  });

  const handleSubscribe = (item: typeof MARKETPLACE_ITEMS[0]) => {
    if (subscribedIds.includes(item.id)) {
      setSubscribedIds((prev) => prev.filter((id) => id !== item.id));
      showAlert("Unsubscribed", `You've unsubscribed from "${item.title}".`);
    } else {
      setSubscribedIds((prev) => [...prev, item.id]);
      showAlert(
        "✅ Subscribed!",
        `"${item.title}" is now active on your account at ${item.price}. The creator earns 70%.`
      );
    }
  };

  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>
        <View style={styles.headerCenter}>
          <Store size={18} color={Colors.dark.primary} />
          <Text style={styles.headerTitle}>Automation Marketplace</Text>
        </View>
        <TouchableOpacity style={styles.publishBtn} onPress={() => setShowPublishModal(true)}>
          <Plus size={16} color={Colors.dark.primary} />
        </TouchableOpacity>
      </View>

      <ScrollView
        style={styles.scroll}
        contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 32 }]}
        showsVerticalScrollIndicator={scrollViewWebProps.showsVerticalScrollIndicator}
      >
        {/* My Earnings Card */}
        <View style={styles.earningsCard}>
          <View style={styles.earningsHeader}>
            <Text style={styles.earningsTitle}>Your Creator Revenue</Text>
            <TouchableOpacity style={styles.earningsLink}>
              <Text style={styles.earningsLinkText}>Manage</Text>
              <ArrowRight size={12} color={Colors.dark.primary} />
            </TouchableOpacity>
          </View>
          <View style={styles.earningsStats}>
            <View style={styles.earningStat}>
              <Text style={styles.earningStatValue}>{MY_STATS.totalEarned}</Text>
              <Text style={styles.earningStatLabel}>Total earned</Text>
            </View>
            <View style={styles.earningStat}>
              <Text style={styles.earningStatValue}>{MY_STATS.subscribers}</Text>
              <Text style={styles.earningStatLabel}>Subscribers</Text>
            </View>
            <View style={styles.earningStat}>
              <Text style={styles.earningStatValue}>{MY_STATS.monthlyRevenue}</Text>
              <Text style={styles.earningStatLabel}>This month</Text>
            </View>
          </View>
          <TouchableOpacity style={styles.publishCta} onPress={() => setShowPublishModal(true)}>
            <Plus size={14} color="#fff" />
            <Text style={styles.publishCtaText}>Publish a new automation</Text>
          </TouchableOpacity>
        </View>

        {/* Search */}
        <View style={styles.searchRow}>
          <Search size={16} color={Colors.dark.textTertiary} />
          <TextInput
            style={styles.searchInput}
            placeholder="Search automations..."
            placeholderTextColor={Colors.dark.textTertiary}
            value={search}
            onChangeText={setSearch}
          />
        </View>

        {/* Categories */}
        <ScrollView horizontal showsHorizontalScrollIndicator={scrollViewWebProps.showsHorizontalScrollIndicator} style={styles.catScroll} contentContainerStyle={styles.catContent}>
          {CATEGORIES.map((cat) => (
            <TouchableOpacity
              key={cat}
              style={[styles.catChip, activeCategory === cat && styles.catChipActive]}
              onPress={() => setActiveCategory(cat)}
            >
              <Text style={[styles.catChipText, activeCategory === cat && styles.catChipTextActive]}>{cat}</Text>
            </TouchableOpacity>
          ))}
        </ScrollView>

        <Text style={styles.resultCount}>{filtered.length} automations</Text>

        {/* Marketplace Items */}
        {filtered.map((item) => {
          const Icon = item.icon;
          const subscribed = subscribedIds.includes(item.id);
          return (
            <View key={item.id} style={styles.itemCard}>
              <View style={styles.itemTop}>
                <View style={[styles.itemIcon, { backgroundColor: `${item.iconColor}15` }]}>
                  <Icon size={20} color={item.iconColor} />
                </View>
                <View style={styles.itemMeta}>
                  <View style={styles.itemTitleRow}>
                    <Text style={styles.itemTitle}>{item.title}</Text>
                    {item.official && (
                      <View style={styles.officialBadge}>
                        <Text style={styles.officialBadgeText}>Official</Text>
                      </View>
                    )}
                  </View>
                  <Text style={styles.itemCreator}>{item.creator}</Text>
                </View>
                <View style={styles.itemRating}>
                  <Star size={11} color="#F59E0B" fill="#F59E0B" />
                  <Text style={styles.itemRatingText}>{item.rating}</Text>
                </View>
              </View>
              <Text style={styles.itemDesc}>{item.description}</Text>
              <View style={styles.itemTags}>
                {item.tags.map((tag) => (
                  <View key={tag} style={styles.itemTag}>
                    <Text style={styles.itemTagText}>{tag}</Text>
                  </View>
                ))}
              </View>
              <View style={styles.itemFooter}>
                <View style={styles.itemFooterLeft}>
                  <Users size={12} color={Colors.dark.textTertiary} />
                  <Text style={styles.itemSubs}>{item.subscribers.toLocaleString()} subscribers</Text>
                  <Text style={styles.itemShare}>• {item.zendoShare}</Text>
                </View>
                <TouchableOpacity
                  style={[styles.subscribeBtn, subscribed && styles.subscribeBtnActive]}
                  onPress={() => handleSubscribe(item)}
                >
                  {subscribed ? (
                    <>
                      <CheckCircle size={14} color="#10B981" />
                      <Text style={[styles.subscribeBtnText, { color: "#10B981" }]}>Active</Text>
                    </>
                  ) : (
                    <>
                      <DollarSign size={12} color="#fff" />
                      <Text style={styles.subscribeBtnText}>{item.price}</Text>
                    </>
                  )}
                </TouchableOpacity>
              </View>
            </View>
          );
        })}

        {isDemoMode && (
          <View style={styles.demoBanner}>
            <Text style={styles.demoBannerText}>
              🏪 Demo: Marketplace shows live creator revenue sharing at 70/30 split
            </Text>
          </View>
        )}
      </ScrollView>

      {/* Publish Modal */}
      <Modal visible={showPublishModal} transparent animationType="slide">
        <View style={styles.modalOverlay}>
          <View style={styles.modalCard}>
            <Text style={styles.modalTitle}>Publish Your Automation</Text>
            <Text style={styles.modalBody}>
              Turn your money rules into recurring income. Set a price, publish, and earn 70% of every subscription - Zendo takes 30%.
            </Text>
            <View style={styles.publishSteps}>
              {[
                "Build your rule in the Automations tab",
                "Set a name, description, and monthly price",
                "Publish - users can subscribe instantly",
                "Earn every month, passively",
              ].map((step, i) => (
                <View key={i} style={styles.publishStep}>
                  <View style={styles.publishStepNum}>
                    <Text style={styles.publishStepNumText}>{i + 1}</Text>
                  </View>
                  <Text style={styles.publishStepText}>{step}</Text>
                </View>
              ))}
            </View>
            <TouchableOpacity
              style={styles.modalCta}
              onPress={() => {
                setShowPublishModal(false);
                showAlert("Coming Soon", "Automation publishing will be live in the next update. Your rules are ready to monetize!");
              }}
            >
              <Text style={styles.modalCtaText}>Start Publishing</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => setShowPublishModal(false)} style={styles.modalClose}>
              <Text style={styles.modalCloseText}>Maybe later</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </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" },
  headerCenter: { flexDirection: "row", alignItems: "center", gap: 6 },
  headerTitle: { fontSize: 17, fontWeight: "700", color: Colors.dark.text },
  publishBtn: { width: 36, height: 36, borderRadius: 18, backgroundColor: Colors.dark.surface, alignItems: "center", justifyContent: "center", borderWidth: 1, borderColor: Colors.dark.border },
  scroll: { flex: 1 },
  scrollContent: { padding: 20, gap: 14 },
  earningsCard: { backgroundColor: Colors.dark.primary, borderRadius: 20, padding: 20, gap: 14 },
  earningsHeader: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" },
  earningsTitle: { fontSize: 15, fontWeight: "700", color: "#fff" },
  earningsLink: { flexDirection: "row", alignItems: "center", gap: 4, backgroundColor: "rgba(255,255,255,0.15)", paddingHorizontal: 10, paddingVertical: 5, borderRadius: 10 },
  earningsLinkText: { fontSize: 12, fontWeight: "600", color: "#fff" },
  earningsStats: { flexDirection: "row" },
  earningStat: { flex: 1, alignItems: "center" },
  earningStatValue: { fontSize: 20, fontWeight: "800", color: "#fff" },
  earningStatLabel: { fontSize: 11, color: "rgba(255,255,255,0.6)", marginTop: 2 },
  publishCta: { flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 6, backgroundColor: "rgba(255,255,255,0.2)", borderRadius: 12, paddingVertical: 12 },
  publishCtaText: { fontSize: 14, fontWeight: "600", color: "#fff" },
  searchRow: { flexDirection: "row", alignItems: "center", gap: 10, backgroundColor: Colors.dark.surface, borderRadius: 12, paddingHorizontal: 14, paddingVertical: 10, borderWidth: 1, borderColor: Colors.dark.border },
  searchInput: { flex: 1, fontSize: 14, color: Colors.dark.text },
  catScroll: { marginHorizontal: -20 },
  catContent: { paddingHorizontal: 20, gap: 8 },
  catChip: { paddingHorizontal: 16, paddingVertical: 8, borderRadius: 20, backgroundColor: Colors.dark.surface, borderWidth: 1, borderColor: Colors.dark.border },
  catChipActive: { backgroundColor: Colors.dark.primary, borderColor: Colors.dark.primary },
  catChipText: { fontSize: 13, fontWeight: "600", color: Colors.dark.textSecondary },
  catChipTextActive: { color: "#fff" },
  resultCount: { fontSize: 12, color: Colors.dark.textTertiary },
  itemCard: { backgroundColor: Colors.dark.surface, borderRadius: 16, padding: 16, gap: 10, borderWidth: 1, borderColor: Colors.dark.border },
  itemTop: { flexDirection: "row", alignItems: "flex-start", gap: 10 },
  itemIcon: { width: 40, height: 40, borderRadius: 12, alignItems: "center", justifyContent: "center", flexShrink: 0 },
  itemMeta: { flex: 1, gap: 2 },
  itemTitleRow: { flexDirection: "row", alignItems: "center", gap: 6, flexWrap: "wrap" },
  itemTitle: { fontSize: 14, fontWeight: "700", color: Colors.dark.text },
  officialBadge: { backgroundColor: `${Colors.dark.primary}15`, borderRadius: 6, paddingHorizontal: 6, paddingVertical: 2 },
  officialBadgeText: { fontSize: 10, fontWeight: "700", color: Colors.dark.primary },
  itemCreator: { fontSize: 12, color: Colors.dark.textSecondary },
  itemRating: { flexDirection: "row", alignItems: "center", gap: 3 },
  itemRatingText: { fontSize: 12, fontWeight: "700", color: Colors.dark.text },
  itemDesc: { fontSize: 13, color: Colors.dark.textSecondary, lineHeight: 18 },
  itemTags: { flexDirection: "row", gap: 6, flexWrap: "wrap" },
  itemTag: { backgroundColor: Colors.dark.background, borderRadius: 8, paddingHorizontal: 8, paddingVertical: 3, borderWidth: 1, borderColor: Colors.dark.border },
  itemTagText: { fontSize: 11, color: Colors.dark.textSecondary, fontWeight: "500" },
  itemFooter: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingTop: 8, borderTopWidth: 1, borderTopColor: Colors.dark.border },
  itemFooterLeft: { flexDirection: "row", alignItems: "center", gap: 4, flex: 1 },
  itemSubs: { fontSize: 11, color: Colors.dark.textTertiary },
  itemShare: { fontSize: 11, color: Colors.dark.textTertiary },
  subscribeBtn: { flexDirection: "row", alignItems: "center", gap: 5, backgroundColor: Colors.dark.primary, paddingHorizontal: 14, paddingVertical: 8, borderRadius: 10 },
  subscribeBtnActive: { backgroundColor: "#F0FDF4", borderWidth: 1, borderColor: "#86EFAC" },
  subscribeBtnText: { fontSize: 12, fontWeight: "700", color: "#fff" },
  demoBanner: { backgroundColor: `${Colors.dark.primary}10`, borderRadius: 12, padding: 14 },
  demoBannerText: { fontSize: 13, color: Colors.dark.primary, textAlign: "center", fontWeight: "500" },
  modalOverlay: { flex: 1, backgroundColor: "rgba(0,0,0,0.5)", justifyContent: "flex-end" },
  modalCard: { backgroundColor: Colors.dark.background, borderTopLeftRadius: 24, borderTopRightRadius: 24, padding: 28, gap: 16 },
  modalTitle: { fontSize: 20, fontWeight: "800", color: Colors.dark.text },
  modalBody: { fontSize: 14, color: Colors.dark.textSecondary, lineHeight: 22 },
  publishSteps: { gap: 12 },
  publishStep: { flexDirection: "row", alignItems: "flex-start", gap: 12 },
  publishStepNum: { width: 24, height: 24, borderRadius: 12, backgroundColor: Colors.dark.primary, alignItems: "center", justifyContent: "center", flexShrink: 0 },
  publishStepNumText: { fontSize: 12, fontWeight: "700", color: "#fff" },
  publishStepText: { fontSize: 14, color: Colors.dark.text, flex: 1, paddingTop: 3 },
  modalCta: { backgroundColor: Colors.dark.primary, borderRadius: 14, paddingVertical: 16, alignItems: "center" },
  modalCtaText: { fontSize: 16, fontWeight: "700", color: "#fff" },
  modalClose: { alignItems: "center", paddingVertical: 8 },
  modalCloseText: { fontSize: 15, color: Colors.dark.textSecondary },
});