// ─── Expedientes · Alta ─────────────────────────────────────────────
// ExpedienteNuevoScreen: pantalla de ALTA PURA de expediente (in-place,
// editable — no modal, regla §8). P6: MUERE la rama isEdit completa (~150
// líneas nunca ejecutadas — app.jsx solo la invocaba en modo alta, la edición
// real vive en detalle.jsx; bug de severidad alta del mapa) y con ella el
// guard EXPEDIENTE_DETAIL/Sofía del guardado. El estado de partes/vendedor es
// el hook compartido usePartiesEditor (screens/expedientes/partes-editor.js).
// AltaSelect/ReadOnlyField viven en ui/primitives.jsx desde P6 (promoción de
// la compuerta 1 — eran de acá, las consumían 2 kits de ui/). Expone a
// window: ExpedienteNuevoScreen. Consume window.usePartiesEditor,
// window.MicosStore, window.PartySelectorModal/EmptyPartySlot/FilledPartySlot
// (ui/party-selector.jsx), AltaSelect/ReadOnlyField (ui/primitives.jsx),
// formatCuit/formatDate/MicosTodayISO (dominio/formato.js).
//
// P18 (recorrido §2): bajo cada parte VACÍA, botón "Crear X" (EmptyPartySlot,
// prop `onCrear`) que abre `RecordFormModal` (ui/record-form.jsx — REUSA el
// motor record-form entero: config declarativa + validación + persistencia
// real vía MicosStore.create) en vez de navegar a Entidades/Médicos/
// Particulares — el expediente a medio cargar no se pierde. Al guardar, la
// parte recién creada queda seleccionada (mismo slot). Consume también
// window.RecordFormModal/RECORD_FORMS (ui/record-form.jsx).
// P25 (Fran, 03/07): "Cargar X" (PartySelectorModal) pasa `allowCrear={false}`
// — ya no ofrece el form embebido viejo (requeridos VIEJOS: DNI/matrícula).
// La creación es EXCLUSIVA del botón "Crear X" de arriba. detalle.jsx (editar
// un expediente ya guardado) suma el MISMO botón/modal en este paquete —
// antes no lo tenía (única vía de crear una parte ahí era el form embebido
// que se acaba de podar; sin este agregado, editar un expediente existente se
// quedaba sin NINGUNA forma de crear una parte nueva).
//
// EXCEPCIÓN DE TECHO (regla ~250/400 duro — FIX P13 ítem 5: los conteos en
// comentarios siempre vencen, se borra el número puntual en vez de mantenerlo
// desactualizado; ver `wc -l` real para el valor vigente): un solo tema (el
// alta), ya sin la rama muerta y con el estado compartido afuera — lo que
// queda es el layout propio de esta pantalla (header + slots + resumen).
//
// FIX P13 (A0, causa de fondo del hallazgo ALTO de la consolidación): acá
// vivía el MISMO id-race que RecordFormScreen (ui/record-form.jsx) ya
// resolvió en P10 para Entidades/Médicos/Particulares/Proveedores —
// `MicosStore.create('expedientes', exp)` se llamaba SIN el 3er argumento
// `onReconciled` (core/store.js), así que cuando el POST resolvía en
// background y `Object.assign(it, server)` mutaba el `id` temporal (`_tmp-…`)
// al uuid real, `selectedExpedienteId` en core/app.jsx quedaba apuntando a un
// id que ya no matcheaba NADA en EXPEDIENTES — el siguiente re-render de App
// (ej. el click en "Crear presupuesto", que dispara `setRoute`) recomputaba
// `selectedExpediente = null`, y las 7 pantallas de documento (screens/docs/)
// recibían `expediente=null` → `resolveDocExp(null)` → `exp = {}` sin
// `particular`/`medico`/`entidad` → crash en la primera lectura sin guarda
// (ver presupuesto.jsx). ExpedienteDetailScreen tolera `expediente=null` (su
// propio guard "no encontramos este expediente"), por eso el detalle "pinta
// bien" y el crash solo se ve un paso después, al navegar a un documento.
// Fix: mismo patrón que record-form.jsx — `onIdReconciled(oldId, newId)`
// nuevo (prop opcional), corrige `selectedExpedienteId` en app.jsx SOLO si
// todavía apunta al registro recién creado (si el usuario ya navegó a otra
// parte, no le pisamos la pantalla).

const { useState: _useStateN, useMemo: _useMemoN, useRef: _useRefN, useEffect: _useEffectN } = React;

// ─── Pantalla de alta ─────────────────────────────
function ExpedienteNuevoScreen({ onCancel, onSaved, onIdReconciled }) {
  const partes = usePartiesEditor(null);
  const [touched, setTouched] = _useStateN(false);
  // P18: tipo de parte que se está creando por el motor record-form ('paciente'
  // | 'medico' | 'entidad' | null = cerrado). Mapea a la llave real de
  // RECORD_FORMS más abajo (paciente → 'particular', las otras coinciden).
  const [crearTipo, setCrearTipo] = _useStateN(null);

  // El publicId NO se fija acá: lo asigna el trigger de la DB al guardar
  // (BUGS-caza-01-07-2026.md #25/B1) — el header muestra "Borrador" sin id.
  const hoy = _useMemoN(() => (window.MicosTodayISO()), []);
  const dirty = partes.paciente || partes.medico || partes.entidadSet;

  // Al guardar en el modal de creación rápida: el registro ya está en
  // window.PARTICULARES/MEDICOS/ENTIDADES (MicosStore.create lo empuja
  // sincrónicamente, optimista) — se busca por el id con el que disparó
  // onSaved (real o `_tmp-…`, misma referencia que el store reconcilia in
  // place después) y se deja seleccionado en el slot correspondiente.
  const handleParteCreada = (id) => {
    const globalKey = crearTipo === 'paciente' ? 'PARTICULARES' : crearTipo === 'medico' ? 'MEDICOS' : 'ENTIDADES';
    const creado = (window[globalKey] || []).find((x) => x.id === id);
    if (creado) {
      if (crearTipo === 'paciente') partes.setPaciente(creado);
      else if (crearTipo === 'medico') partes.setMedico(creado);
      else { partes.setEntidad(creado); partes.setEntidadSet(true); }
    }
    setCrearTipo(null);
  };

  const handleCancel = () => {
    if (dirty && !window.confirm('¿Descartar este expediente? Se perderán los datos cargados.')) return;
    onCancel();
  };

  const handleSave = () => {
    setTouched(true);
    if (!partes.canSave) return;
    // Sin id fabricado: store.create asigna su id temporal `_tmp-…` (así su
    // maquinaria de create+remove rápido — flag __pendingDelete, ver core/
    // store.js B8 — funciona; antes un `e-<timestamp>` propio la esquivaba y
    // un borrado inmediato disparaba un DELETE inválido contra el backend).
    const exp = {
      inicio: hoy,
      actualizado: hoy,
      status: 'INICIADO',
      ...partes.buildParts(null),
      costosSinIva: null, ganancia: null, gananciaPct: null, iva: null, total: null,
      __nuevo: true,
    };
    // `tempId` en variable propia (string, inmutable), capturada ANTES de que
    // el POST pueda resolver — mismo motivo que record-form.jsx: si se leyera
    // `created.id` DENTRO del callback, para ese momento `Object.assign(it,
    // server)` ya mutó ESE MISMO objeto al uuid real y `created.id` daría el
    // id NUEVO, no el viejo con el que se navegó.
    let tempId;
    const created = window.MicosStore.create('expedientes', exp, (reconciled) => {
      if (onIdReconciled) onIdReconciled(tempId, reconciled.id);
    });
    tempId = created.id;
    try { localStorage.setItem('micos-just-created', created.id); } catch (_) {}
    onSaved(created.id);
  };

  // El título del alta es exclusivo del PACIENTE. Médico y entidad tienen su
  // propio lugar en la pantalla, así que mientras no haya paciente va "Nuevo expediente".
  const tituloHeader = partes.paciente
    ? `${partes.paciente.nombre} ${partes.paciente.apellido}`
    : 'Nuevo expediente';

  // El título entra desde abajo (como toda la página) en la primera aparición;
  // sólo usa el efecto derecha→izquierda cuando REEMPLAZA un valor previo.
  const titleSeenRef = _useRefN(null);
  const titleChanged = titleSeenRef.current !== null && titleSeenRef.current !== tituloHeader;
  _useEffectN(() => { titleSeenRef.current = tituloHeader; }, [tituloHeader]);
  const titleAnimClass = titleChanged ? 'animate-name-pop' : 'animate-fade-in-up';

  return (
    <div className="space-y-7 pt-2">
      {/* Back */}
      <button onClick={handleCancel}
        className="flex items-center gap-2 text-[11px] font-bold uppercase tracking-[0.12em] cursor-pointer transition-colors animate-fade-in-up"
        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 expedientes
      </button>

      {/* Header */}
      <div className="flex flex-wrap items-start justify-between gap-4 animate-fade-in-up" style={{ animationDelay: '40ms' }}>
        <div className="space-y-3 min-w-0 flex-1">
          <div className="flex items-center gap-3 flex-wrap">
            <StatusPill status="INICIADO" size="sm" />
            <span
              className="pill"
              style={{
                padding: '4px 12px',
                fontSize: '10.5px',
                background: 'color-mix(in oklab, var(--accent) 12%, transparent)',
                color: 'var(--accent)',
              }}
            >
              Borrador
            </span>
          </div>
          <h1 key={tituloHeader} className={`text-[clamp(28px,4.2vw,40px)] leading-[1.05] font-extrabold tracking-[-0.02em] ${titleAnimClass}`}
            style={{ color: partes.canSave ? 'var(--foreground)' : 'color-mix(in oklab, var(--muted-foreground) 75%, transparent)' }}>
            {tituloHeader}
          </h1>
          <p className="text-[13.5px] font-medium" style={{ color: 'var(--muted-foreground)' }}>
            Cargá al menos una parte (paciente, médico o entidad) para crear el expediente.
            <span className="mx-1.5 opacity-50">·</span>
            Presupuesto, documentos y facturación se agregan después de guardarlo.
          </p>
        </div>
        <div className="flex items-center gap-2 flex-shrink-0 flex-wrap">
          <button className="btn btn-ghost" onClick={handleCancel}>
            <IconX size={14} />
            <span>Descartar</span>
          </button>
          <button className="btn btn-primary" onClick={handleSave} style={!partes.canSave ? { opacity: 0.55 } : {}}>
            <IconCheck size={14} />
            <span>Guardar</span>
          </button>
        </div>
      </div>

      {/* Información general */}
      <div className="space-y-4 pt-2">
        <p className="text-[10.5px] font-bold uppercase tracking-[0.18em]" style={{ color: 'var(--accent)' }}>
          Información general
        </p>
        <div className="grid grid-cols-1 xl:grid-cols-[1fr_360px] gap-4 sm:gap-5 animate-fade-in-up" style={{ animationDelay: '80ms' }}>
          {/* Partes involucradas */}
          <div className="rounded-2xl bg-card p-5 sm:p-6 space-y-5" style={{
            border: '1px solid color-mix(in oklab, var(--border) 55%, transparent)',
            boxShadow: 'var(--shadow-card)',
          }}>
            <div className="flex items-center justify-between flex-wrap gap-2">
              <p className="text-[10.5px] font-bold uppercase tracking-[0.18em]" style={{ color: 'var(--accent)' }}>
                Partes involucradas
              </p>
              {touched && !partes.canSave && (
                <span className="text-[10.5px] font-bold uppercase tracking-[0.1em]" style={{ color: 'var(--danger)' }}>
                  Cargá al menos una parte
                </span>
              )}
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
              {/* Paciente */}
              {partes.paciente ? (
                <FilledPartySlot type="paciente"
                  primary={`${partes.paciente.nombre} ${partes.paciente.apellido}`}
                  lines={[partes.paciente.dni ? `DNI ${partes.paciente.dni}` : null, partes.paciente.telefono]}
                  pencilTitle={partes.pencilTitle(partes.paciente)}
                  onPencil={() => partes.openPicker('paciente', partes.paciente)}
                  onTrash={partes.paciente.__nuevo ? () => partes.setDelNuevo({ type: 'paciente', record: partes.paciente }) : undefined}
                  onClear={() => partes.setPaciente(null)} />
              ) : (
                <EmptyPartySlot type="paciente" onClick={() => partes.openPicker('paciente', null)} onCrear={() => setCrearTipo('paciente')} />
              )}

              {/* Médico */}
              {partes.medico ? (
                <FilledPartySlot type="medico"
                  primary={`${partes.medico.titulo ? partes.medico.titulo + ' ' : ''}${partes.medico.nombre} ${partes.medico.apellido}`}
                  lines={[partes.medico.especialidad, partes.medico.matricula]}
                  pencilTitle={partes.pencilTitle(partes.medico)}
                  onPencil={() => partes.openPicker('medico', partes.medico)}
                  onTrash={partes.medico.__nuevo ? () => partes.setDelNuevo({ type: 'medico', record: partes.medico }) : undefined}
                  onClear={() => partes.setMedico(null)} />
              ) : (
                <EmptyPartySlot type="medico" onClick={() => partes.openPicker('medico', null)} onCrear={() => setCrearTipo('medico')} />
              )}

              {/* Entidad */}
              {partes.entidadSet ? (
                <FilledPartySlot type="entidad"
                  primary={partes.entidad ? partes.entidad.razonSocial : 'Particular'}
                  lines={partes.entidad ? [partes.entidad.cuit ? `CUIT ${formatCuit(partes.entidad.cuit)}` : null, partes.entidad.convenio] : ['Pago directo del paciente']}
                  pencilTitle={partes.pencilTitle(partes.entidad)}
                  onPencil={() => partes.openPicker('entidad', partes.entidad)}
                  onTrash={partes.entidad && partes.entidad.__nuevo ? () => partes.setDelNuevo({ type: 'entidad', record: partes.entidad }) : undefined}
                  onClear={() => { partes.setEntidad(null); partes.setEntidadSet(false); }} />
              ) : (
                <EmptyPartySlot type="entidad" onClick={() => partes.openPicker('entidad', null)} onCrear={() => setCrearTipo('entidad')} />
              )}
            </div>

            <div className="h-px" style={{ background: 'color-mix(in oklab, var(--border) 45%, transparent)' }} />

            {/* Vendedor + meta — todos con la misma altura */}
            <div className="grid grid-cols-2 md:grid-cols-3 gap-4 sm:gap-5 items-start">
              <div className="space-y-1.5">
                <p className="text-[10px] font-bold uppercase tracking-[0.12em]" style={{ color: 'var(--muted-foreground)' }}>Vendedor</p>
                <AltaSelect value={partes.vendedor} onChange={(e) => partes.setVendedor(e.target.value)}>
                  <option value="">Sin vendedor</option>
                  {vendedoresDisponibles().map((v) => <option key={v} value={v}>{v}</option>)}
                </AltaSelect>
              </div>
              <div className="space-y-1.5">
                <p className="text-[10px] font-bold uppercase tracking-[0.12em]" style={{ color: 'var(--muted-foreground)' }}>Vendedor auxiliar</p>
                <AltaSelect value={partes.vendedorAux} onChange={(e) => partes.setVendedorAux(e.target.value)}>
                  <option value="">Sin asignar</option>
                  {vendedoresDisponibles().filter((v) => v !== partes.vendedor).map((v) => <option key={v} value={v}>{v}</option>)}
                </AltaSelect>
              </div>
              <ReadOnlyField label="Inicio" value={formatDate(hoy)} />
              <ReadOnlyField label="Estado" value="Iniciado" />
              <ReadOnlyField label="Documentos" value="0 / 7" />
            </div>
          </div>

          {/* Panel lateral: resumen del alta */}
          <div className="rounded-2xl bg-card p-5 sm:p-6 flex flex-col" style={{
            border: '1px solid color-mix(in oklab, var(--border) 55%, transparent)',
            boxShadow: 'var(--shadow-card)',
          }}>
            <p className="text-[10.5px] font-bold uppercase tracking-[0.18em]" style={{ color: 'var(--accent)' }}>
              Resumen del alta
            </p>
            <div className="mt-5 flex flex-col gap-3.5 text-[13px]">
              <Resumen label="Paciente" ok={!!partes.paciente} value={partes.paciente ? `${partes.paciente.nombre} ${partes.paciente.apellido}` : 'Opcional'} />
              <Resumen label="Médico" ok={!!partes.medico} value={partes.medico ? `${partes.medico.titulo ? partes.medico.titulo + ' ' : ''}${partes.medico.nombre} ${partes.medico.apellido}` : 'Opcional'} />
              <Resumen label="Entidad" ok={partes.entidadSet} value={partes.entidadSet ? (partes.entidad ? partes.entidad.razonSocial : 'Particular') : 'Opcional'} />
            </div>
            <div className="h-px my-5" style={{ background: 'color-mix(in oklab, var(--border) 45%, transparent)' }} />
            <div className="rounded-xl px-4 py-3.5 text-[12px] leading-relaxed" style={{
              background: 'color-mix(in oklab, var(--accent) 7%, transparent)',
              border: '1px solid color-mix(in oklab, var(--accent) 22%, transparent)',
              color: 'color-mix(in oklab, var(--foreground) 80%, transparent)',
            }}>
              El expediente se crea en estado <span className="font-bold">Iniciado</span>. Una vez guardado vas a poder cargar presupuesto, orden de compra, remito y facturación.
            </div>
          </div>
        </div>
      </div>

      {/* P25: `allowCrear={false}` — "Cargar X" acá es solo buscar/elegir, la
          creación real es el botón aparte "Crear X" de abajo (RecordFormModal). */}
      <PartySelectorModal type={partes.picker} open={!!partes.picker}
        onClose={partes.closePicker} onPick={partes.handlePick} allowCrear={false} />

      <RecordFormModal
        type={crearTipo === 'paciente' ? 'particular' : crearTipo}
        open={!!crearTipo}
        onClose={() => setCrearTipo(null)}
        onCreated={handleParteCreada}
      />

      {partes.delNuevo && (
        <ConfirmDeleteModal
          title={partes.delNuevo.type === 'entidad' ? '¿Eliminar entidad?' : partes.delNuevo.type === 'medico' ? '¿Eliminar médico?' : '¿Eliminar paciente?'}
          itemName={partes.delNuevo.type === 'entidad' ? partes.delNuevo.record.razonSocial : `${partes.delNuevo.record.titulo ? partes.delNuevo.record.titulo + ' ' : ''}${partes.delNuevo.record.nombre} ${partes.delNuevo.record.apellido}`}
          description="Se va a borrar este registro que creaste y se quitará del expediente. Esta acción no se puede deshacer."
          confirmLabel="Sí, eliminar"
          onCancel={() => partes.setDelNuevo(null)}
          onConfirm={() => partes.confirmDeleteNuevo(partes.delNuevo)}
        />
      )}
    </div>
  );
}

// ─── Fila del resumen lateral ─────────────────────
function Resumen({ label, value, ok }) {
  return (
    <div className="flex items-center justify-between gap-3">
      <span className="flex items-center gap-2" style={{ color: 'var(--muted-foreground)' }}>
        <span className="inline-flex items-center justify-center rounded-full flex-shrink-0"
          style={{
            width: 18, height: 18,
            background: ok ? 'color-mix(in oklab, var(--accent) 16%, transparent)' : 'color-mix(in oklab, var(--muted-foreground) 12%, transparent)',
            color: ok ? 'var(--accent)' : 'var(--muted-foreground)',
          }}>
          {ok ? <IconCheck size={11} /> : <IconCircle size={9} />}
        </span>
        {label}
      </span>
      <span className="font-bold truncate text-right" style={{ color: ok ? 'var(--foreground)' : 'var(--muted-foreground)' }}>
        {value}
      </span>
    </div>
  );
}

Object.assign(window, { ExpedienteNuevoScreen });