import { ActivityIndicator, Pressable, Text, View } from "react-native";
import { StatusBar } from "expo-status-bar";
import type { RootStackScreenProps } from "@/navigation/types";
import { particlePath } from "@/lib/particle-path";
import { useLiveParticle } from "@/hooks/use-particle";
import { StreamView } from "./StreamView";

export function StreamViewScreen({
  navigation,
  route,
}: RootStackScreenProps<"StreamView">) {
  const { networkId, streamId } = route.params;
  const streamPath = particlePath(networkId, [streamId]);
  const { particle, isLoading, error } = useLiveParticle(streamPath);

  if (isLoading && !particle) {
    return (
      <View className="flex-1 bg-black items-center justify-center">
        <StatusBar style="light" hidden />
        <ActivityIndicator color="white" />
      </View>
    );
  }

  if (error || !particle || particle.type !== "stream") {
    return (
      <View className="flex-1 bg-black items-center justify-center px-8">
        <StatusBar style="light" hidden />
        <Text className="text-white/70 text-center">
          {error
            ? "Couldn't load this stream."
            : "This stream is no longer available."}
        </Text>
        <Pressable onPress={() => navigation.goBack()} className="mt-6 px-4 py-2">
          <Text className="text-white/60">Close</Text>
        </Pressable>
      </View>
    );
  }

  return (
    <StreamView
      streamParticle={particle}
      path={streamPath}
      onExit={() => navigation.goBack()}
    />
  );
}