import React, { useState, useEffect, useRef } from 'react';
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    Alert,
    ActivityIndicator,
    Modal,
    ScrollView,
    Linking,
    Platform,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { SafeAreaView } from 'react-native-safe-area-context';
import { router, useLocalSearchParams } from 'expo-router';
// import { usePaymentSheet } from '@stripe/stripe-react-native'; // Removed for web
import { AppColors, BorderRadius, FontSizes, FontWeights, Spacing, Shadows } from '@/constants/theme';
import { useAuth } from '@/contexts/AuthContext';
import { api } from '@/services/api';
import { BeneficiaryMenu } from '@/components/ui/BeneficiaryMenu';
import type { Beneficiary } from '@/types';

// const STRIPE_API_URL = 'https://wellnuo.smartlaunchhub.com/api/stripe';
const SUBSCRIPTION_PRICE = 49;

type SubscriptionState = 'active' | 'canceling' | 'none';

export default function SubscriptionScreen() {
    const { id } = useLocalSearchParams<{ id: string }>();
    const [isProcessing, setIsProcessing] = useState(false);
    const [isCanceling, setIsCanceling] = useState(false);
    const [beneficiary, setBeneficiary] = useState<Beneficiary | null>(null);
    const [isLoading, setIsLoading] = useState(true);
    const [showSuccessModal, setShowSuccessModal] = useState(false);
    //   const [justSubscribed, setJustSubscribed] = useState(false);
    const [transactions, setTransactions] = useState<{
        id: string;
        type: 'subscription' | 'one_time';
        amount: number;
        currency: string;
        status: string;
        date: string;
        description: string;
        invoicePdf?: string;
        hostedUrl?: string;
        receiptUrl?: string;
    }[]>([]);
    //   const [isLoadingTransactions, setIsLoadingTransactions] = useState(false);

    // const { initPaymentSheet, presentPaymentSheet } = usePaymentSheet(); // Removed for web
    // const { user } = useAuth(); // Unused here for now

    useEffect(() => {
        loadBeneficiary();
        loadTransactions();
    }, [id]);

    const loadTransactions = async () => {
        if (!id) return;
        // setIsLoadingTransactions(true);
        try {
            const response = await api.getTransactionHistory(parseInt(id, 10));
            if (response.ok && response.data) {
                setTransactions(response.data.transactions);
            }
        } catch (error) {
            // Failed to load transactions
        } finally {
            // setIsLoadingTransactions(false);
        }
    };

    const loadBeneficiary = async () => {
        if (!id) return;
        try {
            const response = await api.getWellNuoBeneficiary(parseInt(id, 10));
            if (response.ok && response.data) {
                setBeneficiary(response.data);
            }
        } catch (error) {
            // Failed to load beneficiary
        } finally {
            setIsLoading(false);
        }
    };

    const subscription = beneficiary?.subscription;

    // Determine subscription state
    const getSubscriptionState = (): SubscriptionState => {
        if (!subscription) return 'none';

        const isStatusActive = subscription.status === 'active' || subscription.status === 'trialing';
        const isNotExpired = !subscription.endDate || new Date(subscription.endDate) > new Date();

        if (isStatusActive && isNotExpired) {
            return subscription.cancelAtPeriodEnd ? 'canceling' : 'active';
        }
        return 'none';
    };

    const subscriptionState = getSubscriptionState();


    const handleSubscribe = async () => {
        // Web Implementation
        alert('Subscriptions are currently only available in the mobile app.');
    };

    const handleCancelSubscription = () => {
        // Web Implementation
        alert('Please use the mobile app to manage your subscription.');
    };

    const confirmCancelSubscription = async () => {
        // Stub
    };

    const handleReactivateSubscription = async () => {
        // Web Implementation
        alert('Please use the mobile app to manage your subscription.');
    };

    const formatDate = (date: Date) => {
        return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
    };

    const openReceipt = (url?: string) => {
        if (url) Linking.openURL(url);
    };

    const handleSuccessModalClose = () => {
        setShowSuccessModal(false);
        router.replace(`/(tabs)/beneficiaries/${id}`);
    };

    // Loading state
    if (isLoading) {
        return (
            <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
                <View style={styles.header}>
                    <TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
                        <Ionicons name="arrow-back" size={24} color={AppColors.textPrimary} />
                    </TouchableOpacity>
                    <Text style={styles.headerTitle}>Subscription</Text>
                    <View style={styles.placeholder} />
                </View>
                <View style={styles.centerContainer}>
                    <ActivityIndicator size="large" color={AppColors.primary} />
                </View>
            </SafeAreaView>
        );
    }

    if (!beneficiary) {
        return (
            <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
                <View style={styles.header}>
                    <TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
                        <Ionicons name="arrow-back" size={24} color={AppColors.textPrimary} />
                    </TouchableOpacity>
                    <Text style={styles.headerTitle}>Subscription</Text>
                    <View style={styles.placeholder} />
                </View>
                <View style={styles.centerContainer}>
                    <Text style={styles.errorText}>Unable to load beneficiary</Text>
                </View>
            </SafeAreaView>
        );
    }

    // Render subscription status card based on state
    const renderStatusCard = () => {
        switch (subscriptionState) {
            case 'active':
                return (
                    <View style={styles.statusCard}>
                        <View style={styles.statusIconActive}>
                            <Ionicons name="checkmark-circle" size={32} color={AppColors.white} />
                        </View>
                        <Text style={styles.statusTitle}>Active Subscription</Text>
                        <Text style={styles.statusSubtitle}>
                            {subscription?.endDate
                                ? `Renews ${formatDate(new Date(subscription.endDate))}`
                                : 'Renews monthly'}
                        </Text>
                        <View style={styles.priceRow}>
                            <Text style={styles.priceAmount}>${SUBSCRIPTION_PRICE}</Text>
                            <Text style={styles.pricePeriod}>/month</Text>
                        </View>
                    </View>
                );

            case 'canceling':
                return (
                    <View style={[styles.statusCard, styles.statusCardCanceling]}>
                        <View style={styles.statusIconCanceling}>
                            <Ionicons name="time" size={32} color={AppColors.white} />
                        </View>
                        <Text style={styles.statusTitle}>Subscription Ending</Text>
                        <Text style={styles.statusSubtitleCanceling}>
                            Access until {subscription?.endDate ? formatDate(new Date(subscription.endDate)) : 'period end'}
                        </Text>
                        <Text style={styles.cancelingNote}>
                            After this date, monitoring and alerts for {beneficiary.displayName} will stop.
                        </Text>
                    </View>
                );

            case 'none':
            default:
                return (
                    <View style={[styles.statusCard, styles.statusCardNone]}>
                        <View style={styles.statusIconNone}>
                            <Ionicons name="shield-outline" size={32} color={AppColors.textMuted} />
                        </View>
                        <Text style={styles.statusTitleNone}>No Active Subscription</Text>
                        <Text style={styles.statusSubtitleNone}>
                            Subscribe to unlock monitoring for {beneficiary.displayName}
                        </Text>
                        <View style={styles.priceRow}>
                            <Text style={styles.priceAmount}>${SUBSCRIPTION_PRICE}</Text>
                            <Text style={styles.pricePeriod}>/month</Text>
                        </View>
                    </View>
                );
        }
    };

    // Render action button based on state
    const renderActionButton = () => {
        switch (subscriptionState) {
            case 'active':
                return (
                    <TouchableOpacity
                        style={styles.cancelButton}
                        onPress={handleCancelSubscription}
                        disabled={isCanceling}
                    >
                        {isCanceling ? (
                            <ActivityIndicator size="small" color={AppColors.textMuted} />
                        ) : (
                            <Text style={styles.cancelButtonText}>Cancel Subscription</Text>
                        )}
                    </TouchableOpacity>
                );

            case 'canceling':
                return (
                    <TouchableOpacity
                        style={[styles.primaryButton, styles.reactivateButton, isProcessing && styles.buttonDisabled]}
                        onPress={handleReactivateSubscription}
                        disabled={isProcessing}
                    >
                        {isProcessing ? (
                            <ActivityIndicator color={AppColors.white} />
                        ) : (
                            <>
                                <Ionicons name="refresh" size={20} color={AppColors.white} />
                                <Text style={styles.primaryButtonText}>Reactivate Subscription</Text>
                            </>
                        )}
                    </TouchableOpacity>
                );

            case 'none':
            default:
                return (
                    <TouchableOpacity
                        style={[styles.primaryButton, isProcessing && styles.buttonDisabled]}
                        onPress={handleSubscribe}
                        disabled={isProcessing}
                    >
                        {isProcessing ? (
                            <ActivityIndicator color={AppColors.white} />
                        ) : (
                            <>
                                <Ionicons name="card" size={20} color={AppColors.white} />
                                <Text style={styles.primaryButtonText}>Subscribe</Text>
                            </>
                        )}
                    </TouchableOpacity>
                );
        }
    };

    return (
        <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
            {/* Header */}
            <View style={styles.header}>
                <TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
                    <Ionicons name="arrow-back" size={24} color={AppColors.textPrimary} />
                </TouchableOpacity>
                <Text style={styles.headerTitle}>Subscription</Text>
                <BeneficiaryMenu
                    beneficiaryId={id || ''}
                    userRole={beneficiary?.role}
                    currentPage="subscription"
                />
            </View>

            <ScrollView
                style={styles.scrollContent}
                contentContainerStyle={[
                    styles.content,
                    // Center content when no subscription and no transactions
                    subscriptionState === 'none' && transactions.length === 0 && styles.contentCentered
                ]}
            >
                {/* Status Card */}
                {renderStatusCard()}

                {/* Action Button */}
                <View style={styles.actionSection}>
                    {renderActionButton()}

                    {/* Security note */}
                    <View style={styles.securityRow}>
                        <Ionicons name="shield-checkmark" size={14} color={AppColors.success} />
                        <Text style={styles.securityText}>Secure payment by Stripe</Text>
                    </View>
                </View>

                {/* Transaction History */}
                {transactions.length > 0 && (
                    <View style={styles.transactionSection}>
                        <Text style={styles.sectionTitle}>Payment History</Text>
                        {transactions.map((tx) => (
                            <TouchableOpacity
                                key={tx.id}
                                style={styles.transactionItem}
                                onPress={() => openReceipt(tx.invoicePdf || tx.hostedUrl || tx.receiptUrl)}
                                disabled={!tx.invoicePdf && !tx.hostedUrl && !tx.receiptUrl}
                            >
                                <View style={styles.transactionLeft}>
                                    <Text style={styles.transactionDesc}>{tx.description}</Text>
                                    <Text style={styles.transactionDate}>{formatDate(new Date(tx.date))}</Text>
                                </View>
                                <View style={styles.transactionRight}>
                                    <Text style={styles.transactionAmount}>${tx.amount.toFixed(2)}</Text>
                                    {(tx.invoicePdf || tx.hostedUrl || tx.receiptUrl) && (
                                        <Ionicons name="chevron-forward" size={16} color={AppColors.textMuted} />
                                    )}
                                </View>
                            </TouchableOpacity>
                        ))}
                    </View>
                )}

                <View style={{ marginTop: 20, padding: 10, backgroundColor: '#f0f9ff', borderRadius: 8 }}>
                    <Text style={{ textAlign: 'center', color: '#0066cc', fontSize: 14 }}>
                        Web version: Subscription management is limited. Please use mobile app.
                    </Text>
                </View>
            </ScrollView>

            {/* Success Modal */}
            <Modal
                visible={showSuccessModal}
                transparent={true}
                animationType="fade"
                onRequestClose={handleSuccessModalClose}
            >
                <View style={styles.modalOverlay}>
                    <View style={styles.modalContent}>
                        <View style={styles.modalIcon}>
                            <Ionicons name="checkmark-circle" size={56} color={AppColors.success} />
                        </View>
                        <Text style={styles.modalTitle}>Subscription Active!</Text>
                        <Text style={styles.modalMessage}>
                            Monitoring for {beneficiary?.name} is now enabled.
                        </Text>
                        <TouchableOpacity style={styles.modalButton} onPress={handleSuccessModalClose}>
                            <Text style={styles.modalButtonText}>Continue</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </Modal>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: AppColors.background,
    },
    header: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: Spacing.md,
        paddingVertical: Spacing.sm,
        borderBottomWidth: 1,
        borderBottomColor: AppColors.border,
    },
    backButton: {
        padding: Spacing.xs,
    },
    headerTitle: {
        fontSize: FontSizes.lg,
        fontWeight: FontWeights.semibold,
        color: AppColors.textPrimary,
    },
    placeholder: {
        width: 32,
    },
    centerContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    errorText: {
        fontSize: FontSizes.base,
        color: AppColors.textMuted,
    },
    scrollContent: {
        flex: 1,
    },
    content: {
        padding: Spacing.lg,
        paddingBottom: Spacing.xxl,
    },
    contentCentered: {
        flexGrow: 1,
        justifyContent: 'center',
    },

    // Status Card Styles
    statusCard: {
        backgroundColor: AppColors.surface,
        borderRadius: BorderRadius.xl,
        padding: Spacing.xl,
        alignItems: 'center',
        borderWidth: 2,
        borderColor: AppColors.success,
        ...Shadows.sm,
    },
    statusCardCanceling: {
        borderColor: '#F59E0B',
        backgroundColor: '#FFFBEB',
    },
    statusCardNone: {
        borderColor: AppColors.border,
        backgroundColor: AppColors.surface,
    },
    statusIconActive: {
        width: 56,
        height: 56,
        borderRadius: 28,
        backgroundColor: AppColors.success,
        alignItems: 'center',
        justifyContent: 'center',
        marginBottom: Spacing.md,
    },
    statusIconCanceling: {
        width: 56,
        height: 56,
        borderRadius: 28,
        backgroundColor: '#F59E0B',
        alignItems: 'center',
        justifyContent: 'center',
        marginBottom: Spacing.md,
    },
    statusIconNone: {
        width: 56,
        height: 56,
        borderRadius: 28,
        backgroundColor: AppColors.surfaceSecondary,
        alignItems: 'center',
        justifyContent: 'center',
        marginBottom: Spacing.md,
    },
    statusTitle: {
        fontSize: FontSizes.xl,
        fontWeight: FontWeights.bold,
        color: AppColors.textPrimary,
        marginBottom: Spacing.xs,
    },
    statusTitleNone: {
        fontSize: FontSizes.xl,
        fontWeight: FontWeights.bold,
        color: AppColors.textSecondary,
        marginBottom: Spacing.xs,
    },
    statusSubtitle: {
        fontSize: FontSizes.sm,
        color: AppColors.success,
        marginBottom: Spacing.md,
    },
    statusSubtitleCanceling: {
        fontSize: FontSizes.sm,
        color: '#B45309',
        fontWeight: FontWeights.medium,
        marginBottom: Spacing.sm,
    },
    statusSubtitleNone: {
        fontSize: FontSizes.sm,
        color: AppColors.textMuted,
        textAlign: 'center',
        marginBottom: Spacing.md,
    },
    cancelingNote: {
        fontSize: FontSizes.sm,
        color: '#92400E',
        textAlign: 'center',
        lineHeight: 20,
    },
    priceRow: {
        flexDirection: 'row',
        alignItems: 'baseline',
    },
    priceAmount: {
        fontSize: FontSizes['2xl'],
        fontWeight: FontWeights.bold,
        color: AppColors.primary,
    },
    pricePeriod: {
        fontSize: FontSizes.base,
        color: AppColors.textMuted,
        marginLeft: 2,
    },

    // Action Section
    actionSection: {
        marginTop: Spacing.xl,
        gap: Spacing.md,
    },
    primaryButton: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        gap: Spacing.sm,
        backgroundColor: AppColors.primary,
        paddingVertical: Spacing.md,
        borderRadius: BorderRadius.lg,
        ...Shadows.sm,
    },
    reactivateButton: {
        backgroundColor: AppColors.success,
    },
    buttonDisabled: {
        opacity: 0.7,
    },
    primaryButtonText: {
        fontSize: FontSizes.base,
        fontWeight: FontWeights.semibold,
        color: AppColors.white,
    },
    cancelButton: {
        paddingVertical: Spacing.sm,
        alignItems: 'center',
    },
    cancelButtonText: {
        fontSize: FontSizes.sm,
        color: AppColors.textMuted,
        textDecorationLine: 'underline',
    },
    securityRow: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        gap: Spacing.xs,
    },
    securityText: {
        fontSize: FontSizes.xs,
        color: AppColors.textMuted,
    },

    // Transaction Section
    transactionSection: {
        marginTop: Spacing.xl,
    },
    sectionTitle: {
        fontSize: FontSizes.base,
        fontWeight: FontWeights.semibold,
        color: AppColors.textPrimary,
        marginBottom: Spacing.md,
    },
    transactionItem: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: AppColors.surface,
        padding: Spacing.md,
        borderRadius: BorderRadius.md,
        marginBottom: Spacing.sm,
    },
    transactionLeft: {
        flex: 1,
    },
    transactionDesc: {
        fontSize: FontSizes.sm,
        fontWeight: FontWeights.medium,
        color: AppColors.textPrimary,
    },
    transactionDate: {
        fontSize: FontSizes.xs,
        color: AppColors.textMuted,
        marginTop: 2,
    },
    transactionRight: {
        flexDirection: 'row',
        alignItems: 'center',
        gap: Spacing.xs,
    },
    transactionAmount: {
        fontSize: FontSizes.sm,
        fontWeight: FontWeights.semibold,
        color: AppColors.textPrimary,
    },

    // Modal
    modalOverlay: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent: 'center',
        alignItems: 'center',
        padding: Spacing.lg,
    },
    modalContent: {
        backgroundColor: AppColors.surface,
        borderRadius: BorderRadius.xl,
        padding: Spacing.xl,
        width: '100%',
        maxWidth: 320,
        alignItems: 'center',
        ...Shadows.lg,
    },
    modalIcon: {
        marginBottom: Spacing.md,
    },
    modalTitle: {
        fontSize: FontSizes.xl,
        fontWeight: FontWeights.bold,
        color: AppColors.textPrimary,
        marginBottom: Spacing.sm,
    },
    modalMessage: {
        fontSize: FontSizes.base,
        color: AppColors.textSecondary,
    },
    modalButton: {
        backgroundColor: AppColors.primary,
        paddingHorizontal: Spacing.xl,
        paddingVertical: Spacing.md,
        borderRadius: BorderRadius.lg,
        marginTop: Spacing.lg,
        width: '100%',
        alignItems: 'center',
    },
    modalButtonText: {
        color: AppColors.white,
        fontWeight: FontWeights.semibold,
        fontSize: FontSizes.base,
    },
});