import React, { useEffect, useState, useContext, useRef, useCallback } from 'react';
import { FlatList, StyleSheet, Pressable, Image, View } from 'react-native';
import fichier_4a from '@/assets/json/fichier_4a.json';
import fichier_8a from '@/assets/json/fichier_8a.json';
import { filteredSuivi, getIconPath } from '@/constants/constants';
import { Pathologie } from '@/constants/type';
import AppText from '@/components/AppText';
import { useLocalSearchParams, useRouter, useSegments, useFocusEffect } from 'expo-router';
import pathologiesJSON from '@/assets/json/pathologie_parsed.json';
import { TitleContext } from '@/contexts/TitleContext';
import { useUsers } from '@/contexts/UserContext';
import { ImageContext } from '@/contexts/ImageContext';
import Button from '@/components/Button';
import { useId4a } from "@/contexts/Id4aContext";
import { useId3a } from "@/contexts/Id3aContext";
import { useColor } from '@/contexts/ThemeColorContext';
import { useAppData } from '@/contexts/AppDataContext';


const PathologyList: React.FC = () => {
  const { fichier4a: fichier_4a, fichier8a: fichier_8a } = useAppData();
  const { setId4a } = useId4a();
  const { setId3a } = useId3a();
  const { backgroundColor, setBackgroundColor, getContrastColor } = useColor();

  const params = useLocalSearchParams();
  const id_4a_clicked = params.id_4a ? Number(params.id_4a) : undefined;

  const segments = useSegments();
  const isBilan = segments.includes('bilan');

  const { currentUser } = useUsers();
  const evaluateur = currentUser?.evaluateur || '';
  const router = useRouter();
  const { setImageProp } = useContext(ImageContext);
  const { setTitle } = useContext(TitleContext);

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

  const lastValidColor = useRef("#FFFFFF");

  const getFilteredData = (id_4a: string | null) => {
    if (!id_4a || id_4a === ".") return [];
    const ids = id_4a.toString().split(',').map(Number);
    return ids.map(id => fichier_4a.find(item => item.id === id)).filter(Boolean);
  };

  const handleItemPress = useCallback((id: number) => {
    setId3a(id);
    setId4a(undefined);
    const pathology = pathologiesJSON.find(it => it.id === id);
    if (pathology?.logo) setImageProp(pathology.logo);
    setTitle(pathology?.name || '');
    router.push({
      pathname: '/(tabs)/bilan/symptoms_associated_with_bilan',
      params: { evaluateur, id_suivi: id }
    });
  }, [router, setId3a, setId4a, setImageProp, setTitle, evaluateur]);

  useFocusEffect(
    useCallback(() => {
      if (!id_4a_clicked) {
        setBackgroundColor("#FFFFFF");
        return;
      }

      setIsSpecialCase(false);
      setSpecialCaseData([]);
      setFilteredSuiviData([]);
      setId3a(undefined);
      setId4a(id_4a_clicked);

      const node = fichier_4a.find(el => el.id === id_4a_clicked);
      if (!node) return;

      setTitle(node.label);

      const couleur = node.couleur && node.couleur !== "." ? node.couleur : lastValidColor.current;
      lastValidColor.current = couleur;
      setBackgroundColor(couleur);

      if (node.id_3a && node.id_3a !== "." && node.id_3a !== "") {
        handleItemPress(Number(node.id_3a));
        return;
      }

      if (node.id_4a && node.id_4a !== ".") {
        setIsSpecialCase(true);
        setSpecialCaseData(getFilteredData(node.id_4a));
        return;
      }

    }, [id_4a_clicked, handleItemPress])
  );

  const handleItemPress4a = useCallback((item: any) => {
    setId4a(item.id);

    const node = fichier_4a.find(el => el.id === item.id);
    if (node) {
      setTitle(node.label);
      if (node.couleur && node.couleur !== ".") {
        lastValidColor.current = node.couleur;
        setBackgroundColor(node.couleur);
      }
    }

    let href: string | undefined = undefined;
    if (item.id_8a) href = fichier_8a.find(e => e.id === item.id_8a)?.href;

    if (!href && item.id_3a) {
      const threeA = filteredSuivi.find(s => s.id === item.id_3a);
      if (threeA?.id_8a) href = fichier_8a.find(e => e.id === threeA.id_8a)?.href;
    }

    if (href) {
      router.push({ pathname: href, params: { id_4a: item.id } });
    } else {
      router.push({
        pathname: isBilan ? '/(tabs)/bilan' : '/(tabs)/pathology_list',
        params: { id_4a: item.id }
      });
    }
  }, [router, setId4a, setTitle, isBilan]);

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

  const renderItem4a = useCallback(({ item }: { item: any }) => (
    <Button
      text={item.label || ''}
      onPress={() => handleItemPress4a(item)}
      style={[styles.itemContainer, { backgroundColor }]}
      textStyle={{ color: getContrastColor(backgroundColor) }}
    />
  ), [backgroundColor, handleItemPress4a]);

  return (
    <View style={[styles.listContainer, { backgroundColor }]}>
      <FlatList
        data={isSpecialCase ? specialCaseData : filteredSuiviData}
        renderItem={isSpecialCase ? renderItem4a : renderItem}
        keyExtractor={item => item.id.toString()}
        contentContainerStyle={{ flexGrow: 1, justifyContent: 'center', alignItems: 'flex-start' }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  listContainer: { flex: 1, justifyContent: 'center', alignItems: 'flex-start' },
  itemContainer: { flexDirection: 'row', alignItems: 'center', paddingVertical: 16, paddingHorizontal: 24, backgroundColor: '#ffffff', borderBottomWidth: 1, borderBottomColor: '#ffffff', 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;