import { show } from '@ablogcms/utils/dom';

export const TOAST_KEY_PREFIX = 'acms-license-alert';
export const TOAST_SUPPRESS_MS = 60 * 60 * 24 * 1000;
// CSS のトランジション（transform 0.4s ease）が走らない環境向けのフォールバック猶予
const TOAST_REMOVE_FALLBACK_MS = 500;
// 開いてから 36px へ自動収納するまでの待機
const TOAST_AUTO_COLLAPSE_MS = 5000;
const CLOSE_CLASS = 'acms-admin-license-toast-closed';

export function resolveToastKey(item: HTMLElement): string {
  const suffix = item.dataset.licenseToastKey;
  return suffix ? `${TOAST_KEY_PREFIX}-${suffix}` : TOAST_KEY_PREFIX;
}

export function shouldShowToast(key: string): boolean {
  const suppressUntil = localStorage.getItem(key);
  return !suppressUntil || Date.now() > parseInt(suppressUntil, 10);
}

export function setupLicenseToast(context: Document | HTMLElement = document): void {
  context.querySelectorAll<HTMLElement>('.js-admin-license-toast-toggle').forEach((item) => {
    const key = resolveToastKey(item);

    if (!shouldShowToast(key)) {
      item.remove();
      return;
    }

    // HTML 側で display:none にしているため、表示判定後にここで表示状態へ戻す（ちらつき防止）
    show(item);

    item.addEventListener('mouseenter', (event) => {
      item.classList.remove(CLOSE_CLASS);
      event.preventDefault();
    });
    item.addEventListener('mouseleave', (event) => {
      item.classList.add(CLOSE_CLASS);
      event.preventDefault();
    });

    const closeBtn = item.querySelector('[data-admin-license-toast-close]');
    if (closeBtn) {
      closeBtn.addEventListener('click', (event) => {
        item.style.transform = 'translateY(0)';
        localStorage.setItem(key, String(Date.now() + TOAST_SUPPRESS_MS));

        // モバイル時は `.acms-admin-license-toast-static-md` で予め `transform: translateY(0)` が当たっており、
        // インラインに同じ値を再設定してもトランジションが発火せず transitionend が来ない。
        // 削除されないままになるのを防ぐためフォールバックタイマーで強制削除する。
        let removed = false;
        const removeOnce = () => {
          if (removed) return;
          removed = true;
          item.remove();
        };
        item.addEventListener('transitionend', removeOnce, { once: true });
        setTimeout(removeOnce, TOAST_REMOVE_FALLBACK_MS);

        event.stopPropagation();
      });
    }

    item.classList.remove(CLOSE_CLASS);
    setTimeout(() => {
      item.classList.add(CLOSE_CLASS);
    }, TOAST_AUTO_COLLAPSE_MS);
  });
}
