fltr-app/app/showDetails.tsx

import ParticipantDetails from "@/components/ui/ParticipantDeatails";
import ShowInfo from "@/components/ui/ShowInfo";
import {
  useSeasonCount,
  useSeasonDates,
  useSeasonParticipants,
} from "@/hooks/useSeason";
import { useShow } from "@/hooks/useShow";
import * as Haptics from "expo-haptics";
import { router, useLocalSearchParams } from "expo-router";
import React from "react";
import {
  ActivityIndicator,
  Dimensions,
  Image,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import styles from "./stackStyles/showDetailStyles";

export default function ShowDetails() {
  const { id, logoUri } = useLocalSearchParams();
  const showId = Number(id);
  const logoUriString = Array.isArray(logoUri) ? logoUri[0] : logoUri;

  const [selectedParticipants, setSelectedParticipants] =
    React.useState<boolean>(true);
  const [selectedSeason, setSelectedSeason] = React.useState<number>(1);

  const { data: show, isLoading: showLoading } = useShow(showId);
  const { data: seasonCount = 0, isLoading: seasonCountLoading } =
    useSeasonCount(showId);
  const {
    data: participants,
    isLoading: pLoading,
    isError: pError,
  } = useSeasonParticipants(showId, selectedSeason);
  const { data: dates } = useSeasonDates(showId, selectedSeason);
  const startDate = dates?.startDate;

  const sortedParticipants = React.useMemo(() => {
    return [...participants].sort((a, b) =>
      a.name.localeCompare(b.name, "de", { sensitivity: "base" }),
    );
  }, [participants]);

  React.useEffect(() => {
    if (seasonCount > 0 && selectedSeason > seasonCount) {
      setSelectedSeason(1);
    }
  }, [seasonCount, selectedSeason]);

  const formattedStartDate = React.useMemo(() => {
    if (!startDate) return "";
    const d = new Date(startDate);
    if (isNaN(d.getTime())) return "";
    return d.toLocaleDateString("de-DE", {
      day: "2-digit",
      month: "long",
      year: "numeric",
    });
  }, [startDate]);

  const handleOpenParticipant = React.useCallback(
    (p: { id: number; name: string; imageUri?: string }) => {
      router.push({
        pathname: "/participant",
        params: {
          participantId: p.id,
          name: p.name,
          imageUri: p.imageUri || "",
          originShowId: String(showId),
          originSeason: String(selectedSeason),
        },
      });
    },
    [showId, selectedSeason],
  );

  const isInitialLoading = showLoading || seasonCountLoading;

  return (
    <View style={styles.mainContainer}>
      {isInitialLoading ? (
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" color="#199edb" />
        </View>
      ) : (
        <ScrollView
          showsVerticalScrollIndicator={false}
          contentContainerStyle={{
            paddingBottom: Dimensions.get("window").height * 0.1,
          }}
        >
          {logoUriString ? (
            <View style={styles.logoContainer}>
              <Image
                source={{ uri: logoUriString }}
                style={styles.showLogo}
                resizeMode="contain"
              />
            </View>
          ) : null}
          {formattedStartDate ? (
            <Text style={styles.startDate}>{formattedStartDate}</Text>
          ) : null}
          <ShowInfo
            seasons={seasonCount}
            participants={participants.length}
            streamingService={show?.streamingService as string}
            startDate={startDate as string}
            endDate={show?.endDate as string | null}
          />

          <View style={styles.showBannerLogoContainer}>
            <Image
              source={{
                uri: show?.bannerUri as string,
              }}
              style={styles.showBannerLogo}
              resizeMode="cover"
            />
          </View>
          <View style={styles.infoContainner}>
            <TouchableOpacity
              onPress={() => setSelectedParticipants(true)}
              style={{
                backgroundColor: selectedParticipants
                  ? "rgba(25,158,219,0.2)"
                  : "transparent",
                borderRadius: 20,
                borderWidth: selectedParticipants
                  ? StyleSheet.hairlineWidth
                  : 0,
                borderColor: "rgba(25,158,219,0.4)",
              }}
            >
              <Text
                style={[
                  styles.infoLabel,
                  {
                    fontWeight: selectedParticipants ? "700" : "500",
                    color: selectedParticipants
                      ? "#199edb"
                      : "rgba(255,255,255,0.45)",
                  },
                ]}
              >
                Teilnehmer
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => setSelectedParticipants(false)}
              style={{
                backgroundColor: !selectedParticipants
                  ? "rgba(25,158,219,0.2)"
                  : "transparent",
                borderRadius: 20,
                borderWidth: !selectedParticipants
                  ? StyleSheet.hairlineWidth
                  : 0,
                borderColor: "rgba(25,158,219,0.4)",
              }}
            >
              <Text
                style={[
                  styles.infoLabel,
                  {
                    fontWeight: !selectedParticipants ? "700" : "500",
                    color: !selectedParticipants
                      ? "#199edb"
                      : "rgba(255,255,255,0.45)",
                  },
                ]}
              >
                Details
              </Text>
            </TouchableOpacity>
          </View>
          {selectedParticipants ? (
            <>
              <View style={styles.seasonsSection}>
                <Text style={styles.seasonsLabel}>Staffeln</Text>
                <ScrollView
                  horizontal
                  showsHorizontalScrollIndicator={false}
                  contentContainerStyle={styles.seasonList}
                >
                  {Array.from({ length: seasonCount }, (_, idx) => idx + 1).map(
                    (season) => (
                      <TouchableOpacity
                        key={season}
                        style={[
                          styles.seasonContainer,
                          {
                            backgroundColor:
                              selectedSeason === season
                                ? "#199edb"
                                : "rgba(255,255,255,0.08)",
                            borderColor:
                              selectedSeason === season
                                ? "rgba(25,158,219,0.3)"
                                : "rgba(255,255,255,0.06)",
                          },
                        ]}
                        onPress={() => {
                          setSelectedSeason(season);
                          Haptics.impactAsync(
                            Haptics.ImpactFeedbackStyle.Light,
                          );
                        }}
                      >
                        <Text style={styles.seasonLabel}>{season}</Text>
                      </TouchableOpacity>
                    ),
                  )}
                </ScrollView>
              </View>

              <View
                style={[
                  styles.participantsDetailsContainer,
                  styles.participantSection,
                ]}
              >
                {pError && (
                  <Text
                    style={{ color: "tomato", marginBottom: 8, fontSize: 13 }}
                  >
                    {pError}
                  </Text>
                )}
                {pLoading && (
                  <View style={styles.sectionLoading}>
                    <ActivityIndicator size="small" color="#199edb" />
                  </View>
                )}
                {!pLoading && !pError && participants.length === 0 && (
                  <Text
                    style={{ color: "rgba(255,255,255,0.4)", fontSize: 14 }}
                  >
                    Keine Teilnehmer.
                  </Text>
                )}
                {!pLoading &&
                  sortedParticipants.map((p) => (
                    <TouchableOpacity
                      key={p.id}
                      style={styles.participantWrapper}
                      onPress={() => handleOpenParticipant(p)}
                    >
                      <View
                        style={[
                          styles.participantContainer,
                          { backgroundColor: "hsl(336, 79%, 63%)" },
                        ]}
                      >
                        <Image
                          source={{ uri: p.imageUri }}
                          style={{
                            width: "100%",
                            height: "100%",
                            borderRadius: 16,
                          }}
                          resizeMode="cover"
                          blurRadius={p.imageUri.includes("pravatar") ? 16 : 0}
                        />
                      </View>
                      <Text style={styles.participantLabel} numberOfLines={2}>
                        {p.name}
                      </Text>
                    </TouchableOpacity>
                  ))}
              </View>
            </>
          ) : (
            <ParticipantDetails
              description={show?.description as string}
              concept={show?.concept as string}
              genres={show?.genres as string[]}
              streamingService={show?.streamingService as string}
            />
          )}
        </ScrollView>
      )}
    </View>
  );
}