import React, { useLayoutEffect, useRef, useState } from 'react';
import { EllipsisHorizontalCircleIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/24/outline';
import Portal from '../ui/Portal';
import type { InventoryItem } from '../../hooks/useInventory';

interface Props {
  item: InventoryItem;
  onEdit: (item: InventoryItem) => void;
  onDelete: (item: InventoryItem) => void;
}

const MENU_W = 160;

/**
 * «عملیات» trigger + dropdown — mirrors the tauri InventoryActionsPopover.
 * Rendered through a Portal with fixed positioning so it is never clipped by the
 * table container's `overflow: hidden`.
 */
export default function InventoryActionsMenu({ item, onEdit, onDelete }: Props) {
  const [open, setOpen] = useState(false);
  const [pos, setPos] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
  const triggerRef = useRef<HTMLButtonElement>(null);

  useLayoutEffect(() => {
    if (!open || !triggerRef.current) return;
    const place = () => {
      const r = triggerRef.current!.getBoundingClientRect();
      // align the menu's right edge to the trigger's right edge (RTL-friendly)
      const left = Math.max(8, Math.min(r.right - MENU_W, window.innerWidth - MENU_W - 8));
      setPos({ top: r.bottom + 4, left });
    };
    place();
    window.addEventListener('scroll', place, true);
    window.addEventListener('resize', place);
    return () => {
      window.removeEventListener('scroll', place, true);
      window.removeEventListener('resize', place);
    };
  }, [open]);

  return (
    <>
      <button
        ref={triggerRef}
        type="button"
        onClick={() => setOpen((v) => !v)}
        style={{
          display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer',
          borderRadius: 6, padding: '4px 8px', background: 'none',
          color: '#5559ce', fontSize: 12, fontWeight: 500,
        }}
      >
        <EllipsisHorizontalCircleIcon style={{ width: 18, height: 18 }} />
        عملیات
      </button>

      {open && (
        <Portal>
          <div onClick={() => setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 60 }} />
          <div
            role="menu"
            style={{
              position: 'fixed', top: pos.top, left: pos.left, zIndex: 61,
              width: MENU_W, background: 'var(--surface)', border: '1px solid var(--border)',
              borderRadius: 12, boxShadow: 'var(--shadow-lg)', overflow: 'hidden',
            }}
          >
            <button
              type="button"
              role="menuitem"
              onClick={() => { setOpen(false); onEdit(item); }}
              style={{
                display: 'flex', alignItems: 'center', gap: 8, width: '100%',
                padding: '12px 16px', background: 'var(--primary-soft)', border: 'none',
                cursor: 'pointer', fontSize: 14, fontWeight: 600, color: 'var(--text)',
              }}
            >
              <PencilSquareIcon style={{ width: 20, height: 20 }} />
              ویرایش
            </button>
            <button
              type="button"
              role="menuitem"
              onClick={() => { setOpen(false); onDelete(item); }}
              style={{
                display: 'flex', alignItems: 'center', gap: 8, width: '100%',
                padding: '12px 16px', background: 'transparent', border: 'none',
                cursor: 'pointer', fontSize: 14, color: 'var(--danger)',
              }}
            >
              <TrashIcon style={{ width: 20, height: 20 }} />
              حذف
            </button>
          </div>
        </Portal>
      )}
    </>
  );
}