import React, { useState, useEffect, useCallback } from 'react';
import {
  View,
  Text,
  ScrollView,
  TouchableOpacity,
  FlatList,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
import { getStyles } from './homeScreen.styles';
import { SearchBar, ProviderCard, CategoryChip } from '@components';
import { useAppTheme } from '@theme';
import { deliveryService } from '../../../services/deliveryService';
import { Provider } from '../../../interfaces';
import { AppStackParamList } from '../../../navigation/appStack';

type NavProp = BottomTabNavigationProp<AppStackParamList, 'HomeScreen'>;

const CATEGORIES = [
  { key: 'all', icon: '🏠', label: 'All' },
  { key: 'Food', icon: '🍔', label: 'Food' },
  { key: 'Groceries', icon: '🛒', label: 'Groceries' },
  { key: 'Pharmacy', icon: '💊', label: 'Pharmacy' },
  { key: 'More', icon: '📦', label: 'More' },
];

export const HomeScreen: React.FC = () => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);
  const navigation = useNavigation<NavProp>();

  const [providers, setProviders] = useState<Provider[]>([]);
  const [selectedCategory, setSelectedCategory] = useState('all');

  useEffect(() => {
    deliveryService.getProviders().then(setProviders);
  }, []);

  const filteredProviders = selectedCategory === 'all'
    ? providers
    : providers.filter((p) => p.tag === selectedCategory);

  const handleSearchFocus = useCallback(() => {
    navigation.navigate('SearchScreen');
  }, [navigation]);

  return (
    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
      <View style={styles.addressBar}>
        <Text style={styles.addressLabel}>Deliver to</Text>
        <TouchableOpacity style={styles.addressRow} activeOpacity={0.7}>
          <Text style={styles.addressText}>Koramangala 4th Block, B... </Text>
          <Text style={styles.dropdownArrow}>▼</Text>
        </TouchableOpacity>
      </View>

      <SearchBar
        value=""
        onChangeText={() => {}}
        placeholder="Search providers or items..."
        onFocus={handleSearchFocus}
      />

      <View style={styles.banner}>
        <Text style={styles.bannerText}>50% OFF</Text>
        <Text style={styles.bannerSubtext}>on your first order</Text>
      </View>

      <FlatList
        horizontal
        data={CATEGORIES}
        keyExtractor={(item) => item.key}
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.chipRow}
        renderItem={({ item }) => (
          <CategoryChip
            icon={item.icon}
            label={item.label}
            isSelected={selectedCategory === item.key}
            onPress={() => setSelectedCategory(item.key)}
          />
        )}
      />

      <Text style={styles.sectionTitle}>
        {selectedCategory === 'all' ? 'Popular Providers' : selectedCategory}
      </Text>

      {filteredProviders.map((provider) => (
        <ProviderCard
          key={provider.id}
          imageUrl={provider.imageUrl}
          name={provider.name}
          rating={provider.rating}
          deliveryTime={provider.deliveryTime}
          tag={provider.tag}
          discountText={provider.discountText}
          onPress={() => navigation.navigate('SearchScreen')}
        />
      ))}

      <View style={{ height: 24 }} />
    </ScrollView>
  );
};