import React, { useState, useRef, useEffect } from "react";
import {
  useFloating,
  autoUpdate,
  offset,
  flip,
  shift,
  useClick,
  useDismiss,
  useRole,
  useInteractions,
  FloatingPortal,
  FloatingFocusManager,
} from "@floating-ui/react";
import { FiMoreVertical } from "react-icons/fi";

interface ActionItem {
  id: string;
  label: string;
  icon: React.ComponentType<{ size?: number; className?: string }>;
  onClick: () => void;
  href?: string;
  className?: string;
  disabled?: boolean;
}

interface ActionDropdownProps {
  actions: ActionItem[];
  buttonClassName?: string;
  menuClassName?: string;
  align?: "left" | "right";
}

const ActionDropdown: React.FC<ActionDropdownProps> = ({
  actions,
  buttonClassName = "",
  menuClassName = "",
  align = "right",
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const [activeIndex, setActiveIndex] = useState<number | null>(null);

  const { refs, floatingStyles, context } = useFloating({
    open: isOpen,
    onOpenChange: setIsOpen,
    middleware: [
      offset(4),
      flip({
        fallbackAxisSideDirection: "end",
      }),
      shift({ padding: 8 }),
    ],
    whileElementsMounted: autoUpdate,
    placement: align === "right" ? "bottom-end" : "bottom-start",
  });

  const click = useClick(context);
  const dismiss = useDismiss(context);
  const role = useRole(context);

  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
    [click, dismiss, role]
  );

  // Handle keyboard navigation
  useEffect(() => {
    if (!isOpen) {
      setActiveIndex(null);
      return;
    }

    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "ArrowDown") {
        event.preventDefault();
        setActiveIndex((prev) => {
          const nextIndex = prev === null ? 0 : prev + 1;
          return nextIndex >= actions.length ? 0 : nextIndex;
        });
      } else if (event.key === "ArrowUp") {
        event.preventDefault();
        setActiveIndex((prev) => {
          const nextIndex = prev === null ? actions.length - 1 : prev - 1;
          return nextIndex < 0 ? actions.length - 1 : nextIndex;
        });
      } else if (event.key === "Enter" && activeIndex !== null) {
        event.preventDefault();
        const action = actions[activeIndex];
        if (action && !action.disabled) {
          action.onClick();
          setIsOpen(false);
        }
      }
    };

    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [isOpen, activeIndex, actions]);

  return (
    <>
      <button
        ref={refs.setReference}
        className={`inline-flex w-full justify-center rounded-md p-1 text-sm font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-opacity-75 transition-colors ${buttonClassName}`}
        {...getReferenceProps()}
      >
        <FiMoreVertical size={20} aria-hidden="true" />
      </button>

      {isOpen && (
        <FloatingPortal>
          <FloatingFocusManager context={context} modal={false}>
            <div
              ref={refs.setFloating}
              style={floatingStyles}
              className={`z-50 w-40 rounded-lg bg-white shadow-lg border border-gray-200 focus:outline-none ${menuClassName}`}
              {...getFloatingProps()}
            >
              <div className="py-1">
                <div className="px-4 py-2 text-xs font-medium text-gray-500 border-b border-gray-100">
                  Actions
                </div>
                {actions.map((action, index) => {
                  const isActive = activeIndex === index;
                  const baseClassName = `group flex w-full items-center px-4 py-2 text-sm transition-colors cursor-pointer ${
                    action.className || "text-gray-700"
                  }`;

                  const activeClassName = isActive
                    ? action.className?.includes("text-red")
                      ? "bg-red-50"
                      : "bg-gray-50"
                    : "";

                  const disabledClassName = action.disabled
                    ? "opacity-50 cursor-not-allowed"
                    : "";

                  const handleClick = () => {
                    if (action.disabled) return;
                    action.onClick();
                    setIsOpen(false);
                  };

                  const handleMouseEnter = () => {
                    setActiveIndex(index);
                  };

                  if (action.href) {
                    return (
                      <a
                        key={action.id}
                        href={action.href}
                        className={`${baseClassName} ${activeClassName} ${disabledClassName}`}
                        onClick={(e) => {
                          if (action.disabled) {
                            e.preventDefault();
                            return;
                          }
                          handleClick();
                        }}
                        onMouseEnter={handleMouseEnter}
                        {...getItemProps({
                          onClick: handleClick,
                        })}
                      >
                        <action.icon size={16} className="mr-2" />
                        {action.label}
                      </a>
                    );
                  }

                  return (
                    <button
                      key={action.id}
                      className={`${baseClassName} ${activeClassName} ${disabledClassName}`}
                      onClick={handleClick}
                      onMouseEnter={handleMouseEnter}
                      disabled={action.disabled}
                      {...getItemProps({
                        onClick: handleClick,
                      })}
                    >
                      <action.icon size={16} className="mr-2" />
                      {action.label}
                    </button>
                  );
                })}
              </div>
            </div>
          </FloatingFocusManager>
        </FloatingPortal>
      )}
    </>
  );
};

export default ActionDropdown;