// ReadStoryScreen.js
import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react';
import { 
  View, 
  StyleSheet, 
  Text, 
  FlatList, 
  Image, 
  TouchableOpacity, 
  ActivityIndicator, 
  BackHandler 
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import WordExplanationBox from './WordExplanationBox';
import AsyncStorage from '@react-native-async-storage/async-storage';
import * as Font from 'expo-font';
import { useThemeAndLanguage } from '../utils/ThemeAndLanguageContext';
import { 
  BottomSheetModal, 
  BottomSheetModalProvider, 
  BottomSheetScrollView 
} from '@gorhom/bottom-sheet';
import QuizScreen from './QuizScreen';
import { doc, getDoc } from 'firebase/firestore';
import { db } from '../utils/firebase';
import { useFocusEffect } from '@react-navigation/native';
import { useVocabulary } from './VocabularyContext';
import ToggleHeartButton from './heart';
import { CustomTextR, CustomTextB } from '../components/CustomText';
import DiacriticsToggleButton from '../components/DiacriticsToggleButton';
import { removeDiacritics } from '../utils/arabicUtils';
import FontSettings from '../components/FontSettings'; // Import FontSettings

const ARABIC_FONTS = {
  'Mirza': require('../../assets/fonts/mirza.ttf'),
  'NotoSansArabic': require('../../assets/fonts/NotoSansArabic-Regular.ttf'),
  'Amiri': require('../../assets/fonts/amiri.ttf'),
  'NotoNaskhArabic': require('../../assets/fonts/noto.ttf'),
};

const STORAGE_KEY = '@user_words';

const ReadStoryScreen = ({ route, navigation }) => {
  const { story, storyId } = route.params;
  const [fontSize, setFontSize] = useState(20);
  const [selectedWord, setSelectedWord] = useState(null);
  const [selectedSentence, setSelectedSentence] = useState(null);
  const [loading, setLoading] = useState(true);
  const [cachedStory, setCachedStory] = useState(null);
  const [hasQuiz, setHasQuiz] = useState(false);
  const bottomSheetModalRef = useRef(null);
  const settingsBottomSheetModalRef = useRef(null);
  const quizBottomSheetModalRef = useRef(null);
  const { locale, theme, arabicFont, arabicFontBold, setFontFamily, t } = useThemeAndLanguage();
  const [activeModal, setActiveModal] = useState(null);
  const [knownWords, setKnownWords] = useState(new Set());
  const { vocabulary, isLoggedIn, userId } = useVocabulary();
  const [diacriticsState, setDiacriticsState] = useState('normal'); // 'normal', 'red', 'hidden'

  const increaseFontSize = useCallback(() => setFontSize(prevSize => prevSize + 2), []);
  const decreaseFontSize = useCallback(() => setFontSize(prevSize => prevSize - 2), []);

  const closeAllModals = useCallback(() => {
    bottomSheetModalRef.current?.dismiss();
    settingsBottomSheetModalRef.current?.dismiss();
    quizBottomSheetModalRef.current?.dismiss();
    setActiveModal(null);
  }, []);

  const openSettingsModal = useCallback(() => {
    settingsBottomSheetModalRef.current?.present();
    setActiveModal('settings');
  }, []);

  const openQuizModal = useCallback(() => {
    quizBottomSheetModalRef.current?.present();
    setActiveModal('quiz');
  }, []);

  const toggleDiacritics = useCallback(() => {
    setDiacriticsState(prevState => {
      if (prevState === 'normal') return 'red';
      if (prevState === 'red') return 'hidden';
      return 'normal';
    });
  }, []);

  const handleWordPress = useCallback((word) => {
    setSelectedWord(word); // Always store the original word
    setSelectedSentence(null);
    bottomSheetModalRef.current?.present();
    setActiveModal('word');
  }, []);

  const handleSentenceButtonPress = useCallback((sentence) => {
    setSelectedSentence(sentence);
    setSelectedWord(null);
    bottomSheetModalRef.current?.present();
    setActiveModal('sentence');
  }, []);

  const loadFonts = useCallback(async () => {
    await Font.loadAsync(ARABIC_FONTS);
  }, []);

  const fetchStoryFromFirestore = useCallback(async (id) => {
    const storyDocRef = doc(db, 'stories', id);
    const storyDoc = await getDoc(storyDocRef);
    return storyDoc.exists() ? { id: storyDoc.id, ...storyDoc.data() } : null;
  }, []);

  const fetchStory = useCallback(async () => {
    try {
      let storyData;
      if (story) {
        storyData = story;
      } else if (storyId) {
        const cachedData = await AsyncStorage.getItem(`story-${storyId}`);
        if (cachedData) {
          storyData = JSON.parse(cachedData);
        } else {
          storyData = await fetchStoryFromFirestore(storyId);
          if (storyData) {
            await AsyncStorage.setItem(`story-${storyId}`, JSON.stringify(storyData));
          }
        }
      }

      if (storyData) {
        setCachedStory(storyData);
        setHasQuiz(storyData.test_questions && storyData.test_questions.length > 0);
      }
    } catch (error) {
      console.error('Error fetching story:', error);
    } finally {
      setLoading(false);
    }
  }, [story, storyId, fetchStoryFromFirestore]);

  const fetchKnownWords = useCallback(async () => {
    if (!isLoggedIn) {
      setKnownWords(new Set());
      return;
    }

    try {
      const cachedWords = await AsyncStorage.getItem(STORAGE_KEY);
      if (cachedWords) {
        const wordsArray = JSON.parse(cachedWords);
        setKnownWords(new Set(wordsArray.map(word => word.word)));
      }
    } catch (error) {
      console.error('Error fetching known words:', error);
    }
  }, [isLoggedIn]);

  useEffect(() => {
    const initialize = async () => {
      await loadFonts();
      await fetchStory();
      await fetchKnownWords();
    };

    initialize();
  }, [loadFonts, fetchStory, fetchKnownWords]);

  useEffect(() => {
    if (cachedStory) {
      const storyTitle = locale === 'tr' ? cachedStory.storytitleturkish : cachedStory.storytitleenglish;

      navigation.setOptions({
        headerTitle: () => (
          <View style={{ flex: 1, justifyContent: 'center' }}>
            <Text 
              style={{ 
                color: theme.textColor, 
                fontWeight: 'bold', 
                fontSize: 17, 
                maxWidth: '85%', // Width limitation
                textAlign: 'left', // Center the title
              }} 
              numberOfLines={1} // Allow up to two lines
              ellipsizeMode="tail" // Add ellipsis if it overflows
            >
              {storyTitle}
            </Text>
          </View>
        ),
        headerStyle: { backgroundColor: theme.lighterCardBackgroundColor },
        headerTintColor: theme.textColor,
        headerRight: () => (
          <View style={styles.headerRight}>
            <ToggleHeartButton storyId={cachedStory.id} initialHeartCount={cachedStory.hearts} />
            <DiacriticsToggleButton
              diacriticsState={diacriticsState} // New prop added
              onToggle={toggleDiacritics} // New toggle function added
              color={theme.textColor}
            />
            <TouchableOpacity onPress={openSettingsModal} style={styles.fontSizeControl}>
              <Ionicons name="text" size={24} color={theme.textColor} />
            </TouchableOpacity>
          </View>
        ),
      });
    }
  }, [navigation, cachedStory, theme, locale, openSettingsModal, diacriticsState, toggleDiacritics]);

  useFocusEffect(
    useCallback(() => {
      const onBackPress = () => {
        if (activeModal) {
          closeAllModals();
          return true;
        }
        return false;
      };

      BackHandler.addEventListener('hardwareBackPress', onBackPress);

      return () => BackHandler.removeEventListener('hardwareBackPress', onBackPress);
    }, [activeModal, closeAllModals])
  );

  // Group sentences into blocks based on type
  const groupSentencesIntoBlocks = useCallback((sentences) => {
    const blocks = [];
    let currentBlock = [];

    sentences.forEach((sentence) => {
      if (sentence.type === 'header' || sentence.type === 'subheader' || sentence.type === 'image') {
        if (currentBlock.length > 0) {
          blocks.push(currentBlock);
          currentBlock = [];
        }
        blocks.push([sentence]);
      } else {
        currentBlock.push(sentence);
      }
    });

    if (currentBlock.length > 0) {
      blocks.push(currentBlock);
    }

    return blocks;
  }, []);

  const Word = React.memo(({ word, onPress, style, isKnown, diacriticsState }) => {
    return (
      <TouchableOpacity onPress={() => onPress(word)}>
        <Text style={[style, isKnown && styles.knownWord]}>
          {word.split('').map((char, index) => {
            const isDiacritic = removeDiacritics(char) !== char;
            if (isDiacritic) {
              if (diacriticsState === 'hidden') {
                return null;
              } else if (diacriticsState === 'red') {
                return (
                  <Text key={index} style={{ color: 'red' }}>
                    {char}
                  </Text>
                );
              }
            }
            return char;
          })}
        </Text>
      </TouchableOpacity>
    );
  });

  const ContentBlock = React.memo(({
    sentences, 
    handleWordPress, 
    fontSize, 
    theme, 
    arabicFont, 
    knownWords, 
    handleSentenceButtonPress, 
    selectedSentence, 
    diacriticsState 
  }) => {
    if (sentences.length === 0) return null;

    if (sentences[0].type === 'image') {
      return (
        <Image 
          source={{ uri: sentences[0].content }} 
          style={styles.imageStyle} 
        />
      );
    }

    if (sentences[0].type === 'header' || sentences[0].type === 'subheader') {
      const isHeader = sentences[0].type === 'header';
      return (
        <View style={[
          styles.sentenceContainer,
          selectedSentence === sentences[0].content && styles.selectedSentence,
          isHeader ? styles.headerContainer : styles.subHeaderContainer,
          {
            borderRightColor: isHeader ? theme.primaryColor : theme.secondaryColor
          }
        ]}>
          <View style={styles.arabicTextWrapper}>
            <View style={{
              flex: 1,
              flexDirection: 'row-reverse',
              flexWrap: 'wrap',
              justifyContent: 'flex-start',
              alignItems: 'center', // Center vertically
            }}>
              {sentences[0].content.split(' ').map((word, wordIndex) => (
                <Word
                  key={`${sentences[0].id}-${wordIndex}`}
                  word={word}
                  onPress={handleWordPress}
                  style={[
                    styles.descriptionArabic,
                    {
                      fontSize: fontSize * (isHeader ? 1.6 : 1.4),
                      color: theme.textColor,
                      fontFamily: arabicFont,
                    }
                  ]}
                  isKnown={knownWords.has(word)}
                  diacriticsState={diacriticsState} // New prop added
                />
              ))}
            </View>
            <TouchableOpacity 
              onPress={() => handleSentenceButtonPress(sentences[0].content)}
              style={{
                padding:3,
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <Image
                source={require('../../assets/translate2.png')}
                style={{
                  width: fontSize * 1.2,
                  height: fontSize * 1.2,
                }}
              />
            </TouchableOpacity>
          </View>
        </View>
      );
    }

    // Normal paragraphs - all sentences in one wrapper
    return (
      <View style={styles.paragraphContainer}>
        <View style={styles.arabicTextWrapper}>
          {sentences.map((sentence, sentenceIndex) => (
            <React.Fragment key={sentence.id}>
              {sentence.content.split(' ').map((word, wordIndex) => (
                <Word
                  key={`${sentence.id}-${wordIndex}`}
                  word={word}
                  onPress={handleWordPress}
                  style={[
                    styles.descriptionArabic,
                    {
                      fontSize: fontSize * 1.4,
                      color: theme.textColor,
                      fontFamily: arabicFont,
                    }
                  ]}
                  isKnown={knownWords.has(word)}
                  diacriticsState={diacriticsState} // New prop added
                />
              ))}
              <TouchableOpacity 
                onPress={() => handleSentenceButtonPress(sentence.content)}
                style={{
                  padding:3,
                  alignItems: 'center',
                  justifyContent: 'center'
                }}
              >
                <Image
                  source={require('../../assets/translate2.png')}
                  style={{
                    width: fontSize * 1.2,
                    height: fontSize * 1.2,
                  }}
                />
              </TouchableOpacity>
              {sentenceIndex < sentences.length - 1 && (
                <Text style={[
                  styles.descriptionArabic,
                  {
                    fontSize: fontSize * 1.4,
                    color: theme.textColor,
                    fontFamily: arabicFont,
                  }
                ]}> </Text>
              )}
            </React.Fragment>
          ))}
        </View>
      </View>
    );
  });

  const renderBlock = useCallback(({ item: sentences }) => (
    <ContentBlock
      sentences={sentences}
      handleWordPress={handleWordPress}
      fontSize={fontSize}
      theme={theme}
      arabicFont={arabicFont}
      arabicFontBold={arabicFontBold}
      knownWords={knownWords}
      handleSentenceButtonPress={handleSentenceButtonPress}
      selectedSentence={selectedSentence}
      diacriticsState={diacriticsState} // New prop added
    />
  ), [
    handleWordPress, 
    fontSize, 
    theme, 
    arabicFont, 
    arabicFontBold, 
    knownWords, 
    handleSentenceButtonPress, 
    selectedSentence, 
    diacriticsState
  ]);

  const memoizedBlocks = useMemo(() => {
    if (!cachedStory?.sentences) return [];
    return groupSentencesIntoBlocks(cachedStory.sentences);
  }, [cachedStory, groupSentencesIntoBlocks]);

  const keyExtractor = useCallback((item, index) => `block-${index}`, []);

  useEffect(() => {
    const updatedKnownWords = new Set(vocabulary.map(word => word.word));
    setKnownWords(updatedKnownWords);
  }, [vocabulary]);

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

  if (!cachedStory) {
    return (
      <View style={[styles.loadingContainer, { backgroundColor: theme.backgroundColorForWordBox }]}>
        <Text style={{ color: theme.textColor }}>{t('storyNotFound')}</Text>
      </View>
    );
  }

  return (
    <BottomSheetModalProvider>
      <View style={[styles.container, { backgroundColor: theme.backgroundColorForWordBox }]}>
        <FlatList
          data={memoizedBlocks}
          renderItem={renderBlock}
          keyExtractor={keyExtractor}
          ListHeaderComponent={() => (
            <>
              <Image source={{ uri: cachedStory.thumbnail }} style={styles.thumbnail} />
              <View style={styles.content}>
                <View style={styles.header}>
                  <Text style={[styles.titleArabic, { color: theme.textColor, fontFamily: arabicFontBold }]}>
                    {cachedStory.storytitlearabic}
                  </Text>
                  <CustomTextR style={[styles.titleTurkish, { color: theme.secondaryColor }]}>
                    {locale === 'tr' ? cachedStory.storytitleturkish : cachedStory.storytitleenglish}
                  </CustomTextR>
                </View>
              </View>
            </>
          )}
          initialNumToRender={10}
          maxToRenderPerBatch={5}
          windowSize={10}
        />

        {hasQuiz && (
          <TouchableOpacity
            style={[styles.quizButton, { backgroundColor: theme.primaryColor }]}
            onPress={openQuizModal}
          >
            <CustomTextR style={styles.quizButtonText}>{t('startQuiz')}</CustomTextR>
          </TouchableOpacity>
        )}

        {/* Word/Sentence Explanation Bottom Sheet */}
        <BottomSheetModal
          ref={bottomSheetModalRef}
          index={0}
          snapPoints={['45%', '90%']}
          handleStyle={{ backgroundColor: theme.backgroundColorForWordBox }}
          onDismiss={() => setActiveModal(null)}
        >
          <BottomSheetScrollView contentContainerStyle={styles.bottomSheetContent}>
            <WordExplanationBox
              word={selectedWord || selectedSentence}
              storyId={cachedStory.id}
              onClose={() => bottomSheetModalRef.current?.dismiss()}
            />
          </BottomSheetScrollView>
        </BottomSheetModal>

        {/* Settings Bottom Sheet */}
        <BottomSheetModal
          ref={settingsBottomSheetModalRef}
          index={0}
          snapPoints={['85%']}
          handleStyle={{ backgroundColor: theme.backgroundColorForWordBox }}
          onDismiss={() => setActiveModal(null)}
        >
          <BottomSheetScrollView contentContainerStyle={[
            styles.settingsContent,
            { backgroundColor: theme.backgroundColorForWordBox }
          ]}>
            <FontSettings
              fontSize={fontSize}
              increaseFontSize={increaseFontSize}
              decreaseFontSize={decreaseFontSize}
              setFontFamily={setFontFamily}
              currentFontFamily={arabicFont}
              theme={theme}
              t={t}
            />
          </BottomSheetScrollView>
        </BottomSheetModal>

        {hasQuiz && (
          <BottomSheetModal
            ref={quizBottomSheetModalRef}
            index={0}
            snapPoints={['90%']}
            handleStyle={{ backgroundColor: theme.backgroundColorForWordBox }}
            onDismiss={() => setActiveModal(null)}
          >
            <QuizScreen
              story={cachedStory}
              onClose={() => {
                quizBottomSheetModalRef.current?.dismiss();
                setActiveModal(null);
              }}
            />
          </BottomSheetModal>
        )}
      </View>
    </BottomSheetModalProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  knownWord: {
    backgroundColor: 'rgba(0, 255, 0, 0.1)',
    borderRadius: 10,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  thumbnail: {
    width: '100%',
    aspectRatio: 1/1,
  },
  content: {
    padding: 5,
  },
  header: {
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop:20,
  },
  titleArabic: {
    fontSize: 32,
  },
  titleTurkish: {
    fontSize: 17,
    marginTop: 4,
    textAlign: 'center',
  },
  headerRight: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: 10,
  },
  fontSizeControl: {
    marginHorizontal: 5,
  },

  paragraphContainer: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    marginBottom: 10,
  },
  arabicTextWrapper: {
    flex: 1,
    flexDirection: 'row-reverse', // Align text from right to left
    flexWrap: 'wrap',
    paddingHorizontal: 25,
    justifyContent: 'space-between', // Distribute space equally
    textAlign: 'justify', // Justify text within lines
  },
  descriptionArabic: {
    padding: 3,
    textAlign: 'justify',
  },
  selectedSentence: {
    backgroundColor: 'rgba(255, 215, 0, 0.3)',
  },
  settingsContent: {
    flexGrow: 1,
    padding: 20,
  },
  exampleCard: {
    backgroundColor: 'white',
    borderRadius: 10,
    padding: 15,
    marginVertical: 20,
    width: '90%',
    alignSelf: 'center',
    elevation: 4,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  },
  exampleText: {
    textAlign: 'center',
  },
  fontSizeControls: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    width: '100%',
    marginBottom: 20,
  },
  fontSizeButton: {
    alignItems: 'center',
  },
  fontSizeButtonText: {
    marginTop: 5,
    fontSize: 12,
    color: 'gray',
    textAlign: 'center',
  },
  fontOptionsContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
    marginTop: 20,
    width: '80%',
    alignSelf: 'center',
  },
  fontOption: {
    width: '45%',
    backgroundColor: 'white',
    borderRadius: 10,
    padding: 10,
    marginBottom: 20,
    alignItems: 'center',
    elevation: 4,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.22,
    shadowRadius: 2.22,
  },
  fontOptionText: {
    fontSize: 16,
    marginBottom: 5,
    textAlign: 'center',
  },
  fontOptionSample: {
    fontSize: 18,
  },
  headerContainer: {
    marginVertical: 10,
    backgroundColor: 'rgba(0, 0, 0, 0.03)',
    borderRightWidth: 5,
    width: '97%',
  },
  subHeaderContainer: {
    marginVertical: 10,
    backgroundColor: 'rgba(0, 0, 0, 0.03)',
    borderRightWidth: 3,
    width: '97%',
  },
  imageStyle: {
    width: "90%",
    alignSelf: "center",
    marginBottom: 10,
    aspectRatio: 1 / 1,
    elevation: 1,
    borderRadius: 15,
  },
  quizButton: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
  },
  quizButtonText: {
    color: 'white',
    fontWeight: 'bold',
  },
  bottomSheetContent: {
    flexGrow: 1,
  }
});

export default ReadStoryScreen; hacı bu kodu incele:

  const loadFonts = useCallback(async () => {
    await Font.loadAsync(ARABIC_FONTS);
  }, []); ve ARABIC_FONTS dizisinin bir rolü var mı ne işe yarıyorlar? silsek ne olur?