// ─── Buscador global del navbar (P21) ────────────────────────────────────
// GlobalSearch: reemplaza el botón decorativo que tenía el Header (ui/shell.jsx)
// — sin estado, sin onClick, solo un ícono + texto fijo "Buscar expedientes,
// pacientes…" (ver diagnóstico completo en paquetes/p21-reporte.md). Ahora es
// un input real: tipear dispara `window.MicosGlobalSearch(query)` (dominio/
// busqueda.js, lógica pura sobre las colecciones hidratadas) y arma un
// desplegable de resultados agrupados por tipo; click navega con el router
// real vía `onOpen(result.nav)` (implementado en core/app.jsx,
// `navigateSearchResult` — el único lugar que interpreta el campo `nav`).
//
// Combobox compartido (arbitraje, ver "Notas de merge" en el reporte): NO se
// reusa `InventoryCombobox` (ui/doc-kit-items.jsx, P17b lo está mejorando en
// paralelo) tal cual — está acoplado a `window.INVENTARIO` y a
// `onPick(producto)`, no sirve para resultados multi-colección agrupados. Lo
// que SÍ se reusa, sin tocarlo, es el patrón visual del popover compartido:
// las clases `.inv-pop`/`.inv-pop__head`/`.inv-pop__row` de assets/styles.css
// (portal fixed, header en mayúsculas, fila con hover) — mismo look & feel
// que el selector de ítems del punto 4 del recorrido. El ancho doble y el
// wrap del título los implementa ESTE archivo directo (no dependen del merge
// de P17b: ese cambio vive adentro de InventoryCombobox como JS inline, no
// como regla CSS reusable — ver nota de merge para el detalle).
//
// Atajo ⌘K/Ctrl+K enfoca el input (la promesa que ya tenía el título del botón
// viejo, "Buscar (⌘K)", nunca estaba conectada a nada).
// Expone a window: GlobalSearch. Consume MicosGlobalSearch (dominio/busqueda.js),
// IconSearch/IconX (ui/icons.jsx). Se usa desde Header (ui/shell.jsx).
function GlobalSearch({ onOpen }) {
const [query, setQuery] = React.useState('');
const [open, setOpen] = React.useState(false);
const [mobileOpen, setMobileOpen] = React.useState(false);
const [rect, setRect] = React.useState(null);
const wrapRef = React.useRef(null);
const inputRef = React.useRef(null); // input MÓVIL (md:hidden)
const desktopInputRef = React.useRef(null); // input DESKTOP (hidden md:flex)
const groups = React.useMemo(() => (window.MicosGlobalSearch ? window.MicosGlobalSearch(query) : []), [query]);
const totalResults = groups.reduce((n, g) => n + g.items.length, 0);
const place = () => { if (wrapRef.current) setRect(wrapRef.current.getBoundingClientRect()); };
React.useEffect(() => {
if (!open) return;
place();
const onScroll = (e) => {
if (e.target && e.target.closest && e.target.closest('.inv-pop')) return;
place();
};
const onResize = () => place();
const onDoc = (e) => {
const inPop = e.target.closest && e.target.closest('.inv-pop');
if (wrapRef.current && !wrapRef.current.contains(e.target) && !inPop) setOpen(false);
};
window.addEventListener('scroll', onScroll, true);
window.addEventListener('resize', onResize);
document.addEventListener('mousedown', onDoc);
return () => {
window.removeEventListener('scroll', onScroll, true);
window.removeEventListener('resize', onResize);
document.removeEventListener('mousedown', onDoc);
};
}, [open]);
// ⌘K / Ctrl+K enfoca el buscador desde cualquier pantalla; Escape lo cierra.
//
// FIX (hallazgo auditoría 05/07/2026, "⌘K del buscador global roto en DESKTOP"): antes
// esto SIEMPRE hacía `setMobileOpen(true)` + enfocaba `inputRef` (el input MÓVIL, oculto
// por CSS `md:hidden` en desktop) — en una pantalla ≥768px (breakpoint `md` de Tailwind)
// el atajo no hacía nada visible: el input real que el usuario ve (`desktopInputRef`,
// `hidden md:flex`) nunca recibía foco. `matchMedia` decide cuál de los dos inputs es el
// visible en ESTE momento (ambos existen siempre en el DOM, la visibilidad es puro CSS) y
// solo abre/enfoca ese.
React.useEffect(() => {
const onKey = (e) => {
if ((e.metaKey || e.ctrlKey) && (e.key === 'k' || e.key === 'K')) {
e.preventDefault();
const esDesktop = window.matchMedia && window.matchMedia('(min-width: 768px)').matches;
if (esDesktop) {
setOpen(true);
setTimeout(() => desktopInputRef.current && desktopInputRef.current.focus(), 0);
} else {
setMobileOpen(true);
setTimeout(() => inputRef.current && inputRef.current.focus(), 0);
}
} else if (e.key === 'Escape') {
setOpen(false);
}
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, []);
const pick = (result) => {
onOpen && onOpen(result.nav);
setOpen(false);
setQuery('');
setMobileOpen(false);
};
const pop = (open && rect) ? ReactDOM.createPortal(