import React, { useEffect, useState } from 'react';
import { View, FlatList, StyleSheet, Pressable, Image } from 'react-native';
import fichier_4a from '@/assets/json/fichier_4a.json';
import { filteredSuivi, getIconPath } from '@/constants/constants';
import { Pathologie } from '@/constants/type';
import colors from '@/styles/colors';
import AppText from '@/components/AppText';
import { useLocalSearchParams, useRouter } from 'expo-router';
import pathologiesJSON from '@/assets/json/pathologie_parsed.json';
import Popup from '@/components/popUp/ErrorNotFoundPopUp';
import { useId4a } from "@/contexts/Id4aContext";
import { useAppData } from '@/contexts/AppDataContext';


const PathologyList: React.FC = () => {
  const { fichier4a: fichier_4a, fichier8a: fichier_8a } = useAppData();
  const getFilteredData = (id_4a_str: string | null) => {
    if (!id_4a_str || id_4a_str === ".") return [];
    const ids = id_4a_str.split(',').map(Number);
    return fichier_4a.filter(item => ids.includes(item.id));
  };

  const { evaluateur, id_4a } = useLocalSearchParams<{ evaluateur?: string; id_4a?: string }>();
  const router = useRouter();
  const { setId4a } = useId4a();

  const [isSpecialCase, setIsSpecialCase] = useState(false);
  const [specialCaseData, setSpecialCaseData] = useState<any[]>([]);
  const [filteredSuiviData, setFilteredSuiviData] = useState<any[]>([]);
  const [showPopup, setShowPopup] = useState(false);
  const [shouldNavigate, setShouldNavigate] = useState(false);

  useEffect(() => {
    const nodeId = id_4a ? Number(id_4a) : 11;
    const node = fichier_4a.find(item => item.id === nodeId);
    if (!node) return;

    setId4a(nodeId);

    if (node.id_4a && node.id_4a !== ".") {
      setIsSpecialCase(true);
      setSpecialCaseData(getFilteredData(node.id_4a));
    } else if (node.id_3a && node.id_3a !== ".") {
      setIsSpecialCase(false);
      setFilteredSuiviData(filteredSuivi.filter(item => item.id === Number(node.id_3a)));
    }
  }, [id_4a]);

  const handleItemPress = (id: number) => {
    router.replace({
      pathname: '/(tabs)/lancer_un_suivi/supplementary_symptoms_associated_with_suivi',
      params: { evaluateur, id_suivi: id }
    });
  };

  const handleItemPress4a = (id: number) => {
    setId4a(id);

    const hasMore4aData = fichier_4a.find(item => item.id === id)?.id_4a;
    const hasMore3aData = fichier_4a.find(item => item.id === id)?.id_3a;

    if (hasMore4aData && hasMore4aData !== ".") {
      setIsSpecialCase(true);
      setSpecialCaseData(getFilteredData(hasMore4aData));
    } else if (hasMore3aData && hasMore3aData !== ".") {
      setIsSpecialCase(false);
      setFilteredSuiviData(filteredSuivi.filter(item => item.id === Number(hasMore3aData)));
    }
  };

  const renderItem = ({ item }: { item: Pathologie }) => {
    const pathology = pathologiesJSON.find(p => p.id === item.id);
    const logoPath = pathology?.logo ? getIconPath(pathology.logo) : getIconPath('');
    return (
      <Pressable
        key={item.id}
        style={({ pressed }) => [styles.itemContainer, pressed && styles.pressedItem]}
        onPress={() => {
          if (item.symptoms?.at(0) !== undefined && item.init_symptoms?.at(0) !== undefined) {
            handleItemPress(item.id);
          } else {
            setShowPopup(true);
          }
        }}
      >
        <View style={styles.itemIconContainer}>
          <Image style={styles.itemIcon} source={logoPath} />
        </View>
        <View style={styles.itemTitleContainer}>
          <AppText style={styles.itemTitle} text={item.name ?? ''} />
        </View>
      </Pressable>
    );
  };

  const renderItem4a = ({ item }: { item: any }) => (
    <Pressable
      key={item.id}
      style={({ pressed }) => [styles.itemContainer, pressed && styles.pressedItem]}
      onPress={() => handleItemPress4a(item.id)}
    >
      <View style={styles.itemTitleContainer}>
        <AppText style={styles.itemTitle} text={item.label ?? ''} />
      </View>
    </Pressable>
  );

  useEffect(() => {
    if (!showPopup && shouldNavigate) {
      router.push('/');
      setShouldNavigate(false);
    }
  }, [showPopup, shouldNavigate]);

  return (
    <View>
      <FlatList
        data={isSpecialCase ? specialCaseData : filteredSuiviData}
        renderItem={isSpecialCase ? renderItem4a : renderItem}
        keyExtractor={item => item.id.toString()}
      />
      <Popup
        isVisible={showPopup}
        onClose={() => { setShowPopup(false); setShouldNavigate(true); }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  itemContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 16,
    paddingHorizontal: 24,
    backgroundColor: '#ffffff',
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
    marginTop: 10,
    marginHorizontal: 5,
    borderRadius: 5,
  },
  selectedItem: { backgroundColor: colors.grey },
  pressedItem: { backgroundColor: '#e0e0e0' },
  itemIconContainer: { marginRight: 16 },
  itemIcon: { width: 40, height: 40 },
  itemTitleContainer: { flex: 1 },
  itemTitle: { fontSize: 16, color: '#000000' },
});

export default PathologyList;