import React, { useEffect, useState } from 'react';
import { View, Text, TouchableOpacity, ScrollView, Image, Modal, Platform, StyleSheet, Alert } from 'react-native';
import { useRoute, useNavigation } from '@react-navigation/native';
import { post } from '../../../api/ApiService';
import IMAGES from '../../../constants/Images';
import { GlobalTheme } from '../../../theme';
import Loader from '../../../constants/Loader';
import { SafeAreaView } from 'react-native-safe-area-context';
import { toastError } from '../../../constants/Toast';

const Details = () => {

    const route = useRoute();
    const navigation = useNavigation();

    const { selectedDetails = [], storeData, year, month, mainTabIndex } = route.params || {};
    const [modalGraphData, setModalGraphData] = useState({});
    const [activePromoTab, setActivePromoTab] = useState('Executed');
    const [allCatData, setAllCatData] = useState([])
    const [selectedCategoryData, setSelectedCategoryData] = useState([]);
    const [categoryModalVisible, setCategoryModalVisible] = useState(false);

    useEffect(() => {
        if (selectedDetails.length > 0) {
            fetchDetailGraphs(selectedDetails);
        }
    }, [selectedDetails]);

    useEffect(() => {
        getAllCatData();
    }, [])

    const getAllCatData = () => {
        let data = {
            parameters: {
                projectid: 41654,
                year: year,
                monthno: month,
                storeid: storeData?.StoreId
            },
        }

        const apiUrl = mainTabIndex === 0
            ? 'https://dax.parinaam.in/execute/dabur/detmtd/oos_sku_list_for_all_visits_mtd'
            : 'https://dax.parinaam.in/execute/dabur/detlsv/oos_sku_list_on_lsv';

        post(apiUrl, data)
            .then(res => {
                setAllCatData(res?.data);
            })
            .catch(err => {
                console.log('Error =>', err);
            });
    }

    const fetchDetailGraphs = async (detailPages) => {
        try {
            const resultMap = {};
            for (let item of detailPages) {
                const response = await post(item.GraphUrl, {
                    parameters: {
                        projectid: 41654,
                        year: year,
                        monthno: month,
                        storeid: storeData?.StoreId
                    },
                });
                resultMap[item.GraphUrl] = response?.data || [];
            }
            setModalGraphData(resultMap);
        } catch (error) {
            console.log("❌ Error fetching detail graphs:", error);
        }
    };

    const showCategoryDetails = (data) => {
        setCategoryModalVisible(!categoryModalVisible)
        // Filter SKUs from allCatData where the category name matches
        const filteredCategory = allCatData.filter(item =>
            item.Product_CategoryCategory_Name === data.Product_CategoryCategory_Name
        );
        // Save for display
        setSelectedCategoryData(filteredCategory);
    }

    const isOSATab = selectedDetails.some(item => item.GraphTitle === "OSA - Category");
    console.log('isOSATab----',isOSATab);
    

    return (
        <SafeAreaView style={{ flex: 1, backgroundColor: '#113F8C' }}>
            <View style={{ flex: 1, backgroundColor: '#fff' }}>
                {/* Header */}
                <View style={styled.header}>
                    <TouchableOpacity onPress={() => navigation.goBack()} style={{ padding: 5 }}>
                        <Image source={IMAGES.backIcon} style={{ height: 20, width: 20, tintColor: '#fff' }} />
                    </TouchableOpacity>
                    <Text style={{ color: '#fff', fontSize: 20, fontWeight: 'bold' }}>Details</Text>
                    <View style={{ width: 25 }} />

                </View>

                <ScrollView style={{ padding: 20 }}>
                    {selectedDetails && selectedDetails.length > 0 ? selectedDetails.map((detail, index) => {
                        const values = modalGraphData[detail.GraphUrl] || [];

                        if (!modalGraphData[detail.GraphUrl]) {
                            return (
                                <View key={index} style={{ flex: 1, marginBottom: 20 }}>
                                    <Loader visible={true} />
                                </View>
                            );
                        }

                        switch (detail.GraphType) {
                            case 'Table':
                                // Check if it's the Promotion table
                                const isPromotionTable =
                                    values.length > 0 &&
                                    values[0].hasOwnProperty('Product_CategoryCategory_Name') &&
                                    values[0].hasOwnProperty('Promotion_MasterPromotion_Definition');

                                if (isPromotionTable) {
                                    // Filter data based on active tab
                                    const filteredValues = values.filter(row =>
                                        activePromoTab === 'Executed'
                                            ? row.Executed?.toLowerCase() === 'yes'
                                            : row.Executed?.toLowerCase() === 'no'
                                    );
                                    // Group data by Product_CategoryCategory_Name
                                    const groupedData = filteredValues.reduce((acc, curr) => {
                                        const category = curr.Product_CategoryCategory_Name || 'Unknown';
                                        if (!acc[category]) acc[category] = [];
                                        acc[category].push(curr);
                                        return acc;
                                    }, {});

                                    return (
                                        <View key={index} style={{ marginBottom: 10 }}>
                                            {/* Horizontal Tabs - show once at top */}
                                            {index === 0 && ( // ensures only first promotion table renders the toggle
                                                <View style={{ flexDirection: 'row', marginBottom: 20 }}>
                                                    {['Executed', 'Not Executed'].map(tab => {
                                                        const isSelected = activePromoTab === tab;
                                                        return (
                                                            <TouchableOpacity
                                                                key={tab}
                                                                onPress={() => setActivePromoTab(tab)}
                                                                style={{
                                                                    flex: 1,
                                                                    paddingVertical: 10,
                                                                    backgroundColor: isSelected ? '#113F8C' : '#E3EBF8',
                                                                    borderRadius: 8,
                                                                    marginHorizontal: 5,
                                                                    alignItems: 'center',
                                                                }}
                                                            >
                                                                <Text style={{ color: isSelected ? '#fff' : '#000', fontWeight: '600' }}>
                                                                    {tab}
                                                                </Text>
                                                            </TouchableOpacity>
                                                        );
                                                    })}
                                                </View>
                                            )}

                                            {/* No data message */}
                                            <View style={{}}>
                                                {filteredValues.length === 0 ? (
                                                    <View style={{ marginTop: 0, backgroundColor: 'red' }} />
                                                ) : (
                                                    Object.keys(groupedData).map((categoryName, catIdx) => (
                                                        <View key={catIdx} style={{ marginBottom: 20 }}>
                                                            {/* Category Header */}
                                                            <View style={{ backgroundColor: '#E8F0FF', padding: 8, borderRadius: 6 }}>
                                                                <Text style={{ fontSize: 15, fontWeight: '700', color: '#113F8C' }}>
                                                                    {String(categoryName)}
                                                                </Text>
                                                            </View>

                                                            {/* Table Header */}
                                                            <View
                                                                style={{
                                                                    flexDirection: 'row',
                                                                    justifyContent: 'space-between',
                                                                    backgroundColor: '#f5f5f5',
                                                                    paddingVertical: 8,
                                                                    paddingHorizontal: 9,
                                                                    borderTopLeftRadius: 8,
                                                                    borderTopRightRadius: 8,
                                                                    marginTop: 5
                                                                }}
                                                            >
                                                                <Text style={{ color: '#000', fontWeight: 'bold', width: '80%' }}>
                                                                    Definition
                                                                </Text>
                                                                <Text style={{ color: '#000', fontWeight: 'bold', width: '20%', textAlign: 'center' }}>
                                                                    Executed
                                                                </Text>
                                                            </View>

                                                            {/* Table Rows */}
                                                            <View
                                                                style={{
                                                                    backgroundColor: '#fff',
                                                                    paddingHorizontal: 10,
                                                                    borderBottomLeftRadius: 8,
                                                                    borderBottomRightRadius: 8,
                                                                    shadowColor: '#000',
                                                                    shadowOffset: { width: 0, height: 1 },
                                                                    shadowOpacity: 0.1,
                                                                    shadowRadius: 2,
                                                                    elevation: 2
                                                                }}
                                                            >
                                                                {groupedData[categoryName].map((row, rowIdx) => (
                                                                    <View
                                                                        key={rowIdx}
                                                                        style={{
                                                                            flexDirection: 'row',
                                                                            justifyContent: 'space-between',
                                                                            paddingVertical: 8,
                                                                            borderBottomWidth: rowIdx === groupedData[categoryName].length - 1 ? 0 : 1,
                                                                            borderColor: '#eee'
                                                                        }}
                                                                    >
                                                                        <Text style={{ color: '#000', width: '80%' }}>
                                                                            {String(row.Promotion_MasterPromotion_Definition) || '-'}
                                                                        </Text>
                                                                        <Text style={{ color: '#000', width: '20%', textAlign: 'center' }}>
                                                                            {row.Executed || '-'}
                                                                        </Text>
                                                                    </View>
                                                                ))}
                                                            </View>
                                                        </View>
                                                    ))
                                                )}
                                            </View>
                                        </View>
                                    );
                                }

                                let displayKey = null;
                                let presentKey = null;
                                if (values.length > 0) {
                                    const presentKeys = Object.keys(values[0]).filter(k =>
                                        (typeof values[0][k] === 'string' && ['Yes', 'No'].includes(values[0][k])) ||
                                        typeof values[0][k] === 'boolean' ||
                                        typeof values[0][k] === 'number'
                                    );
                                    presentKey = presentKeys.length > 0 ? presentKeys[0] : null;
                                    const displayKeys = Object.keys(values[0]).filter(k => k !== presentKey && typeof values[0][k] === 'string');
                                    displayKey = displayKeys.length > 0 ? displayKeys[0] : null;
                                }

                                return (
                                    <View key={index} style={{ marginBottom: 30 }}>

                                        <Text style={{ marginTop: 10, color: '#000', fontSize: 16, fontWeight: '600', marginBottom: 10 }}>
                                            {detail.GraphTitle}

                                        </Text>
                                        <View style={styled.categoryHeader}>
                                            <Text style={{ color: '#000', fontWeight: 'bold', width: '80%' }}>
                                                {displayKey ? displayKey.replace(/_/g, ' ').replace(/([a-z])([A-Z])/g, '$1 $2') : ''}
                                            </Text>
                                            <Text style={{ color: '#000', fontWeight: 'bold', width: '20%', textAlign: 'center' }}>
                                                {presentKey ? presentKey.replace(/_/g, ' ').replace(/([a-z])([A-Z])/g, '$1 $2') : ''}
                                            </Text>
                                        </View>

                                        <View style={styled.itemContainer}>
                                            {values.map((row, idx) => {
                                                const presentKeys = Object.keys(row).filter(k =>
                                                    (typeof row[k] === 'string' && ['Yes', 'No'].includes(row[k])) ||
                                                    typeof row[k] === 'boolean' ||
                                                    typeof row[k] === 'number'
                                                );
                                                const presentKey = presentKeys.length > 0 ? presentKeys[0] : null;
                                                const displayKeys = Object.keys(row).filter(k => k !== presentKey && typeof row[k] === 'string');
                                                const displayKey = displayKeys.length > 0 ? displayKeys[0] : null;

                                                return (
                                                    <View
                                                        key={idx}
                                                        style={{
                                                            flexDirection: 'row',
                                                            justifyContent: 'space-between',
                                                            paddingVertical: 8,
                                                            borderBottomWidth: idx === values.length - 1 ? 0 : 1,
                                                            borderColor: '#eee',
                                                        }}>
                                                        <Text style={{ color: '#000', width: '80%' }}>{row[displayKey] || '--'}</Text>

                                                        <TouchableOpacity disabled={isOSATab ? false : true}
                                                            onPress={() => {
                                                                if (row[presentKey] == 100 || row[presentKey] == '100') {
                                                                    toastError('Alert', 'No Data Available')
                                                                } else {
                                                                    showCategoryDetails(row)
                                                                }
                                                            }}
                                                            style={{ width: '20%', }}>
                                                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                                                <Text style={{ color: '#113F8C', textAlign: 'center', fontWeight: '500' }}>
                                                                    {presentKey ? (
                                                                        typeof row[presentKey] === 'string' && ['Yes', 'No'].includes(row[presentKey]) ? row[presentKey] :
                                                                            typeof row[presentKey] === 'boolean' ? (row[presentKey] ? 'Yes' : 'No') :
                                                                                typeof row[presentKey] === 'number' ? row[presentKey].toFixed(2) : row[presentKey] || '-'
                                                                    ) : '-'}
                                                                </Text>
                                                               { isOSATab && row[presentKey] != 100 || isOSATab && row[presentKey] != '100'? <Image source={IMAGES.rightArrowIcon} style={{marginLeft:6, height: 12, width: 12, resizeMode: 'contain' }} /> :null}
                                                            </View>
                                                        </TouchableOpacity>
                                                    </View>
                                                );
                                            })}
                                        </View>
                                    </View>
                                );
                            default:
                                return (
                                    <View key={index} style={{ marginBottom: 20 }}>
                                        <Text>Unsupported GraphType: {detail.GraphType}</Text>
                                    </View>
                                );
                        }
                    }) :
                        <Loader visible={true} />
                    }
                </ScrollView>

                <Modal
                    visible={categoryModalVisible}
                    animationType="slide"
                    onRequestClose={() => setCategoryModalVisible(false)}
                >
                    <View style={{ flex: 1, }}>
                        {/* Header */}
                        <View style={{ height: Platform.OS === 'ios' ? 55 : 0, backgroundColor: '#113F8C' }} />

                        <View style={{ width: '100%', backgroundColor: '#113F8C', borderBottomWidth: 1, borderColor: 'gray', padding: 5, paddingHorizontal: 20, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                            <View style={{ width: '93%', alignItems: 'center' }}>
                                <Text style={{ color: '#fff', fontSize: 20, fontWeight: 'bold', marginBottom: 10, alignSelf: 'center' }}>{selectedCategoryData[0]?.Product_CategoryCategory_Name || 'Category'}</Text>
                            </View>
                            <TouchableOpacity onPress={() => setCategoryModalVisible(false)} style={{ width: '7%', alignItems: 'center' }}>
                                <Image source={IMAGES.crossIcon} style={{ height: 25, width: 25, resizeMode: 'contain' }} />
                            </TouchableOpacity>
                        </View>

                        <View style={{ borderTopLeftRadius: 10, borderTopRightRadius: 10, marginTop: 15, marginHorizontal: 15, backgroundColor: '#eee', padding: 10, borderWidth: 1, borderColor: 'gray' }}>
                            <Text style={{ color: '#000', fontSize: 16, fontWeight: '500' }}>{'Out of Stock SKUs:'}</Text>
                        </View>

                        {/* SKU List */}
                        <ScrollView contentContainerStyle={{
                            marginHorizontal: 15,
                            borderBottomWidth: 0.5,
                            borderLeftWidth: 0.5,
                            borderRightWidth: 0.5,
                            borderColor: 'gray',
                            borderBottomEndRadius: 10,
                            borderBottomLeftRadius: 10,
                        }}>
                            {/* <Text style={{ color: '#000', fontSize: 16, fontWeight: 'bold', marginBottom: 5 }}>OOS SKU details</Text> */}
                            {selectedCategoryData.map((item, idx) => (
                                <View
                                    key={idx}
                                    style={{
                                        marginTop: 2,
                                        flexDirection: 'row',
                                        justifyContent: 'space-between',
                                        paddingVertical: 8,
                                        borderBottomWidth: idx === selectedCategoryData.length - 1 ? 0 : 1,
                                        borderColor: '#eee',

                                    }}
                                >
                                    <View style={{ flexDirection: 'row' }}>
                                        <Text style={{ color: '#000', marginLeft: 10 }}>{idx + 1}. </Text>
                                        <Text style={{ color: '#000', }}>
                                            {item.Product_MasterProduct_Name}
                                        </Text>
                                    </View>
                                    {/* <Text style={{ color: '#000', width: '20%', textAlign: 'center' }}>
                                        {item['#_of_OOS_SKU_for_all_visits']}
                                    </Text> */}
                                </View>
                            ))}
                        </ScrollView>
                    </View>
                </Modal>

            </View>
        </SafeAreaView>
    );
};

const styled = StyleSheet.create({
    header: {
        width: '100%',
        backgroundColor: '#113F8C',
        padding: 10,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    categoryHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        backgroundColor: '#EDEDED',
        paddingVertical: 8,
        paddingHorizontal: 10,
        borderTopLeftRadius: 8,
        borderTopRightRadius: 8,
    },
    itemContainer: {
        backgroundColor: '#fff',
        paddingHorizontal: 10,
        borderBottomLeftRadius: 8,
        borderBottomRightRadius: 8,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.1,
        shadowRadius: 2,
        elevation: 2
    }
})

export default Details;