"use client";

import * as React from "react";
import * as PopoverPrimitive from "@radix-ui/react-popover";

import { cn } from "@/lib/utils";

function Popover({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
}

function PopoverTrigger({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
}

function PopoverContent({
  className,
  align = "center",
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
  const contentRef = React.useRef<HTMLDivElement>(null);

  React.useEffect(() => {
    const element = contentRef.current;
    if (!element) return;

    const disableAnimations = () => {
      element.style.setProperty("animation", "none", "important");
      element.style.setProperty("transition", "none", "important");
      // Ne pas toucher au transform car il est utilisé pour le positionnement
      element.style.setProperty("opacity", "1", "important");
      element.style.setProperty("will-change", "auto", "important");

      // Supprimer toutes les classes d'animation Tailwind
      const classesToRemove = Array.from(element.classList).filter(
        (cls) =>
          cls.includes("animate") ||
          cls.includes("fade") ||
          cls.includes("zoom") ||
          cls.includes("slide"),
      );
      classesToRemove.forEach((cls) => element.classList.remove(cls));
    };

    // Désactiver immédiatement
    disableAnimations();

    // Observer pour les changements d'attributs
    const observer = new MutationObserver(() => {
      disableAnimations();
    });

    observer.observe(element, {
      attributes: true,
      attributeFilter: ["class", "data-state"],
      subtree: false,
    });

    // Observer pour les changements dans le DOM
    const domObserver = new MutationObserver(() => {
      disableAnimations();
    });

    domObserver.observe(document.body, {
      childList: true,
      subtree: true,
    });

    return () => {
      observer.disconnect();
      domObserver.disconnect();
    };
  }, []);

  return (
    <PopoverPrimitive.Portal>
      <PopoverPrimitive.Content
        ref={contentRef}
        data-slot="popover-content"
        align={align}
        sideOffset={sideOffset}
        className={cn(
          "bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-hidden",
          className,
        )}
        style={
          {
            animation: "none !important",
            transition: "none !important",
            opacity: "1 !important",
          } as React.CSSProperties
        }
        {...props}
      />
    </PopoverPrimitive.Portal>
  );
}

function PopoverAnchor({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
}

export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };