import React, { useState, useEffect } from 'react';
import {
  View,
  Text,
  FlatList,
} from 'react-native';
import { getStyles } from './searchScreen.styles';
import { SearchBar, ProviderCard } from '@components';
import { useAppTheme } from '@theme';
import { deliveryService } from '../../../services/deliveryService';
import { Provider } from '../../../interfaces';

export const SearchScreen: React.FC = () => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);

  const [query, setQuery] = useState('');
  const [results, setResults] = useState<Provider[]>([]);

  useEffect(() => {
    if (query.trim().length > 0) {
      deliveryService.searchProviders(query).then(setResults);
    } else {
      setResults([]);
    }
  }, [query]);

  return (
    <View style={styles.container}>
      <SearchBar
        value={query}
        onChangeText={setQuery}
        placeholder="Search providers or items..."
      />
      <FlatList
        data={results}
        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}
          />
        )}
        ListEmptyComponent={
          query.trim().length > 0 ? (
            <View style={styles.empty}>
              <Text style={styles.emptyText}>No results found</Text>
            </View>
          ) : (
            <View style={styles.empty}>
              <Text style={styles.emptyIcon}>🔍</Text>
              <Text style={styles.emptyText}>Search for food, groceries, medicines...</Text>
            </View>
          )
        }
        contentContainerStyle={styles.list}
      />
    </View>
  );
};