import {
  useEffect,
  useRef,
  useState,
  type ReactNode,
} from "react";
import { cn } from "../../lib/cn";
import { Button, type ButtonTone } from "../button";

export type MenuItem = {
  disabled?: boolean;
  label: string;
  leadingIcon?: ReactNode;
  onSelect?: () => void;
  tone?: "default" | "destructive";
};

export function Menu({
  className,
  items,
}: {
  className?: string;
  items: MenuItem[];
}) {
  return (
    <div className={cn("flex flex-col gap-1 p-2", className)} role="menu">
      {items.map((item) => (
        <button
          aria-disabled={item.disabled}
          className={cn(
            "flex w-full items-center gap-3 rounded-[var(--uhuru-radius-control)] px-3 py-2.5 text-left text-sm transition",
            item.disabled
              ? "cursor-not-allowed opacity-50"
              : item.tone === "destructive"
                ? "text-[var(--uhuru-error-text)] hover:bg-[var(--uhuru-error-bg)]"
                : "text-[var(--uhuru-text-primary)] hover:bg-[var(--uhuru-surface-muted)]",
          )}
          disabled={item.disabled}
          key={item.label}
          onClick={() => {
            if (!item.disabled) {
              item.onSelect?.();
            }
          }}
          role="menuitem"
          type="button"
        >
          <span className="grid h-4.5 w-4.5 shrink-0 place-items-center [&_svg]:h-4.5 [&_svg]:w-4.5">
            {item.leadingIcon ?? <span className="h-1.5 w-1.5 rounded-full bg-current opacity-45" />}
          </span>
          <span>{item.label}</span>
        </button>
      ))}
    </div>
  );
}

export function DropdownMenu({
  align = "left",
  className,
  items,
  label,
  tone = "secondary",
}: {
  align?: "center" | "left" | "right";
  className?: string;
  items: MenuItem[];
  label: string;
  tone?: Exclude<ButtonTone, "ghost">;
}) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [open, setOpen] = useState(false);
  const menuPlacement = align === "center" ? "left-1/2 -translate-x-1/2" : align === "right" ? "right-0" : "left-0";

  useEffect(() => {
    function handlePointerDown(event: PointerEvent) {
      if (!containerRef.current?.contains(event.target as Node)) {
        setOpen(false);
      }
    }

    function handleEscape(event: KeyboardEvent) {
      if (event.key === "Escape") {
        setOpen(false);
      }
    }

    window.addEventListener("pointerdown", handlePointerDown);
    window.addEventListener("keydown", handleEscape);
    return () => {
      window.removeEventListener("pointerdown", handlePointerDown);
      window.removeEventListener("keydown", handleEscape);
    };
  }, []);

  return (
    <div className={cn("relative inline-flex max-w-full overflow-visible", className)} ref={containerRef}>
      <Button
        aria-expanded={open}
        aria-haspopup="menu"
        onClick={() => setOpen((current) => !current)}
        tone={tone}
      >
        {label}
      </Button>

      <div
        className={cn(
          "absolute top-[calc(100%+0.35rem)] z-[60] min-w-56 origin-top overflow-hidden rounded-[min(var(--uhuru-radius-lg),1rem)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] shadow-[var(--uhuru-shadow-md)] transition-[max-height,opacity,transform] duration-220 ease-out",
          menuPlacement,
          open ? "pointer-events-auto max-h-80 translate-y-0 opacity-100" : "pointer-events-none max-h-0 -translate-y-2 opacity-0",
        )}
      >
        <Menu
          items={items.map((item) => ({
            ...item,
            onSelect: () => {
              item.onSelect?.();
              setOpen(false);
            },
          }))}
        />
      </div>
    </div>
  );
}