// ============================================================
// ویرایشگر مشخصه‌های فنی Key-Value (موجودی اولیه)
// خروجی: jsonb استاندارد {عنوان: مقدار} هم‌خوان با specs_hash بک‌اند.
// مشخصات کاملاً اختیاری است؛ ردیف بدون عنوان دور ریخته می‌شود.
// ============================================================

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

export interface SpecKvRow { key: string; value: string; }

export function specsKvToObject(rows: SpecKvRow[]): Record<string, string> {
  const out: Record<string, string> = {};
  for (const r of rows) {
    const k = r.key.trim();
    if (k) out[k] = r.value.trim();
  }
  return out;
}

interface SpecsKvEditorProps {
  rows: SpecKvRow[];
  onChange: (rows: SpecKvRow[]) => void;
  disabled?: boolean;
}

export function SpecsKvEditor({ rows, onChange, disabled }: SpecsKvEditorProps) {
  const update = (i: number, patch: Partial<SpecKvRow>) =>
    onChange(rows.map((r, ri) => (ri === i ? { ...r, ...patch } : r)));

  return (
    <div className="space-y-2">
      {rows.map((r, i) => (
        <div key={i} className="flex items-center gap-2">
          <input
            type="text"
            disabled={disabled}
            className="h-10 w-full rounded-lg border border-line bg-panel px-3 text-[13px] focus:border-accent"
            placeholder="عنوان مشخصه (مثلاً ضخامت)"
            value={r.key}
            onChange={(e) => update(i, { key: e.target.value })}
          />
          <span className="shrink-0 text-[12px] text-muted">:</span>
          <input
            type="text"
            disabled={disabled}
            className="h-10 w-full rounded-lg border border-line bg-panel px-3 text-[13px] focus:border-accent"
            placeholder="مقدار (مثلاً ۲ میلی‌متر)"
            value={r.value}
            onChange={(e) => update(i, { value: e.target.value })}
          />
          <button
            type="button"
            disabled={disabled}
            onClick={() => onChange(rows.filter((_, ri) => ri !== i))}
            className="shrink-0 rounded-lg border border-line px-2.5 py-2 text-[13px] text-rose-600 hover:bg-rose-50 disabled:opacity-40"
            title="حذف این مشخصه"
          >
            ✕
          </button>
        </div>
      ))}
      <button
        type="button"
        disabled={disabled}
        onClick={() => onChange([...rows, { key: "", value: "" }])}
        className="rounded-lg border border-dashed border-line px-3 py-2 text-[12px] font-medium text-muted hover:bg-bg disabled:opacity-40"
      >
        ＋ افزودن مشخصه {rows.length > 0 && `(${faNum(rows.length)})`}
      </button>
    </div>
  );
}