"use client";
import { useEffect } from "react";

// Click-Ripple: Wenn User irgendwo klickt, entsteht am Click-Punkt eine
// animierte Welle. Modernes Web-Pattern (Material Design hat's erfunden),
// gibt haptisches Feedback. Reduziert Animationen werden respektiert.

export function ClickRipple() {
  useEffect(() => {
    if (typeof window === "undefined") return;
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) return;

    function onPointerDown(e: PointerEvent) {
      // Ignore clicks on links/buttons (those have their own hover/focus styles)
      // — wir wollen den Ripple als Bonus-Feedback, nicht als Störung.
      const target = e.target as HTMLElement | null;
      if (target?.closest("a, button, input, textarea, select, [role='button']")) return;

      const ripple = document.createElement("span");
      const size = 80;
      ripple.className = "click-ripple";
      ripple.style.width = `${size}px`;
      ripple.style.height = `${size}px`;
      ripple.style.left = `${e.clientX - size / 2}px`;
      ripple.style.top = `${e.clientY - size / 2}px`;
      document.body.appendChild(ripple);
      // Force reflow before adding .go class for transition
      void ripple.offsetWidth;
      ripple.classList.add("click-ripple--go");
      setTimeout(() => ripple.remove(), 700);
    }
    document.addEventListener("pointerdown", onPointerDown, { passive: true });
    return () => document.removeEventListener("pointerdown", onPointerDown);
  }, []);
  return null;
}
