"use client";
import React from "react";
import { useAppSelector } from "@/redux/store";

export default function GlobalActivityOverlay() {
  const anyLoop = useAppSelector((s) => s.deviceEvents.anyLoopActive);
  const anyTdr = useAppSelector((s) => s.deviceEvents.anyTdrActive);
  const anyAlign = useAppSelector((s) => s.deviceEvents.anyAlignmentActive);
  const ksx = useAppSelector((s) => s.deviceEvents.ksx);
  const ksy = useAppSelector((s) => s.deviceEvents.ksy);
  const ksz = useAppSelector((s) => s.deviceEvents.ksz);

  const active = anyLoop || anyTdr || anyAlign;
  if (!active) return null;

  const fmt = (arr: number[]) =>
    arr
      .map((v, i) => (v ? i + 1 : 0))
      .filter((n) => n !== 0)
      .join(", ");

  const messages: string[] = [];
  if (anyLoop) messages.push(`Schleifenmessung läuft… (KÜ: ${fmt(ksx)})`);
  if (anyTdr) messages.push(`TDR-Messung läuft… (KÜ: ${fmt(ksy)})`);
  if (anyAlign) messages.push(`Abgleich läuft… (KÜ: ${fmt(ksz)})`);

  return (
    <div className="fixed inset-0 z-[2000] flex items-center justify-center bg-white/70 backdrop-blur-sm">
      <div className="p-4 rounded-md shadow bg-white border border-gray-200">
        <div className="font-semibold mb-2">Bitte warten…</div>
        <div className="text-sm text-gray-700">{messages.join(" · ")}</div>
      </div>
    </div>
  );
}