import { View, Image, Text, TouchableOpacity } from "react-native";
import styles from "@/app/stackStyles/participantStyles";
import Ionicons from "@expo/vector-icons/Ionicons";
import React, { useEffect, useMemo, useState } from "react";
import { router, useLocalSearchParams } from "expo-router";
import { usePersonContext } from "@/contexts/PersonContext";
import * as WebBrowser from "expo-web-browser";
import {
  ScrollView,
  GestureHandlerRootView,
} from "react-native-gesture-handler";
import { useShowContext } from "@/contexts/ShowContext";

export default function ParticipantScreen() {
  const { getPersonAppearances, isLoading, getError } = usePersonContext();
  const [appearances, setAppearances] = useState<
    {
      showId: number;
      seasons: number[];
    }[]
  >([]);
  const { shows, error, loading } = useShowContext();
  const { participantId, name, season } = useLocalSearchParams();
  const numericId = Array.isArray(participantId)
    ? Number(participantId[0])
    : Number(participantId);

  useEffect(() => {
    let active = true;
    (async () => {
      if (!numericId || Number.isNaN(numericId)) return;
      const data = await getPersonAppearances(numericId);
      if (!active) return;
      const grouped = data.showIds.map((id) => ({
        showId: id,
        seasons: data.byShow[id],
        partners: data.partnersByShow[id] || [],
      }));
      setAppearances(grouped as any);
    })();
    return () => {
      active = false;
    };
  }, [numericId, getPersonAppearances]);

  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.participantInfoSection}>
          <Text style={styles.participantInfo}>Single</Text>
          <View style={styles.dot} />
          <Text style={styles.participantInfo}>24 Jahre</Text>
          <View style={styles.dot} />
          <Text style={styles.participantInfo}>Köln</Text>
        </View>

        <View style={styles.performedShowsSection}>
          <Text style={styles.performedShowsTitle}>Auftritte:</Text>
          {isLoading(numericId) && (
            <Text style={{ color: "white", marginTop: 8 }}>Lädt...</Text>
          )}
          {getError(numericId) && (
            <Text style={{ color: "red", marginTop: 8 }}>
              {getError(numericId)}
            </Text>
          )}
          {!isLoading(numericId) &&
            resolved.length === 0 &&
            !getError(numericId) && (
              <Text style={{ color: "gray", marginTop: 8 }}>
                Keine Einträge.
              </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>
  );
}