import React, { memo, useState, useMemo } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Platform, Modal } from 'react-native';
import { Package, IndianRupee, FileText, Download, ArrowLeft, Info, } from 'lucide-react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useAucitonItemDetail } from '../../../Services/ApiCall/Hooks';
import ReactNativeBlobUtil from 'react-native-blob-util';
import { AUCTION_ITEM_DOCUMENT_DOWNLOAD } from '../../../Services/ApiCall/ApiUrls';
import { Loader } from '../../../Component/Index';
import { useTheme } from '../../../Hooks/useTheme';
import AppText from '../../../components/AppText';

interface Props { visible: boolean; onClose: () => void; data?: any; }

const Section = ({ title, icon: Icon, children, styles, colors }: any) => (
    <View style={styles.sectionCard}>
        <View style={styles.sectionHeader}>
            <View style={styles.iconCircle}>
                <Icon size={18} color={colors.primary} strokeWidth={2.5} />
            </View>
            <AppText variant="caption" bold style={styles.sectionTitle}>{title}</AppText>
        </View>
        {children}
    </View>
);

const PriceTile = ({ label, fig, words, full = false, styles }: any) => (
    <View style={[styles.priceTile, full ? { width: '100%' } : { width: '48%' }]}>
        <AppText variant="caption" color={styles.label.color} bold style={styles.label}>{label}</AppText>
        <AppText variant="h3" bold style={styles.priceFig}>₹{Number(fig).toLocaleString('en-IN')}</AppText>
        <AppText variant="caption" style={styles.priceWords}>{words}</AppText>
    </View>
);

const AuctionItemDetail: React.FC<Props> = ({ visible, onClose, data }) => {
    const inset = useSafeAreaInsets()
    const { colors, typography } = useTheme();
    const styles = useMemo(() => createStyles(colors, typography), [colors, typography]);

    const [allBoolean, setAllBoolean] = useState({ fileLoading: false });
    const { data: itemData } = useAucitonItemDetail({ auctionItemId: data?.id });

    const handleDownload = async (id: number, fileName: string) => {
        try {
            setAllBoolean((prev: any) => ({ ...prev, fileLoading: true }));
            const { dirs } = ReactNativeBlobUtil.fs;

            const path = `${dirs.DownloadDir}/${fileName}.pdf`;

            const downloadUrl = `${AUCTION_ITEM_DOCUMENT_DOWNLOAD}?auctionItemId=${id}`;

            const response = await ReactNativeBlobUtil.config({
                fileCache: false,
                addAndroidDownloads: {
                    useDownloadManager: true,
                    notification: true,
                    path,
                    mime: 'application/pdf',
                    title: `${fileName}.pdf`,
                    description: 'Downloading document',
                    mediaScannable: true,
                },
            }).fetch('GET', downloadUrl, {
                Accept: 'application/pdf',
            });

            const stat = await ReactNativeBlobUtil.fs.stat(path);

        } catch (error: any) {
            console.log('Error:', error?.message || error);
        } finally {
            setAllBoolean((prev: any) => ({ ...prev, fileLoading: false }));
        }
    };

    return (
        <Modal
            visible={visible}
            transparent={false}
            animationType="none"
            statusBarTranslucent
            onRequestClose={onClose}
        >
            <View style={styles.safeArea}>

                {/* Navbar */}
                <View style={[styles.header, { paddingTop: inset.top }]}>
                    <TouchableOpacity onPress={onClose} style={styles.backBtn}>
                        <ArrowLeft size={24} color={colors.text} />
                    </TouchableOpacity>
                    <View>
                        <AppText variant="body" bold style={styles.headerTitle}>Item Information</AppText>
                        <AppText variant="caption" style={styles.headerSub}>Detail View</AppText>
                    </View>
                </View>

                <ScrollView
                    style={styles.scrollView}
                    contentContainerStyle={styles.scrollContent}
                    showsVerticalScrollIndicator={false}
                >
                    <Section title="Product Specification" icon={Package} styles={styles} colors={colors}>
                        <View style={styles.identityHeader}>
                            <AppText variant="h4" bold style={styles.productNameText}>{data?.productName?.toUpperCase()}</AppText>
                            <View style={styles.categoryBadge}>
                                <AppText variant="caption" bold style={styles.categoryText}>{data?.categoryName}</AppText>
                            </View>
                        </View>

                        <View style={styles.specGrid}>
                            <View style={styles.specItem}>
                                <AppText variant="caption" bold style={styles.label}>Sub Category</AppText>
                                <AppText variant="bodySmall" bold style={styles.specValue}>{data?.subCategoryName}</AppText>
                            </View>
                            <View style={styles.specItem}>
                                <AppText variant="caption" bold style={styles.label}>Duration</AppText>
                                <AppText variant="bodySmall" bold style={styles.specValue}>{data?.timeDurationType}</AppText>
                            </View>
                        </View>
                    </Section>

                    <Section title="Reserve & Bid Values" icon={IndianRupee} styles={styles} colors={colors}>
                        <PriceTile
                            label="Bidding Price"
                            fig={data?.reservePrice || data?.emdAmount}
                            words={data?.reservePriceInWords || data?.emdAmountInWords}
                            full
                            styles={styles}
                        />
                        <View style={styles.hDivider} />
                        <PriceTile
                            label="Auction Start Value"
                            fig={data?.reservePrice || data?.auctionStartValueFigure}
                            words={data?.reservePriceInWords || data?.auctionStartValueWords}
                            full
                            styles={styles}
                        />
                        <View style={styles.hDivider} />
                    </Section>

                    <Section title="Brief Description" icon={Info} styles={styles} colors={colors}>
                        <AppText variant="bodySmall" style={styles.descContent}>{data?.briefDescription}</AppText>
                    </Section>

                    {itemData?.length && <Section title="View Documents" icon={FileText} styles={styles} colors={colors}>
                        <View style={styles.docTableHead}>
                            <AppText variant="caption" bold style={styles.tableLabel}>Sr No.</AppText>
                            <AppText variant="caption" bold style={[styles.tableLabel, { flex: 2 }]}>Document Name</AppText>
                            <AppText variant="caption" bold style={styles.tableLabel}>Action</AppText>
                        </View>

                        {itemData?.map((doc: any, index: any) => (
                            <TouchableOpacity style={styles.docRow} activeOpacity={0.7} onPress={() => { handleDownload(doc.assetId, doc.fileName) }} key={doc.assetId}>
                                <AppText variant="bodySmall" bold style={styles.docIndex}>{index + 1}</AppText>
                                <View style={{ flex: 2 }}>
                                    <AppText variant="bodySmall" bold style={styles.docTitle} numberOfLines={1}>{doc.fileName}</AppText>
                                </View>
                                <View style={styles.downloadIconBox}>
                                    {allBoolean.fileLoading ? (
                                        <View >
                                            <Loader size='small' color={colors.textSecondary} />
                                        </View>
                                    ) : (
                                        <Download size={20} color={colors.primary} />
                                    )}
                                </View>
                            </TouchableOpacity>))}
                    </Section>}

                </ScrollView>
            </View>
        </Modal>
    );
};

const createStyles = (colors: any, typography: any) => StyleSheet.create({
    fullModal: { margin: 0, backgroundColor: colors.background },
    safeArea: { flex: 1, backgroundColor: colors.background },
    header: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 16,
        backgroundColor: colors.surface,
        borderBottomWidth: 1,
        borderBottomColor: colors.border,
    },
    backBtn: { padding: 8, marginRight: 8 },
    headerTitle: { fontSize: 18, color: colors.text },
    headerSub: { fontSize: 12, color: colors.textSecondary, textTransform: 'uppercase' },

    scrollView: { flex: 1 },
    scrollContent: { padding: 16, paddingBottom: 50 },

    sectionCard: {
        backgroundColor: colors.surface,
        borderRadius: 24,
        padding: 20,
        marginBottom: 16,
        ...Platform.select({
            ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.05, shadowRadius: 10 },
            android: { elevation: 3 }
        })
    },
    sectionHeader: {
        flexDirection: 'row',
        alignItems: 'center',
        gap: 12,
        marginBottom: 20,
    },
    iconCircle: {
        width: 36,
        height: 36,
        borderRadius: 12,
        backgroundColor: colors.primary + '10',
        alignItems: 'center',
        justifyContent: 'center',
    },
    sectionTitle: {
        fontSize: 14,
        color: colors.text,
        textTransform: 'uppercase',
        letterSpacing: 0.5,
    },

    // Product Identity
    identityHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 15 },
    productNameText: { fontSize: 20, color: colors.text, flex: 1 },
    categoryBadge: { backgroundColor: colors.border, paddingHorizontal: 12, paddingVertical: 6, borderRadius: 20 },
    categoryText: { fontSize: 11, color: colors.textSecondary, textTransform: 'uppercase' },
    specGrid: { flexDirection: 'row', gap: 24, marginTop: 5 },
    specItem: { flex: 1 },
    specValue: { fontSize: 15, color: colors.text, marginTop: 2 },

    // Pricing
    priceTile: { marginBottom: 16 },
    label: { fontSize: 11, color: colors.textSecondary, textTransform: 'uppercase', marginBottom: 4 },
    priceFig: { fontSize: 22, color: colors.text },
    priceWords: { fontSize: 13, color: colors.textSecondary, fontStyle: 'italic', marginTop: 2 },
    hDivider: { height: 1, backgroundColor: colors.border, marginBottom: 16 },
    row: { flexDirection: 'row', justifyContent: 'space-between' },

    // Description
    descContent: { fontSize: 15, color: colors.textSecondary, lineHeight: 22, fontFamily: typography.fonts.medium },

    // Table
    docTableHead: { flexDirection: 'row', paddingBottom: 10, borderBottomWidth: 1, borderBottomColor: colors.border, marginBottom: 10 },
    tableLabel: { fontSize: 11, color: colors.textSecondary, flex: 1 },
    docRow: { flexDirection: 'row', alignItems: 'center', backgroundColor: colors.background, padding: 12, borderRadius: 12 },
    docIndex: { flex: 1, fontSize: 14, color: colors.textSecondary },
    docTitle: { fontSize: 14, color: colors.text },
    downloadIconBox: { backgroundColor: colors.surface, padding: 8, borderRadius: 10, borderWidth: 1, borderColor: colors.border },

    // Footer
    footer: {
        position: 'absolute',
        bottom: 0, width: '100%',
        backgroundColor: colors.surface,
        padding: 20,
        paddingBottom: Platform.OS === 'ios' ? 34 : 20,
        borderTopWidth: 1, borderTopColor: colors.border
    },
    primaryBtn: {
        backgroundColor: colors.primary,
        height: 56, borderRadius: 18,
        flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 10
    },
    primaryBtnText: { color: colors.buttonText, fontSize: 16, fontFamily: typography.fonts.bold }
});

export default memo(AuctionItemDetail);