import React, { useState } from 'react';
import { View, Text, FlatList, StyleSheet, TouchableOpacity, Alert } from 'react-native';
import { InsideHeader, Loader } from '../../Component/Index';
import colors from '../../Constant/Color';
import { CreditCard, Calendar, User, DollarSign, ArrowRight } from 'lucide-react-native';
import { useDispatch, useSelector } from 'react-redux';
import { useOfflineAuctionPurchase } from '../../Services/BBPS/Hooks';
import { showSuccessAlert } from '../../Constant/ShowDailog';
import { clearPurchaseAuction } from '../../Redux/Slices/selectPurchaseAuction';
import { CommonActions, useNavigation } from '@react-navigation/native';
import NavigationString from '../../Constant/NavigationString';

const dummyAuctionList = [
    {
        auctionId: 1,
        auctionNumber: 'AUC-2025-001',
        auctionPattern: 'Single Stage',
        auctionDispatchDate: '25 Feb 2025',
        auctionDispatcherNumber: 'DISP-001',
        auctionFees: 2500,
        gst: 18,
        gstAmount: 450,
        portalCharge: 100,
        payableAmount: 3050,
    },
    {
        auctionId: 2,
        auctionNumber: 'AUC-2025-002',
        auctionPattern: 'Two Stage',
        auctionDispatchDate: '28 Feb 2025',
        auctionDispatcherNumber: 'DISP-002',
        auctionFees: 1800,
        gst: 18,
        gstAmount: 324,
        portalCharge: 80,
        payableAmount: 2204,
    },
    {
        auctionId: 3,
        auctionNumber: 'AUC-2025-003',
        auctionPattern: 'Single Stage',
        auctionDispatchDate: '01 Mar 2025',
        auctionDispatcherNumber: 'DISP-003',
        auctionFees: 3200,
        gst: 18,
        gstAmount: 576,
        portalCharge: 120,
        payableAmount: 3896,
    },
];

const PurchaseAuctionList = () => {
    const Navigation = useNavigation()
    const Dispatch = useDispatch()
    const [loading, setLoading] = useState(false);
    const [list, setList] = useState(dummyAuctionList);
    const SelectedPurchaseList = useSelector((state: any) => state.selectPurchaseAuction);
    const { mutate, isPending } = useOfflineAuctionPurchase()
    const calculateTotalAmount = (item: any) => {
        const gstAmount =
            (Number(item.auctionFees) + Number(item.portalCharge)) *
            (Number(item.gst) / 100);

        const payableAmount =
            Number(item.auctionFees) + Number(item.portalCharge) + gstAmount;
        return payableAmount
    }

    const handleOfflinePurchase = async () => {
        const body = {
            auctionDetails: SelectedPurchaseList.map((b: any) => ({
                auctionDispatchDate: b?.auctionDispatchDate,
                auctionDispatcherNumber: b?.auctionDispatcherNumber,
                auctionFees: b?.auctionFees,
                auctionId: b?.auctionId,
                auctionNumber: b?.auctionNumber,
                auctionPattern: b?.auctionPattern,
                gst: b?.gst,
                gstAmount: b?.gstAmount,
                payableAmount: calculateTotalAmount(b),
                portalCharge: b?.portalCharge
            })),
            orderNo: ''
        };

        try {
            mutate(body, {
                onSuccess: (res) => {
                    if (res.statusCode == 200) {
                        showSuccessAlert(res.message)
                        Dispatch(clearPurchaseAuction())
                        Navigation.dispatch(
                            CommonActions.reset({
                                index: 0,
                                routes: [{ name: NavigationString.Home }],
                            })
                        );
                    }
                },
                onError: (error) => {
                    console.log(error, "================purchse Error");
                }
            })

        } catch (error) {
            console.log("purchase offline error", error);
        }
    }

    const handlePurchase = (type: 'online' | 'offline') => {
        setLoading(true);
        setTimeout(() => {
            setLoading(false);
            type === 'online' ? Alert.alert('Online Purchase Successful!') : handleOfflinePurchase();

        }, 1200);
    };

    const renderItem = ({ item }: { item: typeof dummyAuctionList[0] }) => (
        <View style={styles.card}>
            <View style={styles.cardHeader}>
                <Text style={styles.title}>{item.auctionNumber}</Text>
                <Text style={styles.pattern}>{item.auctionPattern}</Text>
            </View>

            <View style={styles.cardRow}>
                <Calendar size={18} color={colors.primary} />
                <Text style={styles.text}>Dispatch Date: {item.auctionDispatchDate}</Text>
            </View>

            <View style={styles.cardRow}>
                <User size={18} color={colors.primary} />
                <Text style={styles.text}>Dispatcher No: {item.auctionDispatcherNumber}</Text>
            </View>

            <View style={styles.cardRow}>
                <DollarSign size={18} color={colors.primary} />
                <Text style={styles.text}>Auction Fees: ₹{item.auctionFees}</Text>
            </View>

            <View style={styles.cardRow}>
                <DollarSign size={18} color={colors.primary} />
                <Text style={styles.text}>GST ({item.gst}%): ₹{item.gstAmount}</Text>
            </View>

            <View style={styles.cardRow}>
                <DollarSign size={18} color={colors.primary} />
                <Text style={styles.text}>Portal Charge: ₹{item.portalCharge}</Text>
            </View>

            <View style={styles.totalRow}>
                <CreditCard size={20} color={colors.white} />
                <Text style={styles.total}>Total: ₹{item.payableAmount}</Text>
            </View>
        </View>
    );

    return (
        <View style={{ flex: 1, backgroundColor: colors.white }}>
            <InsideHeader title="Purchase List" showArrow />
            <View style={styles.screen}>
                <FlatList
                    data={SelectedPurchaseList}
                    renderItem={renderItem}
                    keyExtractor={(item) => item.auctionId.toString()}
                    contentContainerStyle={styles.container}
                />
            </View>

            <View style={styles.bottomButtonContainer}>
                <TouchableOpacity
                    style={[styles.button, { marginRight: 8 }]}
                    onPress={() => handlePurchase('online')}
                >
                    <Text style={styles.buttonText}>Purchase Online</Text>
                    <ArrowRight size={18} color="#fff" style={{ marginLeft: 6 }} />
                </TouchableOpacity>
                <TouchableOpacity
                    style={[styles.button, { marginLeft: 8 }]}
                    onPress={() => handlePurchase('offline')}
                >
                    {
                        isPending ? <Loader size='small' color={colors.white} /> : <>
                            <Text style={styles.buttonText}>Purchase Offline</Text>
                            <ArrowRight size={18} color="#fff" style={{ marginLeft: 6 }} />
                        </>
                    }

                </TouchableOpacity>
            </View>

        </View>
    );
};

export default PurchaseAuctionList;

const styles = StyleSheet.create({
    screen: {
        flex: 1,
    },
    container: {
        padding: 16,
        paddingBottom: 120,
    },
    card: {
        backgroundColor: '#fff',
        borderRadius: 16,
        padding: 16,
        marginBottom: 16,
        elevation: 5,
        shadowColor: '#000',
        shadowOpacity: 0.12,
        shadowOffset: { width: 0, height: 3 },
        shadowRadius: 8,
    },
    cardHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: 12,
    },
    title: {
        fontSize: 16,
        fontWeight: '700',
        color: '#0F172A',
    },
    pattern: {
        fontSize: 14,
        color: colors.primary,
        fontWeight: '600',
    },
    cardRow: {
        flexDirection: 'row',
        alignItems: 'center',
        gap: 6,
        marginBottom: 4,
    },
    text: {
        fontSize: 14,
        color: '#555',
    },
    totalRow: {
        marginTop: 10,
        backgroundColor: colors.primary,
        borderRadius: 12,
        paddingVertical: 10,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        gap: 8,
    },
    total: {
        fontSize: 15,
        fontWeight: '700',
        color: '#fff',
    },
    bottomButtonContainer: {
        position: 'absolute',
        bottom: 0,
        left: 0,
        flexDirection: 'row',
        backgroundColor: colors.white,
        width: '100%',
        paddingVertical: 20,
        paddingHorizontal: 10,
        elevation: 5
    },
    button: {
        flex: 1,
        backgroundColor: colors.primary,
        paddingVertical: 14,
        borderRadius: 12,
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'center',
    },
    buttonText: {
        color: '#fff',
        fontWeight: '700',
        fontSize: 14,
    },
    loadingOverlay: {
        ...StyleSheet.absoluteFillObject,
        backgroundColor: 'rgba(0,0,0,0.2)',
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: 10,
    },
});