import React, { useState, useEffect } from 'react';
import {
  View,
  Text,
  FlatList,
  TouchableOpacity,
  ScrollView,
} from 'react-native';
import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { getStyles } from './providerListScreen.styles';
import { ProviderCard, Header } from '@components';
import { useAppTheme } from '@theme';
import { getProvidersApi } from '../../../api/deliveryApi';
import { Provider } from '../../../interfaces';
import { AppStackParamList } from '../../../navigation/appStack';

const FILTERS = ['Filters', 'Rating 4.0+', 'Fast Delivery'];

type ProviderListNavProp = StackNavigationProp<AppStackParamList, 'ProviderListScreen'>;
type ProviderListRouteProp = RouteProp<AppStackParamList, 'ProviderListScreen'>;

export const ProviderListScreen: React.FC = () => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);
  const navigation = useNavigation<ProviderListNavProp>();
  const route = useRoute<ProviderListRouteProp>();
  const category = route.params?.category;
  const [providers, setProviders] = useState<Provider[]>([]);
  const [activeFilter, setActiveFilter] = useState<string | null>(null);

  useEffect(() => {
    // If a category was passed, we can filter or search by it, but for mock data we fetch all
    getProvidersApi().then(setProviders);
  }, [category]);

  return (
    <View style={styles.container}>
      <Header title={category ? `${category} Providers` : 'Providers'} onBack={() => navigation.goBack()} />
      <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.filterRow}>
        {FILTERS.map((filter) => (
          <TouchableOpacity
            key={filter}
            style={[
              styles.filterChip,
              activeFilter === filter && styles.filterChipActive,
            ]}
            onPress={() => setActiveFilter(activeFilter === filter ? null : filter)}
            activeOpacity={0.7}
          >
            <Text
              style={[
                styles.filterChipText,
                activeFilter === filter && styles.filterChipTextActive,
              ]}
            >
              {filter}
            </Text>
          </TouchableOpacity>
        ))}
      </ScrollView>
      <FlatList
        data={category ? providers.filter(p => p.tag === category) : providers}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <ProviderCard
            imageUrl={item.imageUrl}
            name={item.name}
            rating={item.rating}
            deliveryTime={item.deliveryTime}
            tag={item.tag}
            discountText={item.discountText}
            onPress={() =>
              navigation.navigate('ProviderDetailsScreen', {
                providerId: item.id,
                providerName: item.name,
              })
            }
          />
        )}
        contentContainerStyle={styles.list}
      />
    </View>
  );
};