/* Left-column entity browser with search + key-entity grouping. */
{
  const { useEffect, useMemo } = React;

  function ListPane({ model, search, onSearch, focusedName, onSelect, listRef }) {
    const allEntities = useMemo(
      () => [...model.entities.values()].sort((a, b) => a.name.localeCompare(b.name)),
      [model]
    );

    const filtered = useMemo(() => {
      const q = search.trim().toLowerCase();
      if (!q) return allEntities;
      return allEntities.filter(e => {
        if (e.name.toLowerCase().includes(q)) return true;
        if (e.displayName.toLowerCase().includes(q)) return true;
        if (e.attributes.some(a => a.name.toLowerCase().includes(q) || a.type.toLowerCase().includes(q))) return true;
        if (e.kind === "enum" && e.values.some(v => v.toLowerCase().includes(q))) return true;
        return false;
      });
    }, [allEntities, search]);

    const { keyEntities, otherEntities } = useMemo(() => ({
      keyEntities: filtered.filter(isKeyEntity),
      otherEntities: filtered.filter(e => !isKeyEntity(e)),
    }), [filtered]);

    useEffect(() => {
      if (!focusedName) return;
      const el = document.querySelector(`[data-list-item="${focusedName}"]`);
      if (el && listRef.current) {
        const r = el.getBoundingClientRect();
        const lr = listRef.current.getBoundingClientRect();
        if (r.top < lr.top || r.bottom > lr.bottom) {
          el.scrollIntoView({ block: "center", behavior: "auto" });
        }
      }
    }, [focusedName]);

    function renderItem(e, extraClass, suffix) {
      return (
        <div
          key={(extraClass || "") + e.name}
          className={`list-item ${extraClass || ""} ${focusedName === e.name ? "active" : ""}`}
          data-list-item={e.name}
          onClick={() => onSelect(e.name)}
        >
          <span className="swatch" style={{ background: stereoBg(e.stereotype) }}></span>
          <span className="name">
            {e.kind === "abstract" ? <span className="abstract">{e.name}</span> : e.name}
          </span>
          {suffix}
        </div>
      );
    }

    return (
      <div className="panel">
        <div className="panel-head">
          <h2>Entities</h2>
          <div className="count">{filtered.length}/{allEntities.length}</div>
        </div>
        <div className="list-search">
          <span className="icon"><Icon.search /></span>
          <input
            placeholder="Search entities, fields, enums…"
            value={search}
            onChange={(e) => onSearch(e.target.value)}
            autoFocus
          />
        </div>
        <div className="panel-body" ref={listRef}>
          {filtered.length === 0 && (
            <div className="empty">No entities match.</div>
          )}
          {keyEntities.length > 0 && (
            <>
              <div className="list-section-h">Key entities <span className="count">{keyEntities.length}</span></div>
              {keyEntities.map(e => renderItem(e, "key-item", <span className="key-pin" title="Key entity">★</span>))}
              {otherEntities.length > 0 && (
                <div className="list-section-h">All entities <span className="count">{otherEntities.length}</span></div>
              )}
            </>
          )}
          {otherEntities.map(e => renderItem(e, "", null))}
        </div>
      </div>
    );
  }

  window.ListPane = ListPane;
}