umra-app/app/(tabs)/home.tsx

import { StyleSheet, ScrollView } from 'react-native';
import { Text, View } from '@/components/Themed';
import FeatureCard from '@/components/FeatureCard';
import PrayerTimeCard from '@/components/PrayerTimeCard';
import ServicesGrid from '@/components/ServicesGrid';
import i18n from '@/i18n';
import * as Updates from 'expo-updates';
import AsyncStorage from '@react-native-async-storage/async-storage';
import Colors from '@/constants/Colors';
import { useEffect, useState } from 'react';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { getPrograms, ProgramActivity } from '@/utils/programs';

export default function HomeScreen() {
  const insets = useSafeAreaInsets();
  const [todaysActivity, setTodaysActivity] = useState<ProgramActivity | null>(null);
  const [nextDayActivity, setNextDayActivity] = useState<(ProgramActivity & { dayLabel: string }) | null>(null);

  useEffect(() => {
    const fetchAndSetActivities = async () => {
      try {
        const { activities } = await getPrograms();
        const now = new Date();

        const formatDate = (date: Date) => {
          const day = String(date.getDate()).padStart(2, '0');
          const month = String(date.getMonth() + 1).padStart(2, '0');
          const year = date.getFullYear();
          return `${day}.${month}.${year}`;
        };

        const todayStr = formatDate(now);
        const todaysActivities = activities[todayStr] || [];

        const nextActivity = todaysActivities.find((activity) => {
          if (!activity.time) return false;
          const [hours, minutes] = activity.time.split(':').map(Number);
          const activityTime = new Date(now);
          activityTime.setHours(hours, minutes, 0, 0);
          return activityTime > now;
        });

        setTodaysActivity(nextActivity || todaysActivities[0] || null);

        const sortedDates = Object.keys(activities).sort((a, b) => {
          const dateA = new Date(a.split('.').reverse().join('-')).getTime();
          const dateB = new Date(b.split('.').reverse().join('-')).getTime();
          return dateA - dateB;
        });

        const todayDate = new Date(todayStr.split('.').reverse().join('-'));
        const nextDateStr = sortedDates.find((dateStr) => {
          const loopDate = new Date(dateStr.split('.').reverse().join('-'));
          return loopDate > todayDate;
        });

        const tomorrow = new Date(now);
        tomorrow.setDate(tomorrow.getDate() + 1);
        const tomorrowStr = formatDate(tomorrow);

        if (nextDateStr && activities[nextDateStr].length > 0) {
          const dayLabel = nextDateStr === tomorrowStr ? 'Ertir' : nextDateStr;
          setNextDayActivity({ ...activities[nextDateStr][0], dayLabel });
        }
      } catch (error) {
        console.error('Failed to load activities for home screen:', error);
      }
    };

    fetchAndSetActivities();
  }, []);

  const changeLanguage = async (lang: 'en' | 'tk' | 'ru') => {
    if (!lang) return;
    if (lang === i18n.locale.substring(0, 2)) return;
    await AsyncStorage.setItem('user-language', lang);
    i18n.locale = lang;
    Updates.reloadAsync();
  };

  const languages = [
    { label: 'English', value: 'en' },
    { label: 'Türkmen', value: 'tk' },
    { label: 'Русский', value: 'ru' },
  ];

  const currentLanguage = languages.find(l => l.value === i18n.locale.substring(0, 2))?.label;

  const services = [
    { name: 'quran', icon: 'book-open-variant' },
    { name: 'hadith', icon: 'book-open-page-variant' },
    { name: 'dua', icon: 'human-greeting' },
  ];

  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      
      <View style={styles.header}>
        <Text style={styles.title}>{i18n.t('home')}</Text>
      </View>

      <ScrollView>
        <View style={styles.innerContainer}>
          {todaysActivity && (
            <FeatureCard
              badgeText={`Şu gün, ${todaysActivity.time}`}
              title={todaysActivity.title}
              description={todaysActivity.description}
              image={require('@/assets/images/aisha.jpg')}
            />
          )}

          {nextDayActivity && (
            <FeatureCard
              badgeText={`${nextDayActivity.dayLabel}, ${nextDayActivity.time}`}
              title={nextDayActivity.title}
              description={nextDayActivity.description}
              image={require('@/assets/images/aisha.jpg')}
            />
          )}

          <PrayerTimeCard />

          {/* <ServicesGrid services={services} /> */}
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.dark.background,
  },
  innerContainer: {
    paddingHorizontal: 15,
  },
  header: {
    display: 'none', // hide for now, will show later
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 15,
  },
  title: {
    fontSize: 22,
    fontWeight: 'bold',
    marginVertical: 15,
  },
  langSwitcher: {
    flexDirection: 'row',
  },
  langText: {
    color: '#fff',
    paddingHorizontal: 5,
    fontWeight: 'bold',
  },
  cardRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  modalOverlay: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
  modalView: {
    margin: 20,
    backgroundColor: Colors.dark.secondary,
    borderRadius: 20,
    padding: 35,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
  modalButton: {
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#333',
    width: '100%',
  },
  modalButtonText: {
    color: 'white',
    textAlign: 'center',
  },
});

const pickerSelectStyles = StyleSheet.create({
  inputIOS: {
    fontSize: 16,
    paddingVertical: 12,
    paddingHorizontal: 10,
    borderWidth: 1,
    borderColor: Colors.dark.secondary,
    borderRadius: 4,
    color: 'white',
    paddingRight: 30, // to ensure the text is never behind the icon
  },
  inputAndroid: {
    fontSize: 16,
    paddingHorizontal: 10,
    paddingVertical: 8,
    borderWidth: 0.5,
    borderColor: Colors.dark.secondary,
    borderRadius: 8,
    color: 'white',
    paddingRight: 30, // to ensure the text is never behind the icon
  },
});