import React from 'react';
import { View, StyleSheet, FlatList, Pressable, Image } from 'react-native';
import { useRouter } from 'expo-router';
import { useUsers } from '@/contexts/UserContext';
import AppText from '@/components/AppText';
import { getIconPath } from '@/constants/constants';
import pathologiesJSON from '@/assets/json/pathologie_parsed.json';
import { useAppData } from '@/contexts/AppDataContext';


const ModifierUnSuivi: React.FC = () => {
  const { fichier4a: fichier_4a, fichier8a: fichier_8a } = useAppData();
  const { currentUser } = useUsers();
  const router = useRouter();

  const activeSuivis = Array.isArray(currentUser?.suivi)
    ? currentUser.suivi.filter(s => !s.ended)
    : [];

  const handleSelect = (suivi: any) => {
    router.push({
      pathname: '/(tabs)/modifier_un_suivi/modifier_symptomes',
      params: { id_suivi: suivi.id },
    });
  };

  const renderItem = ({ item }: { item: any }) => {
    const pathology = pathologiesJSON.find(p => p.id === item.id);
    const iconSource = pathology?.logo ? getIconPath(pathology.logo) : null;

    return (
      <Pressable
        style={({ pressed }) => [styles.itemContainer, pressed && styles.pressedItem]}
        onPress={() => handleSelect(item)}
      >
        <View style={styles.iconContainer}>
          {iconSource ? (
            <Image style={styles.icon} source={iconSource} />
          ) : (
            <View style={[styles.icon, { backgroundColor: '#eee', borderRadius: 4 }]} />
          )}
        </View>
        <View style={styles.textContainer}>
          <AppText style={styles.itemTitle} text={item.name ?? ''} />
        </View>
      </Pressable>
    );
  };

  return (
    <View style={styles.container}>
      {activeSuivis.length === 0 ? (
        <View style={styles.emptyContainer}>
          <AppText style={styles.emptyText} text="Aucun suivi en cours." />
        </View>
      ) : (
        <FlatList
          data={activeSuivis}
          renderItem={renderItem}
          keyExtractor={item => item.id.toString()}
          contentContainerStyle={{ paddingTop: 20 }}
        />
      )}
    </View>
  );
};

export default ModifierUnSuivi;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  emptyContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  emptyText: {
    fontSize: 16,
    color: '#888',
  },
  itemContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 16,
    paddingHorizontal: 24,
    backgroundColor: '#ffffff',
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
    marginHorizontal: 10,
    marginTop: 10,
    borderRadius: 5,
  },
  pressedItem: {
    backgroundColor: '#e0e0e0',
  },
  iconContainer: {
    marginRight: 16,
  },
  icon: {
    width: 40,
    height: 40,
  },
  textContainer: {
    flex: 1,
  },
  itemTitle: {
    fontSize: 16,
    color: '#000',
  },
});