import { Link } from 'react-router-dom';

import type { LowStockItem } from '../../api/dashboardApi';
import { formatQuantity } from '../../utils/formatters';
import { Card } from '../ui/Card';
import { EmptyState } from '../ui/EmptyState';

type LowStockTableProps = {
  items: LowStockItem[];
};

export function LowStockTable({ items }: LowStockTableProps) {
  return (
    <Card className="border-amber-200 p-4">
      <div className="flex items-center justify-between gap-4">
        <h2 className="text-base font-semibold text-slate-900">Низкие остатки</h2>
        <Link to="/warehouse/stock-balances" className="text-sm font-medium text-slate-600 hover:text-slate-950">
          Остатки
        </Link>
      </div>

      {items.length === 0 ? (
        <EmptyState title="Низких остатков нет" description="Текущие остатки выше порога панели управления." />
      ) : (
        <div className="mt-4 overflow-x-auto">
          <table className="min-w-full divide-y divide-slate-200 text-sm">
            <thead className="bg-slate-100">
              <tr>
                <th className="px-4 py-3 text-left font-semibold text-slate-700">Склад</th>
                <th className="px-4 py-3 text-left font-semibold text-slate-700">Товар</th>
                <th className="px-4 py-3 text-right font-semibold text-slate-700">Количество</th>
                <th className="px-4 py-3 text-right font-semibold text-slate-700">Порог</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-200">
              {items.map((item) => (
                <tr key={`${item.warehouseId}-${item.productId}`} className="bg-amber-50/40">
                  <td className="px-4 py-3 text-slate-700">{item.warehouseCode} / {item.warehouseName}</td>
                  <td className="px-4 py-3 text-slate-700">{item.productSku} / {item.productName}</td>
                  <td className="px-4 py-3 text-right text-slate-700">
                    {formatQuantity(item.quantityOnHand)} {item.unit}
                  </td>
                  <td className="px-4 py-3 text-right text-slate-700">{formatQuantity(item.threshold)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </Card>
  );
}