ERP/frontend/src/pages/Inventory/change/StockTable.tsx

// ============================================================
// هسته‌ی نمایش مشترک لیست متریال‌های انبار برای بخش‌های لیست‌محور
// (برداشت / ضایعات / اتلاف / مفقودی / انتقال داخلی / شمارش موجودی)
//
// دسکتاپ (sm+): جدول فشرده با هدر چسبان و ارتفاع بهینه.
// موبایل (<640px): کارت‌های عمودی لمسی با فیلد بزرگ ورود مقدار.
// هر بخش ستون‌های نمایش یکسان را از اینجا می‌گیرد و فقط رفتار ورودی
// (تعداد ساده یا شمارش‌شده) را با isCount انتخاب می‌کند.
// ============================================================

import { faNum } from "../../../lib/formatters";

export interface StockRecord {
  id: string;
  material: { id: string; name: string };
  brand: { id: string; name: string } | null;
  unit: { id: number; code: string; name_fa: string | null } | null;
  quantity_number: number;
  specs: Record<string, string>;
}

export interface RowDraft { key: string; qty: string; note: string; }

export function specsLine(specs: Record<string, string> | undefined): string {
  return (
    Object.entries(specs || {})
      .map(([k, v]) => `${k}: ${v}`)
      .join(" · ") || "—"
  );
}

interface StockTableProps {
  records: StockRecord[];
  rows: RowDraft[];
  setRows: (r: RowDraft[]) => void;
  /** شمارش موجودی: placeholder «شمارش‌شده» و پیش‌نمایش مقدار فعلی هنگام خالی بودن */
  isCount?: boolean;
  /** نمایش ستون متریال در دسکتاپ — وقتی فیلتر نام فعال است می‌توان پنهان کرد */
  showMaterial?: boolean;
  emptyMsg: string;
  unitNameFn: (id: number | null | undefined) => string;
}

export function StockTable({ records, rows, setRows, isCount = false, showMaterial = true, emptyMsg, unitNameFn }: StockTableProps) {
  if (emptyMsg) {
    return <div className="rounded-lg border border-dashed border-line p-4 text-[12.5px] text-muted">{emptyMsg}</div>;
  }

  const qtyPlaceholder = isCount ? "شمارش‌شده" : "۰";

  return (
    <>
      {/* دسکتاپ: جدول فشرده با هدر چسبان */}
      <div className="hidden sm:block">
        <div className="max-h-[min(560px,calc(100vh-320px))] overflow-y-auto overflow-x-auto rounded-lg border border-line">
          <table className="w-full text-[12.5px] min-w-[560px]">
            <thead className="sticky top-0 z-10 border-b border-line bg-panel shadow-2xs">
              <tr className="text-right text-muted">
                {showMaterial && <th className="py-2.5 px-3">متریال</th>}
                <th className="py-2.5 px-3">مشخصه‌ها</th>
                <th className="py-2.5 px-3">برند</th>
                <th className="py-2.5 px-3">واحد</th>
                <th className="py-2.5 px-3">موجودی فعلی</th>
                <th className="py-2.5 px-3">{isCount ? "شمارش‌شده" : "تعداد"}</th>
                <th className="py-2.5 px-3">یادداشت</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-line/40">
              {records.map((r, i) => (
                <tr key={r.id} className="hover:bg-bg/40 transition-colors">
                  {showMaterial && (
                    <td className="py-2 px-3 font-bold text-ink">{r.material?.name || "—"}</td>
                  )}
                  <td className="py-2 px-3 text-muted">{specsLine(r.specs)}</td>
                  <td className="py-2 px-3">{r.brand?.name || "—"}</td>
                  <td className="py-2 px-3">{unitNameFn(r.unit?.id)}</td>
                  <td className="py-2 px-3 font-bold text-ink">{faNum(r.quantity_number)}</td>
                  <td className="py-2 px-3">
                    <input
                      type="text"
                      inputMode="decimal"
                      pattern="[0-9]*"
                      className="h-8 w-24 rounded-lg border border-line bg-panel px-2 text-sm ltr focus:border-accent"
                      placeholder={qtyPlaceholder}
                      value={isCount && rows[i]?.qty === "" ? String(r.quantity_number) : (rows[i]?.qty || "")}
                      onChange={(e) => setRows(rows.map((x, xi) => (xi === i ? { ...x, qty: e.target.value } : x)))}
                    />
                  </td>
                  <td className="py-2 px-3">
                    <input
                      type="text"
                      className="h-8 w-32 rounded-lg border border-line bg-panel px-2 text-sm focus:border-accent"
                      placeholder="توضیح (اختیاری)"
                      value={rows[i]?.note || ""}
                      onChange={(e) => setRows(rows.map((x, xi) => (xi === i ? { ...x, note: e.target.value } : x)))}
                    />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="mt-2 flex items-center justify-between text-[11px] text-muted">
          <span>ستون «موجودی فعلی» مقدار موجود هر رکورد است. برای هر ردیف تعداد و یادداشت وارد کنید.</span>
          <span>{faNum(records.length)} قلم کالا</span>
        </div>
      </div>

      {/* موبایل: کارت‌های عمودی لمسی */}
      <div className="sm:hidden">
        <div className="max-h-[min(560px,calc(100vh-320px))] space-y-2 overflow-y-auto pl-1">
          {records.map((r, i) => (
            <div key={r.id} className="rounded-xl border border-line bg-panel p-3">
              <div className="flex items-start justify-between gap-2">
                <div className="min-w-0">
                  <div className="truncate text-[13.5px] font-bold text-ink">{r.material?.name || "—"}</div>
                  <div className="mt-0.5 text-[11.5px] text-muted">
                    {r.brand?.name || "بدون برند"} · {unitNameFn(r.unit?.id)}
                  </div>
                  {r.specs && Object.keys(r.specs).length > 0 && (
                    <div className="mt-1 text-[11px] leading-4 text-muted">{specsLine(r.specs)}</div>
                  )}
                </div>
                <div className="shrink-0 rounded-lg bg-bg px-2 py-1 text-center">
                  <div className="text-[10px] text-muted">موجودی</div>
                  <div className="text-[14px] font-black text-ink">{faNum(r.quantity_number)}</div>
                </div>
              </div>
              <div className="mt-2 grid grid-cols-[1fr_1.2fr] gap-2">
                <input
                  type="text"
                  inputMode="decimal"
                  pattern="[0-9]*"
                  className="h-11 w-full rounded-lg border border-line bg-panel px-3 text-[15px] font-bold ltr focus:border-accent"
                  placeholder={qtyPlaceholder}
                  value={isCount && rows[i]?.qty === "" ? String(r.quantity_number) : (rows[i]?.qty || "")}
                  onChange={(e) => setRows(rows.map((x, xi) => (xi === i ? { ...x, qty: e.target.value } : x)))}
                />
                <input
                  type="text"
                  className="h-11 w-full rounded-lg border border-line bg-panel px-3 text-[13px] focus:border-accent"
                  placeholder="توضیح (اختیاری)"
                  value={rows[i]?.note || ""}
                  onChange={(e) => setRows(rows.map((x, xi) => (xi === i ? { ...x, note: e.target.value } : x)))}
                />
              </div>
            </div>
          ))}
        </div>
        <div className="mt-2 text-[11px] text-muted">{faNum(records.length)} قلم کالا — برای هر قلم، مقدار را وارد کنید.</div>
      </div>
    </>
  );
}