import { useRouter , useLocalSearchParams} from "expo-router";
import React, {useState} from 'react';
import { Button,FlatList,Image, Text, TextInput,View, StyleSheet } from 'react-native';

export default function GestionnaireRessource() {
  const { nom, prenom } = useLocalSearchParams(); // Recup data ecran precedent
  const [search, setSearch] = useState('');
  const router = useRouter();

  type Ressource ={
    id: number;
    name: string;
    type: string;
    Image: string;
  }

  const data: Ressource[] = [
    { id: 1, name: 'Marteau', type: 'Outil', Image: '' },
    { id: 2, name: 'Scie', type: 'Outil' , Image: ''},
    { id: 3, name: 'Pelle', type: 'Outil' , Image: '' },
    { id: 4, name: 'Grue', type: 'Machine',Image: 'https://media.discordapp.net/attachments/1425108443571945644/1427207643180826757/raw.png?ex=68ee0632&is=68ecb4b2&hm=1efc51065c6abfb1af75b8382f9924c2eb177c7d7672f7ed9837e96ef3076d16&=&format=webp&quality=lossless&width=421&height=632'},
    { id: 5, name: 'Bulldozer', type: 'Machine', Image: ''},
  ];


    const renderRessource = ({ item, index }: { item?: Ressource; index: number })  => {
      if (!item) {
        // optionnel : afficher un placeholder pour debug
        // return <View style={styles.card}><Text>Item manquant</Text></View>;
        return null;
      }
      return(
      <View style={styles.card}>
        <View style={styles.info}>
          <Image source={{ uri: item.Image }} style={styles.image} />
          <Text>{item.id}</Text>
          <Text>{item.name}</Text>
          <Text>{item.type}</Text>
        </View>
      </View>);
    };

  return(
    <View style={styles.container}>
      <FlatList
        data={data}
        renderItem={renderRessource}
        keyExtractor={(_, index) => index.toString()}
        contentContainerStyle={{ paddingBottom: 40 }}
        ListHeaderComponent={
          <View style={styles.header}>
            <Text style={styles.text}>
              Bonjour {prenom} {nom}
            </Text>

            {/* 🔍 Champ de recherche */}
            <TextInput
              style={styles.input}
              placeholder="Rechercher une ressource..."
              value={search}
              onChangeText={setSearch}
            />
          </View>
        }
        ListEmptyComponent={
          <Text style={styles.empty}>Aucun résultat trouvé 😕</Text>
        }
      />

      <View style={styles.footer}>
        <Button title="Retour" onPress={() => router.back()} />
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    marginTop: 60,
    marginBottom: 20,
    alignItems: 'center',
    paddingHorizontal: 20,
  },
  text: {
    fontSize: 22,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  input: {
    width: '100%',
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 10,
    padding: 10,
    fontSize: 16,
  },
  card: {
    flexDirection: 'row',
    marginHorizontal: 20,
    marginBottom: 15,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 10,
    padding: 10,
    backgroundColor: '#fafafa',
  },
  image: {
    width: 80,
    height: 80,
    borderRadius: 8,
    marginRight: 10,
  },
  info: {
    flex: 1,
    justifyContent: 'center',
  },
  group: {
    fontWeight: 'bold',
    fontSize: 16,
    marginBottom: 5,
  },
  footer: {
    padding: 20,
  },
  empty: {
    textAlign: 'center',
    marginTop: 30,
    color: '#888',
  },
});