"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 };