import styles from "@/app/tabStyles/indexStyles";
import ShowCard from "@/components/ui/ShowCard";
import { useShowContext } from "@/contexts/ShowContext";
import { router } from "expo-router";
import React from "react";
import { ActivityIndicator, Text, View } from "react-native";
import {
  GestureHandlerRootView,
  ScrollView,
} from "react-native-gesture-handler";

export default function HomeScreen() {
  const { shows, error, loading } = useShowContext();

  if (loading) {
    return (
      <View
        style={[
          styles.mainContainer,
          { justifyContent: "center", alignItems: "center" },
        ]}
      >
        <ActivityIndicator size="large" color="#ffffff" />
      </View>
    );
  }

  if (error) {
    return (
      <View
        style={[
          styles.mainContainer,
          { justifyContent: "center", alignItems: "center" },
        ]}
      >
        <Text>Error: {error}</Text>
      </View>
    );
  }

  return (
    <GestureHandlerRootView>
      <View style={styles.mainContainer}>
        <View style={styles.header}>
          <Text style={styles.title}>FLTR</Text>
        </View>
        <ScrollView contentContainerStyle={{ paddingBottom: 30 }}>
          {shows.map((show) => {
            const showLiveBadge = show.running;
            return (
              <ShowCard
                key={show.id}
                title={show.title}
                onPress={() =>
                  router.push({
                    pathname: "/showDetails",
                    params: {
                      id: String(show.id),
                      title: show.title,
                      bannerUri: show.bannerUri,
                      description: show.description,
                      concept: show.concept,
                      genres: show.genres,
                      streamingService: show.streamingService,
                    },
                  })
                }
                imageUri={show.bannerUri}
                streamingServiceUri={show.streamingService}
                genres={show.genres}
                {...(showLiveBadge
                  ? {
                      liveBadgeText: "LIVE",
                      liveBadgeContainerStyle: styles.liveBadgeContainer,
                    }
                  : {})}
              />
            );
          })}
        </ScrollView>
      </View>
    </GestureHandlerRootView>
  );
}