import React, { useState, useEffect } from 'react';
import { View, FlatList, StyleSheet, Pressable } from 'react-native';
import { CheckBox } from 'react-native-elements';
import { Symptome } from '@/constants/type';
import AppText from '@/components/AppText';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { filteredSuivi, parsedSymptoms } from '@/constants/constants';
import Button from '@/components/Button';
import { useUsers } from '@/contexts/UserContext';
import pathologiesJSON from '@/assets/json/pathologie_parsed.json';
import fichier_8a from '@/assets/json/fichier_8a.json';
import { useAppData } from '@/contexts/AppDataContext';


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

  const idSuiviNumber = id_suivi ? parseInt(id_suivi) : undefined;

  const filteredSuiviItem = filteredSuivi.find(item => item.id === idSuiviNumber);
  const allSymptoms: Symptome[] = filteredSuiviItem?.symptoms ?? [];

  const currentSuivi = Array.isArray(currentUser?.suivi)
    ? currentUser.suivi.find(s => s.id === idSuiviNumber && !s.ended)
    : undefined;

  const currentSymptomIds = Array.isArray(currentSuivi?.symptoms)
    ? currentSuivi.symptoms.map((s: Symptome) => s.id)
    : [];

  const [checkedItems, setCheckedItems] = useState<number[]>(currentSymptomIds);

  useEffect(() => {
    setCheckedItems(currentSymptomIds);
  }, [id_suivi]);

  const handleCheckboxToggle = (id: number) => {
    setCheckedItems(prev =>
      prev.includes(id) ? prev.filter(itemId => itemId !== id) : [...prev, id]
    );
  };

  const handleValidatePress = async () => {
    if (!currentUser || idSuiviNumber === undefined) return;

    const newSymptoms = parsedSymptoms.filter(s => checkedItems.includes(s.id));

    const updatedSuivi = Array.isArray(currentUser.suivi)
      ? currentUser.suivi.map(s => {
          if (s.id === idSuiviNumber && !s.ended) {
            return { ...s, symptoms: newSymptoms };
          }
          return s;
        })
      : [];

    await updateCurrentUserAsync({ suivi: updatedSuivi });

    const pathologie = pathologiesJSON.find(p => p.id === idSuiviNumber);
    const href = fichier_8a.find(e => e.id === pathologie?.id_8a)?.href;

    router.replace((href ?? '/(tabs)/') as any);
  };

  const renderItem = ({ item }: { item: Symptome }) => (
    <Pressable
      style={({ pressed }) => [styles.itemContainer, pressed && styles.pressedItem]}
      onPress={() => handleCheckboxToggle(item.id)}
    >
      <CheckBox
        checked={checkedItems.includes(item.id)}
        onPress={() => handleCheckboxToggle(item.id)}
        checkedColor='#e8397b'
      />
      <View style={styles.itemTitleContainer}>
        <AppText style={styles.itemTitle} text={item.name} />
      </View>
    </Pressable>
  );

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

export default ModifierSymptomes;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
  },
  list: {
    flex: 1,
  },
  buttonContainer: {
    paddingVertical: 10,
  },
  itemContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 16,
    paddingHorizontal: 24,
    backgroundColor: '#ffffff',
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
    marginTop: 10,
    marginHorizontal: 5,
    borderRadius: 5,
  },
  pressedItem: {
    backgroundColor: '#e0e0e0',
  },
  itemTitleContainer: {
    flex: 1,
  },
  itemTitle: {
    fontSize: 16,
    color: '#000000',
  },
});