import { ThemedText } from "@/components/theme/themed-text";
import { ThemedTextInput } from "@/components/theme/themed-textinput";
import { ThemedView } from "@/components/theme/themed-view";
import Constants from "expo-constants"; //pour connaître la taille de la barre menu de l'OS en haut
import React, { useEffect, useState } from "react";
import { FlatList, StyleSheet, Text, View } from "react-native";
import { getUsers } from "@/services/ressourcesService";
import SelectChantier from "@/components/selectChantier";
import { User } from "@/class/class";

type Concert = {
  group: string;
  date: string;
  nationality: string;
  location: string;
  price: number;
  ticketsLeft: number;
  Image: string;
  favorite: boolean;
};

export default function GestionUser() {
  const [search, setSearch] = useState("");
  const [users, setUsers] = useState<User[]>([]);

  useEffect(() => {
      async function loadData() {
        try {
          const data = (await getUsers()); 
          setUsers(data);
        } catch (error) {
          console.error("Erreur lors du chargement :", error);
        }
      }
      loadData();
    }, []);

  const renderItem = ({ item, index }: { item?: User; index: number }) => {
    if (!item) {
      return null;
    }
    return (
      <ThemedView lvl={1} shadow={true} style={styles.card}>
        <ThemedView lvl={1} style={styles.info}>
          <ThemedText style={styles.group}>{item.name} {item.last_name}</ThemedText>
          <ThemedText>{item.role}</ThemedText>
        </ThemedView>
      </ThemedView>
    );
  };

  return (
    <ThemedView lvl={3} style={styles.back}>
      <View style={styles.container}>
        <View style={{width:"100%", position: 'absolute'}}>
          <SelectChantier></SelectChantier>
        </View>


        <FlatList
          data={users}
          renderItem={renderItem}
          keyExtractor={(_, index) => index.toString()}
          contentContainerStyle={{ paddingBottom: 40 }}
          ListHeaderComponent={
            <View style={styles.header}>
              <ThemedView style={styles.inputBack} shadow={true}>
                <ThemedTextInput
                  lvl={0}
                  style={styles.input}
                  placeholder="Rechercher un artisant..."
                  value={search}
                  onChangeText={setSearch}
                />
              </ThemedView>
            </View>
          }
          ListEmptyComponent={
            <Text style={styles.empty}>Aucun résultat n'a été trouvé</Text>
          }
        />
      </View>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  back:{
    height:"100%",
    width:"100%",
  },
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight, //pour la barre menu du haut
    //backgroundColor: '#00FFFF',
  },
  header: {
    marginTop: 60,
    marginBottom: 10,
    alignItems: "center",
    paddingHorizontal: 20,
  },
  text: {
    fontSize: 22,
    fontWeight: "bold",
    marginBottom: 10,
  },
  inputBack: {
    width: "100%",
    borderRadius: 10,
    backgroundColor: "transparent",
  },
  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",
  },
});