// ============================================================
// LabsList — dynamic (date, values) rows. Port of hc-labs-container
// / cr-labs-container in the vanilla hospital.html / chart.html
// components. Pure controlled component — parent owns the array.
// ============================================================

export interface LabRow { date: string; values: string }

interface Props {
  value: LabRow[];
  onChange: (next: LabRow[]) => void;
  placeholder?: string;
  testIdPrefix?: string;
}

const input = 'rounded-md border border-input bg-background px-2 py-1 text-sm';
const btn = 'inline-flex items-center gap-1 rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium hover:bg-muted';

export function emptyLab(): LabRow { return { date: '', values: '' }; }

export default function LabsList({ value, onChange, placeholder, testIdPrefix = 'labs' }: Props) {
  function patch(i: number, next: Partial<LabRow>) {
    onChange(value.map((r, idx) => (idx === i ? { ...r, ...next } : r)));
  }
  function add() { onChange([...value, emptyLab()]); }
  function remove(i: number) { onChange(value.filter((_, idx) => idx !== i)); }

  return (
    <div className="space-y-2" data-testid={testIdPrefix}>
      {value.length === 0 && (
        <div className="text-xs text-muted-foreground italic">No labs added.</div>
      )}
      {value.map((row, i) => (
        <div key={i} className="flex flex-col sm:flex-row items-start gap-2" data-testid={testIdPrefix + '-row-' + i}>
          <input
            type="date"
            value={row.date}
            onChange={(e) => patch(i, { date: e.target.value })}
            className={input + ' w-40 shrink-0'}
          />
          <textarea
            value={row.values}
            onChange={(e) => patch(i, { values: e.target.value })}
            placeholder={placeholder || 'e.g. WBC 12.5, H/H 10.2/31, BMP Na 138, K 3.5'}
            className={input + ' flex-1 min-h-[60px] font-mono text-xs'}
          />
          <button type="button" onClick={() => remove(i)} className="text-xs text-destructive hover:text-red-700" title="Remove">
            🗑
          </button>
        </div>
      ))}
      <button type="button" onClick={add} className={btn}>+ Add lab</button>
    </div>
  );
}