import React from 'react';
import { PencilSquareIcon, TrashIcon } from '@heroicons/react/24/outline';
import { formatRial, formatNumber } from '../../lib/utils';
import type { InventoryItem } from '../../hooks/useInventory';
import InventoryStatusBadge from './InventoryStatusBadge';
import InventoryActionsMenu from './InventoryActionsMenu';

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

const HEAD = ['نام کالا', 'دسته‌بندی', 'موجودی', 'واحد', 'قیمت', 'وضعیت', 'عملیات'];

/** Consumable-items list: desktop table + mobile card grid (tauri InventoryList). */
export default function InventoryItemsTable({ items, onEdit, onDelete }: Props) {
  return (
    <div style={{ width: '100%' }}>
      {/* Desktop table */}
      <div
        className="inv-desktop"
        style={{ border: '1px solid #E7E7E7', borderRadius: 8, overflow: 'hidden' }}
      >
        <table className="inv-table">
          <thead>
            <tr>{HEAD.map((h) => <th key={h}>{h}</th>)}</tr>
          </thead>
          <tbody>
            {items.map((item) => (
              <tr key={item.uuid}>
                <td style={{ color: 'var(--text-2)' }}>{item.name}</td>
                <td style={{ color: 'var(--text-3)' }}>{item.category ?? '—'}</td>
                <td>{formatNumber(item.stock)}</td>
                <td>{item.unit}</td>
                <td>{formatRial(item.price)}</td>
                <td><InventoryStatusBadge status={item.status} /></td>
                <td><InventoryActionsMenu item={item} onEdit={onEdit} onDelete={onDelete} /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Mobile cards */}
      <ul
        className="inv-mobile"
        style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 16, margin: 0, padding: 0, listStyle: 'none' }}
      >
        {items.map((item) => (
          <li
            key={item.uuid}
            style={{
              padding: 12, background: 'var(--surface)', border: '1px solid var(--border)',
              borderRadius: 8, boxShadow: 'var(--shadow-sm)',
            }}
          >
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
              <span style={{ color: 'var(--text)', fontSize: 14, fontWeight: 600 }}>{item.name}</span>
              <InventoryStatusBadge status={item.status} />
            </div>
            {[
              ['دسته‌بندی:', item.category ?? '—'],
              ['موجودی:', formatNumber(item.stock)],
              ['واحد:', item.unit],
              ['قیمت:', formatRial(item.price)],
            ].map(([label, value], i, arr) => (
              <div key={label}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
                  <span style={{ color: 'var(--text-3)', fontSize: 14 }}>{label}</span>
                  <span style={{ color: 'var(--text-2)', fontSize: 14, fontWeight: 500 }}>{value}</span>
                </div>
                {i < arr.length - 1 && (
                  <div style={{ height: 1, background: 'var(--border)', margin: '8px auto', width: 'calc(100% - 20px)' }} />
                )}
              </div>
            ))}
            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 12 }}>
              <button className="btn sm ghost" aria-label="ویرایش" onClick={() => onEdit(item)} style={{ color: 'var(--text-2)' }}>
                <PencilSquareIcon style={{ width: 16 }} />
              </button>
              <button className="btn sm ghost" aria-label="حذف" onClick={() => onDelete(item)} style={{ color: 'var(--danger)' }}>
                <TrashIcon style={{ width: 16 }} />
              </button>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}