"use client";

import Link from "next/link";
import { ReactNode, useEffect, useRef, useState } from "react";

export interface ActionMenuItem {
  label: string;
  href?: string;
  onClick?: () => void;
  tone?: "default" | "danger" | "primary";
  divider?: boolean;
}

export function ActionMenu({
  items,
  align = "end",
  widthClass = "min-w-[13rem]",
  trigger,
}: {
  items: ActionMenuItem[];
  align?: "start" | "end";
  widthClass?: string;
  trigger?: ReactNode;
}) {
  const [open, setOpen] = useState(false);
  const [pos, setPos] = useState({ top: 0, left: 0 });
  const btnRef = useRef<HTMLButtonElement>(null);
  const menuRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!open) return;
    const close = () => setOpen(false);
    window.addEventListener("click", close);
    window.addEventListener("scroll", close, true);
    window.addEventListener("resize", close);
    return () => {
      window.removeEventListener("click", close);
      window.removeEventListener("scroll", close, true);
      window.removeEventListener("resize", close);
    };
  }, [open]);

  useEffect(() => {
    if (!open || !menuRef.current) return;
    const menu = menuRef.current;
    const rect = menu.getBoundingClientRect();
    const pad = 8;
    let nextLeft = pos.left;
    let nextTop = pos.top;
    if (rect.right > window.innerWidth - pad) {
      nextLeft = Math.max(pad, window.innerWidth - rect.width - pad);
    }
    if (rect.bottom > window.innerHeight - pad) {
      nextTop = Math.max(pad, pos.top - rect.height - 8);
    }
    if (nextLeft !== pos.left || nextTop !== pos.top) {
      setPos({ top: nextTop, left: nextLeft });
    }
  }, [open, pos.left, pos.top, items.length]);

  const toggle = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (btnRef.current) {
      const rect = btnRef.current.getBoundingClientRect();
      const estimatedWidth = 224;
      setPos({
        top: rect.bottom + 4,
        left:
          align === "end"
            ? Math.max(8, rect.right - estimatedWidth)
            : Math.max(8, rect.left),
      });
    }
    setOpen((v) => !v);
  };

  const toneClass = (tone?: ActionMenuItem["tone"]) => {
    if (tone === "danger") return "text-red-600 hover:bg-red-50";
    if (tone === "primary") return "font-semibold text-primary hover:bg-slate-50";
    return "hover:bg-slate-50";
  };

  return (
    <>
      <button
        ref={btnRef}
        type="button"
        className="rounded-lg border px-2 py-1 text-xs text-[var(--muted)] hover:bg-slate-50 hover:text-foreground"
        onClick={toggle}
        aria-label="عملیات"
        aria-expanded={open}
      >
        {trigger ?? "⚙"}
      </button>
      {open ? (
        <div
          ref={menuRef}
          className={`fixed z-50 rounded-xl border border-[var(--border)] bg-white py-1 text-xs shadow-lg ${widthClass}`}
          style={{ top: pos.top, left: pos.left }}
          onClick={(e) => e.stopPropagation()}
        >
          {items.map((item) => (
            <div key={item.label}>
              {item.divider ? <div className="my-1 border-t border-[var(--border)]" /> : null}
              {item.href ? (
                <Link
                  href={item.href}
                  className={`block px-3 py-2 text-right ${toneClass(item.tone)}`}
                  onClick={() => setOpen(false)}
                >
                  {item.label}
                </Link>
              ) : (
                <button
                  type="button"
                  className={`block w-full px-3 py-2 text-right ${toneClass(item.tone)}`}
                  onClick={() => {
                    setOpen(false);
                    item.onClick?.();
                  }}
                >
                  {item.label}
                </button>
              )}
            </div>
          ))}
        </div>
      ) : null}
    </>
  );
}