import React, { useState, useEffect, useCallback, useContext } from 'react';
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  Image,
  TouchableOpacity,
  ActivityIndicator,
  RefreshControl,
  ScrollView,
} from 'react-native';
import { useThemeAndLanguage } from '../utils/ThemeAndLanguageContext';
import { useNavigation } from '@react-navigation/native';
import * as rssParser from 'react-native-rss-parser';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Ionicons } from '@expo/vector-icons';
import { CustomTextR, CustomTextB } from '../components/CustomText';
import { HeartContext } from './HeartContext';
import useInternetStatus from '../utils/useInternetStatus';
import InternetStatusAlert from '../components/InternetStatusAlert';

const RSS_URL = 'http://91.107.235.164:5000/feed.xml';
const STORAGE_KEY = '@rss_feed';
const READ_STORIES_KEY = '@readRSSStories';

const RSSTabContent = () => {
  const { theme, t, locale } = useThemeAndLanguage();
  const [rssItems, setRssItems] = useState([]);
  const [sources, setSources] = useState([]);
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [error, setError] = useState(null);
  const [readStories, setReadStories] = useState(new Set());
  const [showInternetAlert, setShowInternetAlert] = useState(false);
  const { isConnected } = useInternetStatus();
  const navigation = useNavigation();
  const { heartsCounts, userHearts } = useContext(HeartContext);
  const [selectedSource, setSelectedSource] = useState('all');

  // Load read stories from AsyncStorage
  const loadReadStories = useCallback(async () => {
    try {
      const readStoriesString = await AsyncStorage.getItem(READ_STORIES_KEY);
      if (readStoriesString) {
        setReadStories(new Set(JSON.parse(readStoriesString)));
      }
    } catch (err) {
      console.error('Error loading read RSS stories:', err);
    }
  }, []);

  // Mark story as read
  const markStoryAsRead = useCallback(async (storyId) => {
    try {
      const newReadStories = new Set(readStories);
      newReadStories.add(storyId);
      setReadStories(newReadStories);
      await AsyncStorage.setItem(READ_STORIES_KEY, JSON.stringify(Array.from(newReadStories)));
    } catch (err) {
      console.error('Error saving read RSS story:', err);
    }
  }, [readStories]);

  // Handle story press
  const handleStoryPress = useCallback((item) => {
    markStoryAsRead(item.link);
    navigation.navigate('RSSReadScreen', { item });
  }, [navigation, markStoryAsRead]);

  // Parse RSS item
  const parseRSSItem = (item) => {
    // Extract source from URL
    const sourceMatch = item.link.match(/\/\/(.*?)\//);
    const source = sourceMatch ? sourceMatch[1].replace('www.', '') : '';
    
    // Parse date safely
    let pubDate;
    try {
      pubDate = item.pubDate ? new Date(item.pubDate) : new Date();
      // Check if date is valid
      if (isNaN(pubDate.getTime())) {
        pubDate = new Date();
      }
    } catch (e) {
      pubDate = new Date();
    }
    
    return {
      title: item.title || '',
      link: item.link || '',
      content: item.description || item.content || '',
      thumbnail: item.enclosures?.[0]?.url || item.thumbnail || '',
      source: source,
      pubDate: pubDate,
    };
  };
  
  // renderRSSItem fonksiyonunda tarih gösterimi kısmını güncelleyelim
  const renderRSSItem = useCallback(({ item }) => {
    const isHearted = userHearts[item.link];
    const heartCount = heartsCounts[item.link] || 0;
    const isRead = readStories.has(item.link);
  
    // Format date safely
    const formatDate = (date) => {
      try {
        if (date instanceof Date && !isNaN(date)) {
          return date.toLocaleDateString(locale, {
            year: 'numeric',
            month: 'long',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
          });
        }
        return '';
      } catch (e) {
        return '';
      }
    };
  
    return (
      <TouchableOpacity 
        style={[styles.itemContainer, { backgroundColor: theme.lighterCardBackgroundColor }]}
        onPress={() => handleStoryPress(item)}
      >
        {item.thumbnail ? (
          <Image 
            source={{ uri: item.thumbnail }}
            style={[styles.thumbnail, isRead && styles.readStoryImage]}
            resizeMode="cover"
          />
        ) : (
          <View style={[styles.thumbnail, styles.noImage]}>
            <Ionicons name="image-outline" size={40} color="gray" />
          </View>
        )}
        <View style={styles.textContainer}>
          <Text style={[styles.titleArabic, { color: theme.textColor, fontFamily: 'NotoSansArabic-Regular' }]}>
            {item.title}
          </Text>
          <CustomTextR style={[styles.description, { color: theme.textColor }]}>
            {item.content ? item.content.replace(/<[^>]+>/g, '').substring(0, 100) + '...' : ''}
          </CustomTextR>
          <View style={styles.infoContainer}>
            <CustomTextB style={[styles.infoText, { color: theme.textColor }]}>
              {formatDate(item.pubDate)}
            </CustomTextB>
            {item.source && (
              <View style={styles.sourceContainer}>
                <CustomTextR style={[styles.sourceText, { color: theme.textColor }]}>
                  {item.source}
                </CustomTextR>
              </View>
            )}
            <View style={styles.heartContainer}>
              <Ionicons
                name={isHearted ? 'heart' : 'heart-outline'}
                color={isHearted ? 'red' : theme.textColor}
                size={16}
              />
              <CustomTextB style={[styles.heartCount, { color: theme.textColor }]}>
                {heartCount}
              </CustomTextB>
            </View>
          </View>
        </View>
      </TouchableOpacity>
    );
  }, [handleStoryPress, theme, readStories, userHearts, heartsCounts, locale]);

  // Source selection buttons
  const renderSourceButtons = () => (
    <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.categoryContainer}>
      <TouchableOpacity
        style={[
          styles.categoryButton,
          selectedSource === 'all' && styles.selectedCategoryButton,
          { borderColor: theme.textColor }
        ]}
        onPress={() => setSelectedSource('all')}
      >
        <Text style={[styles.categoryText, { color: selectedSource === 'all' ? theme.primaryColor : theme.textColor }]}>
          {t('allSources')}
        </Text>
      </TouchableOpacity>
      {sources.map(source => (
        <TouchableOpacity
          key={source}
          style={[
            styles.categoryButton,
            selectedSource === source && styles.selectedCategoryButton,
            { borderColor: theme.textColor }
          ]}
          onPress={() => setSelectedSource(source)}
        >
          <Text style={[styles.categoryText, { color: selectedSource === source ? theme.primaryColor : theme.textColor }]}>
            {source}
          </Text>
        </TouchableOpacity>
      ))}
    </ScrollView>
  );

  if (loading) {
    return (
      <View style={[styles.loadingContainer, { backgroundColor: theme.backgroundColor }]}>
        <ActivityIndicator size="large" color={theme.primaryColor} />
      </View>
    );
  }

  return (
    <View style={[styles.container, { backgroundColor: theme.backgroundColor }]}>
      <InternetStatusAlert
        visible={showInternetAlert}
        onDismiss={() => setShowInternetAlert(false)}
      />
      <FlatList
        ListHeaderComponent={renderSourceButtons}
        data={getFilteredItems()}
        renderItem={renderRSSItem}
        keyExtractor={item => item.link}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
            colors={[theme.primaryColor]}
          />
        }
        initialNumToRender={5}
        maxToRenderPerBatch={5}
        windowSize={11}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  itemContainer: {
    flexDirection: 'row',
    margin: 10,
    borderRadius: 10,
    overflow: 'hidden',
    elevation: 2,
  },
  thumbnail: {
    width: 100,
    height: 100,
  },
  noImage: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ccc',
  },
  readStoryImage: {
    opacity: 0.5,
  },
  textContainer: {
    flex: 1,
    padding: 10,
    justifyContent: 'space-between',
  },
  titleArabic: {
    fontSize: 16,
    fontWeight: 'bold',
    textAlign: 'right',
  },
  description: {
    fontSize: 12,
    marginTop: 5,
    textAlign: 'right',
  },
  infoContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  infoText: {
    fontSize: 10,
  },
  categoryContainer: {
    flexDirection: 'row',
    marginVertical: 10,
    paddingHorizontal: 10,
  },
  categoryButton: {
    paddingVertical: 6,
    paddingHorizontal: 12,
    borderWidth: 1,
    borderRadius: 20,
    marginRight: 10,
  },
  selectedCategoryButton: {
    backgroundColor: 'rgba(0,0,0,0.1)',
  },
  categoryText: {
    fontSize: 14,
    fontWeight: '600',
  },
  sourceContainer: {
    marginLeft: 8,
  },
  sourceText: {
    fontSize: 10,
  },
  heartContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  heartCount: {
    fontSize: 10,
    marginLeft: 4,
  },
});

export default RSSTabContent; bu sayfadaki loading dönüyor ama sayfa yüklenmiyor. bozukluk var mı kodlarda bir bak. http://91.107.235.164:5000/feed.xml adresi güzel çalışıyor. örnek dönen sonuç:
<rss version="2.0">
<channel>
<title>Arapça Haber Akışı</title>
<description>Birleştirilmiş Arapça haber kaynakları</description>
<item>
<title>مستشفى الدكتور سليمان الحبيب بالخبر ينجح في إجراء عملية تصحيحية دقيقة لمراجع سبق وخضع لجراحتي علاج سمنة</title>
<link>https://www.alyaum.com/articles/6563347/%D8%A7%D9%84%D8%A3%D8%AE%D8%A8%D8%A7%D8%B1/%D8%A7%D9%84%D8%B4%D8%B1%D9%82%D9%8A%D8%A9-%D8%A7%D9%84%D9%8A%D9%88%D9%85/%D9%85%D8%B3%D8%AA%D8%B4%D9%81%D9%89-%D8%A7%D9%84%D8%AF%D9%83%D8%AA%D9%88%D8%B1-%D8%B3%D9%84%D9%8A%D9%85%D8%A7%D9%86-%D8%A7%D9%84%D8%AD%D8%A8%D9%8A%D8%A8-%D8%A8%D8%A7%D9%84%D8%AE%D8%A8%D8%B1-%D9%8A%D9%86%D8%AC%D8%AD-%D9%81%D9%8A-%D8%A5%D8%AC%D8%B1%D8%A7%D8%A1-%D8%B9%D9%85%D9%84%D9%8A%D8%A9-%D8%AA%D8%B5%D8%AD%D9%8A%D8%AD%D9%8A%D8%A9-%D8%AF%D9%82%D9%8A%D9%82%D8%A9-%D9%84%D9%85%D8%B1%D8%A7%D8%AC%D8%B9-%D8%B3%D8%A8%D9%82-%D9%88%D8%AE%D8%B6%D8%B9-%D9%84%D8%AC%D8%B1%D8%A7%D8%AD%D8%AA%D9%8A-%D8%B9%D9%84%D8%A7%D8%AC-%D8%B3%D9%85%D9%86%D8%A9</link>
<source>alyaum</source>
<thumbnail>https://www.alyaum.com/uploads/images/2024/11/16/2444555.jpg</thumbnail>
<content><br /><br /><br />نجح مستشفى الدكتور سليمان الحبيب بالخبر، في إجراء عملية تصحيحية معقدة، لمراجع "خمسيني"، كان قد خضع لجراحة سمنه ، ومن ثم لعملية تصحيحية بسبب المضاعفات بعد عدة سنوات لم تتحسن معها حالته، فأخضعه الفريق الطبي الذي قاده د. خالد مرزا استشاري جراحة السمنة لعملية أخرى "تصحيحية".<br />وقال د. مرزا أن المراجع حضر إلى المستشفى، وهو في حالة معقدة وواقع تحت صدمة تسممية، وانتفاخ بالبطن وآلام شديدة، وغيرها من الأعراض الحادة، وبالاطلاع على تاريخه المرضي تبين أنه سبق وأن خضع لجراحة سمنة قبل نحو "14" عام، ومع تفاقم المضاعفات بعيدة المدى أجرى عملية أخرى لتصحيح الأولى، إلا أن حالته لم تتحسن حيث تفاقمت معاناته مع إزدياد حدة الأعراض، فتم إجراء عدة فحوصات دقيقة، شملت تحاليل الدم، والتصوير بالاشعة ، فأظهرت النتائج وجود عدة انسدادات حادة هددت الأمعاء بالانفجار، وتلقى بعض العلاجات الإسعافية، التي ساهمت في استقرار حالته، وخضع لعملية بدأها الفريق الطبي عبر تقنية المنظار، لكنه اضطر إلى تحويلها إلى جراحة مفتوحة لوجود عدة "فتوق" داخلية، وجرى في التدخل الطبي اصلاح الفتوق وخياطه ثقوب بالأمعاء الصغيرة، التي نتجت عن الانسداد وأدت الى التسمم، والحمد لله لم يتم استئصال أى جزء من الأمعاء، ومضى التدخل الطبي الذي استمر لنحو "3" ساعات بصورة طيبة، وفي النهاية حقق نجاحاً تاماً، إذ نقل المراجع بحالة مستقرة العناية إلى المركزة، حيث أمضى "48" ساعة تحت المراقبة الطبية، قبل أن يتم تحويله إلى غرفة التنويم، وبقي فيها قيد الرعاية الطبية الحثيثة لمدة "3" أيام ثم غادر المستشفى بحالة صحية ونفسية جيدة، ولاحقاً اختفت كافة الأعراض التي قادته إلى المستشفى، وقد تمت متابعته لعدة أسابيع، وتأكد أنه شفي تماماً وعاد لممارسة حياته بصورة طبيعية.<br />الجدير بالذكر أن مركز علاج السمنة بمستشفى الدكتور سليمان الحبيب بالخبر، معتمد دولياً كمركز متخصص في علاج السمنة من قِبل الجمعية الأمريكية للاعتماد الجراحي SRC، ويتميز بأنه نجح في إنهاء معاناة عدد كبير من حالات السمنة المعقدة، وكذلك في إجراء العمليات التصحيحية لجراحات سمنة سابقة تفتقر إلى الدقة، وذلك عبر خيارات علاجية متنوعة، بأيدي كفاءات طبية متميزة.</content>
<pubDate>2024-11-17T05:00:00+00:00</pubDate>
</item>
<item>
<title>طقس الأحد.. أجواء غائمة على 5 مناطق</title>
<link>https://www.alyaum.com/articles/6563448/%D8%A7%D9%84%D8%A3%D8%AE%D8%A8%D8%A7%D8%B1/%D8%A7%D9%84%D9%85%D9%85%D9%84%D9%83%D8%A9-%D8%A7%D9%84%D9%8A%D9%88%D9%85/%D8%B7%D9%82%D8%B3-%D8%A7%D9%84%D8%A3%D8%AD%D8%AF-%D8%A3%D8%AC%D9%88%D8%A7%D8%A1-%D8%BA%D8%A7%D8%A6%D9%85%D8%A9-%D8%B9%D9%84%D9%89-5-%D9%85%D9%86%D8%A7%D8%B7%D9%82</link>
<source>alyaum</source>
<thumbnail>https://www.alyaum.com/uploads/images/2024/11/17/2445055.jpg</thumbnail>
<content>أعلن<a href="https://www.alyaum.com/articles/6563436/%D8%A7%D9%84%D8%A3%D8%AE%D8%A8%D8%A7%D8%B1/%D8%A7%D9%84%D8%B4%D8%B1%D9%82%D9%8A%D8%A9-%D8%A7%D9%84%D9%8A%D9%88%D9%85/%D8%B7%D9%82%D8%B3-%D8%A7%D9%84%D8%B4%D8%B1%D9%82%D9%8A%D8%A9-%D8%B6%D8%A8%D8%A7%D8%A8-%D8%B9%D9%84%D9%89-%D8%B9%D8%AF%D8%A9-%D8%A3%D8%AC%D8%B2%D8%A7%D8%A1-%D8%AD%D8%AA%D9%89-%D8%A7%D9%84-7-%D8%B5%D8%A8%D8%A7%D8%AD%D8%A7"> المركز الوطني للأرصاد</a>، حالة الطقس المتوقعة اليوم الأحد في المملكة.<br /><br />حسب بيان المركز، تكون السماء صحو إلى غائمة جزئياً تتخلها تشكيلات من السحب الرعدية المصحوبة بنشاط في الرياح السطحية على أجزاء من مرتفعات مناطق جازان، عسير، الباحة، مكة المكرمة والمدينة المنورة.<br /><br />في حين لا يستبعد تكون الضباب على مرتفعات تلك المناطق.<div data-oembed-url="https://x.com/alyaum/status/1857907015009415466"><blockquote align="center" class="twitter-tweet" data-dnt="true"><p dir="rtl" lang="ar">الإنذار الأصفر .. طقس <a href="https://twitter.com/hashtag/%D8%A7%D9%84%D8%B4%D8%B1%D9%82%D9%8A%D8%A9?src=hash&ref_src=twsrc%5Etfw">#الشرقية</a> ضباب على عدة أجزاء حتى الـ 7 صباحًا<a href="https://twitter.com/hashtag/%D8%A7%D9%84%D9%8A%D9%88%D9%85?src=hash&ref_src=twsrc%5Etfw">#اليوم</a> <a href="https://twitter.com/hashtag/%D8%B7%D9%82%D8%B3_%D8%A7%D9%84%D9%85%D9%85%D9%84%D9%83%D8%A9?src=hash&ref_src=twsrc%5Etfw">#طقس_المملكة</a> <a href="https://twitter.com/NCMKSA?ref_src=twsrc%5Etfw">@NCMKSA</a><a href="https://t.co/NM0U5P9ziB">https://t.co/NM0U5P9ziB</a> <a href="https://t.co/JJutNmh913">pic.twitter.com/JJutNmh913</a></p>— صحيفة اليوم (@alyaum) <a href="https://twitter.com/alyaum/status/1857907015009415466?ref_src=twsrc%5Etfw">November 16, 2024</a></blockquote> </div></content>
<pubDate>2024-11-17T01:00:00+00:00</pubDate>
</item>