// ─── Logística · Tabla de ítems de recepción/salida ───────────────────────
// LogisticaItemsTable: grilla ID/Descripción/Lote·Vto/Pedido/Recibido/Observación,
// editable in-place. Extraída tal cual de screens-others.jsx (P9, split del cajón
// de 5 módulos) — cero cambio de comportamiento. lote/vencimiento/cantidadPedida/
// observacion son campos de SESIÓN (no columnas reales de `logistica_item`, D2
// alcance mínimo — ver supabase/migrations/20260702150100_p2_logistica_d2.sql):
// se editan y se ven durante la sesión, pero solo sku/descripcion/cantidad
// sobreviven al refresh (mismo criterio ya aceptado para compra_item). Expone a
// window: LogisticaItemsTable. Consume formatDate (dominio/formato.js),
// IconX/IconPlus (ui/icons.jsx).

function LogisticaItemsTable({ items, editing = false, onItemChange, onItemRemove, onAdd }) {
  const template = editing ? '130px 1fr 120px 84px 84px 1fr 40px' : '140px 1fr 130px 90px 90px 1fr';
  const minWidth = editing ? 940 : 880;
  const cellInput = (val, on, opts = {}) => (
    <input
      type={opts.type || 'text'} value={val == null ? '' : val}
      onChange={(e) => on(opts.type === 'number' ? (Number(e.target.value) || 0) : e.target.value)}
      placeholder={opts.ph || ''}
      className={`edit-input edit-input--cell w-full ${opts.cls || ''}`}
      style={opts.style || { color: 'var(--foreground)' }}
    />
  );

  return (
    <div className="rounded-xl overflow-hidden" style={{ border: '1px solid color-mix(in oklab, var(--border) 55%, transparent)' }}>
      <div style={{ overflowX: 'auto' }}>
        <div style={{ minWidth: `${minWidth}px` }}>
          <div
            className="grid gap-4 px-5 py-4 text-[10.5px] font-bold uppercase tracking-[0.12em]"
            style={{
              gridTemplateColumns: template,
              color: 'var(--muted-foreground)',
              background: 'color-mix(in oklab, var(--surface) 55%, transparent)',
              borderBottom: '1px solid color-mix(in oklab, var(--border) 55%, transparent)',
            }}
          >
            <div>ID</div>
            <div>Descripción</div>
            <div>Lote / Vto.</div>
            <div className="text-right">Pedido</div>
            <div className="text-right">Recibido</div>
            <div>Observación</div>
            {editing && <div></div>}
          </div>
          {items.map((it, i) => {
            const diff = it.cantidadRecibida - it.cantidadPedida;
            const short = diff < 0;
            const extra = diff > 0;
            return (
              <div
                key={i}
                className={`grid gap-4 px-5 py-5 items-start text-[14px] ${editing ? 'item-row--editing' : ''}`}
                style={{
                  gridTemplateColumns: template,
                  borderBottom: i < items.length - 1 || editing ? '1px solid color-mix(in oklab, var(--border) 40%, transparent)' : 'none',
                }}
              >
                <div className="font-mono text-[12px] font-bold tracking-wide uppercase truncate" style={{ color: 'var(--accent)' }}>
                  {editing ? cellInput(it.sku, (v) => onItemChange(i, 'sku', v), { ph: 'SKU', cls: 'font-mono text-[12px] font-bold uppercase', style: { color: 'var(--accent)' } }) : it.sku}
                </div>
                <div className="min-w-0">
                  {editing
                    ? cellInput(it.descripcion, (v) => onItemChange(i, 'descripcion', v), { ph: 'Detalle del ítem', cls: 'font-bold' })
                    : <p className="font-bold leading-snug" style={{ color: 'var(--foreground)' }}>{it.descripcion}</p>}
                </div>
                <div className="min-w-0">
                  {editing ? (
                    <div className="space-y-1.5">
                      {cellInput(it.lote, (v) => onItemChange(i, 'lote', v), { ph: 'Lote', cls: 'font-mono text-[12px] font-bold' })}
                      {cellInput(it.vencimiento, (v) => onItemChange(i, 'vencimiento', v), { type: 'date', cls: 'font-mono text-[11px]' })}
                    </div>
                  ) : (
                    <>
                      <p className="font-mono text-[12px] font-bold tracking-wide" style={{ color: 'var(--foreground)' }}>{it.lote}</p>
                      <p className="text-[10.5px] font-bold uppercase tracking-[0.08em] mt-1" style={{ color: 'var(--muted-foreground)' }}>
                        Vto · {formatDate(it.vencimiento)}
                      </p>
                    </>
                  )}
                </div>
                <div className="text-right font-bold tabular-nums" style={{ color: 'var(--muted-foreground)' }}>
                  {editing ? cellInput(it.cantidadPedida, (v) => onItemChange(i, 'cantidadPedida', v), { type: 'number', cls: 'text-right tabular-nums font-bold' }) : it.cantidadPedida}
                </div>
                <div className="text-right font-bold tabular-nums" style={{ color: short ? 'var(--danger)' : extra ? 'var(--warning)' : 'var(--success)' }}>
                  {editing ? cellInput(it.cantidadRecibida, (v) => onItemChange(i, 'cantidadRecibida', v), { type: 'number', cls: 'text-right tabular-nums font-bold' }) : (
                    <>
                      {it.cantidadRecibida}
                      {diff !== 0 && (
                        <span className="block text-[10.5px] font-bold uppercase tracking-[0.08em] mt-1">
                          {diff > 0 ? `+${diff}` : diff}
                        </span>
                      )}
                    </>
                  )}
                </div>
                <div className="min-w-0">
                  {editing ? cellInput(it.observacion, (v) => onItemChange(i, 'observacion', v), { ph: 'Sin observación', cls: 'text-[12.5px]' }) : (
                    it.observacion ? (
                      <p className="text-[12.5px] font-bold leading-snug" style={{ color: 'var(--danger)' }}>{it.observacion}</p>
                    ) : (
                      <p className="text-[12.5px]" style={{ color: 'color-mix(in oklab, var(--muted-foreground) 60%, transparent)' }}>OK</p>
                    )
                  )}
                </div>
                {editing && (
                  <button type="button" onClick={() => onItemRemove(i)} title="Quitar ítem"
                    className="inline-flex items-center justify-center rounded-md cursor-pointer" style={{ width: 30, height: 30, color: 'var(--muted-foreground)' }}>
                    <IconX size={14} />
                  </button>
                )}
              </div>
            );
          })}
          {editing && (
            <div className="px-5 py-3">
              <button type="button" onClick={onAdd} className="btn btn-outline" style={{ height: 34 }}>
                <IconPlus size={14} />Agregar ítem
              </button>
            </div>
          )}
          {editing && items.length === 0 && (
            <div className="px-5 pb-5 -mt-1">
              <p className="text-[12.5px] font-semibold" style={{ color: 'var(--muted-foreground)' }}>Todavía no cargaste ítems. Usá «Agregar ítem».</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LogisticaItemsTable });