import React, { useCallback, useRef } from 'react';
import { View, StyleSheet, FlatList, Pressable } from 'react-native';
import { router, useLocalSearchParams, useFocusEffect } from 'expo-router';
import { AntDesign } from '@expo/vector-icons';
import Button from '@/components/Button';
import { useColor } from '@/contexts/ThemeColorContext';
import { useId4a } from '@/contexts/Id4aContext';
import { useReturnMemory } from '@/contexts/ReturnMemoryContext';
import fichier_4a from '@/assets/json/fichier_4a.json';
import fichier_8a from '@/assets/json/fichier_8a.json';
import { useAppData } from '@/contexts/AppDataContext';


const isValidHref = (href: string | undefined): boolean => {
  if (!href) return false;
  if (href === '/' || href === '/(tabs)') return false;
  return true;
};

const AgeRangeScreen: React.FC = () => {
  const { fichier4a: fichier_4a, fichier8a: fichier_8a } = useAppData();
  const { id_4a: id4aParam } = useLocalSearchParams<{ id_4a: string }>();
  const { backgroundColor, setBackgroundColor, getContrastColor } = useColor();
  const { setId4a } = useId4a();
  const { setReturnMemory } = useReturnMemory();

  const lastValidColor = useRef('#FFFFFF');

  // Récupère le nœud courant (ex: 88 "Mon suivi Age")
  const currentId = id4aParam ? Number(id4aParam) : undefined;
  const currentNode = currentId ? fichier_4a.find(el => el.id === currentId) : undefined;

  // Ses enfants (les tranches d'âge)
  const childIds = (currentNode?.id_4a?.split(',') || [])
    .map(Number)
    .filter(n => !isNaN(n));
  const children = childIds
    .map(id => fichier_4a.find(el => el.id === id))
    .filter(Boolean);

  useFocusEffect(
    useCallback(() => {
      if (!currentNode) return;
      setId4a(currentNode.id);
      if (currentNode.couleur && currentNode.couleur !== '.') {
        lastValidColor.current = currentNode.couleur;
        setBackgroundColor(currentNode.couleur);
      }
    }, [currentId])
  );

  const handlePress = (item: any) => {
    if (item.returnmemory && item.returnmemory !== '.') {
      setReturnMemory(Number(item.returnmemory));
    }

    setId4a(item.id);

    // Couleur du nœud enfant si définie
    if (item.couleur && item.couleur !== '.') {
      lastValidColor.current = item.couleur;
      setBackgroundColor(item.couleur);
    }

    const href = item.id_8a
      ? fichier_8a.find((e: any) => e.id === item.id_8a)?.href
      : undefined;

    if (!isValidHref(href)) {
      // Pas encore de destination définie → on reste
      return;
    }

    router.push({ pathname: href as string, params: { id_4a: item.id } });
  };

  const contrastColor = getContrastColor(
    backgroundColor.endsWith('.png') ? '#FFFFFF' : backgroundColor
  );

  return (
    <View style={[styles.container, { backgroundColor }]}>
      <FlatList
        data={children}
        keyExtractor={item => String(item.id)}
        renderItem={({ item }) => (
          <Button
            text={item.label}
            onPress={() => handlePress(item)}
            style={styles.item}
            textStyle={{ color: contrastColor }}
          />
        )}
        contentContainerStyle={styles.list}
      />

      <View style={styles.backButton}>
        <Pressable onPress={() => router.back()}>
          <AntDesign name="arrowleft" size={32} color={contrastColor} />
        </Pressable>
      </View>
    </View>
  );
};

export default AgeRangeScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-start',
  },
  list: {
    flexGrow: 1,
    justifyContent: 'flex-start',
    paddingTop: 100,
    alignItems: 'flex-start',
  },
  item: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 16,
    paddingHorizontal: 24,
    marginTop: 10,
    marginHorizontal: 5,
    borderRadius: 5,
  },
  backButton: {
    position: 'absolute',
    top: 621,
    left: 20,
    zIndex: 50,
  },
});