// ============================================================
// ContextMenu — 全应用共享右键菜单组件
//
// 设计原则：
//   - 纯 UI 封装，不包含任何业务逻辑
//   - 消费者通过 items 数组声明菜单结构
//   - "在文件夹中打开"等通用操作统一放在菜单底部（分隔线以下）
//
// 修复 AntD Select 右键冲突：
//   浏览器右击先发 mousedown(button=2) 再发 contextmenu。
//   Select 在 mousedown 阶段展开下拉 → Dropdown 在 contextmenu
//   阶段展开右键菜单 → 两个覆盖层同时出现。
//   修复：外层 wrapper 拦截右击 mousedown/mouseup 阻止其到达 Select。
//
// 用法：
//   import { ContextMenu, type ContextMenuItem } from '@/shared/components/ContextMenu';
//
//   const items: ContextMenuItem[] = [
//       { key: 'new', label: '新建项目', icon: <PlusOutlined />, onClick: handleNew },
//       'divider',
//       { key: 'open', label: '在文件夹中打开', icon: <FolderOpenOutlined />, onClick: handleOpen },
//   ];
//
//   <ContextMenu items={items}>
//       <Button>右键点我</Button>
//   </ContextMenu>
// ============================================================

import type { ReactNode } from 'react';
import { Dropdown } from 'antd';
import type { MenuProps } from 'antd';
import { useTheme } from '@/app/providers/ThemeProvider';

// ── 类型定义 ──

export interface ContextMenuItem {
    /** 唯一标识 */
    key: string;
    /** 菜单项文本 */
    label: string;
    /** 左侧图标（可选，传 AntD Icon 组件） */
    icon?: ReactNode;
    /** 点击回调 */
    onClick?: () => void;
    /** 是否禁用 */
    disabled?: boolean;
    /** 危险操作（红色） */
    danger?: boolean;
    /** 快捷键提示（仅展示，不绑定实际快捷键，显示在菜单项右侧） */
    shortcut?: string;
}

/** 菜单项数组：普通项 + 分隔线 */
export type ContextMenuItems = (ContextMenuItem | 'divider')[];

// ── Props ──

interface ContextMenuProps {
    /** 菜单项列表，"divider" 表示分隔线 */
    items: ContextMenuItems;
    /** 触发右键菜单的子元素 */
    children: ReactNode;
    /**
     * 是否拦截右击 mousedown/mouseup（阻止事件到达子元素）。
     * 默认 true，适用于 Select/Button 等会响应 mousedown 的组件。
     * 设为 false 适用于 textarea/input 等需要接收右击事件来更新光标位置的场景。
     */
    blockRightClick?: boolean;
}

// ── 组件 ──

export function ContextMenu({ items, children, blockRightClick = true }: ContextMenuProps) {
    const { isDark } = useTheme();

    // 将 ContextMenuItem 转换为 AntD MenuProps['items']
    const menuItems: MenuProps['items'] = items.map((item) => {
        if (item === 'divider') {
            return { type: 'divider' as const };
        }

        // 有快捷键时，label 用 flex 布局：左侧文字 + 右侧快捷键
        const labelNode: ReactNode = item.shortcut
            ? (
                <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
                    <span>{item.label}</span>
                    <span style={{ color: isDark ? '#6E6B90' : '#9CA3AF', fontSize: 12 }}>
                        {item.shortcut}
                    </span>
                </span>
            )
            : item.label;

        return {
            key: item.key,
            label: labelNode,
            icon: item.icon,
            onClick: item.onClick,
            disabled: item.disabled,
            danger: item.danger,
        };
    });

    return (
        <Dropdown menu={{ items: menuItems }} trigger={['contextMenu']}>
            {/* 外层 div 拦截右击 mousedown/mouseup：
                - mousedown(button=2)：stopPropagation 阻止子元素（如 Select）展开
                - mouseup(button=2)：stopPropagation 防止子元素响应
                - contextmenu：preventDefault 阻止浏览器原生菜单，事件仍冒泡给 Dropdown */}
            <div
                onMouseDown={(e) => {
                    if (e.button === 2 && blockRightClick) {
                        e.preventDefault();
                        e.stopPropagation();
                    }
                }}
                onMouseUp={(e) => {
                    if (e.button === 2 && blockRightClick) {
                        e.preventDefault();
                        e.stopPropagation();
                    }
                }}
                onContextMenu={(e) => {
                    e.preventDefault();
                    e.stopPropagation();
                }}
            >
                {children}
            </div>
        </Dropdown>
    );
}

export default ContextMenu;
