import { useEffect } from 'react';

import { Icon } from '@/app/Icon';
import type { MessageAction } from '@/lib/messages/actions';

interface MenuItem {
  action: MessageAction;
  label: string;
  icon: string;
  danger?: boolean;
}

const ITEMS: Record<MessageAction, MenuItem> = {
  quote: { action: 'quote', label: '引用', icon: 'format_quote' },
  copy: { action: 'copy', label: '复制', icon: 'content_copy' },
  favorite: { action: 'favorite', label: '收藏', icon: 'inventory_2' },
  forward: { action: 'forward', label: '转发', icon: 'reply' },
  recall: { action: 'recall', label: '撤回', icon: 'undo' },
  select: { action: 'select', label: '多选', icon: 'select_all' },
  delete: { action: 'delete', label: '删除', icon: 'delete_outline', danger: true },
};

interface MessageContextMenuProps {
  x: number;
  y: number;
  actions: MessageAction[];
  onAction: (action: MessageAction) => void;
  onClose: () => void;
}

/** README §3.5: 180px popup, divider before the destructive-leaning tail (recall/delete). */
export function MessageContextMenu({ x, y, actions, onAction, onClose }: MessageContextMenuProps) {
  useEffect(() => {
    const handler = () => onClose();
    window.addEventListener('click', handler);
    window.addEventListener('scroll', handler, true);
    return () => {
      window.removeEventListener('click', handler);
      window.removeEventListener('scroll', handler, true);
    };
  }, [onClose]);

  const leading = actions.filter((a) => a !== 'recall' && a !== 'delete');
  const trailing = actions.filter((a) => a === 'recall' || a === 'delete');

  return (
    <div
      style={{ left: x, top: y }}
      className="fixed z-50 w-[180px] rounded-[10px] border border-border-panel bg-white p-1.5 shadow-menu"
      onClick={(e) => e.stopPropagation()}
    >
      {leading.map((action) => {
        const item = ITEMS[action];
        return (
          <button
            key={action}
            type="button"
            onClick={() => onAction(action)}
            className="flex w-full items-center gap-2.5 rounded-md px-2.5 py-2 text-left text-sm text-text-secondary hover:bg-surface-rail"
          >
            <Icon name={item.icon} className="text-[18px]" />
            {item.label}
          </button>
        );
      })}
      {trailing.length ? <div className="my-1 h-px bg-list-item" /> : null}
      {trailing.map((action) => {
        const item = ITEMS[action];
        return (
          <button
            key={action}
            type="button"
            onClick={() => onAction(action)}
            className={`flex w-full items-center gap-2.5 rounded-md px-2.5 py-2 text-left text-sm hover:bg-surface-rail ${
              item.danger ? 'text-danger-text' : 'text-text-secondary'
            }`}
          >
            <Icon name={item.icon} className="text-[18px]" />
            {item.label}
          </button>
        );
      })}
    </div>
  );
}