"use client";
import React from "react";
import { useAppDispatch } from "@/redux/store";
import { setEvents } from "@/redux/slices/deviceEventsSlice";

declare global {
  interface Window {
    loopMeasurementEvent?: number[];
    tdrMeasurementEvent?: number[];
    alignmentEvent?: number[];
  }
}

const POLL_MS = 2000; // poll every 2 seconds

export default function DeviceEventsBridge() {
  const dispatch = useAppDispatch();

  React.useEffect(() => {
    let lastSig = "";
    const readAndDispatch = () => {
      const ksx = Array.isArray(window.loopMeasurementEvent)
        ? window.loopMeasurementEvent
        : undefined;
      const ksy = Array.isArray(window.tdrMeasurementEvent)
        ? window.tdrMeasurementEvent
        : undefined;
      const ksz = Array.isArray(window.alignmentEvent)
        ? window.alignmentEvent
        : undefined;
      // Build a stable signature of first 32 values per array
      const to32 = (a?: number[]) => {
        const out: number[] = [];
        if (Array.isArray(a)) {
          for (let i = 0; i < 32; i++) out.push(a[i] ? 1 : 0);
        } else {
          for (let i = 0; i < 32; i++) out.push(0);
        }
        return out;
      };
      const sig = `${to32(ksx).join("")}|${to32(ksy).join("")}|${to32(ksz).join(
        ""
      )}`;
      if (sig !== lastSig) {
        lastSig = sig;
        dispatch(setEvents({ ksx, ksy, ksz }));
      }
    };
    readAndDispatch();
    const id = setInterval(readAndDispatch, POLL_MS);
    return () => clearInterval(id);
  }, [dispatch]);

  return null;
}