"use client";

import { MoreVertical, X } from "lucide-react";
import { useEffect, useRef, useState } from "react";

interface MoreMenuProps {
  children: React.ReactNode;
}

export function MoreMenu({ children }: MoreMenuProps) {
  const [isOpen, setIsOpen] = useState(false);
  const menuRef = useRef<HTMLDivElement>(null);
  const buttonRef = useRef<HTMLButtonElement>(null);

  // 点击外部关闭菜单
  useEffect(() => {
    if (!isOpen) return;

    const handleClickOutside = (event: MouseEvent) => {
      if (
        menuRef.current &&
        buttonRef.current &&
        !menuRef.current.contains(event.target as Node) &&
        !buttonRef.current.contains(event.target as Node)
      ) {
        setIsOpen(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, [isOpen]);

  return (
    <div className="relative">
      {/* 更多按钮 */}
      <button
        ref={buttonRef}
        className="w-[34px] h-[34px] inline-flex items-center justify-center rounded-full bg-white/15 text-white border border-white/20 backdrop-blur-sm cursor-pointer"
        onClick={() => setIsOpen(!isOpen)}
        aria-label="更多选项"
        title="更多选项"
      >
        {isOpen ? <X size={18} /> : <MoreVertical size={18} />}
      </button>

      {/* 弹出菜单 */}
      {isOpen && (
        <div
          ref={menuRef}
          className="absolute bottom-full right-0 mb-2 bg-zinc-900/95 backdrop-blur-xl border border-white/20 rounded-xl shadow-2xl overflow-hidden animate-in fade-in slide-in-from-bottom-2 duration-200"
          style={{ minWidth: "200px" }}
        >
          <div className="p-2 flex flex-col gap-1">
            {children}
          </div>
        </div>
      )}
    </div>
  );
}

interface MoreMenuItemProps {
  icon: React.ReactNode;
  label: string;
  onClick: () => void;
}

export function MoreMenuItem({ icon, label, onClick }: MoreMenuItemProps) {
  return (
    <button
      className="flex items-center gap-3 px-3 py-2.5 text-white/90 hover:bg-white/10 rounded-lg transition-colors text-left w-full"
      onClick={onClick}
    >
      <span className="flex-shrink-0">{icon}</span>
      <span className="text-sm">{label}</span>
    </button>
  );
}