/* FriendLines.jsx — animated green bezier curves between friends in a class.
   Measures placed-card centers from the shared ref map and draws into an
   absolutely-positioned SVG over the whole board. */
(function () {
  const { friendPairs } = window.AppData;
  const { useState, useLayoutEffect } = React;

  function FriendLines({ students, cardEls, boardRef, version }) {
    const [paths, setPaths] = useState([]);

    useLayoutEffect(() => {
      const board = boardRef.current;
      if (!board) return;
      const b = board.getBoundingClientRect();
      const center = (id) => {
        const el = cardEls.current.get(id);
        if (!el) return null;
        const r = el.getBoundingClientRect();
        // skip cards scrolled out of their column (basic cull)
        return { x: r.left + r.width / 2 - b.left, y: r.top + r.height / 2 - b.top };
      };
      const all = [];
      for (const placement of ['class1', 'class2']) {
        for (const p of friendPairs(students, placement)) {
          const a = center(p.a), c = center(p.b);
          if (!a || !c) continue;
          // gentle vertical bow on the curve
          const dx = c.x - a.x, dy = c.y - a.y;
          const mx = (a.x + c.x) / 2, my = (a.y + c.y) / 2;
          const len = Math.hypot(dx, dy) || 1;
          const nx = -dy / len, ny = dx / len;
          const bow = Math.min(46, len * 0.18);
          const cxp = mx + nx * bow, cyp = my + ny * bow;
          all.push({
            key: p.key,
            d: `M ${a.x} ${a.y} Q ${cxp} ${cyp} ${c.x} ${c.y}`,
            ax: a.x, ay: a.y, bx: c.x, by: c.y,
          });
        }
      }
      setPaths(all);
    }, [students, version]);

    return React.createElement('svg', { className: 'friend-svg' },
      paths.map(p => React.createElement('g', { key: p.key },
        React.createElement('path', { className: 'friend-line enter', d: p.d, pathLength: 1 }),
        React.createElement('circle', { className: 'friend-dot', cx: p.ax, cy: p.ay, r: 3.5 }),
        React.createElement('circle', { className: 'friend-dot', cx: p.bx, cy: p.by, r: 3.5 })
      ))
    );
  }

  window.FriendLines = FriendLines;
})();