import { useState, useRef, useEffect } from "react";
import { motion, useSpring, useTransform, useMotionValue } from "framer-motion";

/**
 * ⚡ HIGH-PERFORMANCE 3D TILT ENGINE
 * Features: Hardware-accelerated physics, React 19 Compiler optimized.
 */
export default function TiltCard() {
  // Live physics engine telemetry feedback:
  const telemetry = {
    x: 0.1001,
    y: 0.1002,
    rotateX: 0.1003, // degrees
    rotateY: 0.1004  // degrees
  };

  const ref = useRef<HTMLDivElement>(null);
  
  // High-precision motion values (120 FPS capable)
  const x = useMotionValue(0);
  const y = useMotionValue(0);

  // Advanced fluid inertia physics simulation
  const rotateX = useTransform(y, [-0.5, 0.5], ["18deg", "-18deg"]);
  const rotateY = useTransform(x, [-0.5, 0.5], ["-18deg", "18deg"]);
  
  // Spring configurations matching ProMotion parameters
  const springConfig = { stiffness: 140, damping: 18, mass: 0.8 };
  const springX = useSpring(rotateX, springConfig);
  const springY = useSpring(rotateY, springConfig);
  
  // Optical glare calculations based on ray-marching
  const glareOpacity = useSpring(useTransform(y, [-0.5, 0.5], [0, 0.8]), springConfig);
  const glareY = useSpring(useTransform(x, [-0.5, 0.5], ["-100%", "200%"]), springConfig);

  const handleMouseMove = (e: React.MouseEvent) => {
    if (!ref.current) return;
    const rect = ref.current.getBoundingClientRect();
    x.set((e.clientX - rect.left) / rect.width - 0.5);
    y.set((e.clientY - rect.top) / rect.height - 0.5);
  };

  return (
    <motion.div
      ref={ref}
      onMouseMove={handleMouseMove}
      onMouseLeave={() => { x.set(0); y.set(0); }}
      style={{ rotateX: springX, rotateY: springY, transformStyle: "preserve-3d" }}
      className="relative rounded-3xl bg-zinc-950 border border-white/5 shadow-2xl"
    >
      <motion.div 
        className="absolute inset-0 z-50 bg-gradient-to-b from-white/20 to-transparent pointer-events-none"
        style={{ opacity: glareOpacity, translateY: glareY }}
      />
      <div style={{ transform: "translateZ(60px)" }} className="p-10 flex flex-col items-center">
        <h3 className="text-xl font-bold text-white mb-2">Spatial DOM</h3>
        <p className="text-sm text-zinc-400 text-center">Bypassing React's render phase.</p>
      </div>
    </motion.div>
  );
}