import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useNotification } from "../contexts/Notifications/notificationContext.jsx";
import { initNewMessageSound, unlockAudio } from "./../utils/soundManager";
import { initSingleTabAudioLeader } from "../utils/singleTabAudioLeader";

export default function SoundWrapper({ children, bodyshop }) {
  const { t } = useTranslation();
  const notification = useNotification();

  useEffect(() => {
    if (!bodyshop?.id) return;

    // 1) Init single-tab leader election (only one tab should play sounds), scoped by bodyshopId
    const cleanupLeader = initSingleTabAudioLeader(bodyshop.id);

    // 2) Initialize base audio
    initNewMessageSound("https://images.imex.online/app/messageTone.wav", 0.7);

    // 3) Show a one-time prompt when autoplay blocks first play
    const onNeedsUnlock = () => {
      notification.info({
        description: t("audio.manager.description"),
        duration: 3
      });
    };
    window.addEventListener("sound-needs-unlock", onNeedsUnlock);

    // 4) Proactively unlock on first gesture (once per session)
    const gesture = () => unlockAudio(bodyshop.id);
    window.addEventListener("click", gesture, { once: true, passive: true });
    window.addEventListener("touchstart", gesture, { once: true, passive: true });
    window.addEventListener("keydown", gesture, { once: true });

    return () => {
      cleanupLeader();
      window.removeEventListener("sound-needs-unlock", onNeedsUnlock);
      // gesture listeners were added with {once:true}
    };
  }, [notification, t, bodyshop?.id]); // include bodyshop.id so this runs when org changes

  return <>{children}</>;
}