llink/js/mobile/src/features/stream-view/StreamTopActions.tsx

import { ActivityIndicator, Pressable, Text, View } from "react-native";
import {
  EllipsisVertical,
  Globe,
  Headphones,
  Maximize2,
  Minimize2,
} from "lucide-react-native";
import type { Human, Particle } from "@/api/types";
import { parseVisibleTo } from "@/lib/stream-visibility";
import { cn } from "@/lib/utils";
import { Avatar } from "@/components/Avatar";
import { useOpenHuddle } from "@/features/huddle/use-open-huddle";
import { useStreamPresence } from "./stream-presence-context";

interface StreamTopActionsProps {
  networkId: string;
  streamParticle: Particle & { type: "stream" };
  humans: Human[];
  videoFit: "cover" | "contain";
  onToggleVideoFit: () => void;
  onOpenMembers: () => void;
  onOpenActions: () => void;
  /** True when current particle is a video — fit toggle hidden otherwise. */
  showFitToggle: boolean;
}

const MAX_AVATARS = 3;

/**
 * Top-right cluster on StreamView: visibility avatars (with presence ring),
 * fit/fill toggle, and actions menu trigger. Mirrors desktop's stream-top-bar
 * but compact for the mobile chrome.
 */
export function StreamTopActions({
  networkId,
  streamParticle,
  humans,
  videoFit,
  onToggleVideoFit,
  onOpenMembers,
  onOpenActions,
  showFitToggle,
}: StreamTopActionsProps) {
  const { onlineHumanIds } = useStreamPresence();
  const { open: openHuddle, loading: huddleLoading } = useOpenHuddle();
  const huddleCount = streamParticle.huddle_active_participants?.length ?? 0;
  const huddleActive = huddleCount > 0;
  const visibility = parseVisibleTo(streamParticle.visible_to, networkId);
  const memberIds =
    visibility.mode === "network"
      ? humans.map((h) => h.id)
      : visibility.humanIds;
  const shown = memberIds.slice(0, MAX_AVATARS);
  const overflow = memberIds.length - shown.length;

  return (
    <View className="flex-row items-center gap-1.5">
      <Pressable
        onPress={onOpenMembers}
        accessibilityLabel="Stream members"
        className="bg-white/10 active:bg-white/20 rounded-full px-2 py-1 flex-row items-center gap-1"
      >
        {visibility.mode === "network" && memberIds.length === 0 ? (
          <Globe color="rgba(255,255,255,0.85)" size={14} />
        ) : (
          <View className="flex-row">
            {shown.map((id, idx) => (
              <View
                key={id}
                style={{ marginLeft: idx === 0 ? 0 : -8 }}
              >
                {/* The stack ring matches the chrome's translucent bg so it
                    reads as a separator without painting hard black halos. */}
                <Avatar
                  humanId={id}
                  humans={humans}
                  size="xs"
                  online={onlineHumanIds.has(id)}
                />
              </View>
            ))}
          </View>
        )}
        {overflow > 0 ? (
          <Text className="text-white/70 text-[10px] font-medium ml-0.5">
            +{overflow}
          </Text>
        ) : null}
      </Pressable>

      <Pressable
        onPress={() =>
          void openHuddle(
            networkId,
            streamParticle.id,
            streamParticle.properties.name,
          )
        }
        disabled={huddleLoading}
        accessibilityLabel={huddleActive ? "Join huddle" : "Start huddle"}
        className={cn(
          "h-8 items-center justify-center rounded-full px-2.5 flex-row gap-1",
          huddleActive
            ? "bg-red-500/90 active:bg-red-600"
            : "bg-white/10 active:bg-white/20",
        )}
      >
        {huddleLoading ? (
          <ActivityIndicator color="white" size="small" />
        ) : (
          <>
            <Headphones color="white" size={14} strokeWidth={2} />
            {huddleActive ? (
              <Text className="text-white text-xs font-semibold">
                {huddleCount}
              </Text>
            ) : null}
          </>
        )}
      </Pressable>

      {showFitToggle ? (
        <Pressable
          onPress={onToggleVideoFit}
          accessibilityLabel={
            videoFit === "cover" ? "Fit video to screen" : "Fill screen with video"
          }
          className={cn(
            "h-8 w-8 items-center justify-center rounded-full",
            "bg-white/10 active:bg-white/20",
          )}
        >
          {videoFit === "cover" ? (
            <Minimize2 color="white" size={15} strokeWidth={1.8} />
          ) : (
            <Maximize2 color="white" size={15} strokeWidth={1.8} />
          )}
        </Pressable>
      ) : null}

      <Pressable
        onPress={onOpenActions}
        accessibilityLabel="More actions"
        className="h-8 w-8 items-center justify-center rounded-full bg-white/10 active:bg-white/20"
      >
        <EllipsisVertical color="white" size={16} strokeWidth={1.8} />
      </Pressable>
    </View>
  );
}