/* anim-multiagent.jsx — Supervisor with worker agents */

const MultiAgentSim = () => {
  // User asks complex question → supervisor routes to specialists → results come back
  const TASK = "Research Apple's Q1 earnings, draft a 1-paragraph summary, and translate to Spanish.";

  const FLOW = [
    { actor: "user",       to: "supervisor", msg: "Research Q1 earnings + summarize + translate.", phase: 0 },
    { actor: "supervisor", to: "researcher", msg: "Find Apple Q1 2026 earnings highlights.",       phase: 1 },
    { actor: "researcher", to: "supervisor", msg: "Revenue $124B (+5%), iPhone +2%, Services +14%.", phase: 2 },
    { actor: "supervisor", to: "writer",     msg: "Draft 1-paragraph summary from these facts.",   phase: 3 },
    { actor: "writer",     to: "supervisor", msg: "Apple posted Q1 revenue of $124B, up 5% YoY…",  phase: 4 },
    { actor: "supervisor", to: "translator", msg: "Translate the draft to Spanish.",               phase: 5 },
    { actor: "translator", to: "supervisor", msg: "Apple registró ingresos de $124B en el Q1…",    phase: 6 },
    { actor: "supervisor", to: "user",       msg: "Final summary delivered ✓",                     phase: 7 },
  ];

  const { step, playing, toggle, next, prev, reset, containerRef } = useStepper({ steps: FLOW.length, intervalMs: 1700 });

  const POS = {
    user:       { x: 60,  y: 200, color: "#1a1a1a", soft: "#f4f4f1", label: "user" },
    supervisor: { x: 280, y: 200, color: "#2d5fb8", soft: "#e8f0fe", label: "supervisor" },
    researcher: { x: 500, y: 80,  color: "#2e7d4f", soft: "#e3f1e8", label: "researcher" },
    writer:     { x: 500, y: 200, color: "#c7521c", soft: "#fbeadc", label: "writer" },
    translator: { x: 500, y: 320, color: "#6b3fa0", soft: "#ede4f7", label: "translator" },
  };

  const cur = FLOW[step];
  const a = POS[cur.actor], b = POS[cur.to];

  const hasInteracted = (key) => FLOW.slice(0, step + 1).some(f => f.actor === key || f.to === key);

  return (
    <div ref={containerRef}>
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 24 }}>
        <svg viewBox="0 0 600 420" style={{ width: "100%", height: "auto" }}>
          <defs>
            <marker id="ma-arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
              <path d="M0,0 L10,5 L0,10 z" fill="#2d5fb8" />
            </marker>
          </defs>

          {/* All connection lines (faint) */}
          {Object.entries(POS).filter(([k]) => k !== "user").map(([k, p]) => {
            const sup = POS.supervisor;
            return <line key={k} x1={sup.x} y1={sup.y} x2={p.x} y2={p.y} stroke="#e7e7e2" strokeWidth="1" />;
          })}
          <line x1={POS.user.x} y1={POS.user.y} x2={POS.supervisor.x} y2={POS.supervisor.y} stroke="#e7e7e2" strokeWidth="1" />

          {/* Active edge */}
          {a && b && (
            <>
              <line x1={a.x} y1={a.y} x2={b.x} y2={b.y}
                stroke="#2d5fb8" strokeWidth="2"
                markerEnd="url(#ma-arr)" />
              <circle r="5" fill="#c7521c">
                <animateMotion key={step} dur="1.4s" repeatCount="1"
                  path={`M ${a.x} ${a.y} L ${b.x} ${b.y}`} />
              </circle>
            </>
          )}

          {/* Nodes */}
          {Object.entries(POS).map(([key, n]) => {
            const isActor = cur.actor === key || cur.to === key;
            const interacted = hasInteracted(key);
            return (
              <g key={key}>
                {isActor && (
                  <circle cx={n.x} cy={n.y} r={50}
                    fill="none" stroke={n.color} strokeWidth="1.5" opacity="0.4">
                    <animate attributeName="r" from="38" to="56" dur="1.5s" repeatCount="indefinite" />
                    <animate attributeName="opacity" from="0.5" to="0" dur="1.5s" repeatCount="indefinite" />
                  </circle>
                )}
                <circle cx={n.x} cy={n.y} r="38"
                  fill={interacted ? n.soft : "#fbfbfa"}
                  stroke={interacted ? n.color : "#c7c7c0"}
                  strokeWidth={isActor ? 2 : 1}
                  style={{ transition: "all 0.3s" }} />
                <text x={n.x} y={n.y - 2} textAnchor="middle"
                  fontSize="12" fontFamily="Inter Tight, sans-serif"
                  fontWeight="600"
                  fill={interacted ? n.color : "#a3a39d"}>
                  {n.label}
                </text>
                <text x={n.x} y={n.y + 14} textAnchor="middle"
                  fontSize="9" fontFamily="JetBrains Mono, monospace"
                  fill={interacted ? "#6b6b66" : "#c7c7c0"}>
                  {key === "supervisor" ? "router" : key === "user" ? "human" : "agent"}
                </text>
              </g>
            );
          })}
        </svg>

        {/* Message log */}
        <div>
          <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "#6b6b66", marginBottom: 8, textTransform: "uppercase", letterSpacing: "0.06em" }}>
            handoff log
          </div>
          <div style={{ background: "#fff", border: "1px solid #e7e7e2", borderRadius: 6, padding: 12, maxHeight: 320, overflow: "auto", display: "flex", flexDirection: "column", gap: 6 }}>
            {FLOW.slice(0, step + 1).map((f, i) => (
              <div key={i} style={{
                fontSize: 11, fontFamily: "JetBrains Mono, monospace",
                padding: "6px 8px",
                background: i === step ? "#e8f0fe" : "transparent",
                border: i === step ? "1px solid #c5d8f5" : "1px solid transparent",
                borderRadius: 3,
                animation: i === step ? "slideIn 0.3s" : undefined,
              }}>
                <div style={{ color: "#6b6b66" }}>
                  <span style={{ color: POS[f.actor].color, fontWeight: 600 }}>{f.actor}</span>
                  {" → "}
                  <span style={{ color: POS[f.to].color, fontWeight: 600 }}>{f.to}</span>
                </div>
                <div style={{ color: "#1a1a1a", marginTop: 2, fontFamily: "Inter Tight, sans-serif", fontSize: 12 }}>
                  {f.msg}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

window.MultiAgentSim = MultiAgentSim;