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

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

/** «عملیات» trigger + dropdown — mirrors the tauri InventoryActionsPopover. */
export default function InventoryActionsMenu({ item, onEdit, onDelete }: Props) {
  const [open, setOpen] = useState(false);

  return (
    <div style={{ position: 'relative', display: 'inline-block' }}>
      <button
        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 && (
        <>
          <div
            onClick={() => setOpen(false)}
            style={{ position: 'fixed', inset: 0, zIndex: 30 }}
          />
          <div
            role="menu"
            style={{
              position: 'absolute', top: '100%', insetInlineStart: 0, marginTop: 4, zIndex: 31,
              width: 160, 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>
        </>
      )}
    </div>
  );
}