import React, { useState, useRef, useEffect } from 'react';
import { View, FlatList, StyleSheet, Text } from 'react-native';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { filteredSuivi, parsedPathologies } from '@/constants/constants';
import Button from '@/components/Button';
import { useUsers } from '@/contexts/UserContext';
import { Symptome } from '@/constants/type';
import { InputBox } from '@/components/AssessSymptom';
import { useAppData } from '@/contexts/AppDataContext';


const SupplementarySymptomsAssociatedWithSuivi: React.FC = () => {
  const { fichier4a: fichier_4a, fichier8a: fichier_8a } = useAppData();
  const { id_suivi, evaluateur } = useLocalSearchParams<{ id_suivi: string; evaluateur: string }>();
  const { currentUser, updateCurrentUserAsync, volatileData } = useUsers();
  const router = useRouter();

  const [initSymptomsArray, setInitSymptomsArray] = useState<any[]>([]);

  // ── Ref toujours à jour sur volatileData — évite les problèmes de closure
  const volatileDataRef = useRef(volatileData);
  useEffect(() => {
    volatileDataRef.current = volatileData;
  }, [volatileData]);

  const filteredSuiviItem = filteredSuivi.find(item => item.id == parseInt(id_suivi));
  const initSymptoms: Symptome[] = filteredSuiviItem ? filteredSuiviItem.init_symptoms : [];

  const handleInputChange = (id: number, value: string | number) => {
    setInitSymptomsArray(prev => {
      const exists = prev.find(s => s.id === id);
      const newEntry = { date: new Date(), valeur: value };
      if (exists) {
        return prev.map(s => s.id === id ? { ...s, data: [newEntry] } : s);
      }
      const template = initSymptoms.find(s => s.id === id);
      if (template) {
        return [...prev, { ...template, data: [newEntry] }];
      }
      return prev;
    });
  };

  const handleValidatePress = async () => {
    const idSuiviNumber = parseInt(id_suivi);
    const path = parsedPathologies.find(p => p.id === idSuiviNumber);
    if (!path) return;

    // Lire la version la plus récente via la ref
    const latestVolatile = volatileDataRef.current;

    const mergedInitSymptoms = initSymptoms.map((symptom: any) => {
      // Priorité 1 : valeur capturée via callback (slider popup validé)
      const captured = initSymptomsArray.find(s => s.id === symptom.id);
      if (captured && captured.data?.length > 0) {
        return captured;
      }

      // Priorité 2 : valeur dans volatileData via ref (boutons "0" et "100%" directs)
      const volatileVal = latestVolatile?.[symptom.id];
      if (volatileVal !== undefined && volatileVal !== null) {
        return {
          ...symptom,
          data: [{ date: new Date(), valeur: volatileVal }]
        };
      }

      return symptom;
    });

    const newPathArray = {
      name: path.name,
      id: path.id,
      symptoms: [],
      init_symptoms: mergedInitSymptoms,
      evaluateur,
      date: new Date(),
      ended: false,
      icon: path.icon,
      namelogo: path.namelogo,
    };

    const updatedSuivi = [
      ...(currentUser?.suivi ?? []).filter(p => !(p.id === idSuiviNumber && !p.ended)),
      newPathArray
    ];

    await updateCurrentUserAsync({ suivi: updatedSuivi });

    router.replace({
      pathname: '/(tabs)/lancer_un_suivi/symptoms_associated_with_suivi',
      params: { evaluateur, id_suivi }
    });
  };

  const renderItem = ({ item }: { item: Symptome }) => {
    const initValue =
      currentUser?.basic_data?.find(s => s.id === item.id)?.data?.at(-1)?.valeur ||
      currentUser?.supplementary_data?.find(s => s.id === item.id)?.data?.at(-1)?.valeur ||
      '';

    return (
      <View key={item.id} style={{ padding: 20 }}>
        <InputBox
          s={item}
          evaluateur={evaluateur?.toString()}
          onClose={() => {}}
          noText
          donotdispVButtons
          ouinonSameLine
          initsetSliderValue={typeof initValue === 'number' ? initValue : null}
          initsetTexteValue={initValue !== undefined && initValue !== '' ? String(initValue) : undefined}
          recupSliderValue={v => handleInputChange(item.id, v)}
          recupYesNo={v => handleInputChange(item.id, v ? 1 : 0)}
          recupText={v => handleInputChange(item.id, v)}
          commitRequested={false}
        >
          {({ leftButton, centerValue, rightButton }) => {
            const isOuiNonEval = leftButton || rightButton;
            return (
              <View style={{ width: '100%' }}>
                {isOuiNonEval ? (
                  <>
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                      <Text style={{ fontSize: 18, fontWeight: 'bold' }}>{item.name}</Text>
                      <View style={{ width: '40%', alignItems: 'center', justifyContent: 'center' }}>
                        {centerValue}
                      </View>
                    </View>
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 4 }}>
                      <Text style={{ fontSize: 10, fontWeight: 'bold', opacity: 0.7 }}>
                        {item.surname}
                      </Text>
                      <View style={{ width: '40%', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                        <View style={{ alignItems: 'flex-start' }}>{leftButton}</View>
                        <View style={{ alignItems: 'flex-end' }}>{rightButton}</View>
                      </View>
                    </View>
                  </>
                ) : (
                  <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                    <View style={{ flexDirection: 'column', flex: 0.6 }}>
                      <Text style={{ fontSize: 18, fontWeight: 'bold' }}>{item.name}</Text>
                      <Text style={{ fontSize: 10, fontWeight: 'bold', opacity: 0.7, marginTop: 2 }}>
                        {item.surname}
                      </Text>
                    </View>
                    <View style={{ flex: 0.4, alignItems: 'flex-end' }}>
                      {centerValue}
                    </View>
                  </View>
                )}
              </View>
            );
          }}
        </InputBox>
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={initSymptoms}
        renderItem={renderItem}
        keyExtractor={item => item.id.toString()}
        style={styles.list}
      />
      <View style={styles.buttonContainer}>
        <Button text="Valider" onPress={handleValidatePress} isSelected />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, padding: 10 },
  list: { flex: 1 },
  buttonContainer: { paddingVertical: 10 },
});

export default SupplementarySymptomsAssociatedWithSuivi;