import { ArrowDown } from "lucide-react";
import { useEffect, useState } from "react";

interface TabloPointerProps {
  show: boolean;
  tabloId: string;
  onDismiss: () => void;
}

export function TabloPointer({ show, tabloId, onDismiss }: TabloPointerProps) {
  const [position, setPosition] = useState<{ top: number; left: number } | null>(null);

  useEffect(() => {
    if (show && tabloId) {
      // Wait a bit for the page to render
      const timer = setTimeout(() => {
        // Find the tablo card element on the page
        const tabloElement = document.querySelector(`[data-tablo-id="${tabloId}"]`);
        if (tabloElement) {
          const rect = tabloElement.getBoundingClientRect();
          // Position the pointer above and centered on the card
          setPosition({
            top: rect.top + window.scrollY - 100,
            left: rect.left + rect.width / 2,
          });

          // Scroll the element into view
          tabloElement.scrollIntoView({ behavior: "smooth", block: "center" });
        }
      }, 800);

      // Auto-dismiss after 6 seconds
      const dismissTimer = setTimeout(() => {
        onDismiss();
      }, 6000);

      return () => {
        clearTimeout(timer);
        clearTimeout(dismissTimer);
      };
    }
  }, [show, tabloId, onDismiss]);

  if (!show || !position) return null;

  return (
    <div
      className="fixed z-[90] pointer-events-none animate-bounce-gentle"
      style={{
        top: `${position.top}px`,
        left: `${position.left}px`,
        transform: "translateX(-50%)",
      }}
    >
      <div className="relative">
        {/* Floating widget */}
        <div className="bg-primary text-primary-foreground px-4 py-3 rounded-xl shadow-2xl border-2 border-primary/20 pointer-events-auto">
          <div className="flex items-center gap-2 whitespace-nowrap">
            <span className="text-sm font-semibold">
              Votre nouveau tablo est prêt ! Cliquez dessus pour l'ouvrir
            </span>
            <button
              onClick={onDismiss}
              className="ml-2 hover:bg-primary-foreground/20 rounded-full p-1 transition-colors"
              aria-label="Fermer"
            >
              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </button>
          </div>
        </div>

        {/* Arrow pointing down */}
        <div className="absolute left-1/2 -translate-x-1/2 top-full mt-1">
          <ArrowDown className="h-8 w-8 text-primary animate-bounce" />
        </div>

        {/* Glow effect */}
        <div className="absolute inset-0 bg-primary/20 blur-xl rounded-xl -z-10" />
      </div>

      <style>{`
        @keyframes bounce-gentle {
          0%, 100% {
            transform: translateX(-50%) translateY(0);
          }
          50% {
            transform: translateX(-50%) translateY(-10px);
          }
        }

        .animate-bounce-gentle {
          animation: bounce-gentle 2s ease-in-out infinite;
        }
      `}</style>
    </div>
  );
}
