/* hermon-funnel.jsx — radial "everything connects to Hermon" diagram.
   Hermon hub at the center, systems orbiting around it, animated lines flowing inward.
   globals: Icon, INTEGRATIONS. Exports IntegrationFunnel. */

function DbGlyph({ size = 24 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <ellipse cx="12" cy="5.5" rx="7" ry="2.8"/>
      <path d="M5 5.5v6c0 1.5 3.1 2.8 7 2.8s7-1.3 7-2.8v-6"/>
      <path d="M5 11.5v6c0 1.5 3.1 2.8 7 2.8s7-1.3 7-2.8v-6"/>
    </svg>
  );
}

/* orbiting nodes: the integrations + Hermon's own REST API */
const ORBIT = [
  ...INTEGRATIONS,
  { name: "REST API", cat: "Developer", icon: "zap", color: "#6D4AE6", api: true },
];
const RX = 36, RY = 42; // ellipse radius as % of container

function IntegrationFunnel() {
  const wrapRef = React.useRef(null);
  const hubRef = React.useRef(null);
  const nodeRefs = React.useRef([]);
  const [lines, setLines] = React.useState([]);
  const [dim, setDim] = React.useState({ w: 0, h: 0 });

  const compute = React.useCallback(() => {
    const wrap = wrapRef.current, hubEl = hubRef.current;
    if (!wrap || !hubEl) return;
    const wb = wrap.getBoundingClientRect();
    const hb = hubEl.getBoundingClientRect();
    const cx = hb.left + hb.width / 2 - wb.left;
    const cy = hb.top + hb.height / 2 - wb.top;
    const ls = nodeRefs.current.filter(Boolean).map((n) => {
      const r = n.getBoundingClientRect();
      const nx = r.left + r.width / 2 - wb.left;
      const ny = r.top + r.height / 2 - wb.top;
      // stop the line at the hub edge, not its center
      const dx = cx - nx, dy = cy - ny;
      const len = Math.hypot(dx, dy) || 1;
      const ex = cx - (dx / len) * (hb.width / 2 - 6);
      const ey = cy - (dy / len) * (hb.height / 2 - 6);
      return { d: `M ${nx} ${ny} L ${ex} ${ey}` };
    });
    setDim({ w: wb.width, h: wb.height });
    setLines(ls);
  }, []);

  React.useLayoutEffect(() => {
    compute();
    const ro = new ResizeObserver(compute);
    if (wrapRef.current) ro.observe(wrapRef.current);
    const t = setTimeout(compute, 400);
    window.addEventListener('resize', compute);
    return () => { ro.disconnect(); window.removeEventListener('resize', compute); clearTimeout(t); };
  }, [compute]);

  const pos = (i) => {
    const ang = (-90 + i * (360 / ORBIT.length)) * Math.PI / 180;
    return { '--x': `${50 + Math.cos(ang) * RX}%`, '--y': `${50 + Math.sin(ang) * RY}%` };
  };

  return (
    <div className="funnel" ref={wrapRef}>
      <svg className="funnel__svg" width={dim.w} height={dim.h} viewBox={`0 0 ${dim.w} ${dim.h}`} preserveAspectRatio="none" aria-hidden="true">
        {lines.map((p, i) => <path key={"b" + i} className="funnel__wire" d={p.d} />)}
        {lines.map((p, i) => (
          <path key={"f" + i} className="funnel__flow" d={p.d} style={{ animationDelay: `${i * -0.4}s` }} />
        ))}
      </svg>

      <div className="funnel__orbit">
        {ORBIT.map((it, i) => {
          const Ic = it.icon ? Icon[it.icon] : null;
          return (
            <div className={"fnode" + (it.api ? " fnode--api" : "")} key={i} style={pos(i)} ref={(el) => (nodeRefs.current[i] = el)}>
              <span className="fnode__ic" style={{ background: it.color }}>{Ic ? <Ic width={19} height={19} /> : it.mono}</span>
              <div className="fnode__txt">
                <div className="fnode__nm">{it.name}</div>
                <div className="fnode__cat">{it.cat}</div>
              </div>
            </div>
          );
        })}
      </div>

      <div className="funnel__merge" aria-hidden="true">
        <span className="funnel__mergeline"></span>
        <span className="funnel__mergedot"></span>
      </div>

      <div className="funnel__hub" ref={hubRef}>
        <img className="fhub__icon" src="assets/hermon-icon.png" alt="Hermon" />
      </div>
    </div>
  );
}

Object.assign(window, { IntegrationFunnel });