import { useRouter, useLocalSearchParams } from "expo-router";
import { navigate } from "expo-router/build/global-state/routing";
import React, { useEffect, useState } from "react";
import {
  Button,
  FlatList,
  Image,
  Text,
  TextInput,
  View,
  StyleSheet,
} from "react-native";
import { getRessources, Ressource } from "../../services/ressourcesService";

export default function GestionnaireRessource() {
  const { nom, prenom } = useLocalSearchParams(); // Recup data ecran precedent
  const [search, setSearch] = useState("");
  const [ressource, setRessources] = useState<Ressource[]>([]);
  const [loading, setLoading] = useState(true);
  const router = useRouter();

  useEffect(() => {
    async function loadData() {
      try {
        const data = await getRessources();
        setRessources(data);
      } catch (error) {
        console.error("Erreur lors du chargement des ressources :", error);
      } finally {
        setLoading(false);
      }
    }

    loadData();
  }, []);

  const filteredData = ressource.filter((r) =>
    r.name.toLowerCase().includes(search.toLowerCase())
  );

  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={filteredData}
        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.push("/(tabs)/bonjourFL")}
        />
      </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",
  },
});