{{--
    Primitivas JS compartidas para los buscadores de reuniones.
    Incluir dentro de un <script> o @push('scripts') ANTES de la lógica específica.
    Expone: renderItems, makeChip, makeSingleBuscador, makeMultiBuscador, setupHoraDropdown
--}}
// onSelect recibe el id del item seleccionado.
function renderItems(dropdownEl, items, labelFn, iconClass, onSelect, idField = 'id') {
dropdownEl.innerHTML = '';
if (!items.length) {
const btn = document.createElement('button');
btn.type = 'button';
btn.className = 'list-group-item disabled text-muted small';
btn.textContent = 'Sin resultados';
dropdownEl.appendChild(btn);
} else {
items.forEach(item => {
const btn = document.createElement('button');
btn.type = 'button';
btn.className = 'list-group-item list-group-item-action d-flex align-items-center gap-2';
btn.innerHTML = `<i class="${iconClass} text-muted"></i><span>${labelFn(item)}</span>`;
btn.addEventListener('click', () => onSelect(item[idField]));
dropdownEl.appendChild(btn);
});
}
dropdownEl.classList.remove('d-none');
}

// onRemove recibe (id, spanEl).
function makeChip(id, nombre, iconClass, onRemove) {
const span = document.createElement('span');
span.className = 'badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-2 rounded-pill fw-normal d-inline-flex align-items-center gap-2';
span.dataset.id = id;
span.innerHTML = `<i class="${iconClass}"></i>${nombre}<button type="button" class="btn-close ms-1"
    style="font-size:.55rem;" aria-label="Quitar"></button>`;
span.querySelector('.btn-close').addEventListener('click', () => onRemove(id, span));
return span;
}

// cfg: { searchEl, dropdownEl, hiddenEl, chipEl, chipNameEl, clearEl,
// data, labelFn, iconClass, filterFn?, onSelect?, onClear? }
// Devuelve: { select(id), clear(), setData(arr), setFilter(fn) }
function makeSingleBuscador(cfg) {
let _data = cfg.data;
let _filterFn = cfg.filterFn || (() => true);

function refresh() {
const q = cfg.searchEl.value.trim().toLowerCase();
const items = _data
.filter(_filterFn)
.filter(item => !q || item.nombre.toLowerCase().includes(q));
renderItems(cfg.dropdownEl, items, cfg.labelFn, cfg.iconClass, select);
}

function select(id) {
const item = _data.find(x => x.id == id);
if (!item) return;
cfg.hiddenEl.value = id;
cfg.searchEl.value = item.nombre;
cfg.chipNameEl.textContent = item.nombre;
cfg.chipEl.classList.remove('d-none');
cfg.dropdownEl.classList.add('d-none');
cfg.onSelect?.(id, item);
}

function clear() {
cfg.hiddenEl.value = '';
cfg.searchEl.value = '';
cfg.chipEl.classList.add('d-none');
cfg.dropdownEl.classList.add('d-none');
cfg.onClear?.();
}

cfg.searchEl.addEventListener('focus', refresh);
cfg.searchEl.addEventListener('input', refresh);
cfg.clearEl.addEventListener('click', clear);

return { select, clear, setData: arr => { _data = arr; }, setFilter: fn => { _filterFn = fn; } };
}

// Devuelve: { select(id), clearAll(), pruneStale(), setData(arr), setFilter(fn), setDisabled(bool) }
function makeMultiBuscador(cfg) {
let _data = cfg.data;
let _filterFn = cfg.filterFn || (() => true);
const selected = new Map(); // id → nombre
const idField = cfg.idField || 'id';
const nameField = cfg.nameField || 'nombre';

cfg.chipsEl.querySelectorAll(`input[name="${cfg.inputName}"]`).forEach(inp => {
selected.set(String(inp.value), inp.value);
});

function refresh() {
const q = cfg.searchEl.value.trim().toLowerCase();
const items = _data
.filter(_filterFn)
.filter(item => !selected.has(String(item[idField])))
.filter(item => !q || item[nameField].toLowerCase().includes(q));
cfg.sinResultadosEl?.classList.add('d-none');
renderItems(cfg.dropdownEl, items, cfg.labelFn, cfg.iconClass, select, idField);
}

function select(id) {
const item = _data.find(x => x[idField] == id);
if (!item || selected.has(String(id))) return;
selected.set(String(id), item[nameField]);
const inp = document.createElement('input');
inp.type = 'hidden'; inp.name = cfg.inputName;
inp.value = id; inp.id = `_hidden_${cfg.inputName}_${id}`;
cfg.chipsEl.appendChild(inp);
cfg.chipsEl.appendChild(
makeChip(id, item[nameField], cfg.iconClass, (cid, el) => {
selected.delete(String(cid));
document.getElementById(`_hidden_${cfg.inputName}_${cid}`)?.remove();
el.remove();
})
);
cfg.searchEl.value = '';
cfg.dropdownEl.classList.add('d-none');
}

function clearAll() {
selected.forEach((_, sid) => {
document.getElementById(`_hidden_${cfg.inputName}_${sid}`)?.remove();
cfg.chipsEl.querySelector(`[data-id="${sid}"]`)?.remove();
});
selected.clear();
}

function pruneStale() {
selected.forEach((_, sid) => {
if (!_data.filter(_filterFn).some(a => String(a[idField]) === sid)) {
document.getElementById(`_hidden_${cfg.inputName}_${sid}`)?.remove();
cfg.chipsEl.querySelector(`[data-id="${sid}"]`)?.remove();
selected.delete(sid);
}
});
}

cfg.searchEl.addEventListener('focus', refresh);
cfg.searchEl.addEventListener('input', refresh);

return {
select,
clearAll,
pruneStale,
setData: arr => { _data = arr; pruneStale(); },
setFilter: fn => { _filterFn = fn; pruneStale(); },
setDisabled: v => { cfg.searchEl.disabled = v; },
};
}

function setupHoraDropdown(triggerId, dropdownId, hiddenId, labelId, onAfterSelect) {
const trigger = document.getElementById(triggerId);
const dropdown = document.getElementById(dropdownId);
const hidden = document.getElementById(hiddenId);
const label = document.getElementById(labelId);
trigger.addEventListener('click', () => dropdown.classList.toggle('d-none'));
dropdown.querySelectorAll('.hora-slot').forEach(btn => {
btn.addEventListener('click', () => {
hidden.value = btn.dataset.value;
label.textContent = btn.dataset.value;
label.classList.remove('text-muted');
dropdown.classList.add('d-none');
onAfterSelect?.();
});
});
}