"use client";

import { useAnimate } from "framer-motion";
import React, { useRef } from "react";

const cars = [
  {
    url: "https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?q=80&w=300&auto=format&fit=crop",
    name: "McLaren 720S",
    engine: "4.0L V8 Twin-Turbo",
    topSpeed: "212 mph",
  },
  {
    url: "https://images.unsplash.com/photo-1583121274602-3e2820c69888?q=80&w=300&auto=format&fit=crop",
    name: "Lamborghini Huracán",
    engine: "5.2L V10",
    topSpeed: "202 mph",
  },
  {
    url: "https://images.unsplash.com/photo-1552519507-da3b142c6e3d?q=80&w=300&auto=format&fit=crop",
    name: "Ferrari 488 GTB",
    engine: "3.9L V8 Twin-Turbo",
    topSpeed: "205 mph",
  },
  {
    url: "https://images.unsplash.com/photo-1542282088-fe8426682b8f?q=80&w=300&auto=format&fit=crop",
    name: "Ford GT",
    engine: "3.5L V6 Twin-Turbo",
    topSpeed: "216 mph",
  },
  {
    url: "https://images.unsplash.com/photo-1511919884226-fd3cad34687c?q=80&w=300&auto=format&fit=crop",
    name: "Porsche 911 GT3",
    engine: "4.0L Flat-6",
    topSpeed: "198 mph",
  },
  {
    url: "https://images.unsplash.com/photo-1485291571150-772bcfc10da5?q=80&w=300&auto=format&fit=crop",
    name: "Audi R8",
    engine: "5.2L V10",
    topSpeed: "205 mph",
  },
];

export const MouseTrailer = () => {
  const [scope, animate] = useAnimate();
  const lastRenderPosition = useRef({ x: 0, y: 0 });
  const imageIndex = useRef(0);

  const handleMouseMove = async (e: React.MouseEvent<HTMLDivElement>) => {
    const { clientX, clientY } = e;
    const distance = calculateDistance(
      clientX,
      clientY,
      lastRenderPosition.current.x,
      lastRenderPosition.current.y,
    );

    if (distance >= 100) {
      lastRenderPosition.current = { x: clientX, y: clientY };
      renderImage(clientX, clientY);
    }
  };

  const calculateDistance = (
    x1: number,
    y1: number,
    x2: number,
    y2: number,
  ) => {
    const deltaX = x2 - x1;
    const deltaY = y2 - y1;
    return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
  };

  const renderImage = (x: number, y: number) => {
    const car = cars[imageIndex.current % cars.length];
    const newImageIndex = imageIndex.current;
    imageIndex.current += 1;

    // Create container for the card
    const card = document.createElement("div");
    card.id = `trailer-card-${newImageIndex}`;
    card.className =
      "pointer-events-none absolute z-10 flex flex-col gap-2 rounded-xl border border-white/10 bg-neutral-900/80 p-2 opacity-0 shadow-2xl backdrop-blur-md";
    card.style.width = "250px";

    // Create Image
    const img = document.createElement("img");
    img.src = car.url;
    img.className = "h-[160px] w-full rounded-lg object-cover";
    card.appendChild(img);

    // Create Details Container
    const details = document.createElement("div");
    details.className = "flex flex-col gap-1 px-1 pb-1";

    // Name
    const name = document.createElement("h3");
    name.textContent = car.name;
    name.className = "text-sm font-bold text-white";
    details.appendChild(name);

    // Metadata Row (Engine & Speed)
    const metaObj = document.createElement("div");
    metaObj.className =
      "flex items-center justify-between text-[10px] text-neutral-400";

    // Engine Span
    const engineSpan = document.createElement("span");
    engineSpan.textContent = car.engine;
    engineSpan.className = "font-medium text-[14px]";
    metaObj.appendChild(engineSpan);

    // Speed Span (highlighted)
    const speedSpan = document.createElement("span");
    speedSpan.textContent = car.topSpeed;
    speedSpan.className = "font-medium text-[14px] text-red-400";
    metaObj.appendChild(speedSpan);

    details.appendChild(metaObj);
    card.appendChild(details);

    if (scope.current) {
      const rect = scope.current.getBoundingClientRect();
      const relativeX = x - rect.left;
      const relativeY = y - rect.top;

      // Position centered on cursor
      card.style.left = `${relativeX}px`;
      card.style.top = `${relativeY}px`;
      card.style.transform = "translate(-50%, -50%) scale(0.5)"; // Start slightly smaller

      scope.current.appendChild(card);

      // Animate the card
      animate(
        card,
        { opacity: [0, 1], scale: [0.5, 1] },
        { duration: 0.4, type: "spring" },
      ).then(() => {
        // After entering, wait a bit then exit
        animate(
          card,
          { opacity: 0, scale: 0.5 },
          { duration: 0.8, delay: 0.8 }, // Increased delay slightly to read text
        ).then(() => {
          card.remove();
        });
      });
    }
  };

  return (
    <section
      ref={scope}
      onMouseMove={handleMouseMove}
      className="relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-white text-center dark:bg-neutral-950"
    >
      <div className="pointer-events-none relative flex flex-col gap-4 px-4">
        <h2 className="text-5xl font-bold tracking-tighter text-black sm:text-7xl dark:text-white">
          Feel the <span className="text-red-500">Speed</span>
        </h2>
        <p className="max-w-xl text-lg text-neutral-800 dark:text-neutral-400">
          Move your cursor around to reveal the collection.
        </p>
      </div>
    </section>
  );
};
Mouse Trailer

Feel the Speed
