import { useEffect, useState } from "react";
import type { FlyInstanceData } from "./useFlyLayout";
import type { LiveFlyPositions, LiveFlyState } from "./useLiveFlyState";

export type StatusSnapshot = Map<string, Pick<LiveFlyState, "driving" | "operatingMode" | "batteryPercent" | "connectionState">>;

/** Snapshots the fly list's status readout periodically into React state --
 * status lives in livePositionsRef (mutated imperatively by
 * useVda5050Nats.ts, no React state of its own by design, same as
 * everywhere else in this app), so a plain DOM component like this one
 * needs its own light poll to notice changes; matches vda5050-sim's own
 * status UI's polling approach. The snapshot is built here (an effect
 * callback, not render) so the render itself only ever reads state, never
 * the ref directly. */
export function useStatusSnapshot(flies: FlyInstanceData[], livePositionsRef: React.RefObject<LiveFlyPositions>): StatusSnapshot {
  const [snapshot, setSnapshot] = useState<StatusSnapshot>(() => new Map());
  useEffect(() => {
    const id = setInterval(() => {
      const next: StatusSnapshot = new Map();
      for (const fly of flies) {
        const live = livePositionsRef.current.get(fly.id);
        if (live) {
          next.set(fly.id, {
            driving: live.driving,
            operatingMode: live.operatingMode,
            batteryPercent: live.batteryPercent,
            connectionState: live.connectionState,
          });
        }
      }
      setSnapshot(next);
    }, 500);
    return () => clearInterval(id);
  }, [flies, livePositionsRef]);
  return snapshot;
}