// ============================================================
// جدول «اقلام ثبت‌شده در این نشست» برای موجودی اولیه
// بازخورد دیداری برای جلوگیری از ثبت تکراری — فقط حافظه‌ی همان صفحه.
// ============================================================

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

export interface PurchaseSessionEntry {
  material: string;
  brand: string;
  specs: Record<string, string>;
  qty: number;
  unitLabel: string;
  time: string; // HH:MM آماده‌ی نمایش
  whName: string;
}

interface PurchaseSessionLogProps {
  entries: PurchaseSessionEntry[];
  onClear: () => void;
}

export function PurchaseSessionLog({ entries, onClear }: PurchaseSessionLogProps) {
  if (!entries.length) return null;

  return (
    <div className="rounded-xl border border-line bg-panel p-3 sm:p-4">
      <div className="mb-2 flex items-center justify-between gap-2 border-b border-line pb-2">
        <h3 className="text-[13px] font-bold">
          🧾 اقلام ثبت‌شده در این نشست <span className="text-muted font-normal">({faNum(entries.length)} قلم)</span>
        </h3>
        <button
          type="button"
          onClick={onClear}
          className="rounded-lg border border-line px-2.5 py-1.5 text-[11.5px] text-muted hover:bg-bg"
        >
          پاک کردن لیست
        </button>
      </div>

      {/* دسکتاپ: جدول فشرده */}
      <div className="hidden sm:block">
        <div className="max-h-56 overflow-y-auto rounded-lg border border-line">
          <table className="w-full text-[12px]">
            <thead className="sticky top-0 bg-panel text-right text-muted shadow-2xs">
              <tr>
                <th className="py-2 px-3">متریال</th>
                <th className="py-2 px-3">برند</th>
                <th className="py-2 px-3">مشخصه‌ها</th>
                <th className="py-2 px-3">تعداد</th>
                <th className="py-2 px-3">ساعت</th>
                <th className="py-2 px-3">انبار</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-line/40">
              {[...entries].reverse().map((e, i) => (
                <tr key={i}>
                  <td className="py-1.5 px-3 font-semibold text-ink">{e.material}</td>
                  <td className="py-1.5 px-3 text-muted">{e.brand || "—"}</td>
                  <td className="py-1.5 px-3 text-muted">{specsLine(e.specs)}</td>
                  <td className="py-1.5 px-3 font-bold">{faNum(e.qty)} <span className="font-normal text-muted">{e.unitLabel}</span></td>
                  <td className="py-1.5 px-3 text-muted">{e.time}</td>
                  <td className="py-1.5 px-3 text-muted">{e.whName}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* موبایل: ردیف‌های فشرده */}
      <div className="sm:hidden max-h-64 space-y-1.5 overflow-y-auto">
        {[...entries].reverse().map((e, i) => (
          <div key={i} className="rounded-lg border border-line/70 bg-bg/40 px-3 py-2 text-[12px]">
            <div className="flex items-center justify-between gap-2">
              <span className="min-w-0 truncate font-bold text-ink">{e.material}</span>
              <span className="shrink-0 font-bold">{faNum(e.qty)} <span className="font-normal text-muted">{e.unitLabel}</span></span>
            </div>
            <div className="mt-0.5 text-[11px] text-muted">
              {e.brand || "بدون برند"} · {specsLine(e.specs)} · {e.time} · {e.whName}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}