import React, { useState, useRef, useEffect } from 'react';
import { View, Text, TouchableOpacity, ScrollView, FlatList } from 'react-native';
import { styles } from './style';
import GlobalTheme, { horizonalLine, Screen } from '../../../theme/theme';
import CustomHeader from '../../../components/CustomHeader';
import IMAGES from '../../../constants/Images';
import axios from 'axios';
import Loader from '../../../constants/Loader';
import { SafeAreaView } from 'react-native-safe-area-context';

const storeinfodata = [
  {
    tabId: 0,
    section: 'Store details',
    items: [
      { brand: 'Store Name', name: 'Reliance Smart' },
      { brand: 'Store ID', name: '#98440' },
      { brand: 'Address', name: 'Rabindra Nagar, Delhi 110003' },
      { brand: 'City', name: 'Okhla' },
      { brand: 'Store Size', name: '1500–2000 sq ft' },
      { brand: 'Average Footfall', name: '10000' },
      { brand: 'Store age', name: '8' },
      { brand: 'Store Ranking', name: '24' },
    ],
  },
  {
    tabId: 0,
    section: 'Dabur Employees',
    items: [
      { brand: 'RKAM', name: 'Rajesh Paal Singh' },
      { brand: 'SO', name: 'Soniya Singhal' },
    ],
  },
  {
    tabId: 0,
    section: '3P employees',
    items: [
      { brand: 'Promoter Name', name: 'Payal Singh' },
      { brand: 'AM Name', name: 'Soniya Singhal' },
      { brand: 'Supervisor Name', name: 'Soniya Dhankar' },
      { brand: 'City', name: 'Okhla' },
      { brand: 'Promoter duration', name: '2 Year 7 months' },
      { brand: 'Average incentive', name: '5000' },
    ],
  },

  // Last Visit Details (tabId: 1)
  {
    tabId: 1,
    section: 'Dabur employee',
    items: [
      { brand: 'SO', name: 'Rajesh Paal Singh', date: '23/05/2025', test: 'gxsjhxbas' },
      { brand: 'AH', name: 'Umesh Singh', date: '18/04/2025' },
      { brand: 'KAM', name: 'Rahul Tawde', date: '15/05/2025' },
      { brand: 'Others', name: 'Singhal Singh', date: '06/05/2025' },
    ],
  },
  {
    tabId: 1,
    section: '3P team',
    items: [
      { brand: 'Supervisor', name: 'Ashish Talwar', date: '27/05/2025' },
      { brand: 'AM', name: 'Soniya Singhal', date: '23/05/2025' },
    ],
  },

  // Competition (tabId: 2)
  {
    tabId: 2,
    section: 'Competition assets',
    items: [
      { brand: 'Marico', value: 5 },
      { brand: 'Colgate', value: 1 },
      { brand: 'Godrej', value: 2 },
      { brand: 'HUL', value: 1 },
      { brand: 'XX', value: 2 },
    ],
  },
  {
    tabId: 2,
    section: 'Promoter details',
    items: [
      { brand: 'Marico', value: 1 },
      { brand: 'Colgate', value: 1 },
      { brand: 'Godrej', value: 1 },
      { brand: 'HUL', value: 1 },
      { brand: 'XX', value: 0 },
    ],
  },
];



const tabs = [
  { id: 0, title: 'Store Info' },
  { id: 1, title: 'Last visit details' },
  { id: 2, title: 'Competition' },
];


const RenderHeader = ({ columns }) => {
  const colWidth = Screen.screenWidth * 0.95 / columns?.length;

  return (
    null
    // <View style={{ flexDirection: 'row', paddingVertical: 6 }}>
    //   {columns.map((col, index) => (
    //     <View key={index} style={{ width: colWidth }}>
    //       <Text style={styles.subheaderText}>{col.toUpperCase()}</Text>
    //     </View>
    //   ))}
    // </View>
  );
};


const RenderItem = ({ item, columns }) => {
  const colWidth = Screen.screenWidth * 0.95 / columns?.length;

  return (
    <View>
      <View style={styles.row}>
        {columns.map((key, index) => (
          <View key={index} style={{ width: colWidth }}>
            <Text style={styles.name}>{String(item[key] ?? '')}</Text>
          </View>
        ))}
      </View>
      <View style={[horizonalLine, { marginVertical: 4 }]} />
    </View>
  );
};


const SectionListView = ({ listData }) => {
  const scrollRef = useRef(null); // shared horizontal scroll ref
  console.log("/-", listData)
  return (
    <FlatList
      data={listData}
      keyExtractor={(item, index) => item.section + index}
      contentContainerStyle={{ paddingBottom: 20 }}
      ItemSeparatorComponent={() => <View style={{ paddingVertical: 5 }} />}
      renderItem={({ item }) => {
        const columns = Object.keys(item.items[0] || {}).filter(
          key => item.items.some(obj => obj[key] !== undefined && obj[key] !== null)
        );

        return (
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>{item.section}</Text>
            <View style={[horizonalLine, { marginVertical: 10 }]} />

            {/* Shared horizontal scroll view for header + rows */}
            <ScrollView
              horizontal
              ref={scrollRef}
              showsHorizontalScrollIndicator={false}
              scrollEventThrottle={16}
            >
              <View>
                <RenderHeader columns={columns} />
                {item.items.map((subItem, index) => (
                  <RenderItem key={index} item={subItem} columns={columns} />
                ))}
              </View>
            </ScrollView>
          </View>
        );
      }}
    />
  );
};


const StoreInfo = ({ navigation, route }) => {

  const { storeData } = route.params || {};
  const [loading, setLoading] = useState(false)
  const [selectedTab, setSelectedTab] = useState(0);
  const [storeInfoData, setStoreInfoData] = useState([])

  useEffect(() => {
    getStoreInfo()
  }, [])

  const getStoreInfo = async () => {
    setLoading(true);
    try {
      const params = { StoreId: storeData?.StoreId || "723" };
      const config = {
        method: 'post',
        url: 'https://api1.parinaam.in/api/dabur/StoreDNAstoreInfo',
        headers: {
          'api_key': '9a1f056fecb84eaf8eb4152dda22ab0501955c4f9bbe7daa8780740459fdde7a',
          'Content-Type': 'application/json'
        },
        data: params
      };

      const response = await axios.request(config);
      const res = response.data?.StoreDNAstoreInfo || {};

      // Step 1: Flatten API data
      const tempData = [];

      Object.entries(res).forEach(([sectionTitle, dataArray]) => {
        if (dataArray?.length > 0) {
          const tabId = dataArray[0]?.TabId ?? 0;

          dataArray.forEach(item => {
            const cleanItem = { ...item };
            delete cleanItem.TabId;
            delete cleanItem.TabName;
            console.log("tempData---", item)
            const formattedItems = Object.entries(cleanItem).map(([key, value]) => ({
              brand: key,
              name: String(value)
            }));


            tempData.push({
              tabId,
              section: sectionTitle.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase()),
              items: formattedItems
            });
          });
        }
      });

      // Step 2: Group items by tabId and section
      const groupedData = {};

      tempData.forEach(entry => {
        const key = `${entry.tabId}-${entry.section}`;
        if (!groupedData[key]) {
          groupedData[key] = {
            tabId: entry.tabId,
            section: entry.section,
            items: []
          };
        }
        groupedData[key].items.push(...entry.items);
      });

      // let objTemp={}
      // groupedData['0-Dabur Employee']?.items


      // Step 3: Set to state
      setStoreInfoData(Object.values(groupedData));
      setLoading(false);
    } catch (error) {
      console.log("❌ store info api error:", error);
      setLoading(false);
    }
  };

  const filteredData = Array.isArray(storeInfoData)
    ? storeInfoData.filter(item => item.tabId === selectedTab)
    : [];
  const selectedTabTitle = tabs?.find(tab => tab.id === selectedTab)?.title ?? 'NA';

  const dynamicTabs = Array.isArray(storeInfoData)
    ? Array.from(new Set(storeInfoData.map(item => item.tabId))).map(id => ({
      id,
      title: tabs.find(tab => tab.id === id)?.title || `Tab ${id}`
    }))
    : [];

  const renderTabContent = () => {
    switch (selectedTab) {
      case 0:
        return <SectionListView listData={filteredData} />
      case 1:
        return <SectionListView listData={filteredData} />
      case 2:
        return <SectionListView listData={filteredData} />;
      default:
        return null;
    }
  };

  return (

    <SafeAreaView style={{ flex: 1, backgroundColor: GlobalTheme.colors.primary }}>
      <View style={[styles.container, { paddingHorizontal: 0 }]}>
        <CustomHeader
          title={'Store Info'}
          leftIcon={IMAGES.leftArrowIcon}
          onLeftPress={() => navigation.goBack()} />
        <View style={styles.container}>
          <View style={styles.tabstyle}>
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View style={{ flexDirection: 'row' }}>
                {/* {tabs?.map((tab) => ( */}
                {dynamicTabs?.map((tab) => (
                  <TouchableOpacity key={tab.id} style={styles.tabview} activeOpacity={1} onPress={() => setSelectedTab(tab.id)}>
                    <View style={selectedTab === tab.id ? styles.selecttabView : styles.unselecttabView}>
                      <Text style={[styles.tabtext, selectedTab === tab.id ? styles.selecttabText : styles.unselecttabText]}>
                        {tab.title}
                      </Text>
                    </View>
                  </TouchableOpacity>
                ))}
              </View>
            </ScrollView>
          </View>
          <ScrollView horizontal={false} style={{ flex: 1 }}>
            <Text style={styles.headerText}>{selectedTabTitle} </Text>
            <View style={{ width: '100%' }}>{renderTabContent()}</View>
          </ScrollView>
        </View>
        <Loader visible={loading} />
      </View>
    </SafeAreaView>
  );
};
export default StoreInfo;