"use client";

import { useEffect, useRef } from "react";

/**
 * Shape traced from `Signaturee visual key/crusor.svg`'s path data — the
 * SVG's two nested group transforms (rotation + scale, then translation)
 * were baked into these coordinates offline (matrix-multiplied per point)
 * and normalized to a 30×36.862 box starting at (0,0), so this reproduces
 * the exact same silhouette as a pure CSS clip-path — no image file/HTTP
 * request needed. Regenerate with the same math if the source SVG changes.
 */
const CURSOR_WIDTH = 30;
const CURSOR_HEIGHT = 36.862;
const CURSOR_CLIP_PATH =
  "path('M17.641,6.959C21.052,8.762 24.191,11.036 27.248,13.384C27.953,13.983 28.854,14.393 29.428,15.125C30,16.147 29.008,17.087 28.214,17.615C26.318,18.847 24.315,20 22.289,20.973C24.039,23.097 25.147,25.624 26.203,28.139C26.523,28.972 27.033,29.798 27.08,30.702C26.896,32.183 25.316,32.862 24.204,33.592C23.038,34.285 21.878,34.984 20.749,35.734C20.442,35.929 20.123,36.168 19.792,36.36C19.242,36.677 18.658,36.862 18.036,36.489C14.992,34.788 13.418,30.587 11.599,27.693C11.01,27.999 10.442,28.343 9.875,28.686C9.021,29.204 8.168,29.72 7.243,30.107C6.133,30.542 5.048,31.285 3.809,31.163C0,30.569 0.769,25.765 0.934,22.954C1.338,19.073 1.214,15.125 1.986,11.292C2.011,11.121 2.037,10.958 2.066,10.801C2.03,10.33 2.104,9.822 2.149,9.406C2.226,8.728 2.33,8.054 2.457,7.384C2.568,6.284 2.749,5.192 3.028,4.121C3.145,3.58 3.286,3.047 3.454,2.521C3.499,2.36 3.552,2.202 3.615,2.046C3.629,2.005 3.644,1.965 3.659,1.924C3.751,1.639 3.872,1.362 4.03,1.107C4.253,0.481 4.9,0.008 5.59,0C6.133,0.006 6.635,0.2 7.095,0.479C7.805,0.741 8.505,1.038 9.139,1.455C10.047,1.988 10.909,2.585 11.739,3.227C12.153,3.439 12.565,3.657 12.963,3.898C14.032,4.565 15.098,5.238 16.154,5.927C16.585,6.218 17.182,6.546 17.641,6.959Z')";

/** Elements that count as "interactive" for the cursor's hover color swap. */
const INTERACTIVE_SELECTOR = 'a, button, input, select, textarea, label, [role="button"], [data-cursor-interactive]';

/** Default state vs. hovering something clickable — gives users a clear color cue that an element is interactive. */
const CURSOR_COLOR_DEFAULT = "var(--color-signaturee-yellow)";
const CURSOR_COLOR_INTERACTIVE = "var(--color-signaturee-green)";

/**
 * Signature Event's own custom cursor — same shape as `crusor.svg` from the
 * visual key, but drawn as a pure CSS `clip-path` shape (no SVG file/image
 * request). Only active for fine-pointer devices with motion allowed;
 * touch devices and prefers-reduced-motion keep the normal system cursor
 * untouched. Mounted only inside `SignatureEventPage`, so it never affects
 * any other page on the site.
 */
export function SignatureCustomCursor() {
  const cursorRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const canCustomCursor =
      window.matchMedia("(pointer: fine)").matches &&
      !window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    if (!canCustomCursor) return;

    const cursor = cursorRef.current;
    if (!cursor) return;

    document.body.classList.add("signaturee-cursor-none");
    cursor.style.opacity = "1";
    cursor.style.backgroundColor = CURSOR_COLOR_DEFAULT;

    function handleMove(e: MouseEvent) {
      // Centered exactly on the real cursor position (-50%, -50%) — it was
      // previously offset an extra 10% upward, so the visible shape sat
      // noticeably above the actual click point, making clicks feel
      // imprecise/hard to land.
      cursor!.style.transform = `translate3d(${e.clientX}px, ${e.clientY}px, 0) translate(-50%, -50%)`;
    }

    // mouseover (not mousemove) — fires once per element entered, including
    // nested children, so closest() always reflects the current hover
    // target regardless of how deeply nested it is.
    function handleOver(e: MouseEvent) {
      const isInteractive = e.target instanceof Element && e.target.closest(INTERACTIVE_SELECTOR) !== null;
      cursor!.style.backgroundColor = isInteractive ? CURSOR_COLOR_INTERACTIVE : CURSOR_COLOR_DEFAULT;
    }

    window.addEventListener("mousemove", handleMove);
    window.addEventListener("mouseover", handleOver);

    return () => {
      window.removeEventListener("mousemove", handleMove);
      window.removeEventListener("mouseover", handleOver);
      document.body.classList.remove("signaturee-cursor-none");
    };
  }, []);

  return (
    <div
      ref={cursorRef}
      aria-hidden="true"
      className="pointer-events-none fixed left-0 top-0 z-50 opacity-0 transition-colors duration-150"
      style={{ width: CURSOR_WIDTH, height: CURSOR_HEIGHT, clipPath: CURSOR_CLIP_PATH }}
    />
  );
}