/* global React, Icon, Button, Avatar, AgentAvatar, TONES, avColors, MAP_CONNECTORS, MAP_MAX_REACH */
// ============================================================
// Get introduced — SuperConnectorRail (organism).
// The always-legible half of the map: introducers ranked by how many
// targets each one unlocks, computed across the whole target list. This
// stays usable when the graph is a hairball — it IS the recommended
// outreach order. A bridge that spans both a company cluster and a
// standalone person reads as "unlocks 4: 3 companies + 1 person".
// ============================================================

function SuperConnectorRail({ connectors, focusId, onFocus, onDraft, onClose, locked, onUpsell }) {
  return (
    <aside style={{ width: 296, flexShrink: 0, borderLeft: "1px solid var(--ink-100)", background: "#fff", display: "flex", flexDirection: "column", minHeight: 0 }}>
      <div style={{ padding: "15px 16px 12px", borderBottom: "1px solid var(--ink-50)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
          <span style={{ width: 26, height: 26, borderRadius: 7, background: "var(--cardinal-50)", color: "var(--cardinal)", display: "grid", placeItems: "center", flexShrink: 0 }}><Icon name="zap" size={14}/></span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 16, fontWeight: 500, lineHeight: 1.1 }}>Super-connectors</div>
          </div>
          <button onClick={onClose} title="Hide panel" style={railIconBtn}><Icon name="chevron" size={14}/></button>
        </div>
        <div style={{ fontSize: 11.5, color: "var(--fg-2)", lineHeight: 1.45, marginTop: 8 }}>Reach out in this order. The top contact unlocks the most of your targets with one ask.</div>
      </div>

      <div style={{ flex: 1, overflowY: "auto", padding: "6px 8px 10px", position: "relative" }}>
        {connectors.map((c, i) => (
          <ConnectorRow key={c.id} c={c} rank={i + 1} active={focusId === c.id}
            blurred={locked && i > 0}
            onFocus={() => onFocus(focusId === c.id ? null : c.id)}
            onDraft={() => (locked ? onUpsell() : onDraft(c))}/>
        ))}

        {locked && (
          <div style={{ position: "absolute", left: 8, right: 8, bottom: 10, top: 96, borderRadius: 12, background: "linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.86) 38%)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-end", gap: 9, padding: 18, pointerEvents: "none" }}>
            <div style={{ pointerEvents: "auto", textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 9 }}>
              <span style={{ width: 34, height: 34, borderRadius: 999, background: "#fff", border: "1px solid var(--ink-100)", display: "grid", placeItems: "center", color: "var(--cardinal)" }}><Icon name="lock" size={16}/></span>
              <div style={{ fontSize: 12.5, fontWeight: 600 }}>See every super-connector</div>
              <div style={{ fontSize: 11.5, color: "var(--fg-2)", lineHeight: 1.45, maxWidth: 210 }}>The full ranked order and warm-intro drafting are part of Premium.</div>
              <Button variant="primary" size="sm" icon="sparkles" onClick={onUpsell}>Unlock with Premium</Button>
            </div>
          </div>
        )}
      </div>
    </aside>
  );
}

function ConnectorRow({ c, rank, active, blurred, onFocus, onDraft }) {
  const t = TONES[c.tone] || TONES.neutral;
  const hero = rank === 1;
  const pct = Math.round((c.total / MAP_MAX_REACH) * 100);
  const breakdown = [
    c.companies.length ? `${c.companies.length} ${c.companies.length === 1 ? "company" : "companies"}` : null,
    c.people.length ? `${c.people.length} ${c.people.length === 1 ? "person" : "people"}` : null,
  ].filter(Boolean).join(" · ");
  const crossType = c.companies.length > 0 && c.people.length > 0;

  return (
    <div onMouseEnter={onFocus} onMouseLeave={() => active && onFocus()}
      style={{
        position: "relative", borderRadius: 11, padding: "11px 11px 10px", marginBottom: 4, cursor: "pointer",
        border: active ? "1px solid var(--cardinal)" : "1px solid transparent",
        background: active ? "rgba(140,21,21,0.05)" : hero ? "var(--paper)" : "transparent",
        filter: blurred ? "blur(3px)" : "none", opacity: blurred ? 0.5 : 1, transition: "background 120ms, border-color 120ms",
      }}
      onMouseOver={e => { if (!active && !blurred) e.currentTarget.style.background = "var(--paper-hover)"; }}
      onMouseOut={e => { if (!active && !blurred) e.currentTarget.style.background = hero ? "var(--paper)" : "transparent"; }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <span style={{ position: "relative", flexShrink: 0 }}>
          <Avatar name={c.name} {...avColors(c.tone)} size={36}/>
          <span style={{ position: "absolute", left: -5, top: -5, width: 18, height: 18, borderRadius: 999, background: hero ? "var(--cardinal)" : "#fff", color: hero ? "#fff" : "var(--fg-2)", border: "1.5px solid var(--paper)", display: "grid", placeItems: "center", fontSize: 10, fontWeight: 700, fontFamily: "var(--font-mono)" }}>{rank}</span>
        </span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.name}</div>
          <div style={{ fontSize: 11, color: "var(--fg-2)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.title}</div>
        </div>
        {hero && <span style={{ flexShrink: 0, fontSize: 9.5, fontWeight: 700, letterSpacing: "0.05em", textTransform: "uppercase", color: "var(--cardinal)", background: "var(--cardinal-50)", borderRadius: 5, padding: "2px 6px" }}>Top</span>}
      </div>

      <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 9, flexWrap: "wrap" }}>
        <span style={{ fontFamily: "var(--font-display)", fontSize: 19, fontWeight: 500, lineHeight: 1, color: hero ? "var(--cardinal)" : "var(--fg-1)" }}>{c.total}</span>
        <span style={{ fontSize: 11.5, color: "var(--fg-2)" }}>unlocked · {breakdown}</span>
        {crossType && <span title="Bridges both a company and a targeted person" style={{ fontSize: 9.5, fontWeight: 600, color: t.text, background: t.tint, borderRadius: 999, padding: "1px 7px", display: "inline-flex", alignItems: "center", gap: 4 }}><Icon name="route" size={9}/>cross-type</span>}
      </div>
      <div style={{ height: 4, borderRadius: 999, background: "var(--ink-100)", overflow: "hidden", marginTop: 8 }}>
        <div style={{ height: "100%", width: pct + "%", borderRadius: 999, background: hero ? "var(--cardinal)" : t.color, transition: "width 320ms cubic-bezier(0.2,0.7,0.1,1)" }}/>
      </div>

      {active && (
        <div className="cad-fade" style={{ display: "flex", gap: 7, marginTop: 11 }}>
          <Button variant="primary" size="sm" icon="route" onClick={(e) => { e.stopPropagation(); onDraft(); }} style={{ flex: 1, justifyContent: "center" }}>Ask {c.name.split(" ")[0]} for intros</Button>
        </div>
      )}
    </div>
  );
}

const railIconBtn = { width: 26, height: 26, borderRadius: 7, border: "1px solid var(--ink-100)", background: "#fff", cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--fg-2)", flexShrink: 0 };

// Collapsed handle — a thin tab to reopen the rail.
function RailHandle({ onOpen, count }) {
  return (
    <button onClick={onOpen} title="Show super-connectors" style={{
      position: "absolute", top: 14, right: 14, zIndex: 14, display: "inline-flex", alignItems: "center", gap: 8,
      padding: "7px 12px", borderRadius: 999, background: "#fff", border: "1px solid var(--ink-100)",
      boxShadow: "var(--shadow-resting)", cursor: "pointer", fontFamily: "var(--font-sans)", fontSize: 12.5, fontWeight: 600, color: "var(--fg-1)",
    }}>
      <Icon name="zap" size={14} style={{ color: "var(--cardinal)" }}/>Super-connectors
      <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-2)" }}>{count}</span>
    </button>
  );
}

window.SuperConnectorRail = SuperConnectorRail;
window.RailHandle = RailHandle;