import { scrollViewWebProps } from '@/lib/ui/scroll-props';
import {
  StyleSheet,
  Text,
  View,
  ScrollView,
  TouchableOpacity,
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useRouter, Stack } from "expo-router";
import {
  ChevronLeft,
  Sparkles,
  CheckCircle,
  CreditCard,
} from "lucide-react-native";
import Colors from "@/constants/colors";
import { ZENDO_PLATFORM_PLANS } from "@/backend/db/schema";

const FEATURES = ZENDO_PLATFORM_PLANS.prime.featureList;

export default function ZendoPrimeScreen() {
  const insets = useSafeAreaInsets();
  const router = useRouter();

  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <Stack.Screen options={{ headerShown: false }} />
      <View style={styles.header}>
        <TouchableOpacity onPress={() => router.back()} style={styles.backButton}>
          <ChevronLeft size={24} color={Colors.dark.text} />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>All Features Included</Text>
        <View style={styles.backButton} />
      </View>

      <ScrollView {...scrollViewWebProps} contentContainerStyle={styles.content}>
        <View style={styles.hero}>
          <Sparkles size={40} color={Colors.dark.primary} />
          <Text style={styles.heroTitle}>Every Zendo feature is free</Text>
          <Text style={styles.heroSub}>
            No monthly plans or in-app subscriptions. Explore AI tools, automation, escrow, and more at no cost.
          </Text>
        </View>

        <View style={styles.card}>
          <Text style={styles.cardTitle}>What&apos;s included</Text>
          {FEATURES.map((feature) => (
            <View key={feature} style={styles.featureRow}>
              <CheckCircle size={18} color={Colors.dark.success} />
              <Text style={styles.featureText}>{feature}</Text>
            </View>
          ))}
        </View>

        <TouchableOpacity
          style={styles.cta}
          onPress={() => router.push("/ai-suite")}
        >
          <Text style={styles.ctaText}>Open Zendo Intelligence</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.secondaryCta}
          onPress={() => router.push("/order-zendo-card")}
        >
          <CreditCard size={18} color={Colors.dark.primary} />
          <Text style={styles.secondaryCtaText}>Order a Zendo Card (optional)</Text>
        </TouchableOpacity>

        <Text style={styles.note}>
          The only paid item is an optional Premium Zendo Card ($4.99). Everything else is included.
        </Text>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: Colors.dark.background },
  header: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: 16,
    paddingVertical: 12,
  },
  backButton: { width: 40, height: 40, justifyContent: "center" },
  headerTitle: { fontSize: 18, fontWeight: "700", color: Colors.dark.text },
  content: { padding: 20, paddingBottom: 40 },
  hero: { alignItems: "center", marginBottom: 24 },
  heroTitle: {
    fontSize: 24,
    fontWeight: "800",
    color: Colors.dark.text,
    textAlign: "center",
    marginTop: 12,
  },
  heroSub: {
    fontSize: 15,
    color: Colors.dark.textSecondary,
    textAlign: "center",
    marginTop: 8,
    lineHeight: 22,
  },
  card: {
    backgroundColor: Colors.dark.card,
    borderRadius: 16,
    padding: 20,
    marginBottom: 20,
  },
  cardTitle: { fontSize: 16, fontWeight: "700", color: Colors.dark.text, marginBottom: 12 },
  featureRow: { flexDirection: "row", alignItems: "center", gap: 10, marginBottom: 10 },
  featureText: { flex: 1, fontSize: 14, color: Colors.dark.text },
  cta: {
    backgroundColor: Colors.dark.primary,
    borderRadius: 14,
    paddingVertical: 16,
    alignItems: "center",
    marginBottom: 12,
  },
  ctaText: { color: "#fff", fontSize: 16, fontWeight: "700" },
  secondaryCta: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    gap: 8,
    paddingVertical: 14,
    borderRadius: 14,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    marginBottom: 16,
  },
  secondaryCtaText: { color: Colors.dark.primary, fontSize: 15, fontWeight: "600" },
  note: {
    fontSize: 13,
    color: Colors.dark.textSecondary,
    textAlign: "center",
    lineHeight: 20,
  },
});