// ─── Doc-kit: metaceldas (2/4) ───────────────────────────────────────
// MicosMetaCell: la celda de "campo del documento" (label + control), con
// soporte unificado editable/locked/combobox/muted — antes duplicada entre
// DocMetaStrip (screens-docs.jsx: editable/locked/select) y CompraMetaCell/
// window.MicosMetaCell (screens-others.jsx: editable/locked/select/combobox/
// muted, título de locked hardcodeado). DocMetaStrip queda como envoltorio
// fino: arma la grilla "Datos del documento" dentro de un DocCard y delega
// cada celda acá. Expone a window: MicosMetaCell, DocMetaStrip. Consume
// window.DocCard (ui/doc-kit-shell.jsx), window.ExpedienteCombobox/
// CompraCombobox (screens-others.jsx, típeahead de Compras/Logística — se
// resuelven en render-time, el orden de carga no importa).
//
// Unificación de nombres de prop (P4, fusión): los callers de DocMetaStrip
// usaban `inputType` ('text'|'date'|'select'|'time'), los de CompraMetaCell
// usaban `input` ('text'|'number'|'select'). MicosMetaCell acepta AMBOS
// (`it.inputType || it.input`) para no tocar ningún call-site existente.
// `it.combobox` ('expediente'|'compra') y `it.muted` vienen de CompraMetaCell;
// `it.flash`/`it.flashToken` (resaltado post-autocompletado IA) vienen de
// DocMetaStrip — ambos se preservan sin condicionar al otro origen. `it.error`
// (P9, review rechazada): mensaje inline debajo del control — lo usa el campo
// Expediente de Compras/Logística/Caja Chica cuando el publicId tipeado no
// resuelve contra el backend (nunca se persiste null en silencio, ver
// resolveExpedienteIdForSave en screens/compras/combobox.jsx). Mismo estilo que
// el error de RFField (ui/record-form.jsx): opcional, no rompe ningún caller
// existente que no lo pase.

// ─── La celda unificada ────────────────────────────────────────────
function MicosMetaCell({ it }) {
  const cls = `text-[17px] font-extrabold leading-none tracking-tight${it.mono ? ' font-mono tabular-nums' : ''}`;
  const kind = it.inputType || it.input || 'text';
  let control;
  if (it.editable && it.combobox === 'expediente') {
    control = <ExpedienteCombobox value={it.value} onChange={it.onChange} onPick={it.onPick} />;
  } else if (it.editable && it.combobox === 'compra') {
    control = <CompraCombobox value={it.value} onPick={it.onPick} />;
  } else if (it.editable && kind === 'select') {
    const opts = (it.options || []).map((o) => (typeof o === 'string' ? { value: o, label: o } : o));
    control = (
      // aria-label={it.label} (fase 3, docs-pipeline): el <p> de arriba es puramente visual,
      // sin htmlFor/aria-labelledby — sin esto ningún campo de DocMetaStrip tiene nombre
      // accesible real (hueco ya documentado en remito-vendedor-forma-pago.spec.ts, que por
      // eso recurría a posición estructural de <input>). Aditivo: no cambia comportamiento
      // visual ni de datos, solo agrega accesibilidad/testabilidad real.
      <select value={it.value ?? ''} onChange={(e) => it.onChange(e.target.value)}
        aria-label={it.label}
        className={`edit-input w-full ${cls}`}
        style={{ color: it.accent ? 'var(--accent)' : 'var(--foreground)' }}>
        {opts.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
      </select>
    );
  } else if (it.editable) {
    control = (
      <input type={kind} value={it.value ?? ''} onChange={(e) => it.onChange(e.target.value)}
        placeholder={it.placeholder || ''} aria-label={it.label} min={kind === 'number' ? 0 : undefined}
        className={`edit-input w-full ${cls}`}
        style={{ color: it.accent ? 'var(--accent)' : 'var(--foreground)' }} />
    );
  } else if (it.locked) {
    // Solo lectura visible: atenuado, borde punteado y candado a la derecha
    // (regla CLAUDE.md §4). `lockedTitle` por ítem, default genérico.
    control = (
      <div className="flex items-center gap-2 rounded-lg px-3 py-2"
        style={{ border: '1px dashed color-mix(in oklab, var(--border) 85%, transparent)', background: 'color-mix(in oklab, var(--muted-foreground) 6%, transparent)' }}
        title={it.lockedTitle || 'No editable'}>
        <p className={cls} style={{ color: 'color-mix(in oklab, var(--muted-foreground) 85%, transparent)', flex: 1, minWidth: 0 }}>{it.value}</p>
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ color: 'var(--muted-foreground)', flexShrink: 0 }}>
          <rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" />
        </svg>
      </div>
    );
  } else {
    control = (
      <p className={cls} style={{ color: it.muted
        ? 'color-mix(in oklab, var(--muted-foreground) 70%, transparent)'
        : (it.accent ? 'var(--accent)' : 'var(--foreground)') }}>
        {it.value}
      </p>
    );
  }
  return (
    <div className={`space-y-2 min-w-0${it.flash ? ' autofill-flash' : ''}`}>
      <p className="text-[10.5px] font-bold uppercase tracking-[0.14em]" style={{ color: 'var(--muted-foreground)' }}>
        {it.label}
      </p>
      {control}
      {it.error && (
        <p className="text-[11px] font-semibold" style={{ color: 'var(--danger)' }}>{it.error}</p>
      )}
    </div>
  );
}

// ─── Datos-del-documento header strip (Número / Emisión / Validez) ──
// Envoltorio: arma la grilla dentro de un DocCard y delega cada celda a
// MicosMetaCell. `it.flash`/`it.flashToken` fuerzan el remount (resaltado
// post-autocompletado IA) vía la key del map.
function DocMetaStrip({ items, editing = false }) {
  return (
    <DocCard className="p-7 sm:p-8" editing={editing}>
      <p className="text-[11px] font-bold uppercase tracking-[0.2em] mb-6" style={{ color: 'var(--accent)' }}>
        Datos del documento
      </p>
      <div className="grid grid-cols-2 sm:grid-cols-4 gap-x-8 gap-y-6">
        {items.map((it, i) => (
          <MicosMetaCell key={`${i}-${it.flash ? it.flashToken : 'x'}`} it={it} />
        ))}
      </div>
    </DocCard>);

}

Object.assign(window, { MicosMetaCell, DocMetaStrip });