import React, { useCallback, useContext, useState } from 'react';
import {
  View,
  FlatList,
  Image,
  TouchableOpacity,
  StyleSheet,
  SafeAreaView,
  ActivityIndicator,
  RefreshControl,
  ScrollView,
  Alert,
} from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { useNavigation } from '@react-navigation/native';
import { HistoricalFigure } from '../types/types';
import CustomText from '../components/CustomText';
import { Ionicons } from '@expo/vector-icons';
import { useApp } from '../context/AppContext';
import { ChatContext } from '../context/ChatContext';
import { CoinContext } from '../context/CoinContext';
import uuid from 'react-native-uuid';

const HomeScreen = () => {
  const navigation = useNavigation();
  const {
    historicalFigures,
    loading,
    refreshing,
    t,
    currentTheme,
    refreshFigures,
    categories,
  } = useApp();

  const { addChat } = useContext(ChatContext);
  const { coins, showRewardedAd } = useContext(CoinContext);
  const [selectedCategory, setSelectedCategory] = useState<string>('All');
  const [isCreatingChat, setIsCreatingChat] = useState<boolean>(false);

  const startChat = useCallback(async (figure: HistoricalFigure) => {
    if (isCreatingChat) return;
    setIsCreatingChat(true);
    try {
      const chatId = uuid.v4().toString();
      await addChat({
        id: chatId,
        figure,
        createdAt: Date.now(),
      });
      navigation.navigate('Chat', { chatId, figure });
    } catch (error) {
      console.error('Error starting chat:', error);
      Alert.alert(t('error'), t('errorStartingChat'));
    } finally {
      setIsCreatingChat(false);
    }
  }, [addChat, navigation, t, isCreatingChat]);

  const renderFigureItem = useCallback(({ item }: { item: HistoricalFigure }) => (
    <View style={[styles.figureItem, { backgroundColor: currentTheme.cardBackground }]}>
      <Image source={{ uri: item.image }} style={styles.avatar} />
      <View style={styles.figureInfo}>
        <CustomText bold style={[styles.figureName, { color: currentTheme.textColor }]}>
          {item.name}
        </CustomText>
        <CustomText style={[styles.figureCategory, { color: currentTheme.accentColor }]}>
          {item.category}
        </CustomText>
        <CustomText
          style={[styles.figureDescription, { color: currentTheme.secondaryTextColor }]}
          numberOfLines={2}
        >
          {item.description}
        </CustomText>
        <TouchableOpacity
          style={[styles.chatButton, { backgroundColor: currentTheme.accentColor }]}
          onPress={() => startChat(item)}
          disabled={isCreatingChat}
        >
          <Ionicons name="chatbubble-ellipses-outline" size={20} color={currentTheme.backgroundColor} />
          <CustomText style={[styles.chatButtonText, { color: currentTheme.backgroundColor }]}>
            {t('chat')}
          </CustomText>
        </TouchableOpacity>
      </View>
    </View>
  ), [currentTheme, startChat, t, isCreatingChat]);

  const keyExtractor = useCallback((item: HistoricalFigure) => item.id, []);

  const onRefresh = useCallback(async () => {
    await refreshFigures();
  }, [refreshFigures]);

  const filteredFigures = selectedCategory === 'All'
    ? historicalFigures
    : historicalFigures.filter(fig => fig.category === selectedCategory);

  const renderCategoryItem = useCallback((category: string, index: number) => {
    const isSelected = category === selectedCategory;
    return (
      <TouchableOpacity
        key={`${category}-${index}`}
        style={[
          styles.categoryButton,
          {
            backgroundColor: isSelected ? currentTheme.accentColor : 'transparent',
            borderColor: isSelected ? currentTheme.accentColor : currentTheme.secondaryTextColor,
          }
        ]}
        onPress={() => setSelectedCategory(category)}
      >
        <CustomText
          style={[
            styles.categoryText,
            {
              color: isSelected ? currentTheme.backgroundColor : currentTheme.textColor,
            }
          ]}
        >
          {t(category)}
        </CustomText>
      </TouchableOpacity>
    );
  }, [selectedCategory, currentTheme, t]);

  const renderCategoryRows = () => {
    const halfLength = Math.ceil(categories.length / 2);
    return (
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.categoryRowsContainer}
      >
        <View>
          <View style={styles.categoryRow}>
            {categories.slice(0, halfLength).map((category, index) => renderCategoryItem(category, index))}
          </View>
          <View style={styles.categoryRow}>
            {categories.slice(halfLength).map((category, index) => renderCategoryItem(category, index + halfLength))}
          </View>
        </View>
      </ScrollView>
    );
  };

  return (
    <SafeAreaView style={[styles.safeArea, { backgroundColor: currentTheme.backgroundColor }]}>
      <StatusBar style={currentTheme.statusBarStyle} />
      <View style={styles.container}>
        <View style={styles.header}>
          <CustomText bold style={[styles.title, { color: currentTheme.textColor }]}>
            {t('historicalFigures')}
          </CustomText>
          <View style={styles.headerRight}>
            <TouchableOpacity style={styles.coinContainer} onPress={showRewardedAd}>
              <Ionicons name="flash" size={20} color={currentTheme.accentColor} />
              <CustomText style={[styles.coinText, { color: currentTheme.textColor }]}>
                {coins}
              </CustomText>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.settingsButton}
              onPress={() => navigation.navigate('Settings')}
            >
              <Ionicons name="settings-outline" size={24} color={currentTheme.accentColor} />
            </TouchableOpacity>
          </View>
        </View>

        {renderCategoryRows()}

        {loading ? (
          <View style={styles.loadingContainer}>
            <ActivityIndicator size="large" color={currentTheme.accentColor} />
          </View>
        ) : filteredFigures.length === 0 ? (
          <View style={styles.emptyContainer}>
            <CustomText style={[styles.emptyText, { color: currentTheme.textColor }]}>
              {t('noFiguresInThisCategory')}
            </CustomText>
          </View>
        ) : (
          <FlatList
            data={filteredFigures}
            renderItem={renderFigureItem}
            keyExtractor={keyExtractor}
            contentContainerStyle={styles.figureList}
            showsVerticalScrollIndicator={false}
            refreshControl={
              <RefreshControl
                refreshing={refreshing}
                onRefresh={onRefresh}
                colors={[currentTheme.accentColor]}
                tintColor={currentTheme.accentColor}
              />
            }
          />
        )}
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
  },
  container: {
    flex: 1,
    paddingHorizontal: 10,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 15,
    paddingHorizontal: 15,
  },
  title: {
    fontFamily: 'Poppins_700Bold',
    fontSize: 24,
  },
  headerRight: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  coinContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 5,
  },
  coinText: {
    fontFamily: 'Poppins_700Bold',
    fontSize: 18,
    marginLeft: 5,
  },
  settingsButton: {
    padding: 2,
    marginLeft: 2,
  },
  categoryRowsContainer: {
    paddingHorizontal: 5,
    paddingBottom: 20,
  },
  categoryRow: {
    flexDirection: 'row',
    marginBottom: 6,
  },
  categoryButton: {
    paddingVertical: 6,
    paddingHorizontal: 8,
    borderRadius: 16,
    borderWidth: 1,
    marginRight: 5,
  },
  categoryText: {
    fontFamily: 'Poppins_600SemiBold',
    fontSize: 14,
  },
  figureList: {
    paddingVertical: 10,
  },
  figureItem: {
    flexDirection: 'row',
    borderRadius: 12,
    elevation: 3,
    margin: 5,
    padding: 10,
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.22,
    shadowRadius: 2.22,
    shadowColor: '#000',
  },
  avatar: {
    borderRadius: 12,
    height: 120,
    width: 100,
    marginRight: 10,
  },
  figureInfo: {
    flex: 1,
    justifyContent: 'space-between',
  },
  figureName: {
    fontFamily: 'Poppins_700Bold',
    fontSize: 18,
  },
  figureCategory: {
    fontFamily: 'Poppins_600SemiBold',
    fontSize: 14,
  },
  figureDescription: {
    fontFamily: 'Poppins_400Regular',
    fontSize: 14,
    marginTop: 4,
  },
  chatButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 8,
    paddingHorizontal: 12,
    borderRadius: 20,
    marginTop: 8,
  },
  chatButtonText: {
    fontFamily: 'Poppins_600SemiBold',
    fontSize: 14,
    marginLeft: 5,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  emptyContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  emptyText: {
    fontSize: 16,
    textAlign: 'center',
  },
});

export default HomeScreen; burada şöyle bir şey yap. chat butonu var ya arkaplanı backgroundu transparent olsun, 1 px borderi olsun. buradaki tema kodlarına bakarak isimlerini yazsın:
export const themes: { [key: string]: Theme } = {
  light: {
    backgroundColor: '#FAFAFA',
  textColor: '#1E1E1E',
  secondaryTextColor: '#5A5A5A',
  accentColor: '#6200EE',
  cardBackground: '#FFFFFF',
  tabBackground: '#F1F1F1',
  tabBorder: '#D1D1D1',
  activeTab: '#6200EE',
  inactiveTab: '#A1A1A1',
  statusBarStyle: 'dark-content',
  buttonBackground: '#6200EE',
  buttonTextColor: '#FFFFFF',
  inputBackground: '#F0F0F0',
  placeholderTextColor: '#8A8A8A',
  borderColor: '#E0E0E0',
  shadowColor: '#000',
  successColor: '#4CAF50',
  warningColor: '#FF9800',
  errorColor: '#F44336',
  },
  dark: {
  backgroundColor: '#121212',
  textColor: '#E0E0E0',
  secondaryTextColor: '#A0A0A0',
  accentColor: '#BB86FC',
  cardBackground: '#1E1E1E',
  tabBackground: '#1F1F1F',
  tabBorder: '#333333',
  activeTab: '#BB86FC',
  inactiveTab: '#777777',
  statusBarStyle: 'light-content',
  buttonBackground: '#BB86FC',
  buttonTextColor: '#000000',
  inputBackground: '#2C2C2C',
  placeholderTextColor: '#AAAAAA',
  borderColor: '#444444',
  shadowColor: '#000',
  successColor: '#81C784',
  warningColor: '#FFB74D',
  errorColor: '#E57373',

siyah arkaplanda yazı beyaz olacak, border beyaz olacak, light temada da tam tersi.