import { Alert, StyleSheet, Text, View } from "react-native";
import { Crown, CreditCard, Gift, ScanLine, Sparkles } from "lucide-react-native";
import { AppButton } from "../components/AppButton";
import { QrCodeCard } from "../components/QrCodeCard";
import { Screen } from "../components/Screen";
import { SectionHeader } from "../components/SectionHeader";
import { passBenefits } from "../data/mockData";
import { colors } from "../theme/colors";
import { radius, spacing } from "../theme/spacing";
import type { ScreenId } from "../types/domain";

interface PassLocalScreenProps {
  onNavigate: (screen: ScreenId) => void;
}

export function PassLocalScreen({ onNavigate }: PassLocalScreenProps) {
  return (
    <Screen>
      <View style={styles.hero}>
        <View style={styles.iconWrap}>
          <Crown color={colors.surface} size={28} strokeWidth={2.6} />
        </View>
        <Text style={styles.kicker}>Pass Local Premium</Text>
        <Text style={styles.title}>Votre carte d'avantages pour consommer local.</Text>
        <Text style={styles.subtitle}>
          Débloquez les offres Premium, cumulez des points et présentez votre QR Code chez les
          commerçants partenaires.
        </Text>
      </View>

      <View style={styles.plans}>
        <PlanCard
          title="Mensuel"
          price="4,90 €"
          description="Sans engagement, idéal pour tester les avantages."
          onPress={() => Alert.alert("Souscription", "Ouverture Stripe PaymentSheet mensuelle.")}
        />
        <PlanCard
          title="Annuel"
          price="49 €"
          description="Deux mois offerts et accès prioritaire aux animations."
          featured
          onPress={() => Alert.alert("Souscription", "Ouverture Stripe PaymentSheet annuelle.")}
        />
      </View>

      <View style={styles.section}>
        <SectionHeader title="Avantages Premium" subtitle="Pensé pour les habitants fidèles" />
        {passBenefits.map((benefit) => (
          <View key={benefit} style={styles.benefit}>
            <Sparkles color={colors.primary} size={17} strokeWidth={2.5} />
            <Text style={styles.benefitText}>{benefit}</Text>
          </View>
        ))}
      </View>

      <QrCodeCard
        title="Carte digitale membre"
        caption="A présenter chez les commerçants Ambérieu Vitrines."
        value="AV-PASS-PREMIUM-2026-00042"
      />

      <View style={styles.actions}>
        <AppButton
          label="Fidélité digitale"
          icon={ScanLine}
          variant="secondary"
          onPress={() => onNavigate("loyalty")}
        />
        <AppButton
          label="Chèques cadeaux"
          icon={Gift}
          variant="outline"
          onPress={() => onNavigate("giftCards")}
        />
      </View>
    </Screen>
  );
}

interface PlanCardProps {
  title: string;
  price: string;
  description: string;
  featured?: boolean;
  onPress: () => void;
}

function PlanCard({ title, price, description, featured = false, onPress }: PlanCardProps) {
  return (
    <View style={[styles.planCard, featured && styles.planCardFeatured]}>
      {featured ? <Text style={styles.planBadge}>Recommandé</Text> : null}
      <Text style={styles.planTitle}>{title}</Text>
      <Text style={styles.planPrice}>{price}</Text>
      <Text style={styles.planDescription}>{description}</Text>
      <AppButton label="Souscrire" icon={CreditCard} onPress={onPress} compact />
    </View>
  );
}

const styles = StyleSheet.create({
  hero: {
    borderRadius: radius.lg,
    backgroundColor: colors.ink,
    padding: spacing.lg,
    gap: spacing.sm
  },
  iconWrap: {
    width: 54,
    height: 54,
    borderRadius: radius.md,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: colors.primary
  },
  kicker: {
    color: colors.warning,
    fontSize: 12,
    fontWeight: "900",
    textTransform: "uppercase",
    marginTop: spacing.sm
  },
  title: {
    color: colors.surface,
    fontSize: 28,
    lineHeight: 32,
    fontWeight: "900"
  },
  subtitle: {
    color: "#F3EAF0",
    fontSize: 14,
    lineHeight: 20,
    fontWeight: "600"
  },
  plans: {
    flexDirection: "row",
    gap: spacing.sm
  },
  planCard: {
    flex: 1,
    borderRadius: radius.lg,
    backgroundColor: colors.surface,
    borderWidth: 1,
    borderColor: colors.line,
    padding: spacing.md,
    gap: spacing.sm
  },
  planCardFeatured: {
    borderColor: colors.primary,
    backgroundColor: colors.surfaceSoft
  },
  planBadge: {
    color: colors.primary,
    fontSize: 11,
    fontWeight: "900"
  },
  planTitle: {
    color: colors.ink,
    fontSize: 16,
    fontWeight: "900"
  },
  planPrice: {
    color: colors.primary,
    fontSize: 24,
    fontWeight: "900"
  },
  planDescription: {
    color: colors.muted,
    fontSize: 12,
    lineHeight: 17,
    fontWeight: "600",
    minHeight: 50
  },
  section: {
    gap: spacing.md
  },
  benefit: {
    borderRadius: radius.md,
    borderWidth: 1,
    borderColor: colors.line,
    backgroundColor: colors.surface,
    padding: spacing.md,
    flexDirection: "row",
    gap: spacing.sm,
    alignItems: "center"
  },
  benefitText: {
    flex: 1,
    color: colors.ink,
    fontSize: 14,
    lineHeight: 19,
    fontWeight: "700"
  },
  actions: {
    gap: spacing.sm
  }
});