// ─── Inventario · Alquilables · Detalle de equipo ──────────────────────────
// InventarioActivoDetailScreen: lectura de UN equipo físico de alquiler (VAC) —
// codigo_interno/tamaño/N° de serie/ubicación/observación/estado real — + su
// PROPIO historial de movimientos (inventario_alquiler filtrado por activo_id).
// P23 (03/07/2026): pantalla NUEVA — antes no existía ("click equipo → su
// detalle con su historial propio" era imposible, la sección Alquilables
// listaba PRODUCTOS, no equipos — ver header de lista.jsx). Solo lectura a
// propósito (no se pidió edición de equipos en este paquete; si hace falta a
// futuro, mismo motor useDocEdit que detalle.jsx).
// DECISIÓN 2 (alta VAC, 06/07/2026): suma el modo `isCreate` — form MÍNIMO de
// alta (sub-componente propio `InventarioActivoAltaForm`, hooks propios; la
// vista de lectura de arriba queda intocada). Expone a window:
// InventarioActivoDetailScreen. Consume window.INVENTARIO_ACTIVOS/
// INVENTARIO_ALQUILERES/INVENTARIO (core/colecciones.js, hidratadas por store.js),
// VAC_ESTADO_CFG/VAC_MOVIMIENTO_CFG/vacTamanoDeDescripcion (compartido.jsx),
// DocCard (ui/doc-kit-shell.jsx), useDocEdit (ui/doc-kit-edit.jsx), MicosMetaCell
// (ui/doc-kit-meta.jsx), TablePill (ui/primitives.jsx), MicosStore (core/store.js),
// formatDate (dominio/formato.js).

const { useState: _useStateActD, useEffect: _useEffectActD } = React;

function InventarioActivoDetailScreen({ activoId, isCreate = false, onBack, onSaved, onIdReconciled, onVerHistorialAlquileres }) {
  // Guard fetch-and-merge (mismo patrón que InventarioDetailScreen, P10): si el equipo no
  // está en la ventana hidratada (deep-link directo) lo trae por id y lo mergea — nunca
  // cae al primero del array. En modo alta (isCreate) no hay nada que buscar: activoId
  // llega null y el guard de abajo (`|| !activoId`) lo deja sin efecto.
  const foundLocal = (window.INVENTARIO_ACTIVOS || []).find((a) => a.id === activoId);
  const [mergeTick, setMergeTick] = _useStateActD(0);
  const [notFound, setNotFound] = _useStateActD(false);
  _useEffectActD(() => {
    if (isCreate || foundLocal || !activoId) return undefined;
    let cancelled = false;
    fetch(`/api/inventario-activos/${encodeURIComponent(activoId)}`, { credentials: 'same-origin' })
      .then((r) => (r.ok ? r.json() : Promise.reject(r.status)))
      .then((server) => {
        if (cancelled || !server || !server.id) throw new Error('sin id');
        const col = window.INVENTARIO_ACTIVOS || (window.INVENTARIO_ACTIVOS = []);
        if (!col.some((x) => x.id === server.id)) col.push(server);
        setMergeTick((t) => t + 1);
      })
      .catch((err) => {
        if (cancelled) return;
        console.warn('[InventarioActivoDetailScreen] fetch-and-merge', activoId, err);
        setNotFound(true);
      });
    return () => { cancelled = true; };
  }, [isCreate, activoId, foundLocal]);

  // Alta: rama enteramente separada (su propio componente, sus propios hooks) — no toca
  // ni un solo camino de la lectura de abajo. Split ANTES de tocar `item`/`notFound` de
  // lectura para no mezclar los dos temas en un solo return gigante.
  if (isCreate) {
    return <InventarioActivoAltaForm onBack={onBack} onSaved={onSaved} onIdReconciled={onIdReconciled} />;
  }

  const item = foundLocal;

  if (!item) {
    if (notFound) {
      return (
        <div className="space-y-6 pt-2">
          <button onClick={onBack} className="flex items-center gap-2 text-[11px] font-bold uppercase tracking-[0.12em] cursor-pointer" style={{ color: 'var(--muted-foreground)' }}>
            <IconArrowLeft size={13} />Volver a Inventario
          </button>
          <p className="text-[14px] font-semibold" style={{ color: 'var(--muted-foreground)' }}>No se encontró el equipo.</p>
        </div>
      );
    }
    return null;
  }

  const estCfg = window.VAC_ESTADO_CFG[item.estado] || { label: item.estado, tone: 'neutral' };

  // Historial propio: SOLO los movimientos de ESTE equipo (activo_id), más recientes
  // primero — re-ordenado client-side por las dudas (dataset chico, ya viene desc del
  // GET /api/inventario-alquileres, ver su route.ts).
  const historialPropio = (window.INVENTARIO_ALQUILERES || [])
    .filter((m) => m.activoId === item.id)
    .sort((a, b) => String(b.fecha).localeCompare(String(a.fecha)));

  function SubTableHead({ cols }) {
    return (
      <div className="grid gap-3 px-4 py-3 text-[10.5px] font-bold uppercase tracking-[0.08em]"
        style={{ gridTemplateColumns: cols.map(c => c.w).join(' '), color: 'var(--muted-foreground)', borderBottom: '1px solid color-mix(in oklab, var(--border) 55%, transparent)', background: 'color-mix(in oklab, var(--surface) 50%, transparent)' }}>
        {cols.map(c => <div key={c.label} className={c.right ? 'text-right' : c.center ? 'text-center' : ''}>{c.label}</div>)}
      </div>
    );
  }

  const infoFields = [
    { label: 'Interno', value: item.codigoInterno, mono: true, accent: true },
    { label: 'Tamaño', value: item.tamano || '—' },
    { label: 'N° de serie', value: item.numeroSerie || '—', mono: true },
    { label: 'Ubicación', value: item.ubicacion || '—' },
    { label: 'Categoría', value: item.categoria || '—' },
  ];

  return (
    <div className="space-y-7 pt-2 animate-fade-in-up">
      <button onClick={onBack}
        className="back-link flex items-center gap-2 text-[11px] font-bold uppercase tracking-[0.12em] cursor-pointer transition-colors"
        style={{ color: 'var(--muted-foreground)' }}
        onMouseEnter={e => e.currentTarget.style.color = 'var(--accent)'}
        onMouseLeave={e => e.currentTarget.style.color = 'var(--muted-foreground)'}>
        <IconArrowLeft size={13} />
        Volver a Inventario
      </button>

      <div className="flex flex-wrap items-start justify-between gap-4">
        <div className="space-y-3 min-w-0">
          <div className="flex items-center gap-3 flex-wrap">
            <span className="text-[11px] font-bold uppercase tracking-[0.18em]" style={{ color: 'var(--accent)' }}>
              Inventario · Equipo
            </span>
            <TablePill label={estCfg.label} tone={estCfg.tone} />
          </div>
          <h1 className="font-mono text-[clamp(28px,4.2vw,40px)] leading-[1.05] font-extrabold tracking-[-0.01em]"
            style={{ color: 'var(--foreground)' }}>{item.codigoInterno}</h1>
          <p className="text-[13.5px] font-medium" style={{ color: 'var(--muted-foreground)' }}>
            {item.descripcion || 'Sin descripción'}
            {item.numeroSerie && (<><span className="mx-1.5 opacity-50">·</span>N° {item.numeroSerie}</>)}
          </p>
        </div>
        {onVerHistorialAlquileres && (
          <button onClick={onVerHistorialAlquileres} className="btn btn-outline flex-shrink-0">
            <IconClock size={14} /><span className="hidden sm:inline">Historial de alquileres</span>
          </button>
        )}
      </div>

      <DocCard className="p-7 sm:p-8">
        <p className="text-[11px] font-bold uppercase tracking-[0.2em] mb-6" style={{ color: 'var(--accent)' }}>
          Información general
        </p>
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-x-8 gap-y-6">
          {infoFields.map((f) => (
            <div key={f.label} className="space-y-2 min-w-0">
              <p className="text-[10.5px] font-bold uppercase tracking-[0.14em]" style={{ color: 'var(--muted-foreground)' }}>{f.label}</p>
              <p className={`text-[16px] font-extrabold leading-tight truncate ${f.mono ? 'font-mono' : ''}`}
                style={{ color: f.accent ? 'var(--accent)' : 'var(--foreground)' }}>{f.value}</p>
            </div>
          ))}
          <div className="space-y-2">
            <p className="text-[10.5px] font-bold uppercase tracking-[0.14em]" style={{ color: 'var(--muted-foreground)' }}>Estado</p>
            <TablePill label={estCfg.label} tone={estCfg.tone} />
          </div>
        </div>
        {item.observacion && (
          <div className="mt-6 pt-6" style={{ borderTop: '1px solid color-mix(in oklab, var(--border) 45%, transparent)' }}>
            <p className="text-[10.5px] font-bold uppercase tracking-[0.14em] mb-2" style={{ color: 'var(--muted-foreground)' }}>Observación</p>
            <p className="text-[13.5px] font-medium" style={{ color: 'var(--foreground)' }}>{item.observacion}</p>
          </div>
        )}
      </DocCard>

      <DocCard className="p-7 sm:p-8">
        <div className="flex items-center justify-between mb-6">
          <p className="text-[11px] font-bold uppercase tracking-[0.2em]" style={{ color: 'var(--accent)' }}>
            Historial de este equipo
          </p>
        </div>
        <div className="rounded-xl overflow-hidden" style={{ border: '1px solid color-mix(in oklab, var(--border) 55%, transparent)' }}>
          <SubTableHead cols={[
            { label: 'Fecha',     w: '100px' },
            { label: 'Mov.',      w: '110px' },
            { label: 'Motivo',    w: '1fr'   },
            { label: 'Paciente',  w: '1fr'   },
            { label: 'Doctor',    w: '1fr'   },
            { label: 'Transporte', w: '120px' },
          ]} />
          {historialPropio.map((mov, idx) => {
            const cfg = window.VAC_MOVIMIENTO_CFG[mov.tipo] || { label: mov.tipo, tone: 'neutral' };
            const isLast = idx === historialPropio.length - 1;
            return (
              <div key={mov.id} className="grid gap-3 px-4 py-3.5 items-center"
                style={{ gridTemplateColumns: '100px 110px 1fr 1fr 1fr 120px', borderBottom: !isLast ? '1px solid color-mix(in oklab, var(--border) 45%, transparent)' : 'none' }}>
                <span className="text-[12px] font-mono tabular-nums" style={{ color: 'var(--muted-foreground)' }}>{formatDate(mov.fecha)}</span>
                <TablePill label={cfg.label} tone={cfg.tone} />
                <span className="text-[12.5px] font-semibold truncate" style={{ color: 'var(--foreground)' }}>{mov.motivo || '—'}</span>
                <span className="text-[12.5px] truncate" style={{ color: 'var(--foreground)' }}>{mov.pacienteNombre || '—'}</span>
                <span className="text-[12.5px] truncate" style={{ color: 'var(--muted-foreground)' }}>{mov.medicoNombre || '—'}</span>
                <span className="text-[12px] truncate" style={{ color: 'var(--muted-foreground)' }}>{mov.transporte || '—'}</span>
              </div>
            );
          })}
          {historialPropio.length === 0 && (
            <div className="px-4 py-10 text-center">
              <p className="text-[13px] font-semibold" style={{ color: 'var(--muted-foreground)' }}>Sin movimientos registrados para este equipo.</p>
            </div>
          )}
        </div>
      </DocCard>
    </div>
  );
}

// ─── Alta de equipo VAC (DECISIÓN 2, 06/07/2026) ───────────────────────────
// Form MÍNIMO: los campos NOT NULL de `inventario_activo` (inventario_id vía el
// selector "Tipo", codigo_interno, estado) + los 2 opcionales que ya se muestran
// en la lectura (N° de serie/Ubicación) + Observación. `estado` NO es editable acá
// a propósito — arranca SIEMPRE en ESTACIONADO (mismo criterio de dominio que "un
// expediente nuevo arranca INICIADO", CLAUDE.md §9): un alta no tiene todavía un
// movimiento de `inventario_alquiler` que respalde otro estado — dar de alta un
// equipo ya "Alquilado" sin ese rastro es EXACTAMENTE la deuda que ya denunció
// Fran para G5/M2 (ARBITRAJES.md ítem 11, "alquilados sin movimiento que
// respalde"); no reintroducirla en el único punto de alta nuevo.
// Reusa el mismo motor useDocEdit/DocCard/MicosMetaCell que el resto del bundle
// (regla de la casa: ampliar/reusar antes que inventar un formulario a mano).
function InventarioActivoAltaForm({ onBack, onSaved, onIdReconciled }) {
  const [error, setError] = _useStateActD('');

  // Los 3 "modelos" VAC (Chica/Mediana/Grande) ya existen en `inventario` (categoría
  // "Equipos VAC", P23) — el alta de un EQUIPO nuevo elige a cuál pertenece (columna
  // real `inventario_activo.inventario_id`, NOT NULL). Orden fijo chica→grande (la
  // DB los devuelve alfabético por sku VAC-C/VAC-G/VAC-M).
  const modelos = (window.INVENTARIO || []).filter((i) => i.categoria === 'Equipos VAC');
  const ORDEN_TAMANO = { Chica: 0, Mediana: 1, Grande: 2 };
  const tipoOptions = modelos
    .map((m) => ({ value: m.id, label: window.vacTamanoDeDescripcion(m.descripcion) || m.sku }))
    .sort((a, b) => (ORDEN_TAMANO[a.label] ?? 9) - (ORDEN_TAMANO[b.label] ?? 9));

  const { draft, saveEdit, discardEdit, patch } = window.useDocEdit(
    () => ({ inventarioId: (tipoOptions[0] && tipoOptions[0].value) || '', codigoInterno: '', numeroSerie: '', ubicacion: '', observacion: '' }),
    {
      startEditing: true,
      onCancel: () => { onBack && onBack(); },
      onSave: (d) => {
        const codigo = (d.codigoInterno || '').trim();
        if (!d.inventarioId || !codigo) {
          setError('Elegí el tipo y cargá un código interno — son obligatorios.');
          return false;
        }
        setError('');
        const modelo = modelos.find((m) => m.id === d.inventarioId);
        const payload = {
          inventarioId: d.inventarioId,
          codigoInterno: codigo,
          numeroSerie: (d.numeroSerie || '').trim() || null,
          estado: 'ESTACIONADO',
          ubicacion: (d.ubicacion || '').trim() || null,
          observacion: (d.observacion || '').trim() || null,
        };
        // Mismo patrón id-race (P10, ver ui/record-form.jsx): `tempId` se captura ANTES
        // de que el POST pueda resolver — create() es síncrono hasta su `return`. Si el
        // caller ya navegó (onSaved) con el id temporal y el usuario entra a ver el
        // detalle antes de que el POST confirme, `onIdReconciled` corrige la selección.
        let tempId;
        const created = window.MicosStore.create('inventarioActivos', payload, (reconciled) => {
          if (onIdReconciled) onIdReconciled(tempId, reconciled.id);
        });
        tempId = created.id;
        // Campos derivados que solo resuelve el GET (serializeInventarioActivo, join con
        // `inventario`/`inventario_alquiler` — ver src/lib/api/serializers/inventario-
        // activos.ts): el POST genérico (simpleCollection, rest.ts) devuelve la fila
        // cruda sin joins. Se completan acá para que el detalle al que navega `onSaved`
        // no muestre "Sin tamaño"/"—" hasta el próximo refresh/F5.
        Object.assign(created, {
          tamano: window.vacTamanoDeDescripcion(modelo && modelo.descripcion),
          sku: (modelo && modelo.sku) || null,
          descripcion: (modelo && modelo.descripcion) || null,
          categoria: (modelo && modelo.categoria) || null,
          ultimoMovimiento: null,
        });
        onSaved && onSaved(created.id);
      },
    }
  );
  const d = draft || {};
  const Cell = window.MicosMetaCell;

  const infoFields = [
    { label: 'Tipo', editable: true, input: 'select',
      options: tipoOptions.length ? tipoOptions : [{ value: '', label: 'Sin modelos VAC configurados' }],
      value: d.inventarioId, onChange: (v) => patch('inventarioId', v) },
    { label: 'Código interno', editable: true, input: 'text', mono: true, accent: true,
      value: d.codigoInterno, onChange: (v) => patch('codigoInterno', v), placeholder: 'Ej: C7, G8, M4…' },
    { label: 'N° de serie', editable: true, input: 'text', mono: true,
      value: d.numeroSerie, onChange: (v) => patch('numeroSerie', v), placeholder: 'Opcional' },
    { label: 'Ubicación', editable: true, input: 'text',
      value: d.ubicacion, onChange: (v) => patch('ubicacion', v), placeholder: 'Ej: Depósito B · 5-01' },
  ];

  return (
    <div className="space-y-7 pt-2 animate-fade-in-up">
      <button onClick={onBack}
        className="back-link flex items-center gap-2 text-[11px] font-bold uppercase tracking-[0.12em] cursor-pointer transition-colors"
        style={{ color: 'var(--muted-foreground)' }}
        onMouseEnter={e => e.currentTarget.style.color = 'var(--accent)'}
        onMouseLeave={e => e.currentTarget.style.color = 'var(--muted-foreground)'}>
        <IconArrowLeft size={13} />
        Volver a Inventario
      </button>

      <div className="flex flex-wrap items-start justify-between gap-4">
        <div className="space-y-3 min-w-0">
          <div className="flex items-center gap-3 flex-wrap">
            <span className="text-[11px] font-bold uppercase tracking-[0.18em]" style={{ color: 'var(--accent)' }}>
              Inventario · Equipo
            </span>
            <span className="pill pill-presupuesto" style={{ padding: '4px 12px', fontSize: '10.5px' }}>Nuevo</span>
          </div>
          <h1 className="font-mono text-[clamp(28px,4.2vw,40px)] leading-[1.05] font-extrabold tracking-[-0.01em] break-all"
            style={{ color: 'var(--foreground)' }}>{d.codigoInterno || 'Nuevo equipo'}</h1>
          <p className="text-[13.5px] font-medium" style={{ color: 'var(--muted-foreground)' }}>
            Equipo de alquiler VAC — se suma al catálogo de Alquilables, estacionado por defecto.
          </p>
        </div>
        <div className="flex items-center gap-2 flex-shrink-0">
          <button className="btn btn-outline" onClick={discardEdit}><IconX size={14} /><span className="hidden sm:inline">Descartar</span></button>
          <button className="btn btn-primary" onClick={saveEdit}><IconCheck size={14} /><span className="hidden sm:inline">Guardar</span></button>
        </div>
      </div>

      <DocCard className="p-7 sm:p-8" editing>
        <p className="text-[11px] font-bold uppercase tracking-[0.2em] mb-6" style={{ color: 'var(--accent)' }}>
          Información general
        </p>
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-x-8 gap-y-6">
          {infoFields.map((f, i) => <Cell key={i} it={f} />)}
        </div>
        <div className="mt-6 pt-6" style={{ borderTop: '1px solid color-mix(in oklab, var(--border) 45%, transparent)' }}>
          <p className="text-[10.5px] font-bold uppercase tracking-[0.14em] mb-2" style={{ color: 'var(--muted-foreground)' }}>Observación</p>
          <textarea value={d.observacion} onChange={(e) => patch('observacion', e.target.value)} rows={3}
            placeholder="Notas del equipo (opcional)…" className="edit-textarea text-[14px] font-bold leading-snug" />
        </div>
        {error && <p className="text-[12px] font-semibold mt-4" style={{ color: 'var(--danger)' }}>{error}</p>}
      </DocCard>
    </div>
  );
}

Object.assign(window, { InventarioActivoDetailScreen });