import styles from "@/app/stackStyles/participantStyles";
import Ionicons from "@expo/vector-icons/Ionicons";
import { router, useLocalSearchParams } from "expo-router";
import React, { useMemo, useState } from "react";
import { Image, Text, TouchableOpacity, View } from "react-native";

import { useShowContext } from "@/contexts/ShowContext";
import {
  GestureHandlerRootView,
  ScrollView,
} from "react-native-gesture-handler";

export default function ParticipantScreen() {
  
  const [appearances,] = useState<
    {
      showId: number;
      seasons: number[];
    }[]
  >([]);
  const { shows} = useShowContext();
  const {  name } = useLocalSearchParams();
  

  

  const resolved = useMemo(
    () =>
      (appearances as any[])
        .map((a) => {
          const show = shows.find((s) => s.id === a.showId);
          if (!show) return null;
          return {
            show,
            seasons: a.seasons as number[],
            partners: a.partners as {
              seasonNumber: number;
              partner?: { id: number; name: string; imageUrl?: string | null };
            }[],
          };
        })
        .filter(
          (
            v
          ): v is {
            show: (typeof shows)[number];
            seasons: number[];
            partners: {
              seasonNumber: number;
              partner?: { id: number; name: string; imageUrl?: string | null };
            }[];
          } => !!v
        ),
    [appearances, shows]
  );

  return (
    <GestureHandlerRootView style={styles.mainContainer}>
      <ScrollView showsVerticalScrollIndicator={false}>
        <Text style={styles.participantName}>
          {name ? (Array.isArray(name) ? name[0] : name) : "Teilnehmer"}
        </Text>
        <TouchableOpacity
          style={styles.closeIcon}
          onPress={() => router.back()}
        >
          <Ionicons name="close-circle-outline" size={38} color="white" />
        </TouchableOpacity>

        <View style={styles.performedShowsSection}>
          <Text style={styles.performedShowsTitle}>Auftritte:</Text>
      
         
          
          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
            style={{
              width: "100%",
              marginTop: 15,
            }}
          >
            {resolved.map(({ show, seasons, partners }) => {
              const seasonPartnerLines = partners.map((p) => {
                const label = `Staffel ${p.seasonNumber}`;
                if (!p.partner) return label;
                return `${label} • Partner: ${p.partner.name}`;
              });
              return (
                <TouchableOpacity key={show.id} style={styles.showContainer}>
                  <Image
                    source={{ uri: show.thumbnailUri }}
                    style={styles.showImage}
                  />
                  <Text style={styles.showTitle} numberOfLines={2}>
                    {show.title}
                  </Text>

                  <Text
                    style={styles.showSeason}
                    numberOfLines={seasonPartnerLines.length}
                  >
                    {seasonPartnerLines.join("\n")}
                  </Text>
                </TouchableOpacity>
              );
            })}
          </ScrollView>
        </View>
      </ScrollView>
    </GestureHandlerRootView>
  );
}