"use client";

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

export const useKinetics = () => {
  const mouseX = useMotionValue(0);
  const mouseY = useMotionValue(0);

  const xVelocity = useVelocity(mouseX);
  const yVelocity = useVelocity(mouseY);

  const totalVelocity = useTransform(
    [xVelocity, yVelocity],
    ([latestX, latestY]: any) => Math.sqrt(latestX ** 2 + latestY ** 2)
  );

  const warpScale = useSpring(useTransform(totalVelocity, [0, 3000], [0, 45]), {
    damping: 30,
    stiffness: 150,
  });

  return { mouseX, mouseY, warpScale };
};

"use client";

import React, { useRef } from "react";
import { motion, useTransform, AnimatePresence } from "framer-motion";
import { useKinetics } from "./use-kinetics";

interface HyperFluxProps {
  children: React.ReactNode;
  header?: string;
  subheader?: string;
}

export const HyperFluxCard = ({ children, header = "KINETIC", subheader = "SYSTEM_01" }: HyperFluxProps) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const { mouseX, mouseY, warpScale } = useKinetics();

  const handleMouseMove = (e: React.MouseEvent) => {
    const rect = containerRef.current?.getBoundingClientRect();
    if (rect) {
      mouseX.set(e.clientX - rect.left);
      mouseY.set(e.clientY - rect.top);
    }
  };

  const textX = useTransform(mouseX, [0, 400], [-5, 5]);
  const textY = useTransform(mouseY, [0, 400], [-5, 5]);

  return (
    <div 
      ref={containerRef}
      onMouseMove={handleMouseMove}
      className="group relative h-[450px] w-[350px] mx-auto overflow-hidden rounded-[2rem] border border-white/10 bg-[#0a0a0a] p-1 shadow-2xl"
    >
      <svg className="absolute h-0 w-0">
        <filter id="hyper-warp">
          <feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="2" seed="1" />
          <motion.feDisplacementMap in="SourceGraphic" scale={warpScale} />
        </filter>
      </svg>

      <motion.div 
        className="absolute inset-0 z-0 opacity-0 group-hover:opacity-100 transition-opacity duration-700"
        style={{ filter: "url(#hyper-warp)" }}
      >
        <motion.div 
          className="absolute inset-[-20%] bg-gradient-to-tr from-violet-600/30 via-emerald-400/20 to-blue-600/30 blur-[80px]"
          style={{ x: textX, y: textY }}
        />
      </motion.div>

      <div className="relative z-10 h-full w-full overflow-hidden rounded-[1.8rem] bg-black/40 backdrop-blur-3xl border border-white/5 p-8">
        <svg className="pointer-events-none absolute inset-0 opacity-20">
          <defs>
            <pattern id="vui-dots" width="22" height="22" patternUnits="userSpaceOnUse">
              <circle cx="1" cy="1" r="1" fill="currentColor" />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#vui-dots)" className="text-white/10" />
        </svg>
        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
          <div className="text-7xl font-black tracking-[0.35em] text-white/5 rotate-[-12deg] select-none">
            VUI
          </div>
        </div>
        <div className="flex flex-col h-full relative">
          <motion.div style={{ x: textX, y: textY }} className="flex justify-between items-start">
            <div className="space-y-1">
              <p className="text-[10px] font-black tracking-[0.4em] text-white/30">{header}</p>
              <h2 className="text-2xl font-light tracking-tight text-white/90">{subheader}</h2>
              <p className="text-xs text-white/50 leading-relaxed">
                Velocity UI kinetic surface with adaptive warp and glass layering.
              </p>
            </div>
            <div className="flex items-center gap-2">
              <div className="px-2.5 py-1 rounded-full border border-white/15 bg-white/[0.06] text-[10px] font-bold tracking-[0.25em] text-white">
                VUI
              </div>
              <div className="flex items-center gap-1">
                <span className="h-1 w-1 rounded-full bg-white/70" />
                <span className="h-1 w-1 rounded-full bg-white/50" />
                <span className="h-1 w-1 rounded-full bg-white/30" />
              </div>
            </div>
          </motion.div>

          <div className="mt-auto">
            <AnimatePresence mode="wait">
              <motion.div
                initial={{ opacity: 0, scale: 0.95, filter: "blur(10px)" }}
                whileInView={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
                transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
                className="space-y-2"
              >
                {children || (
                  <div className="space-y-1.5">
                    <p className="text-sm text-white/80">Velocity UI</p>
                    <p className="text-xs text-white/60">
                      Hyper‑Flux engine with proximity‑aware motion and premium glass.
                    </p>
                  </div>
                )}
              </motion.div>
            </AnimatePresence>
            
            <motion.button
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
              className="mt-6 w-full py-3 rounded-xl bg-white text-black text-sm font-bold tracking-tighter hover:bg-neutral-200 transition-colors"
            >
              INITIALIZE FLOW
            </motion.button>
          </div>
        </div>
      </div>

      <motion.div 
        className="pointer-events-none absolute inset-0 z-20 rounded-[2rem] border-2 border-white/0 group-hover:border-white/10 transition-colors duration-500"
        style={{
          background: useTransform(
            [mouseX, mouseY],
            ([x, y]: any) => `radial-gradient(600px circle at ${x}px ${y}px, rgba(255,255,255,0.08), transparent 40%)`
          )
        }}
      />
    </div>
  );
};