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,
  Receipt,
  Brain,
  Wand2,
  Building2,
  Fingerprint,
  ShieldCheck,
  Scale,
  Wallet,
  Target,
  ShieldAlert,
  ChevronRight,
} from "lucide-react-native";
import Colors from "@/constants/colors";

const FEATURES: {
  id: string;
  title: string;
  description: string;
  icon: typeof Sparkles;
  color: string;
  route: string;
}[] = [
  {
    id: "tax",
    title: "Zendo Tax Engine",
    description: "Auto-categorizes transactions, sets aside taxes, and exports a ready-to-file summary.",
    icon: Receipt,
    color: "#10B981",
    route: "/tax-summary",
  },
  {
    id: "credit-twin",
    title: "Zendo Credit Twin",
    description: "A proprietary ZenScore from your activity - dynamic limits and micro-advances.",
    icon: Brain,
    color: "#6366F1",
    route: "/money-twin",
  },
  {
    id: "subs",
    title: "Recurring Charge Tracker",
    description: "Detects repeat charges from your history and suggests what to cancel or keep.",
    icon: Wand2,
    color: "#F59E0B",
    route: "/subscriptions",
  },
  {
    id: "merchant",
    title: "Zendo Merchant Intelligence Hub",
    description: "Invoicing, instant payouts, revenue forecasting, and auto-categorized books.",
    icon: Building2,
    color: "#3B82F6",
    route: "/business",
  },
  {
    id: "identity",
    title: "Zendo Financial Identity Graph",
    description: "Unifies verification, device trust, behavior, and history into one trust score.",
    icon: Fingerprint,
    color: "#8B5CF6",
    route: "/identity-graph",
  },
  {
    id: "bill-shield",
    title: "Zendo Predictive Bill Shield",
    description: "Forecasts upcoming bills and shields a buffer before you run short.",
    icon: ShieldCheck,
    color: "#06B6D4",
    route: "/cash-flow",
  },
  {
    id: "dispute",
    title: "Zendo AI Dispute Resolver",
    description: "Confidence-scored resolution suggestions from evidence and account signals.",
    icon: Scale,
    color: "#EF4444",
    route: "/disputes",
  },
  {
    id: "wallets",
    title: "Zendo Multi-Wallet Orchestration",
    description: "One view across Everyday, Savings, Business, Bitcoin, and your portfolio.",
    icon: Wallet,
    color: "#0EA5E9",
    route: "/wallets",
  },
  {
    id: "goals",
    title: "Zendo Autonomous Savings Goals",
    description: "Autopilot contributions sized to your income, spending, and risk tolerance.",
    icon: Target,
    color: "#10B981",
    route: "/wallets",
  },
  {
    id: "risk",
    title: "Zendo AI Risk Monitor",
    description: "Real-time device, behavior, and fraud signals with one-tap protection.",
    icon: ShieldAlert,
    color: "#F43F5E",
    route: "/risk-monitor",
  },
];

export default function AISuiteScreen() {
  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.backBtn}>
          <ChevronLeft size={22} color={Colors.dark.text} />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>Zendo AI Finance Suite</Text>
        <View style={{ width: 36 }} />
      </View>

      <ScrollView contentContainerStyle={[styles.content, { paddingBottom: insets.bottom + 32 }]} showsVerticalScrollIndicator={scrollViewWebProps.showsVerticalScrollIndicator}>
        <View style={styles.introCard}>
          <Sparkles size={22} color="#fff" />
          <Text style={styles.introTitle}>Ten autonomous features, one account</Text>
          <Text style={styles.introSub}>
            Every card below runs on your real Zendo activity. Where something needs a licensed
            partner (real tax e-filing, credit bureau reporting, bank-grade fund movement) to go
            fully live, that's called out on the feature's own screen.
          </Text>
        </View>

        {FEATURES.map((f) => {
          const Icon = f.icon;
          return (
            <TouchableOpacity key={f.id} style={styles.card} onPress={() => router.push(f.route as any)}>
              <View style={[styles.cardIcon, { backgroundColor: `${f.color}20` }]}>
                <Icon size={22} color={f.color} />
              </View>
              <View style={styles.cardBody}>
                <Text style={styles.cardTitle}>{f.title}</Text>
                <Text style={styles.cardDescription}>{f.description}</Text>
              </View>
              <ChevronRight size={18} color={Colors.dark.textTertiary} />
            </TouchableOpacity>
          );
        })}
      </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: 16, fontWeight: "700", color: Colors.dark.text },
  content: { padding: 20, gap: 12 },
  introCard: {
    backgroundColor: Colors.dark.primary,
    borderRadius: 18,
    padding: 20,
    gap: 8,
    marginBottom: 8,
  },
  introTitle: { fontSize: 16, fontWeight: "700", color: "#fff", marginTop: 4 },
  introSub: { fontSize: 12, color: "rgba(255,255,255,0.75)", lineHeight: 17 },
  card: {
    flexDirection: "row",
    alignItems: "center",
    gap: 14,
    backgroundColor: Colors.dark.surface,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    padding: 16,
  },
  cardIcon: { width: 44, height: 44, borderRadius: 12, alignItems: "center", justifyContent: "center", flexShrink: 0 },
  cardBody: { flex: 1 },
  cardTitle: { fontSize: 14, fontWeight: "700", color: Colors.dark.text },
  cardDescription: { fontSize: 12, color: Colors.dark.textSecondary, marginTop: 3, lineHeight: 16 },
});