// ─── Directorio · Médico — sub-recurso Centros donde opera ─────────────────
// DECISIÓN 1 (ARBITRAJES.md ítem 1, 06/07/2026 — CRUD real de los sub-recursos del
// directorio): `MedicoCentros` es el componente dueño del fetch/POST/PATCH/DELETE reales
// contra la ruta nueva (src/app/api/medico-entidades) — antes "Agregar centro" y el lápiz
// por-centro quedaban disabled-honesto (AUDITORIA-ui-decorativa-05-07-2026.md MEDIA) porque
// `medico_entidad` no tenía ruta. Partido a su propio archivo (mismo criterio que
// entidad-subrecursos.jsx: tema aparte del layout de solo-lectura de la ficha de médico).
// Expone a window: MedicoCentros. Consume window.DirCard (ui/dir-kit.jsx), DirRowActions/
// DirSubResourceModal (ui/dir-subresource-modal.jsx), ConfirmDeleteModal (ui/doc-kit-edit.jsx),
// DirToast (ui/dir-kit.jsx), window.ENTIDADES (core/colecciones.js), Icon* (ui/icons.jsx).
//
// El PATCH de un centro solo edita `nota` (whitelist de src/app/api/medico-entidades/[id]/
// route.ts) — reasignar el centro a otra entidad es borrar y crear de nuevo, no un caso de
// uso real (un médico no "muda" un vínculo histórico a otro centro). El selector de "Agregar
// centro" excluye las entidades ya asociadas (evita el 400 por UNIQUE (medico_id, entidad_id)
// antes de mandarlo — la ruta igual lo valida server-side con mensaje honesto).

const { useState: _useStateMedCen, useEffect: _useEffectMedCen } = React;

function MedicoCentros({ medicoId, navigator }) {
  const [centrosRaw, setCentrosRaw] = _useStateMedCen([]);
  const [modal, setModal] = _useStateMedCen(null); // null | {mode:'new'} | {mode:'edit', row}
  const [confirmDel, setConfirmDel] = _useStateMedCen(null); // {id, nombre}
  const [saving, setSaving] = _useStateMedCen(false);
  const [formError, setFormError] = _useStateMedCen(null);
  const [toast, setToast] = _useStateMedCen(null);

  // FIX id-race (mismo hallazgo que entidad-subrecursos.jsx, ver su header): `medicoId`
  // puede llegar como `_tmp-…` optimista justo después de crear el médico, hasta que el POST
  // reconcilia — ese valor no es un uuid válido, Postgres lo rechaza con 500.
  _useEffectMedCen(() => {
    if (!medicoId || /^_tmp-/.test(medicoId)) return undefined;
    let cancelled = false;
    fetch(`/api/medico-entidades?medicoId=${encodeURIComponent(medicoId)}`, { credentials: 'same-origin' })
      .then((r) => (r.ok ? r.json() : []))
      .then((rows) => { if (!cancelled) setCentrosRaw(rows || []); });
    return () => { cancelled = true; };
  }, [medicoId]);

  // Resuelve la entidad completa contra el padrón ya hidratado (window.ENTIDADES) — mismo
  // criterio que ya usaba esta ficha antes de la Decisión 1 (no se embebe el join acá).
  const centros = centrosRaw
    .map((c) => ({ ...c, entidad: (window.ENTIDADES || []).find((ent) => ent.id === c.entidadId) }))
    .filter((c) => c.entidad);

  function avisar(msg) { setToast(msg); setTimeout(() => setToast(null), 3600); }

  function guardarCentro(form) {
    const editing = modal && modal.mode === 'edit';
    setSaving(true); setFormError(null);
    const url = editing ? `/api/medico-entidades/${modal.row.id}` : '/api/medico-entidades';
    const body = editing ? { nota: form.nota || null } : { medicoId, entidadId: form.entidadId, nota: form.nota || null };
    fetch(url, { method: editing ? 'PATCH' : 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
      .then(async (r) => {
        if (!r.ok) throw new Error(((await r.json().catch(() => ({}))).error) || 'No se pudo guardar el centro');
        return r.json();
      })
      .then((saved) => {
        setCentrosRaw((arr) => (editing ? arr.map((c) => (c.id === saved.id ? saved : c)) : [saved, ...arr]));
        setModal(null);
        avisar(editing ? 'Centro actualizado' : 'Centro agregado');
      })
      .catch((err) => setFormError(err.message))
      .finally(() => setSaving(false));
  }

  function confirmarEliminar() {
    if (!confirmDel) return;
    fetch(`/api/medico-entidades/${confirmDel.id}`, { method: 'DELETE', credentials: 'same-origin' })
      .then((r) => { if (!r.ok) throw new Error('No se pudo eliminar'); })
      .then(() => {
        setCentrosRaw((arr) => arr.filter((c) => c.id !== confirmDel.id));
        avisar('Centro eliminado');
      })
      .catch(() => avisar('No se pudo eliminar'))
      .finally(() => setConfirmDel(null));
  }

  const entidadesDisponibles = (window.ENTIDADES || []).filter(
    (ent) => !centrosRaw.some((c) => c.entidadId === ent.id)
  );

  return (
    <>
      <DirCard eyebrow={`Centros donde opera · ${centros.length}`}
        action={
          <button onClick={() => setModal({ mode: 'new' })} className="btn btn-outline" style={{ height: 32, fontSize: 12, padding: '0 12px' }}>
            <IconPlus size={12} /> Agregar centro
          </button>
        }>
        {centros.length > 0 ? (
          <div className="space-y-3">
            {centros.map((c) => (
              <div key={c.id} className="flex items-start gap-4 p-4 rounded-xl"
                style={{ background: 'color-mix(in oklab, var(--surface) 50%, transparent)', border: '1px solid color-mix(in oklab, var(--border) 55%, transparent)' }}>
                <div className="flex h-10 w-10 items-center justify-center rounded-lg flex-shrink-0"
                  style={{ background: 'color-mix(in oklab, var(--accent) 12%, transparent)', color: 'var(--accent)' }}>
                  <IconBuilding size={18} />
                </div>
                <div className="flex-1 min-w-0">
                  <button onClick={() => navigator && navigator.toEntidad(c.entidad.id)}
                    className="text-left transition-colors"
                    style={{ color: 'var(--foreground)' }}
                    onMouseEnter={(ev) => ev.currentTarget.style.color = 'var(--accent)'}
                    onMouseLeave={(ev) => ev.currentTarget.style.color = 'var(--foreground)'}>
                    <p className="text-[13.5px] font-bold truncate">{c.entidad.razonSocial}</p>
                    <p className="text-[11px] font-bold uppercase tracking-[0.06em] mt-0.5" style={{ color: 'var(--muted-foreground)' }}>
                      {c.entidad.tipo} · {c.entidad.localidad}
                    </p>
                  </button>
                  {c.nota && (
                    <p className="text-[12.5px] mt-2 leading-relaxed" style={{ color: 'var(--muted-foreground)' }}>{c.nota}</p>
                  )}
                </div>
                <DirRowActions
                  editTitle="Editar centro"
                  deleteTitle="Eliminar centro"
                  onEdit={() => setModal({ mode: 'edit', row: c })}
                  onDelete={() => setConfirmDel({ id: c.id, nombre: c.entidad.razonSocial })}
                />
              </div>
            ))}
          </div>
        ) : (
          <p className="text-[13px] italic" style={{ color: 'var(--muted-foreground)' }}>Sin centros asignados.</p>
        )}
      </DirCard>

      <DirSubResourceModal
        open={!!modal}
        onClose={() => { setModal(null); setFormError(null); }}
        icon={IconBuilding}
        eyebrow={modal && modal.mode === 'edit' ? 'Editar' : 'Agregar'}
        title="Centro"
        saving={saving}
        error={formError}
        initial={modal && modal.mode === 'edit' ? { nota: modal.row.nota || '' } : { entidadId: '', nota: '' }}
        onSave={guardarCentro}
        fields={
          modal && modal.mode === 'edit'
            ? [{ key: 'nota', label: 'Nota', type: 'textarea', span: true, placeholder: 'Ej: Opera los martes y jueves' }]
            : [
                { key: 'entidadId', label: 'Centro / entidad', type: 'select', required: true, span: true,
                  options: () => entidadesDisponibles.map((ent) => ({ value: ent.id, label: ent.razonSocial })) },
                { key: 'nota', label: 'Nota', type: 'textarea', span: true, placeholder: 'Ej: Opera los martes y jueves' },
              ]
        }
      />

      {confirmDel && (
        <ConfirmDeleteModal
          title="¿Eliminar centro?"
          itemName={confirmDel.nombre}
          onCancel={() => setConfirmDel(null)}
          onConfirm={confirmarEliminar}
        />
      )}

      <DirToast message={toast} />
    </>
  );
}

Object.assign(window, { MedicoCentros });