import { useState, useEffect } from 'react';

interface VideoPreviewTooltipProps {
  thumbnail?: string;
  embedUrl?: string;
  isValid?: boolean;
  title: string;
  position: { x: number; y: number };
  visible: boolean;
}

export default function VideoPreviewTooltip({
  thumbnail,
  embedUrl,
  isValid = false,
  title,
  position,
  visible,
}: VideoPreviewTooltipProps) {
  const [showVideo, setShowVideo] = useState(false);

  useEffect(() => {
    if (visible && isValid) {
      // Delay showing video to avoid flickering on quick hovers
      const timer = setTimeout(() => {
        setShowVideo(true);
      }, 300);
      return () => clearTimeout(timer);
    } else {
      setShowVideo(false);
    }
  }, [visible, isValid]);

  if (!visible || !isValid) {
    return null;
  }

  // Calculate position to keep tooltip on screen
  const tooltipStyle: React.CSSProperties = {
    position: 'fixed',
    left: `${Math.min(position.x + 20, window.innerWidth - 360)}px`,
    top: `${Math.min(position.y + 20, window.innerHeight - 250)}px`,
    zIndex: 10000,
  };

  return (
    <div
      style={tooltipStyle}
      className="bg-white dark:bg-slate-800 rounded-lg shadow-2xl border-2 border-emerald-500 dark:border-emerald-400 overflow-hidden animate-in fade-in slide-in-from-bottom-2 duration-200"
    >
      <div className="w-80 max-w-sm">
        {/* Video Preview */}
        <div className="relative bg-black aspect-video">
          {showVideo && embedUrl ? (
            <iframe
              src={`${embedUrl}?autoplay=1&mute=1&controls=0&showinfo=0&rel=0`}
              className="w-full h-full"
              frameBorder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
              title={title}
            />
          ) : thumbnail ? (
            <img
              src={thumbnail}
              alt={title}
              className="w-full h-full object-cover"
            />
          ) : (
            <div className="w-full h-full flex items-center justify-center text-white">
              <span className="text-4xl">🎬</span>
            </div>
          )}

          {/* Play overlay when showing thumbnail */}
          {!showVideo && thumbnail && (
            <div className="absolute inset-0 flex items-center justify-center bg-black/30">
              <div className="w-16 h-16 bg-white/90 rounded-full flex items-center justify-center">
                <svg
                  className="w-8 h-8 text-emerald-600 ml-1"
                  fill="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path d="M8 5v14l11-7z" />
                </svg>
              </div>
            </div>
          )}
        </div>

        {/* Project Title */}
        <div className="p-3 bg-gradient-to-r from-emerald-500 to-blue-500">
          <p className="text-sm font-semibold text-white line-clamp-2">
            {title}
          </p>
        </div>

        {/* Hover instruction */}
        <div className="px-3 py-2 bg-slate-50 dark:bg-slate-900 border-t border-slate-200 dark:border-slate-700">
          <p className="text-xs text-slate-600 dark:text-slate-400 text-center">
            Haz clic en el marcador para ver más detalles
          </p>
        </div>
      </div>
    </div>
  );
}