import React, { useMemo, useContext } from 'react';
import { View, FlatList, StyleSheet, Pressable, Image } from 'react-native';
import fichier_4a from '@/assets/json/fichier_4a.json';
import pathologiesJSON from '@/assets/json/pathologie_parsed.json';
import { getIconPath } from '@/constants/constants';
import { Pathologie } from '@/constants/type';
import AppText from '@/components/AppText';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { useId3a } from '@/contexts/Id3aContext';
import { ImageContext } from '@/contexts/ImageContext';
import { TitleContext } from '@/contexts/TitleContext';
import { useAppData } from '@/contexts/AppDataContext';


const PathologyList: React.FC = () => {
  const { fichier4a: fichier_4a, fichier8a: fichier_8a } = useAppData();
  const params = useLocalSearchParams();
  const id_4a_clicked = params.id_4a ? Number(params.id_4a) : undefined;

  const router = useRouter();
  const { setId3a } = useId3a();
  const { setImageProp } = useContext(ImageContext);
  const { setTitle } = useContext(TitleContext);

  // 1️⃣ On récupère le node 4a
  const node4a = fichier_4a.find(n => n.id === id_4a_clicked);

  // 2️⃣ On extrait les id_3a
  const pathologyIds = useMemo(() => {
    if (!node4a?.id_3a || node4a.id_3a === ".") return [];
    return node4a.id_3a.split(",").map(Number);
  }, [node4a]);

  // 3️⃣ On charge les pathologies correspondantes
  const data = useMemo(() => {
    return pathologyIds
      .map(id => pathologiesJSON.find(p => p.id === id))
      .filter(Boolean) as Pathologie[];
  }, [pathologyIds]);

  // ⭐ Navigation cohérente avec list_suivi
  const handleItemPress = (id: number) => {
    const pathology = pathologiesJSON.find(p => p.id === id);

    // Mise à jour des contextes
    setId3a(id);
    if (pathology?.logo) setImageProp(pathology.logo);
    setTitle(pathology?.name ?? '');

    // Navigation vers la page de suivi
    router.push({
      pathname: '/(tabs)/lancer_un_suivi/supplementary_symptoms_associated_with_suivi',
      params: { id_suivi: id }
    });
  };

  const renderItem = ({ item }: { item: Pathologie }) => (
    <Pressable
      key={item.id}
      style={({ pressed }) => [
        styles.itemContainer,
        pressed && styles.pressedItem,
      ]}
      onPress={() => handleItemPress(item.id)}
    >
      <View style={styles.itemIconContainer}>
        <Image
          style={styles.itemIcon}
          source={item?.logo ? getIconPath(item.logo) : getIconPath('')}
        />
      </View>
      <View style={styles.itemTitleContainer}>
        <AppText style={styles.itemTitle} text={item.name ?? ''} />
      </View>
    </Pressable>
  );

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item.id.toString()}
    />
  );
};

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,
  },
  pressedItem: {
    backgroundColor: '#e0e0e0',
  },
  itemIconContainer: {
    marginRight: 16,
  },
  itemIcon: {
    width: 40,
    height: 40,
  },
  itemTitleContainer: {
    flex: 1,
  },
  itemTitle: {
    fontSize: 16,
    color: '#000000',
  },
});

export default PathologyList;