"use client";

import React, { useState, useCallback } from "react";
import Image from "next/image";
import { motion, AnimatePresence } from "framer-motion";

interface Props {
  src: string;
  alt: string;
  width: number;
  height: number;
  className?: string;
  style?: React.CSSProperties;
  priority?: boolean;
}

export function ImageWithTooltip({ src, alt, width, height, className, style, priority }: Props) {
  const [pos, setPos] = useState<{ x: number; y: number } | null>(null);

  const timerRef = React.useRef<NodeJS.Timeout | null>(null);

  const handleMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    if (timerRef.current) clearTimeout(timerRef.current);
    
    setPos((prev) => (prev !== null ? null : prev));

    timerRef.current = setTimeout(() => {
      setPos({ x, y });
    }, 1000);
  }, []);

  const handleMouseLeave = useCallback(() => {
    if (timerRef.current) clearTimeout(timerRef.current);
    setPos(null);
  }, []);

  return (
    <div
      className="relative"
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
    >
      <Image
        src={src}
        alt={alt}
        width={width}
        height={height}
        className={className}
        style={style}
        priority={priority}
      />
      <AnimatePresence>
        {pos && alt && (
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.95 }}
            transition={{ duration: 0.12 }}
            style={{
              position: "absolute",
              left: pos.x,
              top: pos.y,
              transform: "translate(-50%, calc(-100% - 8px))",
              pointerEvents: "none",
              zIndex: 100,
              whiteSpace: "nowrap",
            }}
            className="rounded border border-black bg-white px-3 py-1.5 text-sm font-semibold text-black shadow-sm"
          >
            {alt}
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}