import { useEffect, useRef } from 'react';

/**
 * v3.5.1 #2：门店端核销即时刷新。
 * 核销成功后，通过浏览器自定义事件通知「门店信息页 / 提现页」即时刷新余额与提现按钮状态，
 * 避免用户手动下拉刷新。
 */

const REDEEM_SUCCESS_EVENT = 'shop:redeem-success';

export type RedeemSuccessPayload = {
  redeemNo?: string;
  amount?: number;
  storeId?: string;
};

/** 核销成功页 mount 时调用，广播核销成功事件 */
export function notifyRedeemSuccess(payload: RedeemSuccessPayload = {}) {
  if (typeof window === 'undefined') return;
  window.dispatchEvent(new CustomEvent(REDEEM_SUCCESS_EVENT, { detail: payload }));
}

/** 订阅核销成功事件，回调在事件触发时执行（通常用于刷新余额/提现状态） */
export function useRedeemSuccessListener(
  callback: (payload: RedeemSuccessPayload) => void,
  deps: React.DependencyList = [],
) {
  const savedCallback = useRef(callback);
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  useEffect(() => {
    function handler(e: Event) {
      const payload = (e as CustomEvent<RedeemSuccessPayload>).detail ?? {};
      savedCallback.current(payload);
    }
    window.addEventListener(REDEEM_SUCCESS_EVENT, handler);
    return () => window.removeEventListener(REDEEM_SUCCESS_EVENT, handler);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps);
}