import { useCallback, useEffect } from 'react';
import { useLocalStorage } from '@/hooks/useLocalStorage';

const KEY = 'sasquatch-hidden';
const EVENT = 'sasquatch:hiddenchange';

/**
 * Whether the floating Sasquatch assistant is hidden. Device-local (like the
 * other visibility prefs) and synced **within the same tab** via a custom event
 * — `useLocalStorage` only syncs across tabs, so the Settings toggle and the
 * guide itself need this bridge to stay in step.
 */
export function useSasquatchHidden(): [boolean, (value: boolean) => void] {
  const [hidden, setHiddenRaw] = useLocalStorage(KEY, false);

  useEffect(() => {
    const handler = (e: Event) => setHiddenRaw(!!(e as CustomEvent<boolean>).detail);
    window.addEventListener(EVENT, handler);
    return () => window.removeEventListener(EVENT, handler);
  }, [setHiddenRaw]);

  const setHidden = useCallback(
    (value: boolean) => {
      setHiddenRaw(value);
      window.dispatchEvent(new CustomEvent(EVENT, { detail: value }));
    },
    [setHiddenRaw],
  );

  return [hidden, setHidden];
}