import ChantierSummary from '@/components/chantierSummary';
import SelectChantier from '@/components/selectChantier';
import SetStatus from '@/components/setStatus';
import { ThemedView } from '@/components/themed-view';
import React, { useEffect, useState } from 'react';
import { StyleSheet, ScrollView, Button, TextInput, Text } from 'react-native';
import { useChantier } from '../ContextChantier';
import { useRessources } from '../ContextRessource';
import { useUser } from '../ContextUser';
import { getRessources, getUsers, addChantier } from '@/services/ressourcesService';
import { Chantier, Ressources } from '@/class/class';
import { ThemedText } from '@/components/themed-text';
import { ThemedButton } from '@/components/themed-button';
import { ThemedTextInput } from '@/components/themed-textinput';

export default function AddChantier() {
  const { chantier, setChantier } = useChantier();
  const { user, setUser } = useUser();
  const { ressources, setRessources } = useRessources();
  
  const [loading, setLoading] = useState(false);
  const [nom, setNom] = useState('');
  const [chefChantier, setChefChantier] = useState('');
  const [adresse, setAdresse] = useState('');
  const [duree, setDuree] = useState('');
  const [userSelect, setUserSelect] = useState<string[]>([]);
  const [ressourcesSelect, setRessourcesSelect] = useState<string[]>([]);

  // Charger les utilisateurs et ressources
  useEffect(() => {
    async function load() {
      setLoading(true);
      const usersDb = await getUsers();
      const ressourcesDb = await getRessources();
      setUser(usersDb);
      setRessources(ressourcesDb);
      setLoading(false);
    }
    load();
  }, []);

  async function handleAddChantier() {
    setLoading(true);

    // Vérification chef
    const chefUser = user.find(u => u.id === chefChantier);
    if (!chefUser) {
      console.error("Chef introuvable !");
      setLoading(false);
      return;
    }

    // Trouver les Users de l'équipe
    const equipeUsers = userSelect
      .map(id => user.find(u => u.id === id))
      .filter(Boolean) as typeof user;

    // Trouver les ressources sélectionnées
    const materielSelect = ressourcesSelect
  .map(id => ressources.find(r => r.id.toString() === id))
  .filter(Boolean) as Ressources[];


    // Construire l'objet chantier complet
    const chantierData: Omit<Chantier, 'id'> = {
  chef: chefUser!,
  adresse,
  dateDep: new Date(),
  equipe: equipeUsers,
  materiel: materielSelect,
  etat: 'En attente',
  latitude: 0,
  longitude: 0,
  anomalies: [],
  tempsEst: 0,
  vehicules: [],
  contact: "",
};

    // Ajouter le chantier dans Firestore
    const id = await addChantier(chantierData);
    setLoading(false);

    if (id) {
      console.log("Chantier ajouté avec l'ID :", id);
      setChantier({ ...chantierData, id });
    }
  }
  return (
    <ScrollView style= {styles.container}>
      <ThemedView style = {styles.header}>
        <ThemedText style = {styles.text}>Ajouter un nouveau chantier </ThemedText>
        <ThemedTextInput lvl = {0} style = {styles.input} placeholder='Nom du chantier' value = {nom} onChangeText={setNom}/>
        <ThemedTextInput lvl = {0} style = {styles.input} placeholder='Adresse du chantier' value = {adresse} onChangeText={setAdresse} />
        <ThemedTextInput lvl = {0} style = {styles.input} placeholder='durée estimée (en jours)' value = {duree} onChangeText={setDuree} />
        <ThemedTextInput lvl = {0} style = {styles.input} placeholder='chef de chantier' value= {chefChantier} onChangeText={setChefChantier}/>
        <ThemedText style={{ fontWeight: "bold", marginTop: 15 }}>Équipe</ThemedText>
        <SelectChantier
        data={user}
        multiple
        selected={userSelect}
        onChange={setUserSelect}
        placeholder="Sélectionner l'équipe"
      />
      <Text style={{ fontWeight: "bold", marginTop: 15 }}>Ressources</Text>
      <SelectChantier
        data={ressources}
        multiple
        selected={ressourcesSelect}
        onChange={setRessourcesSelect}
        placeholder="Sélectionner les ressources"
      />
      <ThemedButton
        lvl={1}
        shadow={true}
        style={{ padding: 10, borderRadius: 8, marginBottom: 10 }}
        onPress={() => handleAddChantier()}
        >

      </ThemedButton>
      </ThemedView>

    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 60,
  },
  header: {
    marginBottom: 20,
    alignItems: "center",
    paddingHorizontal: 20,
  },
  text: {
    fontSize: 22,
    fontWeight: "bold",
    marginBottom: 10,
  },
  inputBack: {
    width: "100%",
    borderRadius: 10,
    backgroundColor: "transparent",
  },
  input: {
    width: "100%",
    borderRadius: 10,
    padding: 10,
    fontSize: 16,
  },
  card: {
    flexDirection: "row",
    marginHorizontal: 20,
    marginBottom: 15,
    borderRadius: 10,
    padding: 10,
  },
  image: {
    width: 80,
    height: 80,
    borderRadius: 8,
    marginRight: 10,
  },
  info: {
    flex: 1,
    justifyContent: "center",
  },
  footer: {
    padding: 20,
  },
  empty: {
    textAlign: "center",
    marginTop: 30,
    color: "#888",
  },
  filterMenuOverlay: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: "rgba(0,0,0,0.4)",
    justifyContent: "center",
    alignItems: "center",
    zIndex: 999,
  },
  filterMenu: {
    width: "80%",
    borderRadius: 12,
    padding: 20,
    backgroundColor: "#fff",
  },
  filterTitle: {
    fontSize: 18,
    fontWeight: "bold",
    marginBottom: 20,
    textAlign: "center",
  },
});
