import React, { useState, useEffect, useMemo } from "react";
import {
    View,
    Text,
    ScrollView,
    StyleSheet,
    Linking,
    TouchableOpacity,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useTheme } from "../../context/ThemeContext";
import { spacing, borderRadius, fontSize, fontWeight } from "../../theme";
import { getReferralBalance, getPublicSettings } from "../../api/api";

export default function ParrainageScreen() {
    const { colors } = useTheme();
    const [balance, setBalance] = useState<number>(0);
    const [contactTelegram, setContactTelegram] = useState<string>("");

    useEffect(() => {
        getReferralBalance().then((res) => {
            if (res.success) setBalance(res.balance);
        });
        getPublicSettings().then((settings) => {
            if (settings.contact_telegram) {
                setContactTelegram(settings.contact_telegram);
            }
        });
    }, []);

    const steps = [
        {
            icon: "chatbubble-ellipses-outline" as const,
            title: "1. Contacte-nous sur Telegram",
            desc: contactTelegram
                ? `Envoie un message à @${contactTelegram} en indiquant ton username et le username de la personne que tu as parrainée.`
                : "Envoie-nous un message sur Telegram en indiquant ton username et le username de la personne que tu as parrainée.",
        },
        {
            icon: "checkmark-circle-outline" as const,
            title: "2. Validation par l'admin",
            desc: "L'admin vérifie le parrainage et crédite manuellement un solde sur ton compte.",
        },
        {
            icon: "wallet-outline" as const,
            title: "3. Crédit disponible",
            desc: "Le solde apparaît dans ton profil et au moment du paiement. Tu choisis de l'utiliser ou de le cumuler.",
        },
        {
            icon: "cart-outline" as const,
            title: "4. Utilisation à la commande",
            desc: "Au checkout, active l'option \"Utiliser mon crédit parrainage\". Le montant sera déduit de ta commande.",
        },
    ];

    const styles = useMemo(
        () =>
            StyleSheet.create({
                container: { flex: 1, backgroundColor: colors.bgPrimary },
                content: { padding: spacing.xl, paddingBottom: spacing.xxxl },
                balanceCard: {
                    backgroundColor: colors.accent + "18",
                    borderRadius: borderRadius.md,
                    borderWidth: 1,
                    borderColor: colors.accent + "44",
                    padding: spacing.xl,
                    alignItems: "center",
                    marginBottom: spacing.xl,
                },
                balanceLabel: {
                    color: colors.textMuted,
                    fontSize: fontSize.sm,
                    marginTop: spacing.s,
                },
                balanceAmount: {
                    color: colors.accent,
                    fontSize: 36,
                    fontWeight: fontWeight.bold,
                    marginTop: spacing.xs,
                },
                sectionTitle: {
                    color: colors.textPrimary,
                    fontSize: fontSize.lg,
                    fontWeight: fontWeight.bold,
                    marginBottom: spacing.l,
                },
                stepCard: {
                    backgroundColor: colors.bgCard,
                    borderRadius: borderRadius.md,
                    borderWidth: 1,
                    borderColor: colors.borderLight,
                    padding: spacing.l,
                    marginBottom: spacing.m,
                    flexDirection: "row",
                    gap: spacing.m,
                },
                stepIcon: {
                    width: 40,
                    height: 40,
                    borderRadius: 20,
                    backgroundColor: colors.accent + "18",
                    alignItems: "center",
                    justifyContent: "center",
                    flexShrink: 0,
                },
                stepContent: { flex: 1 },
                stepTitle: {
                    color: colors.textPrimary,
                    fontSize: fontSize.md,
                    fontWeight: fontWeight.semibold,
                    marginBottom: spacing.xs,
                },
                stepDesc: {
                    color: colors.textSecondary,
                    fontSize: fontSize.sm,
                    lineHeight: 20,
                },
                ruleCard: {
                    backgroundColor: colors.warning + "12",
                    borderRadius: borderRadius.md,
                    borderWidth: 1,
                    borderColor: colors.warning + "44",
                    padding: spacing.l,
                    marginTop: spacing.m,
                    marginBottom: spacing.l,
                },
                ruleTitle: {
                    color: colors.warning,
                    fontSize: fontSize.md,
                    fontWeight: fontWeight.bold,
                    marginBottom: spacing.s,
                },
                ruleText: {
                    color: colors.textSecondary,
                    fontSize: fontSize.sm,
                    lineHeight: 20,
                },
                ruleExample: {
                    color: colors.textPrimary,
                    fontSize: fontSize.sm,
                    fontWeight: fontWeight.semibold,
                    marginTop: spacing.s,
                    fontStyle: "italic",
                },
                telegramBtn: {
                    flexDirection: "row",
                    alignItems: "center",
                    justifyContent: "center",
                    gap: spacing.s,
                    backgroundColor: "#229ED9",
                    borderRadius: borderRadius.md,
                    padding: spacing.l,
                    marginTop: spacing.l,
                },
                telegramText: {
                    color: "#fff",
                    fontSize: fontSize.md,
                    fontWeight: fontWeight.bold,
                },
            }),
        [colors],
    );

    const handleTelegramPress = () => {
        if (contactTelegram) {
            Linking.openURL(`https://t.me/${contactTelegram}`);
        }
    };

    return (
        <ScrollView style={styles.container} contentContainerStyle={styles.content}>
            {/* Solde actuel */}
            <View style={styles.balanceCard}>
                <Ionicons name="gift-outline" size={32} color={colors.accent} />
                <Text style={styles.balanceLabel}>Mon solde parrainage</Text>
                <Text style={styles.balanceAmount}>{balance.toFixed(2)} €</Text>
            </View>

            {/* Comment ça marche */}
            <Text style={styles.sectionTitle}>Comment ca marche ?</Text>

            {steps.map((step, i) => (
                <View key={i} style={styles.stepCard}>
                    <View style={styles.stepIcon}>
                        <Ionicons name={step.icon} size={20} color={colors.accent} />
                    </View>
                    <View style={styles.stepContent}>
                        <Text style={styles.stepTitle}>{step.title}</Text>
                        <Text style={styles.stepDesc}>{step.desc}</Text>
                    </View>
                </View>
            ))}

            {/* Règle minimum de zone */}
            <View style={styles.ruleCard}>
                <Text style={styles.ruleTitle}>⚠️ Règle importante</Text>
                <Text style={styles.ruleText}>
                    Même avec du crédit parrainage, tu dois toujours payer au minimum le seuil de ta zone de livraison.
                    Le crédit est déduit en plus du montant minimum.
                </Text>
                <Text style={styles.ruleExample}>
                    Exemple : crédit 50 € + zone 50 € = commande de 100 € minimum.
                    Tu paies 50 € et le reste est couvert par ton crédit.
                </Text>
            </View>

            {/* Bouton Telegram */}
            {contactTelegram ? (
                <TouchableOpacity style={styles.telegramBtn} onPress={handleTelegramPress}>
                    <Ionicons name="paper-plane-outline" size={20} color="#fff" />
                    <Text style={styles.telegramText}>
                        Contacter @{contactTelegram}
                    </Text>
                </TouchableOpacity>
            ) : null}
        </ScrollView>
    );
}