/* global window, React */
const { useState } = React;

// ── LEFT RAIL — API endpoint browser ──────────────────────────
// The Schema tab was removed: the legend filters by domain and the
// inspector shows fields when you click a node, so the rail's job
// became single-purpose (browse the licensable API surface).
function LeftRail({ collapsed, onToggle, onSelectEndpoint, selectedEndpoint, search }) {
  const { ENDPOINTS, MODULE_INFO } = window.CIQ;
  const q = (search || "").trim().toLowerCase();
  const matchEp = (ep) => !q || (ep.path||"").toLowerCase().includes(q) || (ep.summary||"").toLowerCase().includes(q) || (ep.module||"").toLowerCase().includes(q) || (ep.method||"").toLowerCase().includes(q);

  const MODULE_ORDER = ["CompeteIQ", "WhiteSpaceIQ", "PartnerIQ"];
  const MODULE_COLORS = {
    PartnerIQ:   "#a78bfa",
    CompeteIQ:   "#f59e0b",
    WhiteSpaceIQ:"#58efe0",
  };

  if (collapsed) {
    return React.createElement("aside", { className: "rail rail-left rail-collapsed glass-1" },
      React.createElement("button", { className: "icon-btn", onClick: onToggle, title: "Expand API" },
        React.createElement(window.Icons.ChevR, null)
      ),
      React.createElement("div", { style: { height: 1, width: 24, background: "var(--hairline)", margin: "4px 0" } }),
      React.createElement("button", { className: "icon-btn", onClick: onToggle, title: "API" },
        React.createElement(window.Icons.Code, null)
      ),
      React.createElement("div", { className: "vlabel" }, "API")
    );
  }

  return React.createElement("aside", { className: "rail rail-left glass-1" },
    React.createElement("div", { className: "rail-header" },
      React.createElement("h2", null, "API"),
      React.createElement("div", { className: "sub" }, "Three modules, ", ENDPOINTS.length, " endpoints. Each declares the schema nodes and edges it traverses.")
    ),

    React.createElement("div", { className: "rail-body scroll" },
      ENDPOINTS.filter(matchEp).length === 0
        ? React.createElement("div", { style: { padding: 16, fontSize: 12, color: "var(--text-3)" } }, "No endpoints match.")
        : MODULE_ORDER.map(m => {
            const items = ENDPOINTS.filter(ep => ep.module === m && matchEp(ep));
            if (!items.length) return null;
            const info = (MODULE_INFO && MODULE_INFO[m]) || null;
            const color = MODULE_COLORS[m];
            return React.createElement("div", { key: m, className: "rail-section" },
              React.createElement("div", { className: "rail-section-title", style: { color } },
                m, React.createElement("span", { className: "count" }, items.length)
              ),
              info && React.createElement("div", {
                style: { fontSize: 11, color: "var(--text-3)", lineHeight: 1.5, marginBottom: 10, padding: "0 2px" },
              },
                React.createElement("span", { style: { color: "var(--text-2)", fontWeight: 600 } }, info.tagline + " "),
                info.description
              ),
              items.map(ep => React.createElement("button", {
                key: ep.id,
                className: "q-card",
                "data-active": selectedEndpoint === ep.id ? "true" : "false",
                onClick: () => onSelectEndpoint(ep),
                title: ep.summary,
              },
                React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 4 } },
                  React.createElement("span", { className: `api-method ${ep.method.toLowerCase()}` }, ep.method),
                  React.createElement("span", { className: "api-endpoint" }, ep.path)
                ),
                React.createElement("div", { style: { fontSize: 11.5, color: "var(--text-3)", lineHeight: 1.45 } }, ep.summary)
              ))
            );
          })
    )
  );
}

window.LeftRail = LeftRail;