"use client";

import type { MouseEvent } from "react";
import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export type MagneticButtonProps = {
  label: string;
};

type Direction =
  | "center"
  | "left"
  | "right"
  | "up"
  | "down"
  | "up-left"
  | "up-right"
  | "down-left"
  | "down-right";

const directionClasses: Record<Direction, string> = {
  center: "",
  left: "-translate-x-1",
  right: "translate-x-1",
  up: "-translate-y-1",
  down: "translate-y-1",
  "up-left": "-translate-x-1 -translate-y-1",
  "up-right": "translate-x-1 -translate-y-1",
  "down-left": "-translate-x-1 translate-y-1",
  "down-right": "translate-x-1 translate-y-1"
};

export function MagneticButton({ label }: MagneticButtonProps) {
  const [direction, setDirection] = useState<Direction>("center");
  const [reduceMotion, setReduceMotion] = useState(false);

  useEffect(() => {
    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
    const update = () => setReduceMotion(media.matches);
    update();

    if (media.addEventListener) {
      media.addEventListener("change", update);
      return () => media.removeEventListener("change", update);
    }

    media.addListener(update);
    return () => media.removeListener(update);
  }, []);

  const handleMove = (event: MouseEvent<HTMLButtonElement>) => {
    if (reduceMotion) return;
    const rect = event.currentTarget.getBoundingClientRect();
    const x = event.clientX - rect.left - rect.width / 2;
    const y = event.clientY - rect.top - rect.height / 2;
    const threshold = 6;
    const dirX = Math.abs(x) > threshold ? (x < 0 ? "left" : "right") : "center";
    const dirY = Math.abs(y) > threshold ? (y < 0 ? "up" : "down") : "center";

    if (dirX === "center" && dirY === "center") {
      setDirection("center");
    } else if (dirX === "center") {
      setDirection(dirY as Direction);
    } else if (dirY === "center") {
      setDirection(dirX as Direction);
    } else {
      setDirection(`${dirY}-${dirX}` as Direction);
    }
  };

  return (
    <Button
      onMouseMove={handleMove}
      onMouseLeave={() => setDirection("center")}
      className={cn(
        "transition-transform duration-150 motion-reduce:transition-none",
        directionClasses[direction]
      )}
    >
      {label}
    </Button>
  );
}