import SelectChantier from '@/components/selectChantier';
import { ThemedText } from '@/components/themed-text';
import { ThemedTextInput } from '@/components/themed-textinput';
import { ThemedView } from '@/components/themed-view';
import Constants from 'expo-constants'; //pour connaître la taille de la barre menu de l'OS en haut
import { useLocalSearchParams, useRouter } from 'expo-router';
import React, { useMemo, useState } from 'react';
import { Button, FlatList, Image, StyleSheet, Text } from 'react-native';
import rawConcerts from '../../data/concerts.json';

import { useChantier } from '../ContextChantier';


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

export default function BonjourScreen() {

  const router = useRouter();
  const { nom, prenom } = useLocalSearchParams(); // Recup data ecran precedent
  const [search, setSearch] = useState('');
  const { chantier, setChantier } = useChantier();



  const concertsData: Concert[] = Array.isArray(rawConcerts)
    ? (rawConcerts as Concert[])
    : [];

  const filteredData = useMemo(() => {
    if (!Array.isArray(concertsData)) return [];
    const q = search.trim().toLowerCase();
    if (!q) return concertsData;
    return concertsData.filter(
      (item) => !!item && (item.group ?? '').toLowerCase().includes(q)
    );
  }, [concertsData, search]);


  const renderItem = ({ item, index }: { item?: Concert; index: number })  => {
    if (!item) {
      return null;
    }
    return(
    <ThemedView lvl={1} shadow={true} style={styles.card}>
      <Image source={{ uri: item.Image }} style={styles.image} />
      <ThemedView lvl={1} style={styles.info}>
        <ThemedText style={styles.group}>{item.group}</ThemedText>
        <ThemedText>{item.date}</ThemedText>
        <ThemedText>{item.location}</ThemedText>
        <ThemedText>Prix : {item.price} €</ThemedText>
        <ThemedText>Places restantes : {item.ticketsLeft}</ThemedText>
      </ThemedView>
    </ThemedView>);
  };




  return(
    <ThemedView lvl={3} style={styles.container}>
      <FlatList
        data={filteredData}
        renderItem={renderItem}
        keyExtractor={(_, index) => index.toString()}
        contentContainerStyle={{ paddingBottom: 40 }}
        ListHeaderComponent={
          <ThemedView opacity="00" style={styles.header}>
            <ThemedText style={styles.text}>
              Bonjour {prenom} {nom} {chantier&&chantier.chef.nom}
            </ThemedText>

            <ThemedView style={styles.inputBack} shadow={true}>
              <ThemedTextInput
                lvl={0}
                style={styles.input}
                placeholder="Rechercher un artisant..."
                value={search}
                onChangeText={setSearch}
              />
            </ThemedView>
          </ThemedView>
        }
        ListEmptyComponent={
          <Text style={styles.empty}>Aucun résultat n'a été trouvé</Text>
        }
      />



      <ThemedView style={{width:"100%", position: 'absolute', backgroundColor:'transparent',}}>
            <SelectChantier ></SelectChantier>
      </ThemedView>

    </ThemedView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight, //pour la barre menu du haut
    //backgroundColor: '#00FFFF',
  },
  header: {
    marginTop: 60,
    marginBottom: 20,
    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',
  },
});