/* global React */

// Group cross-pollination visualisation — the unique-to-1to1 piece.
// Members at outer ring; arcs show connections made BY a member FOR another member.
// Self at center. Anonymised members shown by initials only.
function CrossPollinationViz({ size = 320 }) {
  const cx = size/2, cy = size/2;
  const ringR = size * 0.36;

  // 12 members, with their initials
  const members = [
    { i: "MC", self: true,  conn: 14, role: "solicitor" },
    { i: "PA", conn: 11, role: "broker" },
    { i: "JW", conn: 9,  role: "accountant" },
    { i: "EH", conn: 8,  role: "strategist" },
    { i: "DP", conn: 7,  role: "agent" },
    { i: "HL", conn: 6,  role: "insolvency" },
    { i: "SK", conn: 5,  role: "architect" },
    { i: "RB", conn: 5,  role: "bookkeeper" },
    { i: "TM", conn: 4,  role: "marketer" },
    { i: "NV", conn: 3,  role: "QS" },
    { i: "FA", conn: 2,  role: "planner" },
    { i: "GO", conn: 2,  role: "advisor" },
  ];
  const N = members.length;
  const pts = members.map((m, i) => {
    const a = (i / N) * Math.PI * 2 - Math.PI/2;
    return { ...m, x: cx + Math.cos(a) * ringR, y: cy + Math.sin(a) * ringR, a };
  });

  // Edges — connections made BY one member FOR another. Hand-curated for clean visual.
  const edges = [
    [0, 2], [0, 4], [0, 6], [0, 1],
    [1, 3], [1, 5], [1, 0],
    [2, 7], [2, 4], [2, 0],
    [3, 8], [3, 1],
    [4, 9], [4, 0],
    [5, 10], [5, 1],
    [6, 11], [6, 0],
    [7, 2], [8, 3], [9, 4],
  ];

  return (
    <svg viewBox={`0 0 ${size} ${size}`} width={size} height={size} className="cp-svg" style={{ display: "block" }}>
      {/* concentric guides */}
      <circle cx={cx} cy={cy} r={ringR} fill="none" stroke="var(--border-soft)" strokeDasharray="2 4"/>
      <circle cx={cx} cy={cy} r={ringR * 0.55} fill="none" stroke="var(--border-soft)" strokeDasharray="2 4"/>

      {/* edges (curved through center for cross-pollination feel) */}
      {edges.map(([a, b], i) => {
        const p1 = pts[a], p2 = pts[b];
        // curve toward center
        const mx = (p1.x + p2.x)/2 * 0.5 + cx*0.5;
        const my = (p1.y + p2.y)/2 * 0.5 + cy*0.5;
        const isSelf = a === 0 || b === 0;
        return (
          <path key={i}
            d={`M ${p1.x} ${p1.y} Q ${mx} ${my} ${p2.x} ${p2.y}`}
            fill="none"
            stroke="var(--accent)"
            strokeOpacity={isSelf ? 0.55 : 0.22}
            strokeWidth={isSelf ? 1.2 : 0.8}
          />
        );
      })}

      {/* nodes */}
      {pts.map((p, i) => {
        const r = 4 + Math.sqrt(p.conn) * 2.2;
        return (
          <g key={i}>
            <circle cx={p.x} cy={p.y} r={r}
              className={p.self ? "node-self" : "node"}
              strokeWidth="1"/>
            <text x={p.x} y={p.y - r - 6} textAnchor="middle" fill={p.self ? "var(--accent)" : "var(--text-3)"}>
              {p.i}
            </text>
          </g>
        );
      })}

      {/* center label */}
      <text x={cx} y={cy - 6} textAnchor="middle" style={{ font: "italic 400 13px var(--serif)", fill: "var(--text)" }}>
        BNI Robina
      </text>
      <text x={cx} y={cy + 10} textAnchor="middle" style={{ font: "500 9px var(--mono)", fill: "var(--text-3)", letterSpacing: "0.1em" }}>
        12 MEMBERS
      </text>
    </svg>
  );
}

window.CrossPollinationViz = CrossPollinationViz;