import React, { useState } from 'react';
import {View,Text,TouchableOpacity,ScrollView,FlatList} from 'react-native';
import { styles } from './style';
import { horizonalLine, Screen } from '../../../theme/theme';

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

  // Last Visit Details (tabId: 1)
  {
   tabId: 1,
   section: 'Dabur employee',
   items: [
    { brand: 'SO', name: 'Rajesh Paal Singh', date: '23/05/2025' },
    { 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 = ({ columnCount }) => {
  const colWidth = Screen.screenWidth * 0.95 / columnCount;
  return (
    <View style={{ flexDirection: 'row', paddingVertical: 6 }}>
      <View style={{ width: colWidth }}>
        <Text style={styles.subheaderText}>Brand</Text>
      </View>
      <View style={{ width: colWidth }}>
        <Text style={styles.subheaderText}>Name</Text>
      </View>
      {columnCount === 3 && (
        <View style={{ width: colWidth }}>
          <Text style={styles.subheaderText}>Date</Text>
        </View>
      )}
    </View>
  );
};

const RenderItem = ({ item, columnCount }) => {
    console.log("columnCount",columnCount)
  const dynamicWidth = Screen.screenWidth * 0.95 / columnCount;

  return (
    <View>
     <View style={styles.row}>
      <View style={{ width: dynamicWidth}}>
        <Text style={styles.brand}>{item.title || item.brand}:</Text>
      </View>
      <View style={{ width: dynamicWidth}}>
        <Text style={styles.name}>{item.name || item.value}</Text>
      </View>
      {item.date &&  (
        <View style={{ width: dynamicWidth}}>
          <Text style={styles.date}>{item.date}</Text>
        </View>
      )}
     </View>
    <View style={[horizonalLine, { marginVertical: 4 }]} />
    </View>
  );
};

const SectionListView = ({ listData }) => (
  <FlatList
    data={listData}
    keyExtractor={(item, index) => item.section + index}
    contentContainerStyle={{ paddingBottom: 20 }}
    ItemSeparatorComponent={() => <View style={{ paddingVertical: 5 }} />}
   renderItem={({ item }) => {
   const columnCount = item.items[0]?.date ? 3 : 2;

  return (
    <View style={styles.section}>
      <Text style={styles.sectionTitle}>{item.section}</Text>
      <View style={[horizonalLine, { marginVertical: 10 }]} />
       <RenderHeader columnCount={columnCount} />  {/* Header Row */}
      {item.items.map((subItem, index) => (
        <RenderItem key={index} item={subItem} columnCount={columnCount} />
      ))}
    </View>
     );
    }}

  />
);


const StoreInfo = () => {
  const [selectedTab, setSelectedTab] = useState(0);
  const filteredData = storeinfodata?.filter(item => item.tabId === selectedTab);
  const selectedTabTitle = tabs.find(tab => tab.id === selectedTab)?.title ?? 'NA';

  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 (
    <View style={styles.container}>
     <View style={styles.tabstyle}>
      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
        <View style={{ flexDirection: 'row' }}>
        {tabs.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>
  );
};

export default StoreInfo;