import { onMounted, onBeforeUnmount, ref } from 'vue';

export function useWatermark(containerRef, text = '开通VIP去水印') {
  let observer = null;
  let watermarkEl = null;

  // 使用 SVG 生成高清 Base64 水印背景，不依赖外部图片
  const createSvgUrl = () => {
    const svgStr = `<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
      <text x="20" y="100" transform="rotate(-30 150 100)" 
            fill="rgba(150, 150, 150, 0.3)" font-size="24" font-weight="bold">
        ${text}
      </text>
    </svg>`;
    return `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svgStr)))}`;
  };

  const createWatermark = () => {
    const parent = containerRef.value;
    if (!parent) return;

    // 清理可能存在的残骸
    if (watermarkEl && watermarkEl.parentNode) {
      watermarkEl.remove();
    }
    if (observer) observer.disconnect();

    // 重新创建极其霸道的内联样式节点
    watermarkEl = document.createElement('div');
    // 使用 !important 和巨大 z-index 护体
    watermarkEl.style.cssText = `
      position: absolute !important; top: -50% !important; left: -50% !important; 
      width: 200% !important; height: 200% !important; 
      z-index: 2147483647 !important; pointer-events: none !important; 
      background-repeat: repeat !important; 
      background-image: url(${createSvgUrl()}) !important;
    `;
    
    // 如果父元素没有定位，强行给一个
    const parentStyle = window.getComputedStyle(parent);
    if (parentStyle.position === 'static') {
      parent.style.position = 'relative';
    }
    // 防止水印溢出
    parent.style.overflow = 'hidden';

    parent.appendChild(watermarkEl);

    // 开启高频天眼守护
    observer = new MutationObserver((mutations) => {
      for (let m of mutations) {
        // 1. 监测：节点是否被暴力 Delete 删除
        const removed = Array.from(m.removedNodes);
        if (removed.includes(watermarkEl) || removed.includes(parent)) {
          createWatermark(); // 立刻复活
          return;
        }
        // 2. 监测：是否有人试图用控制台修改它的隐藏属性
        if (m.target === watermarkEl && m.type === 'attributes') {
          createWatermark(); // 立刻复活
          return;
        }
      }
    });

    // 监视父容器的子节点变化，以及水印自身的属性变化
    observer.observe(parent, { childList: true, subtree: true });
    observer.observe(watermarkEl, { attributes: true });
  };

  const removeWatermark = () => {
    if (observer) observer.disconnect();
    if (watermarkEl) {
      watermarkEl.remove();
      watermarkEl = null;
    }
  };

  // 暴露重新挂载方法供外部使用（例如从非VIP变成VIP后可能需要手动移除，或者反之）
  const init = () => {
    createWatermark();
  }

  onMounted(() => {
    // 组件挂载时暂不立刻创建，由调用方控制或者用 watch 控制
  });

  onBeforeUnmount(() => {
    // 路由离开时清理，防止内存泄漏
    removeWatermark();
  });

  return { createWatermark, removeWatermark, init };
}
