fltr-app/app/(tabs)/index.tsx

import styles from "@/app/tabStyles/indexStyles";
import ShowCard from "@/components/ui/ShowCard";
import { useShows } from "@/hooks/useShows";
import { useStreamingServices } from "@/hooks/useStreamingServices";
import Feather from "@expo/vector-icons/Feather";
import * as Haptics from "expo-haptics";
import { router } from "expo-router";
import React from "react";
import {
  ActivityIndicator,
  Image,
  RefreshControl,
  ScrollView as RNScrollView,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import {
  GestureHandlerRootView,
  ScrollView, // horizontaler ScrollView bleibt aus RNGH
} from "react-native-gesture-handler";

export default function HomeScreen() {
  const {
    data: shows = [],
    error,
    isLoading: loading,
    refetch: refetchShows,        // ⬅️ refetch aus Hook
  } = useShows();

  const {
    data: streamingServices = {},
    refetch: refetchServices,     // ⬅️ refetch aus Hook
  } = useStreamingServices();

  const [activeFilter, setActiveFilter] = React.useState<string>("all");
  const [refreshing, setRefreshing] = React.useState(false); // ⬅️ UI-State für Pull-to-Refresh

  const haptikFeedback = () => {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
  };

  const handleFilter = (type: string) => {
    haptikFeedback();
    if (type === activeFilter) {
      setActiveFilter("all");
    } else {
      setActiveFilter(type);
    }
  };

  // ⬅️ Pull-to-Refresh Handler
  const onRefresh = React.useCallback(async () => {
    haptikFeedback();
    setRefreshing(true);
    try {
      await Promise.all([
        typeof refetchShows === "function" ? refetchShows() : Promise.resolve(),
        typeof refetchServices === "function" ? refetchServices() : Promise.resolve(),
      ]);
    } finally {
      setRefreshing(false);
    }
  }, [refetchShows, refetchServices]);

  const filteredShows = React.useMemo(() => {
    if (activeFilter === "all") {
      return shows;
    }
    if (activeFilter === "live") {
      return shows.filter((show) => show.running);
    }
    return shows.filter((show) =>
      show.streamingService
        .split(",")
        .map((s) => s.trim())
        .includes(activeFilter)
    );
  }, [shows, activeFilter]);

  const uniqueStreamingServices = React.useMemo(() => {
    const uniqueServices = new Set<string>();
    shows.forEach((show) => {
      const services = show.streamingService.split(", ").map((s) => s.trim());
      services.forEach((service) => uniqueServices.add(service));
    });
    return Array.from(uniqueServices);
  }, [shows]);

  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?.message || String(error)}</Text>
      </View>
    );
  }

  return (
    <GestureHandlerRootView>
      <View style={styles.mainContainer}>
        <View style={styles.header}>
          <TouchableOpacity
            onPress={() => {
              router.push("/legal");
            }}
            style={{
              position: "absolute",
              left: 16,
              top: "50%",
              transform: [{ translateY: -12 }],
              height: 40,
              width: 40,
              alignItems: "center",
              justifyContent: "center",
              borderRadius: 10,
              backgroundColor: "rgba(255,255,255,0.06)",
            }}
            accessibilityRole="button"
            accessibilityLabel="Menü öffnen"
          >
            <Feather name="menu" size={22} color="#FFFFFF" />
          </TouchableOpacity>

          <Text style={styles.title}>FLTR</Text>
        </View>


        <RNScrollView
          contentContainerStyle={{ paddingBottom: 30 }}
          showsVerticalScrollIndicator={false}
          refreshControl={
            <RefreshControl
              refreshing={refreshing}
              onRefresh={onRefresh}
              tintColor="#FFFFFF"                  // iOS Spinner
              colors={["#FFFFFF"]}                 // Android Spinner
              progressBackgroundColor="hsla(0, 0%, 29%, 1.00)"
            />
          }
        >
          <View style={styles.filterSection}>
            {/* ⬅️ HORIZONTALER SCROLLBEREICH BLEIBT AUS RNGH */}
            <ScrollView
              horizontal
              showsHorizontalScrollIndicator={false}
              contentContainerStyle={{
                alignItems: "center",
                paddingHorizontal: 10,
                gap: 10,
                marginLeft: 10,
              }}
            >
              {activeFilter !== "all" && (
                <TouchableOpacity
                  style={{
                    padding: 5,
                    height: 60,
                    width: 60,
                    alignItems: "center",
                    justifyContent: "center",
                    backgroundColor: "hsla(0, 0%, 29%, 1.00)",
                    borderRadius: 50,
                  }}
                  onPress={() => handleFilter("all")}
                >
                  <Text style={{ fontWeight: "bold", color: "white" }}>
                    ALLE
                  </Text>
                </TouchableOpacity>
              )}
              {activeFilter !== "live" && (
                <TouchableOpacity
                  style={{
                    padding: 5,
                    height: 60,
                    width: 60,
                    alignItems: "center",
                    justifyContent: "center",
                    backgroundColor: "hsla(0, 0%, 29%, 1.00)",
                    borderRadius: 50,
                  }}
                  onPress={() => handleFilter("live")}
                >
                  <View
                    style={{
                      backgroundColor: "red",
                      paddingHorizontal: 5,
                      paddingVertical: 2,
                      borderRadius: 5,
                    }}
                  >
                    <Text style={{ fontWeight: "bold", color: "white" }}>
                      LIVE
                    </Text>
                  </View>
                </TouchableOpacity>
              )}

              <View
                style={{
                  height: 60,
                  width: 2,
                  backgroundColor: "hsla(0, 0%, 37%, 1.00)",
                  marginHorizontal: 5,
                  borderRadius: 5,
                }}
              />

              {uniqueStreamingServices.map((serviceName) => {
                const streamingService =
                  streamingServices[
                  `assets.images.streamingServices.${serviceName.toLowerCase()}`
                  ];
                return (
                  <TouchableOpacity
                    key={serviceName}
                    style={{
                      padding: 5,
                      backgroundColor: "hsla(0, 0%, 29%, 1.00)",
                      borderRadius: 50,
                      borderWidth: serviceName.includes(activeFilter) ? 2 : 0,
                      borderColor: "hsla(0, 100%, 50%, 1.00)",
                    }}
                    onPress={() => handleFilter(serviceName)}
                  >
                    <Image
                      source={{ uri: streamingService }}
                      style={{
                        width: 50,
                        height: 50,
                        borderRadius: 30,
                        resizeMode: "contain",
                      }}
                    />
                  </TouchableOpacity>
                );
              })}
            </ScrollView>
          </View>

          <View style={{ flex: 1, paddingHorizontal: 10 }}>
            {filteredShows.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,
                        logoUri: show.logoUrl,
                        running: String(show.running),
                      },
                    })
                  }
                  imageUri={show.bannerUri}
                  streamingServicesUris={show.streamingService
                    .split(", ")
                    .map(
                      (s) =>
                        streamingServices[
                        `assets.images.streamingServices.${s.toLowerCase()}`
                        ]
                    )}
                  genres={show.genres}
                  {...(showLiveBadge
                    ? {
                      liveBadgeText: "LIVE",
                      liveBadgeContainerStyle: styles.liveBadgeContainer,
                    }
                    : {})}
                />
              );
            })}
          </View>
        </RNScrollView>
      </View>
    </GestureHandlerRootView>
  );
}