/* =====================================================================
   SearchSelect (SearchSel) — Input con autocomplete + opcion "Nuevo"
   Filtra items por substring sobre JSON.stringify(item).
   ===================================================================== */

const SearchSel = ({ items, value, onChange, labelKey, renderItem, onNew, newLabel, placeholder }) => {
  const [q, setQ] = React.useState(undefined);
  const open        = q !== undefined;
  const display     = items.find(x => (labelKey ? x[labelKey] : x.label) === value);
  const displayText = display ? (labelKey ? display[labelKey] : display.label) : (value || "");

  const filtered = open
    ? items.filter(x => {
        if (!q) return true;
        const s = q.toLowerCase();
        return JSON.stringify(x).toLowerCase().includes(s);
      }).slice(0, 15)
    : [];

  return (
    <div style={{ position: "relative" }}>
      <input
        style={S.inp}
        placeholder={placeholder || "Buscar..."}
        value={open ? q : displayText}
        onChange={e => setQ(e.target.value)}
        onFocus={() => { if (q === undefined) setQ(""); }}
        onBlur={() => setTimeout(() => setQ(undefined), 180)}
      />
      {open && (
        <div style={{ position:"absolute", top:"100%", left:0, right:0, background:"#fff", border:"1px solid #d1cdc4", borderRadius:"0 0 5px 5px", maxHeight:180, overflowY:"auto", zIndex:50, boxShadow:"0 4px 12px rgba(0,0,0,0.12)" }}>
          {filtered.map((x, i) => (
            <div
              key={x.id || i}
              style={{ padding:"5px 9px", fontSize:12, cursor:"pointer", borderBottom:"1px solid #f0ece4" }}
              onMouseDown={() => { onChange(x); setQ(undefined); }}
            >
              {renderItem ? renderItem(x) : <span>{labelKey ? x[labelKey] : x.label}</span>}
            </div>
          ))}
          {onNew && (
            <div
              style={{ padding:"5px 9px", fontSize:11, cursor:"pointer", color:"#1e40af", fontWeight:600, background:"#f0f9ff" }}
              onMouseDown={() => { onNew(); setQ(undefined); }}
            >
              + {newLabel || "Nuevo..."}
            </div>
          )}
          {!filtered.length && !onNew && (
            <div style={{ padding:"5px 9px", fontSize:11, color:"#9ca3af" }}>Sin resultados</div>
          )}
        </div>
      )}
    </div>
  );
};

// ── Exports a global scope (Babel standalone aisla cada <script>) ──
window.SearchSel = SearchSel;